From 6c9b33c5c15441f37ef5cf07c2ac04e7ffb09998 Mon Sep 17 00:00:00 2001 From: orange Date: Sun, 14 Jul 2024 10:14:58 +0800 Subject: [PATCH] docs: readme --- .storybook/main.ts | 2 + .storybook/preview.ts | 1 + README.md | 48 +++++++++++++++++++++ package.json | 1 + pnpm-lock.yaml | 18 ++++---- src/EasyCascaderInput/index.mdx | 14 +++++++ src/EasyCascaderInput/index.stories.tsx | 56 +++++++++++++++++-------- src/index.ts | 3 -- src/mock.ts | 6 --- 9 files changed, 112 insertions(+), 37 deletions(-) create mode 100644 src/EasyCascaderInput/index.mdx diff --git a/.storybook/main.ts b/.storybook/main.ts index 3ad8954..08cd984 100644 --- a/.storybook/main.ts +++ b/.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', diff --git a/.storybook/preview.ts b/.storybook/preview.ts index f3f8a70..d9cd429 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -8,6 +8,7 @@ const preview: Preview = { color: /(background|color)$/i, date: /Date$/, }, + expanded: true, }, }, } diff --git a/README.md b/README.md index 7da5301..23375e7 100644 --- a/README.md +++ b/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 + + 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} +/> +``` diff --git a/package.json b/package.json index 2f10cef..23fc938 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 61d8ad2..b844362 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -58,6 +58,9 @@ devDependencies: '@rollup/plugin-typescript': specifier: ^11.1.1 version: 11.1.1(rollup@3.23.1)(tslib@2.5.3)(typescript@5.1.3) + '@storybook/addon-docs': + specifier: ^7.6.8 + version: 7.6.8(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0) '@storybook/addon-essentials': specifier: ^7.6.8 version: 7.6.8(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0) @@ -3786,7 +3789,7 @@ packages: resolution: {integrity: sha512-8vbeZWqLJOvHaDfeMuoHITGKSz5qWc9u04lnWrQE3VyuSw604PzQM824ZeX9XSjUCeDiE3GuxZe5UKa8J61NQw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@babel/core': 7.22.10 + '@babel/core': 7.23.7 '@jest/types': 29.5.0 '@jridgewell/trace-mapping': 0.3.18 babel-plugin-istanbul: 6.1.1 @@ -3798,7 +3801,7 @@ packages: jest-regex-util: 29.4.3 jest-util: 29.5.0 micromatch: 4.0.5 - pirates: 4.0.5 + pirates: 4.0.6 slash: 3.0.0 write-file-atomic: 4.0.2 transitivePeerDependencies: @@ -5319,7 +5322,7 @@ packages: '@storybook/csf': 0.1.2 '@storybook/types': 7.6.8 fs-extra: 11.1.1 - recast: 0.23.2 + recast: 0.23.4 ts-dedent: 2.2.0 transitivePeerDependencies: - supports-color @@ -8860,8 +8863,8 @@ packages: resolution: {integrity: sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==} engines: {node: '>=8'} dependencies: - '@babel/core': 7.22.10 - '@babel/parser': 7.22.10 + '@babel/core': 7.23.7 + '@babel/parser': 7.23.6 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.0 semver: 6.3.1 @@ -9739,11 +9742,6 @@ packages: engines: {node: '>=6'} dev: true - /pirates@4.0.5: - resolution: {integrity: sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==} - engines: {node: '>= 6'} - dev: true - /pirates@4.0.6: resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==} engines: {node: '>= 6'} diff --git a/src/EasyCascaderInput/index.mdx b/src/EasyCascaderInput/index.mdx new file mode 100644 index 0000000..d0ea6d7 --- /dev/null +++ b/src/EasyCascaderInput/index.mdx @@ -0,0 +1,14 @@ + +import { Canvas, Meta } from '@storybook/blocks' +import * as Stories from './index.stories' + + + +# CascaderInput + + + + + + + diff --git a/src/EasyCascaderInput/index.stories.tsx b/src/EasyCascaderInput/index.stories.tsx index 5c8c47c..5cc06df 100644 --- a/src/EasyCascaderInput/index.stories.tsx +++ b/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 export default meta -export const Defalut = () => { +type Story = StoryObj> + +const Template = (args: EasyCascaderInputProps) => { const [value, onChange] = useState(mockObjectNodes[2]) return ( - data={mockObjectNodes} - getNodeLabel={(node) => node.name} - endAdornment={(node) => node.age && } - label={'label'} + {...args} value={value} onChange={onChange} /> ) } -export const DisplayPath = () => { - const [value, onChange] = useState(mockObjectNodes[1]) +export const Default: Story = { + render: (args) =>