@funcd-dev/ui 0.0.0-bootstrap.0

package/dist/molecules/hm-chart/hm-chart.util.d.ts

@@ -0,0 +1,113 @@
+import { PyColorsType } from '@/mantine.theme';
+import { MantineTheme } from '@mantine/core';
+export declare const getPaletteColor: (theme: MantineTheme, color: PyColorsType, colorScheme: 'light' | 'dark') => string;
+export declare const getSeriesColors: (theme: MantineTheme, colorScheme: 'light' | 'dark') => string[];
+/** The chart card's background, used for the gaps and rings between marks */
+export declare const getSurfaceColor: (theme: MantineTheme, colorScheme: 'light' | 'dark') => string;
+export declare const getChartTheme: (theme: MantineTheme, colorScheme: 'light' | 'dark') => {
+    darkMode: boolean;
+    color: string[];
+    backgroundColor: string;
+    textStyle: {
+        fontFamily: string;
+        color: string;
+    };
+    title: {
+        textStyle: {
+            color: string;
+        };
+    };
+    legend: {
+        textStyle: {
+            color: string;
+        };
+    };
+    tooltip: {
+        backgroundColor: string;
+        borderWidth: number;
+        padding: number[];
+        textStyle: {
+            color: string;
+        };
+        extraCssText: string;
+        axisPointer: {
+            lineStyle: {
+                color: string;
+                type: string;
+            };
+            shadowStyle: {
+                color: string;
+            };
+        };
+    };
+    categoryAxis: {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+        };
+        axisLabel: {
+            color: string;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string[];
+            };
+        };
+    };
+    valueAxis: {
+        axisLine: {
+            show: boolean;
+        };
+        axisTick: {
+            show: boolean;
+        };
+        axisLabel: {
+            color: string;
+            formatter: (value: number) => string;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string[];
+            };
+        };
+    };
+    timeAxis: {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+        };
+        axisLabel: {
+            color: string;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string[];
+            };
+        };
+    };
+    logAxis: {
+        axisLine: {
+            show: boolean;
+        };
+        axisTick: {
+            show: boolean;
+        };
+        axisLabel: {
+            color: string;
+            formatter: (value: number) => string;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string[];
+            };
+        };
+    };
+};

package/dist/molecules/hm-chart/index.d.ts

@@ -0,0 +1,21 @@
+import { BarSeriesOption, LineSeriesOption, PieSeriesOption } from 'echarts/charts';
+import { DatasetComponentOption, GridComponentOption, LegendComponentOption, TitleComponentOption, TooltipComponentOption } from 'echarts/components';
+import * as echarts from 'echarts/core';
+import { ECElementEvent, SetOptionOpts } from 'echarts/core';
+import { CSSProperties, FC } from 'react';
+export type ECOption = echarts.ComposeOption<BarSeriesOption | LineSeriesOption | TitleComponentOption | TooltipComponentOption | GridComponentOption | DatasetComponentOption | LegendComponentOption | PieSeriesOption>;
+export interface IHMChart {
+    option: ECOption;
+    style?: CSSProperties;
+    settings?: SetOptionOpts;
+    loading?: boolean;
+    /** Forces a color scheme; by default the chart follows Mantine's */
+    theme?: 'light' | 'dark';
+    onClick?: (params: ECElementEvent) => void;
+}
+/**
+ * Renders an ECharts `option`. The chart follows the size of its container
+ * and the Mantine theme, including the color scheme.
+ */
+declare const HMChart: FC<IHMChart>;
+export default HMChart;

package/dist/molecules/hm-drawer.d.ts

@@ -0,0 +1,5 @@
+import { FC, ReactNode } from 'react';
+declare const HMDrawer: FC<{
+    children: ReactNode;
+}>;
+export default HMDrawer;

package/dist/molecules/index.d.ts

@@ -0,0 +1,9 @@
+export { default as NavBarLink } from './nav-bar-link';
+export { default as SearchBar } from './search-bar';
+export { default as ToggleThemeMode } from './toggle-theme-mode';
+export { default as HMDrawer } from './hm-drawer';
+export { default as StatsRing } from './stats-ring';
+export { default as HMChart } from './hm-chart';
+export type { ECOption, IHMChart } from './hm-chart';
+export * from './data-grid';
+export * from './flow-card';

