myshell-react-lib 0.1.0

package/src/components/modal.tsx

@@ -0,0 +1,561 @@
+/* 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

@@ -0,0 +1,100 @@
+/* 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 };