@norges-domstoler/dds-page-generator/dist/index.d.mts

Page Generator

import * as react_jsx_runtime from 'react/jsx-runtime';
import { SelectOption, BaseComponentPropsWithChildren, CheckboxGroupProps, CheckboxProps, DescriptionListProps, DescriptionListGroupProps, DescriptionListTermProps, DescriptionListDescProps, DetailListProps, DetailListRowProps, DetailListTermProps, DetailListDescProps, DrawerGroupProps, Button, DrawerProps, FieldsetProps, StackProps, ListProps, ListItemProps, RadioButtonGroupProps, RadioButtonProps, ToggleBarProps, ToggleRadioProps, ToggleButtonGroupProps, ToggleButtonProps, CardProps, DividerProps, GlobalMessageProps, HeadingProps, InputMessageProps, LabelProps, LegendProps, LinkProps, LocalMessageProps, ParagraphProps, SpinnerProps, TypographyProps, VisuallyHiddenProps, DatePickerProps, TextInputProps, TextAreaProps, SelectProps, ScreenSize } from '@norges-domstoler/dds-components';
import { JSX, ComponentProps, Dispatch, SetStateAction } from 'react';
import { SingleValue, MultiValue, PropsValue } from 'react-select';
import { CalendarDate } from '@internationalized/date';

type PageGeneratorErrorMessages = Record<string, string>;

type PageGeneratorSelectOption = SingleValue<SelectOption<unknown>> | MultiValue<SelectOption<unknown>>;

type PageGeneratorValidationValue = string & PageGeneratorSelectOption & CalendarDate;

interface PageGeneratorValidation {
    message: string;
    formMessage?: string;
    rule: (value: PageGeneratorValidationValue) => boolean;
}

type PageGeneratorErrors = Record<string, {
    value: PageGeneratorValidationValue;
    errors: PageGeneratorValidation[];
}>;

declare enum PageGeneratorSupportedFields {
    Button = "Button",
    Card = "Card",
    Checkbox = "Checkbox",
    CheckboxGroup = "CheckboxGroup",
    DatePicker = "DatePicker",
    DescriptionList = "DescriptionList",
    DescriptionListGroup = "DescriptionListGroup",
    DescriptionListDesc = "DescriptionListDesc",
    DescriptionListTerm = "DescriptionListTerm",
    DetailList = "DetailList",
    DetailListRow = "DetailListRow",
    DetailListTerm = "DetailListTerm",
    DetailListDesc = "DetailListDesc",
    Divider = "Divider",
    Drawer = "Drawer",
    DrawerGroup = "DrawerGroup",
    Fieldset = "Fieldset",
    GlobalMessage = "GlobalMessage",
    Heading = "Heading",
    HStack = "HStack",
    InputMessage = "InputMessage",
    Label = "Label",
    Legend = "Legend",
    Link = "Link",
    List = "List",
    ListItem = "ListItem",
    LocalMessage = "LocalMessage",
    Paragraph = "Paragraph",
    RadioButton = "RadioButton",
    RadioButtonGroup = "RadioButtonGroup",
    Select = "Select",
    Spinner = "Spinner",
    TextArea = "TextArea",
    TextInput = "TextInput",
    ToggleBar = "ToggleBar",
    ToggleRadio = "ToggleRadio",
    ToggleButton = "ToggleButton",
    ToggleButtonGroup = "ToggleButtonGroup",
    Typography = "Typography",
    VisuallyHidden = "VisuallyHidden",
    VStack = "VStack"
}

type SectionGeneratorRow = BaseComponentPropsWithChildren<HTMLElement, {
    fields: PageGeneratorField[];
    hide?: boolean;
    as?: 'div' | 'fragment';
}>;

interface PageGeneratorRow {
    fields: PageGeneratorField[];
    hide?: boolean;
}