package/dist/molecules/nav-bar-link.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { LinkProps } from 'react-router-dom';
+interface INavBarLink extends LinkProps {
+    handleIsActive: (isActive: boolean) => void;
+}
+declare const NavBarLink: FC<INavBarLink>;
+export default NavBarLink;

package/dist/molecules/search-bar/index.d.ts

@@ -0,0 +1,4 @@
+import { TextInputProps } from '@mantine/core';
+import { FC } from 'react';
+declare const SearchBar: FC<TextInputProps>;
+export default SearchBar;

package/dist/molecules/stats-ring/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+interface IStatsRing {
+    label: string;
+    stats: string;
+    progress: number;
+    color: string;
+    icon: 'up' | 'down';
+}
+declare const StatsRing: FC<IStatsRing>;
+export default StatsRing;

package/dist/molecules/table/HmTableAction.d.ts

@@ -0,0 +1,8 @@
+import { IRowAction } from './types';
+interface ITableActions<TRow extends Record<string, any>> {
+    actions: IRowAction<TRow>[];
+    row: TRow;
+    index: number;
+}
+declare const HMTableAction: <TRow extends Record<string, any>>(props: ITableActions<TRow>) => "" | import("react").JSX.Element;
+export default HMTableAction;

package/dist/molecules/table/HmTableHead.d.ts

@@ -0,0 +1,7 @@
+import { IHMColumn, IRowAction } from './types';
+interface IHmTableHead<TRow extends Record<string, any>> {
+    columns: IHMColumn<TRow>[];
+    actions?: IRowAction<TRow>[];
+}
+declare const HmTableHead: <TRow extends Record<string, any>>(props: IHmTableHead<TRow>) => import("react").JSX.Element;
+export default HmTableHead;

package/dist/molecules/table/HmTableRow.d.ts

@@ -0,0 +1,8 @@
+import { IHMColumn, IRowAction } from './types';
+interface IHmTableRow<TRow extends Record<string, any>> {
+    rows: TRow[];
+    columns: IHMColumn<TRow>[];
+    actions?: IRowAction<TRow>[];
+}
+declare const HmTableRow: <TRow extends Record<string, any>>(props: IHmTableRow<TRow>) => import("react").JSX.Element;
+export default HmTableRow;

package/dist/molecules/table/index.d.ts

@@ -0,0 +1,9 @@
+import { TableProps } from '@mantine/core';
+import { IHMColumn, IRowAction } from './types';
+export interface IHmTable<TRow extends Record<string, any>> extends TableProps {
+    columns: IHMColumn<TRow>[];
+    rows: TRow[];
+    actions?: IRowAction<TRow>[];
+}
+declare const HmTable: <TRow extends Record<string, any>>(props: IHmTable<TRow>) => import("react").JSX.Element;
+export default HmTable;

package/dist/molecules/table/types.d.ts

@@ -0,0 +1,15 @@
+import { FC, JSX } from 'react';
+export interface IHMColumn<TRow = Record<string, any>> {
+    key: keyof TRow;
+    label: string;
+    rowRender?: (val: any, index: number, id: string) => JSX.Element;
+}
+export interface IRowAction<TRow = Record<string, any>> {
+    name: string;
+    fn: (row: TRow, index: number) => void;
+    actionRender: FC<{
+        row: TRow;
+        index: number;
+        name: string;
+    }>;
+}

package/dist/molecules/toggle-theme-mode/index.d.ts

@@ -0,0 +1,4 @@
+import { ActionIconProps } from '@mantine/core';
+import { FC } from 'react';
+declare const ToggleThemeMode: FC<ActionIconProps>;
+export default ToggleThemeMode;

package/dist/reactive-chart/chart-builder.d.ts

@@ -0,0 +1,15 @@
+import { ElementType, FunctionComponent } from 'react';
+import { ChartType, IReactiveChart } from './reactive-charts/types';
+type ChartMapType = Record<string, ElementType<IReactiveChart<any>>>;
+declare function getChart(chart: string): ElementType<IReactiveChart<any>> | undefined;
+interface IDefineComponent {
+    name: ChartType;
+    component: FunctionComponent<IReactiveChart<any>>;
+}
+declare const defineWidget: (params: IDefineComponent) => void;
+declare const _default: {
+    chartMap: ChartMapType;
+    defineWidget: typeof defineWidget;
+    getChart: typeof getChart;
+};
+export default _default;

