Upgrades project to storybook v7 and updates all dependencies

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ]
+}

.eslintrc.js

@@ -12,9 +12,10 @@ module.exports = {
     '@typescript-eslint',
   ],
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
-    'prettier',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "prettier",
+    "plugin:storybook/recommended"
   ],
 };

.github/workflows/chromatic.yml

@@ -22,14 +22,14 @@ jobs:
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0 # Required to retrieve git history
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
-          node-version: '12'
+          node-version: 20
       - run: npm ci
-      - uses: chromaui/action@v1
+      - uses: chromaui/action@latest
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/npm.yml

@@ -9,12 +9,11 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 12
+          node-version: 20
       - run: npm ci
-      - run: npm test
       - uses: JS-DevTools/npm-publish@v1
         with:
           token: ${{ secrets.NPM_TOKEN }}

.storybook/main.js

@@ -1,14 +1,30 @@
 const path = require("path");
 
 module.exports = {
-  core: {
-    builder: "webpack5",
-  },
   stories: ["../src/**/*.stories.tsx"],
+
   // Add any Storybook addons you want here: https://storybook.js.org/addons/
-  addons: [
-    '@storybook/addon-essentials',
-  ],
+  addons: ['@storybook/addon-essentials', "@storybook/addon-styling-webpack", ({
+    name: "@storybook/addon-styling-webpack",
+
+    options: {
+      rules: [{
+    test: /\.css$/,
+    sideEffects: true,
+    use: [
+        require.resolve("style-loader"),
+        {
+            loader: require.resolve("css-loader"),
+            options: {
+
+
+            },
+        },
+    ],
+  },],
+    }
+  })],
+
   webpackFinal: async (config) => {
     config.module.rules.push({
       test: /\.scss$/,
@@ -35,15 +51,20 @@ module.exports = {
 
     config.module.rules.push({
       test: /\.svg$/u,
-      use: [
-        {
-          loader: "@svgr/webpack",
-        },
-      ],
+      use: ["@svgr/webpack"],
     });
 
     config.resolve.extensions.push(".svg");
 
     return config;
+  },
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+
+  docs: {
+    autodocs: true
   }
 };

README.md

@@ -10,7 +10,6 @@ Shared Frontend Components for SRF applications
 - [Sass](https://sass-lang.com/)
 - [TypeScript](https://www.typescriptlang.org/)
 - [Storybook](https://storybook.js.org/) to help you create and show off your components
-- [Jest](https://jestjs.io/) and [React Testing Library](https://github.com/testing-library/react-testing-library) enabling testing of the components
 
 ## Usage
 
@@ -86,12 +85,6 @@ In case this solution doesn't work for your usecase. It is possible to adjust th
 
 ℹ️ If you have to update the _secrets_ (e.g. `CHROMATIC_PROJECT_TOKEN` for deployment to chromatic or `NPM_TOKEN` for deploying on NPM), you can change them on https://github.com/mmz-srf/feathers/settings/secrets/actions 
 
-### Testing
-
-```
-npm run test
-```
-
 ### Building
 
 ```
@@ -127,7 +120,6 @@ This will generate:
   /YourComponentName
     YourComponentName.tsx
     YourComponentName.stories.tsx
-    YourComponentName.test.tsx
     YourComponentName.types.ts
     YourComponentName.scss
 ```