@grasp-labs/ds-microfrontends-integration 0.25.2 → 1.0.0

package/README.md

@@ -18,8 +18,8 @@ Components for managing secrets with JSON Schema-based forms.
 
 ```tsx
 import {
-  VaultInput,
   VaultProvider,
+  VaultInput,
   VaultSecretDialog,
 } from "@grasp-labs/ds-microfrontends-integration";
 import "@grasp-labs/ds-microfrontends-integration/styles.css";

package/dist/components/language/translations/en.json.d.ts

@@ -13,7 +13,15 @@ declare const _default: {
   "vaultSecretDialog.deleteError": "Failed to delete secret. Please try again.",
   "vaultInput.placeholder": "Select a secret",
   "vaultInput.addAriaLabel": "Add new secret",
-  "vaultInput.toggleAriaLabel": "Toggle options menu"
+  "vaultInput.toggleAriaLabel": "Toggle options menu",
+  "schemaFields.remove": "Remove",
+  "schemaFields.addItem": "+ Add Item",
+  "schemaFields.addEntry": "+ Add Entry",
+  "schemaFields.keyPlaceholder": "Key",
+  "schemaFields.variant": "Option",
+  "schemaFields.allowedPatterns": "Allowed patterns",
+  "schemaFields.invalidValue": "Invalid value",
+  "schemaFields.none": "None"
 }
 ;
 

package/dist/components/language/translations/no.json.d.ts

@@ -13,7 +13,15 @@ declare const _default: {
   "vaultSecretDialog.deleteError": "Kunne ikke slette hemmeligheten. Prøv igjen.",
   "vaultInput.placeholder": "Velg en hemmelighet",
   "vaultInput.addAriaLabel": "Legg til ny hemmelighet",
-  "vaultInput.toggleAriaLabel": "Vis eller skjul alternativer"
+  "vaultInput.toggleAriaLabel": "Vis eller skjul alternativer",
+  "schemaFields.remove": "Fjern",
+  "schemaFields.addItem": "+ Legg til element",
+  "schemaFields.addEntry": "+ Legg til oppføring",
+  "schemaFields.keyPlaceholder": "Nøkkel",
+  "schemaFields.variant": "Alternativ",
+  "schemaFields.allowedPatterns": "Tillatte mønstre",
+  "schemaFields.invalidValue": "Ugyldig verdi",
+  "schemaFields.none": "Ingen"
 }
 ;
 

package/dist/components/schemaFields/ArrayField.d.ts

@@ -4,5 +4,10 @@ type ArrayFieldProps<T extends FieldValues = FieldValues> = {
     descriptor: FieldDescriptor<Path<T>>;
     control: Control<T>;
 };
+/**
+ * Dynamic list field for homogeneous array schemas with add/remove support.
+ * All items share the same schema from `items`. New items are initialized
+ * with the schema's default value. For fixed-length typed arrays, see TupleField.
+ */
 export declare function ArrayField<T extends FieldValues = FieldValues>({ descriptor, control, }: ArrayFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/schemaFields/BooleanField.d.ts

@@ -4,5 +4,10 @@ type BooleanFieldProps<T extends FieldValues = FieldValues> = {
     descriptor: FieldDescriptor<Path<T>>;
     control: Control<T>;
 };
+/**
+ * Checkbox field for boolean schema values.
+ * Uses the descriptor label as the checkbox label and coerces
+ * the stored value to boolean for display.
+ */
 export declare function BooleanField<T extends FieldValues = FieldValues>({ descriptor, control, }: BooleanFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/schemaFields/ConditionalFields.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { Control, FieldErrors, FieldValues, Path } from 'react-hook-form';
+import { FieldDescriptor } from 'src/lib/schema/types';
+import { Schema } from 'src/types/Schema';
+type ConditionalFieldsProps<T extends FieldValues = FieldValues> = {
+    schema: Schema;
+    prefix: string;
+    control: Control<T>;
+    errors: FieldErrors<T>;
+    fieldDirection?: "horizontal" | "vertical";
+    renderField?: (descriptor: FieldDescriptor<Path<T>>, defaultRender: () => ReactNode) => ReactNode;
+};
+/**
+ * Renders then/else schema fields based on if condition evaluation.
+ * Watches form values via useWatch and re-evaluates the if condition reactively.
+ * Renders the `then` branch when the condition matches, `else` otherwise.
+ */
+export declare function ConditionalFields<T extends FieldValues = FieldValues>({ schema, prefix, control, errors, fieldDirection, renderField, }: ConditionalFieldsProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/schemaFields/DateField.d.ts

@@ -4,5 +4,10 @@ type DateFieldProps<T extends FieldValues = FieldValues> = {
     descriptor: FieldDescriptor<Path<T>>;
     control: Control<T>;
 };
+/**
+ * Date picker field with min/max date constraints from schema.
+ * Activated for string fields with format "date". Supports locale,
+ * minDate, maxDate, and defaultMonth from descriptor constraints.
+ */
 export declare function DateField<T extends FieldValues = FieldValues>({ descriptor, control, }: DateFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/schemaFields/DefaultFieldRenderer.d.ts

@@ -1,5 +1,11 @@
 import { Control, FieldValues, Path } from 'react-hook-form';
 import { FieldDescriptor } from 'src/lib/schema/types';
+/**
+ * Routes a field descriptor to the appropriate field component based on its type.
+ * Maps schema types (string, number, array, tuple, dictionary, etc.) to their
+ * corresponding UI components. String fields are further dispatched by format
+ * (vault, date, password).
+ */
 export declare function DefaultFieldRenderer<T extends FieldValues>({ descriptor, control, }: {
     descriptor: FieldDescriptor<Path<T>>;
     control: Control<T>;

package/dist/components/schemaFields/DependentFields.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { Control, FieldErrors, FieldValues, Path } from 'react-hook-form';
+import { FieldDescriptor } from 'src/lib/schema/types';
+import { Schema } from 'src/types/Schema';
+type DependentFieldsProps<T extends FieldValues = FieldValues> = {
+    schema: Schema;
+    prefix: string;
+    control: Control<T>;
+    errors: FieldErrors<T>;
+    fieldDirection?: "horizontal" | "vertical";
+    renderField?: (descriptor: FieldDescriptor<Path<T>>, defaultRender: () => ReactNode) => ReactNode;
+};
+/**
+ * Renders additional fields from dependentSchemas when their trigger properties have values.
+ * Each dependency key gets its own SingleDependency component with an independent useWatch,
+ * so changes to one property don't trigger re-renders of unrelated dependent fields.
+ */
+export declare function DependentFields<T extends FieldValues = FieldValues>({ schema, prefix, control, errors, fieldDirection, renderField, }: DependentFieldsProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/schemaFields/DictionaryField/DictionaryEntry.d.ts

@@ -0,0 +1,20 @@
+import { Control, FieldValues } from 'react-hook-form';
+import { Schema } from 'src/types/Schema';
+type DictionaryEntryProps<T extends FieldValues = FieldValues> = {
+    fieldName: string;
+    entryKey: string;
+    valueSchema: Schema | null;
+    isDisabled: boolean;
+    keyPlaceholder: string;
+    removeLabel: string;
+    control: Control<T>;
+    onKeyChange: (newKey: string) => void;
+    onRemove: () => void;
+};
+/**
+ * Single key-value row in a dictionary field with editable key and typed value.
+ * Key renames are committed on blur. The value input is rendered by EntryValueRenderer
+ * which adapts to the value schema type (scalar input or nested object fields).
+ */
+export declare function DictionaryEntry<T extends FieldValues = FieldValues>({ fieldName, entryKey, valueSchema, isDisabled, keyPlaceholder, removeLabel, control, onKeyChange, onRemove, }: DictionaryEntryProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/schemaFields/DictionaryField/DictionaryField.d.ts

@@ -0,0 +1,14 @@
+import { Control, FieldValues, Path } from 'react-hook-form';
+import { FieldDescriptor } from 'src/lib/schema';
+type DictionaryFieldProps<T extends FieldValues = FieldValues> = {
+    descriptor: FieldDescriptor<Path<T>>;
+    control: Control<T>;
+};
+/**
+ * Key-value dictionary field for schemas with additionalProperties or patternProperties.
+ * Supports dynamic add/remove of entries. For additionalProperties, all values share
+ * the same schema. For patternProperties, each entry's value schema is determined by
+ * the first matching pattern. Key validation is handled by AJV at form submit.
+ */
+export declare function DictionaryField<T extends FieldValues = FieldValues>({ descriptor, control, }: DictionaryFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/schemaFields/DictionaryField/index.d.ts

@@ -0,0 +1 @@
+export { DictionaryField } from './DictionaryField';

package/dist/components/schemaFields/EnumField.d.ts

@@ -4,5 +4,10 @@ type EnumFieldProps<T extends FieldValues = FieldValues> = {
     descriptor: FieldDescriptor<Path<T>>;
     control: Control<T>;
 };
+/**
+ * Dropdown select for schema enum values.
+ * Builds options from the schema's enum array. Nullable schemas
+ * include a "None" option that sets the value to null.
+ */
 export declare function EnumField<T extends FieldValues = FieldValues>({ descriptor, control, }: EnumFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/schemaFields/FieldError.d.ts

@@ -5,5 +5,10 @@ type ErrorObject = {
 type FieldErrorProps = {
     error: ErrorObject | undefined;
 };
+/**
+ * Displays validation error messages from react-hook-form.
+ * Handles simple errors (single message) and complex nested errors
+ * by recursively flattening them into a path-prefixed list.
+ */
 export declare function FieldError({ error }: FieldErrorProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/schemaFields/JsonField.d.ts

@@ -4,5 +4,10 @@ type JsonFieldProps<T extends FieldValues = FieldValues> = {
     descriptor: FieldDescriptor<Path<T>>;
     control: Control<T>;
 };
+/**
+ * JSON editor for object-string schema types (objects without defined properties).
+ * Used as a fallback for schemas typed as "object" but lacking properties,
+ * additionalProperties, or patternProperties definitions.
+ */
 export declare function JsonField<T extends FieldValues = FieldValues>({ descriptor, control, }: JsonFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/schemaFields/NumberField.d.ts

@@ -4,5 +4,10 @@ type NumberFieldProps<T extends FieldValues = FieldValues> = {
     descriptor: FieldDescriptor<Path<T>>;
     control: Control<T>;
 };
+/**
+ * Numeric input that respects min/max/step constraints from the schema.
+ * Handles both number and integer types — integers use step=1,
+ * numbers use step="any". Emits null for empty values.
+ */
 export declare function NumberField<T extends FieldValues = FieldValues>({ descriptor, control, }: NumberFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/schemaFields/SchemaFields.d.ts

@@ -10,5 +10,11 @@ type SchemaFieldsProps<T extends FieldValues = FieldValues> = {
     fieldDirection?: "horizontal" | "vertical";
     renderField?: (descriptor: FieldDescriptor<Path<T>>, defaultRender: () => ReactNode) => ReactNode;
 };
+/**
+ * Renders form fields for all properties in a JSON Schema object.
+ * Handles nested objects via recursion, oneOf/anyOf via VariantField,
+ * conditionals (if/then/else), and dependentSchemas.
+ * Supports custom field rendering via the optional renderField callback.
+ */
 export declare function SchemaFields<T extends FieldValues = FieldValues>({ control, errors, schema, prefix, fieldDirection, renderField, }: SchemaFieldsProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/schemaFields/SchemaFields.stories.d.ts

@@ -34,9 +34,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const BasicForm: Story;
-export declare const BasicFormWithCustomValidation: Story;
-export declare const BasicFormWithVerticalAlignment: Story;
+export declare const WithCustomErrors: Story;
 export declare const NestedWithVault: Story;
-export declare const PasswordFields: Story;
-export declare const WithCustomField: Story;
-export declare const WithFullOverride: Story;
+export declare const WithRenderField: Story;
+export declare const Playground: Story;

package/dist/components/schemaFields/TextField.d.ts

@@ -4,5 +4,10 @@ type TextFieldProps<T extends FieldValues = FieldValues> = {
     descriptor: FieldDescriptor<Path<T>>;
     control: Control<T>;
 };
+/**
+ * Text input with automatic type detection based on schema format.
+ * Renders PasswordTextBox for password/writeOnly fields, standard TextBox otherwise.
+ * Supports formats: email, uri/url, date, date-time, password.
+ */
 export declare function TextField<T extends FieldValues = FieldValues>({ descriptor, control, }: TextFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/schemaFields/TupleField.d.ts

@@ -0,0 +1,13 @@
+import { Control, FieldValues, Path } from 'react-hook-form';
+import { FieldDescriptor } from 'src/lib/schema';
+type TupleFieldProps<T extends FieldValues = FieldValues> = {
+    descriptor: FieldDescriptor<Path<T>>;
+    control: Control<T>;
+};
+/**
+ * Fixed-length array field where each position has its own schema (prefixItems).
+ * No add/remove — the number of items is determined by the schema.
+ * Object-typed positions render nested SchemaFields, scalars use DefaultFieldRenderer.
+ */
+export declare function TupleField<T extends FieldValues = FieldValues>({ descriptor, control, }: TupleFieldProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/schemaFields/VariantField/VariantField.d.ts

@@ -0,0 +1,14 @@
+import { Control, FieldErrors, FieldValues, Path } from 'react-hook-form';
+import { FieldDescriptor } from 'src/lib/schema/types';
+type VariantFieldProps<T extends FieldValues = FieldValues> = {
+    descriptor: FieldDescriptor<Path<T>>;
+    control: Control<T>;
+    errors?: FieldErrors<T>;
+};
+/**
+ * Renders a variant selector (oneOf/anyOf) with a dropdown to switch between sub-schemas.
+ * Switching variants resets the field value to the new schema's default.
+ * Object variants render nested SchemaFields, scalar variants delegate to DefaultFieldRenderer.
+ */
+export declare function VariantField<T extends FieldValues = FieldValues>({ descriptor, control, errors, }: VariantFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/schemaFields/VariantField/index.d.ts

@@ -0,0 +1 @@
+export { VariantField } from './VariantField';

package/dist/components/schemaFields/VaultField.d.ts

@@ -4,5 +4,10 @@ type VaultFieldProps<T extends FieldValues = FieldValues> = {
     descriptor: FieldDescriptor<Path<T>>;
     control: Control<T>;
 };
+/**
+ * Vault secret selector for fields with format "vault".
+ * Delegates to VaultInput which provides a secret picker UI.
+ * Activated by DefaultFieldRenderer for string fields with format "vault".
+ */
 export declare function VaultField<T extends FieldValues = FieldValues>({ descriptor, control, }: VaultFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/schemaFields/consts/schemas.d.ts

@@ -2,4 +2,14 @@ import { Schema } from 'src/types';
 export declare const SIMPLE_SCHEMA: Schema;
 export declare const NESTED_SCHEMA: Schema;
 export declare const SECRET_FORM_SCHEMA: Schema;
+export declare const COMPLEX_SCHEMA: Schema;
+export declare const NULLABLE_SCHEMA: Schema;
+export declare const DEEP_NESTING_SCHEMA: Schema;
+export declare const FULL_FEATURES_SCHEMA: Schema;
+export declare const DICTIONARY_SCHEMA: Schema;
 export declare const PASSWORD_SCHEMA: Schema;
+export declare const COMPOSITION_SCHEMA: Schema;
+export declare const CONDITIONAL_SCHEMA: Schema;
+export declare const ARRAYS_TUPLES_SCHEMA: Schema;
+export declare const PATTERN_PROPS_SCHEMA: Schema;
+export declare const VARIANTS_SCHEMA: Schema;

package/dist/components/schemaFields/index.d.ts

@@ -2,6 +2,7 @@ export { ArrayField } from './ArrayField';
 export { BooleanField } from './BooleanField';
 export { DateField } from './DateField';
 export { DefaultFieldRenderer } from './DefaultFieldRenderer';
+export { DictionaryField } from './DictionaryField';
 export { EnumField } from './EnumField';
 export { FieldError } from './FieldError';
 export { JsonField } from './JsonField';

package/dist/components/schemaFields/shared/EntryValueRenderer.d.ts

@@ -0,0 +1,16 @@
+import { Control, FieldValues } from 'react-hook-form';
+import { Schema } from 'src/types/Schema';
+type EntryValueRendererProps<T extends FieldValues = FieldValues> = {
+    fieldName: string;
+    entryKey: string;
+    valueSchema: Schema | null;
+    control: Control<T>;
+};
+/**
+ * Renders the value part of a dictionary entry.
+ * Object schemas are rendered as nested SchemaFields, scalar schemas
+ * get a single field input via DefaultFieldRenderer. Shared by
+ * DictionaryEntry (used by DictionaryField for both regular and pattern dictionaries).
+ */
+export declare function EntryValueRenderer<T extends FieldValues = FieldValues>({ fieldName, entryKey, valueSchema, control, }: EntryValueRendererProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/schemaFields/shared/dictionaryHandlers.d.ts

@@ -0,0 +1,5 @@
+type OnChange = (value: Record<string, unknown>) => void;
+export declare const generateUniqueKey: (existingKeys: string[]) => string;
+export declare const removeEntry: (currentValue: Record<string, unknown>, keyToRemove: string, onChange: OnChange) => void;
+export declare const renameEntry: (currentValue: Record<string, unknown>, oldKey: string, newKey: string, onChange: OnChange) => void;
+export {};