myshell-react-lib 0.1.4 → 0.1.6

package/src/components/typography.tsx

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

@@ -1,70 +0,0 @@
-// 导出组件
-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/audio-playing';
-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';
-
-// 导出icons
-export * from './components/icons';

package/src/lib/utils.ts

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

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

@@ -1,48 +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 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>
-    );
-  },
-};