myshell-react-lib 0.1.0

package/src/components/typography.tsx

@@ -0,0 +1,437 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable react/display-name */
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { sanitize } from 'isomorphic-dompurify';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type DisplayProps = React.HTMLAttributes<HTMLElement> &
+  VariantProps<typeof displayVariants>;
+type HeadingProps = React.HTMLAttributes<HTMLElement> &
+  VariantProps<typeof headingVariants>;
+type SubHeadingProps = React.HTMLAttributes<HTMLElement> &
+  VariantProps<typeof subHeadingVariants>;
+type TextProps = React.HTMLAttributes<HTMLElement> &
+  VariantProps<typeof textVariants>;
+type DescriptionProps = React.HTMLAttributes<HTMLElement> &
+  VariantProps<typeof descriptionVariants>;
+
+const colorMap = {
+  default: 'text-Colors-Text-Default',
+  subtle: 'text-Colors-Text-Subtle',
+  subtler: 'text-Colors-Text-Subtler',
+  subtlest: 'text-Colors-Text-Subtlest',
+  disabled: 'text-Colors-Text-Disabled',
+  inverse: 'text-Colors-Text-Bolder',
+  static: 'text-Colors-Text-Static-White',
+  'static-black': 'text-Colors-Text-Static-White',
+  brand: 'text-Colors-Text-Brand-Default',
+  critical: 'text-Colors-Text-Critical-Default',
+  'critical-bolder': 'text-Colors-Text-Critical-Bolder',
+  warning: 'text-Colors-Text-Warning-Default',
+  'warning-bolder': 'text-Colors-Text-Warning-Bolder',
+  success: 'text-Colors-Text-Success-Default',
+  'success-bolder': 'text-Colors-Text-Success-Bolder',
+};
+const lineClampMap = {
+  1: 'line-clamp-1',
+  2: 'line-clamp-2',
+  3: 'line-clamp-3',
+  4: 'line-clamp-4',
+  5: 'line-clamp-5',
+  6: 'line-clamp-6',
+};
+
+const displayVariants = cva('font-semibold', {
+  variants: {
+    size: {
+      '2xl': 'text-7xl',
+      xl: 'text-5xl',
+      lg: 'text-3xl',
+      md: 'text-2xl',
+      sm: 'text-xl',
+      xs: 'text-lg',
+    },
+    color: colorMap,
+    lineClamp: lineClampMap,
+  },
+  defaultVariants: {
+    size: 'lg',
+    color: 'default',
+  },
+});
+
+const headingVariants = cva('font-medium', {
+  variants: {
+    size: {
+      h1: 'text-2xl',
+      h2: 'text-xl',
+      h3: 'text-lg',
+      h4: 'text-base',
+      h5: 'text-sm',
+    },
+    color: colorMap,
+    lineClamp: lineClampMap,
+  },
+  defaultVariants: {
+    size: 'h1',
+    color: 'default',
+  },
+});
+
+const subHeadingVariants = cva('text-Colors-Text-Default', {
+  variants: {
+    size: {
+      sm: 'text-xs',
+      lg: 'text-sm',
+    },
+    color: colorMap,
+    lineClamp: lineClampMap,
+  },
+  defaultVariants: {
+    size: 'lg',
+    color: 'default',
+  },
+});
+
+const textVariants = cva('', {
+  variants: {
+    size: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      lg: 'text-base',
+    },
+    weight: {
+      regular: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+    },
+    color: colorMap,
+    lineClamp: lineClampMap,
+  },
+  defaultVariants: {
+    size: 'lg',
+    weight: 'regular',
+    color: 'default',
+  },
+});
+
+const descriptionVariants = cva('', {
+  variants: {
+    size: {
+      lg: 'text-xs',
+      sm: 'text-2xs',
+    },
+    weight: {
+      regular: 'font-normal',
+      medium: 'font-medium',
+    },
+    color: colorMap,
+    lineClamp: lineClampMap,
+  },
+  defaultVariants: {
+    size: 'lg',
+    weight: 'regular',
+    color: 'subtler',
+  },
+});
+
+const HComponentMap = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+} as const;
+
+const TextComponentMap = {
+  p: 'p',
+  blockquote: 'blockquote',
+  span: 'span',
+  code: 'code',
+  bold: 'b',
+  italic: 'i',
+  strikethrough: 's',
+  underline: 'u',
+} as const;
+
+type BlockProps = {
+  underline?: boolean;
+  strikethrough?: boolean;
+  strong?: boolean;
+  italic?: boolean;
+  dangerous?: boolean;
+};
+const renderBlock = (
+  {
+    underline = false,
+    strikethrough = false,
+    strong = false,
+    italic = false,
+  }: BlockProps,
+  defaultValue: 'p' | 'span' = 'p'
+) => {
+  const underlineValue = underline && 'underline';
+  const strikethroughValue = strikethrough && 'strikethrough';
+  const strongValue = strong && 'bold';
+  const italicValue = italic && 'italic';
+
+  return TextComponentMap[
+    underlineValue ||
+      strikethroughValue ||
+      strongValue ||
+      italicValue ||
+      defaultValue
+  ];
+};
+
+export const dangerouText = (text: string) => {
+  return sanitize(`${text}`, {
+    ADD_ATTR: ['target'],
+    FORBID_TAGS: [
+      'style',
+      'form',
+      'input',
+      'checkbox',
+      'svg',
+      'script',
+      'iframe',
+      'object',
+      'embed',
+      'applet',
+      'meta',
+      'link',
+      'button',
+      'textarea',
+      'select',
+      'option',
+      'img',
+    ],
+    FORBID_ATTR: ['action', 'style', 'data-*', 'aria-*', 'srcset', 'on*'],
+  });
+};
+
+export const Heading = React.forwardRef<
+  HTMLHeadingElement,
+  HeadingProps & BlockProps
+>((props, ref) => {
+  const {
+    className,
+    size,
+    color,
+    lineClamp,
+    children,
+    dangerous,
+    ...passProps
+  } = props;
+  const Comp = HComponentMap[size || 'h1'];
+
+  const text = dangerous && dangerouText(`${children}`);
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn(headingVariants({ size, color, lineClamp }), className)}
+      {...passProps}
+      {...(dangerous && { dangerouslySetInnerHTML: { __html: `${text}` } })}
+    >
+      {!dangerous ? children : null}
+    </Comp>
+  );
+});
+
+export const Display = React.forwardRef<
+  HTMLElement & HTMLParagraphElement,
+  DisplayProps & BlockProps
+>((props, ref) => {
+  const {
+    className,
+    size,
+    color,
+    lineClamp,
+    underline,
+    strikethrough,
+    strong,
+    italic,
+    children,
+    dangerous,
+    ...passProps
+  } = props;
+  const Comp = renderBlock(
+    {
+      underline,
+      strikethrough,
+      strong,
+      italic,
+    },
+    'span'
+  );
+  const text = dangerous && dangerouText(`${children}`);
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn(displayVariants({ size, color, lineClamp }), className)}
+      {...passProps}
+      {...(dangerous && { dangerouslySetInnerHTML: { __html: `${text}` } })}
+    >
+      {!dangerous ? children : null}
+    </Comp>
+  );
+});
+
+export const Title = Heading;
+
+export const SubHeading = React.forwardRef<
+  HTMLParagraphElement,
+  SubHeadingProps
+>((props, ref) => {
+  const { className, size, color, children, lineClamp, ...passProps } = props;
+
+  return (
+    <p
+      ref={ref}
+      className={cn(subHeadingVariants({ size, color, lineClamp }), className)}
+      {...passProps}
+    >
+      {children}
+    </p>
+  );
+});
+
+export const SubTitle = SubHeading;
+
+export const Text = React.forwardRef<
+  HTMLElement & HTMLParagraphElement,
+  TextProps & BlockProps
+>((props, ref) => {
+  const {
+    className,
+    size,
+    weight,
+    color,
+    lineClamp,
+    underline,
+    strikethrough,
+    strong,
+    italic,
+    children,
+    dangerous,
+    ...passProps
+  } = props;
+  const Comp = renderBlock(
+    {
+      underline,
+      strikethrough,
+      strong,
+      italic,
+    },
+    'span'
+  );
+  const text = dangerous && dangerouText(`${children}`);
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        textVariants({ size, weight, color, lineClamp }),
+        className
+      )}
+      {...passProps}
+      {...(dangerous && { dangerouslySetInnerHTML: { __html: `${text}` } })}
+    >
+      {!dangerous ? children : null}
+    </Comp>
+  );
+});
+
+export const Paragraph = React.forwardRef<
+  HTMLElement & HTMLParagraphElement,
+  TextProps & BlockProps
+>((props, ref) => {
+  const {
+    className,
+    size,
+    weight,
+    color,
+    lineClamp,
+    underline,
+    strikethrough,
+    strong,
+    italic,
+    children,
+    dangerous,
+    ...passProps
+  } = props;
+  const Comp = renderBlock(
+    {
+      underline,
+      strikethrough,
+      strong,
+      italic,
+    },
+    'p'
+  );
+  const text = dangerous && dangerouText(`${children}`);
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        textVariants({ size, weight, color, lineClamp }),
+        className
+      )}
+      {...passProps}
+      {...(dangerous && { dangerouslySetInnerHTML: { __html: `${text}` } })}
+    >
+      {!dangerous ? children : null}
+    </Comp>
+  );
+});
+
+export const Description = React.forwardRef<
+  HTMLParagraphElement,
+  DescriptionProps & BlockProps
+>((props, ref) => {
+  const {
+    className,
+    size,
+    weight,
+    color,
+    lineClamp,
+    underline,
+    strikethrough,
+    strong,
+    italic,
+    children,
+    dangerous,
+    ...passProps
+  } = props;
+  const Comp = renderBlock(
+    {
+      underline,
+      strikethrough,
+      strong,
+      italic,
+    },
+    'span'
+  );
+  const text = dangerous && dangerouText(`${children}`);
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        descriptionVariants({ size, weight, color, lineClamp }),
+        className
+      )}
+      {...passProps}
+      {...(dangerous && { dangerouslySetInnerHTML: { __html: `${text}` } })}
+    >
+      {!dangerous ? children : null}
+    </Comp>
+  );
+});

