0.1.0 • Published 3 years ago

udong09-react-components v0.1.0

Weekly downloads
-
License
-
Repository
-
Last release
3 years ago

Udong09 Components

목록

  1. ThemeColors
  2. Size
  3. ThemeBorderRadius
  4. Scaffold
  5. Appbar
  6. WText
  7. Avatar
  8. Button
  9. Checkbox
  10. Radio
  11. Switch
  12. Dialog
  13. Toast
  14. ExpansionTile
  15. TabView
  16. BottomSheet

ThemeColors - 공통

ParameterTypeDescription
black.100stringblack opacity 1.0
black.70stringblack opacity 0.7
black.60stringblack opacity 0.6
black.50stringblack opacity 0.5
black.40stringblack opacity 0.4
black.30stringblack opacity 0.3
black.10stringblack opacity 0.1
green.100stringgreen opacity 1.0

|...

Figma에 정의된 색 정의를 colorScheme 이라는 param으로 각 컴포넌트에 적용합니다.

green, orange, black, white, purple, red 라는 이름으로 설정했습니다.

ex)

function App() {
  return <Button colorScheme={'black.80'}/>
}

reference: https://www.figma.com/file/2EQmMazTEVKDnz9D0DBhvk/%EC%9A%B0%EB%8F%99%EA%B3%B5%EA%B5%AC?node-id=96%3A1708

Size - 공통

ParameterTypeDescription
smstringsmall size
mdstringmedium size
lgstringlarge size

ex)

function App() {
  return <Button size={'md'}/>
}

ThemeBorderRadius - 공통

ParameterTypeDescription
nonestringno radius
smstringsmall radius
mdstringmedium radius
lgstringlarge radius
fullstringfull radius

ex)

function App() {
  return <Button borderRadius={'full'}/>
}

Scaffold

ParameterTypeDescription
appbarReactElementrequired
bodyReactElementrequired

material UI의 Scaffold 와 동일합니다. 화면의 고정 앱바와 components들의 template의 역할을 합니다.

ex)

function App() {
  return <Scaffold
            appbar={
            <Appbar
            title="홈화면"
            action={
              <Button
                size="md"
                variant="ghost"
                text={"완료"}
                fontColor={WColors.gossamer}
                onClick={() => ref.current?.openDialog!()}
              />}
              enableBack
            />}
            body={
              <TabView />
            }
  />
}

Appbar

ParameterTypeDescription
titlestring(optional) 화면의 제목
enableBackboolean(optional) default false. 백버튼 표시여부
leadingReactElement[](optional) 제목 왼쪽 버튼
actionReactElement[](optional) 제목 오른쪽 버튼

App Screenshot

ex)

function App(){   
        <Appbar
            title="홈화면"
            leading={[
            <Button
              size="sm"
              variant="ghost"
              text={"풍덕천동"}
              fontColor={WColors.black}
              leftIcon={<Icon name={icMap} size={"sm"} />}
              onClick={() => ref.current?.openDialog!()}
            />
            ]}
            action={[
            <Button
              size="md"
              variant="ghost"
              fontColor={WColors.gossamer}
              onClick={() => ref.current?.openDialog!()}
              leftIcon={<Icon name={icSearch} size={"md"} />}
            />,
             <Button
              size="md"
              variant="ghost"
              fontColor={WColors.gossamer}
              onClick={() => ref.current?.openDialog!()}
              leftIcon={<Icon name={icQRCode} size={"md"} />}
            />
            ]}
            enableBack={false}
        />}

TextTheme

ParameterFont SizeFont Weight
text124px400
text222px400
text320px400
text418px400
text514px400
text612px400
title124px700
title222px700
title320px700
title418px700
title514px700
title612px700

WText

ParameterTypeDescription
sizexs,sm,md,lg,xl,xxl(optional) default md
textstringrequired
colorThemeColors(optional) default black
themeTextTheme(optional) default text4

ex)

function App() {
  return <WText text={"현금 영수증"} color={'green.100'} theme={"title4"} />;
}

Avatar

ParameterTypeDescription
sizesm,md,lgrequired
srcstringrequired 리소스

ex)

function App() {
  return <Avatar src="https://naver.com" size="lg" />;
}

Button

ParameterTypeDescription
textstringrequired
sizesm,md,lg(optional) default md
radiusThemeBorderRadius(optional) default sm
colorThemeColors(optional) default green.100
fontColorstring(optional) default #FFF
leftIconReactElement(optional) 제목의 왼쪽 아이콘
onClick() => void(optional) 클릭 이벤트
variantghost,outlined,solid(optional) default ghost

App Screenshot App Screenshot

ex)

function App() {
  return <Button
            size="md"
            variant="ghost"
            text={"BUTTON"}
            fontColor={WColors.gossamer}
            onClick={() => ref.current?.openDialog!()}
            leftIcon={<Icon name={icSearch} size={"md"} />}
          />;
}

