@forgerock/login-framework-cli 0.0.0-beta.0 → 0.1.1

package/dist/src/mcp.js

@@ -0,0 +1,182 @@
+import { McpServer, Tool, Toolkit } from '@effect/ai';
+import { Command } from '@effect/cli';
+import { NodeContext, NodeSink, NodeStream } from '@effect/platform-node';
+import { Cause, Effect, Layer, Logger, Option, Schema } from 'effect';
+import { existsSync, readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { scaffoldComponent } from './commands/generate.js';
+import { initProject } from './commands/init.js';
+import { resolveSource } from './commands/source.js';
+import { assertValidProject, writeVersion } from './config/version.js';
+import { copyWithExclusions, expandTilde } from './services/file-system.js';
+import { runRegistryScript } from './services/registry.js';
+import { GithubReleaseLayer, Release } from './services/release.js';
+// Resolve package.json from either dist/src/ (compiled) or src/ (Vitest).
+const __dir = dirname(fileURLToPath(import.meta.url));
+const pkgPath = existsSync(resolve(__dir, '../../package.json'))
+    ? resolve(__dir, '../../package.json')
+    : resolve(__dir, '../package.json');
+const { version } = JSON.parse(readFileSync(pkgPath, 'utf8'));
+// ── Shared error formatter ────────────────────────────────────────────────────
+function formatError(cause) {
+    const err = Cause.failureOption(cause);
+    if (Option.isSome(err)) {
+        const e = err.value;
+        switch (e._tag) {
+            case 'InvalidVersionError':
+                return `Invalid version "${e['version']}". Expected a Git tag like @forgerock/login-widget@2.1.0 or v1.0.0.`;
+            case 'ReleaseNetworkError':
+                return `Network error reaching GitHub: ${e['cause']}`;
+            case 'ReleaseParseError':
+                return `Failed to parse release data: ${e['cause']}`;
+            case 'ReleaseFsError':
+                return `Filesystem error during ${e['operation']}: ${e['cause']}`;
+            case 'ReleaseNotFoundError':
+                return `No releases found on GitHub${e['cause'] ? `: ${e['cause']}` : ''}.`;
+            case 'FileSystemError':
+                return `Filesystem error (${e['operation']}) at "${e['path']}": ${e['cause']}`;
+            case 'GeneratorVersionError':
+                return `Generator version error: ${e['message']}${e['path'] ? ` (${e['path']})` : ''}`;
+            case 'RegistryScanError':
+                return `Registry scan failed in "${e['directory']}": ${e['cause']}`;
+            case 'DirectoryConflictError':
+                return `"${e['path']}" already contains a framework project. Use local path instead.`;
+            case 'DirectoryNotEmptyError':
+                return `"${e['path']}" already exists and is not empty.`;
+            case 'InvalidComponentNameError':
+                return `"${e['name']}" is not a valid component name. Use PascalCase (e.g. MyCallback).`;
+            case 'ComponentAlreadyExistsError':
+                return `Component directory already exists: ${e['path']}`;
+            default:
+                try {
+                    return `Error: ${JSON.stringify(e, (_k, v) => v instanceof Error ? { message: v.message, name: v.name } : v)}`;
+                }
+                catch {
+                    return `Error: ${String(e)}`;
+                }
+        }
+    }
+    return `Unexpected error: ${Cause.pretty(cause)}`;
+}
+const toolLayer = Layer.mergeAll(GithubReleaseLayer, NodeContext.layer);
+const catchToolErrors = (effect) => effect.pipe(Effect.provide(toolLayer), Effect.catchAll((err) => Effect.fail(formatError(Cause.fail(err)))));
+// ── Tool definitions ─────────────────────────────────────────────────────────
+const InitTool = Tool.make('init', {
+    description: 'Bootstrap a new Ping Login Widget / Login App project from a GitHub release or local path.',
+    parameters: {
+        directory: Schema.String.annotations({
+            description: 'Directory to initialize the project in (e.g. "my-project" or "./")',
+        }),
+        version: Schema.optional(Schema.String).annotations({
+            description: 'Framework Git release tag to download (e.g. @forgerock/login-widget@2.1.0 or v1.2.0). Defaults to main.',
+        }),
+        local: Schema.optional(Schema.String).annotations({
+            description: 'Path to a local framework directory instead of downloading from GitHub.',
+        }),
+    },
+    success: Schema.String,
+    failure: Schema.String,
+})
+    .annotate(Tool.Destructive, true)
+    .annotate(Tool.OpenWorld, true)
+    .annotate(Tool.Idempotent, false);
+const directoryParam = Schema.optional(Schema.String).annotations({
+    description: 'Absolute path to the initialized project root. Defaults to the current working directory.',
+});
+const GenerateCallbackTool = Tool.make('generate_callback', {
+    description: 'Scaffold a new custom callback component under experimental/custom/callbacks/. Run from an initialized project root.',
+    parameters: {
+        name: Schema.String.annotations({
+            description: 'PascalCase component name (e.g. MyCallback). Must match the AM callback type string.',
+        }),
+        directory: directoryParam,
+    },
+    success: Schema.String,
+    failure: Schema.String,
+})
+    .annotate(Tool.Destructive, true)
+    .annotate(Tool.OpenWorld, false)
+    .annotate(Tool.Idempotent, false);
+const GenerateStageTool = Tool.make('generate_stage', {
+    description: 'Scaffold a new custom stage component under experimental/custom/stages/. Run from an initialized project root.',
+    parameters: {
+        name: Schema.String.annotations({
+            description: 'Stage name as configured on the AM journey Page Node (e.g. "DefaultLogin" or "My Login Stage").',
+        }),
+        directory: directoryParam,
+    },
+    success: Schema.String,
+    failure: Schema.String,
+})
+    .annotate(Tool.Destructive, true)
+    .annotate(Tool.OpenWorld, false)
+    .annotate(Tool.Idempotent, false);
+const UpdateTool = Tool.make('update', {
+    description: 'Fetch the latest (or specified) framework version and overwrite core files while preserving experimental/custom/. Run from an initialized project root.',
+    parameters: {
+        directory: directoryParam,
+        version: Schema.optional(Schema.String).annotations({
+            description: 'Framework Git release tag to update to (e.g. @forgerock/login-widget@2.1.0 or v1.2.0). Defaults to main.',
+        }),
+        local: Schema.optional(Schema.String).annotations({
+            description: 'Path to a local framework directory instead of downloading from GitHub.',
+        }),
+    },
+    success: Schema.String,
+    failure: Schema.String,
+})
+    .annotate(Tool.Destructive, true)
+    .annotate(Tool.OpenWorld, true)
+    .annotate(Tool.Idempotent, false);
+const ListReleasesTool = Tool.make('list_releases', {
+    description: 'List available Login Framework releases from GitHub.',
+    parameters: {},
+    success: Schema.String,
+    failure: Schema.String,
+})
+    .annotate(Tool.Readonly, true)
+    .annotate(Tool.Destructive, false)
+    .annotate(Tool.OpenWorld, true)
+    .annotate(Tool.Idempotent, true);
+// ── Exported toolkit (used in tests) ─────────────────────────────────────────
+export const mcpToolkit = Toolkit.make(InitTool, GenerateCallbackTool, GenerateStageTool, UpdateTool, ListReleasesTool);
+// ── Tool handlers ─────────────────────────────────────────────────────────────
+const handlerLayer = mcpToolkit.toLayer({
+    init: ({ directory, version: ver, local }) => catchToolErrors(initProject({
+        directory,
+        version: Option.fromNullable(ver),
+        local: Option.fromNullable(local),
+    }).pipe(Effect.map(() => `Project initialized successfully in "${directory}".`))),
+    generate_callback: ({ name, directory }) => catchToolErrors(scaffoldComponent('callback', name, directory).pipe(Effect.map(() => `Callback component "${name}" scaffolded successfully.`))),
+    generate_stage: ({ name, directory }) => catchToolErrors(scaffoldComponent('stage', name, directory).pipe(Effect.map(() => `Stage component "${name}" scaffolded successfully.`))),
+    update: ({ version: ver, local, directory }) => catchToolErrors(Effect.gen(function* () {
+        const cwd = resolve(expandTilde(directory ?? process.cwd()));
+        const currentVersion = yield* assertValidProject(cwd);
+        const resolvedVersion = yield* Effect.scoped(Effect.gen(function* () {
+            const { sourceDir, resolvedVersion } = yield* resolveSource(Option.fromNullable(local), Option.fromNullable(ver), cwd);
+            yield* copyWithExclusions(sourceDir, cwd);
+            return resolvedVersion;
+        }));
+        yield* runRegistryScript(cwd);
+        yield* writeVersion(cwd, {
+            version: resolvedVersion,
+            generatedAt: new Date().toISOString(),
+        });
+        return `Updated from ${currentVersion.version} to ${resolvedVersion}. Run "pnpm install" if dependencies changed.`;
+    })),
+    list_releases: () => catchToolErrors(Release.pipe(Effect.flatMap((release) => release.listReleases()), Effect.map((releases) => releases.map(({ tag, publishedAt }) => `${tag.padEnd(10)} ${publishedAt}`).join('\n')))),
+});
+// ── Server layer ──────────────────────────────────────────────────────────────
+const ServerLayer = McpServer.toolkit(mcpToolkit).pipe(Layer.provide(handlerLayer), Layer.provide(Layer.mergeAll(McpServer.layerStdio({
+    name: 'ping-lf',
+    version,
+    stdin: NodeStream.stdin,
+    stdout: NodeSink.stdout,
+}), NodeContext.layer, Logger.add(Logger.prettyLogger({ stderr: true })))));
+export { ServerLayer };
+// mcpCommand is registered only so `ping-lf --help` lists `mcp` as a subcommand.
+// The actual MCP dispatch happens in main.ts via Layer.launch(ServerLayer) at the
+// top level, outside the @effect/cli command handler where Layer.launch would
+// nest a second fiber scope inside the CLI's already-running one.
+export const mcpCommand = Command.make('mcp', {}, () => Effect.void).pipe(Command.withDescription('Start as an MCP server over stdio.'));

package/dist/{services → src/services}/registry.d.ts

@@ -1,14 +1,21 @@
-import { Effect } from 'effect';
 import { FileSystem, Path } from '@effect/platform';
+import { Effect } from 'effect';
 import { RegistryScanError } from '../errors.js';
 type ComponentType = 'stage' | 'callback';
-/** Extracts names of all `export let` prop declarations from a Svelte component's `<script>` block. */
+interface ComponentEntry {
+    filePath: string;
+    name: string;
+    type: ComponentType;
+    acceptedProps: string[];
+}
+/** Extracts names of all `export let` prop declarations from a Svelte component's instance script. */
 export declare function parseAcceptedProps(content: string): string[];
 /** Parses and validates the leading `<!-- @component -->` block from a Svelte file. */
 export declare const parseComponentHeader: (filePath: string, content: string) => Effect.Effect<{
     type: ComponentType;
     name: string;
 }, RegistryScanError>;
+export declare function buildRegistryContent(path: Path.Path, registryDir: string, stageComponents: ComponentEntry[], callbackComponents: ComponentEntry[]): string;
 /**
  * Scans `experimental/custom/stages/` and `experimental/custom/callbacks/` for
  * `@component`-annotated Svelte files and writes

package/dist/{services → src/services}/registry.js

@@ -1,19 +1,26 @@
-import { Console, Effect } from 'effect';
 import { FileSystem, Path } from '@effect/platform';
+import { Console, Effect } from 'effect';
+import { parse } from 'svelte/compiler';
 import { RegistryScanError } from '../errors.js';
 // --------------------------------------------------------------------------
 // Helpers (exported for testing)
 // --------------------------------------------------------------------------
-/** Extracts names of all `export let` prop declarations from a Svelte component's `<script>` block. */
+/** Extracts names of all `export let` prop declarations from a Svelte component's instance script. */
 export function parseAcceptedProps(content) {
-    const scriptMatch = content.match(/<script[^>]*>([\s\S]*?)<\/script>/);
-    if (!scriptMatch)
-        return [];
+    const abstractSyntaxTree = parse(content, { modern: false });
     const props = [];
-    const regex = /export\s+let\s+(\w+)/g;
-    let m;
-    while ((m = regex.exec(scriptMatch[1])) !== null)
-        props.push(m[1]);
+    for (const node of abstractSyntaxTree.instance?.content.body ?? []) {
+        if (node.type !== 'ExportNamedDeclaration') {
+            continue;
+        }
+        if (node.declaration?.type === 'VariableDeclaration' && node.declaration.kind === 'let') {
+            for (const declarator of node.declaration.declarations) {
+                if (declarator.id.type === 'Identifier') {
+                    props.push(declarator.id.name);
+                }
+            }
+        }
+    }
     return props;
 }
 function toPascalCase(str) {
@@ -72,7 +79,7 @@ const scanDirectory = (fs, path, dir, expectedType) => findSvelteFiles(fs, path,
 // --------------------------------------------------------------------------
 // Registry content builder (pure)
 // --------------------------------------------------------------------------
-function buildRegistryContent(path, registryDir, stageComponents, callbackComponents) {
+export function buildRegistryContent(path, registryDir, stageComponents, callbackComponents) {
     const toEntry = (prefix) => ({ filePath, name, acceptedProps }) => {
         const relPath = path.relative(registryDir, filePath).replace(/\\/g, '/');
         const importPath = relPath.startsWith('.') ? relPath : `./${relPath}`;
@@ -111,12 +118,12 @@ function buildRegistryContent(path, registryDir, stageComponents, callbackCompon
     }
     lines.push(`export const customStageRegistry: Record<string, CustomRegistryEntry> = {`);
     for (const { varName, name, acceptedProps } of stageEntries)
-        lines.push(`  ${JSON.stringify(name)}: { component: ${varName}, acceptedProps: ${JSON.stringify(acceptedProps)} },`);
+        lines.push(`  ${JSON.stringify(name)}: { get component() { return ${varName}; }, acceptedProps: ${JSON.stringify(acceptedProps)} },`);
     lines.push(`};`);
     lines.push(``);
     lines.push(`export const customCallbackRegistry: Record<string, CustomRegistryEntry> = {`);
     for (const { varName, name, acceptedProps } of callbackEntries)
-        lines.push(`  ${JSON.stringify(name)}: { component: ${varName}, acceptedProps: ${JSON.stringify(acceptedProps)} },`);
+        lines.push(`  ${JSON.stringify(name)}: { get component() { return ${varName}; }, acceptedProps: ${JSON.stringify(acceptedProps)} },`);
     lines.push(`};`);
     lines.push(``);
     return lines.join('\n');
@@ -138,7 +145,7 @@ export const runRegistryScript = (projectDir) => Effect.gen(function* () {
     const path = yield* Path.Path;
     const stageDir = path.join(projectDir, 'experimental', 'custom', 'stages');
     const callbackDir = path.join(projectDir, 'experimental', 'custom', 'callbacks');
-    const registryDir = path.join(projectDir, 'core', 'journey', '_utilities');
+    const registryDir = path.join(projectDir, 'core', 'journey', '_utilities', 'registry');
     const registryPath = path.join(registryDir, 'custom-registry.ts');
     const [stageComponents, callbackComponents] = yield* Effect.all([
         scanDirectory(fs, path, stageDir, 'stage'),

package/dist/{services → src/services}/release.d.ts

@@ -1,6 +1,7 @@
-import { Context, Effect, Layer, Scope } from 'effect';
 import { FileSystem, HttpClient } from '@effect/platform';
+import { Context, Effect, Layer } from 'effect';
 import { InvalidVersionError, ReleaseFsError, ReleaseNetworkError, ReleaseNotFoundError, ReleaseParseError } from '../errors.js';
+import type { Scope } from 'effect';
 export declare function validateVersion(version: string): Effect.Effect<string, InvalidVersionError>;
 /**
  * Parses a GitHub releases API JSON response and returns an array of

package/dist/{services → src/services}/release.js

@@ -1,6 +1,6 @@
-import { Context, Effect, Layer, Schema } from 'effect';
 import { FileSystem, HttpClient, HttpClientResponse } from '@effect/platform';
 import { NodeHttpClient } from '@effect/platform-node';
+import { Context, Effect, Layer, Schema } from 'effect';
 import { extract } from 'tar';
 import { InvalidVersionError, ReleaseFsError, ReleaseNetworkError, ReleaseNotFoundError, ReleaseParseError, } from '../errors.js';
 const REPO = 'ForgeRock/forgerock-web-login-framework';
@@ -8,7 +8,7 @@ const API_HEADERS = {
     'User-Agent': 'ping-lf-cli',
     Accept: 'application/vnd.github.v3+json',
 };
-const VERSION_REGEX = /^v?\d+\.\d+\.\d+(-[\w.]+)?$/;
+const VERSION_REGEX = /^(?:v?\d+\.\d+\.\d+(-[\w.]+)?|@forgerock\/login-widget@\d+\.\d+\.\d+(-[\w.]+)?)$/;
 const toCauseString = (cause) => cause instanceof Error ? cause.message : String(cause);
 export function validateVersion(version) {
     return VERSION_REGEX.test(version)

package/dist/src/templates/callback/__COMPONENT_SLUG__.mock.ts

@@ -0,0 +1,22 @@
+/**
+ * Mock journey step for the __COMPONENT_NAME__ callback's Storybook stories.
+ *
+ * Replace the placeholder `type`, `output`, and `input` fields with the real
+ * AM payload your callback consumes. The shape mirrors what AM sends back from
+ * an authentication tree.
+ */
+
+import { createJourneyStep } from '$login-framework';
+
+export default createJourneyStep({
+  authId: 'test-auth-id',
+  callbacks: [
+    {
+      type: 'NameCallback',
+      output: [{ name: 'prompt', value: '__COMPONENT_NAME__ prompt' }],
+      input: [{ name: 'IDToken1', value: '' }],
+      _id: 0,
+    },
+  ],
+  stage: 'DefaultLogin',
+});

package/dist/src/templates/callback/__COMPONENT_SLUG__.stories.js

@@ -0,0 +1,28 @@
+/**
+ * Storybook stories for the __COMPONENT_NAME__ callback.
+ *
+ * Update the `getCallback` helper if your mock contains more than one callback,
+ * or add additional stories for variants (loading, error, prefilled, etc.).
+ */
+
+import step from './__COMPONENT_SLUG__.mock';
+import Story from './__COMPONENT_SLUG__.story.svelte';
+
+export default {
+  argTypes: {
+    callback: { control: false },
+  },
+  component: Story,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'Custom/Callback/__COMPONENT_NAME__',
+};
+
+const getCallback = () => step.callbacks[0];
+
+export const Base = {
+  args: {
+    callback: getCallback(),
+  },
+};

package/dist/src/templates/callback/__COMPONENT_SLUG__.story.svelte

@@ -0,0 +1,59 @@
+<!--
+  Story wrapper for the __COMPONENT_NAME__ callback. Mounts the component
+  with default metadata so it can render in isolation inside Storybook.
+-->
+
+<script lang="ts">
+  import {
+    type BaseCallback,
+    type CallbackMetadata,
+    Centered,
+    type Maybe,
+    type SelfSubmitFunction,
+    type StepMetadata,
+    type StyleObject,
+  } from '$login-framework';
+  import __COMPONENT_NAME_PASCAL__ from './__COMPONENT_SLUG__.svelte';
+
+  export let callback: BaseCallback;
+  export let callbackMetadata: Maybe<CallbackMetadata> = undefined;
+  export let style: StyleObject = {};
+  export let selfSubmitFunction: Maybe<SelfSubmitFunction> = null;
+  export let stepMetadata: Maybe<StepMetadata> = null;
+
+  const defaultCallbackMetadata: CallbackMetadata = {
+    derived: {
+      canForceUserInputOptionality: false,
+      isFirstInvalidInput: false,
+      isReadyForSubmission: false,
+      isSelfSubmitting: false,
+      isUserInputRequired: true,
+      autocompleteValues: undefined,
+    },
+    idx: 0,
+  };
+
+  const defaultStepMetadata: StepMetadata = {
+    derived: {
+      isStepSelfSubmittable: () => false,
+      isUserInputOptional: false,
+      numOfCallbacks: 1,
+      numOfSelfSubmittableCbs: 0,
+      numOfUserInputCbs: 1,
+    },
+  };
+
+  $: mergedCallbackMetadata = { ...defaultCallbackMetadata, ...callbackMetadata };
+  $: mergedStepMetadata = stepMetadata ?? defaultStepMetadata;
+</script>
+
+<Centered>
+  <svelte:component
+    this={__COMPONENT_NAME_PASCAL__}
+    {callback}
+    callbackMetadata={mergedCallbackMetadata}
+    {style}
+    {selfSubmitFunction}
+    stepMetadata={mergedStepMetadata}
+  />
+</Centered>

package/dist/src/templates/callback/__COMPONENT_SLUG__.svelte

@@ -0,0 +1,49 @@
+<!--
+@component
+Type: callback
+Name: __COMPONENT_NAME__
+
+Custom callback component. Replace this description with your own.
+-->
+
+<script lang="ts">
+  import type { BaseCallback } from '@forgerock/journey-client/types';
+
+  /**
+   * The callback instance for this component. Use `callback.getInputValue()`
+   * and `callback.setInputValue()` to read/write values sent back to the server.
+   */
+  export let callback: BaseCallback;
+
+  // Optionally declare any of these if your component needs them:
+  // import type { CallbackMetadata, Maybe, SelfSubmitFunction, StepMetadata, StyleObject } from '$login-framework';
+  // export let selfSubmitFunction: Maybe<SelfSubmitFunction> = null;
+  // export let stepMetadata: Maybe<StepMetadata> = null;
+  // export let callbackMetadata: Maybe<CallbackMetadata> = null;
+  // export let style: StyleObject = {};
+
+  // Suppress the "unused export" warning — remove `void` once you use `callback`.
+  void callback;
+</script>
+
+<!-- Replace the markup below with your custom callback UI. -->
+<div
+  class="__COMPONENT_SLUG__ tw_p-4 tw_rounded-lg tw_border tw_border-secondary-light dark:tw_border-secondary-dark"
+>
+  <p class="tw_text-base tw_text-secondary-dark dark:tw_text-secondary-light">
+    __COMPONENT_NAME__ callback — replace this with your implementation.
+  </p>
+</div>
+
+<!--
+  Scoped styles for this callback.
+  These styles only apply to this component — they won't leak to the rest of the widget.
+  You can also use Tailwind utility classes (prefixed with `tw_`) in the markup above.
+-->
+<style>
+  .__COMPONENT_SLUG__ {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+</style>

package/dist/src/templates/callback/__COMPONENT_SLUG__.utilities.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from 'vitest';
+
+import { format__COMPONENT_NAME_PASCAL__Label } from './__COMPONENT_SLUG__.utilities.js';
+
+describe('__COMPONENT_NAME__ utilities', () => {
+  it('trims whitespace from label', () => {
+    expect(format__COMPONENT_NAME_PASCAL__Label('  hello  ')).toBe('hello');
+  });
+});

package/dist/{templates → src/templates}/callback/__COMPONENT_SLUG__.utilities.ts

@@ -8,6 +8,6 @@
 /**
  * Example utility — replace with your own helpers.
  */
-export function format__COMPONENT_NAME__Label(value: string): string {
+export function format__COMPONENT_NAME_PASCAL__Label(value: string): string {
   return value.trim();
 }

package/dist/src/templates/stage/__COMPONENT_SLUG__.mock.ts

@@ -0,0 +1,23 @@
+/**
+ * Mock journey step for the __COMPONENT_NAME__ stage's Storybook stories.
+ *
+ * A stage receives a full JourneyStep with one or more callbacks. Replace the
+ * placeholder callback entries below with the real shape AM sends for the
+ * page node this stage renders. Add more callbacks if your stage composes
+ * multiple inputs.
+ */
+
+import { createJourneyStep } from '$login-framework';
+
+export default createJourneyStep({
+  authId: 'test-auth-id',
+  callbacks: [
+    {
+      type: 'NameCallback',
+      output: [{ name: 'prompt', value: 'User Name' }],
+      input: [{ name: 'IDToken1', value: '' }],
+      _id: 0,
+    },
+  ],
+  stage: '__COMPONENT_NAME__',
+});

package/dist/src/templates/stage/__COMPONENT_SLUG__.stories.js

@@ -0,0 +1,43 @@
+/**
+ * Storybook stories for the __COMPONENT_NAME__ stage.
+ *
+ * Add additional stories for variants (loading, with form error, etc.) by
+ * cloning the `Base` args and overriding the relevant fields.
+ */
+
+import { fn } from 'storybook/test';
+import { writable } from 'svelte/store';
+
+import step from './__COMPONENT_SLUG__.mock';
+import Story from './__COMPONENT_SLUG__.story.svelte';
+
+export default {
+  argTypes: {
+    form: { control: false },
+    journey: { control: false },
+    step: { control: false },
+  },
+  component: Story,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'Custom/Stage/__COMPONENT_NAME__',
+};
+
+export const Base = {
+  args: {
+    form: {
+      icon: true,
+      message: '',
+      status: '',
+      submit: fn(),
+    },
+    journey: {
+      loading: false,
+      pop: fn(),
+      push: fn(),
+      stack: writable([]),
+    },
+    step,
+  },
+};

package/dist/src/templates/stage/__COMPONENT_SLUG__.story.svelte

@@ -0,0 +1,47 @@
+<!--
+  Story wrapper for the __COMPONENT_NAME__ stage. Builds the metadata structure
+  the stage expects and mounts the component inside <Centered> so it can render
+  in isolation inside Storybook.
+-->
+
+<script lang="ts">
+  import {
+    buildCallbackMetadata,
+    buildStepMetadata,
+    Centered,
+    initCheckValidation,
+    initializeLinks,
+    initializeStyles,
+    type JourneyStep,
+    type StageFormObject,
+    type StageJourneyObject,
+    type StyleObject,
+  } from '$login-framework';
+  import __COMPONENT_NAME_PASCAL__ from './__COMPONENT_SLUG__.svelte';
+
+  export let form: StageFormObject;
+  export let journey: StageJourneyObject;
+  export let step: JourneyStep;
+  export let style: StyleObject = {};
+
+  const callbackMetadata = buildCallbackMetadata(step, initCheckValidation());
+  const stepMetadata = buildStepMetadata(callbackMetadata, undefined, step.getStage());
+  const metadata = {
+    callbacks: callbackMetadata,
+    step: stepMetadata,
+  };
+
+  initializeLinks({ termsAndConditions: '/' });
+  initializeStyles(style);
+</script>
+
+<Centered>
+  <svelte:component
+    this={__COMPONENT_NAME_PASCAL__}
+    componentStyle="modal"
+    {form}
+    {journey}
+    {metadata}
+    {step}
+  />
+</Centered>