UPDATE: Adds storybook

This is a bit on an emergency PR to unblock Dani

webapp/IronCalc/.gitignore

@@ -1,2 +1,4 @@
 node_modules/*
 dist/*
+
+*storybook.log

webapp/IronCalc/.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  viteFinal: (config) => {
+    if (!config.server) {
+      config.server = {};
+    }
+    if (!config.server.fs) {
+      config.server.fs = {};
+    }
+    config.server.fs.allow = ["../.."];
+    return config;
+  }
+};
+export default config;

webapp/IronCalc/.storybook/preview-head.html

@@ -0,0 +1,18 @@
+<style>
+  /* inter-regular - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: url("fonts/inter-v13-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* inter-600 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 600;
+    src: url("fonts/inter-v13-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+</style>

webapp/IronCalc/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

webapp/IronCalc/package.json

@@ -11,36 +11,45 @@
     "build": "vite build && tsc",
     "check": "biome check ./src",
     "check-write": "biome check --write ./src",
-    "test": "vitest run"
+    "test": "vitest run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
+    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/styled": "^11.14.0",
-    "@ironcalc/wasm": "^0.3.0",
+    "@ironcalc/wasm": "file:../../bindings/wasm/pkg",
-    "@mui/material": "^5.15.15",
+    "@mui/material": "^6.4",
+    "@mui/system": "^6.4",
     "i18next": "^23.11.1",
-    "lucide-react": "^0.427.0",
+    "lucide-react": "^0.473.0",
     "react-colorful": "^5.6.1",
-    "react-i18next": "^13.5.0"
+    "react-i18next": "^15.4.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
+    "@chromatic-com/storybook": "^3.2.4",
+    "@storybook/addon-essentials": "^8.6.0-alpha.0",
+    "@storybook/addon-interactions": "^8.6.0-alpha.0",
+    "@storybook/addon-onboarding": "^8.6.0-alpha.0",
+    "@storybook/blocks": "^8.6.0-alpha.0",
+    "@storybook/react": "^8.6.0-alpha.0",
+    "@storybook/react-vite": "^8.6.0-alpha.0",
+    "@storybook/test": "^8.6.0-alpha.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "storybook": "^8.6.0-alpha.0",
     "ts-node": "^10.9.2",
     "typescript": "~5.6.2",
     "vite": "^6.0.5",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^2.0.5",
+    "vitest": "^2.0.5"
-    "react": "^18.0.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",
-    "react": "^18.0.0"
+    "react": "^18.0.0",
-  },
+    "react-dom": "^18.0.0"
-  "peerDependenciesMeta": {
-    "@types/react": {
-      "optional": true
-    }
   },
   "files": [
     "dist"

webapp/IronCalc/src/components/toolbar.tsx

@@ -1,9 +1,11 @@
+import type {} from "@emotion/styled";
 import type {
   BorderOptions,
   HorizontalAlignment,
   VerticalAlignment,
 } from "@ironcalc/wasm";
 import { styled } from "@mui/material/styles";
+import type {} from "@mui/system";
 import {
   AlignCenter,
   AlignLeft,

webapp/IronCalc/src/stories/Workbook.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Workbook } from "./Workbook";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Example/Workbook",
+  component: Workbook,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "fullscreen",
+  },
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {},
+} satisfies Meta<typeof Workbook>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: "Button",
+  },
+};

webapp/IronCalc/src/stories/Workbook.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+
+import { IronCalc, Model, init } from "../index";
+
+// export interface IronCalcProps {}
+
+/** Primary UI component for user interaction */
+export const Workbook = () => {
+  const [model, setModel] = useState<Model | null>(null);
+
+  useEffect(() => {
+    async function start() {
+      await init();
+      setModel(new Model("Workbook1", "en", "UTC"));
+    }
+    start();
+  }, []);
+  if (!model) {
+    return <div>Loading...</div>;
+  }
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: "0px",
+        bottom: "0px",
+        left: "0px",
+        right: "0px",
+      }}
+    >
+      <IronCalc model={model} />
+    </div>
+  );
+};