chore: add chromatic configuration to run test

.github/workflows/build.yml

@@ -6,97 +6,79 @@ name: Build & Release
 on:
   push:
   pull_request:
-    branches:
-      - master
+    branches: [master]
+    types: [opened, synchronize, closed]
 
 jobs:
   lint:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [20.x]
 
     steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
-      - name: Install dependencies
-        run: yarn install --immutable --network-timeout 500000
+          node-version: 20.x
+          cache: "yarn"
+      - name: Install dependencies 🚀
+        run: yarn install --immutable
       - name: Run lint
         run: yarn lint
 
   test:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest]
-        node-version: [20.x]
-
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
-      - name: Install dependencies
-        run: yarn install --immutable --network-timeout 500000
-      - name: Run test
+          node-version: 20.x
+          cache: "yarn"
+      - name: Install dependencies 🚀
+        run: yarn install --immutable
+      - name: Run test 🔍
         run: yarn test
 
-  deploy-packages:
+  test-storybook:
+    timeout-minutes: 60
     runs-on: ubuntu-latest
-    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')) }}
-
-    strategy:
-      matrix:
-        node-version: [20.x]
-
     steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
-      - name: Install dependencies
-        run: yarn install --immutable --network-timeout 500000
-      - name: Release packages
-        env:
-          CI: true
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
-        run: yarn release
-      - uses: actions/upload-artifact@v2
-        with:
-          name: packages
-          path: |
-            package.json
-            packages/*/package.json
+          node-version: 20.x
+          cache: "yarn"
+      - name: Install dependencies 🚀
+        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 packages/storybook/.out --port 6006 --silent" \
+            "npx wait-on tcp:6006 && yarn storybook:test:ci"
 
-  publish-pages:
+  deploy-packages:
     runs-on: ubuntu-latest
-    needs: deploy-packages
+    needs: [lint, test, test-storybook]
     if: ${{ github.event_name != 'pull_request' && (contains(github.ref, 'master') || contains(github.ref, 'alpha')  || contains(github.ref, 'beta') || contains(github.ref, 'rc')) }}
 
-    strategy:
-      matrix:
-        node-version: [20.x]
-
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
-      - name: Install dependencies
+          node-version: 20.x
+          cache: "yarn"
+      - name: Install dependencies 🚀
         run: yarn install --immutable
       - name: Release packages
         env:
           CI: true
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: yarn publish:storybook
+          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
+        run: yarn release

.github/workflows/chromatic.yml

@@ -0,0 +1,28 @@
+# .github/workflows/chromatic.yml
+
+name: "Chromatic"
+
+on:
+  push:
+  pull_request:
+    branches: [production]
+    types: [opened, synchronize, closed]
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          workingDir: packages/storybook
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: ${{ secrets.CHROMATIC_TOKEN }}

.github/workflows/website.yml

@@ -1,32 +1,65 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: Website
+name: Deploy website
 
 on:
+  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
+  # using the `master` branch as the default branch.
+  push:
+    branches: [master]
+
+  # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
-jobs:
-  publish-pages:
-    runs-on: ubuntu-latest
-    needs: deploy-packages
-    if: ${{ github.event_name != 'pull_request' && (contains(github.ref, 'master') || contains(github.ref, 'alpha')  || contains(github.ref, 'beta') || contains(github.ref, 'rc')) }}
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
 
-    strategy:
-      matrix:
-        node-version: [18.x]
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: pages
+  cancel-in-progress: false
 
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+      - name: Checkout
+        uses: actions/checkout@v4
         with:
-          node-version: ${{ matrix.node-version }}
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
+      # - uses: pnpm/action-setup@v2 # Uncomment this if you're using pnpm
+      # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
-      - name: Release packages
-        env:
-          CI: true
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: yarn publish:storybook
+        run: yarn install
+      - name: Build with Storybook
+        run: |
+          yarn storybook:build
+          touch packages/storybook/.out/.nojekyll
+          echo "formio.tsed.dev" > packages/storybook/.out/CNAME
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: packages/storybook/.out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package.json

@@ -16,18 +16,18 @@
     "postinstall": "lerna run build --stream",
     "configure": "monorepo ci configure",
     "test": "lerna run test --stream",
-    "test:e2e": "lerna run test:e2e",
     "test:coverage:update": "lerna run test:coverage:update --stream",
     "lint": "lerna run lint --stream",
     "lint:fix": "lerna run lint:fix --stream",
     "prettier": "prettier '**/*.{ts,js,json,md,yml,yaml}' --write",
     "build": "monorepo build --verbose",
     "publish": "monorepo publish --dry-run",
     "start": "lerna run start --stream --parallel",
