2021 React 구성 요소 라이브러리 개발

이전 글에서, 우리는 새 React 구성 요소 라이브러리에 사용할 도구를 결정했다.다음 사항을 살펴보겠습니다.

JS 솔루션

에서 CSS로 사용stitches

dokz 문서 웹 사이트

지원

react-aria 액세스 용이성 지원

및 Vercel 은 모든 것을 탑재합니다

조직 내부에 좋은 이름과 저장소가 있다고 가정하면 문서 엔진부터 시작합니다.

❯ yarn create dokz-app
yarn create v1.22.5
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "[email protected]" with binaries:
      - create-dokz-app
✔ What is your project named? … awesome-ds

이렇게 하면 폴더 구조를 신속하게 만들고 package.json 에 필요한 의존 항목을 추가합니다.dokz 위에 구축되어 있으므로 폴더 구조에 익숙할 수 있습니다.만약 없다면, 나는 네가 스스로 해 보라고 격려한다Next.js. 왜냐하면 그것은 매우 훌륭하기 때문이다. 나는 그것이 본문의 주요 목적을 초과하게 하고 싶지 않다.
이제 종속 항목을 설치하고 유효한지 확인할 수 있습니다.

yarn install

yarn dev

우리 Next.js 에서 봤어!

대단합니다. 계속하겠습니다.지금 우리는 추가stitches를 하고 시도해야 한다.내가 이전 글에서 언급한 바와 같이 설정은 매우 간단하다.먼저 서버를 중지하고 다음을 수행합니다.

yarn add @stitches/react

우리 가도 돼!fodler sturcutre와 유사하도록 다음 두 파일을 만듭니다. http://localhost:3000/ 및 lib/stitches.config.js

awesome-ds
└───.next  
│
└───lib
│   │   Box.js
│   │   stitches.config.js
│   
└───node_modules
│   
└───pages
|   ...

여기서 나는 두 가지 약속을 추론한다. 구성 요소 라이브러리의 원본 코드를 lib/Box.js 폴더에 저장하고 lib보다 짧기 때문에) components 을 React 구성 요소 이름으로 사용한다. 심리적으로 PascalCase 이React 구성 요소이고 Box.js 이React와 무관한utils 파일이기 때문이다.box.js 함수를 만드는 곳입니다.

import { createStyled } from '@stitches/react';

export const { styled, css } = createStyled({});

여기서 우리는 stitches.config.js 과 styled 을 내보내고 styled 로 돌아갑니다.이것은 그다지 편리하지 않은 것 같은데, 사용하기가 더욱 쉽지 않습니까

import { styled } from '@stitches/react'

그러나 내 관점은 그 어떠한 이유로도 css 의 여러 가지 실례를 가질 수 있을 뿐만 아니라, TypeScript가 자동으로 완성되는 데 좋은 방법을 제공한다는 것이다.우리는 잠시 후에 다시 토론합시다.createStyled는 우리가 사용해야 할 설정 대상을 채택하여 우리의 디자인 시스템을 일치하는 시스템으로 만들었다.만약 네가 익숙하다면 이 창고는 이미 만들어진 것이다.이것은 우리가 다시 사용할 수 있는 변수를 정의할 수 있도록 합니다. 이 변수들은 실행할 때 정의된 값, 자주 사용하는 색, 일치된 간격, 글꼴 크기 등으로 대체됩니다. 따라서 styled부터 시작합니다.

export const { styled, css } = createStyled({
  tokens: {
    colors: {
      $text: '#1A202C',
      $textLight: '#718096',
      $background: '#FFF',
      $accent: '#ED8936',
    },
    space: {
      $0: '0px',
      $1: '4x',
      $2: '8px',
      $3: '12px',
      $4: '16px',
      // etc
    },
    fontSizes: {
      $xs: '12px',
      $sm: '14px',
      $base: '16px',
      $lg: '18px',
      $xl: '20px',
    },
  }
});

여기에서 나는 createStyled 축소와 styled-system 중의 tokens 을 사용했다. 왜냐하면 나는 그것을 매우 좋아하기 때문이다.이제 어떻게 작동하는지 봅시다.space로 이동하여 간단한 구성 요소를 만듭니다.

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

