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

package/dist/AppLoading/AppLoading.d.ts

@@ -0,0 +1,3 @@
+import './style.scss';
+declare function AppLoading(): import("react/jsx-runtime").JSX.Element;
+export default AppLoading;

package/dist/AppLoading/AppLoading.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactLoading from 'react-loading';
+import './style.scss';
+function AppLoading() {
+    return (_jsx("div", { className: "loading-container", children: _jsx(ReactLoading, { type: "spinningBubbles", color: "blue", height: 50, width: 50 }) }));
+}
+export default AppLoading;

package/dist/AppLoading/index.d.ts

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

package/dist/AppLoading/index.js

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

package/dist/AppLoading/style.scss

@@ -0,0 +1,8 @@
+.loading-container {
+  height: 50vh;
+  margin-top: calc(var(--spacing-xxlarge) + var(--spacing-large));
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/dist/AppPlaceholder/AppPlaceholder.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './style.scss';
+type Props = {
+    children: React.ReactNode;
+    onClick?: () => void;
+};
+export default function AppPlaceholder({ children, onClick }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AppPlaceholder/AppPlaceholder.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './style.scss';
+export default function AppPlaceholder({ children, onClick }) {
+    return (_jsx("div", { role: "presentation", className: "placeholder-container", onClick: () => onClick && onClick(), onKeyDown: () => onClick && onClick(), children: children }));
+}

package/dist/AppPlaceholder/index.d.ts

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

package/dist/AppPlaceholder/index.js

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

package/dist/AppPlaceholder/style.scss

@@ -0,0 +1,18 @@
+.placeholder-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  margin: 32px 16px;
+  font-size: var(--font-size-xlarge);
+
+  height: 75%;
+  padding: var(--spacing-small);
+  background-color: var(--opacity-black-08);
+  justify-content: center;
+  align-items: center;
+  font-weight: var(--font-weight-large);
+  color: var(--color-primary-alternative);
+}

package/dist/Comments/Comments.d.ts

@@ -0,0 +1,9 @@
+import './style.scss';
+type Props = {
+    lexicon: string;
+    entry: string;
+    keywords: Record<string, string | number | boolean>;
+    onClose: () => void;
+};
+export default function Comments({ lexicon, entry, keywords, onClose }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Comments/Comments.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Drawer } from '@mui/material';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { Avatar, Button, IconButton, SelectField, TextField, } from 'tycho-storybook';
+import * as yup from 'yup';
+import AppLoading from '../AppLoading';
+import AppPlaceholder from '../AppPlaceholder';
+import CommonContext from '../configs/CommonContext';
+import { useMessageUtils } from '../configs/useMessageUtils';
+import DateUtils from '../functions/DateUtils';
+import FormUtils from '../functions/FormUtils';
+import SecurityUtils from '../functions/SecurityUtils';
+import './style.scss';
+import { EMPTY_COMMENT_REQUEST, } from './types/Comment';
+import CommentService from './types/CommentService';
+export default function Comments({ lexicon, entry, keywords, onClose }) {
+    const { t } = useTranslation('comments');
+    const { state } = useContext(CommonContext);
+    const { isLoading, dispatchLoading } = useMessageUtils();
+    const [openAddComment, setOpenAddComment] = useState(false);
+    const [comment, setComment] = useState();
+    const [comments, setComments] = useState();
+    const [users, setUsers] = useState([]);
+    const createdForm = useForm({
+        resolver: yupResolver(getFormSchema(t)),
+        mode: 'onChange',
+    });
+    const load = async () => {
+        try {
+            const [commentsResponse, usersResponse] = await Promise.all([
+                CommentService.find(lexicon, entry),
+                CommentService.findAvailableUsers(lexicon),
+            ]);
+            setComments(commentsResponse.data);
+            setUsers(usersResponse.data);
+        }
+        catch (error) {
+            console.error('Error loading comments or users', error);
+            // optionally handle specific error state here
+        }
+    };
+    const handleAdd = () => {
+        if (isLoading())
+            return;
+        dispatchLoading(true);
+        CommentService.add(lexicon, entry, createdForm.getValues(), keywords).then((r) => {
+            dispatchLoading(false);
+            setOpenAddComment(false);
+            setComment(undefined);
+            setComments((prev) => [...(prev || []), r.data]);
+            createdForm.reset(EMPTY_COMMENT_REQUEST);
+        });
+    };
+    const handleMarkRead = (thisComment) => {
+        CommentService.markRead(thisComment.id).then(() => {
+            const updated = { ...thisComment, read: true };
+            setComments(comments?.map((c) => c.id === thisComment.id ? { ...c, ...updated } : c));
+        });
+    };
+    const handleRemove = (thisComment) => {
+        CommentService.remove(thisComment.id).then(() => {
+            setComments(comments?.filter((c) => c.id !== thisComment.id));
+        });
+    };
+    const handleEdit = (thisComment) => {
+        setComment(thisComment);
+        setOpenAddComment(true);
+        createdForm.reset({
+            value: thisComment.value,
+            title: thisComment.title,
+            requestedUser: thisComment.requested?.uid,
+        });
+    };
+    const handleUpdate = () => {
+        if (!comment)
+            return;
+        CommentService.update(comment.id, createdForm.getValues()).then((r) => {
+            setComments((prev) => prev?.map((c) => (c.id === comment.id ? r.data : c)));
+            setComment(undefined);
+            setOpenAddComment(false);
+        });
+    };
+    const hasEditAccess = useMemo(() => {
+        return SecurityUtils.hasAccess(lexicon, ['ADMIN', 'EDITOR']);
+    }, [lexicon]);
+    useEffect(() => {
+        load();
+    }, []);
+    if (!comments)
+        return _jsx(AppLoading, {});
+    return (_jsx(Drawer, { anchor: "right", open: true, onClose: onClose, children: _jsxs("div", { className: "comments-container", children: [_jsxs("div", { className: "header", children: [_jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: onClose }), _jsx("span", { className: "title", children: t('label.title.comments') }), _jsx("div", { className: "actions", children: hasEditAccess && (_jsx(Button, { text: t('button.add'), icon: "add", mode: "outlined", size: "small", className: "edit-button", onClick: () => {
+                                    setComment(undefined);
+                                    setOpenAddComment(!openAddComment);
+                                } })) })] }), _jsxs("div", { className: "body", children: [openAddComment && (_jsxs("div", { className: "form", children: [_jsx(TextField, { label: t('input.value'), attr: "value", createdForm: createdForm, showEndAdornment: false, placeholder: t('common:generic.placeholder'), required: true, multiline: true }), _jsx(TextField, { label: t('input.title'), attr: "title", createdForm: createdForm, showEndAdornment: false, placeholder: t('common:generic.placeholder') }), _jsx(SelectField, { label: t('input.user'), attr: "requestedUser", createdForm: createdForm, options: [
+                                        { label: t('common:generic.placeholder.select'), value: '' },
+                                        ...FormUtils.convertList(users, 'name', 'uid'),
+                                    ], showEndAdornment: false }), _jsxs("div", { className: "buttons", children: [comment && (_jsx(Button, { onClick: comment?.id ? handleUpdate : handleAdd, text: t('button.discard'), color: "danger" })), _jsx(Button, { onClick: comment ? handleUpdate : handleAdd, text: comment ? t('label.button.update') : t('label.button.add'), disabled: !createdForm.formState.isValid })] })] })), comments?.length === 0 && (_jsx(AppPlaceholder, { children: _jsx("span", { children: t('placeholder.comments.empty') }) })), comments?.map((el, idx) => (_jsxs("div", { className: "comment", children: [_jsxs("div", { className: "top", children: [_jsx(Avatar, { title: el.name, src: el.picture, size: "medium" }), _jsx("div", { className: "name", children: el.name }), _jsxs("div", { className: "buttons", children: [state.logged?.uid === el.user && (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "small", onClick: () => handleEdit(el), title: t('tooltip.edit'), name: "edit" }), _jsx(IconButton, { size: "small", onClick: () => handleRemove(el), title: t('tooltip.delete'), name: "delete" })] })), el.requested &&
+                                                    !el.read &&
+                                                    state.logged?.uid === el.requested.uid && (_jsx(IconButton, { size: "small", onClick: () => {
+                                                        handleMarkRead(el);
+                                                    }, title: t('tooltip.read'), name: "check_circle" }))] })] }), _jsxs("div", { className: "content", children: [el.title && _jsx("div", { className: "title", children: el.title }), _jsx("div", { className: "text", children: el.value }), el.requested && (_jsxs("div", { className: "date", children: [_jsx("span", { className: "me-1", children: t('label.requested.to') }), _jsx("span", { children: el.requested.name })] })), _jsxs("div", { className: "date", children: [_jsx("span", { className: "me-1", children: t('label.posted.on') }), _jsx("span", { className: "me-1", children: DateUtils.formatDateTime(el.edited ? el.edited : el.date, 'MM/dd/yyyy - HH:mm') }), el.edited && _jsx("i", { children: "edited" })] })] })] }, idx.valueOf())))] })] }) }));
+}
+const getFormSchema = (t) => yup.object().shape({
+    title: yup.string().optional(),
+    value: yup.string().required(t('common:validation.required')),
+    requestedUser: yup.string().optional(),
+});