-    "start:storybook": "lerna run start:storybook --stream",
-    "build:storybook": "yarn build:tailwind && lerna run build:storybook --stream",
-    "build:tailwind": "lerna run build:tailwind --stream --scope @tsed/tailwind",
-    "publish:storybook": "yarn build:storybook && monorepo publish ghpages",
+    "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"
   },

packages/react-formio-container/package.json

@@ -6,6 +6,12 @@
   "module": "dist/index.modern.js",
   "source": "src/index.tsx",
   "license": "MIT",
+  "exports": {
+    ".": {
+      "import": "./dist/index.modern.js",
+      "require": "./dist/index.js"
+    }
+  },
   "scripts": {
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "yarn lint --fix",

packages/react-formio-stores/package.json

@@ -6,6 +6,12 @@
   "module": "dist/index.modern.js",
   "source": "src/index.ts",
   "license": "MIT",
+  "exports": {
+    ".": {
+      "import": "./dist/index.modern.js",
+      "require": "./dist/index.js"
+    }
+  },
   "scripts": {
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "yarn lint --fix",

packages/react-formio/package.json

@@ -2,11 +2,13 @@
   "name": "@tsed/react-formio",
   "version": "2.3.1",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
-  "main": "dist/index.js",
-  "module": "dist/index.modern.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.modern.js",
   "exports": {
-    "import": "dist/index.modern.js",
-    "require": "dist/index.js"
+    ".": {
+      "import": "./dist/index.modern.js",
+      "require": "./dist/index.js"
+    }
   },
   "source": "src/index.ts",
   "license": "MIT",
@@ -37,6 +39,7 @@
   },
   "devDependencies": {
     "@tsed/tailwind": "workspace:*",
-    "@tsed/tailwind-formio": "workspace:*"
+    "@tsed/tailwind-formio": "workspace:*",
+    "microbundle": "0.13.0"
   }
 }

packages/react-formio/src/components/form-access/formAccess.component.tsx

@@ -1,5 +1,4 @@
-import PropTypes from "prop-types";
-import React, { PropsWithChildren, ReactElement, useCallback, useEffect, useMemo, useState } from "react";
+import React, { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
 
 import type { FormOptions, FormSchema, Submission } from "../../interfaces";
 import { Card } from "../card/card.component";
@@ -96,7 +95,7 @@ function NamedFormAccess({ name, form, submissions, options, onChange, onSubmit,
   );
 }
 
-export function FormAccess(props: PropsWithChildren<FormAccessProps>): ReactElement {
+export function FormAccess(props: PropsWithChildren<FormAccessProps>) {
   const { type, form, submissions, options, onChange, onSubmit } = useFormAccess(props);
 
   return (
@@ -155,12 +154,3 @@ export function FormAccess(props: PropsWithChildren<FormAccessProps>): ReactElem
     </div>
   );
 }
-
-FormAccess.propTypes = {
-  type: PropTypes.string.isRequired,
-  form: PropTypes.object,
-  roles: PropTypes.any,
-  children: PropTypes.any,
-  options: PropTypes.any,
-  onSubmit: PropTypes.func
-};