myshell-react-lib 0.1.5 → 0.1.7

package/src/components/accordion.tsx

@@ -1,126 +0,0 @@
-'use client';
-
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-import { Icon } from './icon';
-import { Separator } from './separator';
-import { Text } from './typography';
-import { DownIcon } from './icons/outline/DownIcon';
-
-const Accordion = AccordionPrimitive.Root;
-
-export type AccordionItemProps = React.ComponentPropsWithoutRef<
-  typeof AccordionPrimitive.Item
-> & {
-  count?: number;
-  label?: string;
-  headerClassName?: string;
-  triggerClassName?: string;
-  sticky?: boolean;
-  children: React.ReactNode;
-};
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  AccordionItemProps
->((props, ref) => {
-  const { className, triggerClassName, sticky, children, label, count } = props;
-
-  return (
-    <AccordionPrimitive.Item
-      ref={ref}
-      className={cn('w-full', className)}
-      {...props}
-    >
-      <AccordionTrigger
-        label={label}
-        count={count}
-        className={triggerClassName as string}
-        sticky={sticky}
-      />
-      <AccordionContent>{children}</AccordionContent>
-    </AccordionPrimitive.Item>
-  );
-});
-
-AccordionItem.displayName = 'AccordionItem';
-
-type AccordionTriggerProps = React.ComponentPropsWithoutRef<
-  typeof AccordionPrimitive.Trigger
-> & {
-  count?: number;
-  label?: string;
-  sticky?: boolean;
-  headerClassName?: string;
-};
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  AccordionTriggerProps
->((props, ref) => {
-  const {
-    className,
-    headerClassName = '',
-    count,
-    label,
-    sticky,
-    ...rest
-  } = props;
-
-  return (
-    <AccordionPrimitive.Header
-      className={cn('flex', headerClassName, sticky && 'sticky top-0 z-10')}
-    >
-      <AccordionPrimitive.Trigger
-        ref={ref}
-        {...rest}
-        className={cn(
-          'flex flex-1 items-center justify-between font-medium transition-all [&[data-state=closed]>div>div>div>svg]:-rotate-90', // [&[data-state=open]>div>div>svg]:rotate-180
-          className
-        )}
-      >
-        <div className="w-full flex flex-col justify-center">
-          <div className="py-3">
-            <Separator />
-          </div>
-          <div className="w-full flex justify-between items-center py-1.5">
-            <div className="flex justify-center items-center space-x-1">
-              <Icon
-                component={DownIcon}
-                size="2xs"
-                className="fill-Colors-Foreground-Subtlest"
-              />
-              <Text size="lg" weight="medium" className="truncate text-left">
-                {label}
-              </Text>
-            </div>
-            {count ? (
-              <Text size="sm" color="subtlest" className="flex-shrink-0">
-                {count}
-              </Text>
-            ) : null}
-          </div>
-        </div>
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  );
-});
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    {...props}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-  >
-    <div className={cn(className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
-
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/components/alert-dialog.tsx

@@ -1,148 +0,0 @@
-'use client';
-
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import * as React from 'react';
-
-import { buttonVariants } from './button/button';
-import { cn } from '@/lib/utils';
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogTrigger = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'ring-offset-cc-Focus-Rings-Brand-default focus-visible:outline-none focus-visible:shadow-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1',
-      className
-    )}
-    {...props}
-  />
-));
-AlertDialogTrigger.displayName = AlertDialogPrimitive.Trigger.displayName;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      'fixed inset-0 z-50 bg-Colors-Background-Utilities-Overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full rounded-4xl max-w-lg translate-x-[-50%] translate-y-[-50%] bg-Colors-Background-Normal-Primary-Default shadow-modal-default duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] ring-offset-cc-Focus-Rings-Brand-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1',
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn('flex flex-col p-4 text-Colors-Text-Default', className)}
-      {...props}
-    />
-  );
-}
-AlertDialogHeader.displayName = 'AlertDialogHeader';
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn('flex justify-end p-4 space-x-4', className)}
-      {...props}
-    />
-  );
-}
-AlertDialogFooter.displayName = 'AlertDialogFooter';
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn('text-xl font-normal', className)}
-    {...props}
-  />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-Colors-Text-Subtle px-4', className)}
-    {...props}
-  />
-));
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(buttonVariants({ variant: 'secondary' }), className)}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};

