build(deps): bump ws from 5.2.2 to 5.2.4

.github/workflows/release.yml

@@ -9,7 +9,7 @@ on:
 
 jobs:
   release:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v1

.storybook/stories/Components/Select.stories.mdx

@@ -65,6 +65,10 @@ Basic usages for `Select` component.
             <p>Normal</p>
             <Select name="select" options={options3} value={43200} />
           </div>
+          <div>
+            <p>ShowTip</p>
+            <Select name="select" options={options3} showTip={true} />
+          </div>
           <div style={{ marginTop: "10px" }}>
             <p>Disabled</p>
             <Select name="select" disabled options={options} />
@@ -93,24 +97,10 @@ Basic usages for `Select` component.
 <Preview>
   <Story name="select-search">
     {() => {
-      const data = [
-        { value: "CentOS", label: "CentOS 5.8 32bit" },
-        { value: "Debian", label: "Debian Jessie 8.1 64bit" },
-        { value: "Ubuntu", label: "Ubuntu Server 14.04.3 LTS 64bit" },
-        { value: "Windows", label: "Windows Server 2003 R2" },
-        { value: "CentOS1", label: "CentOS 5.8 32bit" },
-        { value: "Debian1", label: "Debian Jessie 8.1 64bit" },
-        { value: "Ubuntu1", label: "Ubuntu Server 14.04.3 LTS 64bit" },
-        { value: "Windows1", label: "Windows Server 2003 R2" },
-        { value: "CentOS2", label: "CentOS 5.8 32bit" },
-        { value: "Debian2", label: "Debian Jessie 8.1 64bit" },
-        { value: "Ubuntu2", label: "Ubuntu Server 14.04.3 LTS 64bit" },
-        { value: "Windows2", label: "Windows Server 2003 R2" },
-        { value: "CentOS3", label: "CentOS 5.8 32bit" },
-        { value: "Debian3", label: "Debian Jessie 8.1 64bit" },
-        { value: "Ubuntu3", label: "Ubuntu Server 14.04.3 LTS 64bit" },
-        { value: "Windows3", label: "Windows Server 2003 R2" },
-      ];
+      const data = Array.from({ length: 60 }, (_, index) => ({
+        value: index.toString(),
+        label: `Option ${index + 1}`,
+      }));
       const [pagination, setPagination] = useState({
         page: 1,
         total: data.length,
@@ -164,7 +154,7 @@ Basic usages for `Select` component.
         },
         { value: "Windows", label: "Windows Server 2003 R2" },
       ];
-      return <Select multi name="select-multi" options={options} />;
+      return <Select multi name="select-multi" options={options} showTip/>;
     }}
   </Story>
 </Preview>
@@ -189,7 +179,7 @@ Basic usages for `Select` component.
   </Story>
 </Preview>
 
-### Custom Select Render
+### Custom Select Render Add Support ShowTip
 
 <Preview>
   <Story name="select-render">
@@ -229,6 +219,7 @@ Basic usages for `Select` component.
           optionRenderer={optionRenderer}
           valueRenderer={valueRenderer}
           options={options}
+          showTip={true}
         />
       );
     }}

.storybook/stories/Foundation/IconList.jsx

