Skip to content

Commit

Permalink
fix(swc): upgrade storybook to v8 and migrate to SWC from babel (#841)
Browse files Browse the repository at this point in the history
* fix(swc): upgrade storybook to v8 and migrate to SWC from babel

All @mui/material/styled imports been replace with @emotion/styled for compatibility

* refactor(storybook): fix story icon and webpack configs

* fix(package.json): remove all babel dependencies

* fix(webpack): fix webpack configs to work with monorepo setup

* fix(style-dictionary): upgrade to style-dictionary v4

* fix(emotion): add @swc/plugin-emotion to handle component selectors in styled components

* refactor(rollup): refactor and improve rollup config
  • Loading branch information
masoudmanson authored Sep 7, 2024
1 parent 73a7837 commit bcab32f
Show file tree
Hide file tree
Showing 115 changed files with 3,063 additions and 5,329 deletions.
17 changes: 0 additions & 17 deletions .babelrc.json

This file was deleted.

2 changes: 2 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ module.exports = {
jest: true,
node: true,
},
// Excludes config files from linting
ignorePatterns: ["rollup.config.mjs"],
// Specifies the ESLint parser
extends: [
"plugin:import/recommended",
Expand Down
2 changes: 1 addition & 1 deletion .storybook/components/SidebarItem/style.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { styled } from "@mui/material";
import styled from "@emotion/styled";

export const StyledSidebarItem = styled("div")`
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion .storybook/components/StatusTag/style.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { styled } from "@mui/material";
import styled from "@emotion/styled";
import { StatusType } from "../SidebarItem/SidebarItem";

interface StyledLabelProps {
Expand Down
96 changes: 49 additions & 47 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,58 +1,60 @@
import { dirname, join } from "path";
const path = require("path");
const toPath = (filePath) => path.join(process.cwd(), filePath);
const { plugins } = require("axe-core");

module.exports = {
// Storybook version 7 needs babel config
babel: (config) => {
return {
...config,
presets: [
"@babel/preset-env",
"@babel/preset-typescript",
[
"@babel/preset-react",
{
runtime: "automatic",
},
],
],
plugins: [],
};
},
features: {
buildStoriesJson: true,
// (thuang): https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#emotion11-quasi-compatibility
emotionAlias: false,
},
stories: [
"../packages/components/src/**/*.stories.@(js|jsx|ts|tsx)",
"../packages/data-viz/src/**/*.stories.@(js|jsx|ts|tsx)",
],

core: {
disableWhatsNewNotifications: true,
},

addons: [
getAbsolutePath("@storybook/addon-links"),
getAbsolutePath("@storybook/addon-essentials"),
getAbsolutePath("@storybook/addon-interactions"),
getAbsolutePath("@storybook/addon-a11y"),
getAbsolutePath("@storybook/react"),
getAbsolutePath("storybook-addon-pseudo-states"),
getAbsolutePath("@geometricpanda/storybook-addon-badges"),
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/addon-a11y",
"@storybook/react",
"storybook-addon-pseudo-states",
"@geometricpanda/storybook-addon-badges",
"@storybook/addon-webpack5-compiler-swc",
"@chromatic-com/storybook",
],

framework: {
name: getAbsolutePath("@storybook/react-webpack5"),
options: {},
name: "@storybook/react-webpack5",
options: {
builder: {
useSWC: true,
},
},
},
// (masoudmanson): The latest update of Storybook version 7 now features
// a new Docs tab, in addition to the Default, Live Preview, and Test Stories.
// In order to align with our project requirements, we have set the auto Docs
// tab to a value of "false" as we do not currently require its functionality.
docs: {
autodocs: false,

swc: () => ({
jsc: {
/**
* (masoudmanson): This is needed to enable emotion plugin for swc
* for use cases like component selectors in styled components
*
* for example:
*
* const StyledChild = styled.div` color: red; `;
*
* const StyledParent = styled.div` ${StyledChild} { color: green; } `;
*/
experimental: {
plugins: [["@swc/plugin-emotion", {}]],
},
transform: {
react: {
runtime: "automatic",
},
},
},
}),

typescript: {
reactDocgen: "react-docgen",
},
};
/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value) {
return dirname(require.resolve(join(value, "package.json")));
}
53 changes: 18 additions & 35 deletions .storybook/manager-head.html
Original file line number Diff line number Diff line change
Expand Up @@ -115,39 +115,22 @@
#list-item-dark svg path {
fill: black !important;
}

/*
* (masoudmanson): The below styles are to hide the default bookmark icon and
* replace it with SDS flag outline icon.
*/
div[data-nodetype="story"] svg,
[data-nodetype="story"] a svg {
display: none !important;
}

div[data-nodetype="story"] a::before {
content: "";
width: 15px;
aspect-ratio: 1 / 1;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz48L2RlZnM+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNIDE1LjM3NiA2LjU1NCBMIDEwLjk1OSAyLjUxNSBDIDEwLjgwMSAyLjM2OCAxMC41OTQgMi4yODYgMTAuMzc5IDIuMjg1IEwgMC44OTEgMi4yODUgQyAwLjY1MSAyLjI4NyAwLjQyMiAyLjM4OCAwLjI1OSAyLjU2NSBDIDAuMDkgMi43NDggLTAuMDAyIDIuOTg5IC0wLjAwMSAzLjIzOCBMIC0wLjAwMSAxMi43NjIgQyAtMC4wMDEgMTMuMDE0IDAuMDkzIDEzLjI1NyAwLjI2IDEzLjQzNSBDIDAuNDIzIDEzLjYxMiAwLjY1MiAxMy43MTQgMC44OTIgMTMuNzE1IEwgMTAuMzc5IDEzLjcxNSBDIDEwLjU5NCAxMy43MTQgMTAuODAxIDEzLjYzMiAxMC45NTkgMTMuNDg1IEwgMTUuMzc2IDkuNDQ2IEMgMTUuNTcxIDkuMjY3IDE1LjcyOCA5LjA0NiAxNS44MzYgOC43OTYgQyAxNi4wNTUgOC4yODggMTYuMDU1IDcuNzEyIDE1LjgzNiA3LjIwNCBDIDE1LjczIDYuOTU3IDE1LjU3NCA2LjczNiAxNS4zNzYgNi41NTQgWiBNIDE0Ljg4NiA4LjU5MiBDIDE0Ljk2NCA4LjUxOSAxNS4wMjYgOC40MzEgMTUuMDY4IDguMzMyIEMgMTUuMTYyIDguMTEzIDE1LjE2MiA3Ljg2NCAxNS4wNjggNy42NDUgQyAxNS4wMjYgNy41NDcgMTQuOTY0IDcuNDU5IDE0Ljg4NiA3LjM4NiBMIDEwLjM1IDMuMTU2IEwgMC45MTIgMy4xNjMgTCAwLjg4NyAxMi43NiBMIDEwLjM2IDEyLjgxNiBMIDE0Ljg4NyA4LjU5MyBMIDE0Ljg4NiA4LjU5MiBaIj48L3BhdGg+Cjwvc3ZnPg==");
background-size: cover;
margin-top: 1px;
}
</style>
<script>
//workaround to increase the left panel width just enough to show even the longer story names
//based on https://github.com/storybookjs/storybook/issues/9682#issuecomment-983356523
const DEFAULT_MINIMUM_LEFT_PANEL_WIDTH = 280; // original default is 230
let storybookConfig = JSON.parse(localStorage.getItem("storybook-layout"));

// we only resize the left panel if it is set to a value lower than DEFAULT_MINIMUM_LEFT_PANEL_WIDTH
if (
typeof storybookConfig === "object" &&
storybookConfig !== null &&
storybookConfig.resizerNav.x < DEFAULT_MINIMUM_LEFT_PANEL_WIDTH
) {
storybookConfig.resizerNav.x = DEFAULT_MINIMUM_LEFT_PANEL_WIDTH;
localStorage.setItem("storybook-layout", JSON.stringify(storybookConfig));
document.location.reload();
} else if (storybookConfig === null) {
storybookConfig = {
resizerNav: { x: DEFAULT_MINIMUM_LEFT_PANEL_WIDTH, y: 0 },
};
localStorage.setItem("storybook-layout", JSON.stringify(storybookConfig));
document.location.reload();
}

// Change bookmark icon to SDS designed icon
document.addEventListener("DOMContentLoaded", function () {
let bookmarkHollowIcon = document.getElementById(
"icon--bookmarkhollow"
).firstChild;
bookmarkHollowIcon.setAttribute(
"d",
"M 13.762 6.202 C 13.87 6.452 13.927 6.724 13.927 7.001 C 13.927 7.275 13.87 7.548 13.762 7.799 C 13.656 8.049 13.498 8.272 13.303 8.451 L 8.873 12.502 C 8.711 12.65 8.504 12.731 8.29 12.731 L 0.968 12.731 C 0.731 12.731 0.503 12.631 0.336 12.452 C 0.168 12.273 0.073 12.03 0.073 11.775 L 0.073 2.224 C 0.073 1.971 0.168 1.727 0.336 1.548 C 0.503 1.369 0.731 1.269 0.968 1.269 L 8.29 1.269 C 8.504 1.269 8.711 1.35 8.873 1.499 L 13.303 5.55 C 13.498 5.729 13.656 5.952 13.762 6.202 Z M 12.508 7.538 C 12.575 7.477 12.634 7.397 12.675 7.3 C 12.717 7.204 12.739 7.095 12.739 6.986 C 12.739 6.874 12.717 6.767 12.675 6.669 C 12.634 6.574 12.575 6.493 12.508 6.432 L 8.161 2.346 L 1.085 2.34 L 1.106 11.659 L 8.28 11.628 L 12.508 7.538 Z"
);
bookmarkHollowIcon.setAttribute("fill-rule", "evenodd");
});
</script>
2 changes: 1 addition & 1 deletion .storybook/manager.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// .storybook/manager.js
import React from "react";
import { addons } from "@storybook/addons";
import { addons } from "@storybook/manager-api";
import sdsTheme from "./sds-theme";
import SidebarItem from "./components/SidebarItem/SidebarItem";

Expand Down
Binary file not shown.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ import { Button } from "@czi-sds/components";
2. Mixins - Grouped styles defined by the design system

```javascript
import { styled } from '@mui/material/styles';
import { styled } from '@emotion/styled';
import { Typography } from "@mui/material";
import { fontHeaderXL } from "@czi-sds/components";

Expand All @@ -93,7 +93,7 @@ export const Title - styled(Typography)`

```ts
import { css, SerializedStyles } from "@emotion/react";
import { styled } from "@mui/material/styles";
import styled from "@emotion/styled";
import { getColors, getCorners } from "@czi-sds/components";
export const Tag = styled("div")`
Expand Down
5 changes: 5 additions & 0 deletions chromatic.config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"onlyChanged": true,
"projectId": "Project:616981d9028812003ade73f3",
"zip": true
}
66 changes: 27 additions & 39 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,11 @@
"repository": "https://github.com/chanzuckerberg/sci-components.git",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.23.6",
"@babel/plugin-syntax-flow": "^7.23.3",
"@babel/plugin-transform-react-jsx": "^7.23.4",
"@babel/preset-env": "^7.23.6",
"@babel/preset-react": "^7.23.3",
"@babel/preset-typescript": "^7.23.3",
"@chanzuckerberg/axe-storybook-testing": "^7.1.3",
"@chanzuckerberg/story-utils": "^4.0.0",
"@chanzuckerberg/axe-storybook-testing": "^8.2.0",
"@chanzuckerberg/story-utils": "^4.0.8",
"@chromatic-com/storybook": "^1",
"@czi-sds/components": "workspace:^",
"@czi-sds/data-viz": "workspace:^",
"@emotion/core": "^11.0.0",
"@emotion/css": "^11.11.2",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
Expand All @@ -25,32 +19,31 @@
"@mui/material": "^5.15.3",
"@omlet/cli": "^1.1.1",
"@reduxjs/toolkit": "^2.1.0",
"@rollup/plugin-typescript": "^11.1.5",
"@rollup/plugin-commonjs": "^26.0.1",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-url": "^8.0.2",
"@storybook/addon-a11y": "^7.6.17",
"@storybook/addon-actions": "^7.6.17",
"@storybook/addon-essentials": "^7.6.17",
"@storybook/addon-interactions": "^7.6.17",
"@storybook/addon-links": "^7.6.17",
"@storybook/addon-storyshots": "^7.6.17",
"@storybook/addons": "^7.6.17",
"@storybook/components": "^7.6.17",
"@storybook/core-events": "^7.6.17",
"@storybook/manager-api": "^7.6.17",
"@storybook/preview-api": "^7.6.17",
"@storybook/react": "^7.6.17",
"@storybook/react-webpack5": "^7.6.17",
"@storybook/test-runner": "^0.16.0",
"@storybook/testing-library": "^0.2.2",
"@storybook/theming": "^7.6.17",
"@storybook/addon-a11y": "^8.2.9",
"@storybook/addon-actions": "^8.2.9",
"@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-interactions": "^8.2.9",
"@storybook/addon-links": "^8.2.9",
"@storybook/addon-webpack5-compiler-swc": "^1.0.5",
"@storybook/components": "^8.2.9",
"@storybook/core-events": "^8.2.9",
"@storybook/manager-api": "^8.2.9",
"@storybook/preview-api": "^8.2.9",
"@storybook/react": "^8.2.9",
"@storybook/react-webpack5": "^8.2.9",
"@storybook/test": "^8.2.9",
"@storybook/test-runner": "^0.19.1",
"@storybook/theming": "^8.2.9",
"@svgr/rollup": "^8.1.0",
"@svgr/webpack": "^8.1.0",
"@swc/plugin-emotion": "^4.0.1",
"@testing-library/dom": "^9.3.3",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^14.1.2",
"@testing-library/user-event": "^14.5.1",
"@types/babel__core": "^7.20.5",
"@types/babel__preset-env": "^7.9.6",
"@types/concurrently": "^7.0.0",
"@types/d3-scale-chromatic": "^3.0.3",
"@types/eslint": "^8.56.0",
Expand All @@ -69,8 +62,6 @@
"@typescript-eslint/parser": "^6.15.0",
"autoprefixer": "^10.4.16",
"axe-core": "^4.8.4",
"babel-eslint": "^10.1.0",
"babel-loader": "^9.1.3",
"chromatic": "^10.1.0",
"commitizen": "^4.2.4",
"concurrently": "^8.2.2",
Expand All @@ -83,16 +74,14 @@
"eslint": "^8.56.0",
"eslint-config-airbnb-typescript": "^17.1.0",
"eslint-config-prettier": "^9.1.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jest": "^27.6.0",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.1.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-sonarjs": "^0.23.0",
"eslint-plugin-storybook": "^0.6.15",
"eslint-plugin-storybook": "^0.8.0",
"husky": "^8.0.3",
"jest": "^29.7.0",
"lerna": "^8.0.1",
Expand All @@ -114,21 +103,20 @@
"sass": "^1.70.0",
"sass-loader": "^14.1.0",
"simplex-noise": "^4.0.1",
"storybook": "^7.6.17",
"storybook-addon-emotion-theme": "^2.1.1",
"storybook-addon-pseudo-states": "^2.1.2",
"style-dictionary": "^4.0.1",
"storybook": "^8.2.9",
"storybook-addon-pseudo-states": "^4.0.2",
"style-dictionary": "^4.1.0",
"style-loader": "^3.3.4",
"stylelint": "13.11.0",
"stylelint-config-recommended": "3.0.0",
"stylelint-config-standard": "20.0.0",
"ts-jest": "^29.1.1",
"typescript": "^5.3.3",
"typescript": "5.3.3",
"url-loader": "^4.1.1",
"webpack": "^5.90.1"
},
"scripts": {
"start": "storybook dev -p 6006",
"start": "storybook dev -p 6006 --no-open",
"build-storybook": "storybook build -o docs-build",
"test-storybook": "test-storybook",
"storybook:axe": "yarn build-storybook && yarn storybook:axeOnly",
Expand Down
4 changes: 2 additions & 2 deletions packages/components/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ import { Button } from "@czi-sds/components";
2. Mixins - Grouped styles defined by the design system

```javascript
import { styled } from '@mui/material/styles';
import { styled } from '@emotion/styled';
import { Typography } from "@mui/material";
import { fontHeaderXL } from "@czi-sds/components";

Expand All @@ -93,7 +93,7 @@ export const Title - styled(Typography)`

```ts
import { css, SerializedStyles } from "@emotion/react";
import { styled } from "@mui/material/styles";
import styled from "@emotion/styled";
import { getColors, getCorners } from "@czi-sds/components";
export const Tag = styled("div")`
Expand Down
4 changes: 2 additions & 2 deletions packages/components/docs/eng-how-to.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ import { Button } from "@czi-sds/components";
2. Mixins - Grouped styles defined by the design system

```javascript
import { styled } from '@mui/material/styles';
import { styled } from "@emotion/styled";
import { Typography } from "@material-ui/core";
import { fontHeaderXL } from "@czi-sds/components";

Expand All @@ -78,7 +78,7 @@ export const Title - styled(Typography)`

```ts
import { css, SerializedStyles } from "@emotion/react";
import { styled } from "@mui/material/styles";
import styled from "@emotion/styled";
import { getColors, getCorners } from "@czi-sds/components";
export const Tag = styled("div")`
Expand Down
Loading

0 comments on commit bcab32f

Please sign in to comment.