package/dist/reactive-chart/dashboard/chart-group.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+import { ChartGroupComponentType } from './types';
+interface IChartGroup {
+    name?: string;
+    component?: ChartGroupComponentType;
+    children?: ReactNode;
+}
+declare const ChartGroup: FC<IChartGroup>;
+export default ChartGroup;

package/dist/reactive-chart/dashboard/dynamic-chart.d.ts

@@ -0,0 +1,12 @@
+import { JSONData } from '@/types';
+import { FC } from 'react';
+import { IChartClickParams } from '../reactive-charts/types';
+import { IDynamicChartMeta } from './types';
+interface IDynamicChart {
+    chart: IDynamicChartMeta;
+    data: JSONData;
+    loading?: boolean;
+    onChartClick?: (params: IChartClickParams) => void;
+}
+declare const DynamicChart: FC<IDynamicChart>;
+export default DynamicChart;

package/dist/reactive-chart/dashboard/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ReactiveDashboard } from './reactive-dashboard';
+export * from './reactive-dashboard';
+export type { ChartMeta, IChartLayout, IReactiveChartMeta } from './types';

package/dist/reactive-chart/dashboard/reactive-dashboard.d.ts

@@ -0,0 +1,13 @@
+import { JSONData } from '@/types';
+import { IChartClickParams } from '../reactive-charts/types';
+import { IReactiveChartMeta } from './types';
+export interface IReactiveDashboard<TChartData extends JSONData> {
+    meta: IReactiveChartMeta<TChartData>[];
+    data: TChartData;
+    loading?: boolean;
+    /** Height of one layout row, in pixels */
+    rowHeight?: number;
+    onChartClick?: (params: IChartClickParams) => void;
+}
+declare const ReactiveDashboard: <TChartData extends JSONData>(props: IReactiveDashboard<TChartData>) => import("react").JSX.Element;
+export default ReactiveDashboard;

package/dist/reactive-chart/dashboard/types.d.ts

@@ -0,0 +1,58 @@
+import { ECOption } from '@/molecules/hm-chart';
+import { DataKeyOf, JSONData, RowOf } from '@/types';
+import { ReactElement, ReactNode } from 'react';
+import { ChartType, CommonChartProps, IConditionalChartProp } from '../reactive-charts/types';
+export interface IChartLayout {
+    /** Start column, from 0 to 11 */
+    x: number;
+    /** Start row, from 0 */
+    y: number;
+    /** Width in columns, from 1 to 12 */
+    w: number;
+    /** Height in rows; leave it out for a height that follows the width */
+    h?: number;
+    /** Minimum height in rows, ignored when `h` is set */
+    minRows?: number;
+    /** Maximum height in rows, ignored when `h` is set */
+    maxRows?: number;
+    /** Maximum width of the chart, in pixels */
+    maxWidth?: number;
+}
+interface IPartialReactiveChart<TChartType extends ChartType, TDataKey extends string> {
+    /** Stable id of the chart: React key, test id and saved layouts */
+    chartKey: string;
+    /** Path to the chart's rows in the dashboard's `data` */
+    dataKey: TDataKey;
+    /** Title displayed above the chart */
+    title: string;
+    /** Position on the group's 12-column grid */
+    layout: IChartLayout;
+    /** ECharts option merged last; plain values only, so the meta can be saved */
+    options?: ECOption;
+    /** Chart type => "bar", "line", "pie" */
+    type: TChartType;
+}
+type ReactiveChartMeta<TChartData extends JSONData, TDataKey extends string, TChartType extends ChartType> = IConditionalChartProp<RowOf<TChartData, TDataKey>>[TChartType] & IPartialReactiveChart<TChartType, TDataKey>;
+/** One chart; its custom props are typed from the rows at its `dataKey` */
+export type ChartMeta<TChartData extends JSONData, TChartType extends ChartType = ChartType> = {
+    [TDataKey in DataKeyOf<TChartData>]: TChartType extends ChartType ? ReactiveChartMeta<TChartData, TDataKey, TChartType> : never;
+}[DataKeyOf<TChartData>];
+/**
+ * A chart's meta without the typing that ties its keys to the dashboard's
+ * data. DynamicChart takes this shape: TypeScript can't relate two
+ * `ChartMeta<TChartData>` built inside a generic component.
+ */
+export interface IDynamicChartMeta extends IPartialReactiveChart<ChartType, string> {
+    customProps: CommonChartProps<JSONData>;
+}
+export interface IReactiveChartMeta<TChartData extends JSONData> {
+    /** Stable id of the group */
+    groupKey: string;
+    /** Title displayed above the group */
+    name?: string;
+    charts: ChartMeta<TChartData>[];
+}
+export type ChartGroupComponentType = ReactElement<{
+    children?: ReactNode;
+}>;
+export {};

