synced/webstudio
1
0
Fork 0
mirror of https://github.com/webstudio-is/webstudio.git synced 2025-03-14 09:57:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: merge all storybooks into one (#3441)

Browse Source 
Monorepo setup for storybook is very complicated, it has two major
problems

- it is very annoying to look for any link in commit status
- hard to upgrade comparing with single project setup

Here merged all storybooks into one in the root.
This commit is contained in:
Bogdan Chadkin
2024-05-29 17:05:17 +03:00
committed by GitHub
parent 2e236917a7
commit ea30e840a1
42 changed files with 513 additions and 838 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
.github/workflows/chromatic.yml vendored
View File

@ -20,56 +20,6 @@ jobs:
runs-on: ubuntu-latest
strategy:
matrix:
project:
[
builder-app,
css-engine,
design-system,
icons,
image,
sdk-components-react,
sdk-components-react-radix,
]
include:
- project: builder-app
chromaticSecretKey: bea8dc1981d4
workingDir: apps/builder
- project: css-engine
chromaticSecretKey: 4c9027c284cd
workingDir: packages/css-engine
- project: design-system
chromaticSecretKey: 1e6cb506d54c
workingDir: packages/design-system
- project: icons
chromaticSecretKey: a65a9a61b5eb
workingDir: packages/icons
- project: image
chromaticSecretKey: 45e26b79ab8a
workingDir: packages/image
- project: sdk-components-react
chromaticSecretKey: 04114b467b2b
workingDir: packages/sdk-components-react
- project: sdk-components-react-radix
chromaticSecretKey: 04114b467b2b
workingDir: packages/sdk-components-react-radix
outputs:
builder-app: ${{ steps.deployed-url.outputs.builder-app }}
css-engine: ${{ steps.deployed-url.outputs.css-engine }}
design-system: ${{ steps.deployed-url.outputs.design-system }}
icons: ${{ steps.deployed-url.outputs.icons }}
image: ${{ steps.deployed-url.outputs.image }}
sdk-components-react: ${{ steps.deployed-url.outputs.sdk-components-react }}
sdk-components-react-radix: ${{ steps.deployed-url.outputs.sdk-components-react-radix }}
steps:
- uses: actions/checkout@v4
with:
@ -82,34 +32,5 @@ jobs:
id: chromatic
uses: chromaui/action@v11.3.0
with:
projectToken: ${{ matrix.chromaticSecretKey }}
workingDir: ${{ matrix.workingDir }}
projectToken: bea8dc1981d4
buildScriptName: storybook:build
- name: Save deployed URL
id: deployed-url
run: echo "${{ matrix.project }}=${{ steps.chromatic.outputs.storybookUrl }}" >> $GITHUB_OUTPUT
chromatic-root:
timeout-minutes: 20
needs: chromatic
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 2 # we need to fetch at least parent commit to satisfy Chromatic
ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
- uses: ./.github/actions/ci-setup
- name: Chromatic
id: chromatic
uses: chromaui/action@v11.3.0
with:
projectToken: aed47de034e6
buildScriptName: storybook:build
env:
DEPLOYED_URLS: ${{ toJSON(needs.chromatic.outputs) }}

39
.github/workflows/vis-reg-tests.yml vendored
View File

@ -15,25 +15,7 @@ permissions:
contents: read # to fetch code (actions/checkout)
jobs:
design-system:
timeout-minutes: 20
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
#with:
#ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
- uses: ./.github/actions/ci-setup
- name: Build Storybook for Design System
run: pnpm run --filter=@webstudio-is/design-system storybook:build
- name: Lost Pixel
uses: lost-pixel/lost-pixel@v3.16.0
env:
LOST_PIXEL_CONFIG_DIR: packages/design-system
LOST_PIXEL_API_KEY: 8b76db6c-b9f0-46d1-982f-70900a02690a
builder:
lost-pixel:
timeout-minutes: 20
runs-on: ubuntu-latest
env:
@ -46,26 +28,9 @@ jobs:
- uses: ./.github/actions/ci-setup
- name: Build Storybook for Builder
run: pnpm run --filter=@webstudio-is/builder storybook:build
- run: VISUAL_TESTING=true pnpm storybook:build
- name: Lost Pixel
uses: lost-pixel/lost-pixel@v3.16.0
env:
LOST_PIXEL_CONFIG_DIR: apps/builder
LOST_PIXEL_API_KEY: 8b76db6c-b9f0-46d1-982f-70900a02690a
finalize:
needs: [builder, design-system]
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Lost Pixel Finalize
uses: lost-pixel/lost-pixel@v3.16.0
env:
LOST_PIXEL_CONFIG_DIR: apps/builder
LOST_PIXEL_API_KEY: 8b76db6c-b9f0-46d1-982f-70900a02690a
with:
FINALIZE: true