type PageGeneratorField = FieldWithChildren | FieldWithoutChildren | FieldWithValidations;
type FieldWithChildren = CheckboxGroupField | DescriptionListField | DescriptionListGroupField | DetailListField | DetailListRowField | DrawerGroupField | FieldsetField | HStackField | ListField | RadioButtonGroupField | ToggleBarField | ToggleButtonGroupField | VStackField;
type FieldWithoutChildren = ButtonField | CardField | CheckboxField | DescriptionListTermField | DescriptionListDescField | DetailListDescField | DetailListTermField | DividerField | DrawerField | GlobalMessageField | HeadingField | InputMessageField | LabelField | LegendField | LinkField | ListItemField | LocalMessageField | ParagraphField | RadioButtonField | SpinnerField | ToggleButtonField | ToggleRadioField | TypographyField | VisuallyHiddenField;
type FieldWithValidations = DatepickerField | TextInputField | TextAreaField | SelectField;
interface ButtonField {
    component: PageGeneratorSupportedFields.Button;
    props: ComponentProps<typeof Button>;
    hide?: boolean;
    innerHTML: JSX.Element | string;
}
interface CardField {
    component: PageGeneratorSupportedFields.Card;
    props: CardProps;
    hide?: boolean;
    innerHTML?: JSX.Element | string;
    children?: (PageGeneratorField | SectionGeneratorRow)[];
}
interface CheckboxField {
    component: PageGeneratorSupportedFields.Checkbox;
    props: CheckboxProps;
    hide?: boolean;
}
interface CheckboxGroupField {
    component: PageGeneratorSupportedFields.CheckboxGroup;
    props: CheckboxGroupProps;
    hide?: boolean;
    children: CheckboxField[];
}
interface DatepickerField {
    component: PageGeneratorSupportedFields.DatePicker;
    props: DatePickerProps;
    name: string;
    hide?: boolean;
    validations?: PageGeneratorValidation[];
}
interface DescriptionListField {
    component: PageGeneratorSupportedFields.DescriptionList;
    props: DescriptionListProps;
    hide?: boolean;
    children: DescriptionListGroupField[];
}
interface DescriptionListGroupField {
    component: PageGeneratorSupportedFields.DescriptionListGroup;
    props: DescriptionListGroupProps;
    hide?: boolean;
    children: (DescriptionListTermField | DescriptionListDescField)[];
}
interface DescriptionListTermField {
    component: PageGeneratorSupportedFields.DescriptionListTerm;
    props: DescriptionListTermProps;
    hide?: boolean;
    innerHTML: JSX.Element | string;
}
interface DescriptionListDescField {
    component: PageGeneratorSupportedFields.DescriptionListDesc;
    props: DescriptionListDescProps;
    hide?: boolean;
    innerHTML: JSX.Element | string;
}
interface DetailListField {
    component: PageGeneratorSupportedFields.DetailList;
    props: DetailListProps;
    hide?: boolean;
    children: DetailListRowField[];
}
interface DetailListRowField {
    component: PageGeneratorSupportedFields.DetailListRow;
    props: DetailListRowProps;
    hide?: boolean;
    children: (DetailListTermField | DetailListDescField)[];
}
interface DetailListTermField {
    component: PageGeneratorSupportedFields.DetailListTerm;
    props: DetailListTermProps;
    hide?: boolean;
    innerHTML: JSX.Element | string;
}
interface DetailListDescField {
    component: PageGeneratorSupportedFields.DetailListDesc;
    props: DetailListDescProps;
    hide?: boolean;
    innerHTML: JSX.Element | string;
}
interface DividerField {
    component: PageGeneratorSupportedFields.Divider;
    props: DividerProps;
    hide?: boolean;
}
interface DrawerField {
    component: PageGeneratorSupportedFields.Drawer;
    props: DrawerProps;
    hide?: boolean;
    innerHTML?: JSX.Element | string;
}
interface DrawerGroupField {
    component: PageGeneratorSupportedFields.DrawerGroup;
    props: DrawerGroupProps;
    hide?: boolean;
    children: (ButtonField | DrawerField)[];
}
interface FieldsetField {
    component: PageGeneratorSupportedFields.Fieldset;
    props: FieldsetProps;
    hide?: boolean;
    children: (PageGeneratorField | PageGeneratorRow)[];
}
interface GlobalMessageField {
    component: PageGeneratorSupportedFields.GlobalMessage;
    props: GlobalMessageProps;
    hide?: boolean;
    innerHTML?: JSX.Element | string;
}
interface HeadingField {
    component: PageGeneratorSupportedFields.Heading;
    props: HeadingProps;
    hide?: boolean;
    innerHTML?: JSX.Element | string;
}
interface HStackField {
    component: PageGeneratorSupportedFields.HStack;
    props: StackProps;
    hide?: boolean;
    children: PageGeneratorField[];
}
interface InputMessageField {
    component: PageGeneratorSupportedFields.InputMessage;
    props: InputMessageProps;
    hide?: boolean;
}
interface LabelField {
    component: PageGeneratorSupportedFields.Label;
    props: LabelProps;
    hide?: boolean;
    innerHTML?: JSX.Element | string;
}
interface LegendField {
    component: PageGeneratorSupportedFields.Legend;
    props: LegendProps;
    hide?: boolean;
    innerHTML?: JSX.Element | string;
}
interface LinkField {
    component: PageGeneratorSupportedFields.Link;
    props: LinkProps;
    hide?: boolean;
    innerHTML?: JSX.Element | string;
}
interface ListItemField {
    component: PageGeneratorSupportedFields.ListItem;
    props?: ListItemProps;
    hide?: boolean;
    innerHTML?: JSX.Element | string;
}
interface ListField {
    component: PageGeneratorSupportedFields.List;
    props?: ListProps;
    hide?: boolean;
    children: ListItemField[];
}
interface LocalMessageField {
    component: PageGeneratorSupportedFields.LocalMessage;
    props: LocalMessageProps;
    hide?: boolean;
    innerHTML?: JSX.Element | string;
}
interface ParagraphField {
    component: PageGeneratorSupportedFields.Paragraph;
    props: ParagraphProps;
    hide?: boolean;
    innerHTML?: JSX.Element | string;
}
interface RadioButtonField {
    component: PageGeneratorSupportedFields.RadioButton;
    props: RadioButtonProps;
    hide?: boolean;
}
interface RadioButtonGroupField {
    component: PageGeneratorSupportedFields.RadioButtonGroup;
    props: RadioButtonGroupProps<string | number>;
    hide?: boolean;
    children: RadioButtonField[];
}
interface SelectField {
    component: PageGeneratorSupportedFields.Select;
    props: SelectProps<SelectOption<unknown>, boolean>;
    name: string;
    validations?: PageGeneratorValidation[];
    hide?: boolean;
}
interface SpinnerField {
    component: PageGeneratorSupportedFields.Spinner;
    props: SpinnerProps;
    hide?: boolean;
}
interface TextAreaField {
    component: PageGeneratorSupportedFields.TextArea;
    props: TextAreaProps;
    validations?: PageGeneratorValidation[];
    hide?: boolean;
}
interface TextInputField {
    component: PageGeneratorSupportedFields.TextInput;
    props: TextInputProps;
    validations?: PageGeneratorValidation[];
    hide?: boolean;
}
interface ToggleBarField {
    component: PageGeneratorSupportedFields.ToggleBar;
    props: ToggleBarProps<string>;
    hide?: boolean;
    children: ToggleRadioField[];
}
interface ToggleRadioField {
    component: PageGeneratorSupportedFields.ToggleRadio;
    props: ToggleRadioProps;
    hide?: boolean;
}
interface ToggleButtonField {
    component: PageGeneratorSupportedFields.ToggleButton;
    props: ToggleButtonProps;
    hide?: boolean;
}
interface ToggleButtonGroupField {
    component: PageGeneratorSupportedFields.ToggleButtonGroup;
    props: ToggleButtonGroupProps;
    hide?: boolean;
    children: ToggleButtonField[];
}
interface TypographyField {
    component: PageGeneratorSupportedFields.Typography;
    props: TypographyProps;
    hide?: boolean;
    innerHTML: JSX.Element | string;
}
interface VisuallyHiddenField {
    component: PageGeneratorSupportedFields.VisuallyHidden;
    props: VisuallyHiddenProps;
    hide?: boolean;
    innerHTML: JSX.Element | string;
}
interface VStackField {
    component: PageGeneratorSupportedFields.VStack;
    props: StackProps;
    hide?: boolean;
    children: PageGeneratorField[];
}

