LogalDeveloper/owncast
0
Fork 0
Code Activity

Update storybook to v9 (#4645)

Browse Source 
* chore: Update storybook to v9

* Pin next-export-i18n + remove outdated mock library

* Replace old mocking library with MSW

* Resolve knip unused code warnings
This commit is contained in:
Gabe Kangas
2025-10-20 21:26:32 -07:00
committed by GitHub
parent 72d5ee8754
commit cc9286416c
68 changed files with 40881 additions and 44059 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/.storybook/main.js
+18 -86
View File
@@ -7,93 +7,8 @@ module.exports = {
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-scss',
'@storybook/addon-a11y',
'storybook-addon-fetch-mock',
'@storybook/addon-mdx-gfm',
'@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: {
// Want to add more CSS Modules options? Read more here: https://github.com/webpack-contrib/css-loader#modules
modules: {
auto: true,
},
},
},
],
},
{
test: /\.s[ac]ss$/,
sideEffects: true,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
// Want to add more CSS Modules options? Read more here: https://github.com/webpack-contrib/css-loader#modules
modules: {
auto: true,
namedExport: false,
},
importLoaders: 2,
},
},
require.resolve('resolve-url-loader'),
{
loader: require.resolve('sass-loader'),
options: {
// Want to add more Sass options? Read more here: https://webpack.js.org/loaders/sass-loader/#options
implementation: require.resolve('sass'),
sourceMap: true,
sassOptions: {},
},
},
],
},
{
test: /\.less$/,
sideEffects: true,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
// Want to add more CSS Modules options? Read more here: https://github.com/webpack-contrib/css-loader#modules
modules: {
auto: true,
},
importLoaders: 1,
},
},
{
loader: require.resolve('less-loader'),
options: {
// Want to add more Less options? Read more here: https://webpack.js.org/loaders/less-loader/#options
implementation: require.resolve('less'),
sourceMap: true,
lessOptions: {
javascriptEnabled: true,
},
},
},
],
},
],
},
},
'@chromatic-com/storybook'
'@storybook/addon-docs'
],
webpackFinal: async (config, { configType }) => {
@@ -107,6 +22,23 @@ module.exports = {
use: ['@svgr/webpack'],
});
// Configure LESS loader for Ant Design
config.module.rules.push({
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
});
return config;
},
web/.storybook/preview.js
+10 -10
View File
@@ -2,10 +2,11 @@ import '../styles/variables.css';
import '../styles/global.less';
import '../styles/theme.less';
import './preview.scss';
import { themes } from '@storybook/theming';
import { themes } from 'storybook/theming';
import { DocsContainer } from './storybook-theme';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import { INITIAL_VIEWPORTS } from 'storybook/viewport';
import _ from 'lodash';
import { initialize, mswLoader } from 'msw-storybook-addon';
/**
* Takes an entry of a viewport (from Object.entries()) and converts it
@@ -13,8 +14,8 @@ import _ from 'lodash';
*
* @template {string} Key
*
* @param {[Key, import('@storybook/addon-viewport/dist/ts3.9/models').Viewport]} entry
* @returns {Array<[`${Key}${'Portrait' | 'Landscape'}`, import('@storybook/addon-viewport/dist/ts3.9/models').Viewport]>}
* @param {[Key, import('storybook/viewport/dist/ts3.9/models').Viewport]} entry
* @returns {Array<[`${Key}${'Portrait' | 'Landscape'}`, import('storybook/viewport/dist/ts3.9/models').Viewport]>}
*/
const convertToLandscapeAndPortraitEntries = ([objectKey, viewport]) => {
const pixelStringToNumber = str => parseInt(str.split('px')[0]);
@@ -67,15 +68,14 @@ const convertToLandscapeAndPortraitEntries = ([objectKey, viewport]) => {
*/
const flatMapObject = (obj, f) => Object.fromEntries(Object.entries(obj).flatMap(f));
// Initialize MSW
initialize();
export const parameters = {
fetchMock: {
mocks: [],
},
// actions: { argTypesRegex: '^on[A-Z].*' },
docs: {
container: DocsContainer,
},
// actions: { argTypesRegex: '^on[A-Z].*' },
viewMode: 'docs',
controls: {
matchers: {
@@ -99,8 +99,8 @@ export const parameters = {
light: { ...themes.normal },
},
viewport: {
// Take a bunch of viewports from the storybook addon and convert them
// to portrait + landscape. Keys are appended with 'Landscape' or 'Portrait'.
viewports: flatMapObject(INITIAL_VIEWPORTS, convertToLandscapeAndPortraitEntries),
},
};
export const loaders = [mswLoader];
web/.storybook/stories-category-doc-pages/Design.mdx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
<Meta title="owncast/Documentation/Design" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
web/.storybook/stories-category-doc-pages/Development.mdx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
<Meta title="owncast/Documentation/Get Started with Owncast Development" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
web/.storybook/stories-category-doc-pages/Emoji.mdx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Canvas, Meta, Story, IconGallery, IconItem } from '@storybook/addon-docs';
import { Canvas, Meta, Story, IconGallery, IconItem } from '@storybook/addon-docs/blocks';
import { Image, ImageRow } from './ImageAsset';
<Meta title="owncast/Frontend Assets/Emoji" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
web/.storybook/stories-category-doc-pages/Images.mdx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs/blocks';
<Meta title="owncast/Frontend Assets/Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
web/.storybook/stories-category-doc-pages/LogosAndGraphics.mdx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
import { Image, ImageRow } from './ImageAsset';
<Meta
web/.storybook/stories-category-doc-pages/ProductDefinition.mdx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
<Meta title="owncast/Documentation/Product Definition" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
web/.storybook/stories-category-doc-pages/SocialPlatformImages.mdx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs/blocks';
<Meta title="owncast/Frontend Assets/Social Platform Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
web/.storybook/stories-category-doc-pages/Tshirt.mdx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
import { Image, ImageRow } from './ImageAsset';
<Meta title="owncast/Project Assets/T-Shirt" parameters={{chromatic: { disableSnapshot: true }}} />
web/.storybook/stories-category-doc-pages/Typography.mdx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Canvas, Meta, Story, Typeset, Source } from '@storybook/blocks';
import { Canvas, Meta, Story, Typeset, Source } from '@storybook/addon-docs/blocks';
<Meta
title="owncast/Styles/Typography"
web/.storybook/stories-category-doc-pages/WebComponents.mdx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
<Meta title="owncast/Documentation/Building Frontend Components" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
web/.storybook/stories-category-doc-pages/colors/ComponentColors.mdx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/blocks';
import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
import { ColorRow, getColor } from './Color';
<Meta
web/.storybook/stories-category-doc-pages/colors/OwncastColorPalette.mdx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/blocks';
import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/addon-docs/blocks';
import { ColorRow, getColor } from './Color';
<Meta
web/.storybook/stories-category-doc-pages/colors/UserColors.mdx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/blocks';
import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
import { ColorRow, getColor } from './Color';
<Meta
web/.storybook/storybook-theme.js
+2 -2
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { DocsContainer as BaseContainer } from '@storybook/addon-docs';
import { themes } from '@storybook/theming';
import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks';
import { themes } from 'storybook/theming';
export const DocsContainer = ({ children, context }) => {
return (