package/dist/reactive-chart/dashboard-layout/layout-grid-item.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+import { IChartLayout } from '../dashboard/types';
+export interface ILayoutGridItem {
+    layout: IChartLayout;
+    /** Set by LayoutGrid: empty columns before the item in its row */
+    offset?: number;
+    children?: ReactNode;
+}
+declare const LayoutGridItem: FC<ILayoutGridItem>;
+export default LayoutGridItem;

package/dist/reactive-chart/dashboard-layout/layout-grid.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+interface ILayoutGrid {
+    /** Height of one layout row, in pixels */
+    rowHeight?: number;
+    children?: ReactNode;
+}
+declare const LayoutGrid: FC<ILayoutGrid>;
+export default LayoutGrid;

package/dist/reactive-chart/index.d.ts

@@ -0,0 +1,3 @@
+export * from './reactive-charts';
+export * from './dashboard';
+export { default as ChartBuilder } from './chart-builder';

package/dist/reactive-chart/reactive-charts/index.d.ts

@@ -0,0 +1,5 @@
+export * from './reactive-bar-chart';
+export * from './reactive-line-chart';
+export * from './reactive-pie-chart';
+export * from './types';
+export * from './utils';

package/dist/reactive-chart/reactive-charts/reactive-bar-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ReactiveBarChart } from './reactive-bar-chart';
+export * from './types';

package/dist/reactive-chart/reactive-charts/reactive-bar-chart/reactive-bar-chart.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { IReactiveChart } from '../types';
+import { BarChartCustomProps } from './types';
+declare const ReactiveBarChart: FC<IReactiveChart<BarChartCustomProps>>;
+export default ReactiveBarChart;

package/dist/reactive-chart/reactive-charts/reactive-bar-chart/types.d.ts

@@ -0,0 +1,11 @@
+import { JSONData, NestedKeyOf } from '@/types';
+import { IChartSeries } from '../types/reactive-chart-base';
+export type BarChartCustomProps<TRow extends JSONData = JSONData> = {
+    /** Row key of the categories */
+    xKey: NestedKeyOf<TRow>;
+    series: IChartSeries<TRow>[];
+    /** Stacks the series on top of each other */
+    stacked?: boolean;
+    /** Draws the bars from left to right */
+    horizontal?: boolean;
+};

package/dist/reactive-chart/reactive-charts/reactive-line-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ReactiveLineChart } from './reactive-line-chart';
+export * from './types';

package/dist/reactive-chart/reactive-charts/reactive-line-chart/reactive-line-chart.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { IReactiveChart } from '../types';
+import { LineChartCustomProps } from './types';
+declare const ReactiveLineChart: FC<IReactiveChart<LineChartCustomProps>>;
+export default ReactiveLineChart;

package/dist/reactive-chart/reactive-charts/reactive-line-chart/types.d.ts

@@ -0,0 +1,11 @@
+import { JSONData, NestedKeyOf } from '@/types';
+import { IChartSeries } from '../types/reactive-chart-base';
+export type LineChartCustomProps<TRow extends JSONData = JSONData> = {
+    /** Row key of the x axis values */
+    xKey: NestedKeyOf<TRow>;
+    series: IChartSeries<TRow>[];
+    /** Draws curved lines */
+    smooth?: boolean;
+    /** Fills the area under each line */
+    area?: boolean;
+};

package/dist/reactive-chart/reactive-charts/reactive-pie-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ReactivePieChart } from './reactive-pie-chart';
+export * from './types';

package/dist/reactive-chart/reactive-charts/reactive-pie-chart/reactive-pie-chart.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { IReactiveChart } from '../types';
+import { PieChartCustomProps } from './types';
+declare const ReactivePieChart: FC<IReactiveChart<PieChartCustomProps>>;
+export default ReactivePieChart;

package/dist/reactive-chart/reactive-charts/reactive-pie-chart/types.d.ts

