react-science 0.22.0 → 0.22.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "0.22.0",
+  "version": "0.22.2",
   "description": "React components to build analysis UI",
   "exports": {
     "./app": {
@@ -26,15 +26,14 @@
   ],
   "scripts": {
     "build": "npm run clean && npm run build-ts && npm run fix-react-shadow",
-    "build-all": "npm run build-app && npm run build-stories && mv build dist/stories",
+    "build-all": "npm run build-app && npm run build-storybook && mv storybook-static dist/stories",
     "build-app": "cross-env NO_MINIFY=true vite build",
-    "build-stories": "ladle build",
+    "build-storybook": "storybook build",
     "build-ts": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
     "check-types": "tsc --noEmit",
     "clean": "rimraf lib lib-esm",
     "createData": "npm run prepack && node scripts/createData",
-    "dev": "echo Use npm run dev-app or npm run dev-stories && exit 1",
-    "dev-stories": "ladle serve",
+    "dev": "echo Use npm run dev-app or npm run storybook && exit 1",
     "dev-app": "vite --open /pages/demo.html",
     "eslint": "eslint .",
     "eslint-fix": "npm run eslint -- --fix",
@@ -46,6 +45,7 @@
     "prettier": "prettier --check .",
     "prettier-write": "prettier --write .",
     "serve": "vite preview",
+    "storybook": "storybook dev -p 6006",
     "test": "npm run playwright && npm run test-only && npm run eslint && npm run prettier && npm run check-types",
     "test-only": "vitest run --coverage "
   },
@@ -78,7 +78,7 @@
     "ml-gsd": "^12.1.3",
     "ml-peak-shape-generator": "^4.1.2",
     "ml-signal-processing": "^1.0.3",
-    "ml-spectra-processing": "^12.3.0",
+    "ml-spectra-processing": "12.3.0",
     "ms-spectrum": "^2.3.1",
     "netcdfjs": "^2.0.2",
     "react-d3-utils": "^1.0.0",
@@ -98,9 +98,12 @@
   "devDependencies": {
     "@babel/core": "^7.21.4",
     "@babel/eslint-parser": "^7.21.3",
-    "@ladle/react": "^2.12.3",
     "@playwright/experimental-ct-react": "^1.33.0",
     "@playwright/test": "^1.33.0",
+    "@storybook/addon-essentials": "^7.0.10",
+    "@storybook/blocks": "^7.0.10",
+    "@storybook/react": "^7.0.10",
+    "@storybook/react-vite": "^7.0.10",
     "@types/babel__core": "^7.20.0",
     "@types/d3-scale-chromatic": "^3.0.0",
     "@types/lodash": "^4.14.194",
@@ -113,11 +116,13 @@
     "cross-env": "^7.0.3",
     "eslint": "^8.39.0",
     "eslint-config-zakodium": "^7.2.0",
+    "eslint-plugin-storybook": "^0.6.12",
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ocl": "^5.0.0",
     "rimraf": "^5.0.0",
+    "storybook": "^7.0.10",
     "typescript": "^5.0.4",
     "vite": "^4.3.3",
     "vitest": "^0.30.1"

package/src/components/accordion/Accordion.tsx

@@ -1,8 +1,12 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import type { ReactElement, ReactNode, ReactFragment } from 'react';
-
-import { useDoubleClick } from '../hooks/index';
+import type {
+  ReactElement,
+  ReactNode,
+  ReactFragment,
+  MouseEvent as ReactMouseEvent,
+} from 'react';
+import { useCallback } from 'react';
 
 import { useAccordionContext } from './AccordionContext';
 
@@ -61,10 +65,16 @@ export function Accordion(props: AccordionProps) {
 Accordion.Item = function AccordionItem(props: AccordionItemProps) {
   const { item, utils } = useAccordionContext(props.title, props.defaultOpened);
 
-  const onClickHandle = useDoubleClick({
-    onClick: utils.toggle,
-    onDoubleClick: utils.clear,
-  });
+  const onClickHandle = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
+      if (event.shiftKey) {
+        utils.clear();
+      } else {
+        utils.toggle();
+      }
+    },
+    [utils],
+  );
 
   let displayable = false;
 
@@ -87,7 +97,7 @@ Accordion.Item = function AccordionItem(props: AccordionItemProps) {
           display: 'flex',
           alignItems: 'center',
           width: '100%',
-          userSelect: 'text',
+          userSelect: 'none',
         }}
         css={styles.header}
       >

package/src/components/modal/useDialog.ts

@@ -42,6 +42,7 @@ export function useDialog({
 
   const onClick = useCallback<MouseEventHandler<HTMLDialogElement>>(
     (event) => {
+      event.stopPropagation();
       // Since the dialog has no size of itself, this condition is only
       // `true` when we click on the backdrop.
       if (event.target === event.currentTarget && requestCloseOnBackdrop) {

package/src/components/tabs/Tabs.tsx

@@ -152,7 +152,12 @@ function TabsHorizontal<T extends string = string>(
   const item = useTabsContext();
   return (
     <div
-      style={{ display: 'flex', flexDirection: 'column', overflowX: 'hidden' }}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        overflowX: 'hidden',
+        height: '100%',
+      }}
     >
       <div
         style={{

package/src/styles/storybook-globals.css

@@ -0,0 +1,6 @@
+html,
+body,
+#storybook-root {
+  height: 100%;
+  margin: 0;
+}