myshell-react-lib 0.1.5 → 0.1.6

package/src/stories/Modal.stories.tsx

@@ -1,144 +0,0 @@
-/* eslint-disable import/no-unused-modules */
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import React, { useState } from 'react';
-
-import { Button } from '../components/button/button';
-import { Modal, ModalBody, ModalFooter } from '../components/modal';
-
-const meta = {
-  title: 'Components/通用/Modal-弹窗',
-  component: Modal,
-  subcomponents: { ModalContent: ModalBody as any },
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  args: {
-    // open: true
-  },
-} satisfies Meta<typeof Modal>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Demo: Story = {
-  args: {
-    ...meta.args, // 继承默认参数
-  },
-  render: (args) => {
-    const [open, setOpen] = useState(false);
-    const [open1, setOpen1] = useState(false);
-    const [open2, setOpen2] = useState(false);
-    const [open3, setOpen3] = useState(false);
-    const [open4, setOpen4] = useState(false);
-    const [open5, setOpen5] = useState(false);
-
-    return (
-      <div className="w-[40vw] px-3 rounded-md space-y-2">
-        <div className="w-full text-sm">
-          先将旧版chakra
-          modal归拢到此组件，还不是特别完善，比如有哪几种宽度，哪几种固定样式等，后面有空继续加
-        </div>
-        <div className="flex flex-col justify-center items-center space-y-2">
-          <Button onClick={() => setOpen(true)}>Open</Button>
-          <Button onClick={() => setOpen1(true)}>Open 带 Footer</Button>
-          <Button onClick={() => setOpen2(true)}>Open Notification Info</Button>
-          <Button
-            className="bg-Colors-Background-Success-Bolder hover:bg-Colors-Background-Success-Hover"
-            onClick={() => setOpen3(true)}
-          >
-            Open Notification Success
-          </Button>
-          <Button onClick={() => setOpen4(true)}>
-            Open Notification Warning
-          </Button>
-          <Button color="error" onClick={() => setOpen5(true)}>
-            Open Notification Error
-          </Button>
-        </div>
-        <Modal
-          open={open5}
-          {...args}
-          isNotification
-          title="Info Notification"
-          state="error"
-          description='This is an info description which directly indicates a neutral informative change or action. (e.g., "We are
-            providing new services for all developers.")'
-          onClose={() => setOpen5(false)}
-          onConfirm={() => {
-            console.log('confirm');
-            setOpen5(false);
-          }}
-          cancelText="cancel"
-          confirmText="confirm"
-        />
-        <Modal
-          open={open4}
-          {...args}
-          isNotification
-          title="Info Notification"
-          state="warning"
-          description='This is an info description which directly indicates a neutral informative change or action. (e.g., "We are
-            providing new services for all developers.")'
-          onClose={() => setOpen4(false)}
-          onConfirm={() => {
-            console.log('confirm');
-            setOpen4(false);
-          }}
-          cancelText="cancel"
-          confirmText="confirm"
-        />
-        <Modal
-          open={open3}
-          {...args}
-          isNotification
-          title="Info Notification"
-          state="success"
-          description='This is an info description which directly indicates a neutral informative change or action. (e.g., "We are
-            providing new services for all developers.")'
-          onClose={() => setOpen3(false)}
-          onConfirm={() => {
-            console.log('confirm');
-            setOpen3(false);
-          }}
-          cancelText="cancel"
-          confirmText="confirm"
-        />
-        <Modal
-          open={open2}
-          {...args}
-          isNotification
-          title="Info Notification"
-          state="info"
-          description='This is an info description which directly indicates a neutral informative change or action. (e.g., "We are
-            providing new services for all developers.")'
-          onClose={() => setOpen2(false)}
-          onConfirm={() => {
-            console.log('confirm');
-            setOpen2(false);
-          }}
-          cancelText="cancel"
-          confirmText="confirm"
-        />
-        <Modal open={open} {...args} onClose={() => setOpen(false)}>
-          <ModalBody title="Modal Title">
-            <div className="p-6">Modal Content</div>
-          </ModalBody>
-        </Modal>
-        <Modal open={open1} {...args} onClose={() => setOpen1(false)}>
-          <ModalBody title="Modal Title">
-            <div className="p-6">Modal Content</div>
-            <ModalFooter className="space-x-2">
-              <Button variant="secondary">关闭</Button>
-              <Button>确定</Button>
-            </ModalFooter>
-          </ModalBody>
-        </Modal>
-      </div>
-    );
-  },
-};

