@rokkit/stories 1.0.0-next.134 → 1.0.0-next.136

package/dist/builder.svelte.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @typedef {Object} Example
+ * @property {Object[]} files
+ * @property {import('svelte').SvelteComponent} App
+ */
+export class StoryBuilder {
+    constructor(sources: any, modules: any);
+    get loading(): boolean;
+    get error(): null;
+    get examples(): Record<string, Example>;
+    get fragments(): Object[];
+    /**
+     * @param {string} name
+     * @returns {Example}
+     */
+    getExample(name: string): Example;
+    getFragment(index: any): Object;
+    hasExample(name: any): boolean;
+    hasFragment(index: any): boolean;
+    #private;
+}
+export type Example = {
+    files: Object[];
+    App: import("svelte").SvelteComponent;
+};

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { default as Code } from "./Code.svelte";
+export { default as CodeViewer } from "./CodeViewer.svelte";
+export { default as CopyToClipboard } from "./CopyToClipboard.svelte";
+export { default as Demo } from "./Demo.svelte";
+export { default as StoryViewer } from "./StoryViewer.svelte";
+export { default as StoryComponent } from "./StoryComponent.svelte";
+export { default as StoryError } from "./StoryError.svelte";
+export { default as StoryLoading } from "./StoryLoading.svelte";
+export { StoryBuilder } from "./builder.svelte.js";
+export { highlightCode, preloadHighlighter } from "./lib/shiki.js";
+export { fetchImports, getSlug, getSections, getAllSections, groupFiles, fetchStories, findSection, findGroupForSection } from "./lib/stories.js";

package/dist/{stories.d.ts → lib/stories.d.ts}

@@ -36,9 +36,10 @@ export function fetchStories(sources: Object, modules: Object): Promise<{
 }>;
 /**
  * Get all individual sections flattened from groups
+ * @param {Metadata[]} sections - The sections to flatten
  * @returns {Array} Array of all tutorial sections
  */
-export function getAllSections(): any[];
+export function getAllSections(sections: Metadata[]): any[];
 /**
  * Find a section by its ID
  * @param {string} slug - The section ID to find
@@ -50,7 +51,7 @@ export function findSection(sections: any, slug: string): Object | null;
  * @param {string} sectionId - The section ID to find the group for
  * @returns {Object|null} The group object or null if not found
  */
-export function findGroupForSection(sections: any, sectionId: string): Object | null;
+export function findGroupForSection(sections: any, slug: any): Object | null;
 export type SourceFile = {
     /**
      * - The file path.

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@rokkit/stories",
-  "version": "1.0.0-next.134",
+  "version": "1.0.0-next.136",
   "description": "Utilities for building tutorials.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jerrythomas/rokkit.git"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -19,11 +23,13 @@
     "./package.json": "./package.json",
     ".": {
       "types": "./dist/index.d.ts",
+      "svelte": "./src/index.js",
       "import": "./src/index.js"
     }
   },
   "files": [
     "src/**/*.js",
+    "src/**/*.svelte",
     "dist/**/*.d.ts",
     "README.md",
     "LICENSE"
@@ -39,6 +45,11 @@
     "frontmatter": "^0.0.3",
     "ramda": "^0.32.0",
     "shiki": "^3.23.0",
-    "@rokkit/core": "latest"
+    "@rokkit/core": "workspace:latest",
+    "@rokkit/states": "workspace:latest",
+    "@rokkit/ui": "workspace:latest"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
   }
 }

package/src/Code.svelte

