refactor: use TypeScript for Storybook React config

.eslintrc.js

@@ -88,8 +88,6 @@ module.exports = {
           'packages/web-component-library-vue/tsconfig.json',
           'packages/web-component-library-vue/tsconfig.app.json',
           'packages/web-component-library-vue/tsconfig.vite-config.json',
-          'packages/email-template-nodemailer/tsconfig.json',
-          'packages/react-emails/tsconfig.json',
         ],
         tsconfigRootDir: __dirname,
       },

.gitignore

@@ -8,6 +8,7 @@ generated/
 tmp/
 *.tgz
 .angular
+tsconfig.tsbuildinfo
 
 # Ignore log files
 *.err

packages/storybook-angular/config/manager.js

@@ -1,6 +1,6 @@
 import { addons } from '@storybook/addons';
 import { create } from '@storybook/theming/create';
-import theme from '@utrecht/storybook-helpers/storybook-theme.json';
+import { theme } from '@utrecht/storybook-helpers/dist/storybook-theme';
 
 addons.setConfig({
   theme: create(theme),

packages/storybook-angular/config/preview.js

@@ -3,8 +3,8 @@ import { setCompodocJson } from '@storybook/addon-docs/angular';
 import { withTests } from '@storybook/addon-jest';
 import { componentWrapperDecorator } from '@storybook/angular';
 import results from '@utrecht/component-library-angular/dist/.jest-test-results.json';
-import { addonStatus } from '@utrecht/storybook-helpers/src/addon-status';
-import { addonViewport } from '@utrecht/storybook-helpers/src/addon-viewport';
+import { addonStatus } from '@utrecht/storybook-helpers/dist/addon-status';
+import { addonViewport } from '@utrecht/storybook-helpers/dist/addon-viewport';
 import docJson from '../tmp/documentation.json';
 setCompodocJson(docJson);
 

packages/storybook-helpers/package.json

@@ -11,5 +11,14 @@
   "repository": {
     "type": "git+ssh",
     "url": "git@github.com:nl-design-system/utrecht.git"
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.dist.json",
+    "clean": "rimraf dist",
+    "lint": "tsc --noEmit --project tsconfig.json"
+  },
+  "devDependencies": {
+    "@storybook/theming": "7.0.7",
+    "typescript": "4.9.5"
   }
 }

packages/storybook-helpers/project.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "root": "{workspaceRoot}/packages/storybook-helpers",
+  "sourceRoot": "{projectRoot}",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/workspace:run-commands",
+      "outputs": ["{projectRoot}/dist"],
+      "options": {
+        "command": "npm run build",
+        "cwd": "packages/storybook-helpers",
+        "outputPath": "packages/storybook-helpers/dist"
+      },
+      "dependsOn": ["^build"]
+    }
+  }
+}

packages/storybook-helpers/src/storybook-theme.ts

@@ -0,0 +1,20 @@
+import { ThemeVars } from '@storybook/theming';
+
+export const theme: ThemeVars = {
+  appBg: '#e6e6e6',
+  appBorderColor: '#666666',
+  appBorderRadius: 0,
+  appContentBg: '#ffffff',
+  barBg: 'rgb(208, 208, 208)',
+  barSelectedColor: 'green',
+  barTextColor: '#000000',
+  base: 'light',
+  brandImage: 'logo.svg',
+  brandTitle: 'Gemeente Utrecht',
+  brandUrl: 'https://www.utrecht.nl',
+  colorPrimary: '#2964a3',
+  colorSecondary: '#1b4050',
+  fontBase: '"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif',
+  fontCode: 'monospace',
+  textColor: '#1d1d1c',
+};

packages/storybook-helpers/tsconfig.dist.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": false,
+    "outDir": "dist",
+    "rootDir": "src"
+  }
+}

packages/storybook-helpers/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "composite": true,
+    "esModuleInterop": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*.ts"],
+  "exclude": ["**/node_modules/*"]
+}

packages/storybook-react/config/main.js → packages/storybook-react/config/main.ts

@@ -1,5 +1,6 @@
-/* eslint-env node */
-module.exports = {
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
   core: {
     disableTelemetry: true,
   },
@@ -16,25 +17,17 @@ module.exports = {
     'storybook-addon-themes',
   ],
   features: {
-    babelModeV7: true,
-    postcss: false,
     buildStoriesJson: true,
-    previewMdx2: true,
     storyStoreV7: true,
   },
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
   staticDirs: ['../../../proprietary/assets'],
-  webpackFinal: async (config) => ({
-    ...config,
-    performance: {
-      // Disable warning for: "asset size exceeds the recommended limit (244 KiB)"
-      hints: false,
-    },
-  }),
   docs: {
     autodocs: true,
   },
 };
