昨天講完 Ant Design
再來我們來看 Chakra UI 和息息相關的 lodestar-app-element

Chakra UI

Chakra UI (一般我會叫查克拉 XD) 是基於 React 開發的 UI Library
他提供彈性 UI 可供客製化開發 component

lodestar-app-element

為什麼會提到 「lodestar-app-element」呢
原因在於 lodestar-app 有分前、後台
以及其他基於 lodestar-app 為核心進行開發
所以有共用的元件，更能有效進行開發

上一篇有提到，專案目前大部分的元件(除了後台，後台大部分還是使用 Ant Design)
都是使用 Chakra UI 開發
而 lodestar-app-element 就是基於 Chakra UI 進行封裝而成的 UI Library

他的資料夾結構也與 lodestar-app 類似
其中共用的元件都放在 src/components 中
components 中不止有基於 Chakra UI 開發的元件
也有使用 styled-components 等其他套件所開發的元件

我們拿其中一個用 Chakra UI 寫出的 Radio Button 來舉例

import { Box, useRadio, UseRadioProps } from '@chakra-ui/react'
import { useAppTheme } from '../../contexts/AppThemeContext'

const RadioCard: React.FC<
  {
    size?: 'xs' | 'sm' | 'md' | 'lg'
    children: React.ReactNode
  } & UseRadioProps
> = ({ size, children, ...props }) => {
  const theme = useAppTheme()
  const { getInputProps, getCheckboxProps } = useRadio(props)
  const input = getInputProps()
  const checkbox = getCheckboxProps()

  return (
    <Box as="label">
      <input {...input} />
      <Box
        {...checkbox}
        cursor="pointer"
        borderColor="#d8d8d8"
        borderWidth="1px"
        borderRadius="md"
        _checked={{
          bg: `${theme.colors.primary[500]}`,
          color: 'white',
          borderColor: `${theme.colors.primary[500]}`,
        }}
        px={size === 'xs' ? 2 : size === 'sm' ? 3 : size === 'md' ? 4 : size === 'lg' ? 6 : 4}
        h={size === 'xs' ? 6 : size === 'sm' ? 8 : size === 'md' ? 10 : size === 'lg' ? 12 : 10}
        lineHeight={size === 'xs' ? 6 : size === 'sm' ? 8 : size === 'md' ? 10 : size === 'lg' ? 12 : 10}
        textAlign="center"
      >
        {children}
      </Box>
    </Box>
  )
}

export default RadioCard

經過再次封裝，變成前台的發票選擇器了

除了這個範例以外，只要在前台用到 Radio Button
都可以基於此元件，客制成自己想要的樣子

明天我們接著看專案裡面的 component

參考文章

#13 No-code 之旅 — 簡單快速開發漂亮的 React 元件 ft. Chakra UI