package/src/index.ts

@@ -0,0 +1,66 @@
+// 导出组件
+export * from './components/accordion';
+export * from './components/alert';
+export * from './components/alert-dialog';
+export * from './components/aspect-ratio';
+export * from './components/audio-player';
+export * from './components/avatar';
+export * from './components/badge';
+export * from './components/button/button';
+export * from './components/cascader';
+export * from './components/checkbox';
+export * from './components/command';
+export * from './components/context-menu';
+export * from './components/count-down';
+export * from './components/dialog';
+export * from './components/drawer';
+export * from './components/dropdown-menu';
+export * from './components/form';
+export * from './components/group';
+export * from './components/guide';
+export * from './components/icon';
+export * from './components/button/icon-button';
+export * from './components/image';
+export * from './components/input';
+export * from './components/label';
+export * from './components/link';
+export * from './components/masonry';
+export * from './components/menubar';
+export * from './components/modal';
+export * from './components/navigation-bar';
+export * from './components/number-input';
+export * from './components/page-content';
+export * from './components/popover';
+export * from './components/progress';
+export * from './components/radio-group';
+export * from './components/scroll-area';
+export * from './components/search-bar';
+export * from './components/secondary-navigation-bar';
+export * from './components/select';
+export * from './components/separator';
+export * from './components/sheet';
+export * from './components/skeleton';
+export * from './components/slider';
+export * from './components/spinner';
+export * from './components/switch';
+export * from './components/tabs';
+export * from './components/textarea';
+export * from './components/toggle';
+export * from './components/toggle-group';
+export * from './components/tooltip';
+export * from './components/typography';
+
+// 导出特殊组件
+export * from './components/toast/toast';
+export * from './components/toast/toaster';
+export * from './components/toast/use-toast';
+
+// 导出轮播组件
+export * from './components/swiper';
+
+// 导出hooks
+export * from './common/hooks/useNotification';
+export * from './common/hooks/useNativeBridge';
+export * from './common/hooks/useDevice';
+export * from './common/hooks/useWindowWidth';
+export * from './common/hooks/useAudioPlayer';

