Skip to content

Commit

Permalink
Merge pull request #100 from chromaui/next
Browse files Browse the repository at this point in the history
Upgrade to Storybook 8
  • Loading branch information
ghengeveld authored Mar 25, 2024
2 parents c211e60 + fce90b1 commit e5e3f07
Show file tree
Hide file tree
Showing 11 changed files with 2,702 additions and 2,706 deletions.
6 changes: 4 additions & 2 deletions .babelrc.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
// this configuration is used by jest, not for actual building the addon

module.exports = {
targets: "defaults",
presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
targets: "defaults",
presets: ["@babel/preset-env", "@babel/preset-typescript"],
}
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
18
3 changes: 2 additions & 1 deletion .storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ module.exports = {
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"../",
"@chromaui/addon-visual-tests"
"@chromatic-com/storybook",
"@storybook/addon-webpack5-compiler-swc",
],
framework: {
name: "@storybook/react-webpack5",
Expand Down
1 change: 0 additions & 1 deletion .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
Expand Down
3 changes: 2 additions & 1 deletion chromatic.config.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"buildScriptName": "build:storybook",
"projectId": "Project:6008aabce49a640021858011"
"projectId": "Project:6008aabce49a640021858011",
"zip": true
}
68 changes: 33 additions & 35 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,14 @@
"types": "./dist/index.d.ts"
},
"./manager": {
"types": "./dist/manager.d.ts",
"require": "./dist/manager.js",
"import": "./dist/manager.mjs",
"types": "./dist/manager.d.ts"
"import": "./dist/manager.mjs"
},
"./preview": {
"types": "./dist/preview.d.ts",
"require": "./dist/preview.js",
"import": "./dist/preview.mjs",
"types": "./dist/preview.d.ts"
"import": "./dist/preview.mjs"
},
"./package.json": "./package.json"
},
Expand All @@ -50,46 +50,44 @@
"prepublish": "yarn clean && yarn build:dist",
"release": "auto shipit --base-branch=main"
},
"dependencies": {},
"devDependencies": {
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@chromaui/addon-visual-tests": "^0.0.105",
"@storybook/addon-essentials": "^7.4.6",
"@storybook/addon-interactions": "^7.4.6",
"@storybook/addon-links": "^7.4.6",
"@storybook/react": "^7.4.6",
"@storybook/react-webpack5": "^7.4.6",
"@storybook/testing-library": "^0.0.13",
"@storybook/types": "^7.4.6",
"@babel/preset-env": "^7.24.0",
"@babel/preset-typescript": "^7.23.3",
"@chromatic-com/storybook": "^1.2.1",
"@storybook/addon-essentials": "^8.0.0",
"@storybook/addon-interactions": "^8.0.0",
"@storybook/addon-links": "^8.0.0",
"@storybook/addon-webpack5-compiler-swc": "^1.0.0",
"@storybook/components": "^8.0.0",
"@storybook/core-events": "^8.0.0",
"@storybook/icons": "^1.2.9",
"@storybook/manager-api": "^8.0.0",
"@storybook/preview-api": "^8.0.0",
"@storybook/theming": "^8.0.0",
"@storybook/react-webpack5": "^8.0.0",
"@storybook/types": "^8.0.0",
"@types/jest": "^29.2.4",
"@types/node": "^18.19.0",
"auto": "^11.1.1",
"concurrently": "^5.3.0",
"jest": "^27.5.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rimraf": "^3.0.2",
"storybook": "^7.4.6",
"storybook": "^8.0.0",
"tsup": "^8.0.1",
"typescript": "^4.9.4"
},
"peerDependencies": {
"@storybook/components": "^7.4.6",
"@storybook/core-events": "^7.4.6",
"@storybook/manager-api": "^7.4.6",
"@storybook/preview-api": "^7.4.6",
"@storybook/theming": "^7.4.6",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"react": {
"optional": true
},
"react-dom": {
"optional": true
}
"bundler": {
"exportEntries": [
"src/index.ts"
],
"managerEntries": [
"src/manager.ts"
],
"previewEntries": [
"src/preview.ts"
]
},
"storybook": {
"displayName": "Pseudo States",
Expand Down
4 changes: 0 additions & 4 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,2 @@
if (module && module.hot && module.hot.decline) {
module.hot.decline()
}

// make it work with --isolatedModules
export default {}
11 changes: 6 additions & 5 deletions src/manager/PseudoStateTool.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useCallback } from "react"
import { Icons, IconButton, WithTooltip, TooltipLinkList } from "@storybook/components"
import { IconButton, WithTooltip, TooltipLinkList } from "@storybook/components"
import { CheckIcon } from "@storybook/icons"
import { useGlobals } from "@storybook/manager-api"
import { styled, color } from "@storybook/theming"

Expand All @@ -9,7 +10,7 @@ const LinkTitle = styled.span<{ active?: boolean }>(({ active }) => ({
color: active ? color.secondary : "inherit",
}))

const LinkIcon = styled(Icons)<{ active?: boolean }>(({ active }) => ({
const LinkIcon = styled(CheckIcon)<{ active?: boolean }>(({ active }) => ({
opacity: active ? 1 : 0,
path: { fill: active ? color.secondary : "inherit" },
}))
Expand All @@ -25,7 +26,7 @@ export const PseudoStateTool = () => {
if (!pseudo) return false
return pseudo[option] === true
},
[pseudo]
[pseudo],
)

const toggleOption = useCallback(
Expand All @@ -37,7 +38,7 @@ export const PseudoStateTool = () => {
},
})
},
[pseudo]
[pseudo],
)

