@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/components/button.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import { Slot } from 'radix-ui';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from 'erxes-ui/lib';
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 px-3 whitespace-nowrap rounded text-sm transition-colors outline-offset-2 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:opacity-50 [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 font-medium cursor-pointer',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-primary border relative transition duration-300 ease-in-out before:duration-300 before:ease-in-out before:transtion-opacity rounded shadow-button-primary before:pointer-events-none before:absolute before:inset-0 before:rounded-[0.1875rem] before:bg-linear-to-b before:from-white/20 before:opacity-50 hover:before:opacity-100 bg-primary text-primary-foreground after:pointer-events-none after:absolute after:inset-0 after:bg-white/10 after:bottom-1/2 after:rounded-[0.1875rem] after:mix-blend-overlay [text-shadow:0_0.0625rem_0.0625rem_rgb(0_0_0/25%)]',
+        destructive:
+          'border-destructive border relative transition duration-300 ease-in-out before:duration-300 before:ease-in-out before:transtion-opacity rounded shadow-button-primary before:pointer-events-none before:absolute before:inset-0 before:rounded before:bg-linear-to-b before:from-white/20 before:opacity-50 hover:before:opacity-100 bg-destructive text-destructive-foreground after:pointer-events-none after:absolute after:inset-0 after:bg-white/10 after:bottom-1/2 after:rounded after:mix-blend-overlay [text-shadow:0_1px_1px_rgb(0_0_0/25%)]',
+        outline:
+          'shadow-sm bg-background shadow-button-outline hover:bg-accent',
+        secondary: 'bg-accent text-foreground hover:bg-border',
+        ghost: 'hover:bg-accent-foreground/10',
+        link: 'bg-background shadow-button-outline hover:bg-accent text-primary',
+      },
+      size: {
+        default: 'h-7 py-1',
+        sm: 'h-6 rounded text-xs after:rounded-[2px] after:absolute px-2 gap-1',
+        lg: 'h-8 rounded font-semibold',
+        icon: 'h-7 w-7',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot.Root : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        type="button"
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+Button.displayName = 'Button';

package/src/components/calendar.tsx

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import {
+  DayFlag,
+  DayPicker,
+  DropdownNavProps,
+  DropdownProps,
+  SelectionState,
+  UI,
+} from 'react-day-picker';
+
+import {
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronUp,
+} from '@tabler/icons-react';
+
+import { buttonVariants } from './button';
+import { Select } from './select';
+import { cn } from '../lib/utils';
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+// Common classNames for both calendar variants
+const getBaseClassNames = (customClassNames = {}) => ({
+  [UI.CaptionLabel]: 'text-sm font-medium',
+  [UI.MonthGrid]: 'w-full border-collapse space-y-1',
+  [SelectionState.range_end]: 'day-range-end',
+  [SelectionState.selected]:
+    'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+  [SelectionState.range_middle]:
+    'aria-selected:bg-accent aria-selected:text-foreground aria-selected:rounded-none',
+  [DayFlag.today]: 'bg-accent text-foreground',
+  [DayFlag.outside]:
+    'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+  [DayFlag.disabled]: 'text-muted-foreground opacity-50',
+  [DayFlag.hidden]: 'invisible',
+  [UI.Day]:
+    'h-8 w-8 text-center rounded-md text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+  [UI.DayButton]: cn(
+    buttonVariants({ variant: 'ghost' }),
+    'h-8 w-8 p-0 font-normal aria-selected:opacity-100 hover:bg-primary hover:text-primary-foreground',
+  ),
+  ...customClassNames,
+});
+
+export const Calendar = React.forwardRef<React.JSX.Element, CalendarProps>(
+  ({ className, classNames, showOutsideDays, ...props }, ref) => {
+    const handleCalendarChange = (
+      _value: string | number,
+      _e: React.ChangeEventHandler<HTMLSelectElement>,
+    ) => {
+      const _event = {
+        target: {
+          value: String(_value),
+        },
+      } as React.ChangeEvent<HTMLSelectElement>;
+      _e(_event);
+    };
+    return (
+      <DayPicker
+        showOutsideDays={showOutsideDays}
+        className={cn('p-3', className)}
+        classNames={getBaseClassNames({
+          [UI.Months]: 'relative',
+          [UI.Month]: 'space-y-4 ml-0',
+          [UI.MonthCaption]: 'flex justify-center items-center h-7',
+          [UI.PreviousMonthButton]: cn(
+            buttonVariants({ variant: 'secondary' }),
+            'absolute left-0 top-0 size-7 p-0',
+          ),
+          [UI.NextMonthButton]: cn(
+            buttonVariants({ variant: 'secondary' }),
+            'absolute right-0 top-0 size-7 p-0',
+          ),
+          [UI.Weekdays]: 'flex',
+          [UI.Weekday]:
+            'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+          [UI.Week]: 'flex w-full mt-2 gap-1',
+          ...classNames,
+        })}
+        captionLayout="dropdown"
+        defaultMonth={new Date()}
+        startMonth={new Date(1980, 6)}
+        endMonth={new Date(new Date().getFullYear() + 10, 11)}
+        components={{
+          DropdownNav: (props: DropdownNavProps) => {
+            return (
+              <div className="flex w-full items-center gap-2 justify-center">
+                {props.children}
+              </div>
+            );
+          },
+          Dropdown: (props: DropdownProps) => {
+            return (
+              <Select
+                value={String(props.value)}
+                onValueChange={(value) => {
+                  if (props.onChange) {
+                    handleCalendarChange(value, props.onChange);
+                  }
+                }}
+              >
+                <Select.Trigger className="w-fit font-medium flex-none">
+                  <Select.Value className="gap-1" />
+                </Select.Trigger>
+                <Select.Content className="max-h-[min(26rem,var(--radix-select-content-available-height))]">
+                  {props.options?.map((option) => (
+                    <Select.Item
+                      key={option.value}
+                      value={String(option.value)}
+                      disabled={option.disabled}
+                    >
+                      {option.label}
+                    </Select.Item>
+                  ))}
+                </Select.Content>
+              </Select>
+            );
+          },
+          Chevron: ({ ...props }) => <Chevron {...props} />,
+        }}
+        {...props}
+      />
+    );
+  },
+);
+
+export const CalendarTwoMonths = React.forwardRef<
+  React.JSX.Element,
+  CalendarProps
+>(({ className, classNames, showOutsideDays, ...props }, ref) => {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(className)}
+      classNames={getBaseClassNames({
+        [UI.Months]: 'relative inline-flex',
+        [UI.Month]:
+          'space-y-4 ml-0 first-of-type:mr-12 first-of-type:relative first-of-type:after:absolute first-of-type:after:w-px first-of-type:after:h-auto first-of-type:after:inset-y-0 first-of-type:after:-right-6 first-of-type:after:bg-muted',
+        [UI.MonthCaption]: 'flex items-center h-7',
+        [UI.PreviousMonthButton]: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'absolute right-10 top-0 h-7 w-7 bg-muted p-0 opacity-80 hover:opacity-100',
+        ),
+        [UI.NextMonthButton]: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'absolute right-1 top-0 h-7 w-7 bg-muted p-0 opacity-80 hover:opacity-100',
+        ),
+        [UI.Weekdays]: 'flex w-full border-b border-muted',
+        [UI.Weekday]:
+          'text-muted-foreground rounded-md w-8 h-6 font-normal text-[0.8rem]',
+        [UI.Week]: 'flex w-full mt-0.5',
+        ...classNames,
+      })}
+      components={{
+        Chevron: ({ ...props }) => <Chevron {...props} />,
+      }}
+      numberOfMonths={2}
+      {...props}
+    />
+  );
+});
+
+const Chevron = ({ orientation = 'left' }) => {
+  switch (orientation) {
+    case 'left':
+      return <IconChevronLeft className="h-4 w-4" />;
+    case 'right':
+      return <IconChevronRight className="h-4 w-4" />;
+    case 'up':
+      return <IconChevronUp className="h-4 w-4" />;
+    case 'down':
+      return <IconChevronDown className="h-4 w-4" />;
+    default:
+      return null;
+  }
+};

