What is thedumi

Dumi, or dumi in Chinese, is a documentation tool for component development scenarios, providing a one-stop component development experience with Father, who is responsible for building components, and Dumi, who is responsible for component development and component documentation generation.

features

  1. 📦 Out of the box, focus on component development and documentation
  2. 📋 rich Markdown extension, beyond rendering component demo
  3. 🏷 automatically generates component apis based on TypeScript type definitions
  4. The 🎨 theme is easy to customize and you can also create your own Markdown components
  5. 📱 support mobile component library development, built-in mobile hd rendering scheme
  6. 📡 one line of command datafies component assets and concatenates them with downstream productivity tools

Environment to prepare

You need to have Node first, and make sure node is 10.13 or above.

$ node -v
v10.13.0
Copy the code

Initialize scaffolding

Create an empty folder mkdir dumi-ui-site-template

Initialize a depot development scaffolding for site mode

$ yarn create @umijs/dumi-lib --site

run

Execute NPM run dev or NPX dumi dev to start debugging components or writing documentation.

The execution effect is as follows:

Develop a Button component

Create the file Button file under SRC.

The core code

index.tsx

import React, { useState } from 'react';
import styled from 'styled-components';
import clsx from 'clsx';
import * as vars from '.. /styles/vars';
import { isMobile } from '.. /utils/dom';
import { getThemeColorCss } from '.. /styles/themeHelper';
type Props = {
  /** default line box, primary solid color box */type? :'default' | 'primary';
  /** Wireframes use theme colors */active? : boolean;Disable / * * * /disabled? : boolean;/** custom style */style? : React.CSSProperties;/** Button type */htmlType? :'submit' | 'reset' | 'button' | undefined;
  /** block level button */block? : boolean; children? : React.ReactNode;/** Custom className */className? : string;/** Circular button */circle? : boolean;/** dotted line */dashed? : boolean;/** Set the danger button */danger? : boolean;/** Set to display tags, such as div,a,button */
  as? : any;/** Sets the icon component of the button */icon? : React.ReactNode;/** Sets the button loading state */loading? : boolean;/** Whether the ghost button */ghost? : boolean;/** Click callback */onClick? :(e: React.SyntheticEvent) = > void;
  /** The interval between the next click after the click, to prevent repeated click, if true, the default interval is 1s */wait? : number | boolean; };const StyledButton = styled.button` color: inherit; cursor: pointer; margin: 0; display: inline-flex; box-sizing: border-box; outline: 0; position: relative; align-items: center; user-select: none; vertical-align: middle; justify-content: center; text-decoration: none; background-color: transparent; appearance: none; -webkit-tap-highlight-color: transparent; font-weight: 400; white-space: nowrap; background-image: none; 0.3 s help ease the transition: all; user-select: none; touch-action: manipulation; padding: 4px 16px; font-size: 14px; border-radius: 2px; border: 1px solid transparent; height: 32px; &.default { background-color: #fff; border-color:${vars.border};

    ${isMobile ? '&:active' : '&:hover'}{opacity: 0.8; } &.pc:hover, &.active {${getThemeColorCss('border-color')}
      ${getThemeColorCss('color')}
    }

    &.mobile:active {
      background-color: ${vars.activeBg};
    }

    &.danger,
    &.danger:hover,
    &.danger:active {
      color: ${vars.danger};
      border-color: ${vars.danger};
    }
  }

  &.primary {
    ${getThemeColorCss('background-color')}
    ${getThemeColorCss('border-color')}
    color: #fff;

    ${isMobile ? '&:active' : '&:hover'}{opacity: 0.8; } &.danger, &.danger:hover, &.danger:active { background-color:${vars.danger};
      border-color: ${vars.danger};
    }
  }

  &.disabled,
  &.disabled:hover,
  &.disabled:active {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
  }

  &.block {
    width: 100%;
  }

  &.circle {
    min-width: 32px;
    padding: 0;
    border-radius: 50%;
  }

  &.dashed {
    border-style: dashed;
  }

  &.ghost,
  &.ghost:hover {
    color: ${vars.border};
    background-color: transparent;
    border-color: ${vars.border};
  }

  &.anchor {
    margin: unset;
    padding: unset;
    background: unset;
    border: none;
    ${getThemeColorCss('color')}
    height: unset;
  }
`;
const Button = React.forwardRef<HTMLButtonElement, Props>((props, ref) = > {
  const {
    children,
    type = 'default', disabled, block, active, danger, circle, dashed, loading, ghost, className, htmlType, onClick, wait, ... rest } = props;return (
    <StyledButton
      {. rest}
      ref={ref}
      disabled={disabled}
      type={htmlType}
      className={clsx(
        'uc-btn',
        type,
        {
          disabled: disabled || loading.block: block.danger: danger.circle: circle.dashed: dashed.ghost: ghost.pc: !isMobile.anchor: rest.as= = ='a'.active,},className,)} >
      {children}
    </StyledButton>
  );
});

Button.displayName = 'UC-Button';

export default Button;

Copy the code

index.md

-- Title: Button ORDER: 0 group: title: nav: title: 'component'  path: /components
---

## Demo

<code src=".. /.. /demo/Button/index.jsx"></code>

<API src="./index.tsx"></API>
Copy the code

The API is automatically generated directly from the TS type definition

The Demo code

Create a demo folder in the root directory, then create a Button folder, create an index.tsx file,

import React from 'react';
import { Button } from 'dumi-ui-site-template';

export default function App() {
  return (
    <>
      <div title="Base button">
        <Button>Default</Button>
        <Button active>Outline</Button>
        <Button danger>Danger</Button>
        <Button type="primary">Primary</Button>
        <Button type="primary" danger>
          Primary
        </Button>
      </div>

      <div title="Block level button">
        <Button block>Block default</Button>
        <Button block type="primary">
          Block primary
        </Button>
        <Button block danger dashed>
          Block danger
        </Button>
      </div>
    </>
  );
}
Copy the code

A basic Button component is built and exposed in the SRC /index.ts file

export { default as Button } from './Button';
Copy the code

preview

build

  1. Building site documentation

NPM run docs: Build build output to docs-dist

Deploy to the ECS server, preview the address

  1. Build the component development scaffolding

NPM run build outputs the build artifacts to es

Publish to NPM, refer to the tutorial

Next up

  • Deploy personal web sites from 0

series

  • Build cli scaffolding from 0
  • Build the UI component library from 0

Common UI component libraries are recommended

  • ant design
  • Element
  • Naive UI