myshell-react-lib 0.1.0

package/src/stories/Modal.stories.tsx

@@ -0,0 +1,144 @@
+/* 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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,276 @@
+/* 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

@@ -0,0 +1,100 @@
+/* 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

@@ -0,0 +1,43 @@
+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, // 继承默认参数
+  },
+};