@trackunit/react-form-wizard 0.0.2

package/README.md

@@ -0,0 +1,25 @@
+> **⚠️ Beta**
+>
+> This is a beta version and subject to change without notice.
+
+# Trackunit react-form-wizard
+
+The `@trackunit/react-form-wizard` package is the home of Trackunits public react form wizard components.
+
+This library is exposed publicly for use in the the Trackunit [Iris App SDK](https://www.npmjs.com/package/@trackunit/iris-app).
+
+To browse all avaliable components visit our [Public Storybook](https://apps.iris.trackunit.com/storybook/).
+
+For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
+
+## Development
+
+At this point this library is only developed by Trackunit Employees.  
+For development related information see the [development readme](https://github.com/Trackunit/manager/blob/master/libs/react/components/DEVELOPMENT.md).
+
+## Trackunit
+
+This package was developed by Trackunit ApS.
+Trackunit is the leading SaaS-based IoT solution for the construction industry, offering an ecosystem of hardware, fleet management software & telematics.
+
+![The Trackunit logo](https://trackunit.com/wp-content/uploads/2022/03/top-logo.svg)

package/index.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./src/index";

package/index.cjs.js

@@ -0,0 +1,339 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
+var react = require('react');
+var reactRouterDom = require('react-router-dom');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
+var reactComponents = require('@trackunit/react-components');
+var zod = require('@hookform/resolvers/zod');
+var reactHookForm = require('react-hook-form');
+
+var defaultTranslations = {
+	
+};
+
+/** The translation namespace for this library */
+const namespace = "react.form-wizard";
+/**
+ * The TranslationResource for this Library.
+ * Holds lazy loaded imports for all languages supported by the library.
+ *
+ * This is used to register the translations for this library before initializing i18next.
+ */
+const translations = {
+    ns: namespace,
+    default: defaultTranslations,
+    languages: {
+        de: () => Promise.resolve().then(function () { return require('./translation.cjs.js'); }),
+        da: () => Promise.resolve().then(function () { return require('./translation.cjs2.js'); }),
+        cs: () => Promise.resolve().then(function () { return require('./translation.cjs3.js'); }),
+        nl: () => Promise.resolve().then(function () { return require('./translation.cjs4.js'); }),
+        fr: () => Promise.resolve().then(function () { return require('./translation.cjs5.js'); }),
+        fi: () => Promise.resolve().then(function () { return require('./translation.cjs6.js'); }),
+        hu: () => Promise.resolve().then(function () { return require('./translation.cjs7.js'); }),
+        it: () => Promise.resolve().then(function () { return require('./translation.cjs8.js'); }),
+        nb: () => Promise.resolve().then(function () { return require('./translation.cjs9.js'); }),
+        pl: () => Promise.resolve().then(function () { return require('./translation.cjs10.js'); }),
+        pt: () => Promise.resolve().then(function () { return require('./translation.cjs11.js'); }),
+        ru: () => Promise.resolve().then(function () { return require('./translation.cjs12.js'); }),
+        ro: () => Promise.resolve().then(function () { return require('./translation.cjs13.js'); }),
+        es: () => Promise.resolve().then(function () { return require('./translation.cjs14.js'); }),
+        sv: () => Promise.resolve().then(function () { return require('./translation.cjs15.js'); }),
+        ja: () => Promise.resolve().then(function () { return require('./translation.cjs16.js'); }),
+        th: () => Promise.resolve().then(function () { return require('./translation.cjs17.js'); }),
+    },
+};
+/**
+ * Registers the translations for this library
+ */
+const setupLibraryTranslations = () => {
+    i18nLibraryTranslation.registerTranslations(translations);
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+const cvaFillSection = cssClassVarianceUtilities.cvaMerge(["flex-grow", "p-0"]);
+const cvaSidebar = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "flex-col",
+    "overflow-x-hidden",
+    "h-full",
+    "gap-2",
+    "p-responsive-space",
+    "bg-slate-50",
+    "border-r",
+    "border-slate-200",
+]);
+
+/**
+ * Displays the sidebar with steps for the wizard.
+ * Prefer using the FormWizard component instead of this directly.
+ */
+function FormWizardSidebar({ dataTestId, children, className }) {
+    return (jsxRuntime.jsxs("aside", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [children, jsxRuntime.jsx("div", { className: cvaFillSection() })] }));
+}
+
+const cvaFormWizardSidebarStep = cssClassVarianceUtilities.cvaMerge(["p-2", "rounded-md", "hover:bg-slate-200", "transition"], {
+    variants: {
+        state: {
+            ready: "",
+            active: "text-primary-600 bg-slate-100",
+            done: "text-success-600",
+            invalid: "text-warning-600",
+            disabled: "pointer-events-none cursor-not-allowed opacity-50 hover:bg-transparent",
+        },
+    },
+});
+const cvaSectionHeaderContainer = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "gap-2"], {
+    variants: {
+        cursor: {
+            withCursor: "hover:cursor-pointer",
+            default: "",
+        },
+    },
+    defaultVariants: {
+        cursor: "default",
+    },
+});
+const cvaHeader = cssClassVarianceUtilities.cvaMerge(["text-md"]);
+const cvaSubtitle = cssClassVarianceUtilities.cvaMerge(["text-xs", "text-gray-500"]);
+const cvaStepNumber = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "text-xs", "items-center", "m-0.5", "w-[20px]", "h-[20px]", "bg-gray-100", "rounded-full"], {
+    variants: {
+        state: {
+            ready: "",
+            active: "bg-primary-600 text-white",
+            done: "",
+            invalid: "bg-warning-500 text-white",
+            disabled: "",
+        },
+    },
+});
+const cvaTitleAndDescription = cssClassVarianceUtilities.cvaMerge(["justify-center", "flex-1", "flex-col", "hidden", "@3xl:flex"]); //use same container breakpoint as cvaWizardContainer so it collapses at the same time
+
+const getStateIcon = (state) => {
+    switch (state) {
+        case "done":
+            return jsxRuntime.jsx(reactComponents.Icon, { color: "success", name: "CheckCircle", type: "solid" });
+        case "invalid":
+            return jsxRuntime.jsx(reactComponents.Icon, { color: "warning", name: "ExclamationCircle", type: "solid" });
+        default:
+            return null;
+    }
+};
+/**
+ * A sidebar step component used by the FormWizard component to render each step.
+ * This component is generally used internally by the FormWizard component.
+ */
+const FormWizardSidebarStep = ({ stepNumber, state, title, subTitle, path, dataTestId, }) => {
+    const stateIcon = getStateIcon(state);
+    return (jsxRuntime.jsx(reactRouterDom.NavLink, { className: cvaFormWizardSidebarStep({ state }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, to: path, children: jsxRuntime.jsxs("div", { className: cvaSectionHeaderContainer(), children: [jsxRuntime.jsx("div", { children: stateIcon !== null && stateIcon !== void 0 ? stateIcon : jsxRuntime.jsx("span", { className: cvaStepNumber({ state }), children: stepNumber }) }), jsxRuntime.jsxs("div", { className: cvaTitleAndDescription(), children: [jsxRuntime.jsx("h1", { className: cvaHeader(), children: title }), subTitle ? jsxRuntime.jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
+};
+
+const cvaFooterContainer = cssClassVarianceUtilities.cvaMerge([
+    "flex-grow-0",
+    "flex",
+    "justify-between",
+    "items-center",
+    "h-min",
+    "p-responsive-space",
+    "border-t",
+    "gap-responsive-space",
+]);
+const cvaNavigationContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-responsive-space"]);
+
+/**
+ * The footer component for the FormWizard.
+ * In most cases you should not be using this component directly, but rather use the FormWizard component.
+ */
+const FormWizardFooter = ({ onBack, onCancel, isValid, primaryActionLabel = "Next" }) => {
+    return (jsxRuntime.jsxs("div", { className: cvaFooterContainer(), children: [jsxRuntime.jsx(reactComponents.Button, { dataTestId: "wizard-cancel", onClick: onCancel, variant: "ghost-neutral", children: "Cancel" }), jsxRuntime.jsxs("div", { className: cvaNavigationContainer(), children: [onBack ? (jsxRuntime.jsx(reactComponents.Button, { dataTestId: "wizard-back", onClick: onBack, variant: "secondary", children: "Back" })) : null, jsxRuntime.jsx(reactComponents.Button, { dataTestId: "wizard-next", disabled: !isValid, type: "submit", children: primaryActionLabel ? primaryActionLabel : "Next" })] })] }));
+};
+
+const cvaFormWizardHeader = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "flex-col",
+    "p-responsive-space",
+    "border-b-slate-300",
+    "border-b-2",
+]);
+
+/**
+ * The header component for the FormWizard.
+ * In most cases you should not be using this component directly, but rather use the FormWizard component.
+ */
+const FormWizardHeader = ({ title, description, className, dataTestId }) => {
+    return (jsxRuntime.jsxs("div", { className: cvaFormWizardHeader({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Heading, { variant: "primary", children: title }), description ? description : null] }));
+};
+
+const cvaFormWizardComponentContainer = cssClassVarianceUtilities.cvaMerge(["p-responsive-space"]);
+const cvaFormWizardComponentStepForm = cssClassVarianceUtilities.cvaMerge(["grid-rows-min-fr-min", "grid", "h-full"]);
+
+/**
+ * A wrapper component used by the FormWizard component to render each step.
+ * In most cases you should not be using this component directly, but rather use the FormWizard component.
+ */
+const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, component, formSchema, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, setStepStates, basePath, }) => {
+    const navigate = reactRouterDom.useNavigate();
+    const [submitHandlerInternal, setSubmitHandlerInternal] = react.useState(null);
+    const form = reactHookForm.useForm({ resolver: zod.zodResolver(formSchema), mode: "all" });
+    const fullForm = reactHookForm.useForm({
+        resolver: zod.zodResolver(fullFormSchema),
+        mode: "all",
+        defaultValues: fullFormState,
+    });
+    react.useEffect(() => {
+        setStepStates(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: form.formState.isValid ? "valid" : "invalid" })));
+    }, [form.formState.isValid, setStepStates, stepKey]);
+    const isLastStep = nextStepPath === null;
+    const handleCancel = react.useCallback(() => {
+        // TODO: Get previous path from before wizard the wizard was started
+        return onCancel ? onCancel() : navigate(basePath);
+    }, [onCancel, navigate, basePath]);
+    const setSubmitHandler = react.useCallback(callback => {
+        setSubmitHandlerInternal(() => callback);
+    }, [setSubmitHandlerInternal]);
+    return (jsxRuntime.jsxs("form", { className: cvaFormWizardComponentStepForm(), onSubmit: form.handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
+            //? This state is not updated for the submit handler below; therefore, there is duplication.
+            setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: data })));
+            if (isLastStep) {
+                //? This state is not updated for the submit handler below; therefore, there is duplication.
+                submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data }));
+            }
+            else if (nextStepPath) {
+                navigate(basePath + nextStepPath);
+            }
+        })), children: [jsxRuntime.jsx(FormWizardHeader, { title, description }), jsxRuntime.jsx("div", { className: cvaFormWizardComponentContainer(), children: component({
+                    form,
+                    fullForm,
+                    setSubmitHandler: isLastStep ? setSubmitHandler : null,
+                }) }), jsxRuntime.jsx(FormWizardFooter, { onBack: previousStepPath ? () => navigate(basePath + previousStepPath) : null,
+                primaryActionLabel: isLastStep ? lastStepPrimaryActionLabel : undefined,
+                onCancel: handleCancel,
+                isValid: form.formState.isValid })] }, String(stepKey)));
+};
+
+const cvaFormWizardContainer = cssClassVarianceUtilities.cvaMerge(["h-full"]);
+const cvaFormWizardLayout = cssClassVarianceUtilities.cvaMerge([
+    "grid",
+    "h-full",
+    "grid-cols-min-fr",
+    "@3xl:grid-cols-[240px_1fr]",
+    "@4xl:grid-cols-[320px_1fr]",
+]);
+const cvaStepContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "grid", "bg-white", "overflow-hidden"]);
+
+/**
+ * The FormWizard component is used for forms in multiple steps.
+ * Use the useFormWizard hook to generate the props for this component.
+ */
+const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
+    var _a;
+    const location = reactRouterDom.useLocation();
+    const [stepStates, setStepStates] = react.useState({});
+    const [fullFormState, setFullFormState] = react.useState({});
+    const currentVisibleStepKey = (_a = Object.entries(steps).find(([, { path }]) => location.pathname === path)) === null || _a === void 0 ? void 0 : _a[0];
+    const currentVisibleStepIndex = Object.keys(steps).findIndex(key => key === currentVisibleStepKey);
+    return (jsxRuntime.jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaFormWizardLayout(), children: [jsxRuntime.jsx(FormWizardSidebar, { children: Object.entries(steps).map(([key, { path, title, sidebarDescription }], index) => {
+                        const isPastStep = index < currentVisibleStepIndex;
+                        const isFutureStep = index > currentVisibleStepIndex;
+                        const isCurrentStep = key === currentVisibleStepKey;
+                        const stepState = () => {
+                            if (isCurrentStep) {
+                                return "active";
+                            }
+                            if (isPastStep) {
+                                return stepStates[key] === "valid" ? "done" : "invalid";
+                            }
+                            if (isFutureStep) {
+                                return Object.keys(steps)
+                                    .filter((_, stepIndex) => stepIndex < index)
+                                    .every((pastStepKey) => stepStates[pastStepKey] === "valid")
+                                    ? "ready"
+                                    : "disabled";
+                            }
+                            return "ready";
+                        };
+                        return (jsxRuntime.jsx(FormWizardSidebarStep, { key: String(key),
+                            state: stepState(),
+                            stepNumber: index + 1,
+                            title,
+                            path,
+                            subTitle: sidebarDescription }));
+                    }) }), jsxRuntime.jsx("div", { className: cvaStepContainer(), children: jsxRuntime.jsx(reactRouterDom.Routes, { children: Object.entries(steps).map((_a, index) => {
+                            var _b, _c, _d, _e;
+                            var [stepKey, _f] = _a, { path } = _f, rest = __rest(_f, ["path"]);
+                            return (jsxRuntime.jsx(reactRouterDom.Route, { index: true, path, key: stepKey, element: jsxRuntime.jsx(FormWizardStepWrapper, Object.assign({}, rest, { basePath,
+                                    stepKey,
+                                    onCancel,
+                                    fullFormState,
+                                    setFullFormState,
+                                    setStepStates,
+                                    fullFormSchema,
+                                    lastStepPrimaryActionLabel,
+                                    nextStepPath: (_c = (_b = Object.values(steps)[index + 1]) === null || _b === void 0 ? void 0 : _b.path) !== null && _c !== void 0 ? _c : null,
+                                    previousStepPath: (_e = (_d = Object.values(steps)[index - 1]) === null || _d === void 0 ? void 0 : _d.path) !== null && _e !== void 0 ? _e : null })) }));
+                        }) }) })] }) }));
+};
+
+/**
+ *
+ */
+const useFormWizard = (props) => {
+    return react.useMemo(() => (Object.assign(Object.assign({}, props), { 
+        // Object.fromEntries is not super type safe... This is a workaround...
+        // eslint-disable-next-line local-rules/no-typescript-assertion
+        steps: Object.fromEntries(Object.entries(props.steps).map(([key, step]) => [
+            key,
+            Object.assign(Object.assign({}, step), { formSchema: props.fullFormSchema.shape[key] }),
+        ])) })), [props]);
+};
+
+/*
+ * ----------------------------
+ * | SETUP TRANSLATIONS START |
+ * ----------------------------
+ * This import and function call is needed to register translations for this library.
+ * Do not remove this if this library has translations.
+ */
+setupLibraryTranslations();
+
+exports.FormWizard = FormWizard;
+exports.useFormWizard = useFormWizard;

