Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: upgrade Storybook to v7 #6499

Merged
merged 1 commit into from
Mar 28, 2024
Merged

feat: upgrade Storybook to v7 #6499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
51 changes: 45 additions & 6 deletions .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,17 @@
}
]
}
]
],
/* TODO: (FE-6306) - These rules have been added to allow us to
* upgrade Storybook, but all rules will need to be looked at */
"no-restricted-exports": "off",
"default-param-last": "off",
"react/no-unstable-nested-components": "off",
"react/jsx-no-constructed-context-values": "off",
"react/jsx-no-useless-fragment": "off",
"no-unsafe-optional-chaining": "off",
"prefer-regex-literals": "off",
"arrow-body-style": "off"
},
"env": {
"es6": true,
Expand All @@ -106,14 +116,22 @@
"plugin:react-hooks/recommended",
"plugin:no-unsanitized/DOM",
"airbnb",
"prettier",
"prettier/react"
"prettier"
],
"globals": {
"global": false,
"process": false
},
"overrides": [
{
"files": ["*.mdx"],
"extends": "plugin:mdx/recommended",
"rules": {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

comment (non-blocking): unlike the rules above, I'm really not keen on turning these off because they're about accessibility, not just code style. I've just played with it a bit and I'm not sure why we're getting flagged for these two - a lot of the failures seem to be in the same places for both and relate to anchor tags that have perfectly clear text content, so I don't know why that's failing.

As for self-closing-comp, this matters less (imo) but it should be an easy thing to fix where we have problems. Again though this is coming up in the same places, where it really shouldn't - so I think eslint is somehow misreading our code and this is giving rise to all 3 rule failures.

Happy to leave for now and open a new ticket to investigate - but I don't think we should just brush this under the carpet, and in that new ticket we should make a note to turn these rules back on when we've fixed whatever is going on.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll double check these rules as per your comment when I go through all the suggestions etc but for the record we've never had linting on mdx files and as I recall when I've added it these weren't possible to "fix" as there was nothing actually wrong. As I say, I will double check this though and you're right we could maybe do some investigation but there is a ticket created to go through all of our linting rules and strip it back as there's a lot of rules that we're putting in just because it's in airbnb's ruleset and I believe it would better to simplify this a fair bit and have more control for the team

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah yes, I'd missed that we didn't have any linting on mdx before.

As I said, these seem to be failing for no good reason as they're on code that absolutely shouldn't fail these rules. Happy to have a new ticket to investigate so this PR doesn't get bogged down with it, but I don't want to just disable important accessibility-related checks and forget about it, even if we end up going with this as a temporary fix for now.

"jsx-a11y/anchor-has-content": "off",
"jsx-a11y/control-has-associated-label": "off",
"react/self-closing-comp": "off"
}
},
{
"files": ["*.ts", "*.tsx"],
"parser": "@typescript-eslint/parser",
Expand All @@ -130,9 +148,10 @@
"plugins": ["@typescript-eslint"],
"extends": [
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint"
"prettier"
],
"settings": {
"mdx/code-blocks": true,
"react": {
"version": "detect"
}
Expand All @@ -146,6 +165,13 @@
"error",
{ "allow": ["arrowFunctions"] }
],
"react/function-component-definition": [
"error",
{
"namedComponents": "arrow-function",
"unnamedComponents": "arrow-function"
}
],
"no-restricted-imports": [
"error",
{
Expand All @@ -156,6 +182,18 @@
"react/prop-types": "off"
}
},
{
"files": ["*.stories.tsx"],
"rules": {
"react/function-component-definition": [
"error",
{
"namedComponents": "arrow-function",
"unnamedComponents": "arrow-function"
}
]
}
},
{
"files": ["*.spec.*"],
"env": {
Expand All @@ -173,7 +211,8 @@
],
"rules": {
"jest/expect-expect": "off",
"jest-dom/prefer-to-have-attribute": "off"
"jest-dom/prefer-to-have-attribute": "off",
"jest/no-alias-methods": "off"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

comment (non-blocking): it looks like these errors are easy to fix without turning the rule of - there's only a few places it flags errors, and these are all using toBeCalled(Times) instead of toHaveBeenCalled(Times) - and these would also make us consistent with the many more places where we've used the "correct" name.

But it's not a big deal so happy to leave it alone.

}
},
{
Expand Down Expand Up @@ -201,4 +240,4 @@
}
}
]
}
}
43 changes: 28 additions & 15 deletions .storybook/main.js → .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,33 @@
const path = require("path");
const glob = require("glob");

