@peassoft/mnr-web-ui-kit 0.1.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+## The MIT License (MIT) ##
+
+Copyright (c) 2024 Alexey Gorokhov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# Memorize'n'Revise Web UI Kit

package/dist/button/index.d.ts

@@ -0,0 +1,24 @@
+import { type JSX } from 'react';
+import './styles.css';
+type Props = {
+    /** Button label */
+    label: string;
+    /** Kind of the button */
+    variant?: 'primary' | 'secondary';
+    /** Size of the button */
+    size?: 'normal' | 'small';
+    /** Whether the button is stretched to the size of its container */
+    stretched?: boolean;
+    /** Whether action initiated by click on the button is in progress */
+    isInProgress?: boolean;
+    /** Ref */
+    ref?: React.RefObject<HTMLButtonElement | null>;
+    /** onClick event handler; is ignored if props.isInProgress === true */
+    onClick: () => unknown;
+    /** Optional handler of Tab key press */
+    onTab?: () => unknown;
+    /** Optional handler of Shift + Tab key press */
+    onShiftTab?: () => unknown;
+};
+export declare function Button(props: Props): JSX.Element;
+export {};

package/dist/button/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import './styles.css';
+import processClick from './process-click.js';
+import processKeyDown from './process-key-down.js';
+export function Button(props) {
+  const {
+    label,
+    variant = 'primary',
+    size = 'normal',
+    stretched = false,
+    isInProgress = false,
+    ref,
+    onClick,
+    onTab,
+    onShiftTab
+  } = props;
+  const handleClick = useCallback(() => processClick(isInProgress, onClick), [isInProgress, onClick]);
+  const handleKeyDown = useCallback(e => processKeyDown(e, onTab, onShiftTab), [onTab, onShiftTab]);
+  const btnCn = 'uikit_Button_btn' + (variant === 'secondary' ? ' uikit_Button_btn--secondary' : '') + (stretched ? ' uikit_Button_btn--stretched uikit_Button_btn--withTopMargin' : ' uikit_Button_btn--withLeftMargin') + (size === 'small' ? ' uikit_Button_btn--small' : '');
+  const labelCn = isInProgress ? 'uikit_Button_label--hidden' : '';
+  return _jsxs("button", {
+    ref: ref,
+    type: 'button',
+    className: btnCn,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    children: [_jsx("span", {
+      className: labelCn,
+      children: label
+    }), !!isInProgress && _jsx("div", {
+      className: 'uikit_Button_spinner',
+      "data-test-id": 'spinner'
+    })]
+  });
+}

package/dist/button/process-click.d.ts

@@ -0,0 +1 @@
+export default function processClick(isInProgress: boolean, onClick: () => void): void;

package/dist/button/process-click.js

@@ -0,0 +1,3 @@
+export default function processClick(isInProgress, onClick) {
+  if (!isInProgress) onClick();
+}

package/dist/button/process-key-down.d.ts

@@ -0,0 +1,2 @@
+export declare const TAB_KEYCODE = 9;
+export default function processKeyDown(e: Pick<React.KeyboardEvent, 'which' | 'shiftKey' | 'preventDefault'>, onTab: (() => unknown) | undefined, onShiftTab: (() => unknown) | undefined): void;

package/dist/button/process-key-down.js

@@ -0,0 +1,12 @@
+export const TAB_KEYCODE = 9;
+export default function processKeyDown(e, onTab, onShiftTab) {
+  if (e.which === TAB_KEYCODE && onTab && !e.shiftKey) {
+    e.preventDefault();
+    onTab();
+    return;
+  }
+  if (e.which === TAB_KEYCODE && onShiftTab && e.shiftKey) {
+    e.preventDefault();
+    onShiftTab();
+  }
+}

package/dist/button/styles.css

