diff --git a/.storybook/local-preset.js b/.storybook/local-preset.js new file mode 100644 index 0000000..b8513a6 --- /dev/null +++ b/.storybook/local-preset.js @@ -0,0 +1,9 @@ +function previewAnnotations(entry = []) { + return [...entry, require.resolve("../dist/preview.mjs")]; +} + +module.exports = { + previewAnnotations, + experimental_serverChannel: + require("../dist/preset.js").experimental_serverChannel, +}; diff --git a/.storybook/main.ts b/.storybook/main.ts index 71b63eb..f50bddb 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -6,7 +6,7 @@ const config: StorybookConfig = { "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", - "../dist/preset.mjs", + "./local-preset.js", ], framework: { name: "@storybook/react-vite", diff --git a/.storybook/preview.ts b/.storybook/preview.ts index b2d527f..ee7429e 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -2,6 +2,7 @@ import type { Preview } from "@storybook/react"; const preview: Preview = { parameters: { + deviceOnly: true, backgrounds: { default: "light", }, diff --git a/package.json b/package.json index d2f7f7d..6a4c628 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "require": "./dist/preset.js", "import": "./dist/preset.mjs" }, + "./preview": "./dist/preview.mjs", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -34,14 +35,15 @@ "dist/**/*", "README.md", "*.js", - "*.d.ts" + "*.d.ts", + "preset.mjs", + "preview.mjs" ], "scripts": { "clean": "rimraf ./dist", "prebuild": "npm run clean", "build": "tsup", "build:watch": "npm run build -- --watch", - "test": "echo \"Error: no test specified\" && exit 1", "start": "run-p build:watch 'storybook --quiet'", "prerelease": "zx scripts/prepublish-checks.mjs", "release": "npm run build && auto shipit", diff --git a/preview.js b/preview.js new file mode 100644 index 0000000..ab6283f --- /dev/null +++ b/preview.js @@ -0,0 +1,3 @@ +module.exports = { + experimental_serverChannel: require("./dist/preview.js"), +}; diff --git a/preview.mjs b/preview.mjs new file mode 100644 index 0000000..0efc7f6 --- /dev/null +++ b/preview.mjs @@ -0,0 +1 @@ +export * from "./dist/preview"; diff --git a/src/preview.tsx b/src/preview.tsx new file mode 100644 index 0000000..9b505b6 --- /dev/null +++ b/src/preview.tsx @@ -0,0 +1,29 @@ +import type { ProjectAnnotations, Renderer } from "@storybook/types"; +import React from "react"; + +/** + * Note: if you want to use JSX in this file, rename it to `preview.tsx` + * and update the entry prop in tsup.config.ts to use "src/preview.tsx", + */ + +const preview: ProjectAnnotations = { + decorators: [ + function OnDeviceOnly(Story, { parameters }) { + if (parameters.deviceOnly) { + return ( + + Parameter 'deviceOnly' was found and so the story is not rendered + + ); + } + + return Story(); + }, + ], +}; + +export default preview; diff --git a/tsup.config.ts b/tsup.config.ts index 645804f..83f6cb6 100644 --- a/tsup.config.ts +++ b/tsup.config.ts @@ -3,6 +3,11 @@ import { globalPackages as globalManagerPackages } from "@storybook/manager/glob import { globalPackages as globalPreviewPackages } from "@storybook/preview/globals"; const NODE_TARGET: Options["target"] = ["node16"]; +const BROWSER_TARGET: Options["target"] = [ + "chrome100", + "safari15", + "firefox91", +]; export default defineConfig(async (options) => { const commonConfig: Options = { @@ -25,5 +30,13 @@ export default defineConfig(async (options) => { platform: "node", external: [...globalManagerPackages, ...globalPreviewPackages], }, + { + ...commonConfig, + entry: ["src/preview.tsx"], + format: ["esm"], + target: BROWSER_TARGET, + platform: "browser", + external: globalPreviewPackages, + }, ]; });