20
.storybook/main.js
View File

@ -1,20 +0,0 @@
if (!process.env.DEPLOYED_URLS) {
throw new Error("process.env.DEPLOYED_URLS is not set");
}
const urls = JSON.parse(process.env.DEPLOYED_URLS);
module.exports = {
// at least one story is required: https://github.com/storybookjs/storybook/issues/12705
stories: ["./whole-repo.stories.js"],
refs: Object.fromEntries(
Object.entries(urls).map(([key, url]) => [
key,
{ title: key, url, expanded: false },
])
),
framework: {
name: "@storybook/react-vite",
options: {},
},
};

67
.storybook/main.ts Normal file
View File

@ -0,0 +1,67 @@
import * as path from "node:path";
import type { StorybookConfig } from "@storybook/react-vite";
const visualTestingStories: StorybookConfig["stories"] = [
{
directory: "../apps/builder",
titlePrefix: "Builder",
},
{
directory: "../packages/design-system",
titlePrefix: "Design System",
},
];
export default {
stories: process.env.VISUAL_TESTING
? visualTestingStories
: [
...visualTestingStories,
{
directory: "../packages/css-engine",
titlePrefix: "Css Engine",
},
{
directory: "../packages/image",
titlePrefix: "Image",
},
{
directory: "../packages/icons",
titlePrefix: "Icons",
},
{
directory: "../packages/sdk-components-react",
titlePrefix: "Sdk Components React",
},
{
directory: "../packages/sdk-components-react-radix",
titlePrefix: "Sdk Components React Radix",
},
],
framework: {
name: "@storybook/react-vite",
options: {},
},
addons: ["@storybook/addon-essentials", "@storybook/addon-links"],
async viteFinal(config) {
return {
...config,
define: {
...config.define,
// storybook use "util" package internally which is bundled with stories
// and gives and error that process is undefined
"process.env.NODE_DEBUG": "undefined",
},
resolve: {
...config.resolve,
conditions: ["webstudio", "import", "module", "browser", "default"],
alias: [
{
find: "~",
replacement: path.resolve("./apps/builder/app"),
},
],
},
};
},
} satisfies StorybookConfig;

2
packages/sdk-components-react-radix/.storybook/preview-body.html → .storybook/preview-body.html
View File

@ -1,4 +1,4 @@
<script>
// For styling purposes
// for styling radix components
document.body.setAttribute("data-ws-component", "Body");
</script>

88
.storybook/preview.tsx Normal file
View File

