@erxes/ui 0.0.0-stage → 3.2.20-1

package/dist/types/Relations.d.ts

@@ -0,0 +1,13 @@
+export interface IRelation {
+    _id: string;
+    entities: {
+        contentType: string;
+        contentId: string;
+    }[];
+}
+export interface IRelationInput {
+    entities: {
+        contentType: string;
+        contentId: string;
+    }[];
+}

package/dist/types/SexCode.d.ts

@@ -0,0 +1,6 @@
+export declare enum SexCode {
+    NOT_KNOWN = 0,
+    MALE = 1,
+    FEMALE = 2,
+    NOT_APPLICABLE = 9
+}

package/dist/types/Theme.d.ts

@@ -0,0 +1,2 @@
+export type ThemeOption = 'light' | 'dark' | 'system';
+export type ThemeValue = 'light' | 'dark';

package/dist/types/UIConfig.d.ts

@@ -0,0 +1,167 @@
+import type { ApolloQueryResult, OperationVariables, QueryOptions } from '@apollo/client';
+export type TSearchPayload = Readonly<Record<string, unknown>>;
+export type TSearchResultItem = {
+    id: string;
+    title: string;
+    description?: string;
+    createdAt?: string;
+    path: string;
+    matchFields?: Array<{
+        label: string;
+        labelKey?: string;
+        labelNamespace?: string;
+        value: string;
+    }>;
+};
+export type TSearchPageInfo = {
+    hasNextPage: boolean;
+    endCursor: string | null;
+};
+export type TSearchSelection = {
+    /** Globally unique alias. MUST start with `gs_<pluginName>_`. */
+    alias: string;
+    /** Root Query field, e.g. `customers`. Used for quarantine + diagnostics. */
+    field: string;
+    /** Arg body without parens, e.g. `searchValue: $searchValue, limit: $limit`. */
+    args?: string;
+    /** Selection set incl. braces. Omit for scalar fields like `productsTotalCount`. */
+    body?: string;
+    /** When true, an error on this alias does not fail the whole group. */
+    optional?: boolean;
+};
+export type TSearchGroupResult = {
+    items: TSearchResultItem[];
+    totalCount: number;
+    countMode: 'exact' | 'approximate';
+    pageInfo: TSearchPageInfo;
+};
+export type TSearchProviderDefinition<TNode> = {
+    /** Repo-unique, kebab-case, e.g. `sales-deals`. */
+    key: string;
+    /** English source of truth. */
+    label: string;
+    labelKey?: string;
+    labelNamespace?: string;
+    icon?: React.ElementType;
+    order?: number;
+    selections: TSearchSelection[];
+    select: (payload: TSearchPayload) => {
+        nodes: TNode[];
+        totalCount?: number;
+        pageInfo: TSearchPageInfo;
+    };
+    toItem: (node: TNode) => TSearchResultItem | null;
+};
+export type ISearchProvider = {
+    key: string;
+    label: string;
+    labelKey?: string;
+    labelNamespace?: string;
+    icon?: React.ElementType;
+    order?: number;
+    selections: TSearchSelection[];
+    resolve: (payload: TSearchPayload, limit: number) => TSearchGroupResult;
+};
+export type TPropertyInputMeta = Record<string, unknown>;
+export type TActivityRowProps = {
+    activity: {
+        _id: string;
+        activityType: string;
+        sourcePlugin?: string;
+        createdAt: string | Date;
+        metadata?: Record<string, any>;
+        [key: string]: any;
+    };
+};
+export type TProductRemainderProduct = {
+    _id: string;
+    code: string;
+    remainder?: TProductRemainderValue | null;
+};
+export type TProductRemainderValue = {
+    remainder?: number;
+    remainders?: unknown[];
+};
+export type TProductRemainderPatch = {
+    _id: string;
+    remainder: TProductRemainderValue;
+};
+export type TProductRemainderQuery = <TData, TVariables extends OperationVariables = OperationVariables>(options: QueryOptions<TVariables, TData>) => Promise<ApolloQueryResult<TData>>;
+export type TProductRemainderProvider = (params: {
+    products: TProductRemainderProduct[];
+    pipelineId?: string;
+    query: TProductRemainderQuery;
+}) => Promise<TProductRemainderPatch[]>;
+export type TPropertyInputProps = {
+    value: string;
+    onValueChange: (value: string) => void;
+    meta?: TPropertyInputMeta;
+    onMetaChange: (meta: TPropertyInputMeta) => void;
+    disabled?: boolean;
+};
+export type IUIConfig = {
+    name: string;
+    path: string;
+    icon?: React.ElementType;
+    i18n?: boolean;
+    i18nNamespace?: string;
+    hasFloatingWidget?: boolean;
+    settingsOnly?: boolean;
+    settingsNavigation?: () => React.ReactNode;
+    navigationGroup?: {
+        name: string;
+        defaultPath?: string;
+        icon: React.ElementType;
+        content: () => React.ReactNode;
+        subGroup?: () => React.ReactNode;
+    };
+    widgets?: {
+        relationWidgets?: {
+            name: string;
+            icon?: React.ElementType;
+            label?: string;
+        }[];
+        relationSettingsWidgets?: {
+            name: string;
+            icon?: React.ElementType;
+            label?: string;
+        }[];
+        recordPickerWidgets?: {
+            name: string;
+            contentType: string;
+        }[];
+        customerDetailWidgets?: {
+            name: string;
+        }[];
+        formWidgets?: {
+            name: string;
+            contentType: string;
+            icon?: React.ElementType;
+        }[];
+        propertyInputs?: Record<string, React.ComponentType<TPropertyInputProps>>;
+        activityRows?: Record<string, React.ComponentType<TActivityRowProps>>;
+        productRemainderProviders?: TProductRemainderProvider[];
+    };
+    modules?: {
+        name: string;
+        icon?: React.ElementType;
+        path: string;
+        hasAutomation?: boolean;
+        hasRelationWidget?: boolean;
+        hasFloatingWidget?: boolean;
+        hasSegmentConfigWidget?: boolean;
+    }[];
+    searchProviders?: ISearchProvider[];
+};
+export type ICoreModule = {
+    name: string;
+    icon?: React.ElementType;
+    path: string;
+    hasSettings?: boolean;
+    settingsOnly?: boolean;
+    submenus?: {
+        name: string;
+        path: string;
+        icon?: React.ElementType;
+    }[];
+};

