@opengov/form-renderer 0.0.46 → 0.1.0

package/dist/renderer/Field.d.ts

@@ -1,4 +1,15 @@
-export default function Field({ fieldId, readonly }: {
-    fieldId: string;
+/**
+ * Field is a component that renders a field.
+ * It takes a fieldId and readonly.
+ * It uses the field template and the field type to render a field.
+ * The field is wrapped in a Box that can be styled by the layout object passed to the RendererProvider.
+ * @param id - The fieldId to render.
+ * @param name - The name of the field within the form.
+ * @param readonly - Whether the field is readonly.
+ * @returns A Field component.
+ */
+export default function Field({ id, name, readonly }: {
+    id: string;
+    name?: string;
     readonly?: boolean;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/renderer/Form.d.ts

@@ -0,0 +1,19 @@
+import { UseFormProps } from 'react-hook-form';
+import { SubmitOptions } from './types';
+/**
+ * Form is a component that renders a form.
+ * It takes children, formOptions, and submitOptions.
+ * It renders a FormProvider with the formOptions.
+ * It renders a form with the submitOptions.
+ * @param children - The children to render.
+ * @param formOptions - The form options to use.
+ * @param submitOptions - The submit options to use.
+ * @returns A Form component.
+ */
+export default function Form({ children, formOptions, submitOptions, }: {
+    children: React.ReactNode;
+    formOptions?: UseFormProps & {
+        defaultValues: Record<string, any>;
+    };
+    submitOptions?: SubmitOptions;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/renderer/{FormProvider.d.ts → RendererProvider.d.ts}

@@ -1,12 +1,11 @@
 import { default as React } from 'react';
 import { LayoutState } from './context/LayoutContext';
 import { FormTemplate, FieldTypes } from '@opengov/form-utils';
-interface FormProviderProps {
+interface RendererProviderProps {
     children: React.ReactNode;
-    layout?: LayoutState;
     template: FormTemplate;
     fieldTypes?: FieldTypes[];
-    readonly?: boolean;
+    layout?: LayoutState;
 }
-declare function FormProvider({ children, layout, template, fieldTypes, readonly }: FormProviderProps): import("react/jsx-runtime").JSX.Element;
-export default FormProvider;
+export default function RendererProvider({ children, template, fieldTypes, layout, }: RendererProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/renderer/Section.d.ts

@@ -0,0 +1,17 @@
+import { SectionTemplate } from '@opengov/form-utils';
+/**
+ * Section is a component that renders a section.
+ * It takes a section template, a list of fields, and readonly.
+ * It renders a Box with the section layout.
+ * It maps every field to a Field component, passing the readonly prop.
+ * @param section - The section template to render.
+ * @param fields - The fields to render.
+ * @param readonly - Whether the section is readonly.
+ * @returns A Section component.
+ */
+export default function Section({ section, fields, fieldNames, readonly, }: {
+    section: SectionTemplate;
+    fields: string[];
+    fieldNames?: string[];
+    readonly?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/renderer/context/FormRendererContext.d.ts

@@ -3,13 +3,11 @@ import { FormTemplate, FieldTypes } from '@opengov/form-utils';
 export interface FormRendererContextType {
     template: FormTemplate;
     fieldTypes: FieldTypes[];
-    readonly?: boolean;
 }
 interface FormRendererProviderProps {
     children: ReactNode;
     template: FormTemplate;
     fieldTypes: FieldTypes[];
-    readonly?: boolean;
 }
 export declare const FormRendererProvider: React.FC<FormRendererProviderProps>;
 export declare const useFormRenderer: () => FormRendererContextType;
@@ -21,18 +19,22 @@ export declare const useFieldType: (type?: string) => {
     groups: import('@opengov/form-utils').ConfigurationGroup<import('react-hook-form').FieldValues>[];
     omitLabelConfiguration?: boolean;
     fullWidth: boolean;
-    renderField: ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').FieldConfiguration<import('react-hook-form').FieldValues>, { disabled, readonly }: {
+    renderField: ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').FieldConfiguration<import('react-hook-form').FieldValues>, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
-    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').TextConfiguration, { disabled, readonly }: {
+        name?: string;
+    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').TextConfiguration, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
-    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').NumberConfiguration, { disabled, readonly }: {
+        name?: string;
+    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').NumberConfiguration, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
-    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').DateConfiguration, { disabled, readonly }: {
+        name?: string;
+    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').DateConfiguration, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
+        name?: string;
     }) => JSX.Element);
 } | {
     type: string;
@@ -44,18 +46,22 @@ export declare const useFieldType: (type?: string) => {
     fullWidth: boolean;
     maxLength: number;
     filter?: (value: string) => string;
-    renderField: ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').FieldConfiguration<import('react-hook-form').FieldValues>, { disabled, readonly }: {
+    renderField: ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').FieldConfiguration<import('react-hook-form').FieldValues>, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
-    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').TextConfiguration, { disabled, readonly }: {
+        name?: string;
+    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').TextConfiguration, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
-    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').NumberConfiguration, { disabled, readonly }: {
+        name?: string;
+    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').NumberConfiguration, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
-    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').DateConfiguration, { disabled, readonly }: {
+        name?: string;
+    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').DateConfiguration, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
+        name?: string;
     }) => JSX.Element);
 } | {
     type: string;
@@ -66,18 +72,22 @@ export declare const useFieldType: (type?: string) => {
     omitLabelConfiguration?: boolean;
     fullWidth: boolean;
     decimalPlaces: number;
-    renderField: ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').FieldConfiguration<import('react-hook-form').FieldValues>, { disabled, readonly }: {
+    renderField: ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').FieldConfiguration<import('react-hook-form').FieldValues>, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
-    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').TextConfiguration, { disabled, readonly }: {
+        name?: string;
+    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').TextConfiguration, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
-    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').NumberConfiguration, { disabled, readonly }: {
+        name?: string;
+    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').NumberConfiguration, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
-    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').DateConfiguration, { disabled, readonly }: {
+        name?: string;
+    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').DateConfiguration, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
+        name?: string;
     }) => JSX.Element);
 } | {
     type: string;
@@ -88,18 +98,22 @@ export declare const useFieldType: (type?: string) => {
     omitLabelConfiguration?: boolean;
     fullWidth: boolean;
     dateFormat: import('@opengov/form-utils').DateFormat;
-    renderField: ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').FieldConfiguration<import('react-hook-form').FieldValues>, { disabled, readonly }: {
+    renderField: ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').FieldConfiguration<import('react-hook-form').FieldValues>, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
-    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').TextConfiguration, { disabled, readonly }: {
+        name?: string;
+    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').TextConfiguration, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
-    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').NumberConfiguration, { disabled, readonly }: {
+        name?: string;
+    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').NumberConfiguration, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
-    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').DateConfiguration, { disabled, readonly }: {
+        name?: string;
+    }) => JSX.Element) | ((template: import('@opengov/form-utils').FieldTemplate, config: import('@opengov/form-utils').DateConfiguration, { disabled, readonly, name }: {
         disabled?: boolean;
         readonly?: boolean;
+        name?: string;
     }) => JSX.Element);
 } | null;
 export declare const useFieldTemplate: (fieldId: string) => import('@opengov/form-utils').FieldTemplate;

package/dist/renderer/context/LayoutContext.d.ts

@@ -1,8 +1,9 @@
 import { SxProps, Theme } from '@mui/material';
+import { FieldConfiguration, FieldTemplate, SectionTemplate } from '@opengov/form-utils';
 import { default as React, ReactNode } from 'react';
 export interface LayoutState {
-    form: SxProps<Theme>;
-    fields: SxProps<Theme>;
+    section?: (template: SectionTemplate) => SxProps<Theme>;
+    field?: (template: FieldTemplate, config?: FieldConfiguration) => SxProps<Theme>;
 }
 interface FormLayoutContextProps {
     layout: LayoutState;

package/dist/renderer/types.d.ts

@@ -2,11 +2,12 @@ import { UseFormProps } from 'react-hook-form';
 import { LayoutState } from './context/LayoutContext';
 import { FieldTypes, FormTemplate, DateFormat } from '@opengov/form-utils';
 export type FormData = Record<string, any>;
-export type SubmitProps = {
-    onSubmit: (data: any) => void;
+export type SubmitOptions = {
+    onSubmit?: (data: any) => void;
     onReset?: () => void;
-    formId: string;
+    formId?: string;
     submitOnChange?: boolean;
+    registerForm?: (ref: HTMLFormElement | null) => void;
 };
 export type FormRendererProps = {
     fieldTypes?: FieldTypes[];
@@ -16,15 +17,7 @@ export type FormRendererProps = {
     formOptions?: UseFormProps & {
         defaultValues: FormData;
     };
-    submit?: SubmitProps;
+    submitOptions?: SubmitOptions;
     decimalPlaces?: number;
     dateFormat?: DateFormat;
 };
-export type RendererProps = {
-    fieldIds: string[];
-    formOptions?: UseFormProps & {
-        defaultValues: FormData;
-    };
-    submit?: SubmitProps;
-    readonly?: boolean;
-};

package/dist/stories/Basic.d.ts

@@ -1,3 +1 @@
-export default function BasicExample({ args }: {
-    args: any;
-}): import("react/jsx-runtime").JSX.Element;
+export default function BasicExample(): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengov/form-renderer",
-  "version": "0.0.46",
+  "version": "0.1.0",
   "description": "OpenGov Smart Forms form renderer",
   "type": "module",
   "files": [

package/dist/renderer/index.d.ts

@@ -1,11 +0,0 @@
-import { FormRendererProps, RendererProps, SubmitProps } from './types';
-import { UseFormProps } from 'react-hook-form';
-export declare function FormShell({ children, formOptions, submit, }: {
-    children: React.ReactNode;
-    formOptions?: UseFormProps & {
-        defaultValues: Record<string, any>;
-    };
-    submit?: SubmitProps;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function Renderer({ fieldIds, formOptions, submit, readonly }: RendererProps): import("react/jsx-runtime").JSX.Element;
-export default function FormRenderer({ template, fieldTypes, layout, readonly, formOptions, submit, }: FormRendererProps): import("react/jsx-runtime").JSX.Element;