@dashboard-designer/ui 0.1.0

package/README.md

@@ -0,0 +1,32 @@
+# @dashboard-designer/ui
+
+Embeddable React dashboard designer and viewer.
+
+## Install
+
+```bash
+pnpm add @dashboard-designer/ui @dashboard-designer/core
+```
+
+## Usage
+
+```tsx
+import { DashboardDesigner, DashboardViewer } from '@dashboard-designer/ui';
+import '@dashboard-designer/ui/styles.css';
+
+<DashboardDesigner
+  apiBaseUrl="https://your-api.example.com"
+  auth={{ mode: 'anonymous' }} // or { mode: 'token', token }
+  locale="en"
+  onSave={(dashboard) => console.log(dashboard)}
+/>
+
+<DashboardViewer
+  dashboard={dashboardJson}
+  apiBaseUrl="https://your-api.example.com"
+  auth={{ mode: 'anonymous' }}
+  locale="es"
+/>
+```
+
+Requires the `@dashboard-designer/server` API for query execution and connection secrets.

package/dist/index.d.ts

@@ -0,0 +1,195 @@
+import * as react from 'react';
+import react__default from 'react';
+import { Dashboard, AuthConfig, User, EmbedTokenRequest, EmbedTokenResponse, ConnectionConfig, ExecuteQueryRequest, QueryResult, DashboardAclEntry, DashboardPermission, DashboardVersionMeta, DashboardVersion, Widget, FilterDef, WidgetType } from '@dashboard-designer/core';
+export { AuthConfig, ConnectionConfig, Dashboard, FilterDef, Widget } from '@dashboard-designer/core';
+import * as i18next from 'i18next';
+export { default as i18n } from 'i18next';
+import * as lucide_react from 'lucide-react';
+import { LucideIcon } from 'lucide-react';
+
+interface DashboardDesignerProps {
+    dashboard?: Dashboard;
+    apiBaseUrl: string;
+    auth: AuthConfig;
+    locale?: string;
+    onChange?: (dashboard: Dashboard) => void;
+    onSave?: (dashboard: Dashboard) => void;
+    readOnly?: boolean;
+    /** When set, shows Edit / Done in the dashboard toolbar. */
+    onToggleEdit?: () => void;
+}
+declare function DashboardDesigner({ dashboard: initial, apiBaseUrl, auth, locale, onChange, onSave, readOnly, onToggleEdit, }: DashboardDesignerProps): react__default.JSX.Element;
+
+interface DashboardViewerProps {
+    dashboard: Dashboard;
+    apiBaseUrl: string;
+    auth: AuthConfig;
+    locale?: string;
+}
+/** Read-only dashboard renderer for embeds / published views. */
+declare function DashboardViewer({ dashboard, apiBaseUrl, auth, locale }: DashboardViewerProps): react__default.JSX.Element;
+
+declare class DashboardApiClient {
+    apiBaseUrl: string;
+    auth: AuthConfig;
+    constructor(apiBaseUrl: string, auth: AuthConfig);
+    private headers;
+    private req;
+    login(email: string, password: string): Promise<{
+        token: string;
+        user: User;
+    }>;
+    me(): Promise<{
+        user: User;
+    }>;
+    createEmbedToken(body: EmbedTokenRequest): Promise<EmbedTokenResponse>;
+    listConnections(): Promise<{
+        connections: ConnectionConfig[];
+    }>;
+    saveConnection(connection: ConnectionConfig): Promise<{
+        connection: ConnectionConfig;
+    }>;
+    testConnection(id: string): Promise<{
+        ok: boolean;
+    }>;
+    listTables(connectionId: string): Promise<{
+        tables: string[];
+    }>;
+    listColumns(connectionId: string, table: string): Promise<{
+        columns: Array<{
+            name: string;
+            type: string;
+        }>;
+    }>;
+    executeQuery(body: ExecuteQueryRequest): Promise<{
+        result: QueryResult;
+        sql: string;
+    }>;
+    listDashboards(): Promise<{
+        dashboards: Array<{
+            id: string;
+            title: string;
+            updatedAt: string;
+            allowAnonymous: boolean;
+        }>;
+    }>;
+    getDashboard(id: string): Promise<{
+        dashboard: Dashboard;
+    }>;
+    saveDashboard(dashboard: Dashboard, allowAnonymous?: boolean, message?: string): Promise<{
+        dashboard: Dashboard;
+    } | {
+        dashboard: Dashboard;
+    }>;
+    getDashboardAcl(dashboardId: string): Promise<{
+        acl: DashboardAclEntry[];
+        ownerId?: string;
+        canManage: boolean;
+    }>;
+    setDashboardAcl(dashboardId: string, entries: Array<{
+        userId: string;
+        permission: DashboardPermission;
+    }>): Promise<{
+        acl: DashboardAclEntry[];
+    }>;
+    listDashboardVersions(dashboardId: string): Promise<{
+        versions: DashboardVersionMeta[];
+    }>;
+    getDashboardVersion(dashboardId: string, versionId: string): Promise<{
+        version: DashboardVersion;
+    }>;
+    restoreDashboardVersion(dashboardId: string, versionId: string): Promise<{
+        dashboard: Dashboard;
+        version: DashboardVersionMeta;
+    }>;
+    listUsers(): Promise<{
+        users: User[];
+    }>;
+    createUser(input: {
+        email: string;
+        name: string;
+        password: string;
+        role: string;
+        locale?: string;
+    }): Promise<{
+        user: User;
+    }>;
+}
+
+interface ChartRendererProps {
+    widget: Widget;
+    data?: QueryResult;
+    locale?: string;
+    currency?: string;
+    timeZone?: string;
+    /** Dashboard / theme chart palette (falls back to defaults). */
+    chartColors?: string[];
+    loading?: boolean;
+    onDrillDown?: (payload: Record<string, unknown>) => void;
+    /** Current list-box selection (empty = All). */
+    listboxSelection?: Array<string | number>;
+    onListboxSelectionChange?: (values: Array<string | number>) => void;
+}
+declare function ChartRenderer({ widget, data, locale, currency, loading, onDrillDown, listboxSelection, onListboxSelectionChange, chartColors, }: ChartRendererProps): react__default.JSX.Element;
+
+interface FilterBarProps {
+    filters: FilterDef[];
+    onChange: (filters: FilterDef[]) => void;
+    title?: string;
+    hint?: string;
+    editable?: boolean;
+    /** When set, field is chosen from this column list instead of free text. */
+    fieldOptions?: string[];
+    fieldPlaceholder?: string;
+    fieldEmptyLabel?: string;
+    fieldDisabled?: boolean;
+    /** Hide the built-in header (e.g. when embedded in a popover). */
+    hideHeader?: boolean;
+    /** Applied to newly added filters (where = row-level, having = aggregated). */
+    defaultClause?: 'where' | 'having';
+}
+declare function FilterBar({ filters, onChange, title, hint, editable, fieldOptions, fieldPlaceholder, fieldEmptyLabel, fieldDisabled, hideHeader, defaultClause, }: FilterBarProps): react__default.JSX.Element;
+
+declare function ensureI18n(locale?: string): i18next.i18n;
+
+interface SearchableSelectProps {
+    id?: string;
+    options: string[];
+    value: string[];
+    onChange: (value: string[]) => void;
+    placeholder?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    emptyLabel?: string;
+}
+declare function SearchableSelect({ id, options, value, onChange, placeholder, multiple, disabled, emptyLabel, }: SearchableSelectProps): react__default.JSX.Element;
+
+interface FieldHelpProps {
+    /** Help text shown in the tooltip. */
+    text: string;
+    /** Optional accessible name; defaults to "Help". */
+    label?: string;
+}
+/** Compact help icon with a portal tooltip that stays fully on-screen. */
+declare function FieldHelp({ text, label }: FieldHelpProps): react__default.JSX.Element | null;
+interface FieldLabelProps {
+    htmlFor?: string;
+    children: react__default.ReactNode;
+    /** Help / usage description for this field. */
+    help?: string;
+    className?: string;
+}
+/** Field label with an optional inline help icon. */
+declare function FieldLabel({ htmlFor, children, help, className }: FieldLabelProps): react__default.JSX.Element;
+
+declare const ICON_SIZE = 16;
+declare const chartTypeIcon: Record<WidgetType, LucideIcon>;
+declare const navIcon: {
+    readonly dashboards: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly designer: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly viewer: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly connections: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly users: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+};
+
+export { ChartRenderer, DashboardApiClient, DashboardDesigner, type DashboardDesignerProps, DashboardViewer, type DashboardViewerProps, FieldHelp, type FieldHelpProps, FieldLabel, type FieldLabelProps, FilterBar, ICON_SIZE, SearchableSelect, type SearchableSelectProps, chartTypeIcon, ensureI18n, navIcon };