package/dist/types/Utils.d.ts

@@ -0,0 +1,11 @@
+export interface IAttachment {
+    url: string;
+    name: string;
+    size: number;
+    type: string;
+    duration?: number;
+}
+export interface IPdfAttachment {
+    pdf?: IAttachment;
+    pages: IAttachment[];
+}

package/dist/types/ValidationStatus.d.ts

@@ -0,0 +1,4 @@
+export declare enum ValidationStatus {
+    Valid = "valid",
+    Invalid = "invalid"
+}

package/dist/types/index.d.ts

@@ -0,0 +1,11 @@
+export * from './CountryCode';
+export * from './CurrencyCode';
+export * from './Displays';
+export * from './Gql';
+export * from './Key';
+export * from './Relations';
+export * from './SexCode';
+export * from './Theme';
+export * from './UIConfig';
+export * from './Utils';
+export * from './ValidationStatus';

package/dist/utils/IsUndefinedOrNull.d.ts

@@ -0,0 +1 @@
+export declare const isUndefinedOrNull: (value: any) => value is null | undefined;

package/dist/utils/colors.d.ts

@@ -0,0 +1,7 @@
+export interface OKLCHColor {
+    lightness: number;
+    chroma: number;
+    hue: number;
+}
+export declare const stringToHslColor: (str: string, saturation: number, lightness: number) => string;
+export declare const hexToOklch: (hex: string, onlyValue?: boolean) => string;

package/dist/utils/config/index.d.ts

@@ -0,0 +1,14 @@
+declare global {
+    interface Window {
+        env?: Record<string, string>;
+        __APOLLO_CLIENT__?: any;
+    }
+}
+declare const NODE_ENV: string;
+declare const REACT_APP_API_URL: string;
+declare const REACT_APP_IMAGE_CDN_URL: string;
+declare const REACT_APP_GOOGLE_MAP_API_KEY: string;
+declare const REACT_APP_HIDE_CORE_MODULES: string;
+declare const REACT_APP_SENTRY_DSN: string;
+declare const REACT_APP_SENTRY_ENVIRONMENT: string;
+export { NODE_ENV, REACT_APP_API_URL, REACT_APP_IMAGE_CDN_URL, REACT_APP_GOOGLE_MAP_API_KEY, REACT_APP_HIDE_CORE_MODULES, REACT_APP_SENTRY_DSN, REACT_APP_SENTRY_ENVIRONMENT, };

