@strictly/storybook 0.0.0-stage → 0.0.41

package/README.md

@@ -1,3 +1,21 @@
-# Temporary Holding Version
+# @strictly/storybook
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Storybook configuration for React packages built with Mantine, MobX and Lingui, along with the type narrowing assertions from `@strictly/vitest`, backed by `storybook/test`.
+
+```ts
+// .storybook/main.ts
+import { createStorybookMainConfig } from '@strictly/storybook/main'
+import { createRequire } from 'node:module'
+
+export default createStorybookMainConfig(createRequire(import.meta.url))
+```
+
+```tsx
+// .storybook/preview.tsx
+import { createStorybookPreview } from '@strictly/storybook'
+
+// storybook statically parses this call, so always pass an object literal
+export default createStorybookPreview({})
+```
+
+Every story renders inside a `MantineProvider` and `StrictMode`, with MobX's strict warnings turned on. `StorybookLinguiProvider` loads and activates a locale's messages for a decorator to wrap stories in.

package/dist/index.cjs

@@ -0,0 +1,91 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let storybook_test = require("storybook/test");
+let _lingui_core = require("@lingui/core");
+let _lingui_react = require("@lingui/react");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("@mantine/core/styles.css");
+let _mantine_core = require("@mantine/core");
+let mobx = require("mobx");
+//#region src/expect.ts
+function expectEquals(v1, v2) {
+	(0, storybook_test.expect)(v1).toEqual(v2);
+}
+function expectTruthy(b) {
+	(0, storybook_test.expect)(b).toBeTruthy();
+}
+function expectDefined(v) {
+	(0, storybook_test.expect)(v).toBeDefined();
+}
+function expectInstanceOf(instance, constructor) {
+	(0, storybook_test.expect)(instance).toBeInstanceOf(constructor);
+}
+function expectDefinedAndReturn(v) {
+	expectDefined(v);
+	return v;
+}
+function pendingAfter(milliseconds) {
+	return new Promise((resolve) => {
+		setTimeout(() => resolve("pending"), milliseconds);
+	});
+}
+async function expectPendingPromise(p, timeoutMilliseconds = 500) {
+	const state = await Promise.race([p.then(() => "fulfilled", () => "rejected"), pendingAfter(timeoutMilliseconds)]);
+	await (0, storybook_test.expect)(state).toBe("pending");
+}
+//#endregion
+//#region src/LinguiProvider.tsx
+function StorybookLinguiProvider({ children, localeMessages, labelsToLocales, locale = "en" }) {
+	(0, react.useEffect)(() => {
+		const messages = localeMessages[locale] ?? localeMessages[labelsToLocales[locale]];
+		if (messages != null) {
+			_lingui_core.i18n.load(locale, messages);
+			_lingui_core.i18n.activate(locale);
+		}
+		return () => {};
+	}, [
+		locale,
+		labelsToLocales,
+		localeMessages
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lingui_react.I18nProvider, {
+		i18n: _lingui_core.i18n,
+		children
+	});
+}
+//#endregion
+//#region src/preview.tsx
+/**
+* Creates the storybook preview configuration for a package. Every story renders inside mantine and strict mode.
+* Storybook applies decorators innermost first, so the supplied decorators run inside the shared providers.
+*
+* Storybook statically parses the preview file and only understands a default export that is a call whose first
+* argument is an object literal, so callers must always pass one, even if it is empty
+*/
+function createStorybookPreview({ args, argTypes, decorators = [] }) {
+	(0, mobx.configure)({
+		enforceActions: "observed",
+		observableRequiresReaction: true,
+		reactionRequiresObservable: true
+	});
+	return {
+		parameters: { controls: { matchers: {
+			color: /(background|color)$/i,
+			date: /Date$/i
+		} } },
+		argTypes,
+		args,
+		decorators: [...decorators, function(Story) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.MantineProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.StrictMode, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Story, {}) }) });
+		}]
+	};
+}
+//#endregion
+exports.StorybookLinguiProvider = StorybookLinguiProvider;
+exports.createStorybookPreview = createStorybookPreview;
+exports.expectDefined = expectDefined;
+exports.expectDefinedAndReturn = expectDefinedAndReturn;
+exports.expectEquals = expectEquals;
+exports.expectInstanceOf = expectInstanceOf;
+exports.expectPendingPromise = expectPendingPromise;
+exports.expectTruthy = expectTruthy;

package/dist/index.d.cts