return (
Expand All @@ -49,7 +50,7 @@ export const PseudoStateTool = () => {
links={options.map((option) => ({
id: option,
title: <LinkTitle active={isActive(option)}>:{PSEUDO_STATES[option]}</LinkTitle>,
right: <LinkIcon icon="check" width={12} height={12} active={isActive(option)} />,
right: <LinkIcon width={12} height={12} active={isActive(option)} />,
onClick: toggleOption(option),
active: isActive(option),
}))}
Expand Down
15 changes: 10 additions & 5 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
{
"compilerOptions": {
"target": "ES2022",
"module": "ES2022",
"moduleResolution": "node",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"incremental": false,
"isolatedModules": true,
"jsx": "react",
}
"module": "ES2022",
"moduleResolution": "node",
"rootDir": "./src",
"skipLibCheck": true,
"strict": true,
"target": "ES2022",
},
"include": ["src/**/*"],
}
117 changes: 110 additions & 7 deletions tsup.config.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,112 @@
import { defineConfig } from "tsup"
import { defineConfig, type Options } from "tsup";
import { readFile } from "fs/promises";
import { globalPackages as globalManagerPackages } from "@storybook/manager/globals";
import { globalPackages as globalPreviewPackages } from "@storybook/preview/globals";

export default defineConfig(() => {
return {
dts: { entry: ["src/index.ts", "src/manager.ts", "src/preview.ts"] },
entry: ["src/index.ts", "src/manager.ts", "src/preview.ts"],
format: ["esm", "cjs"],
// The current browsers supported by Storybook v7
const BROWSER_TARGET: Options['target'] = ["chrome100", "safari15", "firefox91"];
const NODE_TARGET: Options['target'] = ["node18"];

type BundlerConfig = {
bundler?: {
exportEntries?: string[];
nodeEntries?: string[];
managerEntries?: string[];
previewEntries?: string[];
};
};

export default defineConfig(async (options) => {
// reading the three types of entries from package.json, which has the following structure:
// {
// ...
// "bundler": {
// "exportEntries": ["./src/index.ts"],
// "managerEntries": ["./src/manager.ts"],
// "previewEntries": ["./src/preview.ts"]
// "nodeEntries": ["./src/preset.ts"]
// }
// }
const packageJson = await readFile('./package.json', 'utf8').then(JSON.parse) as BundlerConfig;
const {
bundler: {
exportEntries = [],
managerEntries = [],
previewEntries = [],
nodeEntries = [],
} = {},
} = packageJson;

const commonConfig: Options = {
splitting: false,
minify: !options.watch,
treeshake: true,
sourcemap: true,
clean: true,
};

const configs: Options[] = [];

// export entries are entries meant to be manually imported by the user
// they are not meant to be loaded by the manager or preview
// they'll be usable in both node and browser environments, depending on which features and modules they depend on
if (exportEntries.length) {
configs.push({
...commonConfig,
entry: exportEntries,
dts: {
resolve: true,
},
format: ["esm", "cjs"],
target: [...BROWSER_TARGET, ...NODE_TARGET],
platform: "neutral",
external: [...globalManagerPackages, ...globalPreviewPackages],
});
}

// manager entries are entries meant to be loaded into the manager UI
// they'll have manager-specific packages externalized and they won't be usable in node
// they won't have types generated for them as they're usually loaded automatically by Storybook
if (managerEntries.length) {
configs.push({
...commonConfig,
entry: managerEntries,
format: ["esm"],
target: BROWSER_TARGET,
platform: "browser",
external: globalManagerPackages,
});
}

// preview entries are entries meant to be loaded into the preview iframe
// they'll have preview-specific packages externalized and they won't be usable in node
// they'll have types generated for them so they can be imported when setting up Portable Stories
if (previewEntries.length) {
configs.push({
...commonConfig,
entry: previewEntries,
dts: {
resolve: true,
},
format: ["esm", "cjs"],
target: BROWSER_TARGET,
platform: "browser",
external: globalPreviewPackages,
});
}
})

// node entries are entries meant to be used in node-only
// this is useful for presets, which are loaded by Storybook when setting up configurations
// they won't have types generated for them as they're usually loaded automatically by Storybook
if (nodeEntries.length) {
configs.push({
...commonConfig,
entry: nodeEntries,
format: ["cjs"],
target: NODE_TARGET,
platform: "node",
});
}

return configs;
});
Loading

0 comments on commit e5e3f07

Please sign in to comment.