myshell-react-lib 0.1.5 → 0.1.7

package/src/components/modal.tsx

@@ -1,561 +0,0 @@
-/* eslint-disable no-nested-ternary */
-
-'use client';
-
-import CheckCircleIcon from '@heroicons/react/24/outline/esm/CheckCircleIcon';
-import ExclamationTriangleIcon from '@heroicons/react/24/outline/esm/ExclamationTriangleIcon';
-import InformationCircleIcon from '@heroicons/react/24/outline/esm/InformationCircleIcon';
-import XCircleIcon from '@heroicons/react/24/outline/esm/XCircleIcon';
-import XMarkIcon from '@heroicons/react/24/outline/esm/XMarkIcon';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FocusScope, FocusScopeProps } from '@radix-ui/react-focus-scope';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import { Drawer as DrawerPrimitive } from 'vaul';
-
-import { cn } from '@/lib/utils';
-
-import { Button } from './button/button';
-import { IconButton } from './button/icon-button';
-import { Display, Text } from './typography';
-import { useMedia } from 'react-use';
-
-const ModalOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, onClick, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    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
-    )}
-    onClick={(e) => {
-      onClick && onClick(e);
-    }}
-    {...props}
-  />
-));
-ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed inset-0 z-50 bg-Colors-Background-Utilities-Overlay',
-      className
-    )}
-    {...props}
-  />
-));
-
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
-
-const ModalContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPrimitive.Content
-    className={cn(
-      'absolute left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 !touch-auto !select-text',
-      '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%] focus:outline-none',
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </DialogPrimitive.Content>
-));
-
-const ModalRoot: React.FC<
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Dialog>
-> = ({ children, ...props }) => (
-  <DialogPrimitive.Dialog {...props}>
-    <DialogPrimitive.Portal>{children}</DialogPrimitive.Portal>
-  </DialogPrimitive.Dialog>
-);
-
-const ModalTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => {
-  const isMobile = useMedia('(max-width: 768px)');
-
-  if (isMobile) {
-    return (
-      <DrawerPrimitive.Title
-        ref={ref}
-        {...props}
-        className={cn(
-          'text-xl text-Colors-Text-Default font-medium line-clamp-1',
-          className
-        )}
-      />
-    );
-  }
-
-  return (
-    <DialogPrimitive.Title
-      ref={ref}
-      {...props}
-      className={cn(
-        'text-xl text-Colors-Text-Default font-medium line-clamp-1',
-        className
-      )}
-    />
-  );
-});
-ModalTitle.displayName = DialogPrimitive.Title.displayName;
-
-const modalVariants = cva('', {
-  variants: {
-    size: {
-      lg: 'w-[750px] max-h-[640px]',
-      md: 'w-[620px] max-h-[640px]',
-      sm: 'w-[380px] max-h-[640px]',
-    },
-    zIndex: {
-      9: 'z-[9]',
-      99: 'z-[99]',
-      999: 'z-[999]',
-      9999: 'z-[9999]',
-    },
-  },
-  defaultVariants: {
-    size: 'lg',
-    zIndex: 99,
-  },
-});
-
-export type TModalState = 'info' | 'success' | 'warning' | 'error';
-
-const Modal: React.FC<
-  React.ComponentPropsWithoutRef<typeof ModalRoot> & {
-    /**
-     * 模态框标题文本
-     */
-    title?: string;
-    /**
-     * 模态框描述文本
-     */
-    description?: string;
-    /**
-     * 点击覆盖层是否关闭模态框
-     */
-    overlayClose?: boolean;
-    /**
-     * 是否隐藏关闭按钮
-     */
-    hideClose?: boolean;
-    /**
-     * 模态框是否仅作为模态框显示（而不是抽屉）
-     */
-    modalOnly?: boolean;
-    /**
-     * 覆盖层的额外类名
-     */
-    overlayClassName?: string;
-    /**
-     * 模态框内容的额外类名
-     */
-    contentClassName?: string;
-    /**
-     * 关闭按钮的额外类名
-     */
-    closeClassName?: string;
-    /**
-     * 图标的额外类名
-     */
-    iconClassName?: string;
-    /**
-     * 模态框是否以全屏显示
-     */
-    fullScreen?: boolean;
-    /**
-     * 焦点范围管理的选项
-     */
-    focusScopeOptions?: FocusScopeProps;
-    /**
-     * 登录模态框的特殊逻辑
-     */
-    isLogin?: boolean;
-    /**
-     * 表示模态框是否为通知
-     */
-    isNotification?: boolean;
-    /**
-     * 模态框的状态（信息、成功、警告、错误）
-     */
-    state?: TModalState;
-    /**
-     * isNotification 的情况下可能会需要
-     */
-    showCancel?: boolean;
-    /**
-     * 是否为水平布局
-     */
-    isHorizontal?: boolean;
-    /**
-     * 确认按钮的加载状态
-     */
-    confirmLoading?: boolean;
-    /**
-     * 取消按钮的文本
-     */
-    cancelText?: string;
-    /**
-     * 确认按钮的文本
-     */
-    confirmText?: string;
-    /**
-     * 是否自动聚焦
-     * @default false
-     */
-    autoFocus?: string;
-    /**
-     * 关闭模态框时的回调函数
-     */
-    onClose?: () => void;
-    /**
-     * 确认操作时的回调函数
-     */
-    onConfirm?: () => void;
-  } & VariantProps<typeof modalVariants>
-> = ({
-  title,
-  description,
-  size = 'lg',
-  zIndex = 99,
-  hideClose = false,
-  overlayClose = true,
-  modalOnly = true,
-  contentClassName,
-  overlayClassName,
-  iconClassName,
-  closeClassName,
-  fullScreen = false,
-  focusScopeOptions,
-  isLogin = false,
-  isNotification = false,
-  isHorizontal = false,
-  state,
-  showCancel = true,
-  confirmLoading = false,
-  cancelText,
-  confirmText,
-  children,
-  autoFocus = false,
-  onClose,
-  onConfirm,
-  ...props
-}) => {
-  const isMobile = useMedia('(max-width: 768px)');
-
-  if (isMobile && !modalOnly && !isNotification) {
-    const drawerContent = (
-      <DrawerPrimitive.Content
-        className={cn(
-          'fixed inset-x-0 bottom-0 z-50 h-auto overflow-hidden no-scrollbar border-Colors-Border-Opaque bg-Colors-Background-Normal-Secondary-Alt shadow-modal-default focus:outline-none',
-          fullScreen
-            ? 'rounded-t-none max-h-full'
-            : 'rounded-t-2xl max-h-[85vh]',
-          contentClassName
-        )}
-        onOpenAutoFocus={(e) => {
-          !autoFocus && e.preventDefault();
-        }}
-      >
-        {title ? (
-          <ModalHeader>
-            <ModalTitle>{title}</ModalTitle>
-          </ModalHeader>
-        ) : (
-          <ModalTitle className="hidden"></ModalTitle>
-        )}
-        <div
-          className={cn(
-            isLogin ? 'overflow-y-scroll' : 'overflow-y-auto',
-            fullScreen
-              ? title
-                ? 'max-h-[calc(100vh-60px)]'
-                : 'max-h-[100vh]'
-              : title
-              ? 'max-h-[calc(85vh-60px)]'
-              : 'max-h-[85vh]'
-          )}
-        >
-          {children}
-        </div>
-        {!hideClose && (
-          <DrawerPrimitive.Close asChild>
-            <div
-              className={cn('absolute right-4 top-3', closeClassName)}
-              onClick={() => {
-                onClose && onClose();
-              }}
-            >
-              <IconButton
-                icon={XMarkIcon}
-                size="md"
-                variant="plain"
-                color="default"
-                className={iconClassName}
-              />
-              <span className="sr-only">Close</span>
-            </div>
-          </DrawerPrimitive.Close>
-        )}
-      </DrawerPrimitive.Content>
-    );
-
-    return (
-      <DrawerPrimitive.Root
-        {...props}
-        repositionInputs={false}
-        onOpenChange={(open) => {
-          if (!open) {
-            onClose && onClose();
-          }
-        }}
-      >
-        <DrawerPrimitive.Portal>
-          <DrawerOverlay
-            onClick={() => {
-              overlayClose && onClose && onClose();
-            }}
-            className={overlayClassName}
-          />
-          {focusScopeOptions ? (
-            <FocusScope {...focusScopeOptions}>{drawerContent}</FocusScope>
-          ) : (
-            drawerContent
-          )}
-        </DrawerPrimitive.Portal>
-      </DrawerPrimitive.Root>
-    );
-  }
-
-  const renderIcon = (state: TModalState) => {
-    switch (state) {
-      case 'info':
-        return (
-          <InformationCircleIcon className="text-cc-Icon-Featured-icon-fg-Info w-6 h-6" />
-        );
-      case 'success':
-        return (
-          <CheckCircleIcon className="text-cc-Icon-Featured-icon-fg-Success w-6 h-6" />
-        );
-      case 'warning':
-        return (
-          <ExclamationTriangleIcon className="text-cc-Icon-Featured-icon-fg-Warning w-6 h-6" />
-        );
-      case 'error':
-        return (
-          <XCircleIcon className="text-cc-Icon-Featured-icon-fg-Error w-6 h-6" />
-        );
-    }
-  };
-
-  const getBackgroundColor = (state: TModalState) => {
-    switch (state) {
-      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';
-    }
-  };
-
-  const dialogContent = (
-    <ModalContent
-      className={cn(
-        'rounded-2xl border-Colors-Border-Opaque bg-Colors-Background-Normal-Primary-Default shadow-modal-default overflow-hidden',
-        !isMobile
-          ? modalVariants({ size, zIndex })
-          : isLogin
-          ? 'w-[90%]'
-          : 'w-[80%]',
-        isNotification && 'w-[312px] md:w-[380px]',
-        contentClassName
-      )}
-      onOpenAutoFocus={(e) => {
-        !autoFocus && e.preventDefault();
-      }}
-    >
-      {isNotification ? (
-        <>
-          <ModalHeader className={cn(isNotification && 'border-none !pb-3')}>
-            {state && (
-              <div
-                className={cn(
-                  'flex items-center justify-center w-10 h-10 rounded-full flex-shrink-0 flex-grow-0',
-                  getBackgroundColor(state)
-                )}
-              >
-                {renderIcon(state)}
-              </div>
-            )}
-          </ModalHeader>
-          <div className="space-y-1.5">
-            {title ? (
-              <div className="px-5">
-                <Display size="sm">{title}</Display>
-              </div>
-            ) : null}
-            {children ||
-              (description ? (
-                <div className="px-5">
-                  <Text size="sm" weight="regular">
-                    {description}
-                  </Text>
-                </div>
-              ) : null)}
-          </div>
-
-          <ModalFooter
-            className={cn(
-              'gap-x-5 min-h-[76px] p-5 border-none justify-center w-full'
-            )}
-          >
-            {showCancel && (
-              <Button variant="tertiary" onClick={onClose} className="flex-1">
-                {cancelText || 'Cancel'}
-              </Button>
-            )}
-
-            <Button
-              variant="primary"
-              onClick={onConfirm}
-              loading={confirmLoading}
-              color={state === 'error' ? 'error' : 'default'}
-              className="flex-1"
-            >
-              {confirmText || 'Confirm'}
-            </Button>
-          </ModalFooter>
-        </>
-      ) : (
-        <>
-          {title ? (
-            <ModalHeader>
-              <ModalTitle>{title}</ModalTitle>
-            </ModalHeader>
-          ) : (
-            <ModalTitle className="hidden"></ModalTitle>
-          )}
-          {children}
-        </>
-      )}
-
-      {!hideClose && (
-        <DialogPrimitive.Close asChild>
-          <div
-            onClick={() => {
-              onClose && onClose();
-            }}
-            className={cn(
-              'absolute right-4 top-4',
-              isNotification && 'top-5',
-              closeClassName
-            )}
-          >
-            <IconButton
-              icon={XMarkIcon}
-              size="md"
-              variant="plain"
-              color="default"
-              className={iconClassName}
-            />
-            <span className="sr-only">Close</span>
-          </div>
-        </DialogPrimitive.Close>
-      )}
-    </ModalContent>
-  );
-
-  return (
-    <ModalRoot {...props}>
-      <ModalOverlay
-        onClick={() => {
-          overlayClose && onClose && onClose();
-        }}
-        className={overlayClassName}
-      />
-      {focusScopeOptions ? (
-        <FocusScope {...focusScopeOptions}>{dialogContent}</FocusScope>
-      ) : (
-        dialogContent
-      )}
-    </ModalRoot>
-  );
-};
-
-function ModalHeader({
-  className,
-  children,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        'border-b border-Colors-Border-Default flex flex-col py-4 md:py-5 px-4 justify-center',
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-ModalHeader.displayName = 'ModalHeader';
-
-function ModalFooter({
-  className,
-  children,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        'border-t border-Colors-Border-Default flex justify-end p-4',
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-ModalFooter.displayName = 'ModalFooter';
-
-function ModalBody({
-  className,
-  children,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div className={cn('py-3', className)} {...props}>
-      {children}
-    </div>
-  );
-}
-
-ModalBody.displayName = 'ModalBody';
-
-export {
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  ModalRoot,
-  ModalTitle,
-};

package/src/components/navigation-bar.tsx

@@ -1,100 +0,0 @@
-/* eslint-disable react/jsx-no-useless-fragment */
-
-import { cn } from '@/lib/utils';
-import { SearchBar } from './search-bar';
-import { Display } from './typography';
-import EnergyProgress from './energy-progress';
-
-type INavigationBar = {
-  /**
-   * 右侧自定义内容
-   * ReactNode
-   *
-   */
-  children?: React.ReactNode;
-  /**
-   * 导航栏title
-   * string
-   */
-  title?: string;
-  /**
-   * 是否展示搜索框
-   * boolean
-   *
-   * @default false
-   */
-  showSearchBar?: boolean;
-  /**
-   * 搜索框值
-   * string
-   */
-  searchValue?: string;
-  /**
-   * 搜索框占位值
-   * string
-   */
-  searchPlaceholder?: string;
-  /**
-   * 电量值
-   * number
-   */
-  energy?: number;
-  /**
-   * 每日电量值
-   * number
-   */
-  dailyEnergy?: number;
-  onSearchChange?: (value: string) => void;
-};
-
-function NavigationBar({
-  showSearchBar = true,
-  searchValue,
-  searchPlaceholder,
-  title,
-  children,
-  energy = 0,
-  dailyEnergy,
-  onSearchChange,
-}: INavigationBar) {
-  return (
-    <div
-      className={cn(
-        'relative w-full flex flex-col justify-between items-center px-4 md:px-6'
-      )}
-    >
-      <div className="w-full pt-5 md:pt-6 pb-1 md:pb-3 flex justify-between items-center">
-        <div className="flex-1 text-start">
-          <Display size="md">{title}</Display>
-        </div>
-        {children ? (
-          <div className="w-fit">{children}</div>
-        ) : (
-          <>
-            {dailyEnergy ? (
-              <EnergyProgress
-                dailyEnergy={dailyEnergy}
-                energy={energy}
-                className="flex relative items-center flex-shrink-0"
-              />
-            ) : null}
-          </>
-        )}
-      </div>
-
-      {showSearchBar && (
-        <div className="w-full py-2 md:py-0">
-          <SearchBar
-            placeholder={searchPlaceholder}
-            searchValue={searchValue}
-            onSearchChange={(value: string) =>
-              onSearchChange && onSearchChange(value)
-            }
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
-export { NavigationBar };