@@ -0,0 +1,12 @@
+import { PyColorsType } from '@/mantine.theme';
+import { JSONData, NestedKeyOf } from '@/types';
+export type PieChartCustomProps<TRow extends JSONData = JSONData> = {
+    /** Row key of the slice names */
+    nameKey: NestedKeyOf<TRow>;
+    /** Row key of the slice values */
+    valueKey: NestedKeyOf<TRow>;
+    /** Draws a ring instead of a full pie, with the total in the middle */
+    donut?: boolean;
+    /** Theme palette per slice name, for slices that mean a status; by default the chart theme picks one */
+    colors?: Record<string, PyColorsType>;
+};

package/dist/reactive-chart/reactive-charts/types/chart-custom-meta.d.ts

@@ -0,0 +1,13 @@
+import { JSONData } from '@/types';
+import { IChartCustomProps } from './chart-custom-props';
+export interface IConditionalChartProp<TRow extends JSONData> {
+    bar: {
+        customProps: IChartCustomProps<TRow>['bar'];
+    };
+    line: {
+        customProps: IChartCustomProps<TRow>['line'];
+    };
+    pie: {
+        customProps: IChartCustomProps<TRow>['pie'];
+    };
+}

package/dist/reactive-chart/reactive-charts/types/chart-custom-props.d.ts

@@ -0,0 +1,10 @@
+import { JSONData } from '@/types';
+import { BarChartCustomProps } from '../reactive-bar-chart/types';
+import { LineChartCustomProps } from '../reactive-line-chart/types';
+import { PieChartCustomProps } from '../reactive-pie-chart/types';
+import { CommonChartProps } from './reactive-chart-base';
+export interface IChartCustomProps<TRow extends JSONData> {
+    bar: CommonChartProps<BarChartCustomProps<TRow>>;
+    line: CommonChartProps<LineChartCustomProps<TRow>>;
+    pie: CommonChartProps<PieChartCustomProps<TRow>>;
+}

package/dist/reactive-chart/reactive-charts/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './reactive-chart-base';
+export * from './chart-custom-props';
+export * from './chart-custom-meta';

package/dist/reactive-chart/reactive-charts/types/reactive-chart-base.d.ts

@@ -0,0 +1,37 @@
+import { PyColorsType } from '@/mantine.theme';
+import { ECOption } from '@/molecules/hm-chart';
+import { JSONData, NestedKeyOf } from '@/types';
+import { ECElementEvent } from 'echarts/core';
+export type ChartType = 'bar' | 'line' | 'pie';
+export interface IChartClickParams {
+    chartKey: string;
+    /** The clicked row, as it is in `data` */
+    row: JSONData;
+    event: ECElementEvent;
+}
+export interface IChartSeries<TRow extends JSONData = JSONData> {
+    /** Row key holding the values */
+    key: NestedKeyOf<TRow>;
+    /** Legend and tooltip label */
+    name: string;
+    /** Theme palette of the series; by default the chart theme picks one */
+    color?: PyColorsType;
+}
+export type CommonChartProps<TChartProps extends JSONData> = {
+    hidden?: boolean;
+} & TChartProps;
+export interface IReactiveChart<TChartProps extends JSONData, TChartData extends JSONData = JSONData> {
+    /** Key is used for the React key and the test id */
+    chartKey: string;
+    /** Path to the chart's rows in `data` */
+    dataKey: string;
+    /** Title displayed above the chart */
+    title: string;
+    /** ECharts option merged last, for what the custom props don't cover */
+    options?: ECOption;
+    data: TChartData;
+    loading?: boolean;
+    onChartClick?: (params: IChartClickParams) => void;
+    customProps: CommonChartProps<TChartProps>;
+}
+export type ReactiveChartStoryType<TChartProps extends JSONData, TChartData extends JSONData = JSONData> = Omit<IReactiveChart<TChartProps, TChartData>, 'data' | 'onChartClick'>;

package/dist/reactive-chart/reactive-charts/utils/chart-container.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from 'react';
+interface IChartContainer {
+    chartKey: string;
+    title: string;
+    hidden?: boolean;
+    loading?: boolean;
+    isEmpty?: boolean;
+    /** Replaces the chart, for a meta that can't be drawn */
+    error?: string;
+    children?: ReactNode;
+}
+declare const ChartContainer: FC<IChartContainer>;
+export default ChartContainer;

package/dist/reactive-chart/reactive-charts/utils/chart-option.util.d.ts