const projectRoot = path.resolve(__dirname, "../");
const ignoreTests = process.env.IGNORE_TESTS === "true";
const isChromatic = !ignoreTests;
const getStories = () =>
glob.sync(`${projectRoot}/src/**/*.stories.@(js|mdx|tsx)`, {
glob.sync(`${projectRoot}/src/**/*.{mdx,stories.@(js|jsx|ts|tsx)}`, {
...(ignoreTests && {
ignore: `${projectRoot}/src/**/*-test.stories.@(js|mdx|tsx)`,
ignore: `${projectRoot}/src/**/*-test.stories.@(js|jsx|ts|tsx)`,
}),
});

module.exports = {
framework: "@storybook/react",
stories: (list) => [
...list,
stories: [
"./welcome-page/welcome.stories.js",
"../docs/*.stories.mdx",
"../docs/*.mdx",
"../docs/*.stories.tsx",
...getStories(),
],
core: {
disableTelemetry: true,
},
addons: [
"@storybook/addon-a11y",
"@storybook/addon-actions",
"@storybook/addon-docs",
"@storybook/addon-controls",
"@storybook/addon-viewport",
"@storybook/addon-a11y",
"@storybook/addon-google-analytics",
"@storybook/addon-docs",
"@storybook/addon-links",
"@storybook/addon-mdx-gfm",
"@storybook/addon-toolbars",
"@storybook/addon-viewport",
],
staticDirs: ["../.assets", "../logo"],
webpackFinal: async (config, { configType }) => {
Expand All @@ -41,10 +38,19 @@ module.exports = {
extensions: [".js", ".tsx", ".ts"],
};

// Workaround to stop hashes being added to font filenames, so we can pre-load them
config.module.rules.find((rule) =>
// Finds the rule for woff2 files and modifies the file-loader to preserve the original filenames to allow us to preload them
const fontRuleIndex = config.module.rules.findIndex((rule) =>
rule.test.toString().includes("woff2")
).options.name = "static/media/[name].[ext]";
);
if (fontRuleIndex !== -1) {
config.module.rules[fontRuleIndex] = {
test: /\.(woff(2)?|eot|ttf|otf|svg|png)$/,
type: "asset/resource",
generator: {
filename: "static/media/[name][ext]",
},
};
}

return config;
},
Expand All @@ -58,4 +64,11 @@ module.exports = {
<meta name="robots" content="noindex">
`,
}),
framework: {
name: "@storybook/react-webpack5",
options: {},
},
docs: {
autodocs: true,
},
};
17 changes: 14 additions & 3 deletions .storybook/manager.js → .storybook/manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,26 @@
import { addons, types } from "@storybook/addons";
import { addons } from "@storybook/manager-api";
import { types } from "@storybook/addons";
import sageTheme from "./sageTheme";
import { ADDON_ID, TOOL_ID } from "./version-picker/constants";
import { VersionPicker } from "./version-picker";
import { API_PreparedIndexEntry, API_StatusObject } from "@storybook/types";

addons.setConfig({
theme: sageTheme,
panelPosition: "bottom",
showNav: true,
showPanel: true,
sidebar: {
filters: {
patterns: (
item: API_PreparedIndexEntry & {
status: Record<string, API_StatusObject | null>;
}
): boolean => {
return !(item.tags ?? []).includes("hideInSidebar");
},
},
},
});

if (process.env.NODE_ENV === "production") {
Expand All @@ -20,5 +33,3 @@ if (process.env.NODE_ENV === "production") {
});
});
}

window.STORYBOOK_GA_ID = "UA-77028225-13";
11 changes: 11 additions & 0 deletions .storybook/modes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export const allModes = {
default: {
viewport: 1280,
},
chromatic: {
viewport: {
height: 1200,
width: 900,
},
},
};
16 changes: 2 additions & 14 deletions .storybook/preview.js → .storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,11 @@ import withGlobalStyles from "./with-global-styles";
import { withLocaleSelector } from "./locale-selector";
import { withThemeProvider, globalThemeProvider } from "./withThemeProvider";
import { withPortalProvider } from "./with-portal-provider";
import { configureActions } from "@storybook/addon-actions";
import sageStorybookTheme from "./sageStorybookTheme";

import "../src/style/fonts.css";
import "./style/story-root.css";

// Temporary fix for issue mentioned in FE-2565 ticket
// Should be solved by the storybook team in foreseeable future
// https://github.com/storybookjs/storybook/issues/9948
// This usage is legacy (https://github.com/storybookjs/storybook/blob/master/addons/actions/ADVANCED.md)
// and will be removed in Storybook v7
configureActions({
// Maximum depth of serialization for large objects
depth: 6,
// Limit the number of items logged into the actions panel
limit: 20,
});

const customViewports = {
extraSmall: {
name: "Smart Phones",
Expand Down Expand Up @@ -58,7 +46,7 @@ const customViewports = {
};

export const parameters = {
layout: "fullscreen",
docs: { canvas: { layout: "padded" }, theme: sageStorybookTheme },
a11y: {
// axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
options: {
Expand Down
16 changes: 16 additions & 0 deletions .storybook/sageStorybookTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { create } from "@storybook/theming/create";

export default create({
base: "light",

// Typography
fontBase: '"Sage UI", sans-serif',
fontCode: "monospace",

brandTitle: "Carbon by Sage",
brandUrl: "https://carbon.sage.com",
brandImage: "carbon-by-sage-logo.png",

colorPrimary: "#3A10E5",
colorSecondary: "#007e45",
});
Loading
Loading