export const Box = styled('div', {
  // here we could define our custom styling if we needed to
})

오, 와, 나 정말 인상적이야.이것이 바로 우리가 구성 요소 라이브러리를 만드는 주요 블록 구축에 필요한 모든 내용입니다!이 간단한 구성 요소는 현재 colors 속성을 받아들이고 우리가 만든 설정을 사용하여 스타일링합니다.어떻게 작동하는지 봅시다.Box.js로 이동하여 코드를 작성하려면 css 만 남겨 둡시다.

---
name: Getting started
---

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

## Box

<Playground>
  <Box
    css={{
      backgroundColor: '$text',
    }}
  >
    <Box as="p" css={{ color: '$accent' }}>
      Holy Moley!
    </Box>
  </Box>
</Playground>

저장, 사용 pages/index.mdx docs 서버 시작, 참조:
Tailwind CSS
이것은 매우 쉽다."그런데 Playground에서만 사용하는 yarn dev 도구와 어떻게 다른가요? 보시다시피 우리는 우리가 정의한 색 표시를 사용하고 글꼴 스타일, 간격, 테두리 반경, z-표시-디자인 시스템을 구성하는 모든 곳으로 확장할 수 있습니다!
우리는 또한 우리가 자주 사용하는 속성을 알고 있다. 우리는 style을 통해 그것들을 더욱 쉽게 사용할 수 있다.

export const { styled, css } = createStyled({
  tokens: {
   // our defined tokens
  },
  utils: {
    p: () => value => ({
      paddingTop: value,
      paddingBottom: value,
      paddingLeft: value,
      paddingRight: value,
    }),
    px: () => value => ({
      paddingLeft: value,
      paddingRight: value,
    }),
    py: () => value => ({
      paddingTop: value,
      paddingBottom: value,
    }),

    bc: () => value => ({
        backgroundColor: value
    })
  }
});

이제 문서 페이지에서 이 페이지를 사용하여 다음 작업을 수행할 수 있습니다.

<Playground>
  <Box
    css={{
      bc: '$text', // instead of long backgroundColor
    }}
  >
    <Box as="p" css={{ color: '$accent', px: '$4' }}>
      Holy Moley!
    </Box>
  </Box>
</Playground>

이렇게우리는 모든 구성 요소에서 일치된 간격과 색을 사용할 수 있습니다!div 원하는 속성에 사용할 수 있는 강력한 기능입니다.예를 들어, stitches, utils, font, font-size, letter-spacing 및 line-height 을 생산하여 각 수요를 만족시킬 수 있다.아니면 수직으로 당신의 내용을 맞추고 싶을 수도 있습니다.

UTIL 사용 설명

우리의 예시에서 보듯이 우리는 font-familyprop으로 전달되는 대상을 연결했습니다.JS 솔루션의 많은 다른 CSS와 반대로 이것은 구축할 때 추출되지 않습니다.즉, yAlign: '$center' 객체가 각 어셈블리 렌더링에서 다시 생성됩니다.이것은 소형 응용 프로그램에 있어서는 문제가 되지 않지만, 나는 어릴 때부터 유용한 습관을 길러야 한다고 건의한다. 특히 이렇게 간단한 때:

const styles = {
  wrapper: {
    bc: '$text',
  },
  text: { color: '$accent', px: '$4' },
};
const ConsumerComponent = () => (
  <Box css={styles.wrapper}>
    <Box as="p" css={styles.text}>
      Holy Moley!
    </Box>
  </Box>
);

또 다른 방법은 css 함수를 사용하여 클래스를 구성하는 것이다.이것은 새 구성 요소를 만들 것입니다. 이 구성 요소는 css 도구로 스타일화된 구성 요소 자체에 전달되는 클래스 이름으로 관리됩니다.

const Wrapper = styled(Box, {
  bc: '$text',
})

const Text = styled(Box, {
  color: '$accent',
  px: '$4'
})

const ConsumerComponent = () => (
  <Wrapper>
    <Text as="p">
      Holy Moley!
    </Text>
  </Wrapper>
);

네, 좋아 보여요. 이제 다음 구성 요소: 단추를 계속할 수 있습니다.액세스 가능성, TypeScript 및 어셈블리 라이브러리 번들 방법에 대해 설명합니다.