Skip to content

Commit

Permalink
make all storybook configs TS
Browse files Browse the repository at this point in the history
  • Loading branch information
sndrs committed Aug 28, 2024
1 parent 427d375 commit 0ac47e3
Show file tree
Hide file tree
Showing 11 changed files with 58 additions and 61 deletions.
39 changes: 28 additions & 11 deletions configs/storybook/main.js → configs/storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
const fs = require('node:fs');
import { readFileSync } from 'node:fs';
import { isObject } from '@guardian/libs';
import type { StorybookConfig } from '@storybook/react-webpack5';

export type { StorybookConfig };

const nodeModulesExclude = {
and: [/node_modules/],
not: [/@guardian\//],
};

module.exports = {
const config: StorybookConfig = {
stories: [],
addons: [
'@storybook/addon-a11y',
'@storybook/addon-essentials',
'@storybook/addon-links',
],
features: {
// used in composition
buildStoriesJson: true,
},
webpackFinal: async (config, { configType }) => {
config.module ??= { rules: [] };
config.module.rules ??= [];

config.module.rules.push({
test: /\.(ts|tsx)$/,
exclude: nodeModulesExclude,
Expand Down Expand Up @@ -45,11 +48,23 @@ module.exports = {
});

// update storybook webpack config to transpile *all* JS
config.module.rules.find(
(rule) => String(rule.test) === String(/\.(cjs|mjs|tsx?|jsx?)$/),
).exclude = nodeModulesExclude;
for (const rule of config.module.rules) {
if (isObject(rule) && rule.test instanceof RegExp) {
if (
rule.test.test('file.js') ||
rule.test.test('file.cjs') ||
rule.test.test('file.mjs') ||
rule.test.test('file.jsx') ||
rule.test.test('file.ts') ||
rule.test.test('file.cts') ||
rule.test.test('file.mts') ||
rule.test.test('file.tsx')
) {
rule.exclude = nodeModulesExclude;
}
}
}

config.resolve.plugins ||= [];
return config;
},
framework: {
Expand All @@ -60,5 +75,7 @@ module.exports = {
autodocs: true,
},
previewHead: (head) =>
head + fs.readFileSync(require.resolve('./preview-head.html'), 'utf8'),
head + readFileSync(require.resolve('./preview-head.html'), 'utf8'),
};

export default config;
1 change: 1 addition & 0 deletions configs/storybook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"@babel/preset-typescript": "7.24.1",
"@emotion/babel-plugin": "11.12.0",
"@emotion/react": "11.11.3",
"@guardian/libs": "workspace:*",
"@guardian/source": "workspace:*",
"@storybook/addon-a11y": "8.2.7",
"@storybook/addon-docs": "8.2.7",
Expand Down
4 changes: 2 additions & 2 deletions configs/storybook/preview/FocusManagerDecorator.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { Decorator } from '@storybook/react';
import { useEffect } from 'react';
import { FocusStyleManager } from '@guardian/source/foundations';
import { useEffect } from 'react';
import type { Decorator } from '@storybook/react';

export const FocusManagerDecorator: Decorator = (storyFn) => {
useEffect(() => {
Expand Down
2 changes: 0 additions & 2 deletions configs/storybook/preview/ThemeProviderDecorator.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
/* eslint-disable @typescript-eslint/no-unsafe-assignment -- storybook type contains `any`s */

import { ThemeProvider } from '@emotion/react';
import type { Decorator } from '@storybook/react';

Expand Down
4 changes: 2 additions & 2 deletions configs/storybook/preview/viewport.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { Breakpoint } from '@guardian/source/foundations';
import { breakpoints } from '@guardian/source/foundations';
import type { Breakpoint } from '@guardian/source/foundations';

type ViewportMeta = {
[key in Breakpoint]: {
Expand Down Expand Up @@ -66,7 +66,7 @@ const viewportEntries = Object.entries(breakpoints).map(([name, width]) => {
];
});

const viewportEntriesObject = Object.fromEntries(viewportEntries) as Viewports;
const viewportEntriesObject: Viewports = Object.fromEntries(viewportEntries);

export const viewport = {
viewports: {
Expand Down
4 changes: 4 additions & 0 deletions configs/storybook/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"extends": "../../tsconfig.base.json",
"include": ["**/*"]
}
22 changes: 0 additions & 22 deletions libs/@guardian/source-development-kitchen/.storybook/main.js

This file was deleted.

9 changes: 9 additions & 0 deletions libs/@guardian/source-development-kitchen/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import base from '../../../../configs/storybook/main';
import type { StorybookConfig } from '../../../../configs/storybook/main';

const config: StorybookConfig = {
...base,
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
};

export default config;
22 changes: 0 additions & 22 deletions libs/@guardian/source/.storybook/main.js

This file was deleted.

9 changes: 9 additions & 0 deletions libs/@guardian/source/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import base from '../../../../configs/storybook/main';
import type { StorybookConfig } from '../../../../configs/storybook/main';

const config: StorybookConfig = {
...base,
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
};

export default config;
3 changes: 3 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 0ac47e3

Please sign in to comment.