@digital-ai/dot-components 1.3.0 → 1.3.1

package/lib/components/dynamic-form/{helpers.d.ts → utils/formHelpers.d.ts}

@@ -1,7 +1,7 @@
 import { ChangeEvent } from 'react';
-import { DynamicFormConfig, DynamicFormControlProps, DynamicFormOutputData, DynamicFormState, DynamicFormStateData, HiddenControl } from './models';
-import { AutoCompleteValue } from '../auto-complete/AutoComplete';
-import { CheckboxProps } from '../checkbox/Checkbox';
+import { DynamicFormConfig, DynamicFormControlProps, DynamicFormState, DynamicFormStateData } from '../models';
+import { AutoCompleteValue } from '../../auto-complete/AutoComplete';
+import { CheckboxProps } from '../../checkbox/Checkbox';
 declare type AutoCompleteChangeHandler = (controlName: string) => (e: ChangeEvent<HTMLInputElement>, value: AutoCompleteValue) => void;
 declare type ChangeHandler = (controlName: string) => (e: ChangeEvent<HTMLInputElement>) => void;
 declare type CheckboxGroupChangeHandler = (controlName: string) => (event: ChangeEvent<HTMLInputElement>, value: CheckboxProps[]) => void;
@@ -20,11 +20,7 @@ export interface UncontrolledInputArgs extends InputBaseArgs {
     formState?: DynamicFormState;
     handleClick?: () => void;
 }
-export declare const getControlValue: <T extends unknown>(controlName: string, data: DynamicFormStateData) => T;
-export declare const checkIfHiddenControl: (hidden: HiddenControl, formValues: DynamicFormOutputData) => boolean;
 export declare const getInitialFormState: (config: DynamicFormConfig, liveValidation: boolean) => DynamicFormState;
-export declare const getOutputFormData: (formState: DynamicFormState) => DynamicFormOutputData;
-export declare const getFormDataFromInitialValues: (config: DynamicFormConfig) => DynamicFormOutputData;
 export declare const buildInputTextControl: ({ controlName, controlProps, disabled, formData, handleChange, index, }: ControlledInputArgs) => JSX.Element;
 export declare const buildInputSelectControl: ({ controlName, controlProps, disabled, formData, handleChange, index, }: ControlledInputArgs) => JSX.Element;
 export declare const buildAutocompleteControl: ({ controlName, controlProps, disabled, formData, handleChange, index, }: ControlledInputArgs) => JSX.Element;

package/lib/components/dynamic-form/utils/helpers.d.ts

@@ -0,0 +1,5 @@
+import { DynamicFormConfig, DynamicFormOutputData, DynamicFormState, DynamicFormStateData, HiddenControl } from '../models';
+export declare const getControlValue: <T extends unknown>(controlName: string, data: DynamicFormStateData) => T;
+export declare const getOutputFormData: (formState: DynamicFormState) => DynamicFormOutputData;
+export declare const checkIfHiddenControl: (hidden: HiddenControl, formValues: DynamicFormOutputData) => boolean;
+export declare const getFormDataFromInitialValues: (config: DynamicFormConfig) => DynamicFormOutputData;

package/lib/components/dynamic-form/{validation.d.ts → utils/validation.d.ts}

@@ -1,4 +1,4 @@
-import { DynamicFormConfig, DynamicFormOutputData, DynamicFormState, DynamicFormValidation, FieldValidation, ValidationField } from './models';
+import { DynamicFormConfig, DynamicFormOutputData, DynamicFormState, DynamicFormValidation, FieldValidation, ValidationField } from '../models';
 export declare const checkIfValidationApplies: (validationField: ValidationField, formValues: DynamicFormOutputData) => boolean;
 export declare const checkIfEmptyValue: (value: unknown) => boolean;
 export declare const checkIfString: (value: unknown) => boolean;

package/lib/components/form/Form.styles.d.ts

@@ -1,2 +1,2 @@
 export declare const rootClassName = "dot-form";
-export declare const StyledForm: import("styled-components").StyledComponent<"form", any, {}, never>;
+export declare const StyledFormContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/index.d.ts

