0.1.4 • Published 1 year ago

@sinlead/pitaya-ui v0.1.4

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

Pitaya UI

CYBERBIZ 後台管理使用的 Design System Library,目前給:CYBERBIZ Admin、CYBERBIZ Automation 以及 CYBERBIZ OMO 等專案共用。

planned versions:

  • v0: essential legacy components.
  • v1: restructure, redefined guidelines and make use of design tokens

Usage

:warning: 為了可以初始化 i18n.ts 的設定,統一讓所有元件從 src/components/pitayas/index.tsx 匯出。

因此使用此 Pitaya 共用元件庫,元件是從 pitayas/index.tsx 引入,不同於以往 EC 從特定的 PitayaComponent file 引入。

使用此 Pitaya 共用元件庫路徑寫法範例:

import { PitayaComponent } from '@src/components/pitayas';

Devlopment

projects:

  • lib/: library itself.
  • storybook/: served as a consumer project and a documentation site at the same time.

Install

yarn

Workflow

  1. yarn start to start dev server. Go to http://localhost:3000/ to implement components and interate.
  2. (TBD for details) Write unit test.
  3. If everything work as expected. Build the component and test it in storybook project to simulate the usage in other consumer project.

    A. Build the library

    cd lib
    yarn build
    cd ../

    This will build the library to /dist folder, which get reflected in the storybook project as we've set up the link in previous step. B. Setup local link ONCE

    cd storybook
    yarn add @sinlead/pitaya-ui@link:../lib/ # link-install the package
    cd ../

    C. Use the built component in storybook

    cd ./storybook
    yarn storybook

    D. (TBD for details) Write storybook documentation.

yarn workspace pitaya-ui-storybook add @sinlead/pitaya-ui@link:../lib

Deploy

Library

TBC

Storybook

TBC