package/src/components/alert.tsx

@@ -1,65 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const alertVariants = cva(
-  'relative rounded-xl border flex justify-center flex-col md:flex-row md:justify-between items-center gap-3 py-2 px-3 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-Colors-Text-Default',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-Colors-Background-Normal-Primary-Default text-Colors-Text-Default',
-        destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
-        warning:
-          'bg-surface-accent-yellow-subtlest border-surface-accent-yellow-subtle text-Colors-Text-Default',
-        info: 'bg-surface-accent-blue-subtlest border-surface-accent-blue-subtle text-Colors-Text-Default',
-        error:
-          'bg-surface-accent-red-subtlest border-surface-accent-red-subtle text-Colors-Text-Default',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-));
-Alert.displayName = 'Alert';
-
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
-    {...props}
-  />
-));
-AlertTitle.displayName = 'AlertTitle';
-
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('text-base [&_p]:leading-relaxed', className)}
-    {...props}
-  />
-));
-AlertDescription.displayName = 'AlertDescription';
-
-export { Alert, AlertDescription, AlertTitle };

package/src/components/aspect-ratio.tsx

@@ -1,7 +0,0 @@
-'use client';
-
-import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
-
-const AspectRatio = AspectRatioPrimitive.Root;
-
-export { AspectRatio };

package/src/components/audio-player.tsx

@@ -1,60 +0,0 @@
-import PlayIcon from '@heroicons/react/20/solid/esm/PlayIcon';
-import { useAudio } from 'react-use';
-
-import useAudioPlayer from '@/common/hooks/useAudioPlayer';
-import { IconButton } from './button/icon-button';
-import { AudioPlaying } from './audio-playing';
-import { durationFormatter, getPercent } from '@/common/utils/common-helper';
-
-export interface IAudioProps {
-  src: string;
-}
-
-function AudioPlayer({ src }: IAudioProps) {
-  const AudioComp = useAudioPlayer();
-
-  const [audio, state, controls, ref] = useAudio(
-    <AudioComp src={src} onEnded={() => controls.seek(0)} />
-  );
-
-  const { paused, time, playing } = state;
-  const duration = state.duration || ref.current?.duration || 0;
-
-  const onAudioToggle = () => {
-    if (paused) {
-      // 避免同时播放多个音频
-      const audios = document.getElementsByTagName('audio');
-      // eslint-disable-next-line no-plusplus
-      for (let i = 0, len = audios.length; i < len; i++) {
-        audios[i].pause();
-      }
-
-      controls.play();
-    } else {
-      controls.pause();
-    }
-  };
-
-  return (
-    <div className="flex flex-col space-y-1 w-full overflow-hidden">
-      <div
-        className="bg-Colors-Background-Brand-Default h-px w-full items-start"
-        style={{ width: `${getPercent(time, duration) * 100}%` }}
-      />
-      <div className="flex items-center space-x-3">
-        <IconButton className="w-6 h-6" onClick={onAudioToggle}>
-          {paused ? <PlayIcon className="w-3 h-3 ml-0.5" /> : <AudioPlaying />}
-        </IconButton>
-        <div className="flex flex-col grow overflow-hidden">
-          <div className="text-sm text-Colors-Text-Brand-Default truncate">
-            {durationFormatter(((playing || paused) && time) || duration)}
-          </div>
-        </div>
-      </div>
-
-      {audio}
-    </div>
-  );
-}
-
-export { AudioPlayer };

package/src/components/audio-playing.tsx