@@ -0,0 +1,59 @@
+import { Decorator } from '@storybook/react-vite';
+import { InputType } from 'storybook/internal/types';
+import { JSX } from 'react';
+import { Messages } from '@lingui/core';
+import { Preview } from '@storybook/react-vite';
+import { PropsWithChildren } from 'react';
+
+/**
+ * Creates the storybook preview configuration for a package. Every story renders inside mantine and strict mode.
+ * Storybook applies decorators innermost first, so the supplied decorators run inside the shared providers.
+ *
+ * Storybook statically parses the preview file and only understands a default export that is a call whose first
+ * argument is an object literal, so callers must always pass one, even if it is empty
+ */
+export declare function createStorybookPreview({ args, argTypes, decorators, }: Pick<Preview, 'args' | 'argTypes'> & {
+    readonly decorators?: readonly Decorator[];
+}): Preview;
+
+export declare function expectDefined<V>(v: V): asserts v is NonNullable<V>;
+
+export declare function expectDefinedAndReturn<V>(v: V): NonNullable<V>;
+
+export declare function expectEquals<V1, V2 extends V1>(v1: V1, v2: V2): asserts v1 is V2;
+
+export declare function expectInstanceOf<V1, V2 extends V1>(instance: V1, constructor: abstract new (...args: never[]) => V2): asserts instance is V2;
+
+export declare function expectPendingPromise<V>(p: Promise<V>, timeoutMilliseconds?: number): Promise<void>;
+
+export declare function expectTruthy(b: boolean): asserts b is true;
+
+export declare type MetaArgsAndArgTypes<P, ArgTypes extends MetaArgTypesOf<P>, Args extends MetaArgsOf<ArgTypes> = MetaArgsOf<ArgTypes>> = {
+    args: Partial<Args>;
+    argTypes: Partial<ArgTypes>;
+};
+
+export declare type MetaArgsOf<Types extends MetaArgTypesOf<any>> = {
+    [k in keyof Types]: Types[k]['mapping'] extends undefined ? Required<Types[k]['t']> : keyof Types[k]['mapping'];
+};
+
+declare type MetaArgType<T> = InputType & {
+    t?: T;
+};
+
+export declare type MetaArgTypesOf<P> = {
+    [k in keyof P]: MetaArgType<P[k]>;
+};
+
+export declare type MetaPropsAndArgTypes<P> = {
+    args: Partial<P>;
+    argTypes: Partial<MetaArgTypesOf<P>>;
+};
+
+export declare function StorybookLinguiProvider<LocaleMessages extends Readonly<Record<string, Messages | undefined>>>({ children, localeMessages, labelsToLocales, locale, }: PropsWithChildren<{
+    localeMessages: LocaleMessages;
+    labelsToLocales: Readonly<Record<string, keyof LocaleMessages>>;
+    locale?: keyof LocaleMessages;
+}>): JSX.Element;
+
+export { }

package/dist/index.d.ts

@@ -0,0 +1,59 @@
+import { Decorator } from '@storybook/react-vite';
+import { InputType } from 'storybook/internal/types';
+import { JSX } from 'react';
+import { Messages } from '@lingui/core';
+import { Preview } from '@storybook/react-vite';
+import { PropsWithChildren } from 'react';
+
+/**
+ * Creates the storybook preview configuration for a package. Every story renders inside mantine and strict mode.
+ * Storybook applies decorators innermost first, so the supplied decorators run inside the shared providers.
+ *
+ * Storybook statically parses the preview file and only understands a default export that is a call whose first
+ * argument is an object literal, so callers must always pass one, even if it is empty
+ */
+export declare function createStorybookPreview({ args, argTypes, decorators, }: Pick<Preview, 'args' | 'argTypes'> & {
+    readonly decorators?: readonly Decorator[];
+}): Preview;
+
+export declare function expectDefined<V>(v: V): asserts v is NonNullable<V>;
+
+export declare function expectDefinedAndReturn<V>(v: V): NonNullable<V>;
+
+export declare function expectEquals<V1, V2 extends V1>(v1: V1, v2: V2): asserts v1 is V2;
+
+export declare function expectInstanceOf<V1, V2 extends V1>(instance: V1, constructor: abstract new (...args: never[]) => V2): asserts instance is V2;
+
+export declare function expectPendingPromise<V>(p: Promise<V>, timeoutMilliseconds?: number): Promise<void>;
+
+export declare function expectTruthy(b: boolean): asserts b is true;
+
+export declare type MetaArgsAndArgTypes<P, ArgTypes extends MetaArgTypesOf<P>, Args extends MetaArgsOf<ArgTypes> = MetaArgsOf<ArgTypes>> = {
+    args: Partial<Args>;
+    argTypes: Partial<ArgTypes>;
+};
+
+export declare type MetaArgsOf<Types extends MetaArgTypesOf<any>> = {
+    [k in keyof Types]: Types[k]['mapping'] extends undefined ? Required<Types[k]['t']> : keyof Types[k]['mapping'];
+};
+
+declare type MetaArgType<T> = InputType & {
+    t?: T;
+};
+
+export declare type MetaArgTypesOf<P> = {
+    [k in keyof P]: MetaArgType<P[k]>;
+};
+
+export declare type MetaPropsAndArgTypes<P> = {
+    args: Partial<P>;
+    argTypes: Partial<MetaArgTypesOf<P>>;
+};
+
+export declare function StorybookLinguiProvider<LocaleMessages extends Readonly<Record<string, Messages | undefined>>>({ children, localeMessages, labelsToLocales, locale, }: PropsWithChildren<{
+    localeMessages: LocaleMessages;
+    labelsToLocales: Readonly<Record<string, keyof LocaleMessages>>;
+    locale?: keyof LocaleMessages;
+}>): JSX.Element;
+
+export { }

