@erxes/ui 0.0.0-stage → 3.2.20-1

package/src/components/spinner.tsx

@@ -0,0 +1,168 @@
+import { cn } from 'erxes-ui/lib';
+import { VariantProps, cva } from 'class-variance-authority';
+
+const spinnerVariants = cva(
+  'flex-col items-center justify-center flex-auto h-full',
+  {
+    variants: {
+      show: {
+        true: 'flex',
+        false: 'hidden',
+      },
+    },
+    defaultVariants: {
+      show: true,
+    },
+  },
+);
+
+const loaderVariants = cva('relative', {
+  variants: {
+    size: {
+      sm: 'size-3',
+      default: 'size-4',
+      md: 'size-5',
+      lg: 'size-6',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+interface SpinnerContentProps
+  extends VariantProps<typeof spinnerVariants>,
+    VariantProps<typeof loaderVariants> {
+  className?: string;
+  containerClassName?: string;
+  withMascot?: boolean;
+}
+
+const BOT_WHITE = '#FFFFFF';
+const BOT_BODY = '#ECE9FB';
+const BOT_LIMB = '#D9D3F5';
+const BOT_GLOW = '#A78BFA';
+const BOT_VISOR = '#2A1F5C';
+const BOT_VISOR_SHINE = '#3D3180';
+const BOT_DOTS = '#7F6BD6';
+
+const FILL_BOX = '[transform-box:fill-box]';
+
+// The erxes bot hugging its knees, rocking and glancing around while it waits.
+const WaitingBot = ({ className }: { className?: string }) => (
+  <div
+    role="status"
+    className={cn(
+      'flex flex-col items-center gap-1 animate-bot-appear',
+      className,
+    )}
+  >
+    <svg viewBox="20 4 136 134" className="w-20" aria-hidden="true">
+      <circle cx="80" cy="76" r="58" className="fill-primary/10" />
+      <ellipse cx="80" cy="129" rx="44" ry="5" fill={BOT_GLOW} opacity="0.18" />
+      <g className={cn(FILL_BOX, 'origin-bottom motion-safe:animate-bot-rock')}>
+        <ellipse cx="80" cy="102" rx="32" ry="25" fill={BOT_BODY} />
+        <ellipse cx="66" cy="108" rx="13" ry="18" fill={BOT_LIMB} />
+        <ellipse cx="94" cy="108" rx="13" ry="18" fill={BOT_LIMB} />
+        <path
+          d="M60 98q-3 8 0 16"
+          stroke={BOT_WHITE}
+          strokeWidth="3.5"
+          strokeLinecap="round"
+          fill="none"
+          opacity="0.7"
+        />
+        <ellipse cx="64" cy="125" rx="11" ry="6" fill={BOT_LIMB} />
+        <ellipse cx="96" cy="125" rx="11" ry="6" fill={BOT_LIMB} />
+        <circle cx="72" cy="104" r="7" fill={BOT_BODY} />
+        <circle cx="88" cy="104" r="7" fill={BOT_BODY} />
+        <circle cx="80" cy="52" r="33" fill={BOT_WHITE} />
+        <path
+          d="M53 64a29 29 0 0 0 38 19"
+          stroke={BOT_BODY}
+          strokeWidth="5"
+          strokeLinecap="round"
+          fill="none"
+        />
+        <rect x="55" y="37" width="50" height="29" rx="14.5" fill={BOT_VISOR} />
+        <rect
+          x="62"
+          y="42"
+          width="12"
+          height="4"
+          rx="2"
+          fill={BOT_VISOR_SHINE}
+        />
+        <g className="motion-safe:animate-bot-glance">
+          {[66, 84].map((x) => (
+            <rect
+              key={x}
+              x={x}
+              y="46"
+              width="10"
+              height="13"
+              rx="5"
+              fill={BOT_GLOW}
+              className={cn(
+                FILL_BOX,
+                'origin-center motion-safe:animate-bot-blink',
+              )}
+            />
+          ))}
+        </g>
+      </g>
+      <g className="fill-background stroke-primary/20" strokeWidth="1.5">
+        <circle cx="108" cy="31" r="2.5" />
+        <circle cx="113" cy="25" r="3.5" />
+        <rect x="115" y="8" width="38" height="18" rx="9" />
+      </g>
+      {[125, 134, 143].map((cx, i) => (
+        <circle
+          key={cx}
+          cx={cx}
+          cy="17"
+          r="2.8"
+          fill={BOT_DOTS}
+          className="animate-bot-dots"
+          style={{ animationDelay: `${i * 0.2}s` }}
+        />
+      ))}
+    </svg>
+    <span className="text-xs text-muted-foreground">Loading</span>
+  </div>
+);
+
+export function Spinner({
+  size,
+  show,
+  className,
+  containerClassName,
+  withMascot,
+}: SpinnerContentProps) {
+  if (withMascot) {
+    return (
+      <div className={cn(spinnerVariants({ show }), containerClassName)}>
+        <WaitingBot className={className} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn(spinnerVariants({ show }), containerClassName)}>
+      <div className={cn(loaderVariants({ size }), className)}>
+        <div className="relative size-full left-1/2 top-1/2">
+          {[...Array(10)].map((_, i) => (
+            <div
+              key={i}
+              style={{
+                transform: `translate(146%) rotate(${i * 36 + 0.001}deg)`,
+                animationDelay: `-${(10 - i) * 0.096}s`,
+              }}
+              className="absolute h-[8%] w-[24%] left-[-10%] top-[-3.9%] origin-[-100%] rounded-md bg-current animate-spinner "
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/stepper.tsx

@@ -0,0 +1,304 @@
+import * as React from 'react';
+import { createContext, useContext } from 'react';
+import { Slot } from 'radix-ui';
+import { cn } from 'erxes-ui/lib';
+import { IconCheck, IconLoader2 } from '@tabler/icons-react';
+
+type StepperContextValue = {
+  activeStep: number;
+  setActiveStep: (step: number) => void;
+  orientation: 'horizontal' | 'vertical';
+};
+
+type StepItemContextValue = {
+  step: number;
+  state: StepState;
+  isDisabled: boolean;
+  isLoading: boolean;
+};
+
+type StepState = 'active' | 'completed' | 'inactive' | 'loading';
+
+const StepperContext = createContext<StepperContextValue | undefined>(
+  undefined,
+);
+const StepItemContext = createContext<StepItemContextValue | undefined>(
+  undefined,
+);
+
+const useStepper = () => {
+  const context = useContext(StepperContext);
+  if (!context) {
+    throw new Error('useStepper must be used within a Stepper');
+  }
+  return context;
+};
+
+const useStepItem = () => {
+  const context = useContext(StepItemContext);
+  if (!context) {
+    throw new Error('useStepItem must be used within a StepperItem');
+  }
+  return context;
+};
+
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultValue?: number;
+  value?: number;
+  onValueChange?: (value: number) => void;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+const StepperRoot = React.forwardRef<HTMLDivElement, StepperProps>(
+  (
+    {
+      defaultValue = 0,
+      value,
+      onValueChange,
+      orientation = 'horizontal',
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [activeStep, setInternalStep] = React.useState(defaultValue);
+
+    const setActiveStep = React.useCallback(
+      (step: number) => {
+        if (value === undefined) {
+          setInternalStep(step);
+        }
+        onValueChange?.(step);
+      },
+      [value, onValueChange],
+    );
+
+    const currentStep = value ?? activeStep;
+
+    return (
+      <StepperContext.Provider
+        value={{
+          activeStep: currentStep,
+          setActiveStep,
+          orientation,
+        }}
+      >
+        <div
+          ref={ref}
+          data-slot="stepper"
+          className={cn(
+            'group/stepper inline-flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col',
+            className,
+          )}
+          data-orientation={orientation}
+          {...props}
+        />
+      </StepperContext.Provider>
+    );
+  },
+);
+StepperRoot.displayName = 'Stepper';
+
+interface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  step: number;
+  completed?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+const StepperItem = React.forwardRef<HTMLDivElement, StepperItemProps>(
+  (
+    {
+      step,
+      completed = false,
+      disabled = false,
+      loading = false,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { activeStep } = useStepper();
+
+    const state: StepState =
+      completed || step < activeStep
+        ? 'completed'
+        : activeStep === step
+        ? 'active'
+        : 'inactive';
+
+    const isLoading = loading && step === activeStep;
+
+    return (
+      <StepItemContext.Provider
+        value={{ step, state, isDisabled: disabled, isLoading }}
+      >
+        <div
+          ref={ref}
+          data-slot="stepper-item"
+          className={cn(
+            'group/step flex items-center group-data-[orientation=horizontal]/stepper:flex-row group-data-[orientation=vertical]/stepper:flex-col',
+            className,
+          )}
+          data-state={state}
+          {...(isLoading ? { 'data-loading': true } : {})}
+          {...props}
+        >
+          {children}
+        </div>
+      </StepItemContext.Provider>
+    );
+  },
+);
+StepperItem.displayName = 'StepperItem';
+
+interface StepperTriggerProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  asChild?: boolean;
+}
+
+const StepperTrigger = React.forwardRef<HTMLButtonElement, StepperTriggerProps>(
+  ({ asChild = false, className, children, ...props }, ref) => {
+    const { setActiveStep } = useStepper();
+    const { step, isDisabled } = useStepItem();
+
+    if (asChild) {
+      const Comp = asChild ? Slot.Root : 'span';
+      return (
+        <Comp data-slot="stepper-trigger" className={className}>
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <button
+        ref={ref}
+        data-slot="stepper-trigger"
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 inline-flex items-center gap-3 rounded-full outline-hidden focus-visible:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50',
+          className,
+        )}
+        onClick={() => setActiveStep(step)}
+        disabled={isDisabled}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+StepperTrigger.displayName = 'StepperTrigger';
+
+interface StepperIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+}
+
+const StepperIndicator = React.forwardRef<
+  HTMLDivElement,
+  StepperIndicatorProps
+>(({ asChild = false, className, children, ...props }, ref) => {
+  const { state, step, isLoading } = useStepItem();
+
+  return (
+    <span
+      ref={ref}
+      data-slot="stepper-indicator"
+      className={cn(
+        'bg-muted text-muted-foreground data-[state=active]:bg-primary data-[state=completed]:bg-primary data-[state=active]:text-primary-foreground data-[state=completed]:text-primary-foreground relative flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-medium',
+        className,
+      )}
+      data-state={state}
+      {...props}
+    >
+      {asChild ? (
+        children
+      ) : (
+        <>
+          <span className="transition-all group-data-loading/step:scale-0 group-data-loading/step:opacity-0 group-data-loading/step:transition-none group-data-[state=completed]/step:scale-0 group-data-[state=completed]/step:opacity-0">
+            {step}
+          </span>
+          <IconCheck
+            className="absolute scale-0 opacity-0 transition-all group-data-[state=completed]/step:scale-100 group-data-[state=completed]/step:opacity-100"
+            size={16}
+            aria-hidden="true"
+          />
+          {isLoading && (
+            <span className="absolute transition-all">
+              <IconLoader2
+                className="animate-spin"
+                size={14}
+                aria-hidden="true"
+              />
+            </span>
+          )}
+        </>
+      )}
+    </span>
+  );
+});
+StepperIndicator.displayName = 'StepperIndicator';
+
+const StepperTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => {
+  const { state } = useStepItem();
+
+  return (
+    <h3
+      ref={ref}
+      data-slot="stepper-title"
+      className={cn(
+        'text-sm font-medium data-[state=active]:text-primary data-[state=completed]:text-primary',
+        className,
+      )}
+      data-state={state}
+      {...props}
+    />
+  );
+});
+StepperTitle.displayName = 'StepperTitle';
+
+const StepperDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <p
+      ref={ref}
+      data-slot="stepper-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+});
+StepperDescription.displayName = 'StepperDescription';
+
+const StepperSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="stepper-separator"
+      className={cn(
+        'bg-muted group-data-[state=completed]/step:bg-primary m-0.5 group-data-[orientation=horizontal]/stepper:h-0.5 group-data-[orientation=horizontal]/stepper:w-full group-data-[orientation=horizontal]/stepper:flex-1 group-data-[orientation=vertical]/stepper:h-12 group-data-[orientation=vertical]/stepper:w-0.5',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+StepperSeparator.displayName = 'StepperSeparator';
+
+export const Stepper = Object.assign(StepperRoot, {
+  Item: StepperItem,
+  Trigger: StepperTrigger,
+  Indicator: StepperIndicator,
+  Title: StepperTitle,
+  Description: StepperDescription,
+  Separator: StepperSeparator,
+});

package/src/components/string-array.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { type Tag, TagInput } from 'emblor';
+import { cn } from 'erxes-ui/lib';
+import { useState } from 'react';
+import { handleStringArrayPaste } from '../utils/string-array';
+
+export function StringArrayInput({
+  value,
+  onValueChange,
+  id,
+  placeholder,
+  styleClasses,
+  onBlur,
+  splitOnPaste = false,
+}: {
+  value: string[];
+  onValueChange: (value: string[]) => void;
+  id?: string;
+  placeholder?: string;
+  styleClasses?: {
+    inlineTagsContainer?: string;
+    input?: string;
+    tag?: {
+      body?: string;
+      closeButton?: string;
+    };
+  };
+  onBlur?: () => void;
+  splitOnPaste?: boolean;
+}) {
+  const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
+
+  return (
+    <TagInput
+      activeTagIndex={activeTagIndex}
+      placeholder={placeholder || 'Add a tag'}
+      setActiveTagIndex={setActiveTagIndex}
+      id={id}
+      setTags={(newTags) => {
+        onValueChange((newTags as Tag[]).map((tag) => tag.text as string));
+      }}
+      styleClasses={{
+        inlineTagsContainer: cn(
+          'rounded bg-background border-none transition-[color,box-shadow] focus-within:shadow-focus outline-none min-h-8 h-auto p-0 px-1 gap-1 flex-wrap',
+          styleClasses?.inlineTagsContainer,
+        ),
+        input: cn(
+          'w-full min-w-[80px] shadow-none px-2 h-7',
+          styleClasses?.input,
+        ),
+        tag: {
+          body: cn(
+            'h-6 relative bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-5',
+            styleClasses?.tag?.body,
+          ),
+          closeButton: cn(
+            'absolute -inset-y-px -end-px p-0 rounded-e-md flex size-6 transition-[color,box-shadow] outline-none text-muted-foreground/80 hover:text-foreground',
+            styleClasses?.tag?.closeButton,
+          ),
+        },
+      }}
+      tags={value.map((tag) => ({ id: tag, text: tag }))}
+      onBlur={onBlur}
+      inputProps={{
+        onPaste: (event) =>
+          splitOnPaste &&
+          handleStringArrayPaste({ event, value, onValueChange }),
+      }}
+    />
+  );
+}

package/src/components/switch.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Switch as SwitchPrimitives } from 'radix-ui';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from 'erxes-ui/lib/utils';
+
+const switchVariants = cva(
+  'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-transparent transition-colors focus-visible:outline-hidden focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-50 aria-checked:bg-primary aria-[checked=false]:bg-accent shadow-inner',
+  {
+    variants: {
+      size: {
+        default: 'h-6 w-10 p-1',
+        sm: 'h-4 w-7 p-0.5',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+const switchThumbVariants = cva(
+  'pointer-events-none block rounded-full bg-background dark:bg-foreground shadow-sm ring-0 transition-transform data-[state=unchecked]:translate-x-0',
+  {
+    variants: {
+      size: {
+        default: 'size-4 data-[state=checked]:translate-x-4',
+        sm: 'size-3 data-[state=checked]:translate-x-3',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+export const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> &
+    VariantProps<typeof switchVariants>
+>(({ className, size, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(switchVariants({ size }), className)}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb className={switchThumbVariants({ size })} />
+  </SwitchPrimitives.Root>
+));
+
+Switch.displayName = SwitchPrimitives.Root.displayName;

package/src/components/table.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+
+const TableRoot = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <table
+    ref={ref}
+    className={cn(
+      'w-full caption-bottom text-sm border-separate bg-sidebar table-fixed border-spacing-0',
+      className,
+    )}
+    {...props}
+  />
+));
+TableRoot.displayName = 'TableRoot';
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn(className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn(
+      '[&_tr:last-child]:border-0 border border-collapse rounded-lg',
+      className,
+    )}
+    {...props}
+  />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot ref={ref} className={className} {...props} />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      '[&>td]:border-b [&>td:first-child]:border-l transition-colors group/table-row hover:bg-muted',
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-9 px-2 text-left align-middle font-semibold text-xs text-accent-foreground *:[[role=checkbox]]:translate-y-[2px] border-spacing-0 font-mono uppercase bg-sidebar',
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      'align-middle p-0 *:[[role=checkbox]]:translate-y-[2px] bg-background whitespace-nowrap h-cell border-r border-spacing-0 group-data-[state=selected]/table-row:bg-primary/10 group-hover/table-row:bg-muted',
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+TableCaption.displayName = 'TableCaption';
+
+export const Table = Object.assign(TableRoot, {
+  Header: TableHeader,
+  Body: TableBody,
+  Footer: TableFooter,
+  Head: TableHead,
+  Row: TableRow,
+  Cell: TableCell,
+  Caption: TableCaption,
+});