모든 로직은 Blaster UI기반으로 개발됩니다.
npm install @blastlabs/blaster-ui-tailwind모든 로직은 Blaster UI기반으로 개발됩니다.
다양한 디자인시스템에 대응되는것이 목표입니다.
Blaster UI를 사용함으로서 아래의 문제를 해결하고싶습니다.
- 상태와 행동의 정의가 모두 개인화되어 있습니다. 기본적인 요소들은 상태와 행동이 모두 통일되길 원합니다.
- expo, react, next 컴포넌트를 구성할때 Blaster UI로 구성함으로서 어떤 환경에서도 리액트를 개발할줄 안다면 수정/개발 이 가능하도록 하고싶습니다.
1. 필요한 컴포넌트의 인터페이스를 @types에 정의합니다.
2. src에서 컴포넌트를 정의한 타입 기반으로 개발합니다.
3. XXX.stories.tsx 파일을 생성해 스토리북을 등록합니다.
- lib/storybook-util.ts : 디자인시스템에 사용되는 semantic, variant를 쉽게 옵션으로 추가할수있습니다.
``ts
export default {
title: "Foundation/Text",
component: Text,
argTypes: {
as: {
control: {
type: "select",
},
options: ["h1", "h2", "h3", "h4", "h5", "h6", "p", "span", "div"],
},
type: argTypographySelect,
semantic: argSemanticSelect,
}
} as Meta;
// 자동으로 typogrpahy 셀렉터와 semantic 셀렉터를 추가할수있습니다.
``
- lib/tw-util.ts : tailwind 관련된 함수들을 정의해두었습니다.