myshell-react-lib 0.1.4 → 0.1.6

package/src/stories/SecondaryNavigationBar.stories.tsx

@@ -1,199 +0,0 @@
-import { ArrowUpOnSquareIcon } from '@heroicons/react/24/outline';
-import EllipsisHorizontalIcon from '@heroicons/react/24/outline/esm/EllipsisHorizontalIcon';
-import type { Meta, StoryObj } from '@storybook/react';
-import { headers } from 'next/headers';
-import { SecondaryNavigationBar } from '../components/secondary-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/通用/SecondaryNavigationBar-二级页面导航栏',
-  component: SecondaryNavigationBar,
-  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',
-    showClear: false,
-    showSearchBar: false,
-    searchValue: '',
-    backUrl: '/explore',
-  },
-  argTypes: {
-    title: {
-      control: 'text',
-    },
-  },
-} satisfies Meta<typeof SecondaryNavigationBar>;
-
-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 SecondaryNavigationBarDemo: Story = {
-  args: {
-    ...meta.args, // 继承默认参数
-  },
-  render: (args) => {
-    return (
-      <div className="min-w-[60vw] overflow-y-auto w-full p-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>
-          <SecondaryNavigationBar
-            {...args}
-            backUrl=""
-            showClear={false}
-            showSearchBar={false}
-          />
-        </div>
-        <div className="w-full">
-          <div className="w-full mt-6">Back url</div>
-          <SecondaryNavigationBar
-            {...args}
-            backUrl="/"
-            showClear={false}
-            showSearchBar={false}
-          />
-        </div>
-        <div className="w-full">
-          <div className="w-full mt-6">Search bar</div>
-          <SecondaryNavigationBar {...args} showSearchBar />
-        </div>
-        <div className="w-full">
-          <div className="w-full mt-6">Clear</div>
-          <SecondaryNavigationBar
-            {...args}
-            showClear
-            clearText="Clear Filters"
-            showSearchBar
-          />
-        </div>
-        <div className="w-full">
-          <div className="w-full mt-6">icon buttons</div>
-          <SecondaryNavigationBar
-            {...args}
-            icons={[
-              {
-                icon: ArrowUpOnSquareIcon,
-                onClick: () => {
-                  console.log('click');
-                },
-              },
-              {
-                icon: EllipsisHorizontalIcon,
-                onClick: () => {
-                  console.log('click');
-                },
-              },
-            ]}
-          />
-        </div>
-        <div className="w-full">
-          <div className="w-full mt-6">action buttons</div>
-          <SecondaryNavigationBar
-            {...args}
-            actions={[
-              {
-                label: 'Cancel',
-                variant: 'tertiary',
-                color: 'default',
-                onClick: () => {
-                  console.log('click');
-                },
-              },
-              {
-                label: 'Cancel',
-                variant: 'primary',
-                color: 'default',
-                onClick: () => {
-                  console.log('click');
-                },
-              },
-            ]}
-          />
-        </div>
-        <div className="w-full">
-          <div className="w-full mt-6">text buttons</div>
-          <SecondaryNavigationBar
-            {...args}
-            actions={[
-              {
-                label: 'Label',
-                variant: 'plain',
-                color: 'default',
-                onClick: () => {
-                  console.log('click');
-                },
-              },
-            ]}
-          />
-        </div>
-        <div className="w-full">
-          <div className="w-full mt-6">avatar</div>
-          <SecondaryNavigationBar
-            {...args}
-            showSearchBar={false}
-            avatar={{
-              logo: 'https://www.myshellstatic.com/cdn-cgi/image/quality=40,format=webp/image/bot/logo/15035350/202409121847/8-cropped-image.png',
-              name: 'Emma',
-            }}
-            icons={[
-              {
-                icon: ArrowUpOnSquareIcon,
-                onClick: () => {
-                  console.log('click');
-                },
-              },
-              {
-                icon: EllipsisHorizontalIcon,
-                onClick: () => {
-                  console.log('click');
-                },
-              },
-            ]}
-          />
-        </div>
-        <div className="w-full">
-          <div className="w-full mt-6">bar右侧内容自定义</div>
-          <SecondaryNavigationBar {...args} showSearchBar={false}>
-            children
-          </SecondaryNavigationBar>
-        </div>
-        <div className="w-full">
-          <div className="w-full mt-6">无背景</div>
-          <SecondaryNavigationBar
-            {...args}
-            showSearchBar={false}
-            hasBackground={false}
-            icons={[
-              {
-                icon: ArrowUpOnSquareIcon,
-                onClick: () => {
-                  console.log('click');
-                },
-              },
-              {
-                icon: EllipsisHorizontalIcon,
-                onClick: () => {
-                  console.log('click');
-                },
-              },
-            ]}
-          />
-          <div className="h-[800px]">test content</div>
-        </div>
-      </div>
-    );
-  },
-};

