Storybook과 TailwindCSS의 공식문서에 나와있는 가이드를 통해 설정을 완료를 하였음에도
yarn storybook
을 통해 Storybook 툴 내부를 확인하였으나 내가 생각한대로 css가 변경이 되질 않았다.
TailWindCSS 를 Storybook 툴 내부에서 적용하려면 아래와 같은 세팅을 해주어야 했다. (무척이나 간단..)
// .storybook/preview.js
// 바로 이 부분 !!
import "../../tailwind.css
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};
src/index.tsx
파일에서만 import 해주었기 때문에 Storybook 에서는 TailWindCSS 를 인식하지 못하는 것이었다..😲
기본 뼈대가 될 UI Component 파일을 작성한다. 평소에 React 에서 사용한 Component와 동일하다.
// src/stories/TextInput.tsx
import React from 'react';
export interface TextInputProps {
value: string;
width: string;
padding: string;
border: string;
borderColor: string;
}
export default function TextInput({ value, width, padding, border, borderColor }: TextInputProps) {
return <input className={`${padding} ${width} ${border} ${borderColor || ''}`} value={value} />;
}
Storybook 에서 렌더링 하기 위한 Component의 props 와 Storybook 의 각종 설정등을 작성하는 파일이다.
하나의 컴포넌트는 여러개의 Story 를 가질 수 있으며 Story 마다 다른 arguments 를 전달할 수 있다.
src/stories/TextInput.tsx
의 props들을 설정하고 Storybook 툴 내부를 채워넣어보자!
// src/stories/TextInput.stories.tsx
import React from 'react';
// 기존의 { Meat, Story } 에서 변경된 부분
import { ComponentMeta, ComponentStory } from '@storybook/react';
import TextInput from './TextInput';
export default {
title: 'Component/Input/TextInput',
component: TextInput,
args: {
padding: 'p-[24px]',
width: 'w-[585px]',
border: 'border-2 rounded',
},
} as ComponentMeta<typeof TextInput>;
// ESLint-config-airbnb: "^19.0.4" 에서 화살표함수를 통해 표현식을 사용하니 [Error]를 뿜어냈다..
// 아래 방식을 권유하던데 왜 그런지는 잘 이해가 가질 않는다..
const Template: ComponentStory<typeof TextInput> = function Template(args) {
const { value, padding, width, border, borderColor } = args;
return <TextInput
value={value}
width={width}
padding={padding}
border={border}
borderColor={borderColor}
/>;
};
export const NotTyping = Template.bind({});
NotTyping.args = {
value: '작성 전',
};
export const Typing = Template.bind({});
Typing.args = {
value: '작성 중',
borderColor: 'border-orange-500',
};
기존의 import { Meta, Story } from '@storybook/react'
부분은 Component 의 Props type 을 내보내서 확인을 해야했다.
Storybook v.6.3
에서부터는 그럴 필요없이 Component 를 내보내기만 하여 리액트에서 사용할 수 있도록 변경되었다고 한다.
yarn storybook
현재 이 포스트는 단순히 구현해보며 작성한 포스트이며 Storybook의 다양한 옵션(actions, ...) 들은 경험해보지 못한 상태로 작성한 포스트입니다. 😔