Checkbox

ParameterTypeDescription
sizesm,md,lgrequired
checkedbooleanrequired 버큰 체크 여부
valueanyrequired 버튼의 값
labelstring(optional) 버튼 오른쪽 텍스트
colorThemeColors(optional) default green.100
onClick(value: boolean) => void(optional) 클릭 이벤트

App Screenshot

ex)

function App() {
  return <Checkbox
            label={"현금 영수증"}
            checked={checkbox}
            value={"checked"}
            onClick={(e) => setCheckbox(!checkbox)}
            size={"sm"}
            color={"green.80"}
          />
}

Radio

ParameterTypeDescription
sizesm,md,lgrequired
checkedbooleanrequired 버큰 체크 여부
valueTrequired 버튼의 값
labelstring(optional) 버튼 오른쪽 텍스트
colorThemeColors(optional) default green.100
onClick(checked: boolean, value: T) => voidrequired 클릭 이벤트

App Screenshot

ex)

function App() {
  return <Radio
            label={"신용카드"}
            checked={checkbox}
            value={"1"}
            onClick={(checked, value) => setValue(value)}
            size={"sm"}
            color={"green.80"}
            checked={value === "1"}
          />
}

Switch

ParameterTypeDescription
sizesm,md,lgrequired
checkedbooleanrequired 버큰 체크 여부
colorThemeColors(optional) default green.100
onClick() => voidrequired 클릭 이벤트

App Screenshot

ex)

function App() {
  return <Switch
            onClick={() => setValue(value)}
            size={"sm"}
            color={"green.80"}
            checked={value === "1"}
          />
}

Dialog

ParameterTypeDescription
textstringrequired
onConfirm() => void(optional) not null 추가 버튼 생성
childrenReactElementrequired dialog를 사용할 하위 component들
leftButtonColorThemeColors(optional) default black.100
leftButtonTextstring(optional) default '취소'
righttButtonColorThemeColors(optional) default black.100
rightButtonTextstring(optional) default '확인'

App Screenshot

ex)

function App() {
  const ref = useRef<DialogType>(null);

  return <Dialog
            ref={ref}
            text="제출하시겠습니까? 우동공구 입니다. 수정하시려면 확인이 필요합니다."
            rightButtonColor={"green.100"}
            onConfirm={() => {}}
            children={
              <Scaffold 
                appbar={<Appbar
                  action={
                     <Button
                        size="md"
                        variant="ghost"
                        text={"완료"}
                        fontColor={WColors.gossamer}
                        onClick={() => ref.current?.openDialog!()}
                      />
                  }
                 />}
                body={<TabView />}
              />
            }
          />
}

Toast - Custom Hook

ParameterTypeDescription
sendToast(text: string) => voiduseToast 선언 후 사용

ex)

function App() {
  const { sendToast } = useToast();
  return <Button
            text={"TOAST"}
            onClick={() => sendToast("완료되었습니다.")}
            size={"sm"}
            color={"green.80"}
            checked={value === "1"}
          />
}

ExpansionTile

ParameterTypeDescription
titlestringrequired tile의 헤더 텍스트
itemsT[]required tile의 하위 아이템 리스트
label(item: T) => stringrequired 아이템에 표시될 텍스트
checkedIndexnumber(optional) 선택된 아이템의 index
onClickItem(item: T, index: number) => void(optional) 아이템 클릭시 이벤트

App Screenshot

ex)

function App() {
  return  <ExpansionTile
             title="매장 선택"
             items={option1, option2, option3]}
             label={(item) => item.name}
             checkedIndex={checkedIndex}
             onClickItem={(item, index) => setSelectedOption(index)}
          />
}

TabView

ParameterTypeDescription
tabsstring[]required tile의 헤더 텍스트
panelsReactElement[]required tile의 하위 아이템 리스트
tabColorsThemeColors[](optional) 선택시 표시될 탭의 색상
isFittedboolean(optional) default false. 레이아웃 full 여부
onChangeTab(index: number) => void(optional) 탭 클릭시 이벤트

App Screenshot

BottomSheet

ParameterTypeDescription
childrenReactElementrequired 내용
isOpenbooleanrequired 모달 오픈 여부
onClose() => voidrequired 닫기 액션

useBottomSheet 과 같이 선언하여 사용한다. BottomSheet Component에 useBottomSheet 의 isOpen과 onClose Prop을 넘긴다.

ex)

function App() {
  const { onOpen, isOpen, onClose } = useBottomSheet();

  return <BottomSheet isOpen={isOpen} onClose={onClose}>
                <Checkbox
                  label={"현금 영수증"}
                  checked={checkbox}
                  value={""}
                  onClick={(e) => setCheckbox(!checkbox)}
                  size={"sm"}
                  color={"green.80"}
                />
          </BottomSheet>
}