@@ -0,0 +1,9 @@
+import { JSONData } from '@/types';
+export type ChartAxisType = 'category' | 'value' | 'time';
+/** Axis type of the values at `key`, read from the first row like the data grid does */
+export declare const getChartAxisType: (rows: JSONData[], key: string) => ChartAxisType;
+/**
+ * Deep-merges `override` into `option`. Arrays such as `series` are merged
+ * item by item, so an override can change one series and keep the others.
+ */
+export declare const mergeChartOptions: <TOption extends JSONData>(option: TOption, override?: JSONData) => TOption;

package/dist/reactive-chart/reactive-charts/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ChartContainer } from './chart-container';
+export * from './chart-option.util';
+export * from './use-chart-rows';

package/dist/reactive-chart/reactive-charts/utils/use-chart-rows.d.ts

@@ -0,0 +1,10 @@
+import { JSONData } from '@/types';
+interface IUseChartRows {
+    data: JSONData;
+    dataKey: string;
+}
+export declare const useChartRows: (params: IUseChartRows) => {
+    rows: JSONData[];
+    flatRows: JSONData[];
+};
+export {};

package/dist/reactive-form/form/dynamic-field.d.ts

@@ -0,0 +1,10 @@
+import { InputType, ReactiveFieldErrorType } from '@/reactive-form/reactive-fields';
+import { FormProps, JSONData } from '../../types';
+import { FieldMeta } from './types';
+interface IDynamicField<TFormValues extends JSONData> {
+    field: FieldMeta<TFormValues, InputType>;
+    form: FormProps<TFormValues>;
+    errors: ReactiveFieldErrorType;
+}
+declare const DynamicField: <TFormValues extends JSONData>(props: IDynamicField<TFormValues>) => import("react").JSX.Element;
+export default DynamicField;

package/dist/reactive-form/form/form-group.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+import { FormGroupComponentType } from './types';
+interface IFormGroup {
+    name?: string;
+    component?: FormGroupComponentType;
+    children?: ReactNode;
+}
+declare const FormGroup: FC<IFormGroup>;
+export default FormGroup;

package/dist/reactive-form/form/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ReactiveForm } from './reactive-form';
+export * from './reactive-form';
+export type { IReactiveFieldMeta, FieldMeta } from './types';

package/dist/reactive-form/form/reactive-form.d.ts

@@ -0,0 +1,8 @@
+import { FormProps, JSONData } from '../../types';
+import { IReactiveFieldMeta } from './types';
+export interface IReactiveForm<TFormValues extends JSONData> {
+    meta: IReactiveFieldMeta<TFormValues>[];
+    form: FormProps<TFormValues>;
+}
+declare const ReactiveForm: <TFormValues extends JSONData>(props: IReactiveForm<TFormValues>) => import("react").JSX.Element;
+export default ReactiveForm;

package/dist/reactive-form/form/types.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement, ReactNode } from 'react';
+import { FormFieldOption, IConditionalProp, InputType } from '@/reactive-form/reactive-fields/types';
+import { JSONData, NestedKeyOf } from '@/types';
+type PartialOption<TFormValues extends JSONData> = Omit<FormFieldOption<TFormValues>, 'onChange' | 'onBlur'>;
+interface IPatialReactiveField<TFormValues extends JSONData, TInputType extends InputType> {
+    /** Key is used for register, input id and array map key */
+    fieldKey: NestedKeyOf<TFormValues>;
+    /** label is used for the input displayed name */
+    label: string;
+    /** react-hook-form register's options  */
+    options?: PartialOption<TFormValues>;
+    /** Field type => "text", "switch" ...  */
+    type: TInputType;
+}
+type ReactiveFieldMeta<TInputType extends InputType, TFormValues extends JSONData> = IConditionalProp<TFormValues>[TInputType] & IPatialReactiveField<TFormValues, TInputType>;
+export type FieldMeta<TFormValues extends JSONData, TInputType extends InputType> = TInputType extends InputType ? ReactiveFieldMeta<TInputType, TFormValues> : never;
+export interface IReactiveFieldMeta<TFormValues extends JSONData> {
+    name?: string;
+    fields: ReturnType<<TInputType extends InputType>(params: FieldMeta<TFormValues, TInputType>[]) => typeof params>;
+}
+export type FormGroupComponentType = ReactElement<{
+    title: string;
+    children: ReactNode;
+}>;
+export {};