@voiceflow/storybook-config 1.1.0

package/README.md

@@ -0,0 +1,50 @@
+# storybook-config
+
+## Install
+
+Make sure the version of `storybook` installed matches the version specified in the `peerDependencies` of this package.
+Storybook enforces that addons and the core package must be the same version.
+
+```bash
+yarn add --exact -D @voiceflow/storybook-config storybook
+```
+
+## Usage
+
+Update the following files to enable the configuration
+
+```ts
+// .storybook/main.ts
+
+export { default } from '@voiceflow/storybook-config';
+```
+
+```ts
+// .storybook/manager.ts
+
+import '@voiceflow/storybook-config/setup';
+```
+
+```ts
+// .storybook/preview.tsx
+
+import type { Preview } from '@storybook/react';
+import { TestIDs, useTestIDs } from '@voiceflow/storybook-config/plugins';
+import React from 'react';
+
+const preview: Preview = {
+  globalTypes: {
+    showTestIDs: TestIDs,
+  },
+
+  decorators: [
+    (Story, context) => {
+      useTestIDs(context.globals.showTestIDs);
+
+      return <Story />;
+    },
+  ],
+};
+
+export default preview;
+```

package/build/main.d.ts

@@ -0,0 +1,4 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+declare const config: StorybookConfig;
+export default config;
+//# sourceMappingURL=main.d.ts.map

package/build/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQ7D,QAAA,MAAM,MAAM,EAAE,eAmBb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/main.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_path_1 = require("node:path");
+/**
+ * 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.
+ */
+const getAbsolutePath = (value) => (0, node_path_1.dirname)(require.resolve((0, node_path_1.join)(value, 'package.json')));
+const config = {
+    stories: ['../src/**/*.mdx', '../src/**/*.story.@(js|jsx|ts|tsx)'],
+    addons: [
+        getAbsolutePath('storybook-addon-pseudo-states'),
+        getAbsolutePath('@storybook/addon-links'),
+        getAbsolutePath('@storybook/addon-essentials'),
+        getAbsolutePath('@storybook/addon-interactions'),
+        getAbsolutePath('storybook-dark-mode'),
+    ],
+    framework: {
+        name: getAbsolutePath('@storybook/react-vite'),
+        options: {},
+    },
+    docs: {
+        autodocs: 'tag',
+    },
+    core: {
+        builder: getAbsolutePath('@storybook/builder-vite'),
+    },
+};
+exports.default = config;
+//# sourceMappingURL=main.js.map

package/build/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":";;AAAA,yCAA0C;AAI1C;;;GAGG;AACH,MAAM,eAAe,GAAG,CAAC,KAAa,EAAO,EAAE,CAAC,IAAA,mBAAO,EAAC,OAAO,CAAC,OAAO,CAAC,IAAA,gBAAI,EAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;AAEtG,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,CAAC,iBAAiB,EAAE,oCAAoC,CAAC;IAClE,MAAM,EAAE;QACN,eAAe,CAAC,+BAA+B,CAAC;QAChD,eAAe,CAAC,wBAAwB,CAAC;QACzC,eAAe,CAAC,6BAA6B,CAAC;QAC9C,eAAe,CAAC,+BAA+B,CAAC;QAChD,eAAe,CAAC,qBAAqB,CAAC;KACvC;IACD,SAAS,EAAE;QACT,IAAI,EAAE,eAAe,CAAC,uBAAuB,CAAC;QAC9C,OAAO,EAAE,EAAE;KACZ;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAK;KAChB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,eAAe,CAAC,yBAAyB,CAAC;KACpD;CACF,CAAC;AAEF,kBAAe,MAAM,CAAC"}

package/build/plugins/main.d.ts

@@ -0,0 +1,2 @@
+export * from './test-ids';
+//# sourceMappingURL=main.d.ts.map

package/build/plugins/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/plugins/main.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/build/plugins/main.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./test-ids"), exports);
+//# sourceMappingURL=main.js.map

package/build/plugins/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../../src/plugins/main.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6CAA2B"}

package/build/plugins/test-ids.d.ts

@@ -0,0 +1,15 @@
+export declare const TestIDs: {
+    description: string;
+    defaultValue: boolean;
+    toolbar: {
+        title: string;
+        icon: string;
+        items: {
+            value: boolean;
+            icon: string;
+            title: string;
+        }[];
+    };
+};
+export declare const useTestIDs: (showTestIDs: boolean) => void;
+//# sourceMappingURL=test-ids.d.ts.map

package/build/plugins/test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-ids.d.ts","sourceRoot":"","sources":["../../src/plugins/test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;CAWnB,CAAC;AAEF,eAAO,MAAM,UAAU,gBAAiB,OAAO,SA8D5B,CAAC"}