package/src/stories/Select.stories.tsx

@@ -1,107 +0,0 @@
-/* eslint-disable import/no-unused-modules */
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import React from 'react';
-
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectIcon,
-  SelectValue,
-} from '../components/select';
-import { CheckBadgeIcon, TrashIcon } from '@heroicons/react/24/outline';
-
-const meta = {
-  title: 'Components/表单/Select-下拉框',
-  component: Select,
-  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: {
-    options: {
-      control: 'object',
-    },
-    placeholder: {
-      control: 'text',
-    },
-    triggerClassName: {
-      control: 'text',
-    },
-  },
-} satisfies Meta<typeof Select>;
-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) => {
-    return (
-      <div className="w-[40vw] px-3 rounded-md flex gap-2">
-        <Select {...args}>
-          <SelectTrigger className="w-[180px]">
-            <div className="flex justify-between items-center grow">
-              <SelectValue placeholder="Theme" />
-            </div>
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="light">Light</SelectItem>
-            <SelectItem value="dark" icon={CheckBadgeIcon}>
-              Dark
-            </SelectItem>
-            <SelectItem value="system">System</SelectItem>
-            <SelectItem value="delete" critical icon={TrashIcon}>
-              Delete
-            </SelectItem>
-            <SelectItem value="disabled" disabled>
-              Disabled
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-    );
-  },
-};
-
-export const OptionsDemo: Story = {
-  render: () => {
-    const [value, setValue] = React.useState('');
-
-    return (
-      <div className="w-[40vw] px-3 rounded-md flex flex-col gap-4">
-        <h3 className="text-lg font-medium">当前选中值: {value}</h3>
-        <Select
-          value={value}
-          onValueChange={setValue}
-          triggerClassName="w-[180px]"
-          options={[
-            { value: 'Options1', label: 'Options1' },
-            { value: 'Options2', label: 'Options2' },
-            { value: 'Options3', label: 'Options3', icon: <CheckBadgeIcon /> },
-            {
-              value: 'Options4',
-              label: 'Options4',
-              icon: <TrashIcon />,
-              critical: true,
-            },
-            {
-              value: 'Options5',
-              label: 'Options5',
-              disabled: true,
-            },
-          ]}
-          placeholder="请选择选项"
-        />
-      </div>
-    );
-  },
-};

package/src/stories/Separator.stories.tsx

@@ -1,49 +0,0 @@
-/* eslint-disable import/no-unused-modules */
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-import { Separator } from '@/components/separator';
-
-const meta = {
-  title: 'Components/通用/Separator-分割线',
-  component: Separator,
-  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: {
-    orientation: {
-      description: '分割方向',
-      control: 'select',
-      options: ['horizontal', 'vertical'],
-    },
-    decorative: {
-      description: '是否是装饰性组件',
-      control: 'boolean',
-    },
-    className: {
-      control: 'text',
-      description: '样式覆盖',
-    },
-  },
-} satisfies Meta<typeof Separator>;
-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) => {
-    return (
-      <div className="w-[40vw] h-[200px] px-3 rounded-md flex justify-center items-center">
-        <Separator {...args} />
-      </div>
-    );
-  },
-};

package/src/stories/Spinner.stories.tsx

@@ -1,48 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Spinner } from '@/components/spinner';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/通用/Spinner-加载Icon',
-  component: Spinner,
-  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: {
-    size: 'lg',
-  },
-  argTypes: {
-    // 定义size为select类型的控件
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-    },
-    color: {
-      control: 'select',
-      options: ['default', 'brand', 'static', 'warning', 'success'],
-    },
-    speed: {
-      control: 'select',
-      options: ['slow', 'default', 'fast'],
-    },
-  },
-} satisfies Meta<typeof Spinner>;
-
-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, // 继承默认参数
-  },
-};

package/src/stories/SubHeading.stories.ts

