Merge pull request #8 from IQSS/feature/storybook-setup

3 - Storybook Setup

.github/workflows/test.yml

@@ -39,3 +39,25 @@ jobs:
           build: npm run build
           start: npm run start
           wait-on: 'http://localhost:3000'
+  interaction-and-accessibility:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 19
+          cache: 'npm'
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build Storybook
+        run: npm run build-storybook --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 http://127.0.0.1:6006 --l && npx test-storybook --url http://127.0.0.1:6006"

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-create-react-app',
+    'storybook-react-i18next',
+    '@storybook/addon-a11y'
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5'
+  }
+}

.storybook/preview.js

@@ -0,0 +1,17 @@
+import i18next from '../src/i18n'
+import '../src/assets/styles/index.scss'
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  },
+  i18next,
+  locale: 'en',
+  locales: {
+    en: 'English'
+  }
+}

.storybook/test-runner.js

@@ -0,0 +1,23 @@
+const { injectAxe, checkA11y, configureAxe } = require('axe-playwright')
+
+const { getStoryContext } = require('@storybook/test-runner')
+
+module.exports = {
+  async preRender(page) {
+    await injectAxe(page)
+  },
+  async postRender(page, context) {
+    const storyContext = await getStoryContext(page, context)
+
+    await configureAxe(page, {
+      rules: storyContext.parameters?.a11y?.config?.rules
+    })
+
+    await checkA11y(page, '#root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true
+      }
+    })
+  }
+}