@obosbbl/grunnmuren-react 3.0.16 → 3.1.0

package/dist/__stories__/form-validation.stories.cjs

@@ -0,0 +1,488 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var grunnmurenIconsReact = require('@obosbbl/grunnmuren-icons-react');
+var cva = require('cva');
+var reactAria = require('react-aria');
+
+const translations = {
+    pending: {
+        nb: 'venter',
+        sv: 'väntar',
+        en: 'pending'
+    }};
+
+/**
+ * Returns the locale set in `<GrunnmurenProvider />`
+ */ function _useLocale() {
+    // a small wrapper around react-arias useLocale with a simpler return type with only the locales that we actually support
+    const locale = reactAriaComponents.useLocale();
+    return locale.locale;
+}
+
+/**
+ * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
+ */ const buttonVariants = cva.cva({
+    base: [
+        'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-colors duration-200 focus-visible:outline-focus-offset'
+    ],
+    variants: {
+        /**
+     * The variant of the button
+     * @default primary
+     */ variant: {
+            primary: 'no-underline',
+            // by using an inset box-shadow to emulate a border instead of an actual border, the button size will be equal regardless of the variant
+            secondary: 'border-2 border-current no-underline hover:border-transparent',
+            tertiary: 'underline hover:no-underline'
+        },
+        /**
+     * Adjusts the color of the button for usage on different backgrounds.
+     * @default blue
+     */ color: {
+            blue: 'focus-visible:outline-focus',
+            mint: 'focus-visible:outline-focus focus-visible:outline-mint',
+            white: 'focus-visible:outline-focus focus-visible:outline-white'
+        },
+        /**
+     * When the button is without text, but with a single icon.
+     * @default false
+     */ isIconOnly: {
+            true: 'p-2 [&>svg]:h-7 [&>svg]:w-7',
+            false: 'gap-2.5 px-4 py-2'
+        },
+        // Make the content of the button transparent to hide it's content, but keep the button width
+        isPending: {
+            true: '!text-transparent relative',
+            false: null
+        }
+    },
+    compoundVariants: [
+        {
+            color: 'blue',
+            variant: 'primary',
+            // Darken bg by 20% on hover. The color is manually crafted
+            className: 'bg-blue-dark text-white hover:bg-blue active:bg-[#0536A0] active:text-white [&_[role="progressbar"]]:text-white'
+        },
+        {
+            color: 'blue',
+            variant: 'secondary',
+            className: 'text-blue-dark hover:border-transparent hover:bg-blue hover:text-blue-dark hover:text-white active:bg-[#0536A0] [&:hover_[role="progressbar"]]:text-white [&_[role="progressbar"]]:text-blue-dark'
+        },
+        {
+            color: 'blue',
+            variant: 'tertiary',
+            className: '[&_[role="progressbar"]]:text-black'
+        },
+        {
+            color: 'mint',
+            variant: 'primary',
+            // Darken bg by 20% on hover. The color is manually crafted
+            className: 'bg-mint text-black hover:bg-[#8dd4bd] active:[#9ddac6] [&_[role="progressbar"]]:text-black'
+        },
+        {
+            color: 'mint',
+            variant: 'secondary',
+            className: 'text-mint hover:bg-mint hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-mint'
+        },
+        {
+            color: 'mint',
+            variant: 'tertiary',
+            className: 'text-mint [&_[role="progressbar"]]:text-mint'
+        },
+        {
+            color: 'white',
+            variant: 'primary',
+            className: 'bg-white text-black hover:bg-sky active:bg-sky-light [&_[role="progressbar"]]:text-black'
+        },
+        {
+            color: 'white',
+            variant: 'secondary',
+            className: 'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-white'
+        },
+        {
+            color: 'white',
+            variant: 'tertiary',
+            className: 'text-white [&_[role="progressbar"]]:text-white'
+        }
+    ],
+    defaultVariants: {
+        variant: 'primary',
+        color: 'blue',
+        isIconOnly: false,
+        isPending: false
+    }
+});
+const ButtonContext = /*#__PURE__*/ react.createContext({});
+function isLinkProps(props) {
+    return !!props.href;
+}
+function Button({ ref = null, ...props }) {
+    [props, ref] = reactAriaComponents.useContextProps(props, ref, ButtonContext);
+    const { children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
+    const className = buttonVariants({
+        className: props.className,
+        color,
+        isIconOnly,
+        variant,
+        isPending
+    });
+    const locale = _useLocale();
+    const { progressBarProps } = reactAria.useProgressBar({
+        isIndeterminate: true,
+        'aria-label': translations.pending[locale]
+    });
+    const children = isPending ? /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            _children,
+            /*#__PURE__*/ jsxRuntime.jsx(grunnmurenIconsReact.LoadingSpinner, {
+                className: "absolute m-auto motion-safe:animate-spin",
+                ...progressBarProps
+            })
+        ]
+    }) : _children;
+    return isLinkProps(restProps) ? /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Link, {
+        ...restProps,
+        className: className,
+        ref: ref,
+        children: children
+    }) : /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Button, {
+        ...restProps,
+        className: className,
+        isPending: isPending,
+        ref: ref,
+        children: children
+    });
+}
+
+const formField = cva.cx('group flex flex-col gap-2');
+const formFieldError = cva.cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
+const input = cva.cva({
+    base: [
+        // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
+        'bg-white',
+        // Use box-content to enable auto width based on number of characters (size)
+        // Setting min-height to prevent the input from collapsing in Safari
+        // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
+        'box-content min-h-6 py-2.5',
+        'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
+        // invalid styles
+        'group-data-invalid:ring-focus group-data-invalid:ring-red',
+        // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
+        'appearance-none'
+    ],
+    variants: {
+        // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
+        focusModifier: {
+            focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
+            visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
+        },
+        isGrouped: {
+            false: 'px-3',
+            true: '!ring-0 flex-1'
+        }
+    },
+    defaultVariants: {
+        focusModifier: 'focus',
+        isGrouped: false
+    }
+});
+const inputGroup = cva.cx([
+    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
+    'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
+]);
+({
+    popover: cva.cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
+    // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
+    listbox: cva.cx('max-h-[25rem] overflow-x-hidden text-sm outline-hidden'),
+    chevronIcon: cva.cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
+});
+
+function InputAddonDivider() {
+    return /*#__PURE__*/ jsxRuntime.jsx("span", {
+        className: "block h-6 w-px flex-none bg-black"
+    });
+}
+
+function Description(props) {
+    const { className, ...restProps } = props;
+    return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Text, {
+        ...restProps,
+        className: cva.cx(className, 'description'),
+        slot: "description"
+    });
+}
+
+function ErrorMessage(props) {
+    const { children, className, ...restProps } = props;
+    return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Text, {
+        ...restProps,
+        className: cva.cx(className, formFieldError),
+        slot: "errorMessage",
+        children: children
+    });
+}
+
+/**
+ * This component handles renders a custom error message (if provided), otherwise it falls back to the browser's native validation.
+ * In other words, this handles controlled and uncontrolled form errors.
+ */ function ErrorMessageOrFieldError({ errorMessage }) {
+    return errorMessage ? /*#__PURE__*/ jsxRuntime.jsx(ErrorMessage, {
+        children: errorMessage
+    }) : /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.FieldError, {
+        className: formFieldError
+    });
+}
+
+function Label(props) {
+    const { children, className, ...restProps } = props;
+    return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Label, {
+        className: cva.cx(className, 'font-semibold leading-7'),
+        ...restProps,
+        children: children
+    });
+}
+
+const inputVariants = cva.compose(input, cva.cva({
+    base: '',
+    variants: {
+        textAlign: {
+            right: 'text-right',
+            left: ''
+        },
+        autoWidth: {
+            true: 'max-w-fit',
+            false: ''
+        }
+    }
+}));
+function TextField(props) {
+    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, size, ref, ...restProps } = props;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = !!errorMessage || _isInvalid;
+    return /*#__PURE__*/ jsxRuntime.jsxs(reactAriaComponents.TextField, {
+        ...restProps,
+        className: cva.cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsxRuntime.jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsxRuntime.jsx(Description, {
+                children: description
+            }),
+            leftAddon || rightAddon ? /*#__PURE__*/ jsxRuntime.jsxs(reactAriaComponents.Group, {
+                className: cva.cx(inputGroup, {
+                    'w-fit': !!size
+                }),
+                children: [
+                    leftAddon,
+                    withAddonDivider && leftAddon && /*#__PURE__*/ jsxRuntime.jsx(InputAddonDivider, {}),
+                    /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Input, {
+                        className: inputVariants({
+                            textAlign,
+                            isGrouped: true,
+                            autoWidth: !!size
+                        }),
+                        ref: ref,
+                        size: size
+                    }),
+                    withAddonDivider && rightAddon && /*#__PURE__*/ jsxRuntime.jsx(InputAddonDivider, {}),
+                    rightAddon
+                ]
+            }) : /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Input, {
+                className: inputVariants({
+                    textAlign,
+                    autoWidth: !!size
+                }),
+                ref: ref,
+                size: size
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            })
+        ]
+    });
+}
+
+const meta = {
+    title: 'Form validation'
+};
+const emailErrorMessage = 'Vennligst bruk en .no e-postadresse';
+const Form = (props)=>{
+    const [errors, setErrors] = react.useState({});
+    const [isPending, setIsPending] = react.useState(false);
+    const handleSubmit = async (e)=>{
+        e.preventDefault();
+        // @ts-expect-error this works..
+        const data = Object.fromEntries(new FormData(e.target));
+        if (!props.serverValidate) {
+            alert(JSON.stringify(data));
+            return;
+        }
+        setIsPending(true);
+        // Fake a delay here, so it looks like we're submitting the data to a server
+        await new Promise((resolve)=>setTimeout(resolve, 2000));
+        setIsPending(false);
+        if (!data.email.endsWith('.no')) {
+            setErrors({
+                email: emailErrorMessage
+            });
+        } else {
+            setErrors({});
+            // Do this in a timeout, so the button's loading indicator stops spinning before the alert dialog is displayed
+            setTimeout(()=>{
+                alert(JSON.stringify(data));
+            }, 0);
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(reactAriaComponents.Form, {
+        onSubmit: handleSubmit,
+        className: "container-prose flex flex-col items-start gap-4",
+        validationErrors: errors,
+        children: [
+            props.children,
+            /*#__PURE__*/ jsxRuntime.jsx(Button, {
+                type: "submit",
+                isPending: isPending,
+                children: "Send inn"
+            })
+        ]
+    });
+};
+const nameProps = {
+    isRequired: true,
+    label: 'Navn',
+    name: 'name'
+};
+const emailProps = {
+    isRequired: true,
+    label: 'Epost',
+    type: 'email',
+    name: 'email',
+    description: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            "Må være en ",
+            /*#__PURE__*/ jsxRuntime.jsx("em", {
+                children: ".no"
+            }),
+            " e-postadresse"
+        ]
+    })
+};
+const NativeValidation = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(Form, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("p", {
+                children: "Dette eksemplet bruker kun browserens native validering av skjemaet. Det er dermed mulig å sende inn skjemaet uten at e-postadressen slutter på .no"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(TextField, {
+                ...nameProps
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(TextField, {
+                ...emailProps
+            })
+        ]
+    });
+};
+const RealtimeValidation = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(Form, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("p", {
+                children: [
+                    "Dette eksemplet bruker ",
+                    /*#__PURE__*/ jsxRuntime.jsx("code", {
+                        children: "validate"
+                    }),
+                    " prop-en på skjemaelementene for å implementere realtime validering av skjemaet på klienten. Dette er nyttig for å legge til ekstra validering, selv om skjemaet er",
+                    ' ',
+                    /*#__PURE__*/ jsxRuntime.jsx("em", {
+                        children: "uncontrolled"
+                    }),
+                    "."
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(TextField, {
+                ...nameProps
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(TextField, {
+                ...emailProps,
+                validate: (value)=>value.endsWith('.no') ? null : emailErrorMessage
+            })
+        ]
+    });
+};
+const ServerSideValidation = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(Form, {
+        serverValidate: true,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("p", {
+                children: [
+                    "Dette eksemplet bruker ",
+                    /*#__PURE__*/ jsxRuntime.jsx("code", {
+                        children: "validationErrors"
+                    }),
+                    " prop-en på selve skjemaet for å gjøre serverside validering av skjemadatene. Skjemainnsendinger burde alltid valideres på serveren, og det lar oss flytte mye av kompleksiteten til serveren i stedet for klienten, for eksempel dersom vi ønsker å bruke zod for å validere skjemadataene. Kan for eksempel integereres med React server actions."
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(TextField, {
+                ...nameProps
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(TextField, {
+                ...emailProps
+            })
+        ]
+    });
+};
+const ControlledValidation = ()=>{
+    const [name, setName] = react.useState('');
+    const [email, setEmail] = react.useState('');
+    let nameError = '';
+    if (!name) {
+        nameError = 'Fyll ut navn';
+    }
+    let emailError = '';
+    if (!email.endsWith('.no')) {
+        emailError = emailErrorMessage;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(Form, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("p", {
+                children: [
+                    "Dette eksemplet bruker ",
+                    /*#__PURE__*/ jsxRuntime.jsx("code", {
+                        children: "errorMesssage"
+                    }),
+                    " prop-en på skjemaelementene for å vise feilmeldinger og er nyttig for skjemaer som er såkalt ",
+                    /*#__PURE__*/ jsxRuntime.jsx("em", {
+                        children: "controlled"
+                    }),
+                    "."
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(TextField, {
+                ...nameProps,
+                value: name,
+                onChange: setName,
+                errorMessage: nameError,
+                validationBehavior: "aria"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(TextField, {
+                ...emailProps,
+                value: email,
+                onChange: setEmail,
+                errorMessage: emailError,
+                validationBehavior: "aria"
+            })
+        ]
+    });
+};
+
+exports.ControlledValidation = ControlledValidation;
+exports.NativeValidation = NativeValidation;
+exports.RealtimeValidation = RealtimeValidation;
+exports.ServerSideValidation = ServerSideValidation;
+exports.default = meta;

package/dist/__stories__/form-validation.stories.d.cts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Meta } from '@storybook/react-vite';
+
+declare const meta: Meta;
+
+declare const NativeValidation: () => react_jsx_runtime.JSX.Element;
+declare const RealtimeValidation: () => react_jsx_runtime.JSX.Element;
+declare const ServerSideValidation: () => react_jsx_runtime.JSX.Element;
+declare const ControlledValidation: () => react_jsx_runtime.JSX.Element;
+
+export { ControlledValidation, NativeValidation, RealtimeValidation, ServerSideValidation, meta as default };

package/dist/__stories__/form-validation.stories.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Meta } from '@storybook/react-vite';
+
+declare const meta: Meta;
+
+declare const NativeValidation: () => react_jsx_runtime.JSX.Element;
+declare const RealtimeValidation: () => react_jsx_runtime.JSX.Element;
+declare const ServerSideValidation: () => react_jsx_runtime.JSX.Element;
+declare const ControlledValidation: () => react_jsx_runtime.JSX.Element;
+
+export { ControlledValidation, NativeValidation, RealtimeValidation, ServerSideValidation, meta as default };