myshell-react-lib 0.1.4 → 0.1.6

package/src/components/textarea.tsx

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

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

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

@@ -1,248 +0,0 @@
-'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 };