@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/components/checkbox.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+import { cn } from 'erxes-ui/lib';
+
+export const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer size-4 shrink-0 rounded border border-scroll outline-offset-2 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-ring/70 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=indeterminate]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground bg-background',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+      {props.checked === 'indeterminate' ? (
+        <svg
+          width="9"
+          height="9"
+          viewBox="0 0 9 9"
+          fill="currentcolor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z"
+          />
+        </svg>
+      ) : (
+        <svg
+          width="9"
+          height="9"
+          viewBox="0 0 9 9"
+          fill="currentcolor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z"
+          />
+        </svg>
+      )}
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;

package/src/components/choicebox-group.tsx

@@ -0,0 +1,103 @@
+import { Label, RadioGroup } from 'erxes-ui/components';
+import { forwardRef, useId, ComponentPropsWithoutRef, ReactNode } from 'react';
+import { cn } from 'erxes-ui/lib';
+import { type RadioGroupProps } from './radio-group';
+
+export interface ChoiceboxGroupProps
+  extends Omit<RadioGroupProps, 'className'> {
+  className?: string;
+  direction?: 'column' | 'row';
+  spacing?: 'default' | 'tight' | 'loose';
+}
+
+const ChoiceboxGroupRoot = forwardRef<HTMLDivElement, ChoiceboxGroupProps>(
+  (
+    {
+      children,
+      className,
+      direction = 'column',
+      spacing = 'default',
+      value,
+      onValueChange,
+      defaultValue,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <RadioGroup
+        ref={ref}
+        className={cn('w-full')}
+        value={value}
+        onValueChange={onValueChange}
+        defaultValue={defaultValue}
+        {...props}
+      >
+        <div
+          className={cn(
+            'flex w-full h-max gap-2',
+            direction === 'column' ? 'flex-col' : 'flex-row',
+            className,
+          )}
+        >
+          {children}
+        </div>
+      </RadioGroup>
+    );
+  },
+);
+
+ChoiceboxGroupRoot.displayName = 'ChoiceboxGroup';
+
+export interface ChoiceboxItemProps
+  extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+  value: string;
+  title?: React.ReactNode;
+  disabled?: boolean;
+  children: ReactNode;
+}
+const ChoiceboxItem = forwardRef<HTMLLabelElement, ChoiceboxItemProps>(
+  ({ className, value, title, disabled, children }, ref) => {
+    const id = useId();
+    return (
+      <label
+        key={`${id}-${value}`}
+        ref={ref}
+        className={cn(
+          ' relative cursor-pointer justify-center  h-min rounded-sm  transition-[color,box-shadow] w-full outline-hidden bg-accent hover:bg-border hover:cursor-pointer ',
+        )}
+      >
+        <RadioGroup.Item
+          id={`${id}-${value}`}
+          value={value}
+          className="peer sr-only after:absolute after:inset-0"
+          disabled={disabled}
+        />
+        <div
+          className={cn(
+            'w-full h-full rounded-sm border border-transparent peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/10 peer-data-[state=checked]:text-primary  p-3 flex-col gap-[6px] flex',
+            className,
+          )}
+        >
+          {title && (
+            <Label
+              htmlFor={`${id}-${value}`}
+              className=" text-xs font-semibold text-muted-foreground normal-case font-sans"
+            >
+              {title}
+            </Label>
+          )}
+          <span id={`${id}-1-description`} className="font-semibold text-sm">
+            {children}
+          </span>
+        </div>
+      </label>
+    );
+  },
+);
+
+ChoiceboxItem.displayName = 'ChoiceboxGroup.Item';
+
+export const ChoiceboxGroup = Object.assign(ChoiceboxGroupRoot, {
+  Item: ChoiceboxItem,
+});

package/src/components/collapsible.tsx

