@erxes/ui 0.0.0-stage → 3.2.20-1

package/src/modules/select-tree/hooks/useSelectTreeHide.tsx

@@ -0,0 +1,29 @@
+import { useAtom } from 'jotai';
+import { hideChildrenAtomFamily } from 'erxes-ui/modules/select-tree/states/selectTreeStates';
+import { useSelectTreeContext } from 'erxes-ui/modules/select-tree/context/SelectTreeContext';
+
+export function useSelectTreeHide(order?: string) {
+  const { id } = useSelectTreeContext();
+  const [hideChildren, setHideChildren] = useAtom(hideChildrenAtomFamily(id));
+
+  const toggleHideChildren = (order: string) => {
+    setHideChildren(
+      hideChildren.includes(order)
+        ? hideChildren.filter((child) => child !== order)
+        : [...hideChildren, order],
+    );
+  };
+
+  const isHiddenByParent = hideChildren.some(
+    (e) => order?.startsWith(e) && order?.length > e.length,
+  );
+
+  const isHidden = hideChildren.includes(order ?? '');
+
+  return {
+    hideChildren,
+    toggleHideChildren,
+    isHidden,
+    isHiddenByParent,
+  } as const;
+}

package/src/modules/select-tree/index.ts

@@ -0,0 +1 @@
+export * from './components/SelectTree';

package/src/modules/select-tree/states/selectTreeStates.tsx

@@ -0,0 +1,5 @@
+import { atom } from 'jotai';
+import { atomFamily } from 'jotai/utils';
+
+export const hideChildrenAtomFamily = atomFamily((key: string) => atom<string[]>([]));
+

package/src/modules/select-tree/types/selectTreeTypes.ts

@@ -0,0 +1,14 @@
+export interface ISelectTreeContext {
+  id: string;
+  // hideChildren: string[];
+  // setHideChildren: (hideChildren: string[]) => void;
+  ordered?: boolean;
+}
+
+export interface ISelectTreeItem {
+  _id: string;
+  name: string;
+  order: string;
+  hasChildren: boolean;
+  selected?: boolean;
+}

package/src/modules/side-menu/components/SideMenu.tsx