package/src/stories/NavigationBar.stories.tsx

@@ -1,81 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { NavigationBar } from '../components/navigation-bar';
-import React from 'react';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/通用/NavigationBar-一级页面导航栏',
-  component: NavigationBar,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-    nextjs: {
-      appDirectory: true, // 如果组件里有用到router next/navigation，则需要设置此配置
-    },
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: {
-    title: 'Title',
-    showSearchBar: false,
-    searchValue: '',
-    energy: 0,
-    dailyEnergy: 0,
-  },
-  argTypes: {
-    title: {
-      control: 'text',
-    },
-    energy: {
-      control: 'number',
-    },
-    dailyEnergy: {
-      control: 'number',
-    },
-  },
-} satisfies Meta<typeof NavigationBar>;
-
-export default meta;
-// export const Default: StoryObj<typeof meta> = {
-//   // 这里不需要设置 args，因为它会继承 meta 中的 args
-// };
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const NavigationBarDemo: Story = {
-  args: {
-    ...meta.args, // 继承默认参数
-  },
-  render: (args) => {
-    return (
-      <div className="min-w-[60vw] w-full py-6 rounded-md flex flex-col justify-center items-center  bg-Colors-Background-Neutral-Primary-Default">
-        <div className="w-full">
-          <div className="w-full mt-6">Default</div>
-          <NavigationBar {...args} />
-        </div>
-
-        <div className="w-full">
-          <div className="w-full mt-6">search bar</div>
-          <NavigationBar {...args} showSearchBar>
-            children
-          </NavigationBar>
-        </div>
-        <div className="w-full">
-          <div className="w-full mt-6">search bar</div>
-          <NavigationBar {...args} showSearchBar />
-        </div>
-        <div className="w-full">
-          <div className="w-full mt-6">自定义</div>
-          <NavigationBar {...args}>children</NavigationBar>
-        </div>
-        <div className="w-full">
-          <div className="w-full mt-6">EnergyProgress</div>
-          <NavigationBar {...args} dailyEnergy={20} energy={10}></NavigationBar>
-        </div>
-      </div>
-    );
-  },
-};

package/src/stories/Notification.stories.tsx