@@ -0,0 +1,46 @@
+import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
+import React from 'react';
+import { Button } from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib';
+import { IconCaretDownFilled } from '@tabler/icons-react';
+export const TriggerButton = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentPropsWithoutRef<typeof Button>
+>(({ className, ...props }, ref) => {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger asChild ref={ref}>
+      <Button
+        variant="ghost"
+        size="sm"
+        className={cn(
+          'w-full justify-start text-accent-foreground group',
+          className,
+        )}
+        {...props}
+      />
+    </CollapsiblePrimitive.CollapsibleTrigger>
+  );
+});
+
+export const TriggerIcon = React.forwardRef<
+  React.ElementRef<typeof IconCaretDownFilled>,
+  React.ComponentPropsWithoutRef<typeof IconCaretDownFilled>
+>(({ className, ...props }, ref) => {
+  return (
+    <IconCaretDownFilled
+      className={cn(
+        'transition-transform duration-100 group-data-[state=closed]:-rotate-90',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+export const Collapsible = Object.assign(CollapsiblePrimitive.Root, {
+  Trigger: CollapsiblePrimitive.CollapsibleTrigger,
+  TriggerIcon: TriggerIcon,
+  TriggerButton: TriggerButton,
+  Content: CollapsiblePrimitive.CollapsibleContent,
+});

package/src/components/color-picker.tsx

@@ -0,0 +1,195 @@
+import { IconCheck, IconChevronDown } from '@tabler/icons-react';
+import { Combobox, Popover, inputVariants } from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib';
+import { PopoverScoped } from 'erxes-ui/modules';
+import React, { createContext, useContext, useState } from 'react';
+import { IMaskInput } from 'react-imask';
+
+const DEFAULT_COLORS = {
+  red: '#dc2626',
+  orange: '#f97316',
+  amber: '#f59e0b',
+  yellow: '#eab308',
+  lime: '#84cc16',
+  green: '#16a34a',
+  emerald: '#059669',
+  cyan: '#06b6d4',
+  sky: '#0ea5e9',
+  blue: '#2563eb',
+  indigo: '#4f46e5',
+  violet: '#7c3aed',
+  purple: '#9333ea',
+  fuchsia: '#c026d3',
+  pink: '#db2777',
+  rose: '#e11d48',
+};
+
+interface ColorPickerContextValue {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  colors: Record<string, string>;
+}
+
+const ColorPickerContext = createContext<ColorPickerContextValue | null>(null);
+
+const useColorPickerContext = () => {
+  const context = useContext(ColorPickerContext);
+  if (!context) {
+    throw new Error(
+      'ColorPicker components must be used within ColorPickerProvider',
+    );
+  }
+  return context;
+};
+
+export const ColorPickerProvider = ({
+  children,
+  value,
+  onValueChange,
+  colors = DEFAULT_COLORS,
+  open,
+  onOpenChange,
+  scope,
+}: {
+  children: React.ReactNode;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  colors?: Record<string, string>;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  scope?: string;
+}) => {
+  return (
+    <ColorPickerContext.Provider
+      value={{
+        value,
+        onValueChange,
+        colors,
+      }}
+    >
+      <PopoverScoped scope={scope} open={open} onOpenChange={onOpenChange}>
+        {children}
+      </PopoverScoped>
+    </ColorPickerContext.Provider>
+  );
+};
+
+const ColorPickerTrigger = React.forwardRef<
+  React.ElementRef<typeof Combobox.TriggerBase>,
+  React.ComponentPropsWithoutRef<typeof Combobox.TriggerBase>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <Combobox.TriggerBase
+      ref={ref}
+      variant="outline"
+      className={cn('pl-1 pr-2 h-7', className)}
+      {...props}
+    >
+      {children}
+    </Combobox.TriggerBase>
+  );
+});
+
+ColorPickerTrigger.displayName = 'ColorPickerTrigger';
+
+const ColorPickerContent = ({
+  setOpen,
+}: {
+  setOpen?: (open: boolean) => void;
+}) => {
+  const { value, onValueChange, colors } = useColorPickerContext();
+
+  return (
+    <Popover.Content className="p-1 w-64" align="start" sideOffset={8}>
+      <div className="grid grid-cols-5 gap-1">
+        {Object.entries(colors).map(([key, color]) => (
+          <div
+            key={key}
+            className="aspect-3/2 rounded flex items-center justify-center cursor-pointer hover:scale-105 transition-transform"
+            style={{ backgroundColor: color }}
+            onClick={() => {
+              onValueChange?.(color);
+              setOpen?.(false);
+            }}
+          >
+            {value === color && (
+              <IconCheck className="h-4 w-4 text-primary-foreground" />
+            )}
+          </div>
+        ))}
+        <div className="relative col-span-5">
+          <div
+            className="absolute size-7 rounded-[3px] top-0.5 left-0.5 flex items-center justify-center text-primary-foreground"
+            style={{ backgroundColor: value }}
+          >
+            <input
+              type="color"
+              value={value || '#000000'}
+              className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+              onChange={(e) => onValueChange?.(e.target.value)}
+            />
+            #
+          </div>
+          <IMaskInput
+            mask={/^[0-9A-Fa-f]+$/}
+            className={cn(inputVariants(), 'pl-9')}
+            value={(value || '').replace('#', '')}
+            onAccept={(v) => {
+              const newValue = '#' + v;
+              if (value !== newValue) {
+                onValueChange?.(newValue);
+              }
+            }}
+          />
+        </div>
+      </div>
+    </Popover.Content>
+  );
+};
+
+const ColorPickerRoot = React.forwardRef<
+  React.ElementRef<typeof Combobox.TriggerBase>,
+  Omit<React.ComponentPropsWithoutRef<typeof Combobox.TriggerBase>, 'value'> & {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    colors?: Record<string, string>;
+    scope?: string;
+  }
+>(({ value, onValueChange, colors, scope, className, ...props }, ref) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <ColorPickerProvider
+      value={value}
+      scope={scope}
+      onValueChange={(newValue) => {
+        onValueChange?.(newValue);
+      }}
+      colors={colors}
+      open={open}
+      onOpenChange={(open) => {
+        setOpen(open);
+      }}
+    >
+      <ColorPickerTrigger ref={ref} className={className} {...props}>
+        <div
+          className={cn(
+            'h-full w-full rounded shadow-inner',
+            !value && 'bg-primary',
+          )}
+          style={{ backgroundColor: value }}
+        />
+        <IconChevronDown />
+      </ColorPickerTrigger>
+      <ColorPickerContent setOpen={setOpen} />
+    </ColorPickerProvider>
+  );
+});
+
+ColorPickerRoot.displayName = 'ColorPickerRoot';
+
+export const ColorPicker = Object.assign(ColorPickerRoot, {
+  Provider: ColorPickerProvider,
+  Trigger: ColorPickerTrigger,
+  Content: ColorPickerContent,
+});

