@netu-si/netu-react-dsf-components 0.0.1

package/dist/esm/stories/Page.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{}>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/dist/index.d.ts

@@ -0,0 +1,344 @@
+import React, { FC, RefObject } from 'react';
+import { LinkProps } from 'react-router-dom';
+import { UseFormRegisterReturn } from 'react-hook-form';
+
+interface DSFBackLinkProps extends LinkProps {
+    onBackClick?: () => void;
+}
+declare const DSFBackLink: FC<DSFBackLinkProps>;
+
+interface DSFButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    /**
+     * Id of the button
+     */
+    id: string;
+    /**
+     * React Node to be displayed on the button, can be a string or any other react node
+     */
+    children: React.ReactNode;
+}
+declare const DSFButton: FC<DSFButtonProps>;
+
+interface DSFCheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * React Node to be displayed on the button, can be a string or any other react node
+     */
+    id?: string;
+    /**
+     * Hint text
+     */
+    hint?: React.ReactNode;
+    /**
+     * React Node to be displayed as label, can be a combination of compnents
+     */
+    children: React.ReactNode;
+    /**
+     * Custom style class to be added in the checkbox
+     */
+    className?: string;
+}
+declare const DSFCheckbox: React.ForwardRefExoticComponent<DSFCheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+interface DSFInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    id?: string;
+    error?: boolean;
+    visualSize?: number;
+    errorId?: string;
+    register?: (rules?: any) => void;
+}
+declare const DSFInput: React.ForwardRefExoticComponent<DSFInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface InputRefObject {
+    day: RefObject<HTMLInputElement>;
+    month: RefObject<HTMLInputElement>;
+    year: RefObject<HTMLInputElement>;
+}
+interface DSFDateInputProps {
+    /**
+     * ID of the component
+     */
+    id: string;
+    /**
+     * Input label
+     */
+    label: string;
+    /**
+     * Hint text
+     */
+    hint?: string;
+    /**
+     * Error text to be shown
+     */
+    errorText?: string;
+    /**
+     * Refs to the individual input elements for day, month, year
+     */
+    refs?: InputRefObject;
+    /**
+     * Overrides the labels for each input
+     */
+    labels?: {
+        day: string;
+        month: string;
+        year: string;
+    };
+    /**
+     * Native input attributes to be added to each date input
+     */
+    inputs?: {
+        day?: DSFInputProps;
+        month?: DSFInputProps;
+        year?: DSFInputProps;
+    };
+    /**
+     * Initialize each input with specific values
+     */
+    defaultValues?: {
+        day?: string;
+        month?: string;
+        year?: string;
+    };
+    /**
+     * General input props including event handlers and value for all inputs
+     */
+    inputProps?: {
+        /**
+         * Called when the day, month or year changes
+         */
+        onChange?: (e: React.ChangeEvent<HTMLInputElement>, key: string) => void;
+        /**
+         * Called when the day, month or year fields are blurred
+         * (does not get called when moving between inputs in the same datefield)
+         */
+        onBlur?: (e: React.FocusEvent<HTMLInputElement>, key: string) => void;
+        /**
+         * Called when the day, month or year fields are focussed
+         * (does not get called when moving between inputs in the same datefield)
+         */
+        onFocus?: (e: React.FocusEvent<HTMLInputElement>, key: string) => void;
+        /**
+         * When the form field is controlled, this sets the value of the day, month and year inputs
+         */
+        value?: {
+            day?: string;
+            month?: string;
+            year?: string;
+        };
+    };
+}
+declare const DSFDateInput: React.FC<DSFDateInputProps>;
+
+interface DSFErrorSummaryProps {
+    /** onClick function to scroll the target element into view */
+    onHandleErrorClick?: (targetName: string) => void;
+    /** Heading text */
+    heading?: string;
+    /** Array of errors with text and target element name to scroll into view when clicked */
+    errors?: {
+        targetName?: string;
+        text?: string;
+    }[];
+}
+declare const DSFErrorSummary: FC<DSFErrorSummaryProps>;
+
+interface DSFInputFieldProps {
+    label: string;
+    hint?: React.ReactNode;
+    underRadio?: boolean;
+    id: string;
+    inputProps?: DSFInputProps;
+    input?: DSFInputProps;
+    meta: {
+        error?: string | string[];
+        touched?: boolean;
+    };
+    visualSize?: number;
+    errorId?: string;
+    register?: UseFormRegisterReturn;
+}
+declare const DSFInputField: FC<DSFInputFieldProps>;
+
+interface DSFSelectProps {
+    label: string;
+    hint?: React.ReactNode;
+    id: string;
+    inputProps?: React.SelectHTMLAttributes<HTMLSelectElement>;
+    meta: {
+        error?: string | string[];
+        touched?: boolean;
+    };
+    children: React.ReactNode;
+}
+declare const DSFSelect: FC<DSFSelectProps>;
+
+interface DSFPanelProps {
+    /** Panel title text */
+    title: string;
+    /** Panel body text */
+    children?: React.ReactNode;
+}
+declare const DSFPanel: FC<DSFPanelProps>;
+
+interface DSFLabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
+    label: string;
+    htmlFor?: string;
+}
+declare const DSFLabel: FC<DSFLabelProps>;
+
+interface DSFErrorTextProps {
+    id?: string;
+    className?: string;
+    children: React.ReactNode;
+}
+declare const DSFErrorText: FC<DSFErrorTextProps>;
+
+interface DSFHintTextProps {
+    id?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+declare const DSFHintText: FC<DSFHintTextProps>;
+
+type NavMenuItem = {
+    label: string;
+    href: string;
+};
+interface DSFHeaderProps {
+    headerTitle: string;
+    showLang?: boolean;
+    menu?: NavMenuItem[];
+}
+declare const DSFHeader: {
+    ({ headerTitle, menu, showLang }: DSFHeaderProps): React.JSX.Element;
+    defaultProps: {
+        showLang: boolean;
+        menu: undefined;
+        headerTitle: string;
+    };
+    displayName: string;
+};
+
+interface DSFFooterProps {
+    privacyStatementUrl?: string;
+    cookiePolicyUrl?: string;
+    accessibilityStatementUrl?: string;
+}
+declare const DSFFooter: {
+    ({ privacyStatementUrl, cookiePolicyUrl, accessibilityStatementUrl }: DSFFooterProps): React.JSX.Element;
+    defaultProps: {
+        privacyStatementUrl: undefined;
+        cookiePolicyUrl: undefined;
+        accessibilityStatementUrl: undefined;
+    };
+    displayName: string;
+};
+
+interface DSFMainProps {
+    children: React.ReactNode;
+}
+declare const DSFMain: {
+    ({ children }: DSFMainProps): React.JSX.Element;
+    defaultProps: {
+        children: undefined;
+    };
+    displayName: string;
+};
+
+interface DSFBeforeMainContainerProps {
+    children: React.ReactNode;
+}
+declare const DSFBeforeMainContainer: {
+    ({ children }: DSFBeforeMainContainerProps): React.JSX.Element;
+    defaultProps: {
+        children: undefined;
+    };
+    displayName: string;
+};
+
+interface DSFBodyStartContainerProps {
+    children: React.ReactNode;
+}
+declare const DSFBodyStartContainer: {
+    ({ children }: DSFBodyStartContainerProps): React.JSX.Element;
+    defaultProps: {
+        children: undefined;
+    };
+    displayName: string;
+};
+
+interface DSFBodyEndContainerProps {
+    children?: React.ReactNode;
+}
+declare const DSFBodyEndContainer: {
+    ({ children }: DSFBodyEndContainerProps): React.JSX.Element;
+    defaultProps: {
+        children: undefined;
+    };
+    displayName: string;
+};
+
+interface DSFSkipLinkProps {
+    href?: string;
+    children?: React.ReactNode;
+}
+declare const DSFSkipLink: {
+    ({ href, children }: DSFSkipLinkProps): React.JSX.Element;
+    defaultProps: {
+        children: string;
+        href: string;
+    };
+    displayName: string;
+};
+
+interface DSFLoadingBoxProps {
+    loading: boolean;
+    spinnerColor?: string;
+    children?: React.ReactNode;
+}
+declare const DSFLoadingBox: React.FC<DSFLoadingBoxProps>;
+
+interface DSFFieldSetProps {
+    legend: React.ReactNode;
+    children?: React.ReactNode;
+}
+declare const DSFFieldSet: React.FC<DSFFieldSetProps>;
+
+interface DSFFormGroupProps {
+    label?: string;
+    name: string;
+    error?: string;
+    hint?: string;
+    children?: React.ReactNode;
+}
+declare const DSFFormGroup: React.FC<DSFFormGroupProps>;
+
+interface DSFRadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    hint?: React.ReactNode;
+    children: React.ReactNode;
+    collapsed?: {
+        node?: React.ReactNode;
+        className: string;
+    };
+    className?: string;
+    inline?: boolean;
+}
+declare const DSFRadio: React.ForwardRefExoticComponent<DSFRadioProps & React.RefAttributes<HTMLInputElement>>;
+
+interface TableColumn {
+    header: string;
+    type?: 'text' | 'number';
+}
+interface DSFTableProps {
+    columns: TableColumn[];
+    rowData: (string | number)[][];
+}
+declare const DSFTable: React.FC<DSFTableProps>;
+
+interface DSFUserSignOutProps {
+    fullName: string;
+    onClick?: () => void;
+    href: string;
+}
+declare const DSFUserSignOut: FC<DSFUserSignOutProps>;
+
+export { DSFBackLink, DSFBeforeMainContainer, DSFBodyEndContainer, DSFBodyStartContainer, DSFButton, DSFCheckbox, DSFDateInput, DSFDateInputProps, DSFErrorSummary, DSFErrorText, DSFFieldSet, DSFFooter, DSFFormGroup, DSFHeader, DSFHintText, DSFInput, DSFInputField, DSFLabel, DSFLoadingBox, DSFMain, DSFPanel, DSFRadio, DSFSelect, DSFSkipLink, DSFTable, DSFUserSignOut };