feat: decorator can be used to hide story on web (#3)

.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,
+};

.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",

.storybook/preview.ts

@@ -2,6 +2,7 @@ import type { Preview } from "@storybook/react";
 
 const preview: Preview = {
   parameters: {
+    deviceOnly: true,
     backgrounds: {
       default: "light",
     },

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",

preview.js

@@ -0,0 +1,3 @@
+module.exports = {
+  experimental_serverChannel: require("./dist/preview.js"),
+};

preview.mjs

@@ -0,0 +1 @@
+export * from "./dist/preview";

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<Renderer> = {
+  decorators: [
+    function OnDeviceOnly(Story, { parameters }) {
+      if (parameters.deviceOnly) {
+        return (
+          <span
+            style={{
+              fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+            }}
+          >
+            Parameter 'deviceOnly' was found and so the story is not rendered
+          </span>
+        );
+      }
+
+      return Story();
+    },
+  ],
+};
+
+export default preview;

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,
+    },
   ];
 });