myshell-react-lib 0.1.0

package/src/components/textarea.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { Text } from './typography';
+
+export type TextareaProps =
+  React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    maxLengthClassName?: string;
+  };
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  TextareaProps & { error?: string }
+>(
+  (
+    { className, maxLength, value, error, maxLengthClassName, ...props },
+    ref
+  ) => {
+    return (
+      <div>
+        <div className="relative">
+          <textarea
+            className={cn(
+              'w-full min-h-[123px] p-3 pb-10 rounded-lg border border-Colors-Border-Default bg-Colors-Background-Normal-Primary-Active ',
+              'text-sm text-Colors-Text-Default placeholder:text-Colors-Text-Subtlest ring-offset-cc-Focus-Rings-Brand-default',
+              'hover:border-hovered bg-cc-Input-bg-default hover:bg-cc-Input-bg-hover disabled:bg-cc-Input-bg-disabled aria-[invalid=true]:border-Colors-Border-Critical aria-[invalid=true]:hover:bg-Colors-Background-Critical-Subtle',
+              'aria-[invalid=true]:focus-visible:ring-error file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-Colors-Text-Subtler',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-30',
+              (maxLength && (value?.toString()?.length || 0) > maxLength) ||
+                error
+                ? 'border-Colors-Border-Critical hover:bg-Colors-Background-Critical-Subtle focus-visible:ring-error'
+                : '',
+              className
+            )}
+            ref={ref}
+            maxLength={maxLength}
+            value={value}
+            {...props}
+          />
+          {maxLength ? (
+            <div
+              className={cn(
+                'absolute text-right bottom-5 right-4 border-Colors-Border-Default',
+                maxLengthClassName
+              )}
+            >
+              <Text size="sm" color="subtlest">{`${
+                value?.toString()?.length || 0
+              }/${maxLength}`}</Text>
+            </div>
+          ) : null}
+        </div>
+        {error && (
+          <div className="w-full">
+            <Text
+              className="text-wrap"
+              size="sm"
+              weight="regular"
+              color="critical"
+            >
+              {error}
+            </Text>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/src/components/toast/toast.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import XMarkIcon from '@heroicons/react/24/outline/esm/XMarkIcon';
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const viewportPositionVariants = cva(
+  'fixed z-[1000001] flex max-h-screen w-full p-0 gap-2',
+  {
+    variants: {
+      position: {
+        'top-left': 'top-6 left-6 flex-col items-start',
+        'top-center': 'top-6 left-1/2 -translate-x-1/2 flex-col items-center',
+        'top-right': 'top-6 right-6 flex-col items-end',
+        'bottom-left': 'bottom-6 left-6 flex-col-reverse items-start',
+        'bottom-center':
+          'bottom-6 left-1/2 -translate-x-1/2 flex-col-reverse items-center',
+        'bottom-right': 'bottom-6 right-6 flex-col-reverse items-end',
+        'left-center': 'left-6 top-1/2 -translate-y-1/2 flex-row items-center',
+        'right-center':
+          'right-6 top-1/2 -translate-y-1/2 flex-row-reverse items-center',
+      },
+    },
+    defaultVariants: {
+      position: 'top-right',
+    },
+  }
+);
+
+interface ToastViewportProps
+  extends React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> {
+  position?:
+    | 'top-left'
+    | 'top-center'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-center'
+    | 'bottom-right'
+    | 'left-center'
+    | 'right-center';
+}
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  ToastViewportProps
+>(({ className, position, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(viewportPositionVariants({ position }), className)}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-Colors-Border-Opaque p-6 pr-8 shadow-modal-default transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 max-w-md',
+  {
+    variants: {
+      variant: {
+        info: 'bg-Colors-Background-Normal-Primary-Default p-4',
+        warning: 'bg-Colors-Background-Normal-Primary-Default p-4',
+        error: 'bg-Colors-Background-Normal-Primary-Default p-4',
+        success: 'bg-Colors-Background-Normal-Primary-Default p-4',
+      },
+      position: {
+        'top-left':
+          'data-[state=open]:slide-in-from-left-full data-[state=closed]:slide-out-to-left-full',
+        'top-center':
+          'data-[state=open]:slide-in-from-top-full data-[state=closed]:slide-out-to-top-full',
+        'top-right':
+          'data-[state=open]:slide-in-from-right-full data-[state=closed]:slide-out-to-right-full',
+        'bottom-left':
+          'data-[state=open]:slide-in-from-left-full data-[state=closed]:slide-out-to-left-full',
+        'bottom-center':
+          'data-[state=open]:slide-in-from-bottom-full data-[state=closed]:slide-out-to-bottom-full',
+        'bottom-right':
+          'data-[state=open]:slide-in-from-right-full data-[state=closed]:slide-out-to-right-full',
+        'left-center':
+          'data-[state=open]:slide-in-from-left-full data-[state=closed]:slide-out-to-left-full',
+        'right-center':
+          'data-[state=open]:slide-in-from-right-full data-[state=closed]:slide-out-to-right-full',
+      },
+    },
+    defaultVariants: {
+      variant: 'info',
+      position: 'top-right',
+    },
+  }
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, position, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant, position }), className)}
+      data-position={position}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-transparent px-3 text-sm font-medium ring-offset-white transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-slate-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-slate-50 group-[.destructive]:focus:ring-red-500 dark:border-slate-800 dark:ring-offset-slate-950 dark:hover:bg-slate-800 dark:focus:ring-slate-300 dark:group-[.destructive]:border-slate-800/40 dark:group-[.destructive]:hover:border-red-900/30 dark:group-[.destructive]:hover:bg-red-900 dark:group-[.destructive]:hover:text-slate-50 dark:group-[.destructive]:focus:ring-red-900',
+      className
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'absolute right-4 top-4 rounded-md p-1 text-slate-950/50 transition-opacity hover:text-slate-950 outline-none focus:outline-none focus:ring-2 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:text-slate-50/50 dark:hover:text-slate-50',
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <XMarkIcon className="h-5 w-5" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn('text-sm font-semibold', className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn('text-sm opacity-90', className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};

package/src/components/toast/toaster.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import CheckCircleIcon from '@heroicons/react/24/outline/esm/CheckCircleIcon';
+import ExclamationCircleIcon from '@heroicons/react/24/outline/esm/ExclamationCircleIcon';
+import InformationCircleIcon from '@heroicons/react/24/outline/esm/InformationCircleIcon';
+import XCircleIcon from '@heroicons/react/24/outline/esm/XCircleIcon';
+
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from './toast';
+import { useToast } from './use-toast';
+import { cn } from '@/lib/utils';
+import React from 'react';
+
+type ToastVariant = 'info' | 'success' | 'warning' | 'error' | null | undefined;
+
+export interface ToasterProps {
+  position?:
+    | 'top-left'
+    | 'top-center'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-center'
+    | 'bottom-right'
+    | 'left-center'
+    | 'right-center';
+}
+
+export function Toaster({ position = 'top-right' }: ToasterProps = {}) {
+  const { toasts } = useToast();
+
+  // 按位置分组
+  const positionGroups = React.useMemo(() => {
+    const groups: Record<string, typeof toasts> = {};
+
+    const allPositions = [
+      'top-left',
+      'top-center',
+      'top-right',
+      'bottom-left',
+      'bottom-center',
+      'bottom-right',
+      'left-center',
+      'right-center',
+    ];
+
+    // 初始化所有位置组
+    allPositions.forEach((pos) => {
+      groups[pos] = [];
+    });
+
+    // 将每个Toast按其position分组，如果没有指定则使用默认位置
+    toasts.forEach((toast) => {
+      const toastPosition = toast.position || position;
+      if (groups[toastPosition]) {
+        groups[toastPosition].push(toast);
+      } else {
+        // 如果位置不在预定义列表中，则使用默认位置
+        groups[position].push(toast);
+      }
+    });
+
+    return groups;
+  }, [toasts, position]);
+
+  const renderToast = (toast: any) => {
+    const {
+      id,
+      title,
+      description,
+      action,
+      variant,
+      position: toastPosition,
+    } = toast;
+
+    const renderIcon = (variant: ToastVariant) => {
+      switch (variant) {
+        case 'info':
+          return (
+            <InformationCircleIcon className="h-6 w-6 text-cc-Icon-Featured-icon-fg-Info" />
+          );
+        case 'success':
+          return (
+            <CheckCircleIcon className="h-6 w-6 text-cc-Icon-Featured-icon-fg-Success" />
+          );
+        case 'warning':
+          return (
+            <ExclamationCircleIcon className="h-6 w-6 text-cc-Icon-Featured-icon-fg-Warning" />
+          );
+        case 'error':
+          return (
+            <XCircleIcon className="h-6 w-6 text-cc-Icon-Featured-icon-fg-Error" />
+          );
+      }
+    };
+
+    const getBackgroundColor = (variant: ToastVariant) => {
+      switch (variant) {
+        case 'info':
+          return 'bg-Colors-Background-Info-Default';
+        case 'success':
+          return 'bg-Colors-Background-Success-Default';
+        case 'warning':
+          return 'bg-Colors-Background-Warning-Default';
+        case 'error':
+          return 'bg-Colors-Background-Critical-Default';
+      }
+    };
+
+    return (
+      <Toast key={id} {...toast} position={toastPosition}>
+        <div className="flex flex-col gap-3">
+          <div className="flex items-start gap-3">
+            <div
+              className={cn(
+                'flex h-10 w-10 flex-shrink-0 flex-grow-0 items-center justify-center rounded-full',
+                getBackgroundColor(variant)
+              )}
+            >
+              {renderIcon(variant)}
+            </div>
+            <div className="grid gap-1">
+              {title && (
+                <ToastTitle className="text-base text-Colors-Text-Default">
+                  {title}
+                </ToastTitle>
+              )}
+              {description && (
+                <ToastDescription className="text-sm text-Colors-Text-Subtle">
+                  {description}
+                </ToastDescription>
+              )}
+              {action}
+            </div>
+          </div>
+        </div>
+        <ToastClose />
+      </Toast>
+    );
+  };
+
+  return (
+    <ToastProvider>
+      {/* 为每个位置渲染一个ToastViewport */}
+      {Object.entries(positionGroups).map(([pos, toastsForPosition]) => (
+        <React.Fragment key={pos}>
+          {toastsForPosition.map(renderToast)}
+          {toastsForPosition.length > 0 && (
+            <ToastViewport position={pos as any} />
+          )}
+        </React.Fragment>
+      ))}
+    </ToastProvider>
+  );
+}

package/src/components/toast/use-toast.tsx

@@ -0,0 +1,248 @@
+'use client';
+
+// Inspired by react-hot-toast library
+import * as React from 'react';
+import { ToastActionElement, ToastProps } from './toast';
+import { Text } from '../typography';
+import Link from '../link';
+const TOAST_LIMIT = 8;
+const TOAST_REMOVE_DELAY = 1000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST'];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType['UPDATE_TOAST'];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType['DISMISS_TOAST'];
+      toastId?: ToasterToast['id'];
+    }
+  | {
+      type: ActionType['REMOVE_TOAST'];
+      toastId?: ToasterToast['id'];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      };
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      };
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, 'id'> & {
+  actions?: {
+    dismissText?: string;
+    view?: string;
+    viewUrl?: string;
+  };
+  toastId?: string;
+  position?:
+    | 'top-left'
+    | 'top-center'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-center'
+    | 'bottom-right'
+    | 'left-center'
+    | 'right-center';
+};
+
+function toast({ actions, toastId, position, ...props }: Toast) {
+  const id = toastId || genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      position,
+      ...(actions && {
+        action: (
+          <div className="flex justify-start items-center gap-2">
+            {actions?.dismissText && (
+              <Text
+                size="sm"
+                weight="medium"
+                color="brand"
+                className="cursor-pointer"
+                onClick={() => {
+                  dismiss();
+                }}
+              >
+                {actions?.dismissText}
+              </Text>
+            )}
+            {actions?.view && actions.viewUrl && (
+              <Link
+                href={actions.viewUrl}
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                <div className="flex items-center gap-1.5">
+                  <Text
+                    size="sm"
+                    weight="medium"
+                    color="default"
+                    className="cursor-pointer"
+                  >
+                    {actions.view}
+                  </Text>
+                </div>
+              </Link>
+            )}
+          </div>
+        ),
+      }),
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  };
+}
+
+export { toast, useToast };