package/index.esm.js

@@ -0,0 +1,334 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { registerTranslations } from '@trackunit/i18n-library-translation';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { NavLink, useNavigate, useLocation, Routes, Route } from 'react-router-dom';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { Icon, Button, Heading } from '@trackunit/react-components';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+
+var defaultTranslations = {
+	
+};
+
+/** The translation namespace for this library */
+const namespace = "react.form-wizard";
+/**
+ * The TranslationResource for this Library.
+ * Holds lazy loaded imports for all languages supported by the library.
+ *
+ * This is used to register the translations for this library before initializing i18next.
+ */
+const translations = {
+    ns: namespace,
+    default: defaultTranslations,
+    languages: {
+        de: () => import('./translation.esm.js'),
+        da: () => import('./translation.esm2.js'),
+        cs: () => import('./translation.esm3.js'),
+        nl: () => import('./translation.esm4.js'),
+        fr: () => import('./translation.esm5.js'),
+        fi: () => import('./translation.esm6.js'),
+        hu: () => import('./translation.esm7.js'),
+        it: () => import('./translation.esm8.js'),
+        nb: () => import('./translation.esm9.js'),
+        pl: () => import('./translation.esm10.js'),
+        pt: () => import('./translation.esm11.js'),
+        ru: () => import('./translation.esm12.js'),
+        ro: () => import('./translation.esm13.js'),
+        es: () => import('./translation.esm14.js'),
+        sv: () => import('./translation.esm15.js'),
+        ja: () => import('./translation.esm16.js'),
+        th: () => import('./translation.esm17.js'),
+    },
+};
+/**
+ * Registers the translations for this library
+ */
+const setupLibraryTranslations = () => {
+    registerTranslations(translations);
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+const cvaFillSection = cvaMerge(["flex-grow", "p-0"]);
+const cvaSidebar = cvaMerge([
+    "flex",
+    "flex-col",
+    "overflow-x-hidden",
+    "h-full",
+    "gap-2",
+    "p-responsive-space",
+    "bg-slate-50",
+    "border-r",
+    "border-slate-200",
+]);
+
+/**
+ * Displays the sidebar with steps for the wizard.
+ * Prefer using the FormWizard component instead of this directly.
+ */
+function FormWizardSidebar({ dataTestId, children, className }) {
+    return (jsxs("aside", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [children, jsx("div", { className: cvaFillSection() })] }));
+}
+
+const cvaFormWizardSidebarStep = cvaMerge(["p-2", "rounded-md", "hover:bg-slate-200", "transition"], {
+    variants: {
+        state: {
+            ready: "",
+            active: "text-primary-600 bg-slate-100",
+            done: "text-success-600",
+            invalid: "text-warning-600",
+            disabled: "pointer-events-none cursor-not-allowed opacity-50 hover:bg-transparent",
+        },
+    },
+});
+const cvaSectionHeaderContainer = cvaMerge(["flex", "justify-between", "gap-2"], {
+    variants: {
+        cursor: {
+            withCursor: "hover:cursor-pointer",
+            default: "",
+        },
+    },
+    defaultVariants: {
+        cursor: "default",
+    },
+});
+const cvaHeader = cvaMerge(["text-md"]);
+const cvaSubtitle = cvaMerge(["text-xs", "text-gray-500"]);
+const cvaStepNumber = cvaMerge(["flex", "justify-center", "text-xs", "items-center", "m-0.5", "w-[20px]", "h-[20px]", "bg-gray-100", "rounded-full"], {
+    variants: {
+        state: {
+            ready: "",
+            active: "bg-primary-600 text-white",
+            done: "",
+            invalid: "bg-warning-500 text-white",
+            disabled: "",
+        },
+    },
+});
+const cvaTitleAndDescription = cvaMerge(["justify-center", "flex-1", "flex-col", "hidden", "@3xl:flex"]); //use same container breakpoint as cvaWizardContainer so it collapses at the same time
+
+const getStateIcon = (state) => {
+    switch (state) {
+        case "done":
+            return jsx(Icon, { color: "success", name: "CheckCircle", type: "solid" });
+        case "invalid":
+            return jsx(Icon, { color: "warning", name: "ExclamationCircle", type: "solid" });
+        default:
+            return null;
+    }
+};
+/**
+ * A sidebar step component used by the FormWizard component to render each step.
+ * This component is generally used internally by the FormWizard component.
+ */
+const FormWizardSidebarStep = ({ stepNumber, state, title, subTitle, path, dataTestId, }) => {
+    const stateIcon = getStateIcon(state);
+    return (jsx(NavLink, { className: cvaFormWizardSidebarStep({ state }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : `form-wizard-sidebar-step-${path}`, to: path, children: jsxs("div", { className: cvaSectionHeaderContainer(), children: [jsx("div", { children: stateIcon !== null && stateIcon !== void 0 ? stateIcon : jsx("span", { className: cvaStepNumber({ state }), children: stepNumber }) }), jsxs("div", { className: cvaTitleAndDescription(), children: [jsx("h1", { className: cvaHeader(), children: title }), subTitle ? jsx("p", { className: cvaSubtitle(), children: subTitle }) : null] })] }) }));
+};
+
+const cvaFooterContainer = cvaMerge([
+    "flex-grow-0",
+    "flex",
+    "justify-between",
+    "items-center",
+    "h-min",
+    "p-responsive-space",
+    "border-t",
+    "gap-responsive-space",
+]);
+const cvaNavigationContainer = cvaMerge(["flex", "gap-responsive-space"]);
+
+/**
+ * The footer component for the FormWizard.
+ * In most cases you should not be using this component directly, but rather use the FormWizard component.
+ */
+const FormWizardFooter = ({ onBack, onCancel, isValid, primaryActionLabel = "Next" }) => {
+    return (jsxs("div", { className: cvaFooterContainer(), children: [jsx(Button, { dataTestId: "wizard-cancel", onClick: onCancel, variant: "ghost-neutral", children: "Cancel" }), jsxs("div", { className: cvaNavigationContainer(), children: [onBack ? (jsx(Button, { dataTestId: "wizard-back", onClick: onBack, variant: "secondary", children: "Back" })) : null, jsx(Button, { dataTestId: "wizard-next", disabled: !isValid, type: "submit", children: primaryActionLabel ? primaryActionLabel : "Next" })] })] }));
+};
+
+const cvaFormWizardHeader = cvaMerge([
+    "flex",
+    "flex-col",
+    "p-responsive-space",
+    "border-b-slate-300",
+    "border-b-2",
+]);
+
+/**
+ * The header component for the FormWizard.
+ * In most cases you should not be using this component directly, but rather use the FormWizard component.
+ */
+const FormWizardHeader = ({ title, description, className, dataTestId }) => {
+    return (jsxs("div", { className: cvaFormWizardHeader({ className }), "data-testid": dataTestId, children: [jsx(Heading, { variant: "primary", children: title }), description ? description : null] }));
+};
+
+const cvaFormWizardComponentContainer = cvaMerge(["p-responsive-space"]);
+const cvaFormWizardComponentStepForm = cvaMerge(["grid-rows-min-fr-min", "grid", "h-full"]);
+
+/**
+ * A wrapper component used by the FormWizard component to render each step.
+ * In most cases you should not be using this component directly, but rather use the FormWizard component.
+ */
+const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, component, formSchema, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, setStepStates, basePath, }) => {
+    const navigate = useNavigate();
+    const [submitHandlerInternal, setSubmitHandlerInternal] = useState(null);
+    const form = useForm({ resolver: zodResolver(formSchema), mode: "all" });
+    const fullForm = useForm({
+        resolver: zodResolver(fullFormSchema),
+        mode: "all",
+        defaultValues: fullFormState,
+    });
+    useEffect(() => {
+        setStepStates(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: form.formState.isValid ? "valid" : "invalid" })));
+    }, [form.formState.isValid, setStepStates, stepKey]);
+    const isLastStep = nextStepPath === null;
+    const handleCancel = useCallback(() => {
+        // TODO: Get previous path from before wizard the wizard was started
+        return onCancel ? onCancel() : navigate(basePath);
+    }, [onCancel, navigate, basePath]);
+    const setSubmitHandler = useCallback(callback => {
+        setSubmitHandlerInternal(() => callback);
+    }, [setSubmitHandlerInternal]);
+    return (jsxs("form", { className: cvaFormWizardComponentStepForm(), onSubmit: form.handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
+            //? This state is not updated for the submit handler below; therefore, there is duplication.
+            setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: data })));
+            if (isLastStep) {
+                //? This state is not updated for the submit handler below; therefore, there is duplication.
+                submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(Object.assign(Object.assign({}, fullFormState), { [stepKey]: data }));
+            }
+            else if (nextStepPath) {
+                navigate(basePath + nextStepPath);
+            }
+        })), children: [jsx(FormWizardHeader, { title, description }), jsx("div", { className: cvaFormWizardComponentContainer(), children: component({
+                    form,
+                    fullForm,
+                    setSubmitHandler: isLastStep ? setSubmitHandler : null,
+                }) }), jsx(FormWizardFooter, { onBack: previousStepPath ? () => navigate(basePath + previousStepPath) : null,
+                primaryActionLabel: isLastStep ? lastStepPrimaryActionLabel : undefined,
+                onCancel: handleCancel,
+                isValid: form.formState.isValid })] }, String(stepKey)));
+};
+
+const cvaFormWizardContainer = cvaMerge(["h-full"]);
+const cvaFormWizardLayout = cvaMerge([
+    "grid",
+    "h-full",
+    "grid-cols-min-fr",
+    "@3xl:grid-cols-[240px_1fr]",
+    "@4xl:grid-cols-[320px_1fr]",
+]);
+const cvaStepContainer = cvaMerge(["h-full", "grid", "bg-white", "overflow-hidden"]);
+
+/**
+ * The FormWizard component is used for forms in multiple steps.
+ * Use the useFormWizard hook to generate the props for this component.
+ */
+const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
+    var _a;
+    const location = useLocation();
+    const [stepStates, setStepStates] = useState({});
+    const [fullFormState, setFullFormState] = useState({});
+    const currentVisibleStepKey = (_a = Object.entries(steps).find(([, { path }]) => location.pathname === path)) === null || _a === void 0 ? void 0 : _a[0];
+    const currentVisibleStepIndex = Object.keys(steps).findIndex(key => key === currentVisibleStepKey);
+    return (jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxs("div", { className: cvaFormWizardLayout(), children: [jsx(FormWizardSidebar, { children: Object.entries(steps).map(([key, { path, title, sidebarDescription }], index) => {
+                        const isPastStep = index < currentVisibleStepIndex;
+                        const isFutureStep = index > currentVisibleStepIndex;
+                        const isCurrentStep = key === currentVisibleStepKey;
+                        const stepState = () => {
+                            if (isCurrentStep) {
+                                return "active";
+                            }
+                            if (isPastStep) {
+                                return stepStates[key] === "valid" ? "done" : "invalid";
+                            }
+                            if (isFutureStep) {
+                                return Object.keys(steps)
+                                    .filter((_, stepIndex) => stepIndex < index)
+                                    .every((pastStepKey) => stepStates[pastStepKey] === "valid")
+                                    ? "ready"
+                                    : "disabled";
+                            }
+                            return "ready";
+                        };
+                        return (jsx(FormWizardSidebarStep, { key: String(key),
+                            state: stepState(),
+                            stepNumber: index + 1,
+                            title,
+                            path,
+                            subTitle: sidebarDescription }));
+                    }) }), jsx("div", { className: cvaStepContainer(), children: jsx(Routes, { children: Object.entries(steps).map((_a, index) => {
+                            var _b, _c, _d, _e;
+                            var [stepKey, _f] = _a, { path } = _f, rest = __rest(_f, ["path"]);
+                            return (jsx(Route, { index: true, path, key: stepKey, element: jsx(FormWizardStepWrapper, Object.assign({}, rest, { basePath,
+                                    stepKey,
+                                    onCancel,
+                                    fullFormState,
+                                    setFullFormState,
+                                    setStepStates,
+                                    fullFormSchema,
+                                    lastStepPrimaryActionLabel,
+                                    nextStepPath: (_c = (_b = Object.values(steps)[index + 1]) === null || _b === void 0 ? void 0 : _b.path) !== null && _c !== void 0 ? _c : null,
+                                    previousStepPath: (_e = (_d = Object.values(steps)[index - 1]) === null || _d === void 0 ? void 0 : _d.path) !== null && _e !== void 0 ? _e : null })) }));
+                        }) }) })] }) }));
+};
+
+/**
+ *
+ */
+const useFormWizard = (props) => {
+    return useMemo(() => (Object.assign(Object.assign({}, props), { 
+        // Object.fromEntries is not super type safe... This is a workaround...
+        // eslint-disable-next-line local-rules/no-typescript-assertion
+        steps: Object.fromEntries(Object.entries(props.steps).map(([key, step]) => [
+            key,
+            Object.assign(Object.assign({}, step), { formSchema: props.fullFormSchema.shape[key] }),
+        ])) })), [props]);
+};
+
+/*
+ * ----------------------------
+ * | SETUP TRANSLATIONS START |
+ * ----------------------------
+ * This import and function call is needed to register translations for this library.
+ * Do not remove this if this library has translations.
+ */
+setupLibraryTranslations();
+
+export { FormWizard, useFormWizard };

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@trackunit/react-form-wizard",
+  "version": "0.0.2",
+  "repository": "https://github.com/Trackunit/manager",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-router-dom": "6.18.0",
+    "zod": "3.22.4",
+    "@trackunit/css-class-variance-utilities": "*",
+    "@trackunit/react-components": "*",
+    "@hookform/resolvers": "^3.3.4",
+    "react-hook-form": "7.40.0",
+    "@trackunit/i18n-library-translation": "*"
+  },
+  "engines": {
+    "node": ">=18.x",
+    "yarn": "3.7.0"
+  },
+  "module": "./index.esm.js",
+  "main": "./index.cjs.js"
+}

