Merge pull request #103 from brainstormforce/staging

Staging

.distignore

@@ -0,0 +1,58 @@
+# A set of files you probably don't want in your WordPress.org distribution
+
+.distignore
+.editorconfig
+.github
+.wordpress-org
+.git
+.gitignore
+.gitattributes
+.gitlab-ci.yml
+.travis.yml
+.DS_Store
+.eslintrc.js
+.eslintignore
+.prettierrc
+.prettierrc.js
+.prettierignore
+.browserslistrc
+.editorconfig
+.stylelintrc.json
+.vscode
+.stylelintignore
+.stylelintrc
+.wp-env.json
+playwright.config.js
+postcss.config.js
+tailwind.config.js
+wizard-webpack-config.js
+Thumbs.db
+bin
+composer.lock
+Gruntfile.js
+package.json
+package-lock.json
+phpunit.xml
+phpunit.xml.dist
+multisite.xml
+multisite.xml.dist
+phpcs.xml
+phpcs.xml.dist
+README.md
+tests
+vendor
+node_modules
+_.sql
+_.tar.gz
+_.zip
+_.sh
+_.map
+_.zip
+\*.neon
+webpack.config.js
+scripts
+artifact
+artifacts
+phpstan-baseline.neon
+phpstan.neon
+force-ui/

.eslintrc.js

@@ -1,31 +1,38 @@
 // .eslintrc.mjs
 module.exports = {
 	root: true,
-	extends: [ 'plugin:@wordpress/eslint-plugin/recommended-with-formatting', "plugin:storybook/recommended" ],
+	extends: [
+		'plugin:@wordpress/eslint-plugin/recommended-with-formatting',
+		'plugin:storybook/recommended',
+	],
 	settings: {
 		'import/resolver': {
 			node: {
-				extensions: [ '.js', '.jsx', '.ts', '.tsx' ],
+				extensions: ['.js', '.jsx', '.ts', '.tsx'],
 			},
 			alias: {
 				map: [
-					[ '@', './src' ],
-					[ '@/components', './src/components' ],
-					[ '@/utilities', './src/utilities' ],
+					['@', './src'],
+					['@/components', './src/components'],
+					['@/utilities', './src/utilities'],
 				],
-				extensions: [ '.js', '.jsx' ],
+				extensions: ['.js', '.jsx'],
 			},
 		},
 	},
 	parserOptions: {
 		requireConfigFile: false,
 		babelOptions: {
-			presets: [ '@wordpress/babel-preset-default' ],
+			presets: ['@wordpress/babel-preset-default'],
 		},
 	},
 	rules: {
 		'jsx-a11y/click-events-have-key-events': 'off',
 		'react-hooks/exhaustive-deps': 'off',
 		'jsx-a11y/label-has-associated-control': 'off',
+		'jsx-a11y/no-noninteractive-element-interactions': 'off',
+	},
+	globals: {
+		localStorage: 'readonly',
 	},
 };

.github/workflows/chromatic.yml

@@ -1,29 +1,29 @@
-name: "Chromatic"
+name: 'Chromatic'
 
 on:
     push:
         branches:
-        - staging
+            - staging
 
 jobs:
-  chromatic:
-    name: Run Chromatic
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - name: Install dependencies
-        # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
-        run: npm install
-      - name: Run Chromatic
-        uses: chromaui/action@latest
-        with:
-          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          zip: true
-          onlyChanged: true # 👈 Required option to enable TurboSnap
+    chromatic:
+        name: Run Chromatic
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+            - name: Install dependencies
+              # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
+              run: npm install && npm run build
+            - name: Run Chromatic
+              uses: chromaui/action@latest
+              with:
+                  # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+                  projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+                  zip: true
+                  onlyChanged: true # 👈 Required option to enable TurboSnap

.github/workflows/tag-release.yml

@@ -0,0 +1,44 @@
+name: Create a tag
+
+on:
+    push:
+        branches:
+            - master
+
+# Cancels all previous workflow runs for pull requests that have not completed.
+concurrency:
+    # The concurrency group contains the workflow name and the branch name for pull requests
+    # or the commit hash for any other events.
+    group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
+    cancel-in-progress: true
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Use desired version of NodeJS
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 18.15
+                  cache: 'npm'
+
+            - name: Build the release
+              run: npm install && npm run release
+
+            - name: Maybe create a tag
+              run: bash bin/release.sh
+
+            - name: Release
+              if: ${{ env.TAG_CREATED == 'true' }}
+              uses: softprops/action-gh-release@v2
+              with:
+                  tag_name: ${{ env.BRAINSTORM_FORCE_RELEASE }}
+                  body: ''
+                  name: v${{ env.BRAINSTORM_FORCE_RELEASE }}
+                  draft: false
+                  files: force-ui.zip
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,5 +1,6 @@
 node_modules
-dist/*.map
+dist/*
 .DS_Store
 *storybook.log
-storybook-static/*
+storybook-static/*
+*.zip

.storybook/main.js

@@ -2,30 +2,37 @@ import path from 'path';
 
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
 const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: ["@storybook/addon-webpack5-compiler-swc", "@storybook/addon-onboarding", "@storybook/addon-links", "@storybook/addon-essentials", "@chromatic-com/storybook", "@storybook/addon-interactions"],
-  swc: () => ({
-    jsc: {
-      transform: {
-        react: {
-          runtime: 'automatic'
-        }
-      }
-    }
-  }),
-  framework: {
-    name: "@storybook/react-webpack5",
-    options: {},
-  },
-  core: {
-    builder: "webpack5",
-  },
-  webpackFinal: async (config) => {
-    config.resolve.alias = {
-      '@': path.resolve(__dirname, '..', 'src'),
-    };
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons: [
+		'@storybook/addon-webpack5-compiler-swc',
+		'@storybook/addon-onboarding',
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@chromatic-com/storybook',
+		'@storybook/addon-interactions',
+	],
+	swc: () => ({
+		jsc: {
+			transform: {
+				react: {
+					runtime: 'automatic',
+				},
+			},
+		},
+	}),
+	framework: {
+		name: '@storybook/react-webpack5',
+		options: {},
+	},
+	core: {
+		builder: 'webpack5',
+	},
+	webpackFinal: async (config) => {
+		config.resolve.alias = {
+			'@': path.resolve(__dirname, '..', 'src'),
+		};
 
-    return config;
-  },
+		return config;
+	},
 };
 export default config;

.storybook/preview.js

@@ -1,14 +1,21 @@
 /** @type { import('@storybook/react').Preview } */
 import '../dist/force-ui.css';
 const preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+	},
+	decorators: [
+		(Story) => (
+			<div style={{ fontFamily: 'Figtree, sans-serif' }}>
+				<Story />
+			</div>
+		),
+	],
 };
 
 export default preview;