myshell-react-lib 0.1.0

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

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

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

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

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