package/dist/utils/cookie-storage.d.ts

@@ -0,0 +1,9 @@
+declare class CookieStorage {
+    private keys;
+    getItem(key: string): string | undefined;
+    setItem(key: string, value: string, attributes?: Cookies.CookieAttributes): void;
+    removeItem(key: string): void;
+    clear(): void;
+}
+export declare const cookieStorage: CookieStorage;
+export {};

package/dist/utils/core.d.ts

@@ -0,0 +1,2 @@
+export declare const readImage: (value?: string, width?: number, inline?: boolean, format?: string, quality?: number) => string;
+export declare const renderFullName: (data: any) => any;

package/dist/utils/fixOrder.d.ts

@@ -0,0 +1,4 @@
+export declare const fixOrder: ({ order, name, }: {
+    order?: string;
+    name?: string;
+}) => string;

package/dist/utils/format/formatAmount.d.ts

@@ -0,0 +1 @@
+export declare const formatAmount: (amount: number, kind?: "short" | "finance") => string;

package/dist/utils/format/formatPhoneNumber.d.ts

@@ -0,0 +1,5 @@
+import { CountryCode } from 'libphonenumber-js';
+export declare const formatPhoneNumber: ({ defaultCountry, value, }: {
+    defaultCountry?: CountryCode;
+    value: string;
+}) => string;

package/dist/utils/format/index.d.ts

@@ -0,0 +1,2 @@
+export * from './formatAmount';
+export * from './formatPhoneNumber';

package/dist/utils/getPluginAssetsUrl.d.ts

@@ -0,0 +1 @@
+export declare const getPluginAssetsUrl: (pluginName: string, url: string) => string;

package/dist/utils/highlightMatch.d.ts

@@ -0,0 +1 @@
+export declare const highlightMatch: (text: string, searchValue: string) => React.ReactNode;

package/dist/utils/index.d.ts

@@ -0,0 +1,18 @@
+export * from './colors';
+export * from './config';
+export * from './cookie-storage';
+export * from './core';
+export * from './format';
+export * from './getPluginAssetsUrl';
+export * from './highlightMatch';
+export * from './isAnObject';
+export * from './isDefined';
+export * from './isDeeplyEqual';
+export * from './localization';
+export * from './regex';
+export * from './IsUndefinedOrNull';
+export * from './isEnabled';
+export * from './string-array';
+export * from './searchProvider';
+export * from './stripHtml';
+export * from './videoEmbed';

package/dist/utils/isAnObject.d.ts

@@ -0,0 +1 @@
+export declare const isAnObject: (obj: any) => obj is object;

package/dist/utils/isDeeplyEqual.d.ts

@@ -0,0 +1,3 @@
+export declare const isDeeplyEqual: <T>(a: T, b: T, options?: {
+    strict: boolean;
+}) => boolean;

package/dist/utils/isDefined.d.ts

@@ -0,0 +1 @@
+export declare const isDefined: <T>(value: T | null | undefined) => value is T;

package/dist/utils/isEnabled.d.ts

@@ -0,0 +1 @@
+export declare const isEnabled: (pluginName: string) => boolean;

package/dist/utils/localization/detectTimeZone.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Detects the user's time zone.
+ * @returns a IANA time zone
+ */
+export declare const detectTimeZone: () => string;

package/dist/utils/localization/formatDateISOStringToRelativeDate.d.ts

@@ -0,0 +1,2 @@
+export declare const formatDateISOStringToRelativeDate: (isoDate: string, isDayMaximumPrecision?: boolean) => string;
+export declare const formatDateISOStringToRelativeDateShort: (isoDate: string) => string;

package/dist/utils/localization/formatTimeZoneLabel.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Formats a IANA time zone to a select option label.
+ * @param ianaTimeZone IANA time zone
+ * @returns Formatted label
+ * @example 'Europe/Paris' => '(GMT+01:00) Central European Time - Paris'
+ */
+export declare const formatTimeZoneLabel: (ianaTimeZone: string) => string;

package/dist/utils/localization/index.d.ts

@@ -0,0 +1,3 @@
+export * from './detectTimeZone';
+export * from './formatTimeZoneLabel';
+export * from './formatDateISOStringToRelativeDate';

