Storybook 8

.github/workflows/ci.yml

@@ -12,12 +12,12 @@ jobs:
         node-version:
           - 20
           - 18
-          - 16
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-      - run: npm install
-      - run: npm run check-format
+      - run: npm ci
+      - run: npm run typecheck
       - run: npm test
+      - run: npm run check-format

.storybook/preview.js → .storybook/intl.ts

@@ -1,14 +1,14 @@
 export const defaultLocales = ['en', 'de'];
 
 // Provide your messages
-const messages = {
+export const messages = {
     en: { message: 'Just some text.' },
     de: { message: 'Nur etwas Text.' },
     es: { message: 'Sólo un texto.' }
 };
 
 // Provide your formats (optional)
-const formats = {
+export const formats = {
     en: {
         date: {
             custom: {
@@ -28,22 +28,3 @@ const formats = {
         }
     }
 };
-
-const getMessages = (locale) => messages[locale];
-const getFormats = (locale) => formats[locale];
-
-/**
- * @type {import('@storybook/react').Preview}
- */
-const preview = {
-    parameters: {
-        intl: {
-            locales: defaultLocales,
-            defaultLocale: 'en',
-            getMessages,
-            getFormats
-        }
-    }
-};
-
-export default preview;

.storybook/local-preset.js

@@ -2,11 +2,11 @@
  * to load the built addon in this test Storybook
  */
 function previewAnnotations(entry = []) {
-    return [...entry, require.resolve('../dist/preview/index.js')];
+    return [...entry, require.resolve('../dist/preview.js')];
 }
 
 function managerEntries(entry = []) {
-    return [...entry, require.resolve('../dist/manager/index.js')];
+    return [...entry, require.resolve('../dist/manager.js')];
 }
 
 module.exports = {

.storybook/main.ts

@@ -0,0 +1,15 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+    stories: ['../src/stories/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: ['storybook-addon-intl'],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {}
+    },
+    docs: {
+        autodocs: 'tag'
+    }
+};
+
+export default config;

.storybook/preview.css

@@ -0,0 +1,4 @@
+html,
+body {
+    font-family: sans-serif;
+}

.storybook/preview.ts

@@ -0,0 +1,20 @@
+import { defaultLocales, formats, messages } from './intl';
+import { Preview } from '@storybook/react';
+
+import './preview.css';
+
+const getMessages = (locale) => messages[locale];
+const getFormats = (locale) => formats[locale];
+
+const preview: Preview = {
+    parameters: {
+        intl: {
+            locales: defaultLocales,
+            defaultLocale: 'en',
+            getMessages,
+            getFormats
+        }
+    }
+};
+
+export default preview;

jest.config.js

@@ -1,3 +1,6 @@
-module.exports = {
-    roots: ['<rootDir>/src']
+export default {
+    roots: ['<rootDir>/src'],
+    transform: {
+        '^.+\\.(ts|tsx)$': 'ts-jest'
+    }
 };

manager.js

@@ -1 +1 @@
-module.exports = require('./dist/manager');
+import './dist/manager';