React 구성 요소 라이브러리를 2021에 의미 있게 만들기

이전 글에서 우리는 프로젝트를 성공적으로 설정했다.

을(를) 문서 작성 엔진으로 사용

구성 요소dokz의 클래스명으로 추가

클래스명 생성기 및 관리자
이제 다음을 사용합니다.

typescript 우리의 구성 요소 라이브러리

를 위한 유형 안전 영패와 도구 활용

@react-aria 구성 요소를 쉽게 액세스할 수 있음

실을 꿰매다 타자 스크립트

본고에서 나는 TypeScript를 사용하는 장점에 대해 이야기하지 않겠지만, 내가 말하고자 하는 것은 [불행히도], 당신의 라이브러리가 이미 매우 훌륭할 때, 이것은 그것을 더욱 재미있게 하는 유일한 방법이다.우리는 우리의 라이브러리가 가장 좋을 것이라는 것을 알고 있기 때문에 우리는 직접 TypeScript를 시작할 수 있다.

yarn add --dev typescript @types/react

tsconfig.json(대부분의 내용은 next 에서 추가되고 기본 구성은 에서 복제됨)

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "types": ["react"],
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "noEmit": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "lib", "pages"],
  "exclude": ["node_modules"]
}

이제 lib/*.js 파일의 이름을 .ts(x) 로 바꾸고 마이그레이션을 완료합니다.이제 자동으로 완료되었는지 확인할 수 있습니다. 이것은 우리가 stitches.config.ts 에서 정의한 가능한 값을 나타냅니다.
here

액세스 가능성

건축 무장애 응용 프로그램은 9층 건물의 엘리베이터와 동등하게 중요하다.너는 그것을 짓는 것을 뛰어넘을 수 있지만, 너는 자신을 미워할 것이다. 사람들은 너를 미워할 것이다. 그것을 기존의 건축물에 추가할 것이다.응, 적어도 비싸.
만약 네가 이 화제를 익히고 싶지 않고 읽는 것을 별로 좋아하지 않는다면, 나는 네가 읽는 것을 격려한다 .
하지만'왜 우리가 스스로 해야 하는가? 기준을 정의하면 왜 플랫폼에 내장되지 않았는가'를 알고 싶다면,좋아, 우리 평론에서 토론해 보자. 나는 우리가 아직 하지 못했다고 생각한다.나는 우리가 Date specification 또는 Accessible to all on web.dev 새로운 기능을 얻는 방식과 같은 새로운 API를 얻을 수 있기를 바란다.
앞으로 다가오기 전에 gets improved 의 "React 갈고리 라이브러리를 사용하면 디자인 시스템에 접근할 수 있는 UI 원어를 제공할 수 있습니다."이것은 당신이 채택할 수 있는 가장 간단한 방식으로, 당신의 구성 요소에 접근할 수 있으며, 동시에 당신의 업무가 납품 속도에 만족할 수 있도록 합니다.Button 구성 요소부터 시작합니다.우선, 단순lib/Button.tsx을 추가합니다.

import React from 'react';

import { styled } from '../stitches.config';

const ButtonRoot = styled('button', {
  py: '$2',
  px: '$3',
  bc: '$blue500',
  color: 'white',
  fontSize: '14px',
  br: '$sm',
});

const Button: React.FC = ({ children }) => {
  return <ButtonRoot>{children}</ButtonRoot>;
};

export default Button;

JS 솔루션에서 CSS의 단점 중 하나는 더 많은 변수 이름을 생각해야 한다는 것이다. 예를 들어 못생긴 ButtonRoot
이제 운동장을 만들어서 Button 실제 행동을 보게 하자.창설pages/components/Button.mdx 및 간단한 운동장 코드 추가:

---
name: Button
---

import { Playground } from 'dokz';
import Box from '../../lib/Box';
import Button from '../../lib/Button';

# Button

<Playground>
  <Box css={{ p: '$8' }}>
    <Button>Hello</Button>
  </Box>
</Playground>

상자는 일시적인 보상일 뿐이다
다음은 우리가 가진 것이다.
Intl
이제 첫 번째 react-aria 패키지를 추가합니다.

yarn add @react-aria/button

우리의 용도로 사용lib/Button.tsx:

import React, { useRef } from 'react';
import { useButton } from '@react-aria/button';

import { styled } from '../stitches.config';

const ButtonRoot = styled('button', {
  py: '$2',
  px: '$3',
  bc: '$blue600',
  color: 'white',
  fontSize: '14px',
  br: '$sm',
});

const Button: React.FC = (props) => {
  const ref = useRef<HTMLButtonElement>(null);
  const { buttonProps } = useButton(props, ref);
  const { children } = props;

  return (
    <ButtonRoot {...buttonProps} ref={ref}>
      {children}
    </ButtonRoot>
  );
};

export default Button;

여기서 나는 단지 react-aria을 따를 뿐이다. 나는 항상 사람들이 문서에 직접 방문하고 거기에서 코드를 복제하는 것을 장려한다. 글에서 코드를 복제하는 것이 아니라.인터넷의 코드는 100% 유효하지 않습니다. 공식 파일에서 얻은 것이 아니라면 적어도 90%는 유효합니다.
네, 간단해 보여요.우리는 어떤 성과를 얻었습니까?실제로 .나는 네가 배경을 잘 알지 못할 때 이런 좋은 점을 사기가 매우 어렵다는 것을 확신한다.따라서 이 코드가 왜 필요하고, 단추의'누르기 관리'를 처리해야 하는지에 관심이 있다면, react-aria 저자의 더 깊은 글을 읽어보시기 바랍니다. official instructions.
이제 운동장에서 이것을 시험해 봅시다.

<Button onPress={() => alert('Wow')}>Make Wow</Button>

이제 JS의 CSS 솔루션에 대해 알아보고 몇 가지 버튼 변형을 만듭니다.참고로 a lot 를 사용합니다.

const ButtonRoot = styled('button', {
  py: '$2',
  px: '$3',
  color: 'white',
  fontSize: '14px',
  fontWeight: 'bold',
  transition: '0.2s ease-in-out',

  variants: {
    variant: {
      default: {
        'bc': '$blue500',
        'color': 'white',
        'br': '$md',
        '&:hover': {
          bc: '$blue700',
        },
      },
      pill: {
        'bc': '$blue500',
        'color': 'white',
        'br': '$pill',
        '&:hover': {
          bc: '$blue700',
        },
      },
      outline: {
        'bc': 'transparent',
        'color': '$blue500',
        'border': '1px solid $blue500',
        'br': '$md',
        '&:hover': {
          bc: '$blue700',
          borderColor: 'transparent',
          color: 'white',
        },
      },
    },
  },
});

이것은propvariant과 button 구성 요소에 분배할 클래스 이름 사이에 맵을 생성합니다.variants 사이에 몇 가지 스타일이 중복되었음을 알 수 있습니다.여기에서, 나는 코드를 건조시키기 위해 흔히 볼 수 있는 양식을 단독 변수로 추출하는 것을 고려하지 말라고 강력히 건의한다.당신이 뭔가를 추출해야 한다고 생각하지 않는 한 격리될 수 있습니다.
이제 변형을 정의한 후에 variant 구성 요소에서 어떻게 사용합니까?응, 몇 가지 기교가 있어.

const ButtonRoot = styled('button', {
  /* common styles */

  variants: {
    variant: {
      default: { /* styles */ },
      pill: { /* styles */ },
      outline: { /* styles */ },
    },
  },
});

