docs: readme

.storybook/main.ts

@@ -14,10 +14,12 @@ const config: StorybookConfig = {
       },
     }
   },
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-docs',
   ],
   framework: {
     name: '@storybook/react-webpack5',

.storybook/preview.ts

@@ -8,6 +8,7 @@ const preview: Preview = {
         color: /(background|color)$/i,
         date: /Date$/,
       },
+      expanded: true,
     },
   },
 }

README.md

@@ -1 +1,49 @@
 [demo](https://bitterteasweetorange.github.io/mui-easy-cascader/?path=/story/easycascaderinput--defalut)
+
+mui-easy-cascader is a cascading selection component library based on [Material UI](https://mui.com/material-ui/).
+
+## Feature
+
+- flat data, connect by id
+- search
+- highlight keyword
+- keyboard event
+
+## Install
+
+```
+npm install mui-easy-cascader
+```
+
+## Usage
+
+```jsx
+<EasyCascaderInput<{
+    id:string,
+    name:string,
+    childrenId:string[]
+    pathId:string
+}>
+  data={[
+    {
+      id: "a",
+      name: "a",
+      childrenId: ["b"],
+    },
+    {
+      id: "b",
+      name: "b",
+      childrenId: ["c"],
+      pathId: ["a"]
+    },
+    {
+      id: "c",
+      name: "c",
+      pathId: ["a","b"]
+    },
+  ]}
+  getNodeLabel={(node) => node.name}
+  value={value}
+  onChange={onChange}
+/>
+```

package.json

@@ -54,6 +54,7 @@
     "@rollup/plugin-terser": "^0.4.3",
     "@rollup/plugin-typescript": "^11.1.1",
     "@storybook/addon-essentials": "^7.6.8",
+    "@storybook/addon-docs": "^7.6.8",
     "@storybook/addon-interactions": "^7.6.8",
     "@storybook/addon-links": "^7.6.8",
     "@storybook/blocks": "^7.6.8",

src/EasyCascaderInput/index.mdx

@@ -0,0 +1,14 @@
+
+import { Canvas, Meta } from '@storybook/blocks'
+import * as Stories from './index.stories'
+
+<Meta of={Stories} />
+
+# CascaderInput
+
+
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.DisplayPath} />
+<Canvas of={Stories.Adornment} />
+
+

src/EasyCascaderInput/index.stories.tsx

@@ -1,41 +1,61 @@
 import { Chip } from '@mui/material'
-import type { Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 import { useState } from 'react'
-import { EasyCascaderInput } from '.'
+import { EasyCascaderInput, EasyCascaderInputProps } from '.'
 import { MockObject, mockObjectNodes } from '../mock'
 
 const meta = {
   title: 'EasyCascaderInput',
   component: EasyCascaderInput,
+  argTypes: {
+    helperText: {
+      type: 'string',
+    },
+    value: {
+      control: false,
+    },
+  },
 } satisfies Meta<typeof EasyCascaderInput>
 
 export default meta
 
-export const Defalut = () => {
+type Story = StoryObj<EasyCascaderInputProps<MockObject>>
+
+const Template = (args: EasyCascaderInputProps<MockObject>) => {
   const [value, onChange] = useState<MockObject | null>(mockObjectNodes[2])
 
   return (
     <EasyCascaderInput<MockObject>
-      data={mockObjectNodes}
-      getNodeLabel={(node) => node.name}
-      endAdornment={(node) => node.age && <Chip label={node.age} />}
-      label={'label'}
+      {...args}
       value={value}
       onChange={onChange}
     />
   )
 }
 
-export const DisplayPath = () => {
-  const [value, onChange] = useState<MockObject | null>(mockObjectNodes[1])
+export const Default: Story = {
+  render: (args) => <Template {...args} />,
+  args: {
+    label: 'label',
+    data: mockObjectNodes,
+    getNodeLabel: (node) => node.name,
+  },
+}
 
-  return (
-    <EasyCascaderInput<MockObject>
-      data={mockObjectNodes}
-      getNodeLabel={(node) => node.name}
-      value={value}
-      onChange={onChange}
-      displayPath
-    />
-  )
+export const DisplayPath: Story = {
+  render: (args) => <Template {...args} />,
+  args: {
+    displayPath: true,
+    data: mockObjectNodes,
+    getNodeLabel: (node) => node.name,
+  },
+}
+export const Adornment: Story = {
+  render: (args) => <Template {...args} />,
+  args: {
+    data: mockObjectNodes,
+    getNodeLabel: (node) => node.name,
+    endAdornment: (node) => node.age && <Chip label={node.age} />,
+    startAdornment: (node) => node.age && <Chip label={node.age} />,
+  },
 }

src/index.ts

@@ -1,4 +1 @@
 export * from './EasyCascaderInput'
-export * from './EasyHighlight'
-export * from './EasyPopper'
-export * from './types'

src/mock.ts

@@ -16,7 +16,6 @@ export const mockObjectNodes: MockObject[] = [
     id: 1,
     name: 'children-0',
     pathId: [0],
-    childrenId: [5],
   },
   {
     id: 2,
@@ -33,9 +32,4 @@ export const mockObjectNodes: MockObject[] = [
     id: 3,
     name: 'parent-1',
   },
-  {
-    id: 5,
-    name: 'leaf',
-    pathId: [0, 1],
-  },
 ]