package/src/FormWizard/FormWizard.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ZodTypeAny } from "zod";
+import { ComponentStepDefinitions, FromWizardComponentProps } from "./useFormWizard";
+/**
+ * The FormWizard component is used for forms in multiple steps.
+ * Use the useFormWizard hook to generate the props for this component.
+ */
+export declare const FormWizard: <TFullSchema extends ZodTypeAny, TComponentStepDefinitions extends ComponentStepDefinitions<TFullSchema>>({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }: FromWizardComponentProps<TFullSchema, TComponentStepDefinitions>) => JSX.Element;

package/src/FormWizard/FormWizard.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const cvaFormWizardContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaFormWizardLayout: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaStepContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/FormWizard/useFormWizard.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+import { UseFormReturn } from "react-hook-form";
+import { AnyZodObject, ZodTypeAny, z } from "zod";
+export type StepState = "active" | "done" | "invalid" | "disabled" | "ready";
+export type StepDefinitions<TFullSchema extends ZodTypeAny> = {
+    [KStepKey in keyof z.infer<TFullSchema>]: DefinedStep<z.infer<TFullSchema>[KStepKey], z.infer<TFullSchema>>;
+};
+export type StepComponentPropsInner<TStepSchema extends ZodTypeAny, TFullSchema extends ZodTypeAny> = {
+    form: UseFormReturn<TStepSchema>;
+    fullForm: UseFormReturn<TFullSchema>;
+    setSubmitHandler: ((onFinalSubmit: (fullFormState: TFullSchema) => void) => void) | null;
+};
+export interface SimpleStepProps {
+    title: string;
+    description: string;
+    sidebarDescription?: string;
+    path: string;
+}
+interface DefinedStep<TStepSchema extends ZodTypeAny, TFullSchema extends ZodTypeAny> extends SimpleStepProps {
+    component: (props: StepComponentPropsInner<TStepSchema, TFullSchema>) => React.ReactNode;
+}
+export type StepComponentProps<TFullSchemaHook extends () => ZodTypeAny, TStepKey extends keyof z.infer<ReturnType<TFullSchemaHook>>> = StepComponentPropsInner<z.infer<ReturnType<TFullSchemaHook>>[TStepKey], z.infer<ReturnType<TFullSchemaHook>>>;
+export type ComponentStepDefinitions<TFullSchema extends ZodTypeAny> = {
+    [KStepKey in keyof z.infer<TFullSchema>]: DefinedComponentStep<z.infer<TFullSchema>[KStepKey], TFullSchema>;
+};
+interface DefinedComponentStep<TStepSchema extends ZodTypeAny, TFullSchema extends ZodTypeAny> extends DefinedStep<TStepSchema, TFullSchema> {
+    formSchema: TStepSchema;
+}
+export interface FromWizardComponentProps<TFullSchema extends ZodTypeAny, TComponentStepDefinitions extends ComponentStepDefinitions<TFullSchema>> extends Omit<UseFormWizardProps<TFullSchema, TComponentStepDefinitions>, "steps">, CommonProps {
+    steps: TComponentStepDefinitions;
+}
+export interface UseFormWizardProps<TFullSchema extends ZodTypeAny, TStepDefinitions extends StepDefinitions<TFullSchema>> {
+    fullFormSchema: TFullSchema;
+    lastStepPrimaryActionLabel: string;
+    onCancel?: () => void;
+    basePath: string;
+    steps: TStepDefinitions;
+}
+/**
+ *
+ */
+export declare const useFormWizard: <TStepDefinition extends StepDefinitions<TFullSchema>, TFullSchema extends AnyZodObject>(props: UseFormWizardProps<TFullSchema, TStepDefinition>) => FromWizardComponentProps<TFullSchema, ComponentStepDefinitions<TFullSchema>>;
+export {};