@@ -1,64 +0,0 @@
-/* eslint-disable import/no-unused-modules */
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { SubHeading } from '@/components/typography';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/文字排版/SubHeading-子标题',
-  component: SubHeading,
-  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: {}, // 默认参数
-  argTypes: {
-    // 定义size为select类型的控件
-    size: {
-      control: 'select',
-      options: ['lg', 'sm'],
-    },
-    // 定义color为select类型的控件
-    color: {
-      control: 'select',
-      options: [
-        'default',
-        'subtle',
-        'subtler',
-        'subtlest',
-        'disabled',
-        'static',
-        'static-black',
-        'brand',
-        'critical',
-        'critical-bolder',
-        'warning',
-        'warning-bolder',
-        'success',
-        'success-bolder',
-      ],
-    },
-
-    // 定义lineClamp为select类型的控件
-    lineClamp: {
-      control: 'select',
-      options: [1, 2, 3, 4, 5, 6],
-    },
-  },
-} satisfies Meta<typeof SubHeading>;
-
-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: {
-    size: 'lg',
-    children: 'Subheading/lg',
-  },
-};

package/src/stories/Swich.stories.tsx

@@ -1,69 +0,0 @@
-import ArrowsUpDownIcon from '@heroicons/react/24/outline/esm/ArrowsUpDownIcon';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Switch } from '@/components/switch';
-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/表单/Switch-开关',
-  component: Switch,
-  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: {
-    size: 'lg',
-  },
-  argTypes: {
-    // 定义size为select类型的控件
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-    },
-  },
-} satisfies Meta<typeof Switch>;
-
-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 IconButtonDemo: Story = {
-  args: {
-    ...meta.args, // 继承默认参数
-  },
-  render: (args) => {
-    return (
-      <div className="min-w-[60vw] w-full p-6 rounded-md flex flex-col justify-center items-center space-y-2">
-        <div className="w-full">示例：</div>
-        <div className="w-full flex flex-col justify-center items-center">
-          <div className="w-full flex justify-around mb-3">
-            <div className="font-bold w-10" />
-            <div className="flex justify-center">lg</div>
-            <div className="flex justify-center">md</div>
-            <div className="flex justify-center">sm</div>
-          </div>
-          <div className="w-full flex justify-around items-center mb-6">
-            <div className="font-semibold w-10">Default</div>
-            <Switch {...args} size="lg" />
-            <Switch {...args} size="md" />
-            <Switch {...args} size="sm" />
-          </div>
-          <div className="w-full flex justify-around items-center mb-6">
-            <div className="font-semibold w-10">With Label</div>
-            <Switch {...args} size="lg" label="Label" />
-            <Switch {...args} size="md" label="Label" />
-            <Switch {...args} size="sm" label="Label" />
-          </div>
-        </div>
-      </div>
-    );
-  },
-};

package/src/stories/Tabs.stories.tsx

@@ -1,90 +0,0 @@
-/* eslint-disable import/no-unused-modules */
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import React from 'react';
-
-import { Tabs } from '../components/tabs';
-
-const meta = {
-  title: 'Components/数据展示/Tabs-标签页',
-  component: Tabs,
-  // subcomponents: { AccordionItem: AccordionItem as AccordionItemType },
-  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'],
-  args: {
-    defaultValue: '1',
-    variant: 'underline',
-    size: 'lg',
-    isLink: false,
-  },
-  argTypes: {
-    defaultValue: {
-      control: 'text',
-    },
-    isLink: {
-      control: 'boolean',
-      description: '是否为链接',
-    },
-    listClassName: {
-      control: 'text',
-    },
-    variant: {
-      control: 'select',
-      options: ['button', 'underline'],
-      description: '选项卡风格',
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: '选项卡大小',
-    },
-  },
-} satisfies Meta<typeof Tabs>;
-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) => {
-    return (
-      <div className="w-[70vw] px-3 rounded-md">
-        <Tabs
-          {...args}
-          items={[
-            {
-              label: 'Tab 1',
-              value: '1',
-              children: 'Tab 1',
-              link: '/1',
-            },
-            {
-              label: 'Tab 2',
-              value: '2',
-              children: 'Tab 2',
-              link: '/2',
-              count: 11,
-              disabled: true,
-            },
-            {
-              label: 'Tab 3',
-              value: '3',
-              children: 'Tab 3',
-              link: '/3',
-            },
-          ]}
-        />
-      </div>
-    );
-  },
-};