tycho-components 0.0.10-SNAPSHOT-7 → 0.0.11-SNAPSHOT

package/dist/VirtualKeyboard/VirtualKeyboard.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// https://github.com/simple-keyboard/simple-keyboard-layouts/wiki/Adding-a-Layout
+import { MenuItem, Select, ThemeProvider, useTheme } from '@mui/material';
+import { useEffect, useState } from 'react';
+import Draggable from 'react-draggable';
+import Keyboard from 'react-simple-keyboard';
+import 'react-simple-keyboard/build/css/index.css';
+import KeyboardLayouts from 'simple-keyboard-layouts';
+import { Button, getCurrentInput, getCurrentOnChange, removeCurrentInput, selectFieldTheme, } from 'tycho-storybook';
+import { KeyboardCustomLayouts } from './KeyboardCustomLayout';
+import './style.scss';
+export default function VirtualKeyboard({ onClose, defaultLayout, closeLabel = 'Close', }) {
+    const outerTheme = useTheme();
+    const layouts = new KeyboardLayouts();
+    const layoutNames = [
+        ...Object.keys(layouts.get()),
+        ...Object.keys(KeyboardCustomLayouts),
+    ].sort((a, b) => a.localeCompare(b));
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+    const [layout, setLayout] = useState();
+    const [layoutName, setLayoutName] = useState('default');
+    const [selected, setSelected] = useState(defaultLayout);
+    const getLayoutByName = (name) => layouts.get(name) || KeyboardCustomLayouts[name];
+    const handleChangeLayout = (lang) => {
+        setSelected(lang);
+        setLayoutName('default');
+        const layoutObject = getLayoutByName(lang);
+        setLayout(layoutObject?.layout || layoutObject);
+    };
+    const handleShift = () => {
+        const newLayoutName = layoutName === 'default' ? 'shift' : 'default';
+        setLayoutName(newLayoutName);
+    };
+    const onKeyPress = (button) => {
+        if (button === '{shift}' || button === '{lock}') {
+            handleShift();
+            return;
+        }
+        if (button === '{space}') {
+            button = ' ';
+        }
+        const input = getCurrentInput();
+        const onChange = getCurrentOnChange();
+        if (input && onChange) {
+            const start = input.selectionStart || 0;
+            const end = input.selectionEnd || 0;
+            const value = input.value;
+            const newValue = button === '{bksp}'
+                ? value.slice(0, -1)
+                : value.slice(0, start) + button + value.slice(end);
+            input.value = newValue;
+            input.setSelectionRange(start + 1, start + 1);
+            input.focus();
+            onChange({ target: input });
+        }
+    };
+    useEffect(() => {
+        setLayout(getLayoutByName(defaultLayout)?.layout);
+    }, []);
+    return (_jsx(Draggable, { children: _jsxs("div", { className: "keyboard-container", children: [_jsx("div", { className: "body", children: _jsx(Keyboard, { onKeyPress: onKeyPress, layoutName: layoutName, 
+                        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                        layout: layout }) }), _jsxs("div", { className: "footer", children: [_jsx(ThemeProvider, { theme: selectFieldTheme(outerTheme), children: _jsx(Select, { value: selected, fullWidth: true, variant: "filled", color: "primary", className: "select-layout", onChange: (e) => {
+                                    handleChangeLayout(e.target.value);
+                                }, children: layoutNames.map((option, idx) => (_jsx(MenuItem, { value: option, children: option }, idx.valueOf()))) }) }), _jsx(Button, { onClick: () => {
+                                removeCurrentInput();
+                                onClose();
+                            }, text: closeLabel, color: "danger", size: "small" })] })] }) }));
+}

package/dist/VirtualKeyboard/index.d.ts

@@ -0,0 +1,2 @@
+import VirtualKeyboard from './VirtualKeyboard';
+export default VirtualKeyboard;

package/dist/VirtualKeyboard/index.js

@@ -0,0 +1,2 @@
+import VirtualKeyboard from './VirtualKeyboard';
+export default VirtualKeyboard;

package/dist/VirtualKeyboard/style.scss

