@erxes/ui 0.0.0-stage → 3.2.20-1

package/src/components/command-bar.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+import { cn } from '../lib/utils';
+import { Button } from './button';
+import { IconX } from '@tabler/icons-react';
+
+type CommandBarProps = React.PropsWithChildren<{
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+  disableAutoFocus?: boolean;
+}>;
+
+const Root = ({
+  open = false,
+  onOpenChange,
+  defaultOpen = false,
+  disableAutoFocus = true,
+  children,
+}: CommandBarProps) => {
+  return (
+    <PopoverPrimitive.Root
+      open={open}
+      onOpenChange={onOpenChange}
+      defaultOpen={defaultOpen}
+    >
+      <PopoverPrimitive.Trigger
+        className={cn(
+          'fixed bottom-10 left-1/2 h-px w-px -translate-x-1/2 z-50',
+        )}
+      />
+
+      <PopoverPrimitive.Content
+        side="top"
+        sideOffset={0}
+        onOpenAutoFocus={(e) => {
+          if (disableAutoFocus) {
+            e.preventDefault();
+          }
+        }}
+        className={cn(
+          'z-50 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-[side=bottom]:slide-in-from-top-2',
+        )}
+      >
+        {children}
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Root>
+  );
+};
+Root.displayName = 'CommandBar';
+
+const Value = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<'div'> & {
+    onClose?: () => void;
+  }
+>(({ className, onClose, children, ...props }, ref) => {
+  return (
+    <div className="flex items-center -space-x-px">
+      <Button
+        variant="outline"
+        className={cn(
+          'shadow-none border-dashed border',
+          onClose && 'rounded-r-none',
+          className,
+        )}
+        asChild
+      >
+        <div ref={ref} {...props}>
+          {children}
+        </div>
+      </Button>
+      {onClose && (
+        <Button
+          variant="outline"
+          className="shadow-none border-dashed border rounded-l-none"
+          size="icon"
+          onClick={onClose}
+        >
+          <IconX />
+        </Button>
+      )}
+    </div>
+  );
+});
+Value.displayName = 'CommandBar.Value';
+
+const Bar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'relative flex items-center overflow-hidden rounded-lg p-1 shadow-focus bg-background gap-x-1',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+Bar.displayName = 'CommandBar.Bar';
+
+export const CommandBar = Object.assign(Root, {
+  Value,
+  Bar,
+});

package/src/components/command.tsx