package/src/lib/utils.ts

@@ -0,0 +1,62 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// import { locales } from '@/lib/config';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function getAlternatesMap(pathname: string, isMobile?: boolean) {
+  // const langMap = {} as Record<string, string>;
+  // locales.forEach(locale => {
+  //   langMap[locale] = `https://app.myshell.ai/${locale}/${pathname}`;
+  // });
+  const defaultUrl = `https://app.myshell.ai/${pathname}`;
+
+  return {
+    canonical: defaultUrl,
+    media: {
+      'only screen and (max-width: 768px)': `https://app.myshell.ai/m/${pathname}`,
+    },
+
+    // languages: {
+    //   'x-default': defaultUrl,
+    //   ...langMap
+    // }
+  };
+}
+
+export function limitStringLength(str: string, limit: number) {
+  if (str.length > limit) {
+    return `${str.substring(0, limit)}...`;
+  }
+
+  return str;
+}
+
+export function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+}
+
+export function loadImageDimensions(
+  url: string
+): Promise<{ width: number; height: number }> {
+  return new Promise<{ width: number; height: number }>((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => {
+      resolve({ width: image.width, height: image.height });
+      URL.revokeObjectURL(url);
+    };
+    image.onerror = () => {
+      reject(new Error('Failed to load image.'));
+      URL.revokeObjectURL(url);
+    };
+    image.src = url;
+  });
+}