package/src/components/card.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+
+import { cn } from 'erxes-ui/lib';
+
+const CardRoot = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-xl bg-card text-card-foreground shadow-sm',
+      className,
+    )}
+    {...props}
+  />
+));
+CardRoot.displayName = 'CardRoot';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col text-xl space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'font-semibold leading-none tracking-tight text-xl',
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm text-muted-foreground font-medium', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export const Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Footer: CardFooter,
+  Title: CardTitle,
+  Description: CardDescription,
+  Content: CardContent,
+});

package/src/components/charts.tsx

@@ -0,0 +1,363 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+
+import { cn } from '../lib/utils';
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />');
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >['children'];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = 'Chart';
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join('\n')}
+}
+`,
+          )
+          .join('\n'),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<'div'> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: 'line' | 'dot' | 'dashed';
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = 'dot',
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === 'string'
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn('font-medium', labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn('font-medium', labelClassName)}>{value}</div>;
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== 'dot';
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
+                  indicator === 'dot' && 'items-center',
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            'shrink-0 rounded-[2px] border-border bg-(--color-bg)',
+                            {
+                              'h-2.5 w-2.5': indicator === 'dot',
+                              'w-1': indicator === 'line',
+                              'w-0 border-[1.5px] border-dashed bg-transparent':
+                                indicator === 'dashed',
+                              'my-0.5': nestLabel && indicator === 'dashed',
+                            },
+                          )}
+                          style={
+                            {
+                              '--color-bg': indicatorColor,
+                              '--color-border': indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        'flex flex-1 justify-between leading-none',
+                        nestLabel ? 'items-end' : 'items-center',
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value !== undefined && item.value !== null && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = 'ChartTooltip';
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> &
+    Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex items-center justify-center gap-4',
+          verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+          className,
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || 'value'}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground',
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);
+ChartLegendContent.displayName = 'ChartLegend';
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== 'object' || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    'payload' in payload &&
+    typeof payload.payload === 'object' &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === 'string'
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};