package/src/components/combobox.tsx

@@ -0,0 +1,212 @@
+import React from 'react';
+import { Button } from './button';
+import { cn } from '../lib/utils';
+import { IconCheck, IconChevronDown } from '@tabler/icons-react';
+import { Popover } from './popover';
+import { Command } from './command';
+import { useInView } from 'react-intersection-observer';
+import { mergeRefs } from 'react-merge-refs';
+import { Skeleton } from './skeleton';
+import type { ApolloError } from '@apollo/client';
+import { Spinner } from './spinner';
+
+export const ComboboxTriggerBase = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentPropsWithoutRef<typeof Button> & {
+    hideChevron?: boolean;
+  }
+>(({ className, children, hideChevron = false, ...props }, ref) => {
+  return (
+    <Popover.Trigger asChild>
+      <Button
+        ref={ref}
+        role="combobox"
+        variant="outline"
+        {...props}
+        type="button"
+        className={cn(
+          'flex truncate h-8 rounded pl-3 transition-[color,box-shadow] focus-visible:shadow-focus outline-hidden focus-visible:outline-hidden focus-visible:outline-offset-0 focus-visible:outline-transparent justify-start overflow-hidden font-normal text-left w-full gap-1',
+          (!props.variant || props.variant === 'outline') && 'shadow-xs',
+          props.size === 'lg' && 'gap-2',
+          className,
+        )}
+      >
+        {children}
+      </Button>
+    </Popover.Trigger>
+  );
+});
+
+export const ComboboxTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentPropsWithoutRef<typeof Button> & {
+    hideChevron?: boolean;
+  }
+>(({ children, hideChevron = false, ...props }, ref) => {
+  return (
+    <ComboboxTriggerBase {...props} ref={ref}>
+      {children}
+      {!hideChevron && (
+        <IconChevronDown className="size-4 opacity-50 text-muted-foreground  ml-auto" />
+      )}
+    </ComboboxTriggerBase>
+  );
+});
+
+ComboboxTrigger.displayName = 'ComboboxTrigger';
+
+export const ComboboxTriggerIcon = React.forwardRef<
+  React.ElementRef<typeof IconChevronDown>,
+  React.ComponentPropsWithoutRef<typeof IconChevronDown>
+>(({ className, ...props }, ref) => {
+  return (
+    <IconChevronDown
+      ref={ref}
+      size={16}
+      strokeWidth={2}
+      aria-hidden="true"
+      className={cn('flex-none opacity-50', className)}
+      {...props}
+    />
+  );
+});
+
+export const ComboboxValue = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement> & {
+    placeholder?: string;
+    loading?: boolean;
+    value?: string | JSX.Element;
+  }
+>(({ value, className, placeholder, loading, ...props }, ref) => {
+  if (loading) {
+    return <Skeleton className="w-full flex-1 h-4" />;
+  }
+
+  return (
+    <span
+      ref={ref}
+      {...props}
+      className={cn('truncate', className, !value && 'text-accent-foreground')}
+    >
+      {value || placeholder || ''}
+    </span>
+  );
+});
+
+ComboboxValue.displayName = 'ComboboxValue';
+
+export const ComboboxContent = React.forwardRef<
+  React.ElementRef<typeof Popover.Content>,
+  React.ComponentPropsWithoutRef<typeof Popover.Content>
+>(({ className, ...props }, ref) => {
+  return (
+    <Popover.Content
+      ref={ref}
+      align="start"
+      sideOffset={8}
+      {...props}
+      className={cn(
+        'p-0 min-w-72 w-(--radix-popper-anchor-width) max-w-96',
+        className,
+      )}
+    />
+  );
+});
+
+ComboboxContent.displayName = 'ComboboxContent';
+
+export const ComboboxCheck = React.forwardRef<
+  React.ElementRef<typeof IconCheck>,
+  React.ComponentPropsWithoutRef<typeof IconCheck> & {
+    checked?: boolean;
+  }
+>(({ className, checked, ...props }, ref) => {
+  if (!checked) {
+    return null;
+  }
+
+  return (
+    <IconCheck
+      ref={ref}
+      size={16}
+      strokeWidth={2}
+      className={cn('size-4 text-primary ml-auto', className)}
+      {...props}
+    />
+  );
+});
+
+ComboboxCheck.displayName = 'ComboboxCheck';
+
+export const ComboboxFetchMore = React.forwardRef<
+  React.ElementRef<typeof Command.Item>,
+  React.ComponentPropsWithoutRef<typeof Command.Item> & {
+    totalCount: number;
+    currentLength: number;
+    fetchMore: () => void;
+  }
+>(({ className, totalCount, currentLength, fetchMore, ...props }, ref) => {
+  const { ref: bottomRef } = useInView({
+    onChange: (inView) => inView && fetchMore(),
+  });
+
+  if (currentLength >= totalCount || !totalCount || currentLength === 0) {
+    return null;
+  }
+
+  return (
+    <Command.Item
+      ref={mergeRefs([ref, bottomRef])}
+      {...props}
+      className={cn(className)}
+    >
+      <Spinner
+        className="size-4 text-muted-foreground"
+        containerClassName="w-auto flex-none mr-2"
+      />
+      Load more...
+    </Command.Item>
+  );
+});
+
+ComboboxFetchMore.displayName = 'ComboboxFetchMore';
+
+const ComboboxEmpty = React.forwardRef<
+  React.ElementRef<typeof Command.Empty>,
+  React.ComponentPropsWithoutRef<typeof Command.Empty> & {
+    loading?: boolean;
+    error?: ApolloError;
+  }
+>(({ className, loading, error, ...props }, ref) => {
+  return (
+    <Command.Empty ref={ref} {...props} className={cn(className)}>
+      {loading ? (
+        <div className="flex flex-col gap-2 items-start p-4">
+          <Skeleton className="w-2/3 h-4" />
+          <Skeleton className="w-full h-4" />
+          <Skeleton className="w-32 h-4" />
+          <Skeleton className="w-2/3 h-4" />
+          <Skeleton className="w-full h-4" />
+          <Skeleton className="w-32 h-4" />
+        </div>
+      ) : error ? (
+        <p className="text-muted-foreground p-8 text-center">{error.message}</p>
+      ) : (
+        <p className="text-muted-foreground p-8 text-center">
+          No results found.
+        </p>
+      )}
+    </Command.Empty>
+  );
+});
+
+export const Combobox = {
+  TriggerBase: ComboboxTriggerBase,
+  Trigger: ComboboxTrigger,
+  Value: ComboboxValue,
+  Content: ComboboxContent,
+  Check: ComboboxCheck,
+  FetchMore: ComboboxFetchMore,
+  Empty: ComboboxEmpty,
+};