@@ -1,21 +1,47 @@
+export type { AppToolbarProps } from './app-toolbar/AppToolbar';
+export type { AutoCompleteOption, AutoCompleteProps, AutoCompleteValue, } from './auto-complete/AutoComplete';
+export type { AvatarProps } from './avatar/Avatar';
+export type { BreadcrumbItem } from './breadcrumbs/Breadcrumbs';
+export type { ButtonProps } from './button/Button';
+export type { CheckboxProps } from './checkbox/Checkbox';
+export type { CheckboxGroupProps } from './checkbox/CheckboxGroup';
+export type { DynamicFormProps } from './dynamic-form/DynamicForm';
+export type { DynamicFormConfig, DynamicFormOutputData, DynamicFormState, FieldValidation, } from './dynamic-form/models';
+export type { IconButtonProps } from './button/IconButton';
+export type { InputTextProps } from './input-form-fields/InputText';
+export type { InputSelectProps } from './input-form-fields/InputSelect';
+export type { ListItemProps } from './list/List';
+export type { MenuItemProps } from './menu/Menu';
+export type { RailItem } from './navigation-rail/NavigationRail';
+export type { RadioButtonProps } from './radio/RadioButton';
+export type { RadioGroupProps } from './radio/RadioGroup';
+export type { BackItemProps, SidebarProps } from './sidebar/Sidebar';
+export type { SwitchProps } from './switch/Switch';
+export type { TableRowProps } from './table/Table';
+export type { DotColumnHeader } from './table/TableHeader';
+export type { Order } from './table/TableBody';
+export type { TableDataWithPagination } from './table/TableDataWithPagination';
+export type { RowsPerPageOption } from './table/TablePagination';
+export type { TabProps } from './tabs/Tabs';
+export type { TypographyVariant } from './typography/Typography';
 export { DotAccordion } from './accordion/Accordion';
 export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
 export { DotAppLogo } from './app-logo/AppLogo';
-export { DotAppToolbar, AppToolbarProps } from './app-toolbar/AppToolbar';
-export { AutoCompleteOption, AutoCompleteProps, DotAutoComplete, AutoCompleteValue, parseAutoCompleteValue, } from './auto-complete/AutoComplete';
-export { AvatarProps, DotAvatar } from './avatar/Avatar';
+export { DotAppToolbar } from './app-toolbar/AppToolbar';
+export { DotAutoComplete, parseAutoCompleteValue, } from './auto-complete/AutoComplete';
+export { DotAvatar } from './avatar/Avatar';
 export { DotAvatarGroup } from './avatar-group/AvatarGroup';
 export { DotBadge } from './badge/Badge';
-export { BreadcrumbItem, DotBreadcrumbs } from './breadcrumbs/Breadcrumbs';
-export { DotButton, ButtonProps } from './button/Button';
+export { DotBreadcrumbs } from './breadcrumbs/Breadcrumbs';
+export { DotButton } from './button/Button';
 export { DotButtonToggle } from './button-toggle/ButtonToggle';
 export { DotCard } from './card/Card';
 export { DotCardContent } from './card/CardContent';
 export { DotCardFooter } from './card/CardFooter';
 export { DotCardHeader } from './card/CardHeader';
-export { CheckboxProps, DotCheckbox } from './checkbox/Checkbox';
-export { DotCheckboxGroup, CheckboxGroupProps } from './checkbox/CheckboxGroup';
+export { DotCheckbox } from './checkbox/Checkbox';
+export { DotCheckboxGroup } from './checkbox/CheckboxGroup';
 export { DotChip } from './chip/Chip';
 export { DotConfirmationDialog } from './confirmation-dialog/ConfirmationDialog';
 export { Cell, CssCell } from './css-grid/CssCell';
@@ -23,35 +49,33 @@ export { CssGrid } from './css-grid/CssGrid';
 export { CssGridDebug } from './css-grid/CssGridDebug';
 export { DotDialog } from './dialog/Dialog';
 export { DotDrawer } from './drawer/Drawer';
+export { DotJsonSchemaForm } from './json-schema-form/JsonSchemaForm';
 export { DotEmptyState } from './empty-state/EmptyState';
 export { DotForm } from './form/Form';
 export { DotFormGroup } from './form-group/FormGroup';