@@ -1,33 +0,0 @@
-import Lottie from 'lottie-web';
-import { useEffect, useRef } from 'react';
-
-export interface Props {
-  bright?: boolean;
-}
-
-function AudioPlaying(props: Props) {
-  const playingRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const lRef = playingRef.current;
-    let animation: any;
-
-    if (lRef) {
-      // 在组件挂载后，执行Lottie动画初始化
-      animation = Lottie.loadAnimation({
-        container: playingRef.current,
-        renderer: 'svg', // 根据需要选择渲染器：svg / canvas / html
-        loop: true,
-        autoplay: true,
-        animationData: require('@/common/assets/audio-playing.json'),
-      });
-    }
-
-    // 在组件卸载时，销毁Lottie动画实例
-    return () => animation.destroy();
-  }, []);
-
-  return <div ref={playingRef} className="size-3" />;
-}
-
-export { AudioPlaying };

package/src/components/avatar.tsx

@@ -1,133 +0,0 @@
-'use client';
-
-import { Primitive } from '@radix-ui/react-primitive';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-type ImageLoadingStatus = 'loading' | 'loaded' | 'error';
-
-const avatarVariants = cva(
-  'relative flex shrink-0 overflow-hidden bg-Colors-Background-Neutral-Primary-Default',
-  {
-    variants: {
-      size: {
-        xs: 'w-5 h-5 rounded', // 20 4
-        sm: 'w-6 h-6 rounded-md', // 24 6
-        md: 'w-8 h-8 rounded-lg', // 32 8
-        lg: 'w-9 h-9 rounded-lg', // 36 8
-        xl: 'w-12 h-12 rounded-xl', // 48 10 no
-        '2xl': 'w-14 h-14 rounded-xl', // 56 12
-        '3xl': 'w-16 h-16 rounded-xl', // 64 12
-        '4xl': 'w-18 h-18 rounded-2xl', // 72 14 no
-        '5xl': 'w-21 h-21 rounded-2xl', // 84 16
-        '6xl': 'w-24 h-24 rounded-3xl', // 96 20
-        '7xl': 'w-30 h-30 rounded-4xl', // 120 24
-      },
-    },
-    defaultVariants: {
-      size: 'md',
-    },
-  }
-);
-
-const AvatarRoot = React.forwardRef<
-  React.ElementRef<typeof Primitive.span>,
-  React.ComponentPropsWithoutRef<typeof Primitive.span> &
-    VariantProps<typeof avatarVariants>
->(({ className, size = 'md', ...passProps }, ref) => (
-  <Primitive.span
-    ref={ref}
-    className={cn(avatarVariants({ size }), className)}
-    {...passProps}
-  />
-));
-AvatarRoot.displayName = 'Avatar';
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof Primitive.img>,
-  React.ComponentPropsWithoutRef<typeof Primitive.img>
->(({ className, onLoad, onError, ...props }, ref) => {
-  const [loadingStatus, setLoadingStatus] =
-    React.useState<ImageLoadingStatus>('loading');
-  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
-    setLoadingStatus('loaded');
-    if (onLoad) {
-      onLoad(event);
-    }
-  };
-  const handleError = (
-    event: React.SyntheticEvent<HTMLImageElement, Event>
-  ) => {
-    setLoadingStatus('error');
-    if (onError) {
-      onError(event);
-    }
-  };
-
-  return loadingStatus !== 'error' ? (
-    <Primitive.img
-      ref={ref}
-      className={cn('aspect-square h-full w-full object-cover', className)}
-      onLoad={handleLoad}
-      onError={handleError}
-      {...props}
-    />
-  ) : (
-    <Primitive.span
-      ref={ref}
-      className={cn(
-        'flex h-full w-full items-center justify-center bg-Colors-Background-Neutral-Primary-Default',
-        className
-      )}
-      {...props}
-    />
-  );
-});
-AvatarImage.displayName = 'AvatarImage';
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof Primitive.img>,
-  React.ComponentPropsWithoutRef<typeof Primitive.img> &
-    VariantProps<typeof avatarVariants> & {
-      variant?: 'bot' | 'user' | 'widget';
-      border?: boolean;
-      rootStyle?: React.CSSProperties;
-    }
->(
-  (
-    {
-      className,
-      rootStyle,
-      size,
-      src,
-      variant = 'bot',
-      border = true,
-      ...passProps
-    },
-    ref
-  ) => {
-    const defaultSrc =
-      variant === 'user'
-        ? 'https://www.myshellstatic.com/cdn-cgi/image/quality=40,format=webp/image/user/avatar/default/20240715/avatar.png'
-        : 'https://www.myshellstatic.com/cdn-cgi/image/quality=40,format=webp/image/bot/logo/20240106/default.png';
-
-    return (
-      <AvatarRoot
-        size={size}
-        className={cn(
-          border && 'border-Colors-Border-Default border-[0.3px]',
-          className
-        )}
-        style={rootStyle}
-      >
-        <AvatarImage ref={ref} {...passProps} src={src || defaultSrc} />
-      </AvatarRoot>
-    );
-  }
-);
-
-Avatar.displayName = 'Avatar';
-
-export { Avatar, AvatarRoot, AvatarImage };