package/src/FormWizardFooter/FormWizardFooter.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+interface FormWizardFooterProps extends CommonProps {
+    primaryActionLabel?: string;
+    isValid?: boolean;
+    onCancel: () => void;
+    onBack: (() => void) | null;
+}
+/**
+ * The footer component for the FormWizard.
+ * In most cases you should not be using this component directly, but rather use the FormWizard component.
+ */
+export declare const FormWizardFooter: ({ onBack, onCancel, isValid, primaryActionLabel }: FormWizardFooterProps) => JSX.Element;
+export {};

package/src/FormWizardFooter/FormWizardFooter.variants.d.ts

@@ -0,0 +1,2 @@
+export declare const cvaFooterContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaNavigationContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/FormWizardHeader/FormWizardHeader.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+interface FormWizardHeaderProps extends CommonProps {
+    title: string;
+    description?: string;
+}
+/**
+ * The header component for the FormWizard.
+ * In most cases you should not be using this component directly, but rather use the FormWizard component.
+ */
+export declare const FormWizardHeader: ({ title, description, className, dataTestId }: FormWizardHeaderProps) => JSX.Element;
+export {};

package/src/FormWizardHeader/FormWizardHeader.variants.d.ts

@@ -0,0 +1 @@
+export declare const cvaFormWizardHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/FormWizardSidebar/FormWizardSidebar.d.ts