-export { DotDynamicForm, DynamicFormProps } from './dynamic-form/DynamicForm';
-export { DynamicFormConfig, DynamicFormOutputData, DynamicFormState, FieldValidation, } from './dynamic-form/models';
+export { DotDynamicForm } from './dynamic-form/DynamicForm';
 export { DotIcon } from './icon/Icon';
-export { DotIconButton, IconButtonProps } from './button/IconButton';
+export { DotIconButton } from './button/IconButton';
 export { DotInlineEdit } from './inline-edit/InlineEdit';
-export { DotInputText, InputTextProps } from './input-form-fields/InputText';
-export { DotInputSelect, InputSelectProps, } from './input-form-fields/InputSelect';
+export { DotInputText } from './input-form-fields/InputText';
+export { DotInputSelect } from './input-form-fields/InputSelect';
 export { DotLink } from './link/Link';
-export { DotList, ListItemProps } from './list/List';
-export { DotMenu, MenuItemProps } from './menu/Menu';
-export { DotNavigationRail, RailItem } from './navigation-rail/NavigationRail';
+export { DotList } from './list/List';
+export { DotMenu } from './menu/Menu';
+export { DotNavigationRail } from './navigation-rail/NavigationRail';
 export { DotPill } from './pill/Pill';
 export { DotProgress } from './progress/Progress';
-export { DotRadioButton, RadioButtonProps } from './radio/RadioButton';
-export { DotRadioGroup, RadioGroupProps } from './radio/RadioGroup';
-export { BackItemProps, DotSidebar, SidebarProps } from './sidebar/Sidebar';
+export { DotRadioButton } from './radio/RadioButton';
+export { DotRadioGroup } from './radio/RadioGroup';
+export { DotSidebar } from './sidebar/Sidebar';
 export { DotSkeleton } from './skeleton/Skeleton';
 export { DotSnackbar } from './snackbar/Snackbar';
 export { DotSnackbarContainer, DotSnackbarProvider, useDotSnackbarContext, } from './snackbar/SnackbarProvider';
 export { DotSplitButton } from './split-button/SplitButton';
-export { DotSwitch, SwitchProps } from './switch/Switch';
-export { DotTable, TableRowProps } from './table/Table';
+export { DotSwitch } from './switch/Switch';
+export { DotTable } from './table/Table';
 export { DotTooltip } from './tooltip/Tooltip';
-export { Order } from './table/TableBody';
-export { DotHeaderRow, DotColumnHeader } from './table/TableHeader';
-export { TableDataWithPagination } from './table/TableDataWithPagination';
-export { DotTablePagination, RowsPerPageOption } from './table/TablePagination';
-export { DotTabs, TabProps } from './tabs/Tabs';
-export { DotTypography, TypographyVariant } from './typography/Typography';
+export { DotHeaderRow } from './table/TableHeader';
+export { DotTablePagination } from './table/TablePagination';
+export { DotTabs } from './tabs/Tabs';
+export { DotTypography } from './typography/Typography';

package/lib/components/json-schema-form/JsonSchemaForm.d.ts

@@ -0,0 +1,21 @@
+import { MouseEvent, KeyboardEvent } from 'react';
+import { ErrorSchema, FormValidation, IChangeEvent, ISubmitEvent, UiSchema } from 'react-jsonschema-form';
+import { JSONSchema6 } from 'json-schema';
+declare type BoolNumStr = boolean | number | string;
+interface JsonSchemaFormProps<T> {
+    disabled?: boolean;
+    formData?: T;
+    liveValidate?: boolean;
+    onBlur?: (id: string, value: BoolNumStr) => void;
+    onCancel?: (event: MouseEvent<Element> | KeyboardEvent<Element>) => void;
+    onChange?: (event: IChangeEvent<T>, errorSchema?: ErrorSchema) => unknown;
+    onError?: (event: unknown) => unknown;
+    onFocus?: (id: string, value: BoolNumStr) => void;
+    onSubmit?: (event: ISubmitEvent<T>) => void;
+    schema: JSONSchema6;
+    submitButtonText?: string;
+    uiSchema?: UiSchema;
+    validate?: (formData: T, errors: FormValidation) => FormValidation;
+}
+declare function DotJsonSchemaForm<T>({ disabled, formData, liveValidate, onBlur, onCancel, onChange, onError, onFocus, onSubmit, schema, submitButtonText, uiSchema, validate, }: JsonSchemaFormProps<T>): JSX.Element;
+export { DotJsonSchemaForm, JsonSchemaFormProps };

