Track-1-Design-system

Track-1의 디자인 시스템 라이브러리

Features

• Cover: 앨범 커버 디자인
• BottomSheet: 바텀시트
• Button: 각종 버튼
• CheckBox: 체크박스

Installation

yarn add track-1-design-system

Usage

1. Cover

   // propsinterfaceCoverProps{
   imageUrl: string;
   shape: "circle"|"rectangle"|"window";
   width: number;
   height: number;align?: "center"|"rightBottom";isPlay?: boolean;isBlur?: boolean;onPlay?: ()=>void;}

   const[isPlay,setIsplay]=useState(false);functiononPlay(){setIsplay((prev)=>!prev);}return<CoverimageUrl="url"shape="circle"width={12}height={12}isPlay={isPlay}onPlay={onPlay}/>;

2. BottomSheet

   //propsexportinterfaceBottomSheetPropsextendsPropsWithChildren<ComponentProps<typeofSheet>>{header?: ReactNode;onClose: ()=>void;}

   const[isOpen,setIsOpen]=useState(false);functiononClose(){setIsOpen(false);}functiononOpen(){setIsOpen(true);}return(<><buttontype="button"onClick={onOpen}>
   클릭하여 바텀시트 열기
   </button><BottomSheetisOpen={isOpen}onClose={onClose}header="Category"><>바텀시트</></BottomSheet></>);

3. Button

   //propsinterfaceButtonProps{
   children: ReactNode;size?: "small"|"middle"|"large";type?: "free"|"bottom";backgroundColor?: "purple"|"pink"|"green"|"grey";color?: "white"|"black"|"grey";disabled?: boolean;onClick?: ()=>void;}

   <Buttonsize="small"type="free"backgroundColor="purple"color="white"disable>
   button
   </Button>

4. CheckBox

   // propsexportinterfaceCheckBoxPropsextendsOmit<InputHTMLAttributes<HTMLInputElement>,"size">{checked?: boolean;}

   const[checked,onChange]=useState<boolean>false;return<CheckBoxchecked={checked}onChange={(e)=>onChange(e.target.checked)}/>;