Merge branch 'staging' of https://github.com/brainstormforce/force-ui …

…into SUR-279-sidebars

.eslintrc.js

@@ -1,32 +1,36 @@
 // .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
+            - 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

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