@@ -0,0 +1,76 @@
+.uikit_Button_btn {
+  display: block;
+  appearance: none;
+  border: 0;
+  color: #f0e9d2;
+  background-color: #678983;
+  border-radius: 5px;
+  font-family: inherit;
+  font-size: 1em;
+  margin: 0;
+  padding: 1em 2em;
+  cursor: pointer;
+  position: relative;
+  outline-offset: 1px;
+}
+
+.uikit_Button_btn--secondary {
+  color: #678983;
+  background-color: transparent;
+  border: 1px solid currentColor;
+}
+
+.uikit_Button_btn--stretched {
+  width: 100%;
+}
+
+.uikit_Button_btn--small {
+  padding: .8em 1.4em;
+}
+
+.uikit_Button_btn--withLeftMargin:not(:first-child) {
+  margin-left: 1em;
+}
+
+.uikit_Button_btn--withTopMargin:not(:first-child) {
+  margin-top: 1em;
+}
+
+.uikit_Button_label--hidden {
+  opacity: 0;
+}
+
+.uikit_Button_spinner {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: currentColor;
+  animation: uikit_Button_spinner_animation 1s linear infinite alternate;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(calc(-50% - 12px), -50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .uikit_Button_spinner {
+    box-shadow: 12px 0px 0px 0px currentColor, 24px 0px 0px 0px currentColor;
+  }
+}
+
+@keyframes uikit_Button_spinner_animation{
+  0% {
+    opacity: 1;
+    box-shadow: 12px 0px 0px 0px currentColor, 24px 0px 0px 0px currentColor;
+  }
+
+  25% {
+    opacity: 0.4;
+    box-shadow: 12px 0px 0px 0px currentColor, 24px 0px 0px 0px currentColor;
+  }
+
+  75% {
+    opacity: 0.4;
+    box-shadow: 12px 0px 0px 0px currentColor, 24px 0px 0px 0px currentColor;
+  }
+}

package/dist/button-radio-group/index.d.ts

@@ -0,0 +1,46 @@
+import { type JSX } from 'react';
+import './styles.css';
+export type ButtonRadioGroupItem = {
+    /** Unique item ID */
+    id: string;
+    /** Contents of the button */
+    contents: React.ReactNode;
+    /**
+     * Optional description label.
+     * Should be provided if button contents does not contain descriptive text.
+     */
+    a11yLabel?: string;
+};
+type Props = {
+    /**
+     * Optional. Visible label for the entire group of radio buttons.
+     *
+     * If `label` is provided, `groupA11yLabel` is ignored.
+     * If `label` is NOT provided, you should provide `groupA11yLabel`.
+     */
+    label?: string;
+    /**
+     * Optional. Accessability label for the entire group of radio buttons.
+     *
+     * If `label` is provided, `groupA11yLabel` is ignored.
+     */
+    groupA11yLabel?: string;
+    /** Items of the group */
+    items: ButtonRadioGroupItem[];
+    /** ID of the currently checked item */
+    selectedItemId: string;
+    /** Handler for change event */
+    onChange: (itemId: string) => unknown;
+    /**
+     * Exposes react ref object that might be used for setting focus on the currently
+     * checked item from outside the component
+     */
+    focusHandle?: React.RefObject<HTMLButtonElement | null>;
+};
+/**
+ * Standalone radio group widget styled as a set of toggle buttons.
+ *
+ * Note: Not for use within a toolbar.
+ */
+export declare function ButtonRadioGroup(props: Props): JSX.Element;
+export {};

package/dist/button-radio-group/index.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useId, createRef } from 'react';
+import './styles.css';
+/**
+ * Standalone radio group widget styled as a set of toggle buttons.
+ *
+ * Note: Not for use within a toolbar.
+ */
+export function ButtonRadioGroup(props) {
+  const {
+    label,
+    groupA11yLabel,
+    items,
+    selectedItemId,
+    onChange,
+    focusHandle
+  } = props;
+  const labelDomId = useId();
+  const buttonRefs = useMemo(() => items.map(item => {
+    return item.id === selectedItemId ? focusHandle : createRef();
+  }), [items, selectedItemId, focusHandle]);
+  const handleKeyDown = useCallback(event => {
+    const currIdx = items.findIndex(item => item.id === selectedItemId);
+    let nextIdx = null;
+    switch (event.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        nextIdx = currIdx + 1;
+        if (nextIdx > items.length - 1) nextIdx = 0;
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        nextIdx = currIdx - 1;
+        if (nextIdx < 0) nextIdx = items.length - 1;
+    }
+    if (nextIdx != null) {
+      const nextItem = items[nextIdx];
+      if (nextItem) {
+        onChange(nextItem.id);
+      }
+      const nextRef = buttonRefs[nextIdx];
+      if (nextRef) {
+        nextRef.current?.focus();
+      }
+    }
+  }, [items, selectedItemId, onChange, buttonRefs]);
+  return _jsxs(_Fragment, {
+    children: [label && _jsx("p", {
+      id: labelDomId,
+      className: 'uikit_ButtonRadioGroup_label',
+      children: label
+    }), _jsx("div", {
+      className: 'uikit_ButtonRadioGroup_cont',
+      role: 'radiogroup',
+      "aria-labelledby": label ? labelDomId : undefined,
+      "aria-label": !label && groupA11yLabel ? groupA11yLabel : undefined,
+      children: items.map((item, idx) => _jsx("button", {
+        ref: buttonRefs[idx],
+        type: 'button',
+        className: 'uikit_ButtonRadioGroup_btn' + (item.id === selectedItemId ? ' uikit_ButtonRadioGroup_btn--checked' : '') + (idx === items.length - 1 ? ' uikit_ButtonRadioGroup_btn--last' : '') + (idx > 0 && idx < items.length - 1 ? ' uikit_ButtonRadioGroup_btn--mid' : ''),
+        tabIndex: item.id === selectedItemId ? 0 : -1,
+        role: 'radio',
+        "aria-label": item.a11yLabel || undefined,
+        "aria-checked": item.id === selectedItemId,
+        title: item.a11yLabel,
+        onClick: () => {
+          if (item.id !== selectedItemId) {
+            onChange(item.id);
+          }
+        },
+        onKeyDown: handleKeyDown,
+        children: item.contents
+      }, item.id))
+    })]
+  });
+}

