@zilliz/zui

Zilliz design system

Some rules we need to follow

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

Component style

Material-UI system sx field

1. In business folder we use css module
2. In core folder we use sx

Create Component

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

Add Component Story

1. Go to stories folder
2. Create ZButton.stories.tsx
3. 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"
      />
    );
  };

4. 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

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