@@ -0,0 +1,14 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactNode } from "react";
+interface FormWizardSidebarProps extends CommonProps {
+    /**
+     * Steps of the wizard.
+     */
+    children: ReactNode;
+}
+/**
+ * Displays the sidebar with steps for the wizard.
+ * Prefer using the FormWizard component instead of this directly.
+ */
+export declare function FormWizardSidebar({ dataTestId, children, className }: FormWizardSidebarProps): JSX.Element;
+export {};

package/src/FormWizardSidebar/FormWizardSidebar.variants.d.ts

@@ -0,0 +1,2 @@
+export declare const cvaFillSection: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSidebar: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/FormWizardSidebarStep/FormWizardSidebarStep.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+import { StepState } from "../FormWizard/useFormWizard";
+interface FormWizardSidebarStepProps extends CommonProps {
+    state: StepState;
+    stepNumber?: number;
+    title: string;
+    subTitle?: string;
+    path: string;
+}
+/**
+ * A sidebar step component used by the FormWizard component to render each step.
+ * This component is generally used internally by the FormWizard component.
+ */
+export declare const FormWizardSidebarStep: ({ stepNumber, state, title, subTitle, path, dataTestId, }: FormWizardSidebarStepProps) => JSX.Element;
+export {};

package/src/FormWizardSidebarStep/FormWizardSidebarStep.variants.d.ts