package/dist/button-radio-group/styles.css

@@ -0,0 +1,39 @@
+.uikit_ButtonRadioGroup_label {
+  margin: 0 0 0.5em;
+  color: #848484;
+}
+
+.uikit_ButtonRadioGroup_cont {
+  display: flex;
+  align-items: center;
+}
+
+.uikit_ButtonRadioGroup_btn {
+  display: block;
+  appearance: none;
+  border: 1px solid #bcbcbc;
+  border-right: 0;
+  color: inherit;
+  background-color: transparent;
+  border-radius: 5px 0 0 5px;
+  font-family: inherit;
+  font-size: 1em;
+  margin: 0;
+  padding: 0.6em;
+  cursor: pointer;
+  position: relative;
+  outline-offset: 1px;
+}
+
+.uikit_ButtonRadioGroup_btn--checked {
+  background-color: #ddd;
+}
+
+.uikit_ButtonRadioGroup_btn--last {
+  border-radius: 0 5px 5px 0;
+  border-right: 1px solid #bcbcbc;
+}
+
+.uikit_ButtonRadioGroup_btn--mid {
+  border-radius: 0;
+}

package/dist/error-message/index.d.ts

@@ -0,0 +1,15 @@
+import { type JSX } from 'react';
+import './styles.css';
+type Props = {
+    /**
+     * Variant of error message.
+     *
+     * "standalone": a message which is not a part of any other widget.
+     * "attached": a message which is a part of another widget.
+     */
+    variant: 'standalone' | 'attached';
+    /** Text of error message */
+    children: string;
+};
+export declare function ErrorMessage(props: Props): JSX.Element;
+export {};

package/dist/error-message/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './styles.css';
+export function ErrorMessage(props) {
+  const {
+    variant,
+    children
+  } = props;
+  const className = 'uikit_ErrorMessage' + (variant === 'standalone' ? ' uikit_ErrorMessage--standalone' : '');
+  return _jsx("p", {
+    className: className,
+    children: children
+  });
+}

package/dist/error-message/styles.css

@@ -0,0 +1,10 @@
+.uikit_ErrorMessage {
+  font-size: 0.85em;
+  color: #a7241b;
+  margin: 0.5em 0 0;
+}
+
+
+.uikit_ErrorMessage--standalone {
+  margin: 1.8em 0 0;
+}

package/dist/input-field/index.d.ts