interface PageGeneratorFormData {
    errors: PageGeneratorErrors | null;
    errorMessages: PageGeneratorErrorMessages | null;
    submitted: boolean;
    touched: boolean;
    valid: boolean;
}

type PageGeneratorStateOptionTypes = string | number | boolean | readonly string[] | undefined | CalendarDate | PropsValue<SelectOption<unknown>>;
type PageGeneratorState = Record<string, PageGeneratorStateOptionTypes>;
type PageGeneratorSetState = Dispatch<SetStateAction<PageGeneratorState>>;

type PageGeneratorProps = BaseComponentPropsWithChildren<HTMLElement, {
    /** Definere liste med felt/komponenter og/eller rader med felt/komponenter */
    fields: (PageGeneratorField | PageGeneratorRow)[];
    /** For å hente ut formData etter endringer */
    formDataOnChange?: (formData: PageGeneratorFormData) => void;
    /** Setter form eller div på Grid-komponenten */
    as: 'div' | 'form';
    /** Sende inn state slik at verdier kan oppdateres. */
    state?: PageGeneratorState;
    /** Sende inn state slik at verdier kan oppdateres. */
    setState?: PageGeneratorSetState;
    /** Velge om man ønsker validering fra browser eller ikke. Bør kun brukes når `as` er satt til `form`. */
    noValidate?: boolean;
    /** Submit-metode som skal kalles onSubmit */
    onSubmit?: () => void;
}>;

