[core] Update storybook to 7.4.6

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['mantine', 'plugin:jest/recommended'],
+  extends: ['mantine', 'plugin:jest/recommended', 'plugin:storybook/recommended'],
   plugins: ['jest'],
   rules: {
     'jest/no-export': 'off',

.storybook/main.js

@@ -1,47 +1,62 @@
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin').default;
 const path = require('path');
+const { globSync } = require('glob');
 const argv = require('yargs').argv;
 
 const getPath = (storyPath) => path.resolve(__dirname, storyPath).replace(/\\/g, '/');
 
-const storiesPath = !argv._[0]
-  ? [getPath('../src/**/*.story.@(ts|tsx)')]
+const getStoryPaths = (fileName = '*') => {
+  const basePath = globSync(getPath('../src'))[0];
+  const files = globSync(getPath('../src/mantine-*/src/**/*.story.@(ts|tsx)'));
+  const packagesWithStories = {};
+  for(const file of files) {
+    const packageName = file.replace(basePath, '').split(path.sep)[1];
+    packagesWithStories[packageName] = true
+  }
+  return Object.keys(packagesWithStories).map((packageName) => {
+    return getPath(`../src/${packageName}/src/**/${fileName}.story.@(ts|tsx)`)
+  })
+}
+
+const storiesPath = !argv._[1]
+  ? [
+    // can't use glob pattern (see https://github.com/storybookjs/storybook/issues/19812)
+    ...getStoryPaths()
+  ]
   : [
-      getPath(`../src/mantine-*/**/${argv._[0]}.story.@(ts|tsx)`),
-      getPath(`../src/mantine-*/**/${argv._[0]}.demos.story.@(ts|tsx)`),
-    ];
+    ...getStoryPaths(argv._[1]),
+    ...getStoryPaths(`${argv._[1]}.demos`),
+  ];
 
 module.exports = {
   stories: storiesPath,
+
   addons: [
     'storybook-dark-mode',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     {
-      name: 'storybook-css-modules',
-      options: {
-        cssModulesLoaderOptions: {
-          importLoaders: 1,
-          modules: {
-            localIdentName: 'mantine-[hash:base64:7]',
-          },
-        },
-      },
-    },
-    {
-      name: '@storybook/addon-postcss',
+      name: '@storybook/addon-styling-webpack',
       options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        },
+        rules: [{
+          test: /\.css$/,
+          sideEffects: true,
+          use: [
+            'style-loader',
+            'css-loader',
+            'postcss-loader',
+          ],
+        }],
       },
     },
   ],
-  framework: '@storybook/react',
-  core: {
-    builder: '@storybook/builder-webpack5',
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
   },
+
   webpackFinal: async (config) => {
     config.resolve = {
       ...config.resolve,
@@ -59,4 +74,12 @@ module.exports = {
 
     return config;
   },
+
+  docs: {
+    autodocs: true,
+  },
+
+  typescript: {
+    reactDocgen: false,
+  },
 };

.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import addons from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { IconTextDirectionLtr, IconTextDirectionRtl } from '@tabler/icons-react';
 import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 import {

babel.config.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

package.json

@@ -51,31 +51,35 @@
     "release:patch:no-test": "npm run _release:no-test patch && npm run docs:deploy",
     "release:minor": "npm run _release minor && npm run docs:deploy",
     "release:major": "npm run _release major && npm run docs:deploy",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
+    "generate-demo-stories": "esno scripts/generate-demo-stories",
     "generate-css": "esno scripts/generate-css",
     "generate-css-layers": "esno scripts/generate-css-layers"
   },
   "resolutions": {
-    "@types/react": "18.2.17"
+    "@types/react": "18.2.17",
+    "wrap-ansi": "^7.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.0",
     "@hello-pangea/dnd": "^16.3.0",
     "@rollup/plugin-alias": "^3.1.2",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.4.2",
     "@rollup/plugin-typescript": "^8.2.1",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-styling-webpack": "^0.0.4",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "7.4.6",
+    "@storybook/testing-library": "^0.2.2",
     "@sucrase/jest-plugin": "^2.1.1",
     "@testing-library/dom": "8.13.0",
     "@testing-library/jest-dom": "5.17.0",
@@ -95,6 +99,7 @@
     "@typescript-eslint/parser": "^6.2.0",
     "babel-loader": "^8.3.0",
     "chalk": "^4.1.1",
+    "css-loader": "^6.8.1",
     "cssnano": "^6.0.1",
     "esbuild": "^0.17.19",
     "esbuild-jest": "^0.5.0",
@@ -107,10 +112,12 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.14",
     "esno": "^0.6.0",
     "execa": "^5.0.1",
     "fast-glob": "^3.2.5",
     "fs-extra": "^10.0.0",
+    "glob": "^10.3.10",
     "gh-pages": "^3.2.0",
     "identity-obj-proxy": "^3.0.0",
     "is-directory": "^0.3.1",
@@ -121,6 +128,7 @@
     "open": "^8.2.0",
     "postcss": "^8.4.24",
     "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^7.3.3",
     "postcss-preset-mantine": "1.7.0",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.0.0",
@@ -135,8 +143,9 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^5.5.0",
     "simple-git": "^2.39.0",
-    "storybook-css-modules": "^1.0.8",
-    "storybook-dark-mode": "^2.1.1",
+    "storybook": "^7.4.6",
+    "storybook-dark-mode": "^3.0.1",
+    "style-loader": "^3.3.3",
     "stylelint": "^15.10.2",
     "stylelint-config-standard-scss": "^10.0.0",
     "syncpack": "^10.7.3",

scripts/demo-import.ts

@@ -1,9 +1,12 @@
 import fs from 'fs-extra';
 import path from 'path';
-import glob from 'glob';
+import { globSync } from 'glob';
 
 function updateDemo(demoPath: string) {
   const contents = fs.readFileSync(demoPath).toString();
+  if (contents.includes("from '@mantine/ds';")) {
+    return;
+  }
 
   const lines = contents.split('\n');
   const imports: string[] = [];
@@ -29,10 +32,10 @@ function updateDemo(demoPath: string) {
   fs.writeFileSync(demoPath, contentsWithImport);
 }
 
-glob(path.join(__dirname, '../src/mantine-demos/src/demos/**/*'), (error, matches) => {
-  const demos = matches.filter((file) => file.includes('.demo.'));
-  demos.forEach(updateDemo);
-});
+const demos = globSync(
+  path.join(__dirname, '../src/mantine-demos/src/demos/**/*.demo.*.@(ts|tsx)')
+);
+demos.forEach(updateDemo);
 
 // updateDemo(
 //   path.join(__dirname, '../src/mantine-demos/src/demos/carousel/Carousel.demo.animationOffset.tsx')

scripts/generate-demo-stories.ts

@@ -0,0 +1,60 @@
+import glob from 'fast-glob';
+import path from 'path';
+import fs from 'fs';
+
+const files = glob.sync(path.resolve(__dirname, '../src/mantine-demos/src/**/*.demos.story.tsx'));
+
+function ucFirst(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+for (const file of files) {
+  const fileData = path.parse(file);
+
+  const fileContent = fs.readFileSync(`${fileData.dir}/index.ts`, 'utf8');
+  const fileLines = fileContent.split('\n');
+  const componentName = fileData.name.split('.')[0];
+
+  const storyData: { name: string; exportName: string; key: string }[] = [];
+  for (const fileLine of fileLines) {
+    const exportList = fileLine.match(/export.*{([^)]+)}/)?.[1].trim();
+    if (exportList) {
+      for (const exportName of exportList.split(',')) {
+        if (exportName) {
+          storyData.push({
+            name: `⭐ Demo: ${exportName.trim()}`,
+            exportName: `Demo${ucFirst(exportName.trim())}`,
+            key: exportName.trim(),
+          });
+        }
+      }
+    }
+  }
+
+  const relativePath = file.replace(`${path.resolve(__dirname, '../src/mantine-demos/src')}/`, '');
+  const depth = relativePath.split('/').length - 1;
+  const depthArray = new Array(depth).fill('..');
+
+  const content = `import { Meta, StoryObj } from '@storybook/react';
+import * as demos from './index';
+import { renderDemo } from '${depthArray.join('/')}/render-demo';
+
+const meta: Meta = {
+  title: '${componentName}',
+};
+export default meta;
+
+type Story = StoryObj;
+
+${storyData
+  .map(
+    (data) => `export const ${data.exportName}: Story = {
+  name: '${data.name}',
+  render: renderDemo(demos.${data.key}),
+};`
+  )
+  .join('\n\n')}
+`;
+
+  fs.writeFileSync(file, content);
+}