@@ -0,0 +1,28 @@
+import { type JSX } from 'react';
+import './styles.css';
+type Props = {
+    /** Type of the inner input element */
+    type?: 'text' | 'email' | 'password';
+    /** Label */
+    label: string;
+    /** autocomplete attribute */
+    autocompleteAttribute?: string;
+    /** Width in any CSS length value */
+    width?: string;
+    /** Error message */
+    errorMessage?: string;
+    /** Controlled value */
+    value: string;
+    /** Ref */
+    ref?: React.RefObject<HTMLInputElement | null>;
+    /** onChange callback */
+    onChange: (newValue: string) => unknown;
+    /** Optional handler of Tab key press */
+    onTab?: () => unknown;
+    /** Optional handler of Shift + Tab key press */
+    onShiftTab?: () => unknown;
+    /** Optional handler of the input onBlur event */
+    onBlur?: () => unknown;
+};
+export declare function InputField(props: Props): JSX.Element;
+export {};

package/dist/input-field/index.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+import './styles.css';
+import processKeyDown from './process-key-down.js';
+export function InputField(props) {
+  const {
+    type = 'text',
+    label,
+    autocompleteAttribute,
+    width = '100%',
+    errorMessage,
+    value,
+    ref,
+    onChange,
+    onTab,
+    onShiftTab,
+    onBlur
+  } = props;
+  const [isCapslockOn, setIsCapslockOn] = useState(false);
+  const handleChange = useCallback(e => onChange(e.target.value), [onChange]);
+  const handleKeyDown = useCallback(e => processKeyDown(e, onTab, onShiftTab, onBlur), [onTab, onShiftTab, onBlur]);
+  useEffect(() => {
+    function detectCapsLock(e) {
+      if (e.getModifierState('CapsLock')) {
+        if (!isCapslockOn) setIsCapslockOn(true);
+        return;
+      }
+      if (isCapslockOn) setIsCapslockOn(false);
+    }
+    // We need to listen for both keydown and keyup events so that we can detect presses
+    // of the cap lock key itself. Usually browsers dispatch a keydown event when a
+    // key is pressed down and a keyup event when it’s released, but for the caps
+    // lock key only one of these events is dispatched on each press.
+    //
+    // All browsers dispatch only a keydown event when the caps lock key is pressed to
+    // turn caps lock on. Firefox also dispatches only a keydown event when the caps lock
+    // key is pressed to turn caps lock off, but Chrome, Safari, and Edge dispatch only
+    // a keyup event instead (in effect, they act as if caps lock is another shift key
+    // that’s being pressed down for the duration of caps lock being turned on).
+    window.addEventListener('keydown', detectCapsLock);
+    window.addEventListener('keyup', detectCapsLock);
+    return () => {
+      window.removeEventListener('keydown', detectCapsLock);
+      window.removeEventListener('keyup', detectCapsLock);
+    };
+  }, [isCapslockOn]);
+  return _jsxs("div", {
+    className: 'uikit_InputField_cont',
+    style: {
+      width
+    },
+    children: [_jsxs("label", {
+      className: 'uikit_InputField_innerCont',
+      children: [_jsx("span", {
+        className: 'uikit_InputField_label',
+        children: label
+      }), _jsx("input", {
+        ref: ref,
+        className: 'uikit_InputField_input',
+        type: type,
+        autoComplete: autocompleteAttribute,
+        value: value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onBlur: onBlur || undefined
+      })]
+    }), type === 'password' && !!isCapslockOn && _jsxs("div", {
+      className: 'uikit_InputField_capslockMsg',
+      children: [_jsx("svg", {
+        width: '24',
+        height: '24',
+        viewBox: '0 0 24 24',
+        className: 'uikit_InputField_capslockIcon',
+        children: _jsx("path", {
+          d: 'M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648\n                2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93\n                7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055\n                7.055-2.93zM11.016 6.984h1.969v6h-1.969v-6zM11.016 15h1.969v2.016h-1.969v-2.016z'
+        })
+      }), _jsx("span", {
+        children: "CapsLock"
+      })]
+    }), !!errorMessage && _jsx("div", {
+      className: 'uikit_InputField_errorMsg',
+      children: errorMessage
+    })]
+  });
+}

package/dist/input-field/process-key-down.d.ts

