myshell-react-lib 0.1.5 → 0.1.7

package/src/components/button/link-button.tsx

@@ -1,184 +0,0 @@
-/* eslint-disable react/require-default-props */
-import { Slot } from '@radix-ui/react-slot';
-import { Loader2 } from 'lucide-react';
-import * as React from 'react';
-
-import { getAssetsUrl } from '../../common/utils/common-helper';
-import { cn } from '@/lib/utils';
-
-import { Icon } from '../icon';
-import { Image } from '../image';
-import { Separator } from '../separator';
-import { Text } from '../typography';
-import { buttonVariants, iconVariants } from './button.styles';
-
-export interface LinkButtonProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'variant'> {
-  asChild?: boolean;
-  loading?: boolean;
-  icon?: React.ElementType;
-  iconDirection?: 'left' | 'right';
-  color?: 'default' | 'brand' | 'error' | 'chat';
-  noStyle?: boolean;
-  iconClassName?: string;
-  iconOutBox?: boolean;
-  isBlock?: boolean;
-  asset?: 'energy' | 'coin' | 'point';
-  assetNumber?: number;
-  size?: 'lg' | 'md' | 'sm';
-}
-
-const LinkButton = React.forwardRef<HTMLButtonElement, LinkButtonProps>(
-  (
-    {
-      className = '',
-      iconClassName,
-      color = 'default',
-      icon,
-      iconDirection = 'left',
-      size = 'lg',
-      asChild = false,
-      loading = false,
-      noStyle = false,
-      iconOutBox = false,
-      isBlock = false,
-      disabled,
-      children,
-      autoFocus,
-      asset,
-      assetNumber = 0,
-      ...props
-    },
-    ref
-  ) => {
-    const Comp = asChild ? Slot : 'button';
-    const disable = disabled || loading;
-
-    return (
-      <Comp
-        className={
-          noStyle
-            ? className
-            : cn(
-                buttonVariants({ variant: 'link', color, size, className }),
-                disable && '!pointer-events-auto cursor-not-allowed',
-                isBlock && 'w-full'
-              )
-        }
-        ref={ref}
-        disabled={disable}
-        autoFocus={autoFocus}
-        {...props}
-      >
-        {loading && (
-          <span className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center">
-            <Loader2
-              className={cn(
-                iconVariants({ variant: 'link', size }),
-                'animate-spin',
-                size === 'lg'
-                  ? 'h-6 w-6'
-                  : size === 'md'
-                  ? 'h-5 w-5'
-                  : 'h-4.5 w-4.5'
-              )}
-            />
-          </span>
-        )}
-        {!asset &&
-          icon &&
-          iconOutBox &&
-          iconDirection === 'left' &&
-          renderIcon(icon, 'left', {
-            loading,
-            noStyle,
-            iconClassName,
-            size,
-          })}
-        <span
-          className={cn(
-            'inline-flex w-full items-center justify-center',
-            loading ? 'opacity-0' : 'opacity-100'
-          )}
-        >
-          {!asset &&
-            icon &&
-            !iconOutBox &&
-            iconDirection === 'left' &&
-            renderIcon(icon, 'left', {
-              loading,
-              noStyle,
-              iconClassName,
-              size,
-            })}
-          {children}
-          {asset ? (
-            <>
-              <Separator orientation="vertical" className={cn('mx-1.5 h-3')} />
-              <Image
-                src={
-                  asset === 'energy'
-                    ? getAssetsUrl(
-                        'image/bot/tag/20231214/1719340128612116720.png'
-                      )
-                    : ''
-                }
-                alt={asset}
-                width={16}
-                height={16}
-                className="flex-shrink-0"
-              />
-              <Text size="xs" className={cn('ml-0.5 text-inherit')}>
-                {assetNumber}
-              </Text>
-            </>
-          ) : null}
-          {!asset &&
-            icon &&
-            !iconOutBox &&
-            iconDirection === 'right' &&
-            renderIcon(icon, 'right', {
-              loading,
-              noStyle,
-              iconClassName,
-              size,
-            })}
-        </span>
-        {!asset &&
-          icon &&
-          iconOutBox &&
-          iconDirection === 'right' &&
-          renderIcon(icon, 'right', {
-            loading,
-            noStyle,
-            iconClassName,
-            size,
-          })}
-      </Comp>
-    );
-  }
-);
-
-const renderIcon = (
-  icon: React.ElementType,
-  direction: 'left' | 'right',
-  { loading, noStyle, iconClassName, size = 'lg' }: LinkButtonProps
-) => (
-  <Icon
-    component={icon}
-    className={
-      noStyle
-        ? iconClassName
-        : cn(
-            iconVariants({ variant: 'link', size }),
-            direction === 'left' ? 'mr-0.5' : 'ml-0.5',
-            iconClassName,
-            loading ? 'opacity-0' : 'opacity-100'
-          )
-    }
-  />
-);
-
-LinkButton.displayName = 'LinkButton';
-
-export { LinkButton };