@ -0,0 +1,88 @@
import type { Preview } from "@storybook/react";
import * as React from "react";
import { useEffect } from "react";
import { TooltipProvider } from "@radix-ui/react-tooltip";
import { setEnv } from "../packages/feature-flags/src/index";
import { theme, globalCss } from "../packages/design-system/src/index";
import { color } from "../packages/design-system/src/__generated__/figma-design-tokens";
// this adds <style> tags to the <head> of the document
import "@fontsource-variable/inter";
import "@fontsource-variable/manrope";
import "@fontsource/roboto-mono";
const WaitForFonts = ({ children }) => {
const [isFontsLoaded, setIsFontsLoaded] = React.useState(false);
useEffect(() => {
let isUnsubscribed = false;
document.fonts.ready.then(() => {
if (isUnsubscribed === false) {
setIsFontsLoaded(true);
}
});
return () => {
isUnsubscribed = true;
};
}, []);
return isFontsLoaded ? (
children
) : (
<div>
Waiting for fonts to load ...
{/* not rendering children initially breaks backgrounds addon,
* so we always render it */}
<div style={{ display: "none" }}>{children}</div>
</div>
);
};
const globalStyles = globalCss({
body: {
backgroundColor: theme.colors.background,
color: theme.colors.hiContrast,
fontFamily: theme.fonts.sans,
},
});
export const decorators: Preview["decorators"] = [
(Story) => {
globalStyles();
setEnv("*");
return (
// waiting for fonts makes screenshot tests more stable
<WaitForFonts>
<TooltipProvider>
<Story />
</TooltipProvider>
</WaitForFonts>
);
},
];
const parameters: Preview["parameters"] = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
backgrounds: {
default: "White",
values: [
{ name: "White", value: "#ffffff" },
{ name: "Black", value: "#000000" },
{ name: "Panel", value: color.backgroundPanel },
{ name: "Maintenance Dark", value: color.maintenanceDark },
{ name: "Maintenance Medium", value: color.maintenanceMedium },
{ name: "Maintenance Light", value: color.maintenanceLight },
],
},
};
export default {
decorators,
parameters,
} satisfies Preview;

11
.storybook/whole-repo.stories.js
View File

@ -1,11 +0,0 @@
import { Fragment, createElement } from "react";
export default {
title: "Webstudio Designer Repository",
};
export const Welcome = () =>
createElement(Fragment, [
createElement("p", "Welcome to the Webstudio Designer Repository"),
createElement("p", "You can browse all of our storybooks here."),
]);

29
apps/builder/.storybook/main.ts
View File

@ -1,29 +0,0 @@
import path from "path";
import type { StorybookConfig } from "@storybook/react-vite";
import storybookConfig from "@webstudio-is/storybook-config";
export default {
...storybookConfig,
stories: ["../app/**/*.stories.mdx", "../app/**/*.stories.@(jsx|ts|tsx)"],
async viteFinal(config) {
return {
...config,
define: {
...config.define,
// storybook use "util" package internally which is bundled with stories
// and gives and error that process is undefined
"process.env.NODE_DEBUG": "undefined",
},
resolve: {
...config.resolve,
conditions: ["webstudio", "import", "module", "browser", "default"],
alias: [
{
find: "~",
replacement: path.resolve(__dirname, "../app"),
},
],
},
};
},
} satisfies StorybookConfig;

43
apps/builder/.storybook/preview.tsx
View File

@ -1,43 +0,0 @@
import * as React from "react";
import type { Preview } from "@storybook/react";
import { TooltipProvider } from "@radix-ui/react-tooltip";
import { theme, globalCss } from "@webstudio-is/design-system";
import { setEnv } from "@webstudio-is/feature-flags";
import "@webstudio-is/storybook-config/setup-fonts";
import { decorators as globalDecorators } from "@webstudio-is/storybook-config/decorators";
const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};
const globalStyles = globalCss({
body: {
backgroundColor: theme.colors.background,
color: theme.colors.hiContrast,
fontFamily: theme.fonts.sans,
},
});
const decorators = [
...globalDecorators,
(StoryFn: any) => {
globalStyles();
setEnv("*");
return (
<TooltipProvider>
<StoryFn />
</TooltipProvider>
);
},
];
export default {
parameters,
decorators,
} satisfies Preview;

35
apps/builder/app/builder/features/address-bar.stories.tsx
View File