@@ -0,0 +1,143 @@
+import { Separator, Tabs, Tooltip } from 'erxes-ui/components';
+import {
+  SideMenuContext,
+  useSideMenuContext,
+} from '../context/SideMenuContext';
+import { forwardRef, useState } from 'react';
+
+import { Icon } from '@tabler/icons-react';
+import { cn } from 'erxes-ui/lib/utils';
+
+export const SideMenuRoot = forwardRef<
+  React.ElementRef<typeof Tabs>,
+  React.ComponentProps<typeof Tabs>
+>(({ className, defaultValue, ...props }, ref) => {
+  const [activeTab, setActiveTab] = useState<string | undefined>(defaultValue);
+  return (
+    <SideMenuContext.Provider value={{ activeTab, setActiveTab }}>
+      <Tabs
+        ref={ref}
+        className={cn('flex', className)}
+        orientation="horizontal"
+        value={activeTab || undefined}
+        {...props}
+      >
+        {props.children}
+      </Tabs>
+    </SideMenuContext.Provider>
+  );
+});
+SideMenuRoot.displayName = 'SideMenuRoot';
+
+export const SideMenuContent = forwardRef<
+  React.ElementRef<typeof Tabs.Content>,
+  React.ComponentProps<typeof Tabs.Content>
+>(({ className, children, ...props }, ref) => {
+  const { activeTab } = useSideMenuContext();
+  if (!activeTab) {
+    return null;
+  }
+
+  return (
+    <Tabs.Content
+      ref={ref}
+      className={cn(
+        'data-[state=active]:border-l data-[state=active]:w-80 w-full transition-all data-[state=active]:flex flex-col overflow-hidden bg-sidebar',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Tabs.Content>
+  );
+});
+SideMenuContent.displayName = 'SideMenuContent';
+
+export const SideMenuContentHeader = forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentProps<'div'> & {
+    Icon?: Icon;
+    label?: string;
+    hideSeparator?: boolean;
+  }
+>(({ className, Icon, label, children, hideSeparator, ...props }, ref) => {
+  return (
+    <>
+      <div
+        ref={ref}
+        className={cn(
+          'h-11 px-5 flex items-center gap-2 flex-none bg-background',
+          className,
+        )}
+        {...props}
+      >
+        {!!Icon && (
+          <Icon className="size-4 flex-none text-primary" strokeWidth={3} />
+        )}
+        <div className="mr-auto font-medium text-primary">{label}</div>
+        {children}
+      </div>
+      {!hideSeparator && <Separator />}
+    </>
+  );
+});
+SideMenuContentHeader.displayName = 'SideMenuContentHeader';
+
+export const SideMenuSidebar = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof Tabs.List>
+>(({ className, ...props }, ref) => {
+  return (
+    <Tabs.List
+      ref={ref}
+      className={cn(
+        'w-16 flex-none border-l bg-sidebar h-full py-3 flex flex-col items-center justify-start gap-3',
+        className,
+      )}
+      {...props}
+    >
+      <Tooltip.Provider>{props.children}</Tooltip.Provider>
+    </Tabs.List>
+  );
+});
+SideMenuSidebar.displayName = 'SideMenuSidebar';
+
+export const SideMenuTrigger = forwardRef<
+  React.ElementRef<typeof Tabs.Trigger>,
+  React.ComponentPropsWithoutRef<typeof Tabs.Trigger> & {
+    label?: string;
+    Icon?: Icon;
+  }
+>(({ className, Icon, label, ...props }, ref) => {
+  const { activeTab, setActiveTab } = useSideMenuContext();
+  return (
+    <Tooltip>
+      <Tabs.Trigger
+        ref={ref}
+        className={cn(
+          'size-10 bg-sidebar data-[state=active]:bg-primary/10 data-[state=active]:text-foreground data-[state=active]:shadow-none [&_svg]:size-5 data-[state=active]:after:hidden [&_svg]:text-primary hover:bg-primary/10 data-[state=active]:hover:bg-primary/10 rounded',
+          className,
+        )}
+        onClick={(e) => {
+          e.preventDefault();
+          setActiveTab(activeTab === props.value ? undefined : props.value);
+        }}
+        {...props}
+        asChild
+      >
+        <Tooltip.Trigger>
+          {!!Icon && <Icon className="size-5 flex-none" />}
+        </Tooltip.Trigger>
+      </Tabs.Trigger>
+
+      <Tooltip.Content side="left">{label}</Tooltip.Content>
+    </Tooltip>
+  );
+});
+
+export const SideMenu = Object.assign(SideMenuRoot, {
+  Sidebar: SideMenuSidebar,
+  Content: SideMenuContent,
+  Header: SideMenuContentHeader,
+  Trigger: SideMenuTrigger,
+});

package/src/modules/side-menu/context/SideMenuContext.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface SideMenuContextValue {
+  activeTab?: string;
+  setActiveTab: (activeTab?: string) => void;
+}
+
+export const SideMenuContext = React.createContext<SideMenuContextValue | null>(
+  null,
+);
+
+export const useSideMenuContext = () => {
+  const context = React.useContext(SideMenuContext);
+  if (!context) {
+    throw new Error(
+      'useSideMenuContext must be used within a SideMenuContextProvider',
+    );
+  }
+  return context;
+};

package/src/state/index.ts

@@ -0,0 +1,2 @@
+export * from './themeState';
+export * from './sidebarPanelState';

package/src/state/sidebarPanelState.ts

@@ -0,0 +1,8 @@
+import { atomWithStorage } from 'jotai/utils';
+
+export const sidebarPanelOpenState = atomWithStorage<boolean>(
+  'sidebar:panel-open',
+  true,
+  undefined,
+  { getOnInit: true },
+);

package/src/state/themeState.ts

@@ -0,0 +1,4 @@
+import { ThemeOption } from '../types';
+import { atomWithStorage } from 'jotai/utils';
+
+export const themeState = atomWithStorage<ThemeOption>('erxes-theme', 'system');

package/src/theme.css

@@ -0,0 +1,275 @@
+/*
+  Tailwind theme contract shared by the core-ui host and plugin remotes.
+
+  Maps utilities to design tokens. Token values live on the host's :root and
+  .dark, so this file must not declare them. A plugin imports it next to its
+  own prefixed Tailwind utilities; see core-ui/src/styles.css for the host.
+*/
+@custom-variant dark (&:is(.dark *));
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+@theme {
+  --font-*: initial;
+  --font-sans:
+    var(--font-sans), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono:
+    var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+
+  --text-*: initial;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 0.875rem;
+  --text-sm: 0.8125rem;
+  --text-sm--line-height: 1rem;
+  --text-base: 0.875rem;
+  --text-base--line-height: 1.125rem;
+  --text-lg: 1rem;
+  --text-lg--line-height: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.5rem;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 1.75rem;
+
+  --color-border: var(--border);
+  --color-scroll: var(--scroll);
+  --color-ring: var(--ring);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-sidebar: var(--sidebar-background);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-chart-50: var(--chart-50);
+  --color-chart-100: var(--chart-100);
+  --color-chart-200: var(--chart-200);
+  --color-chart-300: var(--chart-300);
+  --color-chart-400: var(--chart-400);
+  --color-chart-500: var(--chart-500);
+  --color-chart-600: var(--chart-600);
+  --color-chart-700: var(--chart-700);
+  --color-chart-800: var(--chart-800);
+  --color-chart-900: var(--chart-900);
+  --color-chart-950: var(--chart-950);
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --spacing-cell: 33px;
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-spinner: spinner 0.96s linear infinite;
+  --animate-bot-appear: bot-appear 0.3s ease-out 0.25s backwards;
+  --animate-bot-rock: bot-rock 2.6s ease-in-out infinite;
+  --animate-bot-glance: bot-glance 4.5s ease-in-out infinite;
+  --animate-bot-blink: bot-blink 4.5s infinite;
+  --animate-bot-dots: bot-dots 1.2s infinite;
+
+  --animate-first: move-vertical 30s ease infinite;
+  --animate-second: move-in-circle 20s reverse infinite;
+  --animate-third: move-in-circle 40s linear infinite;
+  --animate-fourth: move-horizontal 40s ease infinite;
+  --animate-fifth: move-in-circle 20s ease infinite;
+
+  --shadow-focus:
+    0px 0px 0px 4px rgba(79, 70, 229, 0.25), 0px 0px 0px 1px var(--primary);
+  --shadow-subtle: 0px 0px 0px 1px var(--primary);
+  --shadow-destructive: 0px 0px 0px 1px var(--destructive);
+  --shadow-focus-destructive:
+    0px 0px 0px 4px oklch(0.6334 0.2103 25.32 / 25%),
+    0px 0px 0px 1px var(--destructive);
+  --shadow-xs:
+    0 0 0 1px var(--border-shadow), 0 1px 1px var(--shadow),
+    0 2px 2px var(--shadow);
+  --shadow-sm:
+    0 0 0 1px var(--border-shadow), 0 1px 1px var(--shadow),
+    0 2px 2px var(--shadow), 0 4px 4px var(--shadow);
+  --shadow-lg:
+    0 0 0 1px var(--border-shadow), 0 1px 1px var(--shadow),
+    0 2px 2px var(--shadow), 0 4px 4px var(--shadow), 0 8px 8px var(--shadow);
+  --shadow-xl:
+    0 0 0 1px var(--border-shadow), 0 1px 1px var(--shadow),
+    0 2px 2px var(--shadow), 0 4px 4px var(--shadow), 0 8px 8px var(--shadow),
+    0 16px 16px var(--shadow);
+
+  --ring-color: var(--ring);
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+  @keyframes spinner {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0.15;
+    }
+  }
+  /* Waiting bot: hugs its knees and rocks, glancing around; dots pulse. */
+  @keyframes bot-appear {
+    from {
+      opacity: 0;
+    }
+  }
+  @keyframes bot-rock {
+    0%,
+    100% {
+      transform: rotate(-5deg);
+    }
+    50% {
+      transform: rotate(5deg);
+    }
+  }
+  @keyframes bot-glance {
+    0%,
+    20%,
+    80%,
+    100% {
+      transform: translateX(0);
+    }
+    30%,
+    45% {
+      transform: translateX(-5px);
+    }
+    55%,
+    70% {
+      transform: translateX(5px);
+    }
+  }
+  @keyframes bot-blink {
+    0%,
+    46%,
+    50%,
+    96%,
+    100% {
+      transform: scaleY(1);
+    }
+    48%,
+    98% {
+      transform: scaleY(0.1);
+    }
+  }
+  @keyframes bot-dots {
+    0%,
+    100% {
+      opacity: 0.25;
+    }
+    40% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes move-vertical {
+    0% {
+      transform: translateY(-50%);
+    }
+    50% {
+      transform: translateY(50%);
+    }
+    100% {
+      transform: translateY(-50%);
+    }
+  }
+  @keyframes move-in-circle {
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(180deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes move-horizontal {
+    0% {
+      transform: translateX(-50%) translateY(-10%);
+    }
+    50% {
+      transform: translateX(50%) translateY(10%);
+    }
+    100% {
+      transform: translateX(-50%) translateY(-10%);
+    }
+  }
+}
+
+@utility hide-scroll {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+@utility styled-scroll {
+  /* Custom scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    width: 1px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--border);
+    border-radius: 10px;
+    border: 3px solid var(--background);
+  }
+
+  /* Custom scrollbar for IE, Edge and Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+@utility block-child {
+  & > * {
+    @apply block!;
+  }
+}

package/src/types/CountryCode.ts

@@ -0,0 +1,6 @@
+export type TCountryCode = {
+  name: string;
+  code: string;
+  flag: string;
+  dial_code: string;
+};

package/src/types/CurrencyCode.ts

@@ -0,0 +1,161 @@
+import { Icon } from '@tabler/icons-react';
+
+export enum CurrencyCode {
+  AED = 'AED',
+  AFN = 'AFN',
+  ALL = 'ALL',
+  AMD = 'AMD',
+  ANG = 'ANG',
+  AOA = 'AOA',
+  ARS = 'ARS',
+  AUD = 'AUD',
+  AWG = 'AWG',
+  AZN = 'AZN',
+  BAM = 'BAM',
+  BBD = 'BBD',
+  BDT = 'BDT',
+  BGN = 'BGN',
+  BHD = 'BHD',
+  BIF = 'BIF',
+  BMD = 'BMD',
+  BND = 'BND',
+  BOB = 'BOB',
+  BRL = 'BRL',
+  BSD = 'BSD',
+  BTN = 'BTN',
+  BWP = 'BWP',
+  BYN = 'BYN',
+  BZD = 'BZD',
+  CAD = 'CAD',
+  CDF = 'CDF',
+  CHF = 'CHF',
+  CLP = 'CLP',
+  CNY = 'CNY',
+  COP = 'COP',
+  CRC = 'CRC',
+  CUP = 'CUP',
+  CVE = 'CVE',
+  CZK = 'CZK',
+  DJF = 'DJF',
+  DKK = 'DKK',
+  DOP = 'DOP',
+  DZD = 'DZD',
+  EGP = 'EGP',
+  ERN = 'ERN',
+  ETB = 'ETB',
+  EUR = 'EUR',
+  FJD = 'FJD',
+  FKP = 'FKP',
+  GBP = 'GBP',
+  GEL = 'GEL',
+  GHS = 'GHS',
+  GIP = 'GIP',
+  GMD = 'GMD',
+  GNF = 'GNF',
+  GTQ = 'GTQ',
+  GYD = 'GYD',
+  HKD = 'HKD',
+  HNL = 'HNL',
+  HTG = 'HTG',
+  HUF = 'HUF',
+  IDR = 'IDR',
+  ILS = 'ILS',
+  INR = 'INR',
+  IQD = 'IQD',
+  IRR = 'IRR',
+  ISK = 'ISK',
+  JMD = 'JMD',
+  JOD = 'JOD',
+  JPY = 'JPY',
+  KES = 'KES',
+  KGS = 'KGS',
+  KHR = 'KHR',
+  KMF = 'KMF',
+  KPW = 'KPW',
+  KRW = 'KRW',
+  KWD = 'KWD',
+  KYD = 'KYD',
+  KZT = 'KZT',
+  LAK = 'LAK',
+  LBP = 'LBP',
+  LKR = 'LKR',
+  LRD = 'LRD',
+  LSL = 'LSL',
+  LYD = 'LYD',
+  MAD = 'MAD',
+  MDL = 'MDL',
+  MGA = 'MGA',
+  MKD = 'MKD',
+  MMK = 'MMK',
+  MNT = 'MNT',
+  MOP = 'MOP',
+  MRU = 'MRU',
+  MUR = 'MUR',
+  MVR = 'MVR',
+  MWK = 'MWK',
+  MXN = 'MXN',
+  MYR = 'MYR',
+  MZN = 'MZN',
+  NAD = 'NAD',
+  NGN = 'NGN',
+  NIO = 'NIO',
+  NOK = 'NOK',
+  NPR = 'NPR',
+  NZD = 'NZD',
+  OMR = 'OMR',
+  PAB = 'PAB',
+  PEN = 'PEN',
+  PGK = 'PGK',
+  PHP = 'PHP',
+  PKR = 'PKR',
+  PLN = 'PLN',
+  PYG = 'PYG',
+  QAR = 'QAR',
+  RON = 'RON',
+  RSD = 'RSD',
+  RUB = 'RUB',
+  RWF = 'RWF',
+  SAR = 'SAR',
+  SBD = 'SBD',
+  SCR = 'SCR',
+  SDG = 'SDG',
+  SEK = 'SEK',
+  SGD = 'SGD',
+  SHP = 'SHP',
+  SLE = 'SLE',
+  SOS = 'SOS',
+  SRD = 'SRD',
+  SSP = 'SSP',
+  STN = 'STN',
+  SVC = 'SVC',
+  SYP = 'SYP',
+  SZL = 'SZL',
+  THB = 'THB',
+  TJS = 'TJS',
+  TMT = 'TMT',
+  TND = 'TND',
+  TOP = 'TOP',
+  TRY = 'TRY',
+  TTD = 'TTD',
+  TWD = 'TWD',
+  TZS = 'TZS',
+  UAH = 'UAH',
+  UGX = 'UGX',
+  USD = 'USD',
+  UYU = 'UYU',
+  UZS = 'UZS',
+  VES = 'VES',
+  VND = 'VND',
+  VUV = 'VUV',
+  WST = 'WST',
+  XCD = 'XCD',
+  YER = 'YER',
+  ZAR = 'ZAR',
+  ZMW = 'ZMW',
+  ZWG = 'ZWG',
+}
+
+export type Currency = {
+  label: string;
+  Icon: Icon;
+};

package/src/types/Displays.ts

@@ -0,0 +1,6 @@
+import { CurrencyCode } from './CurrencyCode';
+
+export type FieldCurrencyValue = {
+  currencyCode: CurrencyCode;
+  amountMicros: number | null;
+};