Rc

.github/workflows/build.yml

@@ -27,21 +27,6 @@ jobs:
 
   test:
     runs-on: "ubuntu-latest"
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20.x
-          cache: "yarn"
-      - name: Install dependencies 🚀
-        run: yarn install --immutable
-      - name: Run test 🔍
-        run: yarn test
-
-  test-storybook:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js
@@ -53,17 +38,12 @@ jobs:
         run: yarn install --immutable
       - name: Install Playwright 🚀
         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 storybook-static --port 6006 --silent" \
-            "npx wait-on tcp:6006 && yarn storybook:test:ci"
+      - name: Run test 🔍
+        run: yarn run tailwind:build && yarn test
 
   deploy-packages:
     runs-on: ubuntu-latest
-    needs: [lint, test, test-storybook]
+    needs: [lint, test]
     if: ${{ github.event_name != 'pull_request' && (contains(github.ref, 'master') || contains(github.ref, 'alpha')  || contains(github.ref, 'beta') || contains(github.ref, 'rc')) }}
 
     steps:

.gitignore

@@ -54,7 +54,6 @@ storybook-static
 .DS_Store
 .nyc_output
 /docs/.vuepress/dist/
-/packages/tailwind/COLORS.JSON
 
 # Yarn
 .pnp.*
@@ -65,3 +64,4 @@ storybook-static
 !.yarn/sdks
 !.yarn/versions
 
+**/tsconfig.*.tsbuildinfo

.storybook/main.ts

@@ -1,35 +1,61 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import remarkGfm from "remark-gfm";
 
 const config: StorybookConfig = {
-  staticDirs: ["../packages/tailwind/build"],
+  staticDirs: ["../packages/tailwind-formio/build"],
 
   stories: [
-    "../stories/Getting-started.mdx",
+    "../stories/GettingStarted.mdx",
+    "../stories/TailwindTheme.mdx",
+    "../stories/RegisterReactComponent.mdx",
+    "../stories/Hooks.mdx",
+    "../stories/OptimizeYourBundleSize.mdx",
     "../stories/**/*.mdx",
-    "../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)"
+    {
+      titlePrefix: "Styling",
+      directory: "../packages/tailwind-formio"
+    },
+    {
+      titlePrefix: "Atoms",
+      directory: "../packages/react-formio/src/atoms"
+    },
+    {
+      titlePrefix: "Molecules",
+      directory: "../packages/react-formio/src/molecules"
+    },
+    {
+      titlePrefix: "Organisms",
+      directory: "../packages/react-formio/src/organisms"
+    }
   ],
-
   addons: [
-    "@storybook/addon-a11y",
-    "@storybook/addon-links",
-    "@storybook/addon-interactions",
-    "@storybook/addon-essentials",
-    "@storybook/addon-mdx-gfm",
     "@storybook/addon-links",
-    "@storybook/addon-interactions",
+    "@storybook/addon-onboarding",
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm]
+          }
+        }
+      }
+    },
     "@chromatic-com/storybook"
   ],
 
   framework: {
     name: "@storybook/react-vite",
     options: {}
   },
-
-  docs: {},
-  typescript: {
-    reactDocgen: "react-docgen-typescript"
+  core: {
+    builder: {
+      name: "@storybook/builder-vite",
+      options: {
+        viteConfigPath: "./vite.config.ts"
+      }
+    },
+    disableTelemetry: true
   }
 };
 

.storybook/preview.ts

@@ -1,27 +1,39 @@
 import "./styles/index.css";
 
-import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { withThemeByClassName } from "@storybook/addon-themes";
 import { Formio, Templates } from "@tsed/react-formio";
 import tailwind from "@tsed/tailwind-formio";
+import { initialize, mswLoader } from "msw-storybook-addon";
+import { INITIAL_VIEWPORTS } from "storybook/viewport";
 
 // eslint-disable-next-line react-hooks/rules-of-hooks
 Formio.use(tailwind);
+
 Templates.framework = "tailwind";
 
-/** @type { import('@storybook/react').Preview } */
+initialize();
+
+/** @type { import("@storybook/react-vite").Preview } */
 const preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/
-      }
+    docs: {
+      source: { language: "tsx" }
     }
   },
   viewport: {
     viewports: INITIAL_VIEWPORTS
-  }
+  },
+  loaders: [mswLoader],
+  tags: ["autodocs"],
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: "",
+        dark: "dark"
+      },
+      defaultTheme: "light"
+    })
+  ]
 };
 
 export default preview;

.storybook/styles/fonts/index.css

@@ -1,3 +1,4 @@
 @import "bxicons/index.css";
+@import "lucide-static/font/lucide.css";
 @import "inconsolata/index.css";
 @import "source-sans-pro/index.css";

.storybook/styles/index.css

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

.storybook/vitest.setup.ts

@@ -0,0 +1,8 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from "@storybook/react-vite";
+
+import * as projectAnnotations from "./preview";
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

chromatic.config.json

@@ -1,6 +1,5 @@
 {
-  "onlyChanged": true,
+  "onlyChanged": false,
   "projectId": "Project:676abc3ef2ee519da9b21fb6",
-  "storybookBaseDir": "packages/storybook",
   "zip": true
 }

commitlint.config.js

@@ -0,0 +1,4 @@
+export default {
+  extends: ["@commitlint/config-conventional"],
+  rules: { "header-max-length": [2, "always", 200] }
+};

lerna.json

@@ -3,5 +3,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "2.3.6"
+  "version": "3.0.0-alpha.12"
 }