@@ -0,0 +1,261 @@
+import * as React from 'react';
+
+import { IconSearch } from '@tabler/icons-react';
+import { cva } from 'class-variance-authority';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Dialog, DialogProps } from './dialog';
+import { cn } from '../lib/utils';
+import { useEffect, useRef } from 'react';
+import { mergeRefs } from 'react-merge-refs';
+
+const CommandRoot = 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-background outline-hidden',
+      className,
+    )}
+    {...props}
+  />
+));
+CommandRoot.displayName = CommandPrimitive.displayName;
+
+type CommandDialogProps = DialogProps & {
+  dialogContentClassName?: string;
+};
+
+const CommandDialog = ({
+  children,
+  dialogContentClassName,
+  ...props
+}: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <Dialog.Content
+        className={cn(
+          'overflow-hidden p-0 rounded-lg border-0',
+          dialogContentClassName,
+        )}
+      >
+        <CommandRoot className="**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground [&_[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">
+          {children}
+        </CommandRoot>
+      </Dialog.Content>
+    </Dialog>
+  );
+};
+
+const commanInputVariants = cva(
+  'flex h-8 w-full rounded-md px-3 text-sm font-medium outline-hidden placeholder:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-transparent',
+        secondary: '',
+      },
+    },
+  },
+);
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+    variant?: 'primary' | 'secondary';
+    wrapperClassName?: string;
+    focusOnMount?: boolean;
+  }
+>(
+  (
+    {
+      className,
+      variant = 'secondary',
+      wrapperClassName,
+      focusOnMount,
+      ...props
+    },
+    ref,
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+      if (inputRef.current && focusOnMount) {
+        inputRef.current.focus();
+      }
+    }, [focusOnMount]);
+
+    if (variant === 'primary') {
+      return (
+        <div
+          className={cn('flex items-center border-b px-3', wrapperClassName)}
+          cmdk-input-wrapper=""
+        >
+          <IconSearch className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+          <CommandPrimitive.Input
+            ref={mergeRefs([inputRef, ref])}
+            className={cn(
+              commanInputVariants({ variant: 'primary' }),
+              'pl-0',
+              className,
+            )}
+            {...props}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className={cn(
+          'flex items-center bg-background border-b',
+          wrapperClassName,
+        )}
+      >
+        <CommandPrimitive.Input
+          ref={mergeRefs([inputRef, ref])}
+          className={cn(
+            commanInputVariants({ variant: 'secondary' }),
+            className,
+          )}
+          {...props}
+          placeholder={props.placeholder || 'Search'}
+        />
+      </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-72 overflow-y-auto hide-scroll m-1 focus-within:[&>div]:outline-hidden focus-within:outline-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-8 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-foreground **:[[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-accent-foreground',
+      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-border', 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 gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[disabled=true]:opacity-50 [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 h-8',
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandActionItem = ({
+  icon: Icon,
+  label,
+  onSelect,
+  disabled,
+  trailing,
+  className,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: React.ReactNode;
+  onSelect: () => void;
+  disabled?: boolean;
+  trailing?: React.ReactNode;
+  className?: string;
+}) => (
+  <CommandItem
+    className={cn('justify-between', className)}
+    onSelect={onSelect}
+    disabled={disabled}
+  >
+    <div className="flex gap-2 items-center">
+      <Icon className="size-4" />
+      <div className="flex items-center">{label}</div>
+    </div>
+    {trailing}
+  </CommandItem>
+);
+CommandActionItem.displayName = 'CommandActionItem';
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        'ml-auto text-xs tracking-widest text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export const Command = Object.assign(CommandRoot, {
+  Dialog: CommandDialog,
+  Input: CommandInput,
+  List: CommandList,
+  Empty: CommandEmpty,
+  Group: CommandGroup,
+  Item: CommandItem,
+  ActionItem: CommandActionItem,
+  Shortcut: CommandShortcut,
+  Separator: CommandSeparator,
+  Primitive: CommandPrimitive,
+});

package/src/components/context-menu.tsx

@@ -0,0 +1,183 @@
+import * as React from 'react';
+
+import { ContextMenu as ContextMenuPrimitive } from 'radix-ui';
+import { IconCheck } from '@tabler/icons-react';
+
+import { cn } from '../lib/utils';
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default gap-2 select-none items-center rounded-sm font-medium text-sm px-2 py-1.5 outline-hidden focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-32 overflow-hidden rounded-md text-sm bg-background p-1 shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        'z-50 min-w-40 overflow-hidden rounded-lg bg-background p-1 shadow-lg',
+        '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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 font-medium text-sm outline-hidden transition-colors focus:bg-accent data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 font-medium text-sm outline-hidden transition-colors focus:bg-accent data-disabled:pointer-events-none data-disabled:opacity-50',
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <IconCheck className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm font-medium text-sm py-1.5 pl-2 pr-8 outline-hidden transition-colors focus:bg-accent data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=checked]:text-primary [&>svg]:size-4 [&>svg]:shrink-0 gap-2',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <IconCheck className="size-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+  </ContextMenuPrimitive.RadioItem>
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-xs font-medium text-accent-foreground',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+};
+ContextMenuShortcut.displayName = 'ContextMenuShortcut';
+
+export const ContextMenu = Object.assign(ContextMenuPrimitive.Root, {
+  Trigger: ContextMenuPrimitive.Trigger,
+  Group: ContextMenuPrimitive.Group,
+  Portal: ContextMenuPrimitive.Portal,
+  Sub: ContextMenuPrimitive.Sub,
+  SubTrigger: ContextMenuSubTrigger,
+  SubContent: ContextMenuSubContent,
+  RadioGroup: ContextMenuPrimitive.RadioGroup,
+  RadioItem: ContextMenuRadioItem,
+  Content: ContextMenuContent,
+  Item: ContextMenuItem,
+  CheckboxItem: ContextMenuCheckboxItem,
+  Label: ContextMenuLabel,
+  Shortcut: ContextMenuShortcut,
+  Separator: ContextMenuSeparator,
+});

package/src/components/copy-text.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { IconCheck } from '@tabler/icons-react';
+import { cn } from '../lib';
+import { Tooltip } from './tooltip';
+
+interface CopyTextProps {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const CopyText = ({ value, children, className }: CopyTextProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // clipboard write failed
+    }
+  };
+
+  return (
+    <Tooltip.Provider>
+      <Tooltip open={copied ? false : undefined}>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            onClick={handleCopy}
+            className={cn(
+              'inline-flex items-center gap-1 transition-colors',
+              className,
+            )}
+          >
+            {copied ? (
+              <span className="flex items-center gap-1 text-success">
+                <IconCheck className="size-4 shrink-0" />
+                Copied!
+              </span>
+            ) : (
+              children
+            )}
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Content>Click to copy</Tooltip.Content>
+      </Tooltip>
+    </Tooltip.Provider>
+  );
+};