package/dist/Comments/HeaderNotifications/HeaderNotifications.d.ts

@@ -0,0 +1,6 @@
+import './style.scss';
+type Props = {
+    lexicon: string;
+};
+export default function HeaderNotifications({ lexicon }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Comments/HeaderNotifications/HeaderNotifications.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { Avatar, IconButton } from 'tycho-storybook';
+import DateUtils from '../../functions/DateUtils';
+import CommentService from '../types/CommentService';
+import './style.scss';
+export default function HeaderNotifications({ lexicon }) {
+    const navigate = useNavigate();
+    const { t } = useTranslation('comments');
+    const [open, setOpen] = useState(false);
+    const [notifications, setNotifications] = useState();
+    const [comments, setComments] = useState();
+    const [tab, setTab] = useState('unread');
+    const handleOpen = (notification) => {
+        navigate(`/edit/${notification.entry}`);
+        setOpen(false);
+    };
+    const load = () => {
+        const serviceMethod = tab === 'read'
+            ? CommentService.findReadNotifications
+            : CommentService.findNotifications;
+        serviceMethod(lexicon).then((r) => {
+            if (tab !== 'read') {
+                setComments(r.data);
+            }
+            setNotifications(r.data);
+        });
+    };
+    useEffect(() => {
+        load();
+    }, [lexicon, tab]);
+    return (_jsxs("div", { className: "ds-dropdown-container notifications-container", children: [_jsx(IconButton, { name: "notifications_active", className: comments && comments.length > 0 ? 'shake' : '', size: "medium", onClick: () => setOpen(!open) }), open && (_jsx("div", { className: "ds-dropdown-list", children: _jsxs("div", { className: "notifications-panel", children: [_jsxs("div", { className: "header", children: [_jsx("span", { children: t('notification.title') }), _jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: () => setOpen(false) })] }), _jsxs("div", { className: "tabs", children: [_jsxs("button", { className: tab === 'unread' ? 'active-tab' : '', onClick: () => setTab('unread'), children: [t('notification.unread'), " (", comments?.length || 0, ")"] }), _jsx("button", { className: tab === 'read' ? 'active-tab' : '', onClick: () => setTab('read'), children: t('notification.all') })] }), _jsxs("div", { className: "content", children: [notifications &&
+                                    notifications.map((not, idx) => (_jsxs("div", { className: "item", onClick: () => handleOpen(not), children: [_jsx(Avatar, { src: not.picture, size: "small" }), _jsxs("div", { className: "message", children: [_jsx("span", { className: "text", children: _jsx(Trans, { t: t, i18nKey: "notification.text", values: {
+                                                                user: not.name,
+                                                                entry: not.keywords ? not.keywords['entry'] : '',
+                                                            } }) }), _jsx("span", { className: "date", children: DateUtils.formatDateTime(not.edited ? not.edited : not.date, 'MM/dd/yyyy - HH:mm') })] })] }, idx.valueOf()))), notifications && notifications.length === 0 && (_jsx("div", { className: "empty-notifications", children: t('notification.empty') }))] })] }) }))] }));
+}

