chore: move storybook to root package

.github/workflows/build.yml

@@ -52,13 +52,13 @@ jobs:
       - name: Install dependencies 🚀
         run: yarn install --immutable
       - name: Install Playwright 🚀
-        run: cd packages/storybook && yarn playwright install
+        run: yarn playwright install
       - name: Build Storybook
         run: yarn storybook:build --quiet
       - name: Serve Storybook and run tests 🔍
         run: |
           npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server packages/storybook/.out --port 6006 --silent" \
+            "npx http-server storybook-static --port 6006 --silent" \
             "npx wait-on tcp:6006 && yarn storybook:test:ci"
 
   deploy-packages:

.github/workflows/chromatic.yml

@@ -20,9 +20,13 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
 
+      - name: Build tailwind
+        run: yarn tailwind:build
+
       - name: Run Chromatic
         uses: chromaui/action@latest
         with:
-          workingDir: packages/storybook
+          storybookBaseDir: .
+          storybookConfigDir: ./.storybook
           # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
           projectToken: ${{ secrets.CHROMATIC_TOKEN }}

.github/workflows/website.yml

@@ -44,12 +44,12 @@ jobs:
       - name: Build with Storybook
         run: |
           yarn storybook:build
-          touch packages/storybook/.out/.nojekyll
-          echo "formio.tsed.dev" > packages/storybook/.out/CNAME
+          touch ./storybook-static/.nojekyll
+          echo "formio.tsed.dev" > ./storybook-static/CNAME
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: packages/storybook/.out
+          path: ./storybook-static
 
   # Deployment job
   deploy:

.gitignore

@@ -43,7 +43,7 @@ test/*.js.map
 lib
 dist
 build
-.out
+storybook-static
 /docs/api
 /docs/api/**/*.md
 

packages/storybook/.storybook/main.ts → .storybook/main.ts

@@ -1,14 +1,14 @@
 import type {StorybookConfig} from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  staticDirs: ["../../tailwind/build"],
+  staticDirs: ["../packages/tailwind/build"],
 
   stories: [
     "../stories/Getting-started.mdx",
     "../stories/**/*.mdx",
-    "../../{tailwind-formio,react-formio}/src/**/*.mdx",
-    "../../{tailwind-formio,react-formio}/src/**/*.stories.@(js|jsx|ts|tsx)",
-    "../../{tailwind-formio,react-formio}/src/**/*.story.@(js|jsx|ts|tsx)"
+    "../packages/{tailwind-formio,react-formio}/src/**/*.mdx",
+    "../packages/{tailwind-formio,react-formio}/src/**/*.stories.@(js|jsx|ts|tsx)",
+    "../packages/{tailwind-formio,react-formio}/src/**/*.story.@(js|jsx|ts|tsx)"
   ],
 
   addons: [

.storybook/styles/index.css

@@ -0,0 +1,6 @@
+@import "tailwind.css";
+@import "fonts/index.css";
+@import "typography.css";
+@import "../../node_modules/formiojs/dist/formio.full.css";
+@import "../../packages/tailwind-formio/styles/index.css";
+

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "author": "Romain Lenzotti",
   "private": true,
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/TypedProject/tsed-formio.git"
@@ -23,13 +24,17 @@
     "build": "monorepo build --verbose",
     "publish": "monorepo publish --dry-run",
     "start": "lerna run start --stream --parallel",
-    "storybook:start": "lerna run storybook:start --stream",
-    "storybook:build": "yarn tailwind:build && lerna run storybook:build --stream",
     "tailwind:build": "lerna run tailwind:build --stream --scope @tsed/tailwind",
-    "storybook:test": "yarn tailwind:build && lerna run storybook:test --stream",
-    "storybook:test:ci": "lerna run storybook:test:ci --stream",
     "release": "semantic-release",
-    "prepare": "is-ci || husky install"
+    "prepare": "is-ci || husky install",
+    "storybook:test": "yarn test-storybook",
+    "storybook:test:ci": "yarn test-storybook --maxWorkers=2",
+    "storybook:start": "storybook dev -p 6006",
+    "storybook:build": "yarn run tailwind:build && yarn run build-storybook",
+    "build-storybook": "storybook build -c .storybook",
+    "caniuse": "npx -y update-browserslist-db@latest",
+    "chromatic": "npx chromatic",
+    "watch": "nodemon --watch ./src --ext ts,js,ejs --exec \"yarn build\""
   },
   "dependencies": {
     "@formio/choices.js": "^9.0.1",
@@ -57,8 +62,20 @@
     "tooltip.js": "^1.3.3"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "3.2.3",
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-mdx-gfm": "^8.4.7",
+    "@storybook/addon-viewport": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/test-runner": "0.21.0",
     "@swc/core": "^1.2.208",
     "@swc/jest": "^0.2.21",
     "@testing-library/dom": "^8.14.0",
@@ -73,9 +90,11 @@
     "@types/prop-types": "^15.7.5",
     "@types/react-dnd": "3.0.2",
     "@types/react-dnd-html5-backend": "3.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.7",
     "babel-eslint": "^10.1.0",
     "camelcase": "6.3.0",
+    "chromatic": "11.20.2",
     "cross-env": "7.0.3",
     "eslint": "^8.15.0",
     "eslint-config-prettier": "^8.5.0",
@@ -95,6 +114,7 @@
     "jest-watch-typeahead": "^1.1.0",
     "lint-staged": "13.0.3",
     "microbundle": "0.13.0",
+    "playwright": "1.49.1",
     "postcss": "^8.4.14",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-nested": "^5.0.6",
@@ -103,10 +123,18 @@
     "postcss-safe-parser": "6.0.0",
     "prettier": "^2.6.2",
     "prettier-eslint": "^14.0.3",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-svg": "10.0.23",
     "rimraf": "^3.0.2",
     "semantic-release": "23.0.5",
     "semantic-release-slack-bot": "4.0.2",
+    "serve": "^13.0.4",
+    "storybook": "^8.4.7",
     "typescript": "4.9.5",
+    "vite": "5.1.8",
+    "vite-plugin-svgr": "^2.4.0",
     "webpack": "4.44.2"
   },
   "workspaces": {
@@ -117,15 +145,27 @@
   "monorepo": {
     "productionBranch": "master",
     "developBranch": "master",
-    "npmAccess": "public",
-    "ghpages": [
-      {
-        "dir": "./packages/storybook/.out",
-        "url": "https://github.com/tsedio/tsed-formio.git",
-        "branch": "gh-pages",
-        "cname": "formio.tsed.io"
-      }
+    "npmAccess": "public"
+  },
+  "packageManager": "[email protected]",
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
     ]
   },