@@ -0,0 +1,12 @@
+export declare const cvaFormWizardSidebarStep: (props?: ({
+    state?: "ready" | "active" | "done" | "invalid" | "disabled" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaSectionHeaderContainer: (props?: ({
+    cursor?: "default" | "withCursor" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSubtitle: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaStepNumber: (props?: ({
+    state?: "ready" | "active" | "done" | "invalid" | "disabled" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaTitleAndDescription: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/FormWizardStepWrapper/FormWizardStepWrapper.d.ts

@@ -0,0 +1,23 @@
+import { Dispatch, SetStateAction } from "react";
+import { ZodTypeAny, z } from "zod";
+import { SimpleStepProps, StepComponentPropsInner, StepState } from "../FormWizard/useFormWizard";
+export interface FormWizardStepWrapperProps<TStepKey extends keyof z.infer<TFullSchema>, TFullSchema extends ZodTypeAny> extends SimpleStepProps {
+    description: string;
+    lastStepPrimaryActionLabel: string;
+    nextStepPath: string | null;
+    basePath: string;
+    previousStepPath: string | null;
+    onCancel?: () => void;
+    fullFormSchema: TFullSchema;
+    fullFormState: z.TypeOf<TFullSchema>;
+    setFullFormState: Dispatch<SetStateAction<Partial<z.TypeOf<TFullSchema>>>>;
+    stepKey: TStepKey;
+    formSchema: z.infer<TFullSchema>[TStepKey];
+    setStepStates: Dispatch<SetStateAction<Partial<Record<TStepKey, StepState>>>>;
+    component: (props: StepComponentPropsInner<z.infer<TFullSchema>[TStepKey], TFullSchema>) => React.ReactNode;
+}
+/**
+ * A wrapper component used by the FormWizard component to render each step.
+ * In most cases you should not be using this component directly, but rather use the FormWizard component.
+ */
+export declare const FormWizardStepWrapper: <TFullSchema extends ZodTypeAny, TStepKey extends keyof z.TypeOf<TFullSchema>>({ stepKey, onCancel, description, title, component, formSchema, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, setStepStates, basePath, }: FormWizardStepWrapperProps<TStepKey, TFullSchema>) => JSX.Element;

package/src/FormWizardStepWrapper/FormWizardStepWrapper.variants.d.ts

@@ -0,0 +1,2 @@
+export declare const cvaFormWizardComponentContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaFormWizardComponentStepForm: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FormWizard/FormWizard";
+export * from "./FormWizard/useFormWizard";

package/src/translation.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { NamespaceTransProps, TransForLibs, TranslationResource } from "@trackunit/i18n-library-translation";
+import defaultTranslations from "./locales/en/translation.json";
+/** A type for all available translation keys in this library */
+export type TranslationKeys = keyof typeof defaultTranslations;
+/** The translation namespace for this library */
+export declare const namespace = "react.form-wizard";
+/**
+ * The TranslationResource for this Library.
+ * Holds lazy loaded imports for all languages supported by the library.
+ *
+ * This is used to register the translations for this library before initializing i18next.
+ */
+export declare const translations: TranslationResource<TranslationKeys>;
+/**
+ *  Local useTranslation for this specific library
+ */
+export declare const useTranslation: () => [TransForLibs<never>, import("i18next").i18n, boolean] & {
+    t: TransForLibs<never>;
+    i18n: import("i18next").i18n;
+    ready: boolean;
+};
+/**
+ * Type of the t function for the local useTranslation for this specific library
+ */
+export type TranslationFunction = TransForLibs<TranslationKeys>;
+/**
+ * Trans for this specific library.
+ */
+export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => JSX.Element;
+/**
+ * Registers the translations for this library
+ */
+export declare const setupLibraryTranslations: () => void;

package/translation.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs10.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs11.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs12.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs13.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs14.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs15.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs16.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs17.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs2.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs3.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs4.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs5.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs6.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs7.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs8.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs9.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.esm.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm10.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm11.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm12.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm13.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm14.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm15.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm16.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm17.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm2.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm3.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm4.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm5.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm6.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm7.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm8.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm9.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };