@vitus-labs/rocketstories 2.0.0 → 2.2.0

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import { ListProps } from "@vitus-labs/elements";
-import { RocketComponentType } from "@vitus-labs/rocketstyle";
+import { RocketComponentType, ThemeModeKeys } from "@vitus-labs/rocketstyle";
 import { ComponentType, FC, ForwardRefExoticComponent, ReactNode } from "react";
 
 //#region src/constants/controls.d.ts
@@ -17,8 +17,12 @@ type StoryComponent<P = {}> = FC<P> & Partial<{
 type ElementType<T extends TObj | unknown = any> = ComponentType<T> | ForwardRefExoticComponent<T>;
 type RocketType = RocketComponentType & {
   VITUS_LABS__COMPONENT?: string;
-  getStaticDimensions: any;
-  getDefaultAttrs: any;
+  getStaticDimensions: (theme: TObj) => {
+    dimensions: Record<string, any>;
+    useBooleans: boolean;
+    multiKeys: Record<string, true>;
+  };
+  getDefaultAttrs: (props: TObj, theme: TObj, mode: ThemeModeKeys) => TObj;
   displayName?: string;
 };
 type ControlTypes = T_CONTROL_TYPES;
@@ -67,6 +71,16 @@ type Configuration = {
   }>;
   controls: Record<string, Control>;
   decorators: Decorator[];
+  /**
+   * Theme used at story-construction time when introspecting rocketstyle
+   * components (`getStaticDimensions`, `getDefaultAttrs`). The
+   * `rocketstories` factory snapshots this from the module-level singleton
+   * (`utils/theme.ts`) so each `storyOf(component)` instance is isolated
+   * from later `setTheme` mutations or competing `init({ theme })` calls
+   * in the same process. Optional in the type to ease direct test
+   * construction; consumers via the factory always receive a value.
+   */
+  theme?: Record<string, unknown>;
 };
 type RocketStoryConfiguration = Omit<Configuration, 'component'> & {
   component: RocketType;
@@ -121,7 +135,7 @@ interface IRocketStories<OA extends TObj = {}, RA extends TObj | unknown = unkno
   }>) => ReturnType<RenderDimension<OA>> | null;
   render: (params: RenderStoryOptions<OA>) => ISRS extends true ? ReturnType<RenderRender<OA>> : ReturnType<RenderRender$1<OA>>;
   list: (params: ListStoryOptions) => ISRS extends true ? ReturnType<RenderList<OA>> : ReturnType<RenderList$1<OA>>;
