myshell-react-lib 0.1.0

package/src/components/accordion.tsx

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

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

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

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

package/src/components/audio-player.tsx

@@ -0,0 +1,58 @@
+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 './icons/solid/audio-playing';
+import { durationFormatter, getPercent } from '@/common/utils/common-helper';
+
+export interface IAudioProps {
+  src: string;
+}
+
+export default 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>
+  );
+}

package/src/components/avatar.tsx

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

@@ -0,0 +1,65 @@
+/* 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;
+}
+
+export default 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>
+  );
+}