@@ -0,0 +1,33 @@
+.keyboard-container {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  background-color: var(--accent-100);
+  border: 1px solid var(--border-subtle-1);
+  border-radius: var(--radius-200);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  padding: 12px;
+  gap: 8px;
+  z-index: 1000;
+  min-width: 20vw;
+
+  > .footer {
+    display: flex;
+    justify-content: end;
+    gap: 8px;
+    padding-top: var(--spacing-050);
+
+    .select-layout {
+      > .MuiSelect-select {
+        padding: 0px 16px !important;
+      }
+    }
+
+    .dropdown-menu {
+      max-height: 30vh;
+      overflow-y: auto;
+    }
+  }
+}

package/dist/configs/Localization.d.ts

@@ -39,6 +39,34 @@ export declare const commonResources: {
             'modal.select.transfer': string;
             'participant.code.exists': string;
         };
+        comments: {
+            'label.title.comments': string;
+            'placeholder.comment.text': string;
+            'placeholder.comment.title': string;
+            'placeholder.comment.person': string;
+            'label.button.add': string;
+            'label.button.update': string;
+            'label.requested.to': string;
+            'label.posted.on': string;
+            'placeholder.comments.empty': string;
+            'tooltip.edit': string;
+            'tooltip.delete': string;
+            'tooltip.read': string;
+            'modal.title.footnote': string;
+            'placeholder.footnote.text': string;
+            'modal.title.footnote.remove': string;
+            'modal.text.footnote.remove': string;
+            'button.add': string;
+            'input.value': string;
+            'input.title': string;
+            'input.user': string;
+            'button.discard': string;
+            'notification.title': string;
+            'notification.unread': string;
+            'notification.all': string;
+            'notification.empty': string;
+            'notification.text': string;
+        };
     };
     'pt-BR': {
         common: {
@@ -78,6 +106,34 @@ export declare const commonResources: {
             'modal.input.name': string;
             'participant.code.exists': string;
         };
+        comments: {
+            'label.title.comments': string;
+            'placeholder.comment.text': string;
+            'placeholder.comment.title': string;
+            'placeholder.comment.person': string;
+            'label.button.add': string;
+            'label.button.update': string;
+            'label.requested.to': string;
+            'label.posted.on': string;
+            'placeholder.comments.empty': string;
+            'tooltip.edit': string;
+            'tooltip.delete': string;
+            'tooltip.read': string;
+            'modal.title.footnote': string;
+            'placeholder.footnote.text': string;
+            'modal.title.footnote.remove': string;
+            'modal.text.footnote.remove': string;
+            'button.add': string;
+            'input.value': string;
+            'input.title': string;
+            'input.user': string;
+            'button.discard': string;
+            'notification.title': string;
+            'notification.unread': string;
+            'notification.all': string;
+            'notification.empty': string;
+            'notification.text': string;
+        };
     };
 };
 export default function commonLocalization(): void;

package/dist/configs/Localization.js

@@ -3,14 +3,17 @@ import languageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import { ParticipantsTexts } from './localization/ParticipantsTexts';
 import { CommonTexts } from './localization/CommonTexts';