-  init: () => {
+  init: {
     component: Configuration['component'];
     title: Configuration['name'];
     decorators: Configuration['decorators'];
@@ -135,7 +149,7 @@ interface IRocketStories<OA extends TObj = {}, RA extends TObj | unknown = unkno
 }
 //#endregion
 //#region src/init.d.ts
-type InitParams = Partial<Omit<Configuration, 'component' | 'attrs'>> & {
+type InitParams = Partial<Omit<Configuration, 'component' | 'attrs' | 'theme'>> & {
   theme?: Record<string, unknown>;
 };
 /**
@@ -154,7 +168,9 @@ declare const init: Init;
  * returning an IRocketStories builder with chainable methods for
  * generating Storybook stories, controls, and dimension showcases.
  */
-type Rocketstories = <C extends Configuration['component']>(component: C, options?: Partial<Omit<Configuration, 'component' | 'attrs'>>) => C extends RocketType ? IRocketStories<ExtractProps<C>, C['$$rocketstyle'], true> : IRocketStories<ExtractProps<C>, unknown, false>;
+type Rocketstories = <C extends Configuration['component']>(component: C, options?: Partial<Omit<Configuration, 'component' | 'attrs' | 'theme'>> & {
+  theme?: Record<string, unknown>;
+}) => C extends RocketType ? IRocketStories<ExtractProps<C>, C['$$rocketstyle'], true> : IRocketStories<ExtractProps<C>, unknown, false>;
 /** @see {@link Rocketstories} */
 declare const rocketstories: Rocketstories;
 //#endregion

package/lib/index.js

@@ -562,7 +562,8 @@ const story = (WrappedComponent) => ({ component, attrs, controls }) => {
 * Accepts list configuration (data, itemKey, etc.) and wraps the component
 * through StoryHoc, rendering it inside a Vitus Labs List element.
 */
-var renderList_default$1 = (list) => story((component) => (props) => /* @__PURE__ */ jsx(List, {
+const LooseList$1 = List;
+var renderList_default$1 = (list) => story((component) => (props) => /* @__PURE__ */ jsx(LooseList$1, {
 	rootElement: false,
 	...list,
 	itemProps: props,
@@ -766,14 +767,6 @@ const generateMainJSXCode = ({ name, props, dimensions, booleanDimensions }) =>
 	return result;
 };
 
-//#endregion
-//#region src/utils/theme.ts
-let theme = {};
-const getTheme = () => theme;
-const setTheme = (value) => {
-	theme = value;
-};
-
 //#endregion
 //#region src/stories/rocketstories/renderDimension/context.tsx
 /**
@@ -829,8 +822,7 @@ const component = ({ itemProps }) => /* @__PURE__ */ jsx(Fragment, { children: p
 * PseudoList when pseudo-state visualization is enabled). Generates
 * corresponding JSX code snippets and Storybook controls.
 */
-const renderDimension = (dimension, { name, component: component$3, attrs = {}, controls, storyOptions = {}, ignore = [] }) => {
-	const theme = getTheme();
+const renderDimension = (dimension, { name, component: component$3, attrs = {}, controls, storyOptions = {}, ignore = [], theme = {} }) => {
 	const statics = component$3.getStaticDimensions(theme);
 	const defaultAttrs = component$3.getDefaultAttrs(attrs, theme, "light");
 	const { dimensions, useBooleans, multiKeys } = statics;
@@ -942,8 +934,7 @@ const extractDefaultBooleanProps = ({ dimensions, multiKeys, useBooleans }) => {
 * static configuration, auto-generates Storybook controls for dimensions
 * and known Vitus Labs props, and attaches args/argTypes/parameters to the story.
 */
-const rocketStory = (WrappedComponent) => ({ name, component, attrs, controls }) => {
-	const theme = getTheme();
+const rocketStory = (WrappedComponent) => ({ name, component, attrs, controls, theme = {} }) => {
 	const statics = component.getStaticDimensions(theme);
 	const defaultAttrs = component.getDefaultAttrs(attrs, theme, "light");
 	const { dimensions, useBooleans, multiKeys } = statics;
@@ -989,7 +980,8 @@ const rocketStory = (WrappedComponent) => ({ name, component, attrs, controls })
 * Accepts list configuration and wraps the component through RocketStoryHoc,
 * rendering it inside a Vitus Labs List element with auto-generated controls.
 */
-var renderList_default = (list) => rocketStory((component) => (props) => /* @__PURE__ */ jsx(List, {
+const LooseList = List;
+var renderList_default = (list) => rocketStory((component) => (props) => /* @__PURE__ */ jsx(LooseList, {
 	rootElement: false,
 	itemProps: props,
 	...list,
@@ -1012,16 +1004,31 @@ var renderRender_default = (render) => rocketStory(() => render);
 //#endregion
 //#region src/rocketstories.tsx
 /**
-* Clones the current configuration, merges in new options,
-* and returns a fresh IRocketStories instance for immutable chaining.
+* Clones the current configuration, merges in new options, and returns a
+* fresh IRocketStories instance for immutable chaining.
+*
+* Component-swap reset: when `options.component` differs from the current
+* `defaultOptions.component`, the prior `attrs` are dropped — they were
+* tailored to the previous component's prop shape, and applying them to a
+* different component silently leaks invalid props onto the rendered
+* output. Story-level config (`storyOptions`, `controls`, `decorators`)
+* is preserved because it's about how stories render, not about the
+* component's prop shape. Mirrors the same fix in `@vitus-labs/rocketstyle`'s
+* `cloneAndEnhance` (PR #200).
+*
+* Callers who want to preserve attrs across a component swap must
+* re-chain explicitly:
+*
+*   stories.replaceComponent(NewComp).attrs(sharedAttrs)
 */
-const cloneAndEhnance = (defaultOptions, options) => {
+const cloneAndEnhance = (defaultOptions, options) => {
+	const componentChanged = options.component != null && options.component !== defaultOptions.component;
 	const result = {
 		...defaultOptions,
 		name: defaultOptions.name || options.name,
 		prefix: options.prefix || defaultOptions.prefix,
 		component: options.component || defaultOptions.component,
-		attrs: {
+		attrs: componentChanged ? { ...options.attrs } : {
 			...defaultOptions.attrs,
 			...options.attrs
 		},
@@ -1078,21 +1085,29 @@ const createRocketStories = (options) => {
 			title: options.name,
 			decorators: options.decorators
 		},
-		storyOptions: (storyOptions) => cloneAndEhnance(options, { storyOptions }),
-		controls: (controls) => cloneAndEhnance(options, { controls }),
-		config: ({ component, storyOptions, prefix, name, decorators }) => cloneAndEhnance(options, {
+		storyOptions: (storyOptions) => cloneAndEnhance(options, { storyOptions }),
+		controls: (controls) => cloneAndEnhance(options, { controls }),
+		config: ({ component, storyOptions, prefix, name, decorators }) => cloneAndEnhance(options, {
 			component,
 			storyOptions,
 			prefix,
 			name,
 			decorators
 		}),
-		attrs: (attrs) => cloneAndEhnance(options, { attrs }),
-		replaceComponent: (component) => cloneAndEhnance(options, { component }),
-		decorators: (decorators) => cloneAndEhnance(options, { decorators })
+		attrs: (attrs) => cloneAndEnhance(options, { attrs }),
+		replaceComponent: (component) => cloneAndEnhance(options, { component }),
+		decorators: (decorators) => cloneAndEnhance(options, { decorators })
 	};
 };
 
+//#endregion
+//#region src/utils/theme.ts
+let theme = {};
+const getTheme = () => theme;
+const setTheme = (value) => {
+	theme = value;
+};
+
 //#endregion
 //#region src/init.ts
 /** @see {@link Init} */
@@ -1101,12 +1116,13 @@ const init = ({ decorators = [], storyOptions = {}, theme, ...rest }) => {
 	return (component) => rocketstories(component, {
 		decorators,
 		storyOptions,
+		theme,
 		...rest
 	});
 };
 /** @see {@link Rocketstories} */
 const rocketstories = (component, options = {}) => {
-	const { decorators = [], storyOptions = {} } = options;
+	const { decorators = [], storyOptions = {}, theme } = options;
 	return createRocketStories({
 		component,
 		name: component.displayName || component.name,
@@ -1119,7 +1135,8 @@ const rocketstories = (component, options = {}) => {
 			...storyOptions
 		},
 		decorators,
-		controls: {}
+		controls: {},
+		theme: theme ?? getTheme()
 	});
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/rocketstories",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -61,14 +61,13 @@
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "cover": "coveralls < .coverage/lcov.info",
-    "typecheck": "tsc --noEmit",
-    "version": "node ../../scripts/sync-peer-deps.mjs"
+    "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@storybook/react": "10.2.8",
-    "@vitus-labs/core": "2.0.0",
-    "@vitus-labs/rocketstyle": "2.0.0",
-    "@vitus-labs/unistyle": "2.0.0",
+    "@storybook/react": "^10.3.6",
+    "@vitus-labs/core": "workspace:^",
+    "@vitus-labs/rocketstyle": "workspace:^",
+    "@vitus-labs/unistyle": "workspace:^",
     "react": ">= 19"
   },
   "dependencies": {
@@ -77,9 +76,9 @@
   "devDependencies": {
     "@vitus-labs/core": "workspace:*",
     "@vitus-labs/rocketstyle": "workspace:*",
-    "@vitus-labs/tools-rolldown": "2.2.0",
-    "@vitus-labs/tools-storybook": "2.2.0",
-    "@vitus-labs/tools-typescript": "2.1.0",
+    "@vitus-labs/tools-rolldown": "2.3.0",
+    "@vitus-labs/tools-storybook": "2.3.0",
+    "@vitus-labs/tools-typescript": "2.3.0",
     "@vitus-labs/unistyle": "workspace:*"
   }
 }