@@ -0,0 +1,2 @@
+export declare const TAB_KEYCODE = 9;
+export default function processKeyDown(e: Pick<React.KeyboardEvent, 'which' | 'shiftKey' | 'preventDefault'>, onTab: (() => unknown) | undefined, onShiftTab: (() => unknown) | undefined, onBlur: (() => unknown) | undefined): void;

package/dist/input-field/process-key-down.js

@@ -0,0 +1,14 @@
+export const TAB_KEYCODE = 9;
+export default function processKeyDown(e, onTab, onShiftTab, onBlur) {
+  if (e.which === TAB_KEYCODE && onTab && !e.shiftKey) {
+    e.preventDefault();
+    onTab();
+    if (onBlur) onBlur();
+    return;
+  }
+  if (e.which === TAB_KEYCODE && onShiftTab && e.shiftKey) {
+    e.preventDefault();
+    onShiftTab();
+    if (onBlur) onBlur();
+  }
+}

package/dist/input-field/styles.css

@@ -0,0 +1,48 @@
+.uikit_InputField_cont:not(:first-child) {
+  margin-top: 1.5em;
+}
+
+.uikit_InputField_innerCont {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.uikit_InputField_label {
+  display: block;
+  margin-bottom: 0.25em;
+  color: #848484;
+  width: 100%;
+}
+
+.uikit_InputField_input {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid #bcbcbc;
+  border-radius: 5px;
+  font-size: 1.2em;
+  padding: 0.5em 1em;
+  color: #242629;
+  background-color: #fff;
+  font-family: inherit;
+}
+
+.uikit_InputField_capslockMsg {
+  display: flex;
+  gap: .5em;
+  align-items: center;
+  margin-top: 0.2em;
+  font-size: 0.85rem;
+}
+
+.uikit_InputField_capslockIcon {
+  color: #a7241b;
+  fill: currentColor;
+}
+
+.uikit_InputField_errorMsg {
+  color: #a7241b;
+  font-size: 0.85rem;
+  margin-top: 0.2em;
+}

package/dist/plain-select/icon.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+type Props = {
+    selected: boolean;
+};
+export default function Icon(props: Props): JSX.Element;
+export {};

package/dist/plain-select/icon.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Icon(props) {
+  const {
+    selected
+  } = props;
+  const className = 'uikit_PlainSelect_icon' + (selected ? '' : ' uikit_PlainSelect_icon--hidden');
+  return _jsx("svg", {
+    className: className,
+    width: '24',
+    height: '24',
+    viewBox: '0 0 24 24',
+    children: _jsx("path", {
+      d: 'M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z',
+      fill: '#24b23e'
+    })
+  });
+}

package/dist/plain-select/index.d.ts

@@ -0,0 +1,61 @@
+import { type JSX } from 'react';
+import './styles.css';
+type Props = {
+    /**
+     * Label
+     */
+    label: string;
+    /**
+     * Optional. Flag to switch the multi-select mode.
+     * If provided and set to true, allows multiple selections.
+     * Defaults to false.
+     */
+    multiple?: boolean;
+    /**
+     * List items
+     */
+    items: PlainSelectItem[];
+    /**
+     * Currently selected item's ID (for single-select mode)
+     * or array of items' IDs (for multi-select mode).
+     *
+     * The component throws an Error if:
+     * - a single string value is provided in multi-select mode;
+     * - an array of string values is provided in single-select mode.
+     *
+     * In order to indicate that no item/items are selected:
+     * - for single-select mode: pass null;
+     * - for multi-select mode: pass an empty array or null.
+     */
+    selectedItemId: string | string[] | null;
+    /** Maximum height of list container set in any CSS length value (e.g. px, em, etc).
+     * If not provided, list container is as high as all its list items' height.
+     */
+    maxHeight?: string;
+    /**
+     * Callback function invoked when selected item/items change.
+     *
+     * @param payload In single-select mode: ID of newely selected item.
+     *                In multi-select mode: Array of IDs of selected items after change.
+     *                Might be an empty array as multi-select mode allows deselecting
+     *                all items.
+     */
+    onChange: (payload: string | string[]) => unknown;
+};
+/** Item descriptor */
+export type PlainSelectItem = {
+    /** Unique ID */
+    id: string;
+    /** Item's main title */
+    title: string;
+    /** Optional additional description */
+    description?: string;
+};
+/**
+ * Select element implementing Listbox pattern. Presents a list of options and allows
+ * a user to select one or more of them.
+ *
+ * Note: Can only be used in controlled mode.
+ */
+export declare function PlainSelect(props: Props): JSX.Element;
+export {};

package/dist/plain-select/index.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useCallback, useState, useMemo, useLayoutEffect, createRef } from 'react';
+import './styles.css';
+import Icon from './icon.js';
+/**
+ * Select element implementing Listbox pattern. Presents a list of options and allows
+ * a user to select one or more of them.
+ *
+ * Note: Can only be used in controlled mode.
+ */
+export function PlainSelect(props) {
+  const {
+    label,
+    multiple = false,
+    items,
+    selectedItemId,
+    maxHeight,
+    onChange
+  } = props;
+  const labelDomId = useId();
+  const [currFocusedIdx, setCurrFocusedIdx] = useState(() => {
+    if (multiple) {
+      if (Array.isArray(selectedItemId)) {
+        const firstId = selectedItemId[0];
+        if (firstId) {
+          const idx = items.findIndex(item => item.id === firstId);
+          if (idx >= 0) {
+            return idx;
+          } else {
+            return 0;
+          }
+        } else {
+          return 0;
+        }
+      } else {
+        return 0;
+      }
+    } else {
+      return 0;
+    }
+  });
+  const itemRefs = useMemo(() => items.map(() => createRef()), [items]);
+  const handleSingleSelectKeyDown = useCallback(event => {
+    const currSelectedItemIdx = items.findIndex(item => item.id === selectedItemId);
+    let nextSelectedItemIdx = currSelectedItemIdx;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        if (currSelectedItemIdx < items.length - 1) {
+          nextSelectedItemIdx = currSelectedItemIdx + 1;
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        if (currSelectedItemIdx > 0) {
+          nextSelectedItemIdx = currSelectedItemIdx - 1;
+        }
+    }
+    if (currSelectedItemIdx !== nextSelectedItemIdx) {
+      const nextSelectedItem = items[nextSelectedItemIdx];
+      if (nextSelectedItem != null) {
+        onChange(nextSelectedItem.id);
+        itemRefs[nextSelectedItemIdx]?.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest'
+        });
+      }
+    }
+  }, [items, selectedItemId, itemRefs, onChange]);
+  const handleMultiSelectKeyDown = useCallback(event => {
+    switch (event.key) {
+      case 'ArrowDown':
+        {
+          event.preventDefault();
+          const nextFocusedIdx = currFocusedIdx + 1;
+          if (nextFocusedIdx <= items.length - 1) {
+            setCurrFocusedIdx(nextFocusedIdx);
+          }
+          break;
+        }
+      case 'ArrowUp':
+        {
+          event.preventDefault();
+          const nextFocusedIdx = currFocusedIdx - 1;
+          if (nextFocusedIdx >= 0) {
+            setCurrFocusedIdx(nextFocusedIdx);
+          }
+          break;
+        }
+      case ' ':
+        {
+          event.preventDefault();
+          const item = items[currFocusedIdx];
+          if (item) {
+            if (Array.isArray(selectedItemId)) {
+              if (selectedItemId.includes(item.id)) {
+                onChange(selectedItemId.filter(id => id !== item.id));
+              } else {
+                onChange(selectedItemId.concat(item.id));
+              }
+            } else {
+              onChange([item.id]);
+            }
+          }
+          break;
+        }
+      case 'a':
+        {
+          if (event.ctrlKey || event.metaKey) {
+            event.preventDefault();
+            if (Array.isArray(selectedItemId) && selectedItemId.length === items.length) {
+              onChange([]);
+            } else {
+              onChange(items.map(item => item.id));
+            }
+          }
+        }
+    }
+  }, [currFocusedIdx, items, selectedItemId, onChange]);
+  const handleItemClick = useCallback(id => {
+    if (multiple) {
+      const itemIdx = items.findIndex(item => item.id === id);
+      if (itemIdx >= 0) {
+        setCurrFocusedIdx(itemIdx);
+        if (Array.isArray(selectedItemId)) {
+          if (selectedItemId.includes(id)) {
+            onChange(selectedItemId.filter(selectedId => selectedId !== id));
+          } else {
+            onChange(selectedItemId.concat(id));
+          }
+        } else {
+          onChange([id]);
+        }
+      }
+    } else if (id !== selectedItemId) {
+      onChange(id);
+    }
+  }, [multiple, selectedItemId, onChange, items]);
+  useLayoutEffect(() => {
+    if (multiple && itemRefs.some(ref => ref.current === document.activeElement)) {
+      itemRefs[currFocusedIdx]?.current?.focus();
+    }
+  }, [multiple, itemRefs, currFocusedIdx]);
+  if (multiple && !Array.isArray(selectedItemId) && selectedItemId != null) {
+    const msg = 'single string value in selectedItemId prop is not ' + 'acceptable for multi-select mode';
+    throw new Error(msg);
+  }
+  if (!multiple && Array.isArray(selectedItemId)) {
+    const msg = 'array in selectedItemId prop is not ' + 'acceptable for single-select mode';
+    throw new Error(msg);
+  }
+  return _jsxs(_Fragment, {
+    children: [_jsx("p", {
+      id: labelDomId,
+      className: 'uikit_PlainSelect_label',
+      children: label
+    }), _jsx("ul", {
+      className: 'uikit_PlainSelect_cont',
+      style: {
+        ...(maxHeight ? {
+          maxHeight,
+          overflow: 'auto'
+        } : {})
+      },
+      role: 'listbox',
+      "aria-labelledby": labelDomId,
+      "aria-multiselectable": multiple,
+      tabIndex: multiple ? -1 : 0,
+      onKeyDown: multiple ? undefined : handleSingleSelectKeyDown,
+      children: items.map((item, idx) => {
+        const isSelected = multiple ? selectedItemId != null && selectedItemId.includes(item.id) : selectedItemId != null && item.id === selectedItemId;
+        return _jsxs("li", {
+          ref: itemRefs[idx],
+          className: 'uikit_PlainSelect_itemCont',
+          role: 'option',
+          "aria-selected": isSelected,
+          tabIndex: multiple && currFocusedIdx === idx ? 0 : -1,
+          onClick: () => handleItemClick(item.id),
+          onKeyDown: multiple ? handleMultiSelectKeyDown : undefined,
+          children: [_jsx(Icon, {
+            selected: isSelected
+          }), _jsxs("div", {
+            className: 'uikit_PlainSelect_itemContent',
+            children: [_jsx("div", {
+              children: item.title
+            }), item.description && _jsx("div", {
+              className: 'uikit_PlainSelect_description',
+              children: item.description
+            })]
+          })]
+        }, item.id);
+      })
+    })]
+  });
+}