-  "packageManager": "[email protected]"
+  "lint-staged": {
+    "**/*.{ts,js}": [
+      "eslint --fix"
+    ],
+    "**/*.{json,md,yml,yaml}": [
+      "prettier --write"
+    ]
+  }
 }

packages/config/package.json

@@ -7,6 +7,7 @@
   "author": "Romain Lenzotti",
   "license": "MIT",
   "private": true,
+  "type": "commonjs",
   "scripts": {
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "yarn lint --fix"
@@ -17,7 +18,5 @@
   "devDependencies": {
     "@tsed/tailwind": "2.3.1",
     "@tsed/yarn-workspaces": "1.19.3"
-  },
-  "dependencies": {},
-  "peerDependencies": {}
+  }
 }

packages/react-formio-container/package.json

@@ -95,6 +95,5 @@
     "tooltip.js": {
       "optional": false
     }
-  },
-  "dependencies": {}
+  }
 }

packages/react-formio-stores/package.json

@@ -24,7 +24,7 @@
     "@tsed/react-formio": "workspace:*",
     "@tsed/redux-utils": "workspace:*",
     "eventemitter2": "^6.4.3",
-    "prop-types": "^15.7.2"
+    "prop-types": "15.8.1"
   },
   "peerDependencies": {
     "@formio/choices.js": ">=9.0.1",

packages/react-formio/package.json

@@ -23,7 +23,7 @@
   "dependencies": {
     "classnames": "^2.3.1",
     "eventemitter2": "^6.4.3",
-    "prop-types": "^15.7.2"
+    "prop-types": "15.8.1"
   },
   "peerDependencies": {
     "@formio/choices.js": ">=9.0.1",

packages/react-formio/src/components/actions-table/__fixtures__/data.json

@@ -0,0 +1,12 @@
+[
+  {
+    "_id": "602967600685b2158b24e99a",
+    "handler": ["before"],
+    "method": ["create", "update"],
+    "priority": 10,
+    "name": "save",
+    "title": "Save Submission",
+    "form": "602967600685b24dbe24e999",
+    "machineName": "tcspjwhsevrzpcd:testForm:save"
+  }
+]

packages/react-formio/src/components/actions-table/actionsTable.component.spec.tsx

@@ -2,49 +2,80 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 
-import { Sandbox } from "./actionsTable.stories";
+import availableActions from "../__fixtures__/form-actions.json";
+import data from "./__fixtures__/data.json";
+import { ActionsTable } from "./actionsTable.component";
+
+const args: any = {
+  data: data,
+  availableActions: availableActions.map(({ name, title }) => ({
+    label: title,
+    value: name
+  })),
+  operations: [
+    {
+      title: "Edit",
+      action: "edit",
+      alias: "row",
+      path: "/resources/:resourceId/submissions/:submissionId",
+      icon: "edit",
+      permissionsResolver() {
+        return true;
+      }
+    },
+    {
+      action: "delete",
+      path: "/resources/:resourceId/submissions/:submissionId/delete",
+      icon: "trash",
+      buttonType: "danger",
+      permissionsResolver() {
+        return true;
+      }
+    }
+  ]
+};
 
 describe("ActionsTable", () => {
   it("should render the table actions", async () => {
     const onAddAction = jest.fn();
 
-    render(<Sandbox {...Sandbox.args} onAddAction={onAddAction} />);
+    render(<ActionsTable {...args} onAddAction={onAddAction} />);
 
-    const btn = screen.getByRole("button", { name: /add action/i });
+    const btn = screen.getByTestId("action-table-add");
     const cells = screen.getAllByRole("cell");
     const options = screen.getAllByRole("option");
 
     expect(btn).toHaveProperty("disabled");
     expect(btn.innerHTML).toMatch("Add action");
     expect(cells[0].innerHTML).toMatch("Save Submission");
-    expect(options.length).toEqual(Sandbox.args.availableActions.length + 1);
+    expect(options.length).toEqual(availableActions.length + 1);
 
     expect(options[0].innerHTML).toMatch("Select an action");
-    expect(options[1].innerHTML).toMatch("Email");
+    expect(options[1].innerHTML).toMatch("Webhook (Premium)");
   });
   it("should not call addAction when the default item is selected", async () => {
     const onAddAction = jest.fn();
 
-    render(<Sandbox {...Sandbox.args} onAddAction={onAddAction} />);
+    render(<ActionsTable {...args} onAddAction={onAddAction} />);
 
-    const btn = screen.getByRole("button", { name: /add action/i });
+    const btn = screen.getByTestId("action-table-add");
 
     await fireEvent.click(btn);
     expect(onAddAction).not.toHaveBeenCalled();
   });
   it("should call addAction with the selected action", async () => {
     const onAddAction = jest.fn();
 
-    render(<Sandbox {...Sandbox.args} onAddAction={onAddAction} />);
+    render(<ActionsTable {...args} onAddAction={onAddAction} />);
 
-    const btn = screen.getByRole("button", { name: /add action/i });
+    const btn = screen.getByTestId("action-table-add");
     const select = screen.getByRole("combobox");
 
-    await userEvent.selectOptions(select, String(Sandbox.args.availableActions[1].value));
+    await userEvent.selectOptions(select, String(args.availableActions[1].value));
 
     await fireEvent.click(btn);
 
     expect(btn).not.toHaveProperty("disabled", true);
-    expect(onAddAction).toHaveBeenCalledWith("webhook");
+    expect(onAddAction).toHaveBeenCalledWith("sql");
   });
 });

packages/react-formio/src/components/actions-table/actionsTable.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { expect, fn, userEvent, within } from "@storybook/test";
 
 import availableActions from "../__fixtures__/form-actions.json";
+import data from "./__fixtures__/data.json";
 import { ActionsTable } from "./actionsTable.component";
 
 export default {
@@ -86,18 +87,7 @@ export const Sandbox: Story = {
       label: title,
       value: name
     })),
-    data: [
-      {
-        _id: "602967600685b2158b24e99a",
-        handler: ["before"],
-        method: ["create", "update"],
-        priority: 10,
-        name: "save",
-        title: "Save Submission",
-        form: "602967600685b24dbe24e999",
-        machineName: "tcspjwhsevrzpcd:testForm:save"
-      } as never
-    ],
+    data: data as never,
     operations: [
       {
         title: "Edit",

packages/redux-utils/package.json

@@ -27,6 +27,5 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "redux": "^4.0.5"
-  },
-  "dependencies": {}
+  }
 }