interface PageGeneratorTokens {
    Stack: {
        [ScreenSize.XSmall]: StackProps['gap'];
        [ScreenSize.Small]: StackProps['gap'];
        [ScreenSize.Medium]: StackProps['gap'];
        [ScreenSize.Large]: StackProps['gap'];
        [ScreenSize.XLarge]: StackProps['gap'];
    };
    rowGaps: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
}

type SectionGeneratorProps = BaseComponentPropsWithChildren<HTMLElement, {
    /** Definere liste med felt/komponenter og/eller rader med felt/komponenter */
    fields: (PageGeneratorField | SectionGeneratorRow)[];
    /** For å hente ut formData etter endringer */
    formDataOnChange?: (formData: PageGeneratorFormData) => void;
    /** Setter form, div eller fragment som wrapper-element */
    as: 'div' | 'form' | 'fragment';
    /** Sende inn state slik at verdier kan oppdateres. */
    state?: PageGeneratorState;
    /** Sende inn state slik at verdier kan oppdateres. */
    setState?: PageGeneratorSetState;
}>;

/**
 * Generer komponenter fra @norges-domstoler/dds-components i et Grid view, basert på `fields` propertien. PageGenerator bruker Grid-komponenten fra @norges-domstoler/dds-components, slik at den håndterer alt av riktige marginer, mellomrom og responsivt design.
 * @param props - `fields` inneholder felter eller rader med felter. `errorsOnChange` er callback for errorhåndtering. `as` setter HTML-element rundt hele PageGenerator.
 */