package/dist/utils/logDebug.d.ts

@@ -0,0 +1 @@
+export declare const logDebug: (message: any, ...optionalParams: any[]) => void;

package/dist/utils/regex/index.d.ts

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

package/dist/utils/regex/passwordRegex.d.ts

@@ -0,0 +1 @@
+export declare const PASSWORD_REGEX: RegExp;

package/dist/utils/searchProvider.d.ts

@@ -0,0 +1,9 @@
+import { ISearchProvider, TSearchPageInfo, TSearchPayload, TSearchProviderDefinition } from '../types/UIConfig';
+export declare const readCursorList: <TNode>(payload: TSearchPayload, alias: string) => {
+    nodes: TNode[];
+    totalCount: number;
+    pageInfo: TSearchPageInfo;
+};
+export declare const readArray: <TNode>(payload: TSearchPayload, alias: string) => TNode[];
+export declare const readNumber: (payload: TSearchPayload, alias: string) => number;
+export declare const defineSearchProvider: <TNode>(definition: TSearchProviderDefinition<TNode>) => ISearchProvider;

package/dist/utils/string-array.d.ts

@@ -0,0 +1,6 @@
+import { type ClipboardEvent } from 'react';
+export declare const handleStringArrayPaste: ({ event, value, onValueChange, }: {
+    event: ClipboardEvent<HTMLInputElement>;
+    value: string[];
+    onValueChange: (value: string[]) => void;
+}) => void;

package/dist/utils/stripHtml.d.ts

@@ -0,0 +1,5 @@
+export declare const stripHtml: (value?: string | null) => string;
+export declare const getPersonName: (person: {
+    firstName?: string | null;
+    lastName?: string | null;
+} | null, fallback: string) => string;

package/dist/utils/urlParser.d.ts

@@ -0,0 +1,8 @@
+export declare const isValidURL: (url: string) => boolean;
+export declare const urlify: (text: string) => string;
+declare const _default: {
+    isValidURL: (url: string) => boolean;
+    extractHostname: (url: string) => any;
+    extractRootDomain: (url: string) => any;
+};
+export default _default;

package/dist/utils/videoEmbed.d.ts

@@ -0,0 +1,14 @@
+export type VideoEmbedProvider = 'youtube' | 'vimeo';
+export type VideoEmbedInfo = {
+    provider: VideoEmbedProvider;
+    embedUrl: string;
+    thumbnailUrl?: string;
+};
+/** Parses a YouTube or Vimeo URL into an embeddable iframe URL (and thumbnail, when derivable without a network call). */
+export declare const parseVideoEmbedUrl: (url: string) => VideoEmbedInfo | null;
+/**
+ * Cloudflare Stream returns an HLS playback URL like
+ * `https://customer-xxx.cloudflarestream.com/{uid}/manifest/video.m3u8`.
+ * Extract the base so we can build a thumbnail (`/thumbnails/thumbnail.jpg`).
+ */
+export declare const getCloudflareStreamBase: (url: string) => string | null;

package/package.json