package/dist/plain-select/styles.css

@@ -0,0 +1,41 @@
+.uikit_PlainSelect_label {
+  margin: 0;
+  color: #848484;
+}
+
+.uikit_PlainSelect_cont {
+  margin: 0.5em 0 0;
+  padding: 0.5em;
+  border: 1px solid #bcbcbc;
+  list-style-type: none;
+  border-radius: 0.25em;
+}
+
+.uikit_PlainSelect_itemCont {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.25em;
+  cursor: pointer;
+}
+
+.uikit_PlainSelect_icon {
+  flex-shrink: 0;
+}
+
+.uikit_PlainSelect_icon--hidden {
+  visibility: hidden;
+}
+
+.uikit_PlainSelect_itemContent {
+  border-bottom: 1px solid #ddd;
+  flex-basis: 100%;
+  flex-shrink: 1;
+  padding-bottom: 0.25em;
+}
+
+.uikit_PlainSelect_description {
+  margin-top: 0.5em;
+  color: #848484;
+  font-size: 87.5%;
+}

package/dist/text-button/index.d.ts

@@ -0,0 +1,21 @@
+import { type JSX } from 'react';
+import './styles.css';
+type Props = {
+    /** Button label */
+    label: string;
+    /**
+     * Tab index
+     * @default 0
+     */
+    tabIndex?: number;
+    /** Ref */
+    ref?: React.RefObject<HTMLButtonElement | null>;
+    /** onClick event handler */
+    onClick: (e: React.MouseEvent) => unknown;
+    /** Optional handler of Tab key press */
+    onTab?: () => unknown;
+    /** Optional handler of Shift + Tab key press */
+    onShiftTab?: () => unknown;
+};
+export declare function TextButton(props: Props): JSX.Element;
+export {};