package/src/components/cascader.tsx

@@ -1,175 +0,0 @@
-// todo 展开时默认选中 value 对应的选项
-
-import clsx from 'clsx';
-import { Check, ChevronDown } from 'lucide-react';
-import { Fragment } from 'react';
-import { useToggle } from 'react-use';
-import { ClassNameValue } from 'tailwind-merge';
-
-import { cn } from '@/lib/utils';
-
-import { Button } from './button/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from './dropdown-menu';
-
-export interface CascaderOption {
-  label: string;
-  value: string;
-  children?: CascaderOption[];
-}
-
-interface CommonP {
-  value?: string;
-  onValueChange: (value: string) => void;
-  className?: ClassNameValue;
-}
-
-interface P extends CommonP {
-  options: CascaderOption[];
-  showParentLabel?: boolean;
-  placeholder?: string;
-}
-
-export default function Cascader(props: P) {
-  const {
-    options,
-    className,
-    value,
-    onValueChange,
-    showParentLabel,
-    placeholder,
-  } = props;
-  const [open, setOpen] = useToggle(false);
-
-  return (
-    <DropdownMenu onOpenChange={setOpen}>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="secondary"
-          role="combobox"
-          className={cn(
-            className,
-            'h-12 p-3 space-x-1.5 rounded-xl border-Colors-Border-Default bg-Colors-Background-Normal-Primary-Active shadow-background-default hover:bg-inherit justify-between [&>span]:line-clamp-1 [&>.dropdown-chevron]:aria-expanded:rotate-180'
-          )}
-          aria-expanded={open}
-        >
-          <span
-            className={
-              // placeholder 文本颜色调整
-              clsx(!value && 'text-Colors-Text-Subtler')
-            }
-          >
-            {value ? renderLabel(options, value, showParentLabel) : placeholder}
-          </span>
-          <ChevronDown className="dropdown-chevron h-5 w-5 text-Colors-Foreground-Subtle duration-200" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className={cn(className)}>
-        {options.map((option) => (
-          <Fragment key={option.value}>
-            {option.children && !!option.children.length ? (
-              <NestDropdownMenuRender
-                className={className}
-                option={option}
-                value={value}
-                onValueChange={onValueChange}
-              />
-            ) : (
-              <DropdownMenuItem
-                className="py-1"
-                onChange={() => onValueChange(option.value)}
-              >
-                {option.label}
-              </DropdownMenuItem>
-            )}
-          </Fragment>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-interface NestDropDownP extends CommonP {
-  option: CascaderOption;
-}
-
-function NestDropdownMenuRender(props: NestDropDownP) {
-  const { option, value, onValueChange, className } = props;
-
-  return (
-    <DropdownMenuSub>
-      <DropdownMenuSubTrigger className="py-1">
-        {option.label}
-      </DropdownMenuSubTrigger>
-      <DropdownMenuPortal>
-        <DropdownMenuSubContent className={cn(className)} sideOffset={10}>
-          {option.children!.map((opt) => (
-            <Fragment key={opt.value}>
-              {opt.children && opt.children.length ? (
-                <NestDropdownMenuRender
-                  className={className}
-                  option={opt}
-                  value={value}
-                  onValueChange={onValueChange}
-                />
-              ) : (
-                <DropdownMenuItem
-                  className="py-1 justify-between"
-                  onClick={() => onValueChange(opt.value)}
-                >
-                  <span>{opt.label}</span>
-                  {value === opt.value && (
-                    <Check className="h-4 w-4 text-Colors-Text-Brand-Default" />
-                  )}
-                </DropdownMenuItem>
-              )}
-            </Fragment>
-          ))}
-        </DropdownMenuSubContent>
-      </DropdownMenuPortal>
-    </DropdownMenuSub>
-  );
-}
-
-function renderLabel(
-  options: CascaderOption[],
-  value: string,
-  showParentLabel = false,
-  path = ''
-): string {
-  for (const option of options) {
-    // 如果当前路径不为空并且需要显示路径，则添加分隔符
-    const currentPath = showParentLabel
-      ? path
-        ? `${path}/${option.label}`
-        : option.label
-      : option.label;
-
-    // 检查当前项的值是否匹配
-    if (option.value === value) {
-      return currentPath;
-    }
-
-    // 如果当前项有子项，则递归搜索子项
-    if (option.children) {
-      const childPath = renderLabel(
-        option.children,
-        value,
-        showParentLabel,
-        currentPath
-      );
-      if (childPath) return childPath; // 如果在子项中找到匹配，则返回构建的路径
-    }
-  }
-
-  // 如果没有找到匹配项，则返回空字符串
-  return '';
-}

package/src/components/checkbox.tsx

@@ -1,135 +0,0 @@
-'use client';
-
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const CheckIcon = ({ className }: { className?: string }) => {
-  return (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-    >
-      <path
-        d="M2.25 6.375L5.25 9.375L9.75 2.625"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  );
-};
-
-const CheckIconBrand = ({ className }: { className?: string }) => {
-  return (
-    <svg
-      className={className}
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M1.25 5.375L4.25 8.375L8.75 1.625"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  );
-};
-
-const checkboxVariants = cva(
-  'peer w-5 h-5 shrink-0 border-[1.5px] border-cc-Check-Box-border-default hover:border-cc-Check-Box-border-hover data-[state=checked]:border-cc-Check-Box-bg-default ring-offset-cc-Focus-Rings-Brand-default focus-visible:border-cc-Check-Box-border-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1 disabled:border-pressed disabled:cursor-not-allowed disabled:opacity-30 data-[state=checked]:bg-cc-Check-Box-bg-default data-[state=checked]:text-cc-Check-Box-fg-default hover:data-[state=checked]:bg-cc-Check-Box-bg-hovered disabled:data-[state=checked]:text-cc-Check-Box-fg-alt disabled:data-[state=checked]:border-none rounded-sm overflow-hidden flex items-center justify-center text-current',
-  {
-    variants: {
-      variant: {
-        checkbox: 'rounded-sm',
-        circle: 'rounded-full',
-        radio: 'rounded-full',
-        'circle-static':
-          'rounded-full bg-beta-black-10 border-beta-white-100 hover:border-beta-white-100',
-        'circle-inverted':
-          'rounded-full data-[state=checked]:border-surface-default focus-visible:border-surface-default data-[state=checked]:bg-surface-default hover:data-[state=checked]:bg-surface-hovered data-[state=checked]:text-icon-brand',
-      },
-    },
-    defaultVariants: {
-      variant: 'checkbox',
-    },
-  }
-);
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> &
-    VariantProps<typeof checkboxVariants> & {
-      label?: string;
-      caption?: string;
-      labelClassName?: string;
-      captionClassName?: string;
-    }
->(
-  (
-    {
-      className,
-      variant,
-      label,
-      labelClassName,
-      caption,
-      captionClassName,
-      ...props
-    },
-    ref
-  ) => {
-    const Component = label ? 'div' : React.Fragment;
-    return (
-      <Component
-        className={cn(
-          'flex items-center justify-center space-x-1.5 text-Colors-Text-Default',
-          caption && 'items-start'
-        )}
-      >
-        <CheckboxPrimitive.Root
-          ref={ref}
-          className={cn(checkboxVariants({ variant, className }))}
-          {...props}
-        >
-          <CheckboxPrimitive.Indicator>
-            {variant === 'radio' ? (
-              <div className="w-2 h-2 bg-cc-Check-Box-fg-default rounded-full" />
-            ) : variant === 'circle-inverted' ? (
-              <CheckIconBrand className="w-3 h-3 stroke-cc-Check-Box-fg-default" />
-            ) : (
-              <CheckIcon className="w-3 h-3 stroke-cc-Check-Box-fg-default" />
-            )}
-          </CheckboxPrimitive.Indicator>
-        </CheckboxPrimitive.Root>
-        {label && (
-          <p className={cn('text-sm', labelClassName)}>
-            {label}
-            {caption && (
-              <p
-                className={cn(
-                  'text-sm text-Colors-Text-Subtler',
-                  captionClassName
-                )}
-              >
-                {caption}
-              </p>
-            )}
-          </p>
-        )}
-      </Component>
-    );
-  }
-);
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };

package/src/components/command.tsx

@@ -1,155 +0,0 @@
-'use client';
-
-import { type DialogProps } from '@radix-ui/react-dialog';
-import { Command as CommandPrimitive } from 'cmdk';
-import { Search } from 'lucide-react';
-import * as React from 'react';
-
-import { Dialog, DialogContent } from './dialog';
-import { cn } from '@/lib/utils';
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      'flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50',
-      className
-    )}
-    {...props}
-  />
-));
-Command.displayName = CommandPrimitive.displayName;
-
-type CommandDialogProps = DialogProps;
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-slate-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 dark:[&_[cmdk-group-heading]]:text-slate-400">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-slate-400',
-        className
-      )}
-      {...props}
-    />
-  </div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
-    {...props}
-  />
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-));
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      'overflow-hidden p-1 text-slate-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-slate-500 dark:text-slate-50 dark:[&_[cmdk-group-heading]]:text-slate-400',
-      className
-    )}
-    {...props}
-  />
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 h-px bg-slate-200 dark:bg-slate-800', className)}
-    {...props}
-  />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-slate-100 aria-selected:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-slate-800 dark:aria-selected:text-slate-50',
-      className
-    )}
-    {...props}
-  />
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        'ml-auto text-xs tracking-widest text-slate-500 dark:text-slate-400',
-        className
-      )}
-      {...props}
-    />
-  );
-};
-CommandShortcut.displayName = 'CommandShortcut';
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-};