package/dist/Comments/HeaderNotifications/index.d.ts

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

package/dist/Comments/HeaderNotifications/index.js

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

package/dist/Comments/HeaderNotifications/style.scss

@@ -0,0 +1,104 @@
+@use 'tycho-storybook/dist/styles/main' as *;
+
+.notifications-container {
+  @keyframes shake {
+    0% {
+      transform: rotate(0deg);
+    }
+    20% {
+      transform: rotate(-15deg);
+    }
+    40% {
+      transform: rotate(15deg);
+    }
+    60% {
+      transform: rotate(-10deg);
+    }
+    80% {
+      transform: rotate(10deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+
+  .shake {
+    animation: shake 0.5s ease-in-out infinite;
+  }
+
+  > .ds-dropdown-list {
+    right: 0;
+    width: auto;
+
+    .notifications-panel {
+      width: 320px;
+      overflow: hidden;
+      background: #fff;
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 12px;
+        border-bottom: 1px solid var(--border-subtle-1);
+        font-weight: bold;
+      }
+
+      .tabs {
+        display: flex;
+        border-bottom: 1px solid var(--border-subtle-1);
+
+        > button {
+          flex: 1;
+          padding: 8px;
+          border: none;
+          background: none;
+          cursor: pointer;
+          font-weight: 500;
+        }
+
+        .active-tab {
+          border-bottom: 2.5px solid var(--border-hover);
+          color: var(--icon-accent-hover);
+        }
+      }
+
+      > .content {
+        .item {
+          display: flex;
+          align-items: flex-start;
+          gap: 8px;
+          cursor: pointer;
+          padding: 16px;
+          border-bottom: 1px solid var(--border-subtle-1);
+
+          &:hover {
+            background-color: var(--layer-hover-1);
+          }
+
+          .message {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+
+            .text {
+              font-size: 14px;
+            }
+
+            .date {
+              @include helper-small-1;
+              color: var(--text-tertiary);
+            }
+          }
+        }
+      }
+
+      .empty-notifications {
+        text-align: center;
+        font-size: 13px;
+        color: #666;
+        padding: 20px 0;
+      }
+    }
+  }
+}

package/dist/Comments/index.d.ts

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

package/dist/Comments/index.js

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

package/dist/Comments/style.scss

@@ -0,0 +1,136 @@
+@use 'tycho-storybook/dist/styles/main' as *;
+
+.comments-container {
+  display: flex;
+  flex-direction: column;
+  width: 480px;
+
+  > .header {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-100);
+    border-bottom: 1px solid var(--border-subtle-1);
+
+    > .title {
+      @include tag-medium-1;
+      color: var(--text-secondary);
+      margin-left: 8px;
+    }
+
+    > .actions {
+      display: flex;
+      margin-left: auto;
+
+      .edit-button {
+        margin-right: var(--spacing-100);
+      }
+    }
+  }
+
+  > .body {
+    padding: var(--spacing-0) var(--spacing-250);
+    background-color: #fff;
+    padding: 16px;
+
+    .comment {
+      display: flex;
+      flex-direction: column;
+      padding: var(--spacing-150) var(--spacing-100);
+      border-bottom: 1px solid var(--border-subtle-1);
+
+      .top {
+        display: flex;
+        align-items: center;
+
+        > .ds-avatar {
+          margin-right: 8px;
+        }
+
+        .buttons {
+          display: flex;
+          margin-left: auto;
+          gap: 8px;
+
+          button {
+            border: none;
+            border-radius: var(--border-radius-button);
+            cursor: pointer;
+          }
+        }
+      }
+
+      .content {
+        margin-top: 16px;
+
+        .title {
+          @include tag-small-1;
+          color: var(--text-accent);
+          text-transform: none;
+        }
+
+        .text {
+          @include body-medium-1;
+          color: var(--text-primary);
+        }
+
+        .date {
+          @include helper-small-1;
+          color: var(--text-tertiary);
+          margin-top: 8px;
+        }
+      }
+    }
+
+    .form {
+      display: flex;
+      flex-direction: column;
+      padding-bottom: 16px;
+      border-bottom: 1px solid var(--border-subtle-1);
+
+      > .ds-input-text,
+      > .ds-select-text {
+        margin-bottom: 8px;
+      }
+
+      > .buttons {
+        display: flex;
+        gap: 8px;
+
+        > .ds-button {
+          width: 100%;
+        }
+      }
+    }
+
+    .placeholder-container {
+      margin: 0px;
+      font-size: var(--font-size-medium);
+    }
+  }
+}
+
+.modal-comment-info {
+  .modal-body {
+    > textarea {
+      width: 100%;
+      height: 20vh;
+      padding: 8px;
+    }
+
+    .footnote-actions {
+      text-align: center;
+
+      > button {
+        font-family: var(--font-family-regular);
+        font-style: var(--font-weight-medium);
+        font-weight: var(--font-weight-medium);
+        font-size: var(--font-size-button);
+        color: var(--color-background);
+        width: 200px;
+        border-radius: 8px;
+        padding: 12px;
+        border: none;
+      }
+    }
+  }
+}

package/dist/Comments/types/Comment.d.ts

@@ -0,0 +1,28 @@
+export type CommentRequest = {
+    title?: string;
+    value: string;
+    requestedUser?: string;
+};
+export type Comment = {
+    id: string;
+    title?: string;
+    value: string;
+    date: string;
+    edited?: string;
+    name: string;
+    user: string;
+    picture: string;
+    lexicon: string;
+    entry: string;
+    requested?: UserComment;
+    read?: boolean;
+    keywords?: Record<string, string>;
+};
+export type UserComment = {
+    uid: string;
+    name: string;
+    picture: string;
+    email: string;
+};
+export declare const EMPTY_COMMENT: Comment;
+export declare const EMPTY_COMMENT_REQUEST: CommentRequest;

package/dist/Comments/types/Comment.js

@@ -0,0 +1,13 @@
+export const EMPTY_COMMENT = {
+    id: '',
+    value: '',
+    date: '',
+    user: '',
+    name: '',
+    picture: '',
+    entry: '',
+    lexicon: '',
+};
+export const EMPTY_COMMENT_REQUEST = {
+    value: '',
+};

package/dist/Comments/types/CommentService.d.ts

@@ -0,0 +1,21 @@
+import User from '../../configs/User';
+import { Comment, CommentRequest } from './Comment';
+declare function markRead(id: string): Promise<import("axios").AxiosResponse<Comment, any>>;
+declare function update(id: string, comment: CommentRequest): Promise<import("axios").AxiosResponse<Comment, any>>;
+declare function remove(id: string): Promise<import("axios").AxiosResponse<Comment, any>>;
+declare function add(lexicon: string, entry: string, comment: CommentRequest, keywords: Record<string, string | number | boolean>): Promise<import("axios").AxiosResponse<Comment, any>>;
+declare function find(lexicon: string, entry?: string): Promise<import("axios").AxiosResponse<Comment[], any>>;
+declare function findNotifications(lexicon: string): Promise<import("axios").AxiosResponse<Comment[], any>>;
+declare function findReadNotifications(lexicon: string): Promise<import("axios").AxiosResponse<Comment[], any>>;
+declare function findAvailableUsers(lexicon: string): Promise<import("axios").AxiosResponse<User[], any>>;
+declare const CommentService: {
+    add: typeof add;
+    remove: typeof remove;
+    update: typeof update;
+    markRead: typeof markRead;
+    find: typeof find;
+    findNotifications: typeof findNotifications;
+    findReadNotifications: typeof findReadNotifications;
+    findAvailableUsers: typeof findAvailableUsers;
+};
+export default CommentService;

package/dist/Comments/types/CommentService.js

@@ -0,0 +1,44 @@
+import api from '../../configs/api';
+function markRead(id) {
+    return api.put(`${import.meta.env.VITE_APP_COMMENT_API_URL}/${id}`);
+}
+function update(id, comment) {
+    return api.patch(`${import.meta.env.VITE_APP_COMMENT_API_URL}/lexicon/${id}`, { ...comment });
+}
+function remove(id) {
+    return api.delete(`${import.meta.env.VITE_APP_COMMENT_API_URL}/${id}`);
+}
+function add(lexicon, entry, comment, keywords) {
+    return api.post(`${import.meta.env.VITE_APP_COMMENT_API_URL}/lexicon/${lexicon}`, {
+        ...comment,
+        entry,
+        keywords,
+    });
+}
+function find(lexicon, entry) {
+    return api.get(`${import.meta.env.VITE_APP_COMMENT_API_URL}/lexicon/${lexicon}`, {
+        params: {
+            entry,
+        },
+    });
+}
+function findNotifications(lexicon) {
+    return api.get(`${import.meta.env.VITE_APP_COMMENT_API_URL}/lexicon/notifications/${lexicon}`);
+}
+function findReadNotifications(lexicon) {
+    return api.get(`${import.meta.env.VITE_APP_COMMENT_API_URL}/lexicon/notifications/read/${lexicon}`);
+}
+function findAvailableUsers(lexicon) {
+    return api.get(`${import.meta.env.VITE_APP_AUTH_API}/lexicon/${lexicon}`);
+}
+const CommentService = {
+    add,
+    remove,
+    update,
+    markRead,
+    find,
+    findNotifications,
+    findReadNotifications,
+    findAvailableUsers,
+};
+export default CommentService;

package/dist/VirtualKeyboard/KeyboardCustomLayout.d.ts

@@ -0,0 +1,8 @@
+export type KeyboardLayout = {
+    layout: {
+        default: string[];
+        shift: string[];
+    };
+    display: Record<string, string>;
+};
+export declare const KeyboardCustomLayouts: Record<string, KeyboardLayout>;

package/dist/VirtualKeyboard/KeyboardCustomLayout.js

@@ -0,0 +1,25 @@
+export const KeyboardCustomLayouts = {
+    kadiwéu: {
+        layout: {
+            default: [
+                '1 2 3 4 5 6 7 8 9 0',
+                'q w e r t y u i o p',
+                'a s d f g h j k l',
+                'z x c v b n m ǥ',
+                '{shift} {space} {bksp}',
+            ],
+            shift: [
+                '! @ # $ % ^ & * ( )',
+                'Q W E R T Y U I O P',
+                'A S D F G H J K L',
+                'Z X C V B N M Ǥ',
+                '{shift} {space} {bksp}',
+            ],
+        },
+        display: {
+            '{bksp}': '⌫',
+            '{shift}': '⇧',
+            '{space}': '␣',
+        },
+    },
+};

package/dist/VirtualKeyboard/VirtualKeyboard.d.ts

@@ -0,0 +1,9 @@
+import 'react-simple-keyboard/build/css/index.css';
+import './style.scss';
+type Props = {
+    onClose: () => void;
+    defaultLayout: string;
+    closeLabel: string;
+};
+export default function VirtualKeyboard({ onClose, defaultLayout, closeLabel, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};