package/build/plugins/test-ids.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTestIDs = exports.TestIDs = void 0;
+const react_1 = require("react");
+exports.TestIDs = {
+    description: 'Highlights elements with data-testid properties',
+    defaultValue: false,
+    toolbar: {
+        title: 'Test IDs',
+        icon: 'eye',
+        items: [
+            { value: true, icon: 'eye', title: 'On' },
+            { value: false, icon: 'eyeclose', title: 'Off' },
+        ],
+    },
+};
+const useTestIDs = (showTestIDs) => (0, react_1.useEffect)(() => {
+    if (!showTestIDs)
+        return undefined;
+    const elements = Array.from(document.querySelectorAll('[data-testid]'));
+    const highlights = [];
+    const label = document.createElement('label');
+    const prefix = document.createElement('span');
+    const text = document.createElement('span');
+    const suffix = document.createElement('span');
+    label.style.position = 'absolute';
+    label.style.left = '50%';
+    label.style.transform = 'translateX(-50%)';
+    label.style.top = '50%';
+    label.style.userSelect = 'none';
+    label.style.visibility = 'hidden';
+    label.style.background = '#fff';
+    prefix.style.opacity = '50%';
+    prefix.textContent = 'data-testid="';
+    suffix.style.opacity = '50%';
+    suffix.textContent = '"';
+    label.appendChild(prefix);
+    label.appendChild(text);
+    label.appendChild(suffix);
+    elements.forEach((element) => {
+        const highlight = document.createElement('div');
+        const rect = element.getBoundingClientRect();
+        highlights.push(highlight);
+        highlight.style.position = 'absolute';
+        highlight.style.left = `${rect.left}px`;
+        highlight.style.top = `${rect.top}px`;
+        highlight.style.width = `${rect.width}px`;
+        highlight.style.height = `${rect.height}px`;
+        highlight.style.border = '1px solid green';
+        highlight.style.textOverflow = 'overflow';
+        highlight.onmouseover = () => {
+            text.textContent = element.dataset.testid ?? '';
+            label.style.visibility = 'visible';
+        };
+        highlight.onmouseout = () => {
+            text.textContent = '';
+            label.style.visibility = 'hidden';
+        };
+        document.body.appendChild(highlight);
+    });
+    document.body.appendChild(label);
+    return () => {
+        highlights.forEach((element) => document.body.removeChild(element));
+        document.body.removeChild(label);
+    };
+}, [showTestIDs]);
+exports.useTestIDs = useTestIDs;
+//# sourceMappingURL=test-ids.js.map

package/build/plugins/test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-ids.js","sourceRoot":"","sources":["../../src/plugins/test-ids.ts"],"names":[],"mappings":"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"}

package/build/setup.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=setup.d.ts.map

package/build/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../src/setup.ts"],"names":[],"mappings":""}

package/build/setup.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const manager_api_1 = require("@storybook/manager-api");
+manager_api_1.addons.setConfig({
+    isFullscreen: false,
+    showNav: true,
+    showPanel: true,
+    panelPosition: 'bottom',
+    enableShortcuts: true,
+    showToolbar: true,
+    theme: undefined,
+    selectedPanel: undefined,
+    initialActive: 'sidebar',
+    sidebar: {
+        showRoots: false,
+        collapsedRoots: ['other'],
+    },
+    toolbar: {
+        title: { hidden: false },
+        zoom: { hidden: false },
+        eject: { hidden: false },
+        copy: { hidden: false },
+        fullscreen: { hidden: false },
+    },
+});
+//# sourceMappingURL=setup.js.map

package/build/setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.js","sourceRoot":"","sources":["../src/setup.ts"],"names":[],"mappings":";;AAAA,wDAAgD;AAEhD,oBAAM,CAAC,SAAS,CAAC;IACf,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,IAAI;IACf,aAAa,EAAE,QAAQ;IACvB,eAAe,EAAE,IAAI;IACrB,WAAW,EAAE,IAAI;IACjB,KAAK,EAAE,SAAS;IAChB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,OAAO,EAAE;QACP,SAAS,EAAE,KAAK;QAChB,cAAc,EAAE,CAAC,OAAO,CAAC;KAC1B;IACD,OAAO,EAAE;QACP,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;QACxB,IAAI,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;QACvB,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;QACxB,IAAI,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;QACvB,UAAU,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;KAC9B;CACF,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@voiceflow/storybook-config",
+  "version": "1.1.0",
+  "exports": {
+    ".": "./build/main.js",
+    "./setup": "./build/setup.js",
+    "./plugins": "./build/plugins/main.js"
+  },
+  "main": "build/main.js",
+  "types": "build/main.d.ts",
+  "files": [
+    "build"
+  ],
+  "scripts": {
+    "build": "yarn g:build:pkg",
+    "clean": "yarn g:rimraf build",
+    "lint": "yarn g:run-p -c lint:eslint lint:prettier",
+    "lint:eslint": "yarn g:eslint",
+    "lint:fix": "yarn g:run-p -c \"lint:eslint --fix\" \"lint:prettier --write\"",
+    "lint:prettier": "yarn g:prettier --check"
+  },
+  "dependencies": {
+    "@storybook/addon-essentials": "8.5.0",
+    "@storybook/addon-interactions": "8.5.0",
+    "@storybook/addon-links": "8.5.0",
+    "@storybook/blocks": "8.5.0",
+    "@storybook/builder-vite": "8.5.0",
+    "@storybook/cli": "8.5.0",
+    "@storybook/react": "8.5.0",
+    "@storybook/react-vite": "8.5.0",
+    "@storybook/test": "8.5.0",
+    "@storybook/testing-library": "0.2.2",
+    "@storybook/types": "8.5.0",
+    "storybook-addon-pseudo-states": "4.0.2",
+    "storybook-dark-mode": "4.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.77"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "storybook": "8.5.0"
+  },
+  "engines": {
+    "node": "20"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "gitHead": "7283bc2bd5d8610e97447f7f59d8ee2824dc9c6f"
+}