dhx-react-suite 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,551 @@
+import { Context } from 'react';
+import { default as default_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { RefObject } from 'react';
+
+export declare function Button({ children, variant, size, icon, disabled, onClick, style, className, }: ButtonProps): JSX_2.Element;
+
+export declare interface ButtonProps {
+    children?: React.ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Leading icon element */
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+    className?: string;
+}
+
+export declare type ButtonSize = "sm" | "md" | "lg";
+
+export declare type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+
+export declare function Calendar({ value, range, timepicker, onChange, style }: CalendarProps): JSX_2.Element;
+
+export declare interface CalendarProps {
+    value?: Date | [Date, Date] | null;
+    range?: boolean;
+    timepicker?: boolean;
+    onChange?: (value: Date | [Date, Date]) => void;
+    style?: React.CSSProperties;
+}
+
+export declare function Chart({ type, data, series, scales, legend, height, style }: ChartProps): JSX_2.Element;
+
+declare interface ChartLegend {
+    halign?: "left" | "center" | "right";
+    valign?: "top" | "middle" | "bottom";
+}
+
+export declare interface ChartProps {
+    type?: ChartType;
+    data?: Record<string, unknown>[];
+    series?: ChartSeries[];
+    scales?: ChartScales;
+    legend?: ChartLegend;
+    height?: number | string;
+    style?: React.CSSProperties;
+}
+
+declare interface ChartScales {
+    bottom?: {
+        text?: string;
+    };
+    left?: {
+        min?: number;
+        max?: number;
+    };
+}
+
+export declare interface ChartSeries {
+    id: string;
+    value?: string;
+    label?: string;
+    color?: string;
+    fill?: string;
+    data?: Record<string, unknown>[];
+    xValue?: string;
+    yValue?: string;
+}
+
+export declare type ChartType = "bar" | "line" | "area" | "pie" | "donut" | "radar" | "scatter";
+
+export declare function Colorpicker({ value, onChange, style }: ColorpickerProps): JSX_2.Element;
+
+export declare interface ColorpickerProps {
+    value?: string;
+    onChange?: (hex: string) => void;
+    style?: React.CSSProperties;
+}
+
+export declare function Combobox({ data, value: valueProp, placeholder, multiselection, label, onChange, style }: ComboboxProps): JSX_2.Element;
+
+export declare interface ComboboxItem {
+    id?: string;
+    value: string;
+    count?: number;
+}
+
+export declare interface ComboboxProps {
+    data?: ComboboxItem[];
+    value?: string | string[] | null;
+    placeholder?: string;
+    multiselection?: boolean;
+    label?: string;
+    onChange?: (value: string | string[]) => void;
+    style?: React.CSSProperties;
+}
+
+export declare function ContextMenu({ items, onSelect, children }: ContextMenuProps): JSX_2.Element;
+
+export declare interface ContextMenuProps {
+    items?: MenuItem[];
+    onSelect?: (item: MenuItem) => void;
+    children: React.ReactNode;
+}
+
+declare function DataView_2({ data, template, itemsInRow, gap, multiselection, onSelect, style }: DataViewProps): JSX_2.Element;
+export { DataView_2 as DataView }
+
+export declare interface DataViewItem {
+    id?: string | number;
+    title?: string;
+    value?: string;
+    subtitle?: string;
+    img?: string;
+    [key: string]: unknown;
+}
+
+export declare interface DataViewProps {
+    data?: DataViewItem[];
+    template?: (item: DataViewItem) => string;
+    itemsInRow?: number;
+    gap?: number;
+    multiselection?: boolean;
+    onSelect?: (item: DataViewItem) => void;
+    style?: React.CSSProperties;
+}
+
+export declare function Form({ config, defaultValues, onSubmit, style }: FormProps): JSX_2.Element;
+
+export declare interface FormConfig {
+    rows?: (FormField | FormField[])[];
+    padding?: string | number;
+    width?: string | number;
+    buttons?: boolean;
+    buttonAlign?: "flex-start" | "center" | "flex-end";
+    submitText?: string;
+    resetButton?: boolean;
+    resetText?: string;
+}
+
+export declare interface FormField {
+    type?: "input" | "textarea" | "select" | "checkbox" | "radio" | "slider" | "combo" | "datepicker" | "timepicker" | "fieldset" | "spacer";
+    name: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    value?: unknown;
+    inputType?: string;
+    icon?: React.ReactNode;
+    helpMessage?: string;
+    options?: FormFieldOption[];
+    data?: {
+        id?: string;
+        value: string;
+    }[];
+    multiselection?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    range?: boolean;
+    height?: number;
+    rows?: FormField[];
+    padding?: string | number;
+    width?: string | number;
+}
+
+declare interface FormFieldOption {
+    value: string;
+    label?: string;
+}
+
+export declare interface FormProps {
+    config?: FormConfig;
+    defaultValues?: Record<string, unknown>;
+    onSubmit?: (values: Record<string, unknown>) => void;
+    style?: React.CSSProperties;
+}
+
+export declare function Grid({ columns, data, height, rowHeight, sortable, resizable, selection, multiselect, onSelect, style }: GridProps): JSX_2.Element;
+
+export declare interface GridColumn {
+    id: string;
+    header?: {
+        text: string;
+    }[] | string;
+    width?: number;
+    minWidth?: number;
+    sortable?: boolean;
+    filterable?: boolean;
+    resizable?: boolean;
+    align?: "left" | "center" | "right";
+    template?: (value: unknown, row: Record<string, unknown>) => React.ReactNode;
+}
+
+export declare interface GridProps {
+    columns: GridColumn[];
+    data?: Record<string, unknown>[];
+    height?: string | number;
+    rowHeight?: number;
+    sortable?: boolean;
+    resizable?: boolean;
+    selection?: "row" | "cell";
+    multiselect?: boolean;
+    onSelect?: (row: Record<string, unknown>) => void;
+    style?: React.CSSProperties;
+}
+
+export declare function Layout({ rows, cols, type, style, children }: LayoutProps): JSX_2.Element;
+
+export declare interface LayoutCellConfig {
+    id?: string;
+    width?: string | number;
+    height?: string | number;
+    header?: string;
+    collapsable?: boolean;
+    padding?: string | number;
+    html?: string;
+    content?: React.ReactNode;
+    rows?: LayoutCellConfig[];
+    cols?: LayoutCellConfig[];
+}
+
+export declare interface LayoutProps {
+    rows?: LayoutCellConfig[];
+    cols?: LayoutCellConfig[];
+    type?: "line" | "space" | "wide";
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+
+export declare function List({ data, template, keyNavigation, multiselection, editable, height, onSelect, onEdit, style }: ListProps): JSX_2.Element;
+
+export declare interface ListItem {
+    id?: string | number;
+    value?: string;
+    [key: string]: unknown;
+}
+
+export declare interface ListProps {
+    data?: ListItem[];
+    template?: (item: ListItem) => string;
+    keyNavigation?: boolean;
+    multiselection?: boolean;
+    editable?: boolean;
+    height?: number | string;
+    onSelect?: (item: ListItem) => void;
+    onEdit?: (item: ListItem, index: number) => void;
+    style?: React.CSSProperties;
+}
+
+export declare function Menu({ items, label, onSelect, style }: MenuProps): JSX_2.Element;
+
+export declare function MenuDropdown({ items, onSelect, style }: MenuDropdownProps): JSX_2.Element;
+
+declare interface MenuDropdownProps {
+    items: MenuItem[];
+    onSelect: (item: MenuItem) => void;
+    style?: React.CSSProperties;
+}
+
+export declare interface MenuItem {
+    id?: string;
+    value?: string;
+    icon?: React.ReactNode;
+    hotkey?: string;
+    disabled?: boolean;
+    type?: "separator";
+    items?: MenuItem[];
+}
+
+export declare interface MenuProps {
+    items?: MenuItem[];
+    label?: string;
+    onSelect?: (item: MenuItem) => void;
+    style?: React.CSSProperties;
+}
+
+declare interface MessageAPI {
+    message: (opts: MessageOptions) => number;
+    alert: (title: string, opts?: Omit<MessageOptions, "title">) => number;
+    confirm: (title: string, cb: (ok: boolean) => void, opts?: Omit<MessageOptions, "title" | "confirm">) => number;
+}
+
+export declare const MessageContext: Context<MessageAPI | null>;
+
+export declare interface MessageOptions {
+    type?: MessageType;
+    title?: string;
+    text?: string;
+    duration?: number;
+    confirm?: (ok: boolean) => void;
+}
+
+export declare function MessageProvider({ children }: {
+    children: React.ReactNode;
+}): JSX_2.Element;
+
+export declare type MessageType = "success" | "error" | "warning" | "info";
+
+export declare function Navbar({ logo, items, vertical, style }: NavbarProps): JSX_2.Element;
+
+export declare interface NavbarItem {
+    id?: string;
+    type?: "separator" | "spacer" | "input" | "menuItem";
+    value?: string;
+    icon?: React.ReactNode;
+    items?: MenuItem[];
+    width?: number;
+    placeholder?: string;
+    onClick?: () => void;
+}
+
+export declare interface NavbarProps {
+    logo?: React.ReactNode;
+    items?: NavbarItem[];
+    vertical?: boolean;
+    style?: React.CSSProperties;
+}
+
+export declare function Pagination({ total, pageSize, page: pageProp, onChange, style }: PaginationProps): JSX_2.Element;
+
+export declare interface PaginationProps {
+    total: number;
+    pageSize?: number;
+    page?: number;
+    onChange?: (page: number) => void;
+    style?: React.CSSProperties;
+}
+
+export declare function Popup({ trigger, children, placement, style }: PopupProps): JSX_2.Element;
+
+export declare type PopupPlacement = "bottom-start" | "bottom-end" | "top-start";
+
+export declare interface PopupProps {
+    trigger: React.ReactNode;
+    children?: React.ReactNode;
+    placement?: PopupPlacement;
+    style?: React.CSSProperties;
+}
+
+export declare function Ribbon({ items, onAction, style }: RibbonProps): JSX_2.Element;
+
+declare interface RibbonBlock {
+    type: "block";
+    label?: string;
+    direction?: "col" | "row";
+    items?: RibbonSubItem[];
+}
+
+export declare type RibbonItem = RibbonSubItem | RibbonBlock;
+
+export declare interface RibbonProps {
+    items?: RibbonItem[];
+    onAction?: (id: string, item: RibbonSubItem) => void;
+    style?: React.CSSProperties;
+}
+
+declare interface RibbonSubItem {
+    id?: string;
+    type?: "separator" | "sep" | "input" | "selectButton";
+    text?: string;
+    icon?: React.ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+    tooltip?: string;
+    label?: string;
+    size?: "large" | "auto";
+    placeholder?: string;
+    value?: string;
+    width?: number;
+    items?: {
+        value: string;
+    }[];
+    onClick?: (item: RibbonSubItem) => void;
+    onChange?: (value: string) => void;
+}
+
+export declare function Sidebar({ items, width, collapsed: collapsedProp, onSelect, header, footer, style }: SidebarProps): JSX_2.Element;
+
+export declare interface SidebarItem {
+    id: string;
+    value?: string;
+    icon?: React.ReactNode;
+    count?: number;
+    type?: "separator" | "customHTML";
+    html?: string;
+    items?: SidebarItem[];
+}
+
+export declare interface SidebarProps {
+    items?: SidebarItem[];
+    width?: number;
+    collapsed?: boolean;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    onSelect?: (item: SidebarItem) => void;
+    style?: React.CSSProperties;
+}
+
+export declare function Slider({ min, max, step, value: valueProp, range, label, tick, onChange, style }: SliderProps): JSX_2.Element;
+
+export declare interface SliderProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number | [number, number];
+    range?: boolean;
+    label?: string;
+    tick?: boolean;
+    onChange?: (value: number | [number, number]) => void;
+    style?: React.CSSProperties;
+}
+
+export declare function Tabbar({ views, mode, tabAlign, closable, disabled, defaultActive, onBeforeChange, onChange, style }: TabbarProps): JSX_2.Element;
+
+export declare interface TabbarProps {
+    views?: TabView[];
+    mode?: "top" | "bottom" | "left" | "right";
+    tabAlign?: "left" | "center" | "right";
+    closable?: string[];
+    disabled?: string[];
+    defaultActive?: string;
+    onBeforeChange?: (id: string) => boolean | void;
+    onChange?: (id: string) => void;
+    style?: React.CSSProperties;
+}
+
+export declare interface TabView {
+    id: string;
+    tab: string;
+    icon?: React.ReactNode;
+    content?: React.ReactNode;
+    html?: string;
+}
+
+export declare function Timepicker({ value, onChange, style }: TimepickerProps): JSX_2.Element;
+
+export declare interface TimepickerProps {
+    value?: TimeValue;
+    onChange?: (value: TimeValue) => void;
+    style?: React.CSSProperties;
+}
+
+export declare interface TimeValue {
+    h: number;
+    m: number;
+    ampm: "AM" | "PM";
+}
+
+export declare type Tokens = typeof tokens;
+
+/**
+ * Design Tokens — single source of truth for colours, spacing and typography.
+ *
+ * @example Override for a dark/custom theme:
+ * import { tokens } from "dhx-react-suite";
+ * tokens.primary = "#7c3aed";
+ */
+export declare const tokens: {
+    primary: string;
+    primaryDk: string;
+    primaryLt: string;
+    success: string;
+    danger: string;
+    warning: string;
+    bg: string;
+    surface: string;
+    border: string;
+    borderDk: string;
+    text: string;
+    textSec: string;
+    textMut: string;
+    shadow: string;
+    shadowLg: string;
+    r: string;
+    rMd: string;
+    font: string;
+};
+
+export declare function Toolbar({ items, style }: ToolbarProps): JSX_2.Element;
+
+export declare interface ToolbarItem {
+    id?: string;
+    type?: "separator" | "spacer" | "input" | "select";
+    text?: string;
+    icon?: React.ReactNode;
+    active?: boolean;
+    twoState?: boolean;
+    disabled?: boolean;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    width?: number;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    onClick?: (item: ToolbarItem) => void;
+    onChange?: (value: string) => void;
+}
+
+export declare interface ToolbarProps {
+    items?: ToolbarItem[];
+    style?: React.CSSProperties;
+}
+
+export declare function Tree({ data, checkbox, editable, onSelect, onCheck, style }: TreeProps): JSX_2.Element;
+
+export declare interface TreeNode {
+    id: string;
+    value?: string;
+    count?: number;
+    items?: TreeNode[];
+}
+
+export declare interface TreeProps {
+    data?: TreeNode[];
+    checkbox?: boolean;
+    editable?: boolean;
+    onSelect?: (node: TreeNode) => void;
+    onCheck?: (id: string, checked: boolean) => void;
+    style?: React.CSSProperties;
+}
+
+export declare function useClickOutside(ref: RefObject<HTMLElement>, callback: (event: MouseEvent) => void): void;
+
+export declare function useDrag(onDrag: (x: number, y: number) => void): (e: default_2.MouseEvent, originX?: number, originY?: number) => void;
+
+export declare function useMessage(): MessageAPI;
+
+declare function Window_2({ title, children, width, height, closable, movable, modal, defaultOpen, footer, onClose, style }: WindowProps): JSX_2.Element | null;
+export { Window_2 as Window }
+
+export declare interface WindowProps {
+    title?: string;
+    children?: React.ReactNode;
+    width?: number | string;
+    height?: number | string;
+    closable?: boolean;
+    movable?: boolean;
+    modal?: boolean;
+    defaultOpen?: boolean;
+    footer?: React.ReactNode;
+    onClose?: () => void;
+    style?: React.CSSProperties;
+}
+
+export { }

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "dhx-react-suite",
+  "version": "1.0.0",
+  "description": "23 production-ready React UI components — TypeScript reimplementation of DHTMLX Suite",
+  "type": "module",
+  "main": "./dist/dhx-react-suite.umd.cjs",
+  "module": "./dist/dhx-react-suite.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/dhx-react-suite.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/dhx-react-suite.umd.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -p tsconfig.build.json && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext .tsx,.ts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0",
+    "recharts": ">=2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "recharts": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
+    "@types/recharts": "^1.8.29",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/ui": "^1.4.0",
+    "eslint": "^8.57.0",
+    "jsdom": "^24.0.0",
+    "recharts": "^3.7.0",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6",
+    "vite-plugin-dts": "^3.7.3",
+    "vitest": "^1.4.0"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "ui",
+    "components",
+    "grid",
+    "chart",
+    "calendar",
+    "form",
+    "sidebar"
+  ],
+  "license": "MIT"
+}