package/src/components/badge.tsx

@@ -1,67 +0,0 @@
-/* eslint-disable react/require-default-props */
-/* eslint-disable import/no-unused-modules */
-
-import { VariantProps, cva } from 'class-variance-authority';
-import { ClassNameValue } from 'tailwind-merge';
-
-import { cn } from '@/lib/utils';
-
-const badgeVariants = cva(
-  'rounded-full flex items-center justify-center text-Colors-Text-Default',
-  {
-    variants: {
-      status: {
-        default: 'w-2 h-2 bg-Colors-Foreground-Critical-Default',
-        unRead:
-          'min-w-2 min-h-4 bg-Colors-Foreground-Critical-Default px-1.5 text-Colors-Text-Static-White text-2xs font-medium',
-        cardUnRead:
-          'min-w-4 min-h-4 bg-Colors-Foreground-Critical-Default px-1.5 text-Colors-Text-Static-White text-2xs font-medium',
-        public:
-          'w-2.5 h-2.5 bg-Colors-Utit border-[2px] bg-Colors-Utility-Lake-Blue-50 border-Colors-Utility-Lake-Blue-10',
-        private:
-          'w-2.5 h-2.5 bg-Colors-Utility-Khaki-50 border-Colors-Utility-Khaki-10 border-[2px]',
-        hidden:
-          'w-2.5 h-2.5 bg-Colors-Utility-Gray-40 border-Colors-Utility-Gray-10 border-[2px]',
-        new: 'w-8.5 h-4 pb-0.5 flex juctify-center items-center bg-Colors-Foreground-Critical-Default px-1.5',
-      },
-    },
-    defaultVariants: {
-      status: 'default',
-    },
-  }
-);
-interface BadgeProps extends VariantProps<typeof badgeVariants> {
-  className?: ClassNameValue;
-  status?:
-    | 'default'
-    | 'unRead'
-    | 'cardUnRead'
-    | 'public'
-    | 'private'
-    | 'hidden'
-    | 'new';
-  count?: number;
-}
-
-function Badge(props: BadgeProps) {
-  const { status, count, className } = props;
-  const unReadCount = count && count < 100 ? count : '99+';
-
-  return (
-    <div className={cn(badgeVariants({ status }), className)}>
-      {status === 'new' ? (
-        <span className="text-2xs font-medium text-Colors-Text-Static-White leading-[1.3]">
-          New
-        </span>
-      ) : (
-        <span className="font-medium text-2xs leading-[1.3]">
-          {unReadCount && (status === 'unRead' || status === 'cardUnRead')
-            ? count
-            : null}
-        </span>
-      )}
-    </div>
-  );
-}
-
-export { Badge };