package/dist/index.js

@@ -0,0 +1,83 @@
+import { expect } from "storybook/test";
+import { i18n } from "@lingui/core";
+import { I18nProvider } from "@lingui/react";
+import { StrictMode, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import "@mantine/core/styles.css";
+import { MantineProvider } from "@mantine/core";
+import { configure } from "mobx";
+//#region src/expect.ts
+function expectEquals(v1, v2) {
+	expect(v1).toEqual(v2);
+}
+function expectTruthy(b) {
+	expect(b).toBeTruthy();
+}
+function expectDefined(v) {
+	expect(v).toBeDefined();
+}
+function expectInstanceOf(instance, constructor) {
+	expect(instance).toBeInstanceOf(constructor);
+}
+function expectDefinedAndReturn(v) {
+	expectDefined(v);
+	return v;
+}
+function pendingAfter(milliseconds) {
+	return new Promise((resolve) => {
+		setTimeout(() => resolve("pending"), milliseconds);
+	});
+}
+async function expectPendingPromise(p, timeoutMilliseconds = 500) {
+	const state = await Promise.race([p.then(() => "fulfilled", () => "rejected"), pendingAfter(timeoutMilliseconds)]);
+	await expect(state).toBe("pending");
+}
+//#endregion
+//#region src/LinguiProvider.tsx
+function StorybookLinguiProvider({ children, localeMessages, labelsToLocales, locale = "en" }) {
+	useEffect(() => {
+		const messages = localeMessages[locale] ?? localeMessages[labelsToLocales[locale]];
+		if (messages != null) {
+			i18n.load(locale, messages);
+			i18n.activate(locale);
+		}
+		return () => {};
+	}, [
+		locale,
+		labelsToLocales,
+		localeMessages
+	]);
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		i18n,
+		children
+	});
+}
+//#endregion
+//#region src/preview.tsx
+/**
+* Creates the storybook preview configuration for a package. Every story renders inside mantine and strict mode.
+* Storybook applies decorators innermost first, so the supplied decorators run inside the shared providers.
+*
+* Storybook statically parses the preview file and only understands a default export that is a call whose first
+* argument is an object literal, so callers must always pass one, even if it is empty
+*/
+function createStorybookPreview({ args, argTypes, decorators = [] }) {
+	configure({
+		enforceActions: "observed",
+		observableRequiresReaction: true,
+		reactionRequiresObservable: true
+	});
+	return {
+		parameters: { controls: { matchers: {
+			color: /(background|color)$/i,
+			date: /Date$/i
+		} } },
+		argTypes,
+		args,
+		decorators: [...decorators, function(Story) {
+			return /* @__PURE__ */ jsx(MantineProvider, { children: /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(Story, {}) }) });
+		}]
+	};
+}
+//#endregion
+export { StorybookLinguiProvider, createStorybookPreview, expectDefined, expectDefinedAndReturn, expectEquals, expectInstanceOf, expectPendingPromise, expectTruthy };

package/dist/main.cjs

@@ -0,0 +1,40 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let node_path = require("node:path");
+//#region src/main.ts
+var hiddenSegmentPattern = new RegExp(`/(?:${["specs"].join("|")})(?=/|$)`, "g");
+/**
+* Creates the storybook main configuration for a package. The caller must pass its own `require` so packages resolve
+* relative to the calling package rather than this one
+*/
+function createStorybookMainConfig(require$1, { stories = ["../**/*.stories.@(ts|tsx)"], viteConfigPath = "./vitest.config.mts" } = {}) {
+	/**
+	* 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.
+	*/
+	function getAbsolutePath(value) {
+		return (0, node_path.dirname)(require$1.resolve((0, node_path.join)(value, "package.json")));
+	}
+	return {
+		stories,
+		experimental_indexers: (existing) => (existing ?? []).map((indexer) => ({
+			...indexer,
+			createIndex: async (fileName, options) => {
+				return (await indexer.createIndex(fileName, options)).map((entry) => ({
+					...entry,
+					title: options.makeTitle(entry.title).replace(hiddenSegmentPattern, "")
+				}));
+			}
+		})),
+		addons: [
+			getAbsolutePath("@storybook/addon-links"),
+			getAbsolutePath("@storybook/addon-docs"),
+			getAbsolutePath("@chromatic-com/storybook")
+		],
+		framework: {
+			name: getAbsolutePath("@storybook/react-vite"),
+			options: { builder: { viteConfigPath } }
+		}
+	};
+}
+//#endregion
+exports.createStorybookMainConfig = createStorybookMainConfig;