@@ -1,276 +0,0 @@
-/* eslint-disable import/no-unused-modules */
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { Toaster } from 'react-hot-toast';
-
-import { Button } from '../components/button/button';
-import { useNotification } from '../common/hooks/useNotification';
-
-const meta = {
-  title: 'Components/反馈/Notification-全局提示',
-  // component: MessageDemo,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  args: {},
-  argTypes: {},
-} satisfies Meta;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Demo: Story = {
-  args: {
-    ...meta.args, // 继承默认参数
-  },
-  render: (args) => {
-    const { error, info, success, warning, message } = useNotification();
-
-    return (
-      <div className="w-[70vw] min-h-[200px] py-10 px-3 rounded-md space-y-3">
-        <Toaster
-          position="top-center"
-          toastOptions={{
-            duration: 3000,
-          }}
-        />
-
-        <div className="w-full grid grid-cols-4 gap-4">
-          <div className="flex flex-col space-y-2 justify-center items-center">
-            <div> State</div>
-            <Button
-              onClick={() => {
-                info({ content: 'This is a message!' });
-              }}
-            >
-              info message
-            </Button>
-
-            <Button
-              onClick={() => {
-                success({ content: 'This is a message!' });
-              }}
-              className="bg-Colors-Background-Success-Bolder"
-            >
-              success message
-            </Button>
-            <Button
-              onClick={() => {
-                warning({ content: 'This is a message!' });
-              }}
-            >
-              warning message
-            </Button>
-            <Button
-              onClick={() => {
-                error({ content: 'This is a message!' });
-              }}
-              color="error"
-            >
-              error message
-            </Button>
-            <Button
-              onClick={() => {
-                message({ content: 'This is a message!' });
-              }}
-              variant="secondary"
-            >
-              normal message
-            </Button>
-          </div>
-          <div className="flex flex-col space-y-2 justify-center items-center">
-            <div> Plain button</div>
-            <Button
-              onClick={() => {
-                info(
-                  {
-                    content: 'This is a message!',
-                    action: <Button variant={'plain'}>Open</Button>,
-                  },
-                  30000
-                );
-              }}
-            >
-              info message
-            </Button>
-
-            <Button
-              onClick={() => {
-                success({
-                  content: 'This is a message!',
-                  action: <Button variant={'plain'}>Open</Button>,
-                });
-              }}
-              className="bg-Colors-Background-Success-Bolder"
-            >
-              success message
-            </Button>
-            <Button
-              onClick={() => {
-                warning({
-                  content: 'This is a message!',
-                  action: <Button variant={'plain'}>Open</Button>,
-                });
-              }}
-            >
-              warning message
-            </Button>
-            <Button
-              onClick={() => {
-                error({
-                  content: 'This is a message!',
-                  action: <Button variant={'plain'}>Open</Button>,
-                });
-              }}
-              color="error"
-            >
-              error message
-            </Button>
-            <Button
-              onClick={() => {
-                message({
-                  content: 'This is a message!',
-                  action: <Button variant={'plain'}>Open</Button>,
-                });
-              }}
-              variant="secondary"
-            >
-              normal message
-            </Button>
-          </div>
-
-          <div className="flex flex-col space-y-2 justify-center items-center">
-            <div> Close button</div>
-            <Button
-              onClick={() => {
-                info({ content: 'This is a message!', isClosable: true });
-              }}
-            >
-              info message
-            </Button>
-
-            <Button
-              onClick={() => {
-                success({ content: 'This is a message!', isClosable: true });
-              }}
-              className="bg-Colors-Background-Success-Bolder"
-            >
-              success message
-            </Button>
-            <Button
-              onClick={() => {
-                warning({ content: 'This is a message!', isClosable: true });
-              }}
-            >
-              warning message
-            </Button>
-            <Button
-              onClick={() => {
-                error({ content: 'This is a message!', isClosable: true });
-              }}
-              color="error"
-            >
-              error message
-            </Button>
-            <Button
-              onClick={() => {
-                message({ content: 'This is a message!', isClosable: true });
-              }}
-              variant="secondary"
-            >
-              normal message
-            </Button>
-          </div>
-          <div className="flex flex-col space-y-2 justify-center items-center">
-            <div> Plain&Close button</div>
-            <Button
-              onClick={() => {
-                info(
-                  {
-                    content: 'This is a message!',
-                    action: (
-                      <Button
-                        variant={'plain'}
-                        size={'md'}
-                        className="font-normal"
-                      >
-                        Open
-                      </Button>
-                    ),
-                    isClosable: true,
-                  },
-                  300000000
-                );
-              }}
-            >
-              info message
-            </Button>
-
-            <Button
-              onClick={() => {
-                success({
-                  content: 'This is a message!',
-                  action: <Button variant={'plain'}>Open</Button>,
-                  isClosable: true,
-                });
-              }}
-              className="bg-Colors-Background-Success-Bolder"
-            >
-              success message
-            </Button>
-            <Button
-              onClick={() => {
-                warning({
-                  content: 'This is a message!',
-                  action: (
-                    <Button variant={'plain'} className="font-normal">
-                      Open
-                    </Button>
-                  ),
-                  isClosable: true,
-                });
-              }}
-            >
-              warning message
-            </Button>
-            <Button
-              onClick={() => {
-                error({
-                  content: 'This is a message!',
-                  action: (
-                    <Button variant={'plain'} className="font-normal">
-                      Open
-                    </Button>
-                  ),
-                  isClosable: true,
-                });
-              }}
-              color="error"
-            >
-              error message
-            </Button>
-            <Button
-              onClick={() => {
-                message({
-                  content: 'This is a message!',
-                  action: (
-                    <Button variant={'plain'} className="font-normal">
-                      Open
-                    </Button>
-                  ),
-                  isClosable: true,
-                });
-              }}
-              variant="secondary"
-            >
-              normal message
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};

package/src/stories/Popover.stories.tsx

@@ -1,100 +0,0 @@
-/* eslint-disable import/no-unused-modules */
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-import { Button } from '../components/button';
-import { Popover } from '../components/popover';
-
-const meta = {
-  title: 'Components/数据展示/Popover-气泡',
-  component: Popover,
-
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  args: {
-    showArrow: true,
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      description: '气泡类型',
-      options: ['default', 'info'],
-    },
-    align: {
-      control: 'select',
-      description: '箭头位置',
-      options: ['start', 'center', 'end'],
-    },
-    side: {
-      control: 'select',
-      description: '气泡方位',
-      options: ['top', 'right', 'bottom', 'left'],
-    },
-    sideOffset: {
-      control: 'number',
-      description: '偏移距离',
-    },
-    showArrow: {
-      control: 'boolean',
-      description: '是否显示箭头',
-    },
-    openChangeCallback: {
-      control: 'object',
-      description: '打开&关闭的回调函数',
-    },
-  },
-} satisfies Meta<typeof Popover>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Demo: Story = {
-  args: {
-    // 继承默认参数
-    ...meta.args,
-    showArrow: true,
-  },
-  render: (args) => {
-    return (
-      <div className="w-[40vw] h-[200px] px-3 rounded-md flex justify-center items-center flex-col space-y-8">
-        <Popover
-          {...args}
-          open
-          content="Yes. this is Demo content."
-          openChangeCallback={(open) => console.log('openChangeCallback', open)}
-        >
-          <Button>default popover</Button>
-        </Popover>
-        <Popover
-          {...args}
-          variant="info"
-          content="Yes. this is Demo content."
-          openChangeCallback={(open) => console.log('openChangeCallback', open)}
-        >
-          info popover
-        </Popover>
-        <Popover
-          {...args}
-          open
-          content="Yes. this is Demo content."
-          openChangeCallback={(open) => console.log('openChangeCallback', open)}
-        >
-          <Button>default popover click</Button>
-        </Popover>
-        <Popover
-          {...args}
-          variant="info"
-          content="Yes. this is Demo content."
-          openChangeCallback={(open) => console.log('openChangeCallback', open)}
-        >
-          info popover click
-        </Popover>
-      </div>
-    );
-  },
-};

package/src/stories/SearchBar.stories.ts

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { SearchBar } from '@/components/search-bar';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/表单/SearchBar-搜索查询',
-  component: SearchBar,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: {
-    placeholder: 'Search',
-    onSearchChange: (value: string) => {
-      console.log(value);
-    },
-  },
-  argTypes: {
-    // 定义size为select类型的控件
-    size: {
-      control: 'select',
-      options: ['sm', 'md'],
-    },
-  },
-} satisfies Meta<typeof SearchBar>;
-
-export default meta;
-// export const Default: StoryObj<typeof meta> = {
-//   // 这里不需要设置 args，因为它会继承 meta 中的 args
-// };
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Demo: Story = {
-  args: {
-    ...meta.args, // 继承默认参数
-  },
-};