package/lib/components/json-schema-form/JsonSchemaForm.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const rootClassName = "dot-json-schema-form";
+export declare const StyledActionButtonsRow: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/json-schema-form/custom-widgets/CustomCheckboxWidget.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WidgetProps } from 'react-jsonschema-form';
+export declare const CustomCheckboxWidget: ({ id, label, value, disabled, onChange, }: WidgetProps) => JSX.Element;

package/lib/components/json-schema-form/custom-widgets/CustomCheckboxesWidget.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WidgetProps } from 'react-jsonschema-form';
+export declare const CustomCheckboxesWidget: ({ id, value, onChange, required, rawErrors, schema, disabled, options: optionsObj, }: WidgetProps) => JSX.Element;

package/lib/components/json-schema-form/custom-widgets/CustomRadioWidget.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WidgetProps } from 'react-jsonschema-form';
+export declare const CustomRadioWidget: ({ id, label, value, disabled, onChange, required, rawErrors, schema, }: WidgetProps) => JSX.Element;

package/lib/components/json-schema-form/custom-widgets/CustomSelectWidget.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WidgetProps } from 'react-jsonschema-form';
+export declare const CustomSelectWidget: ({ autofocus, disabled, id, label, onChange, rawErrors, required, schema, value, }: WidgetProps) => JSX.Element;

package/lib/components/json-schema-form/custom-widgets/CustomTextWidget.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WidgetProps } from 'react-jsonschema-form';
+export declare const CustomTextWidget: ({ autofocus, id, label, value, disabled, onChange, required, rawErrors, schema, }: WidgetProps) => JSX.Element;

package/lib/components/json-schema-form/custom-widgets/helpers.d.ts

@@ -0,0 +1,10 @@
+export declare const getOptionsFromSchema: (optionsObj: {
+    [key: string]: string | number | boolean | object;
+}) => {
+    label: string;
+    value: string;
+}[];
+export declare const useProcessRawErrors: (rawErrors: Array<string>) => {
+    error: boolean;
+    errorHelperText: string;
+};

package/lib/components/json-schema-form/custom-widgets/index.d.ts

@@ -0,0 +1,5 @@
+export { CustomCheckboxWidget } from './CustomCheckboxWidget';
+export { CustomTextWidget } from './CustomTextWidget';
+export { CustomCheckboxesWidget } from './CustomCheckboxesWidget';
+export { CustomSelectWidget } from './CustomSelectWidget';
+export { CustomRadioWidget } from './CustomRadioWidget';

package/lib/components/list/List.d.ts

@@ -38,7 +38,7 @@ export interface ListProps extends CommonProps {
     /** If 'menu' the nested list will be displayed as a flyout nav, else it will be an expand/collapse toggle list */
     nestedListType?: NestedListType;
     /** Width of list, defaults to 240px */
-    width?: number;
+    width?: number | string;
 }
 export interface ListItemProps extends CommonProps {
     /** string or JSX element that is displayed inside the list */

package/lib/components/table/Table.stories.data.d.ts

@@ -37,8 +37,12 @@ export declare const defaultData: ({
         fans: number;
         delete: {
             children: JSX.Element;
+            dataTestId: string;
+            disabled: boolean;
+            iconId: string;
             key: string;
             onclick: () => void;
+            tooltip: string;
         }[];
     };
 } | {
@@ -49,8 +53,12 @@ export declare const defaultData: ({
         fans: number;
         delete: {
             children: JSX.Element;
+            dataTestId: string;
+            disabled: boolean;
+            iconId: string;
             key: string;
             onclick: () => void;
+            tooltip: string;
         }[];
     };
     selected?: undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [
@@ -31,6 +31,7 @@
     "styled-components": "^5.2.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0",
+    "react-jsonschema-form": "^1.8.1"
   }
 }