Skip to content

Commit

Permalink
update storybook to 7.4.6
Browse files Browse the repository at this point in the history
  • Loading branch information
wuifdesign committed Oct 5, 2023
1 parent 9c6ba80 commit 674b85b
Show file tree
Hide file tree
Showing 126 changed files with 8,681 additions and 5,039 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
44 changes: 23 additions & 21 deletions .storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,42 @@ const argv = require('yargs').argv;

const getPath = (storyPath) => path.resolve(__dirname, storyPath).replace(/\\/g, '/');

const storiesPath = !argv._[0]
const storiesPath = !argv._[1]
? [getPath('../src/**/*.story.@(ts|tsx)')]
: [
getPath(`../src/mantine-*/**/${argv._[0]}.story.@(ts|tsx)`),
getPath(`../src/mantine-*/**/${argv._[0]}.demos.story.@(ts|tsx)`),
getPath(`../src/mantine-*/**/${argv._[1]}.story.@(ts|tsx)`),
getPath(`../src/mantine-*/**/${argv._[1]}.demos.story.@(ts|tsx)`),
];

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 +57,8 @@ module.exports = {

return config;
},

docs: {
autodocs: true,
},
};
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": []
}
31 changes: 19 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,8 @@
"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"
},
Expand All @@ -60,22 +61,24 @@
},
"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 +98,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,6 +111,7 @@
"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",
Expand All @@ -121,6 +126,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 +141,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
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.

96 changes: 93 additions & 3 deletions src/mantine-demos/src/demos/carousel/Carousel.demos.story.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,95 @@
import { storiesOf } from '@storybook/react';
import { attachDemos } from '../../attach-demos';
import { Meta, StoryObj } from '@storybook/react';
import * as demos from './index';
import { renderDemo } from '../../render-demo';

attachDemos(storiesOf('Carousel', module), demos);
const meta: Meta = {
title: 'Carousel',
};
export default meta;

type Story = StoryObj;

export const DemoUsage: Story = {
name: '⭐ Demo: usage',
render: renderDemo(demos.usage),
};

export const DemoVertical: Story = {
name: '⭐ Demo: vertical',
render: renderDemo(demos.vertical),
};

export const DemoIcons: Story = {
name: '⭐ Demo: icons',
render: renderDemo(demos.icons),
};

export const DemoImages: Story = {
name: '⭐ Demo: images',
render: renderDemo(demos.images),
};

export const DemoMultiple: Story = {
name: '⭐ Demo: multiple',
render: renderDemo(demos.multiple),
};

export const DemoBreakpoints: Story = {
name: '⭐ Demo: breakpoints',
render: renderDemo(demos.breakpoints),
};

export const DemoAutoplay: Story = {
name: '⭐ Demo: autoplay',
render: renderDemo(demos.autoplay),
};

export const DemoDragFree: Story = {
name: '⭐ Demo: dragFree',
render: renderDemo(demos.dragFree),
};

export const DemoIndicatorStyles: Story = {
name: '⭐ Demo: indicatorStyles',
render: renderDemo(demos.indicatorStyles),
};

export const DemoControlsStyles: Story = {
name: '⭐ Demo: controlsStyles',
render: renderDemo(demos.controlsStyles),
};

export const DemoControlsHover: Story = {
name: '⭐ Demo: controlsHover',
render: renderDemo(demos.controlsHover),
};

export const DemoConfigurator: Story = {
name: '⭐ Demo: configurator',
render: renderDemo(demos.configurator),
};

export const DemoProgress: Story = {
name: '⭐ Demo: progress',
render: renderDemo(demos.progress),
};

export const DemoCards: Story = {
name: '⭐ Demo: cards',
render: renderDemo(demos.cards),
};

export const DemoAnimationOffset: Story = {
name: '⭐ Demo: animationOffset',
render: renderDemo(demos.animationOffset),
};

export const DemoBrokenAnimation: Story = {
name: '⭐ Demo: brokenAnimation',
render: renderDemo(demos.brokenAnimation),
};

export const DemoStylesApi: Story = {
name: '⭐ Demo: stylesApi',
render: renderDemo(demos.stylesApi),
};
Loading

0 comments on commit 674b85b

Please sign in to comment.