스토리 북 및 반응으로 디자인 시스템 구축

먼저 NPX StoryBook Init를 사용하여 React Project에서 스토리 북을 설치하고 구성하고 NPM Run StoryBook을 실행하여 로컬 개발 서버를 시작하십시오. 2. 함수 또는 유형별로 구성 요소 파일 구조를 구성하고 각 구성 요소 디렉토리에서 다른 상태를 정의하기 위해 해당 .stories.js 파일을 만듭니다. 3. Storybook의 Args 및 Controls 시스템을 사용하여 다양한 대화식 상태의 테스트를 용이하게하기 위해 동적 속성 조정을 달성합니다. 4. MDX 파일을 사용하여 설계 사양, 접근성 지침 등이 포함 된 풍부한 텍스트 문서를 작성하고 구성을 통해 MDX로드를 지원합니다. 5. 테마를 통해 디자인 토큰을 정의하고 ThemeProvider를 사용하여 preview.js에서 테마 스타일을 전 세계적으로 주입합니다. 6. JEST 및 React Testing Library 통합 단위 테스트, 색수로 시각적 회귀 테스트 및 @Storybook/Addon-A11y를 통해 접근성 문제를 확인합니다. 마지막으로 독립적 인 개발, 시각적 문서, 자동 테스트 및 설계 및 개발 협업을 홍보하는 확장 가능한 설계 시스템. 이 시스템은 부품을 점차적으로 반복하여 팀 간의 효율적인 재사용을 달성하여 UI 일관성 및 개발 효율성을 향상시키는 데 필요한 도구가 될 수 있습니다.

스토리 북 및 React를 사용하여 디자인 시스템을 구축하는 것은 팀과 제품에 걸쳐 확장되는 일관되고 재사용 가능한 UI 구성 요소를 만드는 강력한 방법입니다. StoryBook은 UI 구성 요소를위한 고립 된 개발 환경을 제공하여 전체 앱에 의존하지 않고 분리하여 더 쉽게 빌드, 테스트 및 문서화 할 수 있습니다. React와 페어링되면이 콤보는 현대적인 디자인 시스템의 설정이됩니다.

효과적으로 접근하는 방법은 다음과 같습니다.

1. React로 스토리 북을 설정하십시오

React 프로젝트에 스토리 북을 추가하여 시작하십시오. Create React App 또는 표준 React 설정을 사용하는 경우 가장 쉬운 방법은 자동화 된 CLI를 사용하는 것입니다.

 NPX Storybook Init

이 명령은 스토리 북을 설치하고 필요한 구성 파일을 추가하고 예제 스토리를 설정합니다. 완료되면 실행 :

 NPM 실행 스토리 북

이것은 일반적으로 http://localhost:6006 에서 스토리 북 개발 서버를 시작하여 구성 요소를 실시간으로 볼 수 있습니다.

팁 : init 명령은 vite 및 next.js를 포함한 대부분의 반응 설정과 잘 어울립니다. 사용자 정의 웹 팩 구성을 사용하는 경우 .storybook/main.js 적절하게 조정해야 할 수도 있습니다.

2. 구성 요소와 이야기를 구성하십시오

잘 조직 된 파일 구조는 유지 관리의 핵심입니다. 그룹 구성 요소는 논리적으로 (예 : 특징 또는 유형) (예 : atoms , molecules , organisms ) 또는 Button , Form , Navigation 같은 범주별로.

예제 구조 :

 SRC/
Components/
│ │ ─신 버튼/
button.jsx
button.stories.js
button.module.css
│ │ │ 착수/ input/
intput.jsx
intput.stories.js
Styles/ Styles/
Theme.js

각 .stories.js 파일에서 다른 상태에서 구성 요소를 어떻게 렌더링 해야하는지 정의하십시오.

 // button.stories.js
'./button'에서 {button} 가져 오기;

내보내기 기본값 {
  제목 : '구성 요소/버튼',
  구성 요소 : 버튼,
  Argtypes : {
    변형 : {Control : 'select', 옵션 : [ '기본', '2 차']},
  },
};

Const DIRMANC = {내보내기
  args : {
    레이블 : 'Click Me',
    변형 : '기본',
  },
};

수출 const disabled = {
  args : {
    레이블 : '비활성화',
    장애인 : 사실,
  },
};

이것은 대화식 컨트롤 (소품 드롭 다운)을 생성하고 디자이너와 개발자가 시각적으로 변형을 탐색 할 수 있도록합니다.

3. 동적 테스트를 위해 Args 및 컨트롤을 사용하십시오

Storybook의 Args 시스템을 사용하면 구성 요소 입력을 즉시 변경할 수 있습니다. 컨트롤 과 결합하여 사용자는 UI에서 직접 소품을 조정할 수 있습니다. 테스트 에지 케이스를 테스트하고 유연성을 보여줍니다.