package/dist/main.d.cts

@@ -0,0 +1,12 @@
+import { StorybookConfig } from '@storybook/react-vite';
+
+/**
+ * Creates the storybook main configuration for a package. The caller must pass its own `require` so packages resolve
+ * relative to the calling package rather than this one
+ */
+export declare function createStorybookMainConfig(require: NodeJS.Require, { stories, viteConfigPath, }?: {
+    readonly stories?: string[];
+    readonly viteConfigPath?: string;
+}): StorybookConfig;
+
+export { }

package/dist/main.d.ts

@@ -0,0 +1,12 @@
+import { StorybookConfig } from '@storybook/react-vite';
+
+/**
+ * Creates the storybook main configuration for a package. The caller must pass its own `require` so packages resolve
+ * relative to the calling package rather than this one
+ */
+export declare function createStorybookMainConfig(require: NodeJS.Require, { stories, viteConfigPath, }?: {
+    readonly stories?: string[];
+    readonly viteConfigPath?: string;
+}): StorybookConfig;
+
+export { }

package/dist/main.js

@@ -0,0 +1,39 @@
+import { dirname, join } from "node:path";
+//#region src/main.ts
+var hiddenSegmentPattern = new RegExp(`/(?:${["specs"].join("|")})(?=/|$)`, "g");
+/**
+* Creates the storybook main configuration for a package. The caller must pass its own `require` so packages resolve
+* relative to the calling package rather than this one
+*/
+function createStorybookMainConfig(require, { stories = ["../**/*.stories.@(ts|tsx)"], viteConfigPath = "./vitest.config.mts" } = {}) {
+	/**
+	* 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.
+	*/
+	function getAbsolutePath(value) {
+		return dirname(require.resolve(join(value, "package.json")));
+	}
+	return {
+		stories,
+		experimental_indexers: (existing) => (existing ?? []).map((indexer) => ({
+			...indexer,
+			createIndex: async (fileName, options) => {
+				return (await indexer.createIndex(fileName, options)).map((entry) => ({
+					...entry,
+					title: options.makeTitle(entry.title).replace(hiddenSegmentPattern, "")
+				}));
+			}
+		})),
+		addons: [
+			getAbsolutePath("@storybook/addon-links"),
+			getAbsolutePath("@storybook/addon-docs"),
+			getAbsolutePath("@chromatic-com/storybook")
+		],
+		framework: {
+			name: getAbsolutePath("@storybook/react-vite"),
+			options: { builder: { viteConfigPath } }
+		}
+	};
+}
+//#endregion
+export { createStorybookMainConfig };

package/package.json

@@ -1,6 +1,84 @@
 {
+  "author": "Chris <chris.glover@gmail.com> (@madmaw)",
+  "description": "Storybook configuration and assertion helpers for React, Mantine, MobX and Lingui",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.3.1",
+    "@lingui/core": "^6.8.0",
+    "@lingui/react": "^6.8.0",
+    "@mantine/core": "^9.0.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-links": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "mobx": "^7.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "storybook": "^10.6.0",
+    "vite-plus": "1.0.0",
+    "@strictly/typescript": "0.0.41",
+    "@strictly/vite": "0.0.41"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./main": {
+      "import": {
+        "types": "./dist/main.d.ts",
+        "default": "./dist/main.js"
+      },
+      "require": {
+        "types": "./dist/main.d.cts",
+        "default": "./dist/main.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "homepage": "https://github.com/madmaw/strictly/tree/main/support/storybook",
+  "keywords": [
+    "storybook"
+  ],
+  "license": "MIT",
+  "main": "./dist/index.js",
   "name": "@strictly/storybook",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "peerDependencies": {
+    "@chromatic-com/storybook": "^5.3.1",
+    "@lingui/core": "^6.8.0",
+    "@lingui/react": "^6.8.0",
+    "@mantine/core": "^9.0.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-links": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
+    "mobx": "^7.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "storybook": "^10.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "directory": "support/storybook",
+    "type": "git",
+    "url": "git+https://github.com/madmaw/strictly.git"
+  },
+  "type": "module",
+  "version": "0.0.41",
+  "scripts": {
+    "build": "vp build --configLoader runner",
+    "check-types": "tsc -b",
+    "clean": "del-cli dist .out"
+  },
+  "types": "./dist/index.d.ts"
 }