declare const PageGenerator: {
    (props: PageGeneratorProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

/**
 * Generer komponenter fra @norges-domstoler/dds-components, basert på `fields` propertien. SectionGenerator legger på en wrapper, basert på `as` propertien.
 * @param props - `fields` inneholder felter eller rader med felter. `errorsOnChange` er callback for statehåndtering. `as` setter HTML-element rundt hele SectionGenerator.
 */
declare const SectionGenerator: {
    (props: SectionGeneratorProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const isFieldWithValidations: (obj: PageGeneratorField | PageGeneratorRow) => obj is FieldWithValidations;

declare const isMultiValue: (obj: SingleValue<SelectOption<unknown>> | MultiValue<SelectOption<unknown>>) => obj is MultiValue<SelectOption<unknown>>;

declare const isPageGeneratorRow: (obj: PageGeneratorField | PageGeneratorRow) => obj is PageGeneratorRow;

declare const isSectionGeneratorRow: (obj: PageGeneratorField | SectionGeneratorRow) => obj is SectionGeneratorRow;

interface TextInputAndFieldProps {
    props?: TextInputProps;
    fieldProps?: Pick<TextInputField, 'validations' | 'hide'>;
}
/** COMMON FIELDS **/
declare const NinInput: ({ props, fieldProps, }: TextInputAndFieldProps) => PageGeneratorField;
declare const FirstNameInput: ({ props, fieldProps, }: TextInputAndFieldProps) => PageGeneratorField;
declare const LastNameInput: ({ props, fieldProps, }: TextInputAndFieldProps) => PageGeneratorField;
declare const DateOfBirthDatepicker: (props?: DatePickerProps) => PageGeneratorField;
declare const EmailInput: ({ props, fieldProps, }: TextInputAndFieldProps) => PageGeneratorField;
declare const StreetNameInput: ({ props, fieldProps, }: TextInputAndFieldProps) => PageGeneratorField;
declare const HouseNumberInput: ({ props, fieldProps, }: TextInputAndFieldProps) => PageGeneratorField;
declare const CountryCodeInput: ({ props, fieldProps, }: TextInputAndFieldProps) => PageGeneratorField;
declare const PhoneNumberInput: ({ props, fieldProps, }: TextInputAndFieldProps) => PageGeneratorField;
declare const PostalNumberInput: ({ props, fieldProps, }: TextInputAndFieldProps) => PageGeneratorField;
declare const PostalCodeInput: ({ props, fieldProps, }: TextInputAndFieldProps) => PageGeneratorField;
/** COMBINED FIELDS (into Rows) **/
declare const NameRow: (firstNameProps?: TextInputAndFieldProps, lastNameProps?: TextInputAndFieldProps, rowProps?: Pick<PageGeneratorRow, "hide">) => {
    hide?: boolean;
    fields: PageGeneratorField[];
};
declare const StreetAddressRow: (streetNameProps?: TextInputAndFieldProps, houseNumberProps?: TextInputAndFieldProps, rowProps?: Pick<PageGeneratorRow, "hide">) => {
    hide?: boolean;
    fields: PageGeneratorField[];
};
declare const PhoneNumberRow: (countryCodeProps?: TextInputAndFieldProps, phoneNumberProps?: TextInputAndFieldProps, rowProps?: PageGeneratorRow) => {
    fields: PageGeneratorField[];
    hide?: boolean;
};
declare const PostalRow: (postalNumberProps?: TextInputAndFieldProps, postalCodeProps?: TextInputAndFieldProps, rowProps?: Pick<PageGeneratorRow, "hide">) => {
    hide?: boolean;
    fields: PageGeneratorField[];
};
declare const DetailList: (rows: {
    term: string;
    desc: string;
}[]) => DetailListField;
declare const DetailListRow: (term: string, desc?: string | null) => {
    term: string;
    desc: string;
};

declare const RequiredValidator: (message?: string, formMessage?: string) => PageGeneratorValidation;
declare const RequiredSelectValidator: (message?: string, formMessage?: string) => PageGeneratorValidation;
declare const RequiredDatePickerValidator: (message?: string, formMessage?: string) => PageGeneratorValidation;
declare const NumbersOnlyValidator: (message?: string, formMessage?: string) => PageGeneratorValidation;
declare const NinValidator: PageGeneratorValidation;
declare const PhoneNumberValidator: PageGeneratorValidation;
declare const EmailValidator: PageGeneratorValidation;
declare const getFormErrorMessage: (errors: PageGeneratorErrors, leadText?: string) => JSX.Element;

export { CountryCodeInput, DateOfBirthDatepicker, type DescriptionListGroupField, DetailList, type DetailListDescField, type DetailListField, DetailListRow, type DetailListRowField, type DetailListTermField, EmailInput, EmailValidator, type FieldWithValidations, FirstNameInput, HouseNumberInput, LastNameInput, NameRow, NinInput, NinValidator, NumbersOnlyValidator, PageGenerator, type PageGeneratorErrorMessages, type PageGeneratorErrors, type PageGeneratorField, type PageGeneratorFormData, type PageGeneratorProps, type PageGeneratorRow, type PageGeneratorSelectOption, type PageGeneratorSetState, type PageGeneratorState, type PageGeneratorStateOptionTypes, PageGeneratorSupportedFields, type PageGeneratorTokens, type PageGeneratorValidation, type PageGeneratorValidationValue, PhoneNumberInput, PhoneNumberRow, PhoneNumberValidator, PostalCodeInput, PostalNumberInput, PostalRow, RequiredDatePickerValidator, RequiredSelectValidator, RequiredValidator, SectionGenerator, type SectionGeneratorProps, type SectionGeneratorRow, StreetAddressRow, StreetNameInput, type TextInputField, getFormErrorMessage, isFieldWithValidations, isMultiValue, isPageGeneratorRow, isSectionGeneratorRow };