Merge pull request #192 from brainstormforce/dev

Dev

.github/ISSUE_TEMPLATE/Bug_report.md

@@ -0,0 +1,41 @@
+---
+name: Bug report
+about: Report a bug with the Force UI library.
+labels: "[Type] Bug"
+
+---
+
+<!--
+Please fill out ALL required sections. Bug reports with missing information will
+be closed.
+
+Before submitting a bug report:
+
+- Check if the bug has already been fixed by updating Force IO.
+- Check if the bug is caused by a plugin by deactivating all plugins except the plugin that is using Force UI library.
+- Check if the bug is caused by a theme by activating a default theme e.g. Twenty Twenty.
+- Check if the bug has already been reported by searching https://github.com/brainstormforce/force-ui/issues.
+-->
+
+## Description
+<!-- Please write a brief description of the bug. -->
+
+## Step-by-step reproduction instructions
+<!--
+Please list the steps needed to reproduce the bug. For example:
+1. Go to '...'
+2. Click on '...'
+3. Scroll down to '...'
+-->
+
+## Expected behaviour
+<!-- Please describe what you expected to happen. -->
+
+## Actual behaviour
+<!-- Please describe what actually happened. -->
+
+## Screenshots or screen recording (optional)
+<!--
+If possible, please upload a screenshot or screen recording which demonstrates
+the bug. 
+-->

.github/ISSUE_TEMPLATE/Feature_request.md

@@ -0,0 +1,24 @@
+---
+name: Feature request
+about: Propose an idea for a feature or an enhancement
+labels: "[Type] Enhancement"
+
+---
+
+## What problem does this address?
+<!--
+Please describe if this feature or enhancement is related to a current problem
+or pain point. For example, "I'm always frustrated when ..." or "It is currently
+difficult to ...".
+-->
+
+## What is your proposed solution?
+<!--
+Please outline the feature or enhancement that you want and how it addresses any
+problem identified above.
+-->
+
+## Do you have any refernce that has solved this problem?
+<!--
+Please share references to any other librarey that has solved this problem.
+-->

.github/workflows/storybook-deployment.yml

@@ -19,7 +19,7 @@ jobs:
                   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 && npm run deploy-storybook -- --ci
+              run: npm install && npm run build && npm run build-storybook && npm run deploy-storybook -- --ci
               env:
                   GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/storybook-tests.yml

@@ -0,0 +1,27 @@
+name: 'Storybook Tests'
+on: push
+jobs:
+    test:
+        timeout-minutes: 60
+        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
+              run: npm install
+            - name: Install Playwright
+              run: npx playwright install --with-deps
+            - name: Build force-ui
+              run: npm run build --silent
+            - name: Build Storybook
+              run: npm run build-storybook --silent
+            - 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:127.0.0.1:6006 && yarn test-storybook"

.gitignore

@@ -4,6 +4,12 @@ dist/*
 *storybook.log
 storybook-static/*
 *.zip
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+tsconfig.app.tsbuildinfo
+tsconfig.node.tsbuildinfo
 *.app.tsbuildinfo
 *.node.tsbuildinfo
-tsconfig.app.tsbuildinfo
+tsconfig.app.tsbuildinfo

.storybook/main.ts

@@ -10,6 +10,7 @@ const config: StorybookConfig = {
 		'@storybook/addon-essentials',
 		'@chromatic-com/storybook',
 		'@storybook/addon-interactions',
+		'@storybook/addon-a11y',
 	],
 	framework: {
 		name: '@storybook/react-vite',
@@ -26,12 +27,19 @@ const config: StorybookConfig = {
 		// Merge custom configuration into the default config
 		const { mergeConfig } = await import('vite');
 
+		// Remove the dts plugin from the default config.
+		config.plugins = [
+			...(config.plugins ?? []).filter((plugin) => {
+				return (
+					(plugin as typeof plugin & Record<string, unknown>).name !==
+					'vite:dts'
+				);
+			}),
+		];
+
 		return mergeConfig(config, {
 			optimizeDeps: {
-				include: [
-					'storybook-dark-mode',
-					'storybook-addon-interactions',
-				],
+				...config?.optimizeDeps,
 			},
 			resolve: {
 				...config.resolve,

.storybook/preview.tsx

@@ -11,6 +11,12 @@ const preview: Preview = {
 				date: /Date$/i,
 			},
 		},
+		// Disable color contrast checks for the entire storybook.
+		a11y: {
+			config: {
+				rules: [{ id: 'color-contrast', enabled: false }],
+			},
+		},
 	},
 	decorators: [
 		(Story) => (

.storybook/test-runner.js

@@ -0,0 +1,30 @@
+const { getStoryContext } = require('@storybook/test-runner');
+const { injectAxe, checkA11y, configureAxe } = require('axe-playwright');
+
+module.exports = {
+	async preVisit(page) {
+		await injectAxe(page);
+	},
+	async postVisit(page, context) {
+		// Get the entire context of a story, including parameters, args, argTypes, etc.
+		const storyContext = await getStoryContext(page, context);
+		// Apply story-level a11y rules
+		await configureAxe(page, {
+			rules: storyContext.parameters?.a11y?.config?.rules,
+		});
+
+		// Do not run a11y tests on disabled stories.
+		if (storyContext.parameters?.a11y?.disable) {
+			return;
+		}
+
+		const element =
+			storyContext.parameters?.a11y?.element ?? '#storybook-root';
+		await checkA11y(page, element, {
+			detailedReport: true,
+			detailedReportOptions: {
+				html: true,
+			},
+		});
+	},
+};

README.md

@@ -27,7 +27,7 @@ npm install
 
 <br />
 
-2. Once you install @bsf/force-ui you need to wrap your tailwind css configurations with the `withMT()` function coming from @bsf/force-ui/utils.
+2. Once you install @bsf/force-ui you need to wrap your tailwind css configurations with the `withTW()` function coming from @bsf/force-ui/withTW.
 
 ```js
 const withTW = require( '@bsf/force-ui/withTW' );