@zilliz/zui NPM

Zilliz design system

Some rules we need to follow

If we need to export className, export classes prop like mui.
All css module named as index.module.css
test

Component style

Material-UI system sx field

In business folder we use css module
In core folder we use sx

Create Component

Go to core folder
Create component folder like ZButton
Create component like ZButton.tsx, and component name need start with Z like ZButton.
Export component in core/index.tsx (Easy for use as lib)

Add Component Story

Go to stories folder
Create ZButton.stories.tsx
Export different component demos like:

  import React from 'react';
  import { ComponentMeta, ComponentStory } from '@storybook/react';
  import { action } from '@storybook/addon-actions';
  import { ZButton } from '../../../core';
  // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export

  export default {
    title: 'Basic/Button',
    component: ZButton,
  } as ComponentMeta<typeof ZButton>;

  export const Primary: ComponentStory<typeof ZButton> = args => {
    return (
      <ZButton
        {...args}
        onClick={action('custom button click')}
        children="Primary Button"
        color="primary"
      />
    );
  };

Component doc (Optional).

Test Components

Unit tests:
1. Go to test folder
2. Create ZButton.spec.tsx and implement the tested behavior
3. Run yarn test to check your work
Visual tests:
We use chromatic for automate visual testing. It will detecte UI changes whenever you open a new pull request to main branch. You can go to PR checks and click UI test to see detail.

Publish

Create PR to dev branch
Merge into dev branch after code review
Action will publish to dev website
Create PR to main branch
Paste story component url in comment
Merge into main branch after ui team review.
Action will publish to prod website
Release with tag, change version in package.json, and action will publish to npm.

@emotion/react @emotion/styled @mui/lab @mui/material @mui/x-data-grid @mui/x-date-pickers @types/react-beautiful-dnd clsx d3 dayjs lodash papaparse react react-beautiful-dnd react-dom react-syntax-highlighter

@everything-registry/sub-chunk-1076 @infinitebrahmanuniverse/nolb-_zi

28 days ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

2 years ago

1 year ago

2 years ago

1 year ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago