Skip to content

Commit

Permalink
[core] Update storybook to v7 (#4979)
Browse files Browse the repository at this point in the history
* update storybook to 7.4.6

* pin wrap-ansi to 7.0.0 as 8.0.0 is ES only

* improve storybook v7 performance
  • Loading branch information
wuifdesign authored Oct 12, 2023
1 parent 4dbfa6e commit 16b7826
Show file tree
Hide file tree
Showing 127 changed files with 8,706 additions and 5,050 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
@@ -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',
Expand Down
69 changes: 46 additions & 23 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -59,4 +74,12 @@ module.exports = {

return config;
},

docs: {
autodocs: true,
},

typescript: {
reactDocgen: false,
},
};
2 changes: 1 addition & 1 deletion .storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
18 changes: 18 additions & 0 deletions babel.config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"sourceType": "unambiguous",
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": 100,
"safari": 15,
"firefox": 91
}
}
],
"@babel/preset-typescript",
"@babel/preset-react"
],
"plugins": []
}
35 changes: 22 additions & 13 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
13 changes: 8 additions & 5 deletions scripts/demo-import.ts
Original file line number Diff line number Diff line change
@@ -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[] = [];
Expand All @@ -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')
Expand Down
60 changes: 60 additions & 0 deletions scripts/generate-demo-stories.ts
Original file line number Diff line number Diff line change
@@ -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);
}
20 changes: 0 additions & 20 deletions src/mantine-demos/src/attach-demos.tsx

This file was deleted.

Loading

0 comments on commit 16b7826

Please sign in to comment.