@peassoft/mnr-web-ui-kit 0.1.1 → 1.0.0

package/README.md

@@ -1 +1,7 @@
 # Memorize'n'Revise Web UI Kit
+
+## Light/Dark Color Schemes
+
+The Kit supports the `prefers-color-scheme` media query.
+
+To check appearance of a component in any scheme, while running the Storybook, use Chrome DevTools to emulate a color scheme (`Rendering` tab).

package/dist/button/styles.css

@@ -1,9 +1,13 @@
 .uikit_Button_btn {
+  --uikit-color-main: #3f72af;
+  --uikit-color-secondary: #dbe2ef;
+
   display: block;
   appearance: none;
   border: 0;
-  color: #f0e9d2;
-  background-color: #678983;
+  color: var(--uikit-color-secondary);
+  background-color: var(--uikit-color-main);
+  border: 1px solid var(--uikit-color-main);
   border-radius: 5px;
   font-family: inherit;
   font-size: 1em;
@@ -15,9 +19,15 @@
 }
 
 .uikit_Button_btn--secondary {
-  color: #678983;
-  background-color: transparent;
-  border: 1px solid currentColor;
+  color: var(--uikit-color-main);
+  background-color: var(--uikit-color-secondary);
+  border: 1px solid var(--uikit-color-main);
+}
+
+@media (prefers-color-scheme: dark) {
+  .uikit_Button_btn--secondary {
+    border-color: var(--uikit-color-secondary);
+  }
 }
 
 .uikit_Button_btn--stretched {

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

@@ -1,9 +1,18 @@
 .uikit_ButtonRadioGroup_label {
   margin: 0 0 0.5em;
-  color: #848484;
+  color: #666;
+}
+
+@media (prefers-color-scheme: dark) {
+  .uikit_ButtonRadioGroup_label {
+    color: #979797;
+  }
 }
 
 .uikit_ButtonRadioGroup_cont {
+  --uikit-color-main: #3f72af;
+  --uikit-color-secondary: #dbe2ef;
+
   display: flex;
   align-items: center;
 }
@@ -11,10 +20,10 @@
 .uikit_ButtonRadioGroup_btn {
   display: block;
   appearance: none;
-  border: 1px solid #bcbcbc;
+  border: 1px solid var(--uikit-color-main);
   border-right: 0;
-  color: inherit;
-  background-color: transparent;
+  color: var(--uikit-color-main);
+  background-color: var(--uikit-color-secondary);
   border-radius: 5px 0 0 5px;
   font-family: inherit;
   font-size: 1em;
@@ -26,12 +35,19 @@
 }
 
 .uikit_ButtonRadioGroup_btn--checked {
-  background-color: #ddd;
+  color: var(--uikit-color-secondary);
+  background-color: var(--uikit-color-main);
+}
+
+@media (prefers-color-scheme: dark) {
+  .uikit_ButtonRadioGroup_btn--checked {
+    border-color: var(--uikit-color-main);
+  }
 }
 
 .uikit_ButtonRadioGroup_btn--last {
   border-radius: 0 5px 5px 0;
-  border-right: 1px solid #bcbcbc;
+  border-right: 1px solid var(--uikit-color-main);
 }
 
 .uikit_ButtonRadioGroup_btn--mid {

package/dist/error-message/styles.css

@@ -4,6 +4,11 @@
   margin: 0.5em 0 0;
 }
 
+@media (prefers-color-scheme: dark) {
+  .uikit_ErrorMessage {
+    color: #fb827a;
+  }
+}
 
 .uikit_ErrorMessage--standalone {
   margin: 1.8em 0 0;

package/dist/input-field/styles.css

@@ -11,10 +11,16 @@
 .uikit_InputField_label {
   display: block;
   margin-bottom: 0.25em;
-  color: #848484;
+  color: #757575;
   width: 100%;
 }
 
+@media (prefers-color-scheme: dark) {
+  .uikit_InputField_label {
+    color: #979797;
+  }
+}
+
 .uikit_InputField_input {
   display: block;
   box-sizing: border-box;
@@ -28,11 +34,25 @@
   font-family: inherit;
 }
 
+@media (prefers-color-scheme: dark) {
+  .uikit_InputField_input {
+    background-color: #f9f9f9;
+    border-color: #f9f9f9;
+  }
+}
+
 .uikit_InputField_input:disabled {
   color: #848484;
   background-color: #efefef;
 }
 
+@media (prefers-color-scheme: dark) {
+  .uikit_InputField_input:disabled {
+    background-color: #dadada;
+    border-color: #dadada;
+  }
+}
+
 .uikit_InputField_capslockMsg {
   display: flex;
   gap: .5em;
@@ -41,13 +61,31 @@
   font-size: 0.85rem;
 }
 
+@media (prefers-color-scheme: dark) {
+  .uikit_InputField_capslockMsg {
+    color: #979797;
+  }
+}
+
 .uikit_InputField_capslockIcon {
   color: #a7241b;
   fill: currentColor;
 }
 
+@media (prefers-color-scheme: dark) {
+  .uikit_InputField_capslockIcon {
+    color: #fb827a;
+  }
+}
+
 .uikit_InputField_errorMsg {
   color: #a7241b;
   font-size: 0.85rem;
   margin-top: 0.2em;
 }
+
+@media (prefers-color-scheme: dark) {
+  .uikit_InputField_errorMsg {
+    color: #fb827a;
+  }
+}

package/dist/plain-select/styles.css

@@ -1,16 +1,30 @@
 .uikit_PlainSelect_label {
   margin: 0;
-  color: #848484;
+  color: #757575;
+}
+
+@media (prefers-color-scheme: dark) {
+  .uikit_PlainSelect_label {
+    color: #979797;
+  }
 }
 
 .uikit_PlainSelect_cont {
   margin: 0.5em 0 0;
   padding: 0.5em;
+  background-color: #fff;
   border: 1px solid #bcbcbc;
   list-style-type: none;
   border-radius: 0.25em;
 }
 
+@media (prefers-color-scheme: dark) {
+  .uikit_PlainSelect_cont {
+    background-color: #f9f9f9;
+    border-color: #f9f9f9;
+  }
+}
+
 .uikit_PlainSelect_itemCont {
   display: flex;
   align-items: flex-start;
@@ -36,6 +50,6 @@
 
 .uikit_PlainSelect_description {
   margin-top: 0.5em;
-  color: #848484;
+  color: #757575;
   font-size: 87.5%;
 }

package/dist/select/index.d.ts

@@ -0,0 +1,35 @@
+import { type JSX } from 'react';
+import './styles.css';
+export type SelectItem = {
+    id: string;
+    value: string;
+};
+type Props = {
+    /** Label */
+    label: string;
+    /** Width in any CSS length value */
+    width?: string;
+    /** Error message */
+    errorMessage?: string;
+    /** Collection of items */
+    items: SelectItem[];
+    /** Controlled selected item ID */
+    selectedItemId: string | null;
+    /** Ref */
+    ref?: React.RefObject<HTMLSelectElement | null>;
+    /** onChange callback */
+    onChange: (id: 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;
+};
+/**
+ * Select component.
+ *
+ * Can only be used in controlled mode.
+ */
+export declare function Select(props: Props): JSX.Element;
+export {};

package/dist/select/index.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import './styles.css';
+import processKeyDown from './process-key-down.js';
+/**
+ * Select component.
+ *
+ * Can only be used in controlled mode.
+ */
+export function Select(props) {
+  const {
+    label,
+    width = '100%',
+    errorMessage,
+    items,
+    selectedItemId,
+    ref,
+    onChange,
+    onTab,
+    onShiftTab,
+    onBlur
+  } = props;
+  const handleChange = useCallback(e => {
+    onChange(e.target.value);
+  }, [onChange]);
+  const handleKeyDown = useCallback(e => processKeyDown(e, onTab, onShiftTab, onBlur), [onTab, onShiftTab, onBlur]);
+  return _jsxs("div", {
+    className: 'uikit_Select_cont',
+    style: {
+      width
+    },
+    children: [_jsxs("label", {
+      className: 'uikit_Select_innerCont',
+      children: [_jsx("span", {
+        className: 'uikit_Select_label',
+        children: label
+      }), _jsxs("div", {
+        className: 'uikit_Select_selectCont',
+        children: [_jsxs("select", {
+          ref: ref,
+          className: 'uikit_Select_input',
+          value: selectedItemId ?? undefined,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          onBlur: onBlur || undefined,
+          children: [selectedItemId == null && _jsx("option", {}), items.map(item => _jsx("option", {
+            value: item.id,
+            children: item.value
+          }, item.id))]
+        }), _jsx("div", {
+          className: 'uikit_Select_arrowCont',
+          children: _jsx("svg", {
+            width: '24',
+            height: '24',
+            viewBox: '0 0 24 24',
+            children: _jsx("path", {
+              d: 'M7.406 8.578l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'
+            })
+          })
+        })]
+      })]
+    }), !!errorMessage && _jsx("div", {
+      className: 'uikit_Select_errorMsg',
+      children: errorMessage
+    })]
+  });
+}

package/dist/select/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/select/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/select/styles.css

@@ -0,0 +1,68 @@
+.uikit_Select_cont:not(:first-child) {
+  margin-top: 1.5em;
+}
+
+.uikit_Select_innerCont {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.uikit_Select_label {
+  display: block;
+  margin-bottom: 0.25em;
+  color: #757575;
+  width: 100%;
+}
+
+@media (prefers-color-scheme: dark) {
+  .uikit_Select_label {
+    color: #979797;
+  }
+}
+
+.uikit_Select_selectCont {
+  position: relative;
+}
+
+.uikit_Select_input {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid #bcbcbc;
+  border-radius: 5px;
+  font-size: 1.2em;
+  padding: 0.5em 2.5em 0.5em 1em;
+  color: #242629;
+  background-color: #fff;
+  font-family: inherit;
+  appearance: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .uikit_Select_input {
+    background-color: #f9f9f9;
+    border-color: #f9f9f9;
+  }
+}
+
+.uikit_Select_arrowCont {
+  position: absolute;
+  top: 0;
+  right: 0.5em;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+}
+
+.uikit_Select_errorMsg {
+  color: #a7241b;
+  font-size: 0.85rem;
+  margin-top: 0.2em;
+}
+
+@media (prefers-color-scheme: dark) {
+  .uikit_Select_errorMsg {
+    color: #fb827a;
+  }
+}

package/dist/text-button/styles.css

@@ -2,8 +2,8 @@
   display: inline;
   appearance: none;
   border: 0;
-  border-bottom: 1px solid #678983;
-  color: #678983;
+  border-bottom: 1px solid currentColor;
+  color: #3f72af;
   background-color: transparent;
   font-family: inherit;
   font-size: 1em;
@@ -12,3 +12,9 @@
   cursor: pointer;
   outline-offset: 3px;
 }
+
+@media (prefers-color-scheme: dark) {
+  .uikit_TextButton_btn {
+    color: #dbe2ef;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peassoft/mnr-web-ui-kit",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "Peassoft web UI kit for MNR web applications",
   "type": "module",
   "exports": {
@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "dev": "npm run storybook",
-    "test": "stylelint './src/**/*.css' && eslint ./ && npm run tsc && jest",
+    "test": "stylelint './src/**/*.css' && eslint ./ && npm run tsc && vitest run",
     "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",
@@ -20,56 +20,33 @@
   "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",
+    "@memnrev/browserslist-config": "^0.2.0",
+    "@memnrev/eslint-v9-config": "^0.2.2",
+    "@storybook/addon-a11y": "^9.1.8",
+    "@storybook/addon-docs": "^9.1.8",
+    "@storybook/addon-links": "^9.1.8",
+    "@storybook/addon-onboarding": "^9.1.8",
+    "@storybook/addon-vitest": "^9.1.9",
+    "@storybook/react-vite": "^9.1.8",
+    "@types/node": "^22.18.8",
     "@types/react": "^19.0.2",
+    "@vitest/browser": "3.2.4",
+    "@vitest/coverage-v8": "3.2.4",
     "cpy-cli": "^5.0.0",
     "del-cli": "^6.0.0",
     "eslint": "^9.8.0",
-    "eslint-plugin-storybook": "^0.11.0",
-    "jest": "^29.4.1",
+    "eslint-plugin-storybook": "^9.1.8",
+    "playwright": "^1.55.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "storybook": "^8.0.5",
+    "storybook": "^9.1.8",
     "stylelint": "^16.2.1",
-    "ts-jest": "^29.1.1",
-    "ts-loader": "^9.4.4",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "react": ">= 19 < 20",