type Props = React.ComponentProps<typeof ButtonRoot>;

const Button: React.FC<Props> = ({ as, variant = 'default', ...props }) => {
  const ref = useRef<HTMLButtonElement>(null);
  const { buttonProps } = useButton(props as any, ref);

  return (
    <ButtonRoot {...buttonProps} variant={variant} as={as} ref={ref}>
      {props.children}
    </ButtonRoot>
  );
};

우선, 우리는 Button에 의해 생성된 유형을 추정한다.

type Props = React.ComponentProps<typeof ButtonRoot>;

이것은 우리가 정의된 stitchesprop과 variantprop Building a Button 에 접근해서 보여줄 HTML 요소를 덮어쓰도록 허용합니다. (덧붙여 말하면, 이 prop이 as 에 사용될 수 있기를 원하는지, 아니면 단추처럼 보이는 stitches HTML 요소를 처리하기 위해 새로운 구성 요소를 만드는지 논쟁할 수 있습니다.
그 다음으로 우리는 이런 유형을 우리Button에 사용해서 이 구성 요소의 소비자들에게 어떤 도구가 사용할 수 있는지, 특히 무엇을 응용할 수 있는지 보여주겠다<a>.

const Button: React.FC<Props> = ({ as, variant = 'default', ...props }) => {

우리는 또한 Button 원소의 기본값이 아닌 도구를 추출했다. 단지 일을 명확하게 하기 위해서였다.variant 아이템 획득<button> 변체(당신도 사용할 수 있습니다variant.
그리고 우리는 파렴치하게 사용default:

const { buttonProps } = useButton(props as any, ref);

이것은 우리가 처음도 아니고 마지막도 아니다.그러나 당신이 처리하는 유형이 언어에서 일등 시민이 아닐 때 같은 일을 묘사해도 다른 방식으로 완성될 수 있다.이런 상황에서 Button.defaultProps 예상된anyprop과onFocus의 유형 정의에 있는useButtonprop는 일치하지 않습니다.그러나 우리는 그것이 onFocus 라는 것을 알고 사람들이 stitches 도구만 전달하기를 바란다면 이번에는 우리가 사용할 수 있도록 허락할 수 있다.button 의 이러한 변형을 살펴보겠습니다.

--------
name: Button
--------

import { Playground } from 'dokz';
import { Box, Button } from '../../build';

# Button

<Playground>
  <Box css={{ p: '$8', display: 'flex', gap: '$3' }}>
    <Button onPress={() => alert('Wow')}>Make Wow</Button>
    <Button variant="pill" onPress={() => alert('Wow')}>
      Make Wow
    </Button>
    <Button variant="outline" onPress={() => alert('Wow')}>
      Make Wow
    </Button>
  </Box>
</Playground>

저장, 잠시 기다리고, 그리고...
Tailwind CSS
우리 갑니다!
도구가 자동으로 완성되는지 테스트하려면 (안타깝게도 <button> 구성 요소를 사용하는 button 내부에서 간단한 구성 요소를 작성해 보십시오.구성 요소에 전달할 수 있는 추정 가능성 any 을 볼 수 있습니다.
pages/components/Button.mdx provides
그래서 현재 우리는 mdx와lib/Button.tsx가방의 장점을 사용하고 있다.더 많은 패키지를 보십시오. 예를 들어 크기에 따라 레이아웃을 쉽게 변경할 수 있는 방법react-aria을 보십시오.
다음에 우리는 문서와 라이브러리를 구축하고 배치할 것이다. 그러면 우리의 구성 요소 라이브러리의 기초가 완성되고 더 많은 구성 요소를 구축할 수 있다.