package/src/stories/Accordion.stories.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable import/no-unused-modules */
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import React from 'react';
+
+import ItemDemo from '../components/ItemDemo';
+import { Accordion, AccordionItem } from '../components/accordion';
+
+import { AccordionItemDemo } from './AccordionItem.stories';
+
+type AccordionItemType = typeof AccordionItem & any;
+
+const meta = {
+  title: 'Components/数据展示/Accordion-折叠面板',
+  component: Accordion,
+  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',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  args: {
+    type: 'single',
+    collapsible: true,
+  },
+} satisfies Meta<typeof Accordion>;
+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">
+        <Accordion {...args}>
+          <AccordionItem {...AccordionItemDemo.args} value="accordion-item1">
+            <ItemDemo />
+          </AccordionItem>
+          <AccordionItem
+            {...AccordionItemDemo.args}
+            value="accordion-item2"
+            label="accordion item 2"
+            count={0}
+          >
+            <ItemDemo />
+          </AccordionItem>
+          <AccordionItem
+            {...AccordionItemDemo.args}
+            value="accordion-item3"
+            label="accordion item 3"
+            count={3}
+          >
+            <ItemDemo />
+          </AccordionItem>
+        </Accordion>
+      </div>
+    );
+  },
+};

package/src/stories/AccordionItem.stories.tsx

@@ -0,0 +1,48 @@
+/* eslint-disable import/no-unused-modules */
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import React from 'react';
+
+import ItemDemo from '../components/ItemDemo';
+import { Accordion, AccordionItem } from '../components/accordion';
+
+const meta = {
+  title: 'Components/数据展示/Accordion-折叠面板',
+  component: AccordionItem,
+  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: {
+    label: 'accordion item 1',
+    value: 'item1',
+    count: 6,
+    triggerClassName: '',
+  },
+  argTypes: {},
+} satisfies Meta<typeof AccordionItem>;
+
+export default meta;
+
+type Story = StoryObj<typeof AccordionItem>;
+
+export const AccordionItemDemo: Story = {
+  args: {
+    ...meta.args, // 继承默认参数
+  },
+  render: (args) => {
+    return (
+      <div className="w-[40vw] px-3 rounded-md">
+        <Accordion type="single" collapsible>
+          <AccordionItem {...args}>
+            <ItemDemo />
+          </AccordionItem>
+        </Accordion>
+      </div>
+    );
+  },
+};