+import { CommentsTexts } from './localization/CommentsTexts';
 export const commonResources = {
     en: {
         common: CommonTexts.en,
         participants: ParticipantsTexts.en,
+        comments: CommentsTexts.en,
     },
     'pt-BR': {
         common: CommonTexts['pt-BR'],
         participants: ParticipantsTexts['pt-BR'],
+        comments: CommentsTexts['pt-BR'],
     },
 };
 export default function commonLocalization() {
@@ -20,7 +23,7 @@ export default function commonLocalization() {
         .init({
         resources: commonResources,
         fallbackLng: 'en',
-        defaultNS: 'message',
+        defaultNS: 'common',
         interpolation: {
             escapeValue: false,
         },

package/dist/configs/User.d.ts

@@ -0,0 +1,16 @@
+export declare enum UserStatus {
+    ACTIVE = "ACTIVE",
+    INACTIVE = "INACTIVE",
+    SUPER = "SUPER",
+    VISITOR = "VISITOR"
+}
+type User = {
+    uid: string;
+    name: string;
+    sub: string;
+    picture: string;
+    lang: string;
+    status: UserStatus;
+    permissions: string[];
+};
+export default User;

package/dist/configs/User.js

@@ -0,0 +1,7 @@
+export var UserStatus;
+(function (UserStatus) {
+    UserStatus["ACTIVE"] = "ACTIVE";
+    UserStatus["INACTIVE"] = "INACTIVE";
+    UserStatus["SUPER"] = "SUPER";
+    UserStatus["VISITOR"] = "VISITOR";
+})(UserStatus || (UserStatus = {}));

package/dist/configs/localization/CommentsTexts.d.ts

@@ -0,0 +1,58 @@
+export declare const CommentsTexts: {
+    en: {
+        'label.title.comments': string;
+        'placeholder.comment.text': string;
+        'placeholder.comment.title': string;
+        'placeholder.comment.person': string;
+        'label.button.add': string;
+        'label.button.update': string;
+        'label.requested.to': string;
+        'label.posted.on': string;
+        'placeholder.comments.empty': string;
+        'tooltip.edit': string;
+        'tooltip.delete': string;
+        'tooltip.read': string;
+        'modal.title.footnote': string;
+        'placeholder.footnote.text': string;
+        'modal.title.footnote.remove': string;
+        'modal.text.footnote.remove': string;
+        'button.add': string;
+        'input.value': string;
+        'input.title': string;
+        'input.user': string;
+        'button.discard': string;
+        'notification.title': string;
+        'notification.unread': string;
+        'notification.all': string;
+        'notification.empty': string;
+        'notification.text': string;
+    };
+    'pt-BR': {
+        'label.title.comments': string;
+        'placeholder.comment.text': string;
+        'placeholder.comment.title': string;
+        'placeholder.comment.person': string;
+        'label.button.add': string;
+        'label.button.update': string;
+        'label.requested.to': string;
+        'label.posted.on': string;
+        'placeholder.comments.empty': string;
+        'tooltip.edit': string;
+        'tooltip.delete': string;
+        'tooltip.read': string;
+        'modal.title.footnote': string;
+        'placeholder.footnote.text': string;
+        'modal.title.footnote.remove': string;
+        'modal.text.footnote.remove': string;
+        'button.add': string;
+        'input.value': string;
+        'input.title': string;
+        'input.user': string;
+        'button.discard': string;
+        'notification.title': string;
+        'notification.unread': string;
+        'notification.all': string;
+        'notification.empty': string;
+        'notification.text': string;
+    };
+};

package/dist/configs/localization/CommentsTexts.js

@@ -0,0 +1,58 @@
+export const CommentsTexts = {
+    en: {
+        'label.title.comments': 'Comments',
+        'placeholder.comment.text': 'Your comment',
+        'placeholder.comment.title': 'Title (optional)',
+        'placeholder.comment.person': 'Select person',
+        'label.button.add': 'Add comment',
+        'label.button.update': 'Update comment',
+        'label.requested.to': 'Sent to:',
+        'label.posted.on': 'Posted on:',
+        'placeholder.comments.empty': 'No comments available.',
+        'tooltip.edit': 'Edit comment',
+        'tooltip.delete': 'Remove comment',
+        'tooltip.read': 'Mark as read',
+        'modal.title.footnote': 'Edit footnote',
+        'placeholder.footnote.text': 'Enter footnote',
+        'modal.title.footnote.remove': 'Confirm footnote removal',
+        'modal.text.footnote.remove': 'Are you sure you want to remove this footnote? This action is irreversible.',
+        'button.add': 'Add comment',
+        'input.value': 'Comment',
+        'input.title': 'Title',
+        'input.user': 'Send to user',
+        'button.discard': 'Discard',
+        'notification.title': 'Notifications',
+        'notification.unread': 'Unread',
+        'notification.all': 'Read',
+        'notification.empty': 'No more notifications',
+        'notification.text': '{{user}} added a comment to entry {{entry}}.',
+    },
+    'pt-BR': {
+        'label.title.comments': 'Comentários',
+        'placeholder.comment.text': 'Seu comentário',
+        'placeholder.comment.title': 'Título (opcional)',
+        'placeholder.comment.person': 'Selecione a pessoa',
+        'label.button.add': 'Adicionar comentário',
+        'label.button.update': 'Atualizar comentário',
+        'label.requested.to': 'Enviado para:',
+        'label.posted.on': 'Postado em:',
+        'placeholder.comments.empty': 'Nenhum comentário disponível.',
+        'tooltip.edit': 'Editar commentário',
+        'tooltip.delete': 'Remover commentário',
+        'tooltip.read': 'Marcar como lido',
+        'modal.title.footnote': 'Editar nota de rodapé',
+        'placeholder.footnote.text': 'Entre o texto da nota de rodapé',
+        'modal.title.footnote.remove': 'Confirmação de exclusão de nota de rodapé',
+        'modal.text.footnote.remove': 'Tem certeza de que deseja remover esta nota de rodapé? Esta ação é irreversível.',
+        'button.add': 'Adicionar comentário',
+        'input.value': 'Comentário',
+        'input.title': 'Título',
+        'input.user': 'Enviar para usuário',
+        'button.discard': 'Descartar',
+        'notification.title': 'Notificações',
+        'notification.unread': 'Não lidas',
+        'notification.all': 'Lidas',
+        'notification.empty': 'Não há notificações',
+        'notification.text': '{{user}} adicionou um comentário na entrada {{entry}}.',
+    },
+};

package/dist/configs/store/actions.d.ts

@@ -1,4 +1,6 @@
 import ToastMessage from '../../AppToast/ToastMessage';
+import User from '../User';
 import { StoreAction } from './types';
+export declare const logged: (data: User | undefined) => StoreAction;
 export declare const message: (data: ToastMessage) => StoreAction;
 export declare const toastLoading: (data: boolean) => StoreAction;

package/dist/configs/store/actions.js

@@ -1,4 +1,8 @@
 import { types } from './types';
+export const logged = (data) => ({
+    type: types.LOGGED,
+    payload: data,
+});
 export const message = (data) => ({
     type: types.MESSAGE,
     payload: data,

package/dist/configs/store/reducer.js

@@ -2,6 +2,11 @@
 import { types } from './types';
 function reducer(state, action) {
     switch (action.type) {
+        case types.LOGGED:
+            return {
+                ...state,
+                logged: action.payload,
+            };
         case types.MESSAGE:
             return {
                 ...state,

package/dist/configs/store/store.js

@@ -1,5 +1,6 @@
 import { EMPTY_TOAST } from '../../AppToast/ToastMessage';
 const store = {
+    logged: undefined,
     message: EMPTY_TOAST,
     toastLoading: false,
 };

package/dist/configs/store/types.d.ts

@@ -1,13 +1,16 @@
 import ToastMessage from '../../AppToast/ToastMessage';
+import User from '../User';
 export type UserStore = {
+    logged: User | undefined;
     message: ToastMessage;
     toastLoading: boolean;
 };
 export type StoreAction = {
     type: string;
-    payload?: ToastMessage | boolean;
+    payload?: ToastMessage | boolean | User;
 };
 export declare const types: {
     MESSAGE: string;
     TOAST_LOADING: string;
+    LOGGED: string;
 };

package/dist/configs/store/types.js

@@ -1,4 +1,5 @@
 export const types = {
     MESSAGE: 'MESSAGE',
     TOAST_LOADING: 'TOAST_LOADING',
+    LOGGED: 'LOGGED',
 };

package/dist/functions/DateUtils.d.ts

@@ -0,0 +1,9 @@
+declare function extractDateFromMongoId(id: string, time?: boolean): string;
+declare const DateUtils: {
+    millis: () => number;
+    formatDate: (date: Date | null, fmt: string) => string;
+    parseTime: (time: number) => string;
+    extractDateFromMongoId: typeof extractDateFromMongoId;
+    formatDateTime: (isoDateStr: string, outputFormat: string) => string;
+};
+export default DateUtils;

package/dist/functions/DateUtils.js

@@ -0,0 +1,42 @@
+import { addSeconds, parseISO } from 'date-fns';
+import { format } from 'date-fns-tz';
+const millis = () => new Date().getTime();
+const formatDateTime = (isoDateStr, outputFormat) => {
+    try {
+        const parsedDate = parseISO(isoDateStr);
+        return format(parsedDate, outputFormat);
+    }
+    catch (error) {
+        console.error('Invalid date or format:', error);
+        return '';
+    }
+};
+const formatDate = (date, fmt) => {
+    console.log(typeof date);
+    if (!date)
+        return '';
+    return format(date, fmt);
+};
+const parseTime = (time) => {
+    if (time == null || time <= 0)
+        return '00:00:00.000';
+    return new Date(time * 1000).toISOString().slice(11, 23);
+};
+function extractDateFromMongoId(id, time) {
+    const DATE_PATTERN = 'yyyy-MM-dd';
+    const TIME_PATTERN = 'HH:mm:ss';
+    const hexTimestamp = id.substring(0, 8);
+    const timestampInMilliseconds = parseInt(hexTimestamp, 16) * 1000;
+    const dtf = time ? `${DATE_PATTERN} ${TIME_PATTERN}` : DATE_PATTERN;
+    const date = addSeconds(new Date(0), timestampInMilliseconds / 1000);
+    const formattedDate = format(date, dtf);
+    return formattedDate;
+}
+const DateUtils = {
+    millis,
+    formatDate,
+    parseTime,
+    extractDateFromMongoId,
+    formatDateTime,
+};
+export default DateUtils;

package/dist/functions/FormUtils.d.ts

@@ -0,0 +1,11 @@
+import { TFunction } from 'i18next';
+import { SelectItem } from 'tycho-storybook/dist/SelectField/SelectField';
+declare const FormUtils: {
+    convertEnum: (values: Record<string, string>, t?: TFunction, prefix?: string) => SelectItem[];
+    convertList: (values: any, labelAttr: string, valueAttr: string) => SelectItem[];
+    convertStringArray: (values: string[]) => SelectItem[];
+    booleanOptions: (t: TFunction) => SelectItem[];
+    convertMap: (values: Record<string, any> | undefined) => SelectItem[];
+    sortByLabel: (items: SelectItem[]) => SelectItem[];
+};
+export default FormUtils;

package/dist/functions/FormUtils.js

@@ -0,0 +1,56 @@
+const convertEnum = (values, t, prefix) => {
+    if (!t)
+        return Object.entries(values).map(([key, label]) => ({
+            value: key,
+            label,
+        }));
+    return Object.entries(values).map(([key, label]) => ({
+        value: key,
+        label: t(`${prefix}.${label}`),
+    }));
+};
+const sortByLabel = (items) => {
+    return [...items].sort((a, b) => a.label.localeCompare(b.label));
+};
+const convertList = (values, labelAttr, valueAttr) => {
+    if (!values)
+        return [];
+    let fields = [];
+    values.map((value) => {
+        fields = [...fields, { label: value[labelAttr], value: value[valueAttr] }];
+    });
+    return fields;
+};
+const convertMap = (values) => {
+    if (!values)
+        return [];
+    let fields = [];
+    Object.keys(values).map((key) => {
+        fields = [...fields, { label: values[key], value: key }];
+    });
+    return fields;
+};
+const convertStringArray = (values) => {
+    if (!values)
+        return [];
+    let fields = [];
+    values.map((value) => {
+        fields = [...fields, { label: value, value }];
+    });
+    return fields;
+};
+const booleanOptions = (t) => {
+    return [
+        { label: t('message:generic.option.true'), value: 'true' },
+        { label: t('message:generic.option.false'), value: 'false' },
+    ];
+};
+const FormUtils = {
+    convertEnum,
+    convertList,
+    convertStringArray,
+    booleanOptions,
+    convertMap,
+    sortByLabel,
+};
+export default FormUtils;

package/dist/functions/SecurityUtils.d.ts

@@ -0,0 +1,6 @@
+import User from '../configs/User';
+declare const SecurityUtils: {
+    hasAccess: (uid: string, roles: string[]) => boolean;
+    parseJwt: (token: string) => User;
+};
+export default SecurityUtils;

package/dist/functions/SecurityUtils.js

@@ -0,0 +1,28 @@
+import CookieStorage from '../configs/CookieStorage';
+import { UserStatus } from '../configs/User';
+const hasAccess = (uid, roles) => {
+    const token = CookieStorage.getJwtToken();
+    if (!token)
+        return false;
+    const logged = parseJwt(token);
+    if (logged.status && logged.status === UserStatus.SUPER)
+        return true;
+    return roles.some((role) => logged.permissions.includes(`ROLE_${role}_LEXICON_${uid}`));
+};
+const parseJwt = (token) => {
+    const base64Url = token.split('.')[1];
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    const payload = decodeURIComponent(window
+        .atob(base64)
+        .split('')
+        .map(function (c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    })
+        .join(''));
+    return JSON.parse(payload);
+};
+const SecurityUtils = {
+    hasAccess,
+    parseJwt,
+};
+export default SecurityUtils;

package/dist/index.d.ts

@@ -5,11 +5,19 @@ export { default as Participants } from './Participants';
 export { default as AppModal } from './AppModal';
 export { default as AppModalConfirm } from './AppModal/AppModalConfirm';
 export { default as AppModalRemove } from './AppModal/AppModalRemove';
-export { commonResources } from './configs/Localization';
+export { default as VirtualKeyboard } from './VirtualKeyboard';
+export { default as CommentComponent } from './Comments';
+export { default as HeaderNotifications } from './Comments/HeaderNotifications';
 export { CommonProvider } from './configs/CommonContext';
 export { useMessageUtils } from './configs/useMessageUtils';
 export { validateFormField } from './AppEditable/FormField';
 export { convertEnum, convertList } from './AppEditable/FormFieldOption';
+export { commonResources } from './configs/Localization';
+export { KeyboardCustomLayouts } from './VirtualKeyboard/KeyboardCustomLayout';
+export { default as DateUtils } from './functions/DateUtils';
+export { default as FormUtils } from './functions/FormUtils';
+export { default as SecurityUtils } from './functions/SecurityUtils';
 export type { FormFieldOption } from './AppEditable/FormFieldOption';
 export type { AppEditableField } from './AppEditable/AppEditableField';
 export type { FieldOperations, FormField } from './AppEditable/FormField';
+export type { KeyboardLayout } from './VirtualKeyboard/KeyboardCustomLayout';

package/dist/index.js

@@ -5,8 +5,15 @@ export { default as Participants } from './Participants';
 export { default as AppModal } from './AppModal';
 export { default as AppModalConfirm } from './AppModal/AppModalConfirm';
 export { default as AppModalRemove } from './AppModal/AppModalRemove';
-export { commonResources } from './configs/Localization';
+export { default as VirtualKeyboard } from './VirtualKeyboard';
+export { default as CommentComponent } from './Comments';
+export { default as HeaderNotifications } from './Comments/HeaderNotifications';
 export { CommonProvider } from './configs/CommonContext';
 export { useMessageUtils } from './configs/useMessageUtils';
 export { validateFormField } from './AppEditable/FormField';
 export { convertEnum, convertList } from './AppEditable/FormFieldOption';
+export { commonResources } from './configs/Localization';
+export { KeyboardCustomLayouts } from './VirtualKeyboard/KeyboardCustomLayout';
+export { default as DateUtils } from './functions/DateUtils';
+export { default as FormUtils } from './functions/FormUtils';
+export { default as SecurityUtils } from './functions/SecurityUtils';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.0.10-SNAPSHOT-7",
+  "version": "0.0.11-SNAPSHOT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -27,6 +27,8 @@
     "js-cookie": "^3.0.5",
     "react-colorful": "^5.6.1",
     "react-easy-edit": "^2.0.0",
+    "react-simple-keyboard": "^3.8.66",
+    "simple-keyboard-layouts": "^3.4.82",
     "react-loading": "^2.0.3",
     "react-switch": "^7.1.0",
     "react-toastify": "^9.1.3"
@@ -45,7 +47,8 @@
     "react-dom": ">=17 <19",
     "react-hook-form": "^7.45.2",
     "react-i18next": "^13.0.2",
-    "tycho-storybook": "0.1.3",
+    "react-router-dom": "^6.14.2",
+    "tycho-storybook": "0.1.5-SNAPSHOT",
     "yup": "^1.2.0"
   },
   "devDependencies": {