@blastlabs/blaster-ui-tailwind

모든 로직은 Blaster UI기반으로 개발됩니다.

다양한 디자인시스템에 대응되는것이 목표입니다.

Why blaster UI

Blaster UI를 사용함으로서 아래의 문제를 해결하고싶습니다.

• 상태와 행동의 정의가 모두 개인화되어 있습니다. 기본적인 요소들은 상태와 행동이 모두 통일되길 원합니다.
• expo, react, next 컴포넌트를 구성할때 Blaster UI로 구성함으로서 어떤 환경에서도 리액트를 개발할줄 안다면 수정/개발 이 가능하도록 하고싶습니다.

이 프로젝트는 tailwind css로 구성되어있습니다.

컴포넌트 추가방법

1. 필요한 컴포넌트의 인터페이스를 @types에 정의합니다.
2. src에서 컴포넌트를 정의한 타입 기반으로 개발합니다.
3. XXX.stories.tsx 파일을 생성해 스토리북을 등록합니다.

유틸함수

• lib/storybook-util.ts : 디자인시스템에 사용되는 semantic, variant를 쉽게 옵션으로 추가할수있습니다.

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 관련된 함수들을 정의해두었습니다.