package/dist/text-button/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import './styles.css';
+import processKeyDown from './process-key-down.js';
+export function TextButton(props) {
+  const {
+    label,
+    tabIndex = 0,
+    ref,
+    onClick,
+    onTab,
+    onShiftTab
+  } = props;
+  const handleClick = useCallback(e => onClick(e), [onClick]);
+  const handleKeyDown = useCallback(e => processKeyDown(e, onTab, onShiftTab), [onTab, onShiftTab]);
+  return _jsx("button", {
+    ref: ref,
+    type: 'button',
+    className: 'uikit_TextButton_btn',
+    tabIndex: tabIndex,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    children: label
+  });
+}

package/dist/text-button/process-key-down.d.ts

@@ -0,0 +1,2 @@
+export declare const TAB_KEYCODE = 9;
+export default function processKeyDown(e: Pick<React.KeyboardEvent, 'which' | 'shiftKey' | 'preventDefault'>, onTab: (() => unknown) | undefined, onShiftTab: (() => unknown) | undefined): void;

package/dist/text-button/process-key-down.js

@@ -0,0 +1,12 @@
+export const TAB_KEYCODE = 9;
+export default function processKeyDown(e, onTab, onShiftTab) {
+  if (e.which === TAB_KEYCODE && onTab && !e.shiftKey) {
+    e.preventDefault();
+    onTab();
+    return;
+  }
+  if (e.which === TAB_KEYCODE && onShiftTab && e.shiftKey) {
+    e.preventDefault();
+    onShiftTab();
+  }
+}

