+++

stack--2022/4-tools/storypad/doc/demo/demo-stories/unit/css-pollution.css

@@ -0,0 +1,3 @@
+:root {
+	background-color: red;
+}

stack--2022/4-tools/storypad/doc/demo/demo-stories/unit/index.stories.js → stack--2022/4-tools/storypad/doc/demo/demo-stories/unit/css-pollution.stories.js

@@ -1,5 +1,5 @@
 
-console.log('FOO loaded!');
+import './css-pollution.css'
 
 export const Foo = {
 	render: () => 'FOO!'

stack--2022/4-tools/storypad/doc/demo/demo-stories/unit/global-throw.stories.js

@@ -0,0 +1,6 @@
+
+throw new Error('TEST Error on module load!')
+
+export const Foo = {
+	render: () => 'FOO!'
+};

stack--2022/4-tools/storypad/doc/demo/storypad.html

@@ -3,6 +3,7 @@
 	import startꓽstorypad from '@offirmo-private/storypad'
 	import nearest_pkg from '~/package.json'
 
+	// important to load async so that the stories don't pollute the global scope too early (ex. before SEC)
 	//import stories from './**/*.stories.@(js|jsx|ts|tsx|mdx)'
 	const stories = import('./**/*.stories.@(js|jsx|ts|tsx|mdx)')
 	console.log('BOOTSTRAP stories', stories)
@@ -13,8 +14,7 @@
 		},
 		{
 			root_title: nearest_pkg?.name,
-			decorators: [
-			]
+			//decorators: []
 		}
 	)
 </script>

stack--2022/4-tools/storypad/src/state/reducers--init--globs.ts

@@ -70,10 +70,23 @@ async function _registerꓽstoriesⵧfrom_module(state: State, story_module: Imm
 
 	const exports = await (async () => {
 		// TODO one day "on demand" resolution
-		if (typeof exports_sync_or_async === 'function')
-			return await exports_sync_or_async()
-		else
-			return exports_sync_or_async
+		if (typeof exports_sync_or_async === 'function') {
+			try {
+				return await exports_sync_or_async()
+			}
+			catch (err) {
+				return {
+					'!ERROR!': {
+						render() {
+							console.error(`Error while loading the story "${parent_path.join(SEP)}"!`, err)
+							return `Error while loading story! (see console)`
+						}
+					}
+				}
+			}
+		}
+
+		return exports_sync_or_async
 	})()
 
 	const { default: meta, ...stories } = exports

stack--2022/4-tools/storypad/src/types/csf/v3/index.ts

@@ -7,6 +7,8 @@ import { isꓽStory‿v2 } from '../v2'
 export type StoryOutput‿v3 = Html‿str // TODO extend return type
 export type StoryComponent‿v3 = any // TODO type better
 
+type Arg = any
+
 /////////////////////////////////////////////////
 // Component story format CSF
 // https://storybook.js.org/docs/react/api/csf
@@ -19,31 +21,51 @@ export type StoryComponent‿v3 = any // TODO type better
 
 /* default export
  * https://storybook.js.org/docs/api/csf#default-export
+ * TODO remove ? and auto-set them
  */
 export interface Meta‿v3 {
+	// https://storybook.js.org/docs/writing-stories#default-export
+
 	title?: never
 	component?: never
 	decorators: Decorator‿v3[]
-	parameters?: never
+	parameters?: {
+		// https://storybook.js.org/docs/api/parameters#available-parameters
+		// TODO layout: 'centered' | 'fullscreen' | 'padded' // Default: 'padded'
+	}
 	includeStories?: never
 	excludeStories?: never
+	argTypes?: {
+		[key: string]: never
+	}
+	args?: {
+		[key: string]: Arg
+	}
 }
 
 /* named export = a story = an OBJECT for v3
  */
 export interface Story‿v3 {
-	render?: () => StoryOutput‿v3
+	// https://storybook.js.org/docs/writing-stories#defining-stories
+	render?: (args: {[key: string]: Arg}) => StoryOutput‿v3
 	component?: StoryComponent‿v3
 	// can have neither, extending "meta" or even being empty!
 
+
+	// https://storybook.js.org/docs/writing-stories#using-args
+	args?: {
+		[key: string]: Arg
+	}
+
 	name?: never
-	parameters?: never
+	parameters?: never // https://storybook.js.org/docs/api/parameters
 	decorators?: Decorator‿v3[]
 }
 export function isꓽStory‿v3(s: any): s is Story‿v3 {
 	return !isꓽStory‿v2(s)
 }
 
+// https://storybook.js.org/docs/writing-stories/decorators
 export interface Decorator‿v3 {
 	(story: Story‿v3): Story‿v3
 }

stack--2022/4-tools/storypad/src/view/components/chrome--side-panel/index.ts

@@ -24,7 +24,7 @@ function _append_folder(state: Immutable<State>, parent_elt: HTMLElement, tree:
 	let details_elt = document.createElement('details')
 	const payload: StoryFolder = (tree.payload as any) ?? {
 		uid: path.join('/'),
-		is_expanded: false,
+		is_expanded: true, // TODO auto expand etc.
 	}
 	details_elt.open = payload.is_expanded
 	details_elt.innerHTML = `

stack--2022/4-tools/storypad/src/view/components/story/v3/common.ts

@@ -0,0 +1 @@
+// TODO arg from qparams https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url

stack--2022/4-tools/storypad/src/view/components/story/v3/index.ts

@@ -20,7 +20,10 @@ async function render(entry: Immutable<StoryEntry>) {
 
 	switch (true) {
 		case story.render !== undefined: {
-			const rendered = story.render()
+			const rendered = story.render({
+				...meta.args,
+				...story.args,
+			})
 			document.body.innerText = rendered
 			break
 		}

stack--2022/4-tools/storypad/src/view/components/story/v3/react/index.tsx

@@ -31,9 +31,14 @@ async function render(Component: any, story: Immutable<Story‿v3>, meta: Immuta
 	const use_strict = true
 	const StrictWrapper = use_strict ? StrictMode : Fragment
 
+	const props = {
+		...meta.args,
+		...story.args,
+	}
+
 	root.render(
 	<StrictWrapper>
-			<Component />
+			<Component {...props} />
 		</StrictWrapper>
 	);
 	console.groupEnd()