Components

Entry Points

Default

@bookipi/bds

Suggested path - packages/bds/src/components/index.ts

Motion

@bookipi/bds/motion

Suggested path - packages/bds/src/motion/index.ts

This package entry has been added to separate motion components (such as animation and interaction) like alerts, modals, drawers, etc.

It also ensures that client-side-only functions like createContext are not added to the main entry @bookipi/bds."

Charts

@bookipi/bds/charts

Suggested path - packages/bds/src/charts/index.ts

This package entry has been added to separate chart components (such as bar, pie, etc.) like bar chart, pie chart, etc.

Install peer dependencies (@visx/group, @visx/mock-data, @visx/scale, @visx/shape, @visx/axis, @visx/grid, @visx/legend, @visx/tooltip, @visx/event) to use the chart components.

How to add or update Components

Design File (Bookipi Design System)

1. Convert Graphics to CSS

• Use tailwind className with the prefix (bk-)

  // [Example] - Banner Component (packages/bds/src/components/Banner.tsx)
  
  import * as Icons from './Icons'
  
  const BannerBase = () => {
    return (
      <div className="bk-bg-primary-100 bk-px-5 bk-py-4 bk-flex-row bk-gap-6 bk-justify-center bk-relative">
        <div className="bk-flex-row bk-gap-[6px] bk-text-gray-500">
          <Icons.Tax className="bk-w-6 bk-h-6" />
          Get $50 for every client you refer
        </div>
        <a
          href={link}
          target="_blank"
          className="bk-flex bk-flex-row bk-gap-1 bk-items-center bk-text-primary-700 bk-text-sm bk-font-medium"
        >
          Join now
          <Icons.Arrow className="bk-w-4 bk-h-4" />
        </a>
        <Icons.X
          className="bk-text-gray-500 bk-w-4 bk-h-4 bk-absolute bk-right-4 bk-top-1/2 -bk-translate-y-1/2 bk-cursor-pointer"
        />
      </div>
    )
  }

2. Move Properties

• Convert Figma component's properties to React properties.

• Keep camelCase for component names and properties.

  import * as Icons from './Icons'
  
  const BannerBase = ({ title, link, linkText, onClose }) => {
    return (
      <div className="bk-bg-primary-100 bk-px-5 bk-py-4 bk-flex-row bk-gap-6 bk-justify-center bk-relative">
        <div className="bk-flex-row bk-gap-[6px] bk-text-gray-500">
          <Icons.Tax className="bk-w-6 bk-h-6" />
          {title}
        </div>
        <a
          href={link}
          target="_blank"
          className="bk-flex bk-flex-row bk-gap-1 bk-items-center bk-text-primary-700 bk-text-sm bk-font-medium"
        >
          {linkText}
          <Icons.Arrow className="bk-w-4 bk-h-4" />
        </a>
        <Icons.X
          className="bk-text-gray-500 bk-w-4 bk-h-4 bk-absolute bk-right-4 bk-top-1/2 -bk-translate-y-1/2 bk-cursor-pointer"
          onClick={onClose}
        />
      </div>
    )
  }

3. Typings & Default Properties

• Add default property values for components (located at packages/bds/src/consts/defaultProps.tsx).

  import { defaultProps } from '@/consts'
  import * as Icons from './Icons'
  
  const BannerBase = ({ title, link, linkText, onClose }) => {
    return (
      <div className="bk-bg-primary-100 bk-px-5 bk-py-4 bk-flex-row bk-gap-6 bk-justify-center bk-relative">
        ...
      </div>
    )
  }
  
  export const Banner = (props) => <BannerBase {...defaultProps.Banner} {...props} />

• Add types to components (in the component file).

  import { defaultProps } from '@/consts'
  import * as Icons from './Icons'
  
  type BannerPropsT = {
    title?: string
    link?: string
    linkText?: string
    onClose?: () => void
  }
  
  const BannerBase: FC<BannerPropsT> = ({ title, link, linkText, onClose }) => {
    return (
      <div className="bk-bg-primary-100 bk-px-5 bk-py-4 bk-flex-row bk-gap-6 bk-justify-center bk-relative">
        ...
      </div>
    )
  }
  
  export const Banner = (props) => <BannerBase {...defaultProps.Banner} {...props} />

4. Add Comments

• Add comments to components (in the component file). This information is linked to the dashboard automatically.

• Put the Figma link in the comment (@design) and the description in the comment (@description).

• The comment order is important.

  ...
  
  /**
    * @design https://www.figma.com/file/6Q9DATjkuXuUdeOhD44biA/Global-Design-Guide-(New)?type=design&node-id=139-5115&t=Bcm9W5oNfhzsrjmf-4
    *
    * @description `BannerBase` is a base component for the `Banner` component.
    */
  const BannerBase: FC<BannerPropsT> = ({ title, link, linkText, onClose }) => {
  ...