@ -59,8 +59,6 @@ $pages.set({
],
});
$selectedPageId.set("dynamicId");
const $selectedPageSystem = computed(
[$selectedPage, $dataSourceVariables],
(selectedPage, dataSourceVariables) => {
@ -99,18 +97,21 @@ export default {
component: AddressBarPopover,
} satisfies Meta;
export const AddressBar: StoryFn = () => (
<>
<Box
css={{
height: theme.spacing[15],
background: theme.colors.backgroundTopbar,
color: theme.colors.foregroundContrastMain,
}}
>
<AddressBarPopover />
</Box>
<SystemInspect />
<HistoryInspect />
</>
);
export const AddressBar: StoryFn = () => {
$selectedPageId.set("dynamicId");
return (
<>
<Box
css={{
height: theme.spacing[15],
background: theme.colors.backgroundTopbar,
color: theme.colors.foregroundContrastMain,
}}
>
<AddressBarPopover />
</Box>
<SystemInspect />
<HistoryInspect />
</>
);
};

2
apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input-container.tsx
View File

@ -1,7 +1,7 @@
import { type ComponentProps, useState } from "react";
import type { StyleValue } from "@webstudio-is/css-engine";
import { Box } from "@webstudio-is/design-system";
import { CssValueInput, type IntermediateStyleValue } from ".";
import { CssValueInput, type IntermediateStyleValue } from "./css-value-input";
import type { DeleteProperty, SetValue } from "../use-style-data";
type CssValueInputContainerProps = {

9
apps/builder/package.json
View File

@ -13,8 +13,6 @@
"typecheck": "tsc --noEmit --emitDeclarationOnly false",
"test": "NODE_OPTIONS=--experimental-vm-modules jest",
"checks": "pnpm typecheck && pnpm test",
"storybook:dev": "storybook dev -p 6006",
"storybook:build": "storybook build",
"ci:migrate": "migrations migrate --force",
"middleware:link": "pnpx vercel link",
"middleware:env": "pnpx vercel env pull --environment=preview ./.env.preview",
@ -127,17 +125,12 @@
"@hono/node-server": "^1.2.0",
"@jest/globals": "^29.7.0",
"@remix-run/dev": "^2.9.1",
"@storybook/addon-actions": "^8.1.2",
"@storybook/addon-essentials": "^8.1.2",
"@storybook/addon-links": "^8.1.2",
"@storybook/react": "^8.1.2",
"@testing-library/react-hooks": "^8.0.1",
"@types/cookie": "^0.6.0",
"@types/prismjs": "^1.26.0",
"@types/react": "^18.2.70",
"@types/react-dom": "^18.2.25",
"@webstudio-is/jest-config": "workspace:*",
"@webstudio-is/storybook-config": "workspace:*",
"@webstudio-is/tsconfig": "workspace:*",
"dotenv": "^16.3.1",
"html-tags": "^3.3.1",
@ -145,7 +138,7 @@
"react-test-renderer": "18.3.0-canary-14898b6a9-20240318",
"type-fest": "^4.3.1",
"typescript": "5.4.5",
"vite": "^5.2.11"
"vite": "^5.2.12"
},
"sideEffects": false,
"license": "AGPL-3.0-or-later"

9
apps/builder/vite.config.ts
View File

@ -3,14 +3,11 @@ import { defineConfig } from "vite";
import { vitePlugin as remix } from "@remix-run/dev";
import { vercelPreset } from "@vercel/remix/vite";
const isStorybook = process.argv[1]?.includes("storybook") ?? false;
export default defineConfig(({ mode }) => ({
plugins: [
isStorybook === false &&
remix({
presets: [vercelPreset()],
}),
remix({
presets: [vercelPreset()],
}),
],
resolve: {
conditions: ["webstudio", "import", "module", "browser", "default"],

2
fixtures/webstudio-cloudflare-template/package.json
View File

@ -52,7 +52,7 @@
"@types/react-dom": "^18.2.25",
"miniflare": "^3.20231030.4",
"typescript": "5.4.5",
"vite": "^5.2.11",
"vite": "^5.2.12",
"wrangler": "^3.48.0"
}
}

2
fixtures/webstudio-custom-template/package.json
View File

@ -35,7 +35,7 @@
"@types/react": "^18.2.70",
"@types/react-dom": "^18.2.25",
"typescript": "5.4.5",
"vite": "^5.2.11",
"vite": "^5.2.12",
"webstudio": "workspace:*"
},
"engines": {

2
fixtures/webstudio-remix-netlify-edge-functions/package.json
View File

@ -33,7 +33,7 @@
"@types/react": "^18.2.70",
"@types/react-dom": "^18.2.25",
"typescript": "5.4.5",
"vite": "^5.2.11",
"vite": "^5.2.12",
"webstudio": "workspace:*"
},
"engines": {

2
fixtures/webstudio-remix-netlify-functions/package.json
View File

@ -32,7 +32,7 @@
"@types/react": "^18.2.70",
"@types/react-dom": "^18.2.25",
"typescript": "5.4.5",
"vite": "^5.2.11",
"vite": "^5.2.12",
"webstudio": "workspace:*"
},
"engines": {

2
fixtures/webstudio-remix-vercel/package.json
View File

@ -30,7 +30,7 @@
"@types/react": "^18.2.70",
"@types/react-dom": "^18.2.25",
"typescript": "5.4.5",
"vite": "^5.2.11",
"vite": "^5.2.12",
"webstudio": "workspace:*"
},
"engines": {

3
apps/builder/lostpixel.config.js → lostpixel.config.js
View File

@ -1,9 +1,6 @@
import * as process from "process";
export const config = {
storybookShots: {
storybookUrl: "apps/builder/storybook-static",
},
lostPixelProjectId: "cleiive6c0gchi40em3uzx1xv",
apiKey: process.env.LOST_PIXEL_API_KEY,
};

18
package.json
View File

@ -10,7 +10,7 @@
"dev": "pnpm --filter='@webstudio-is/builder' --filter='@webstudio-is/prisma-client' --parallel --recursive dev",
"lint": "eslint . --ext .ts,.tsx --max-warnings 0",
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
"storybook": "pnpm --parallel --recursive storybook:dev",
"storybook:dev": "storybook dev -p 6006",
"storybook:build": "storybook build",
"migrations": "cd apps/builder && pnpm migrations --dev",
"build-figma-tokens": "cd packages/design-system && pnpm build-figma-tokens",
@ -24,8 +24,18 @@
"pre-commit": "./node_modules/.bin/nano-staged"
},
"devDependencies": {
"@storybook/react": "^8.1.2",
"@fontsource-variable/inter": "^5.0.13",
"@fontsource-variable/manrope": "^5.0.15",
"@fontsource/roboto-mono": "^5.0.13",
"@radix-ui/react-tooltip": "^1.0.7",
"@storybook/addon-actions": "^8.1.4",
"@storybook/addon-essentials": "^8.1.4",
"@storybook/addon-links": "^8.1.4",
"@storybook/react": "^8.1.4",
"@storybook/react-vite": "^8.1.4",
"@types/css-tree": "^2.3.1",
"@types/node": "^20.12.7",
"@types/react": "^18.2.70",
"@webstudio-is/eslint-config-custom": "workspace:*",
"esbuild": "^0.20.2",
"jest": "^29.7.0",
@ -34,10 +44,10 @@
"react": "18.3.0-canary-14898b6a9-20240318",
"react-dom": "18.3.0-canary-14898b6a9-20240318",
"simple-git-hooks": "^2.11.1",
"storybook": "^8.1.2",
"storybook": "^8.1.4",
"tsx": "^4.7.2",
"typescript": "5.4.5",
"vite": "^5.2.11"
"vite": "^5.2.12"
},
"engines": {
"node": "20",

2
packages/cli/package.json
View File

@ -63,7 +63,7 @@
"react-dom": "18.3.0-canary-14898b6a9-20240318",
"tsx": "^4.7.2",
"typescript": "5.4.5",
"vite": "^5.2.11",
"vite": "^5.2.12",
"wrangler": "^3.48.0"
}
}

2
packages/cli/templates/defaults/package.json
View File

@ -27,7 +27,7 @@
"@types/react": "^18.2.70",
"@types/react-dom": "^18.2.25",
"typescript": "5.4.5",
"vite": "^5.2.11"
"vite": "^5.2.12"
},
"engines": {
"node": ">=20.0.0"

1
packages/css-engine/.storybook/main.ts
View File

@ -1 +0,0 @@
export { default } from "@webstudio-is/storybook-config";

8
packages/css-engine/package.json
View File

@ -11,9 +11,7 @@
"dev": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib --watch",
"build": "rm -rf lib && esbuild src/index.ts --outdir=lib --bundle --format=esm --packages=external",
"dts": "tsc --project tsconfig.dts.json",
"test": "NODE_OPTIONS=--experimental-vm-modules jest",
"storybook:dev": "storybook dev -p 6006",
"storybook:build": "storybook build"
"test": "NODE_OPTIONS=--experimental-vm-modules jest"
},
"dependencies": {
"@emotion/hash": "^0.9.1",
@ -23,13 +21,9 @@
},
"devDependencies": {
"@jest/globals": "^29.7.0",
"@storybook/addon-essentials": "^8.1.2",
"@storybook/addon-links": "^8.1.2",
"@storybook/react": "^8.1.2",
"@types/react": "^18.2.70",
"@types/react-dom": "^18.2.25",
"@webstudio-is/jest-config": "workspace:*",
"@webstudio-is/storybook-config": "workspace:*",
"@webstudio-is/tsconfig": "workspace:*",
"react": "18.3.0-canary-14898b6a9-20240318",
"react-dom": "18.3.0-canary-14898b6a9-20240318",

1
packages/design-system/.storybook/main.ts
View File

@ -1 +0,0 @@
export { default } from "@webstudio-is/storybook-config";

30
packages/design-system/.storybook/preview.ts
View File

@ -1,30 +0,0 @@
import type { Preview } from "@storybook/react";
import "@webstudio-is/storybook-config/setup-fonts";
import { decorators } from "@webstudio-is/storybook-config/decorators";
import { color } from "../src/__generated__/figma-design-tokens";
const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
backgrounds: {
default: "White",
values: [
{ name: "White", value: "#ffffff" },
{ name: "Black", value: "#000000" },
{ name: "Panel", value: color.backgroundPanel },
{ name: "Maintenance Dark", value: color.maintenanceDark },
{ name: "Maintenance Medium", value: color.maintenanceMedium },
{ name: "Maintenance Light", value: color.maintenanceLight },
],
},
};
export default {
decorators,
parameters,
} satisfies Preview;

9
packages/design-system/lostpixel.config.js
View File

@ -1,9 +0,0 @@
import * as process from "process";
export const config = {
storybookShots: {
storybookUrl: "packages/design-system/storybook-static",
},
lostPixelProjectId: "cleii5n4g0efjim0e69w6rme0",
apiKey: process.env.LOST_PIXEL_API_KEY,
};

9
packages/design-system/package.json
View File

@ -9,21 +9,14 @@
"build-figma-tokens": "tsx ./bin/transform-figma-tokens.ts",
"typecheck": "tsc",
"test": "NODE_OPTIONS=--experimental-vm-modules jest",
"checks": "pnpm typecheck && pnpm test",
"storybook:dev": "storybook dev -p 6006",
"storybook:build": "storybook build"
"checks": "pnpm typecheck && pnpm test"
},
"devDependencies": {
"@jest/globals": "^29.7.0",
"@storybook/addon-actions": "^8.1.2",
"@storybook/addon-essentials": "^8.1.2",
"@storybook/addon-links": "^8.1.2",
"@storybook/react": "^8.1.2",
"@testing-library/react-hooks": "^8.0.1",
"@types/react": "^18.2.70",
"@types/react-dom": "^18.2.25",
"@webstudio-is/jest-config": "workspace:*",
"@webstudio-is/storybook-config": "workspace:*",
"@webstudio-is/tsconfig": "workspace:*",
"react": "18.3.0-canary-14898b6a9-20240318",
"react-dom": "18.3.0-canary-14898b6a9-20240318",

1
packages/icons/.storybook/main.ts
View File

@ -1 +0,0 @@
export { default } from "@webstudio-is/storybook-config";

8
packages/icons/package.json
View File

@ -11,19 +11,13 @@
"dts": "tsc --declarationDir lib/types",
"generate": "rm -fr src/__generated__ && NODE_OPTIONS='--import=tsx' svgo-jsx svgo-jsx.config.ts && tsx svg-string.ts && prettier --write src/__generated__",
"typecheck": "tsc",
"checks": "pnpm typecheck",
"storybook:dev": "storybook dev -p 6006",
"storybook:build": "storybook build"
"checks": "pnpm typecheck"
},
"devDependencies": {
"@storybook/addon-essentials": "^8.1.2",
"@storybook/addon-links": "^8.1.2",
"@storybook/react": "^8.1.2",
"@svgo/jsx": "^0.4.2",
"@types/node": "^20.12.7",
"@types/react": "^18.2.70",
"@types/react-dom": "^18.2.25",
"@webstudio-is/storybook-config": "workspace:*",
"@webstudio-is/tsconfig": "workspace:*",
"react": "18.3.0-canary-14898b6a9-20240318",
"react-dom": "18.3.0-canary-14898b6a9-20240318",

2
packages/icons/src/index.stories.tsx
View File

@ -55,7 +55,7 @@ export const Icons = ({ testColor }: { testColor: boolean }) => {
};
export default {
title: "All Icons",
title: "Icons",
component: Icons,
argTypes: {
testColor: { control: "boolean", name: "Test color" },

1
packages/image/.storybook/main.ts
View File

@ -1 +0,0 @@
export { default } from "@webstudio-is/storybook-config";

8
packages/image/package.json
View File

@ -11,9 +11,7 @@
"checks": "pnpm typecheck && pnpm test",
"dev": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib --watch",
"build": "rm -rf lib && esbuild src/index.ts --outdir=lib --bundle --format=esm --packages=external",
"dts": "tsc --project tsconfig.dts.json",
"storybook:dev": "storybook dev -p 6006",
"storybook:build": "storybook build"
"dts": "tsc --project tsconfig.dts.json"
},
"dependencies": {
"react": "18.3.0-canary-14898b6a9-20240318",
@ -21,13 +19,9 @@
},
"devDependencies": {
"@jest/globals": "^29.7.0",
"@storybook/addon-essentials": "^8.1.2",
"@storybook/addon-links": "^8.1.2",
"@storybook/react": "^8.1.2",
"@types/react": "^18.2.70",
"@types/react-dom": "^18.2.25",
"@webstudio-is/jest-config": "workspace:*",
"@webstudio-is/storybook-config": "workspace:*",
"@webstudio-is/tsconfig": "workspace:*",
"react": "18.3.0-canary-14898b6a9-20240318",
"react-dom": "18.3.0-canary-14898b6a9-20240318",

1
packages/sdk-components-react-radix/.storybook/main.ts
View File

@ -1 +0,0 @@
export { default } from "@webstudio-is/storybook-config";

8
packages/sdk-components-react-radix/package.json
View File

@ -42,9 +42,7 @@
"build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
"dts": "tsc --project tsconfig.dts.json",
"typecheck": "tsc",
"checks": "pnpm typecheck",
"storybook:dev": "storybook dev -p 6006",
"storybook:build": "storybook build"
"checks": "pnpm typecheck"
},
"peerDependencies": {
"react": "18.3.0-canary-14898b6a9-20240318",
@ -68,9 +66,6 @@
"@webstudio-is/react-sdk": "workspace:*"
},
"devDependencies": {
"@storybook/addon-essentials": "^8.1.2",
"@storybook/addon-links": "^8.1.2",
"@storybook/react": "^8.1.2",
"@types/node": "^20.12.7",
"@types/react": "^18.2.70",
"@types/react-dom": "^18.2.25",
@ -78,7 +73,6 @@
"@webstudio-is/generate-arg-types": "workspace:*",
"@webstudio-is/sdk-cli": "workspace:^",
"@webstudio-is/sdk-components-react": "workspace:*",
"@webstudio-is/storybook-config": "workspace:*",
"@webstudio-is/tsconfig": "workspace:*",
"react": "18.3.0-canary-14898b6a9-20240318",
"react-dom": "18.3.0-canary-14898b6a9-20240318",

1
packages/sdk-components-react/.storybook/main.ts
View File

@ -1 +0,0 @@
export { default } from "@webstudio-is/storybook-config";

8
packages/sdk-components-react/package.json
View File

@ -36,9 +36,7 @@
"dts": "tsc --project tsconfig.dts.json",
"test": "NODE_OPTIONS=--experimental-vm-modules jest",
"typecheck": "tsc",
"checks": "pnpm typecheck",
"storybook:dev": "storybook dev -p 6006 --static-dir=./public",
"storybook:build": "storybook build"
"checks": "pnpm typecheck"
},
"peerDependencies": {
"react": "18.3.0-canary-14898b6a9-20240318",
@ -53,16 +51,12 @@
},
"devDependencies": {
"@jest/globals": "^29.7.0",
"@storybook/addon-essentials": "^8.1.2",
"@storybook/addon-links": "^8.1.2",
"@storybook/react": "^8.1.2",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.2.2",
"@types/react": "^18.2.70",
"@types/react-dom": "^18.2.25",
"@webstudio-is/generate-arg-types": "workspace:*",
"@webstudio-is/jest-config": "workspace:*",
"@webstudio-is/storybook-config": "workspace:*",
"@webstudio-is/tsconfig": "workspace:*",
"jest-environment-jsdom": "^29.7.0",
"react": "18.3.0-canary-14898b6a9-20240318",

38
packages/storybook-config/decorators.tsx
View File

@ -1,38 +0,0 @@
import * as React from "react";
import { useEffect } from "react";
const WaitForFonts = ({ children }) => {
const [isFontsLoaded, setIsFontsLoaded] = React.useState(false);
useEffect(() => {
let isUnsubscribed = false;
document.fonts.ready.then(() => {
if (isUnsubscribed === false) {
setIsFontsLoaded(true);
}
});
return () => {
isUnsubscribed = true;
};
}, []);
return isFontsLoaded ? (
children
) : (
<div>
Waiting for fonts to load ...
{/* not rendering children initially breaks backgrounds addon,
* so we always render it */}
<div style={{ display: "none" }}>{children}</div>
</div>
);
};
export const decorators = [
// waiting for fonts makes screenshot tests more stable
(Story) => (
<WaitForFonts>
<Story />
</WaitForFonts>
),
];

25
packages/storybook-config/index.ts
View File

@ -1,25 +0,0 @@
import type { StorybookConfig } from "@storybook/react-vite";
export default {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
framework: {
name: "@storybook/react-vite",
options: {},
},
addons: ["@storybook/addon-essentials", "@storybook/addon-links"],
async viteFinal(config) {
return {
...config,
define: {
...config.define,
// storybook use "util" package internally which is bundled with stories
// and gives and error that process is undefined
"process.env.NODE_DEBUG": "undefined",
},
resolve: {
...config.resolve,
conditions: ["webstudio", "import", "module", "browser", "default"],
},
};
},
} satisfies StorybookConfig;

18
packages/storybook-config/package.json
View File

@ -1,18 +0,0 @@
{
"name": "@webstudio-is/storybook-config",
"private": true,
"version": "0.0.0",
"license": "AGPL-3.0-or-later",
"main": "index.ts",
"dependencies": {
"@fontsource-variable/inter": "^5.0.13",
"@fontsource-variable/manrope": "^5.0.15",
"@fontsource/roboto-mono": "^5.0.13",
"@storybook/addon-essentials": "^8.1.2",
"@storybook/addon-links": "^8.1.2",
"@storybook/react": "^8.1.2",
"@storybook/react-vite": "^8.1.2",
"storybook": "^8.1.2",
"vite": "^5.2.8"
}
}

9
packages/storybook-config/setup-fonts.js
View File

@ -1,9 +0,0 @@
/* eslint-disable import/no-internal-modules */
// This file is meant to be imported in .storybook/previews.js like so:
// import "@webstudio-is/storybook-config/setup-fonts";
// this adds <style> tags to the <head> of the document
import "@fontsource-variable/inter";
import "@fontsource-variable/manrope";
import "@fontsource/roboto-mono";

695
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff