OPHJOD-280: Add JOD theme and addons

.github/workflows/build.yml

@@ -5,6 +5,9 @@ on:
   push:
     branches:
       - main
+  pull_request:
+    branches:
+      - main
 
 permissions:
   contents: read
@@ -31,20 +34,34 @@ jobs:
       - name: Run ESLint
         run: npx eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0
 
-      - name: Prettier
+      - name: Run Prettier
         run: npx prettier . --check
 
-      - name: Unit tests
-        run: npx vitest --run
+      - name: Run Vitest unit tests
+        run: npx vitest --coverage.enabled true
+
+      - name: Upload Vitest report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: coverage
+          path: coverage/
+          retention-days: 30
 
       - name: Run build
-        run: npm run build:storybook
+        run: npm run storybook:build
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
           path: storybook-static/
 
+      - name: SonarCloud Scan
+        uses: SonarSource/sonarcloud-github-action@v2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+
   deploy:
     name: Deploy
     if: github.ref == 'refs/heads/main' || github.event_name == 'workflow_dispatch'

.storybook/main.ts

@@ -1,19 +1,32 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  stories: ['../lib/**/*.mdx', '../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: [
+    '../lib/**/*.mdx',
+    {
+      directory: '../lib/components',
+      files: '**/*.stories.@(js|jsx|mjs|ts|tsx)',
+      titlePrefix: 'Components',
+    },
+  ],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-themes',
     '@storybook/addon-designs',
   ],
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
+  core: {
+    disableTelemetry: true,
+  },
   docs: {
     autodocs: 'tag',
+    defaultName: 'Documentation',
   },
 };
 export default config;

.storybook/manager.ts

@@ -0,0 +1,13 @@
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming/create';
+
+addons.setConfig({
+  // https://storybook.js.org/docs/configure/theming#create-a-theme-quickstart
+  theme: create({
+    base: 'light',
+    brandTitle: 'JOD Design System',
+    brandUrl: 'https://github.com/Opetushallitus/jod-design-system',
+    // brandImage: 'https://storybook.js.org/images/placeholders/350x150.png',
+    brandTarget: '_self',
+  }),
+});

.storybook/preview.ts

@@ -1,5 +1,7 @@
 import '../lib/index.css';
-import type { Preview } from '@storybook/react';
+import type { Preview, ReactRenderer } from '@storybook/react';
+import { withThemeByClassName } from '@storybook/addon-themes';
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 const preview: Preview = {
   parameters: {
@@ -9,7 +11,29 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        ...MINIMAL_VIEWPORTS,
+        desktop: {
+          name: 'Desktop',
+          styles: {
+            width: '1440px',
+            height: '1024px',
+          },
+          type: 'desktop',
+        },
+      },
+    },
   },
+  decorators: [
+    withThemeByClassName<ReactRenderer>({
+      themes: {
+        light: '',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+    }),
+  ],
 };
 
 export default preview;