@@ -1,6 +1,108 @@
 {
   "name": "@erxes/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "3.2.20-1",
+  "description": "erxes design system: UI primitives, business modules, hooks and shared frontend state",
+  "license": "AGPL-3.0-only",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/erxes/erxes.git",
+    "directory": "frontend/libs/erxes-ui"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": [
+        "./dist/index.d.ts",
+        "./src/index.ts"
+      ],
+      "default": "./src/index.ts"
+    },
+    "./theme.css": "./src/theme.css",
+    "./*": {
+      "types": [
+        "./dist/*.d.ts",
+        "./dist/*/index.d.ts",
+        "./src/*.ts",
+        "./src/*/index.ts"
+      ],
+      "default": "./src/*"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "@apollo/client": "^3.11.8",
+    "graphql": "^16.10.0",
+    "jotai": "^2.12.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^15.1.1",
+    "react-router-dom": "^7.1.1"
+  },
+  "dependencies": {
+    "@blocknote/core": "^0.35.0",
+    "@blocknote/react": "^0.35.0",
+    "@blocknote/shadcn": "^0.35.0",
+    "@dnd-kit/core": "^6.2.0",
+    "@dnd-kit/modifiers": "^8.0.0",
+    "@dnd-kit/sortable": "^9.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@formkit/auto-animate": "^0.8.2",
+    "@hookform/resolvers": "^3.9.1",
+    "@maily-to/core": "0.3.7",
+    "@maily-to/render": "0.2.3",
+    "@module-federation/enhanced": "0.6.6",
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-scroll-area": "1.2.10",
+    "@radix-ui/react-separator": "1.1.7",
+    "@radix-ui/react-tabs": "1.1.13",
+    "@radix-ui/react-tooltip": "1.2.8",
+    "@sniptt/guards": "^0.2.0",
+    "@tabler/icons-react": "^3.34.0",
+    "@tanstack/react-table": "^8.20.5",
+    "@tanstack/table-core": "^8.20.5",
+    "@tiptap/core": "^2.27.3",
+    "@tiptap/pm": "^2.27.3",
+    "@tiptap/suggestion": "^2.27.3",
+    "@types/deep-equal": "^1.0.4",
+    "@types/js-cookie": "^3.0.6",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.4",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
+    "dayjs": "^1.11.13",
+    "deep-equal": "^2.2.3",
+    "dompurify": "^3.2.4",
+    "emblor": "^1.4.8",
+    "imask": "7.6.1",
+    "js-cookie": "^3.0.5",
+    "libphonenumber-js": "^1.11.20",
+    "motion": "^11.11.17",
+    "radix-ui": "^1.4.3",
+    "react-aria-components": "^1.10.1",
+    "react-day-picker": "^9.11.1",
+    "react-dropzone": "^14.3.8",
+    "react-hook-form": "^7.53.2",
+    "react-hotkeys-hook": "^4.6.1",
+    "react-imask": "^7.6.1",
+    "react-intersection-observer": "^9.13.1",
+    "react-merge-refs": "^2.1.1",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "^3.1.2",
+    "tailwind-merge": "^2.5.4",
+    "type-fest": "^4.30.0",
+    "zod": "^3.23.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/__stories__/accordion.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Accordion } from 'erxes-ui/components/accordion';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-full max-w-md min-w-96">
+      <Accordion.Item value="item-1">
+        <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+        <Accordion.Content>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="item-2">
+        <Accordion.Trigger>Is it styled?</Accordion.Trigger>
+        <Accordion.Content>
+          Yes. It comes with default styles that match the other
+          components&apos; aesthetic.
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="item-3">
+        <Accordion.Trigger>Is it animated?</Accordion.Trigger>
+        <Accordion.Content>
+          Yes. It&apos;s animated by default, but you can disable it if you
+          prefer.
+      </Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <Accordion type="multiple" className="w-full max-w-md min-w-96">
+      <Accordion.Item value="item-1">
+        <Accordion.Trigger>Can I open multiple items?</Accordion.Trigger>
+        <Accordion.Content>
+          Yes. You can open multiple items at the same time by setting the type
+          prop to &quot;multiple&quot;.
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="item-2">
+        <Accordion.Trigger>How does it work?</Accordion.Trigger>
+        <Accordion.Content>
+          The accordion uses Radix UI&apos;s Accordion primitive under the hood,
+          styled with Tailwind CSS.
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="item-3">
+        <Accordion.Trigger>Can it be customized?</Accordion.Trigger>
+        <Accordion.Content>
+          Yes. You can customize the appearance by passing className props to
+          the components or by modifying the component in your project.
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  ),
+};

package/src/components/__stories__/alert-dialog.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AlertDialog } from 'erxes-ui/components/alert-dialog';
+import { Button } from 'erxes-ui/components/button';
+
+const meta: Meta<typeof AlertDialog> = {
+  title: 'Components/AlertDialog',
+  component: AlertDialog,
+  parameters: {
+    layout: 'centered',
+  },
+
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof AlertDialog>;
+
+export const Default: Story = {
+  render: () => (
+    <AlertDialog>
+      <AlertDialog.Trigger asChild>
+        <Button variant="outline">Open Alert Dialog</Button>
+      </AlertDialog.Trigger>
+      <AlertDialog.Content>
+        <AlertDialog.Header>
+          <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+          <AlertDialog.Description>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Footer>
+          <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+          <AlertDialog.Action>Continue</AlertDialog.Action>
+        </AlertDialog.Footer>
+      </AlertDialog.Content>
+    </AlertDialog>
+  ),
+};