예:

 Argtypes : {
  크기 : {컨트롤 : '라디오', 옵션 : [ 'small', 'medium', 'large']},
  onclick : {action : 'clicked'}, // logs clicks
}

즉, QA, PMS 또는 디자이너는 버튼과 상호 작용하여 코드가 터치하지 않고 클릭 또는 크기를 조정했을 때 어떻게 작동하는지 확인할 수 있습니다.

전문가 팁 : controls: { exclude: ['id', 'className'] } 컨트롤 패널에서 내부 또는 비 시각 소품을 숨기려면}.

4. MDX를 사용하여 문서화하고 설계 지침을 추가하십시오

코드 예제를 넘어서십시오. MDX (Markdown JSX)를 사용하여 디자인 토큰, 사용 지침, 접근성 메모 및 Figma 링크가 포함 된 풍부한 문서를 작성하십시오.

Button.stories.mdx 파일 생성 :

 '@Storybook/Blocks'에서 {메타, 스토리, 캔버스} 가져 오기;
import * './button.stories.js'에서 Buttonstories as as

<meta title = "components /button"component = {button} />

# 버튼

버튼을 사용하여 동작을 트리거하십시오. 주요 작업의 기본 버튼을 선호하고 대안의 경우 2 차.

<canvas>
  <story of = {buttonstories.primary} />
</캔버스>

## 접근성

항상 설명 레이블을 포함하십시오. `aria-label &#39;이 올바르게 레이블이 지정되지 않는 한 아이콘 전용 버튼을 피하십시오.

그런 다음 .storybook/main.js 업데이트하여 MDX 파일로드하도록 스토리 북을 구성하십시오.

 module.exports = {
  이야기 : [ '../src/**/*.stories.@(js| jsx|tsotsx|mdx)'],
  // ...
};

이제 디자인 시스템은 살아있는 스타일 가이드가됩니다.

5. 디자인 토큰과 테마를 통합하십시오

테마 개체를 통해 시각적 스타일 (색상, 타이포그래피, 간격)을 공유하며, 종종 styled-components , emotion 또는 CSS-in-JS를 사용합니다.

예제 테마 :

 // 테마 .js
내보내기 const 테마 = {
  색상 : {
    기본 : '#007bff',
    보조 : '#6C757D',
  },
  간격 : (요인) =>`$ {0.5 * factor} rem`,
  타이포그래피 : {
    제목 : 'Bold 1.5rem System-UI',
  },
};

장식 자로 이야기를 마무리하여 .storybook/preview.js 에서 전 세계적으로 테마를 적용하십시오.

 'Styled-Components'에서 {themeprovider} 가져 오기;
'../src/styles/theme'에서 {chorege} 가져 오기;

수출 const 데코레이터 = [
  (이야기) => (
    <ThemeProvider 테마 = {테마}>
      <스토리 />
    </themeprovider>
  ),)
];

이제 모든 구성 요소는 일관된 스타일로 렌더링됩니다.

6. 테스트 및 자동화 추가

강력한 설계 시스템에는 테스트가 필요합니다. 결합하다:

• Jest는 단위 및 동작 테스트를위한 테스트 라이브러리를 반응합니다 .
• 시각적 회귀 테스트를위한 색채 (스토리 북 애드온).

색채 설치 :

 npx ratromice -project-token = <your-token>

CI로 실행되며 모든 스토리를 이전 버전과 비교하여 의도하지 않은 시각적 변경 사항을 포착합니다.

또한 접근성 문제를 포착하기 위해 A11y Addon을 추가하는 것을 고려하십시오.

 npm install @storybook/addon-a11y

그런 다음 .storybook/main.js 에서 활성화하십시오.

 애드온 : [ '@Storybook/Addon-A11y'];

이제 자동 점검이있는 UI에 접근성 탭이 표시됩니다.

최종 생각

Storybook과 React를 사용하여 디자인 시스템을 구축하는 것은 구성 요소에 관한 것이 아니라 디자인과 개발 사이에 공유 언어를 만드는 것입니다. 올바른 설정을 사용하면 다음을 얻을 수 있습니다.

• 고립 된 구성 요소 개발
• 대화식 문서
• 시각적 테스트 및 일관성
• 협업 친화적 인 인터페이스

작게 시작하고 (버튼, 입력) 일관성을 조기에 시행하며 반복적으로 성장하십시오. 시간이 지남에 따라 디자인 시스템은 제품 팀의 힘이됩니다.

기본적으로 REACT를 사용하고 UI 품질에 관심이있는 경우 스토리 북은 선택 사항이 아닙니다. 필수입니다.

위 내용은 스토리 북 및 반응으로 디자인 시스템 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!