@@ -0,0 +1,28 @@
+<script>
+	import { highlightCode } from './lib/shiki.js'
+	import { vibe } from '@rokkit/states'
+	import CopyToClipboard from './CopyToClipboard.svelte'
+
+	let { content, language } = $props()
+	let theme = $derived(vibe.mode === 'dark' ? 'github-dark' : 'github-light')
+	let highlightedCode = $derived(
+		content ? highlightCode(content, { lang: language, theme }) : Promise.resolve('')
+	)
+</script>
+
+<div data-code-root>
+	<div data-code-overlay>
+		<CopyToClipboard {content} class="" />
+	</div>
+	{#if language}
+		<span data-code-lang>{language}</span>
+	{/if}
+	{#await highlightedCode}
+		<div class="text-surface-floating p-2">Highlighting code...</div>
+	{:then code}
+		<!-- eslint-disable svelte/no-at-html-tags -->
+		{@html code}
+	{:catch error}
+		<div class="p-2 text-red-500">Error highlighting code: {error.message}</div>
+	{/await}
+</div>

package/src/CodeViewer.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { Tabs } from '@rokkit/ui'
+	import Code from './Code.svelte'
+	let { files = [] } = $props()
+	let current = $state()
+	$effect(() => {
+		if (files.length > 0 && current === undefined) current = files[0]
+	})
+	let fields = { label: 'name', icon: 'language' }
+</script>
+
+<Tabs options={files} {fields} bind:value={current} class="no-padding">
+	{#snippet tabPanel(item)}
+		<Code content={item.content} language={item.language} />
+	{/snippet}
+</Tabs>

package/src/CopyToClipboard.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+	import { Button } from '@rokkit/ui'
+	let { content, class: className = 'absolute right-2 top-2 z-10', title = 'Copy code' } = $props()
+	let copySuccess = $state(false)
+
+	async function copyToClipboard() {
+		try {
+			await navigator.clipboard.writeText(content || '')
+			copySuccess = true
+			setTimeout(() => {
+				copySuccess = false
+			}, 2000)
+		} catch (err) {
+			console.error('Failed to copy code:', err)  
+		}
+	}
+</script>
+
+<Button
+	onclick={copyToClipboard}
+	class={className}
+	{title}
+	style="ghost"
+	size="sm"
+	icon={copySuccess ? DEFAULT_STATE_ICONS.action.copysuccess : DEFAULT_STATE_ICONS.action.copy}
+/>

package/src/Demo.svelte

@@ -0,0 +1,115 @@
+<script>
+	import Code from './Code.svelte'
+
+	let { App, code, language = 'svelte' } = $props()
+	let view = $state('preview')
+</script>
+
+<div data-demo-root>
+	<div data-demo-toggle>
+		<button
+			data-demo-btn
+			aria-pressed={view === 'preview'}
+			onclick={() => (view = 'preview')}
+			title="Preview"
+		>
+			<span class="i-solar:eye-bold-duotone"></span>
+		</button>
+		<button
+			data-demo-btn
+			aria-pressed={view === 'code'}
+			onclick={() => (view = 'code')}
+			title="Code"
+		>
+			<span class="i-solar:code-square-bold-duotone"></span>
+		</button>
+	</div>
+
+	{#if view === 'preview'}
+		<div data-demo-preview>
+			{#if App}<App />{/if}
+		</div>
+	{:else}
+		<div data-demo-code>
+			<Code content={code} {language} />
+		</div>
+	{/if}
+</div>
+
+<style>
+	[data-demo-root] {
+		position: relative;
+		min-height: 14rem;
+		border-radius: 0.5rem;
+		border: 1px solid var(--color-surface);
+		overflow: hidden;
+	}
+
+	[data-demo-toggle] {
+		position: absolute;
+		top: 0.625rem;
+		right: 0.625rem;
+		z-index: 20;
+		display: flex;
+		gap: 2px;
+		background: color-mix(in srgb, var(--color-surface) 80%, transparent);
+		backdrop-filter: blur(6px);
+		border: 1px solid var(--color-surface);
+		border-radius: 0.375rem;
+		padding: 2px;
+	}
+
+	[data-demo-btn] {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.75rem;
+		height: 1.75rem;
+		border-radius: 0.25rem;
+		border: none;
+		background: transparent;
+		color: var(--color-surface);
+		cursor: pointer;
+		font-size: 0.875rem;
+		transition:
+			background 120ms ease,
+			color 120ms ease;
+	}
+
+	[data-demo-btn][aria-pressed='true'] {
+		background: var(--color-surface);
+		color: var(--color-on-surface);
+	}
+
+	[data-demo-btn]:hover:not([aria-pressed='true']) {
+		background: var(--color-surface-z2);
+		color: var(--color-surface-z7);
+	}
+
+	[data-demo-preview] {
+		@apply bg-graph-paper;
+		--unit: 20px;
+		--size: var(--unit);
+		--minor-grid: 0.5px;
+		--major-grid: 0px;
+		--graph-paper-color: rgba(128, 128, 128, 0.22);
+
+		background-color: var(--color-surface-z0);
+		box-shadow: inset 0 2px 10px rgb(0 0 0 / 0.07);
+
+		min-height: 14rem;
+		padding: 2rem 1.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	[data-demo-code] {
+		min-height: 14rem;
+	}
+
+	[data-demo-code] :global([data-code-root]) {
+		border-radius: 0;
+		border: none;
+	}
+</style>

package/src/StoryComponent.svelte

@@ -0,0 +1,17 @@
+<script>
+	let { component, class: className = '' } = $props()
+</script>
+
+<div class="story-component p-6 {className}">
+	{#if component}
+		{@const Component = component}
+		<Component />
+	{:else}
+		<div
+			class="text-surface-floating border-surface-300 rounded border border-dashed p-4 text-center"
+		>
+			<p>Component loading in progress...</p>
+			<p class="mt-1 text-sm">If this persists, check console for errors</p>
+		</div>
+	{/if}
+</div>

package/src/StoryError.svelte

@@ -0,0 +1,26 @@
+<script>
+	let { error, class: className = '' } = $props()
+</script>
+
+<div
+	class="story-error rounded-lg border border-red-200 bg-red-50 p-6 dark:border-red-800 dark:bg-red-900/20 {className}"
+>
+	<div class="flex items-start space-x-3">
+		<div class="flex-shrink-0">
+			<svg class="h-5 w-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.314 18.5c-.77.833.192 2.5 1.732 2.5z"
+				></path>
+			</svg>
+		</div>
+		<div class="flex-1">
+			<h3 class="text-sm font-medium text-red-900 dark:text-red-100">Story Loading Failed</h3>
+			<p class="mt-1 text-sm text-red-800 dark:text-red-200">
+				{error}
+			</p>
+		</div>
+	</div>
+</div>

package/src/StoryLoading.svelte

@@ -0,0 +1,24 @@
+<script>
+	let { message = 'Loading story...', class: className = '' } = $props()
+</script>
+
+<div class="story-loading border-surface-z2 bg-surface-z2 rounded-lg border p-6 {className}">
+	<div class="flex items-center justify-center space-x-3">
+		<div class="animate-spin">
+			<svg
+				class="text-surface-floating h-5 w-5"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+				></path>
+			</svg>
+		</div>
+		<span class="text-surface-floating text-sm">{message}</span>
+	</div>
+</div>

package/src/StoryViewer.svelte

@@ -0,0 +1,51 @@
+<script>
+	import CodeViewer from './CodeViewer.svelte'
+	import { Button } from '@rokkit/ui'
+
+	let { App, files } = $props()
+	let showCode = $state(false)
+</script>
+
+<div data-story-root>
+	<!-- Demo preview area with grid background -->
+	<div
+		data-story-preview
+		class="preview-area border-surface-z2 text-surface-z8 rounded-t-md border p-6"
+	>
+		{#if App}
+			<App />
+		{:else}
+			<div>No preview available</div>
+		{/if}
+	</div>
+
+	<!-- Toolbar: toggle code -->
+	<div
+		class="border-surface-z2 bg-surface-z1 flex items-center justify-between rounded-b-md border border-t-0 px-3 py-1"
+	>
+		<span class="text-surface-z4 text-xs">Example</span>
+		<Button
+			label={showCode ? 'Hide code' : 'Show code'}
+			icon={showCode ? 'i-solar:minimize-square-bold-duotone' : 'i-solar:code-square-bold-duotone'}
+			onclick={() => (showCode = !showCode)}
+			style="ghost"
+			size="sm"
+		/>
+	</div>
+
+	{#if showCode}
+		<div class="mt-2">
+			<CodeViewer {files} />
+		</div>
+	{/if}
+</div>
+
+<style>
+	.preview-area {
+		background-color: var(--color-surface-z2, oklch(from var(--color-surface) calc(l + 0.02) c h));
+		background-image:
+			linear-gradient(rgb(var(--color-surface-200, 128 128 128) / 0.25) 1px, transparent 1px),
+			linear-gradient(90deg, rgb(var(--color-surface-200, 128 128 128) / 0.25) 1px, transparent 1px);
+		background-size: 20px 20px;
+	}
+</style>

package/src/builder.svelte.js

@@ -0,0 +1,68 @@
+import { fetchStories } from './lib/stories.js'
+
+/**
+ * @typedef {Object} Example
+ * @property {Object[]} files
+ * @property {import('svelte').SvelteComponent} App
+ */
+
+export class StoryBuilder {
+	#modules
+	#sources
+	/** @type {Record<string, Example>} */
+	#processed = $state({})
+	#loading = $state(true)
+	#error = $state(null)
+
+	constructor(sources, modules) {
+		this.#modules = modules
+		this.#sources = sources
+		this.#init()
+	}
+
+	async #init() {
+		try {
+			this.#processed = await fetchStories(this.#sources, this.#modules)
+			this.#loading = false
+		} catch (err) {
+			this.#error = err
+			this.#loading = false
+		}
+	}
+
+	get loading() {
+		return this.#loading
+	}
+
+	get error() {
+		return this.#error
+	}
+
+	get examples() {
+		return this.#processed || {}
+	}
+
+	get fragments() {
+		return this.#processed?.fragments?.files || []
+	}
+
+	/**
+	 * @param {string} name
+	 * @returns {Example}
+	 */
+	getExample(name) {
+		return this.#processed?.[name]
+	}
+
+	getFragment(index) {
+		return this.#processed?.fragments?.files?.[index]
+	}
+
+	hasExample(name) {
+		return Boolean(this.#processed?.[name])
+	}
+
+	hasFragment(index) {
+		return Boolean(this.#processed?.fragments?.files?.[index])
+	}
+}

package/src/index.js

@@ -0,0 +1,20 @@
+export { default as Code } from './Code.svelte'
+export { default as CodeViewer } from './CodeViewer.svelte'
+export { default as CopyToClipboard } from './CopyToClipboard.svelte'
+export { default as Demo } from './Demo.svelte'
+export { default as StoryViewer } from './StoryViewer.svelte'
+export { default as StoryComponent } from './StoryComponent.svelte'
+export { default as StoryError } from './StoryError.svelte'
+export { default as StoryLoading } from './StoryLoading.svelte'
+export { StoryBuilder } from './builder.svelte.js'
+export { highlightCode, preloadHighlighter } from './lib/shiki.js'
+export {
+	fetchImports,
+	getSlug,
+	getSections,
+	getAllSections,
+	groupFiles,
+	fetchStories,
+	findSection,
+	findGroupForSection
+} from './lib/stories.js'

package/src/lib/stories.js

@@ -164,10 +164,11 @@ export async function fetchStories(sources, modules) {
 }
 /**
  * Get all individual sections flattened from groups
+ * @param {Metadata[]} sections - The sections to flatten
  * @returns {Array} Array of all tutorial sections
  */
-export function getAllSections() {
-	return sections.flatMap((group) => group.children)
+export function getAllSections(sections) {
+	return sections.flatMap((group) => group.children ?? [])
 }
 
 /**
@@ -176,8 +177,9 @@ export function getAllSections() {
  * @returns {Object|null} The section object or null if not found
  */
 export function findSection(sections, slug) {
-	for (const group of sections) {
-		const section = group.children.find((child) => child.slug === slug)
+	for (const item of sections) {
+		if (item.slug === slug) return item
+		const section = item.children?.find((child) => child.slug === slug)
 		if (section) return section
 	}
 	return {}
@@ -188,6 +190,6 @@ export function findSection(sections, slug) {
  * @param {string} sectionId - The section ID to find the group for
  * @returns {Object|null} The group object or null if not found
  */
-export function findGroupForSection(sections, sectionId) {
-	return sections.find((group) => group.children.some((child) => child.id === sectionId)) || null
+export function findGroupForSection(sections, slug) {
+	return sections.find((group) => group.children?.some((child) => child.slug === slug)) || null
 }

package/src/lib/stories.spec.js

@@ -356,47 +356,47 @@ describe('stories.js', () => {
 		const mockSections = [
 			{
 				title: 'Welcome',
-				id: 'welcome',
+				slug: '/welcome',
 				children: [
-					{ title: 'Introduction', id: 'intro' },
-					{ title: 'Getting Started', id: 'get-started' }
+					{ title: 'Introduction', slug: '/welcome/intro' },
+					{ title: 'Getting Started', slug: '/welcome/get-started' }
 				]
 			},
 			{
 				title: 'Elements',
-				id: 'elements',
+				slug: '/elements',
 				children: [
-					{ title: 'List', id: 'list' },
-					{ title: 'Button', id: 'button' }
+					{ title: 'List', slug: '/elements/list' },
+					{ title: 'Button', slug: '/elements/button' }
 				]
 			}
 		]
 
 		it('should find the group containing a section', () => {
-			const result = findGroupForSection(mockSections, 'list')
+			const result = findGroupForSection(mockSections, '/elements/list')
 			expect(result).toEqual({
 				title: 'Elements',
-				id: 'elements',
+				slug: '/elements',
 				children: [
-					{ title: 'List', id: 'list' },
-					{ title: 'Button', id: 'button' }
+					{ title: 'List', slug: '/elements/list' },
+					{ title: 'Button', slug: '/elements/button' }
 				]
 			})
 		})
 
 		it('should return null when section is not found', () => {
-			const result = findGroupForSection(mockSections, 'nonexistent')
+			const result = findGroupForSection(mockSections, '/nonexistent')
 			expect(result).toBeNull()
 		})
 
 		it('should find group for section in first group', () => {
-			const result = findGroupForSection(mockSections, 'intro')
+			const result = findGroupForSection(mockSections, '/welcome/intro')
 			expect(result).toEqual({
 				title: 'Welcome',
-				id: 'welcome',
+				slug: '/welcome',
 				children: [
-					{ title: 'Introduction', id: 'intro' },
-					{ title: 'Getting Started', id: 'get-started' }
+					{ title: 'Introduction', slug: '/welcome/intro' },
+					{ title: 'Getting Started', slug: '/welcome/get-started' }
 				]
 			})
 		})