+
+export default config;

packages/storybook-react/config/manager.js → packages/storybook-react/config/manager.ts

@@ -1,6 +1,6 @@
 import { addons } from '@storybook/addons';
 import { create } from '@storybook/theming/create';
-import theme from '@utrecht/storybook-helpers/storybook-theme.json';
+import { theme } from '@utrecht/storybook-helpers/src/storybook-theme';
 
 addons.setConfig({
   theme: create(theme),

packages/storybook-react/config/preview.tsx

@@ -0,0 +1,37 @@
+import { Preview } from '@storybook/react';
+import { addonStatus } from '@utrecht/storybook-helpers/src/addon-status';
+import { addonThemes } from '@utrecht/storybook-helpers/src/addon-themes';
+import { addonViewport } from '@utrecht/storybook-helpers/src/addon-viewport';
+// import { withTests } from '@storybook/addon-jest';
+// import results from '@utrecht/component-library-react/dist/.jest-test-results.json';
+import React from 'react';
+import '@utrecht/design-tokens/dist/index.css';
+import '@utrecht/storybook-helpers/src/storybook-docs.scss';
+
+const preview: Preview = {
+  decorators: [
+    (Story: any) => <div className="utrecht-document">{Story()}</div>,
+    // withTests({ results }),
+  ],
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      // Show code by default.
+      // Stories without concise code snippets can hide the code at Story level.
+      source: {
+        state: 'open',
+      },
+    },
+    ...addonStatus,
+    ...addonThemes,
+    ...addonViewport,
+  },
+};
+
+export default preview;

packages/storybook-react/tsconfig.json

@@ -6,6 +6,6 @@
     "resolveJsonModule": true
   },
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "include": ["config/**/*.ts", "config/**/*.tsx", "src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["**/node_modules/*"]
 }

packages/storybook-vue/config/manager.js

@@ -1,6 +1,6 @@
 import { addons } from '@storybook/addons';
 import { create } from '@storybook/theming/create';
-import theme from '@utrecht/storybook-helpers/storybook-theme.json';
+import { theme } from '@utrecht/storybook-helpers/dist/storybook-theme';
 
 addons.setConfig({
   theme: create(theme),

packages/storybook-vue/config/preview.jsx

@@ -1,6 +1,6 @@
 import { Document } from '@utrecht/component-library-vue';
-import { addonStatus } from '@utrecht/storybook-helpers/src/addon-status';
-import { addonViewport } from '@utrecht/storybook-helpers/src/addon-viewport';
+import { addonStatus } from '@utrecht/storybook-helpers/dist/addon-status';
+import { addonViewport } from '@utrecht/storybook-helpers/dist/addon-viewport';
 import { defineCustomElements } from '@utrecht/web-component-library-stencil/loader';
 import '@utrecht/component-library-vue/dist/style.css';
 import '@utrecht/design-tokens/dist/index.css';

packages/storybook/config/manager.js

@@ -1,7 +1,7 @@
 import { addons } from '@storybook/addons';
 import { create } from '@storybook/theming/create';
 import { utrechtTypographySansSerifFontFamily } from '@utrecht/design-tokens/dist/index.mjs';
-import theme from '@utrecht/storybook-helpers/storybook-theme.json';
+import { theme } from '@utrecht/storybook-helpers/dist/storybook-theme';
 
 addons.setConfig({
   theme: create({

packages/storybook/config/preview.js

@@ -1,7 +1,7 @@
 /* eslint-env node */
-import { addonStatus } from '@utrecht/storybook-helpers/src/addon-status';
-import { addonThemes } from '@utrecht/storybook-helpers/src/addon-themes';
-import { addonViewport } from '@utrecht/storybook-helpers/src/addon-viewport';
+import { addonStatus } from '@utrecht/storybook-helpers/dist/addon-status';
+import { addonThemes } from '@utrecht/storybook-helpers/dist/addon-themes';
+import { addonViewport } from '@utrecht/storybook-helpers/dist/addon-viewport';
 import { defineCustomElements } from '@utrecht/web-component-library-stencil/loader';
 import clsx from 'clsx';
 import defaultsDeep from 'lodash.defaultsdeep';