package/dist/text-button/styles.css

@@ -0,0 +1,14 @@
+.uikit_TextButton_btn {
+  display: inline;
+  appearance: none;
+  border: 0;
+  border-bottom: 1px solid #678983;
+  color: #678983;
+  background-color: transparent;
+  font-family: inherit;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  outline-offset: 3px;
+}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@peassoft/mnr-web-ui-kit",
+  "version": "0.1.0",
+  "description": "Peassoft web UI kit for MNR web applications",
+  "type": "module",
+  "exports": {
+    "./*": "./dist/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "npm run storybook",
+    "test": "stylelint './src/**/*.css' && eslint ./ && npm run tsc && jest",
+    "tsc": "tsc --noEmit",
+    "build": "del-cli ./compiled && del-cli ./dist && tsc -p tsconfig-prod.json && babel ./compiled --out-dir ./dist && cpy './src/**/*.css' './dist' && cpy './compiled/**/*.d.ts' './dist'",
+    "storybook": "storybook dev -p 9001 --no-open",
+    "build-storybook": "storybook build"
+  },
+  "browserslist": [
+    "extends @memnrev/browserslist-config"
+  ],
+  "jest": {
+    "verbose": false,
+    "coverageDirectory": "coverage",
+    "transform": {
+      "^.+\\.(ts|js)$": [
+        "<rootDir>/node_modules/ts-jest",
+        {
+          "useESM": true
+        }
+      ]
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
+    ],
+    "extensionsToTreatAsEsm": [
+      ".ts"
+    ],
+    "moduleNameMapper": {
+      "^(\\.{1,2}/.*)\\.js$": "$1"
+    }
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.22.15",
+    "@babel/core": "^7.22.17",
+    "@babel/preset-env": "^7.22.15",
+    "@memnrev/browserslist-config": "^0.1.0",
+    "@memnrev/eslint-v9-config": "^0.1.1",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-onboarding": "^8.0.5",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-webpack5": "^8.0.5",
+    "@storybook/test": "^8.0.5",
+    "@types/jest": "^29.5.4",
+    "@types/react": "^19.0.2",
+    "cpy-cli": "^5.0.0",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.8.0",
+    "eslint-plugin-storybook": "^0.11.0",
+    "jest": "^29.4.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^8.0.5",
+    "stylelint": "^16.2.1",
+    "ts-jest": "^29.1.1",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "react": ">= 19 < 20",
+    "react-dom": ">= 19 < 20"
+  }
+}