tycho-components 0.0.10-SNAPSHOT-7 → 0.0.10-SNAPSHOT-8

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 {};

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/index.d.ts

@@ -5,11 +5,14 @@ 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 { 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 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,10 @@ 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 { 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';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.0.10-SNAPSHOT-7",
+  "version": "0.0.10-SNAPSHOT-8",
   "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,7 @@
     "react-dom": ">=17 <19",
     "react-hook-form": "^7.45.2",
     "react-i18next": "^13.0.2",
-    "tycho-storybook": "0.1.3",
+    "tycho-storybook": "0.1.5-SNAPSHOT",
     "yup": "^1.2.0"
   },
   "devDependencies": {