@@ -0,0 +1,54 @@
+import Icon from "components/Icon";
+import svgSprites from "components/Icon/spirits";
+import { InputSearch } from "components/Input";
+import React, { useState, useEffect } from "react";
+
+const CardItem = ({ name }) => {
+  return (
+    <div className="icon-container">
+      <div className="icon-content">
+        <Icon name={name} size="sm" />
+      </div>
+      <div>{name}</div>
+    </div>
+  );
+};
+
+const IconList = () => {
+  const [icons, setIcons] = useState([]);
+  const [name, setName] = useState("");
+
+  useEffect(() => {
+    let arr = [];
+    svgSprites.replace(/id="icon-([\w-]+)"/g, (a, b) => {
+      arr.push(b);
+      return "$&";
+    });
+    if (!!name) {
+      arr = arr.filter((icon) => icon === name);
+    }
+
+    setIcons(arr);
+  }, [svgSprites, name]);
+
+  return (
+    <div>
+      <div style={{ padding: 20 }}>
+        <InputSearch
+          name="search"
+          placeholder="please input a icon name"
+          onSearch={(name) => {
+            setName(name);
+          }}
+        />
+      </div>
+      <div className="is-multiline">
+        {icons.map((name, i) => (
+          <CardItem key={String(name + i)} name={name} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default IconList;

.storybook/stories/Foundation/Icons.stories.mdx

@@ -0,0 +1,87 @@
+import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
+import ColorPellete from "./ColorPellete.jsx";
+import IconList from "./IconList.jsx";
+import Icon from "components/Icon";
+
+
+<Meta title="Foundation/Iconography" />
+
+## Iconography
+
+Basic usage
+
+Use the `name` attribute to specify the name of the icon
+
+Icon size, including three default sizes of small, medium, and large, set by the size attribute.
+You can also customize the icon size by setting the `size` property to a number
+
+<Preview>
+  <Story name="basic size">
+      <div>
+        <div className="icon-container">
+          <div className="icon-content">
+            <Icon name="github" size="small" />
+          </div>
+          <div>github</div>
+        </div>
+        <div className="icon-container">
+          <div className="icon-content">
+            <Icon name="github" size="medium" />
+          </div>
+          <div>github</div>
+        </div>
+        <div className="icon-container">
+          <div className="icon-content">
+            <Icon name="github" size="large" />
+          </div>
+          <div>github</div>
+        </div>
+        <div className="icon-container">
+          <div className="icon-content">
+            <Icon name="github" size={48} />
+          </div>
+          <div>github</div>
+        </div>
+      </div>
+  </Story>
+</Preview>
+
+Use `type` to specify the icon theme color `dark` / `light` / `coloured`
+
+<Preview>
+  <Story name="basic type">
+      <div>
+        <div className="icon-container">
+          <div className="icon-content">
+            <Icon name="github" type="dark"size="large"  />
+          </div>
+          <div>github</div>
+        </div>
+        <div className="icon-container" style={{background:'#ccc'}}>
+          <div className="icon-content">
+            <Icon name="github" type="light" size="large"  />
+          </div>
+          <div>github</div>
+        </div>
+        <div className="icon-container">
+          <div className="icon-content">
+            <Icon name="github" type="coloured" size="large"  />
+          </div>
+          <div>github</div>
+        </div>
+      </div>
+  </Story>
+</Preview>
+
+
+
+Icon collection
+
+You can search for the icon you want by entering the name
+
+<IconList title="icon-list"/>
+
+## Props
+
+<Props of={Icon} />
+

.storybook/stories/Intro.stories.mdx

@@ -5,3 +5,140 @@ import { Meta } from '@storybook/addon-docs/blocks';
 # Kube Design
 
 Kube Design is a set of React component libraries created for KubeSphere console.
+
+## Requirement
+
+- Node.js 12.18+ ([installation with nvm](https://github.com/creationix/nvm#usage))
+- Yarn 1.22.4+
+
+## Installation
+
+```shell
+yarn add @kube-design/components
+```
+
+## Example
+
+```jsx
+import React, { Component } from "react";
+
+import { Button } from "@kube-design/components";
+
+class Example extends Component {
+  render() {
+    return <Button>Button</Button>;
+  }
+}
+```
+
+## Import All Styles
+
+There are two ways to import style files.
+
+### Use css
+
+The css file can be imported directly, so no additional configuration is required in the webpack configuration file.
+
+```jsx
+import "@kube-design/components/esm/styles/index.css";
+```
+
+### Use scss
+
+If you import the scss file, you may need to compile this part of the scss file in the webpack configuration file.
+
+```jsx
+import "@kube-design/components/esm/styles/index.scss";
+```
+
+webpack.config.js
+
+```js
+// module.rules
+[
+  ...otherRules,
+  {
+    test: /\.s[ac]ss$/i,
+    include: root("node_modules"),
+    use: ["style-loader", "css-loader", "sass-loader"]
+  }
+];
+```
+
+## Modular Import
+
+You can use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to load the component library on demand.
+
+> When loading on demand, styles will also be imported on demand. You don't need to import all styles, only `main.scss`.
+
+Configure the babel as follows:
+
+```js
+// babel.config.js
+
+const getBabelPluginImportConfig = require('@kube-design/components/babel.plugin.import')
+
+...
+
+"plugins": [
+  ['import', getBabelPluginImportConfig()],
+]
+```
+
+Import the `main.scss` instead of `index.scss`
+
+```jsx
+import "@kube-design/components/esm/styles/main.scss";
+```
+
+## Localization
+
+Kube Design use `LocaleProvider` component to support localization.
+
+1. Define locales
+
+```js
+// locales.js
+
+const locales = {
+  "en-US": {
+    HELLO: "Hello!"
+  },
+  "zh-CN": {
+    HELLO: "你好!"
+  }
+};
+
+export default locales;
+```
+
+2. Use the LocaleProvider component to wrap the root node
+
+The `locale` method can be assigned to `window` for easy use.
+
+```jsx
+import React from "react";
+import ReactDOM from "react-dom";
+import { LocaleProvider } from "@kube-design/components";
+import locales from "./locales";
+import App from "./App";
+
+window.locale = LocaleProvider.locale;
+
+const App = () => (
+  <LocaleProvider locales={locales} currentLocale="en">
+    <App />
+  </LocaleProvider>
+);
+
+ReactDOM.render(<App />, document.getElementById("root"));
+```
+
+3. In the root node App.jsx and its child nodes, use `locale.get('key')` to get the language text
+
+```jsx
+import React from "react";
+import { Button } from "@kube-design/components";
+
+export default () => <Button>{locale.get("HELLO")}</Button>;
+```