@histoire/shared 0.13.1 → 0.14.0

package/dist/types/command.d.ts

@@ -0,0 +1,35 @@
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import type { Prompt } from './prompt.js';
+import type { Story, Variant } from './story.js';
+export interface CommonCommandOptions {
+    icon?: string;
+    searchText?: string;
+    prompts?: Prompt[];
+}
+export interface Command extends CommonCommandOptions {
+    id: string;
+    label: string;
+}
+export interface ClientCommandOptions extends CommonCommandOptions {
+    showIf?: (ctx: ClientCommandContext) => boolean;
+    getParams?: (ctx: ClientCommandContext & {
+        answers?: Record<string, any>;
+    }) => Record<string, any>;
+    clientAction?: (params: Record<string, any>, ctx: ClientCommandContext) => unknown;
+}
+/**
+ * A command that can be executed from the search bar.
+ */
+export type ClientCommand = Command & ClientCommandOptions;
+export interface ClientCommandContext {
+    route: RouteLocationNormalizedLoaded;
+    currentStory: Story;
+    currentVariant: Variant;
+}
+export interface PluginCommand<TParams = Record<string, any>> extends Command {
+    serverAction?: (params: TParams) => unknown;
+    clientSetupFile?: string | {
+        file: string;
+        importName: string;
+    };
+}

package/dist/types/command.js

@@ -0,0 +1 @@
+export {};

package/dist/types/config.d.ts

@@ -107,6 +107,18 @@ export interface HistoireConfig {
          * Add a link to the main logo
          */
         logoHref?: string;
+        /**
+         * Default color scheme for the app.
+         */
+        defaultColorScheme?: 'light' | 'dark' | 'auto';
+        /**
+         * Hides the dark mode button in the toolbar.
+         */
+        hideColorSchemeSwitch?: boolean;
+        /**
+         * Enable persistence of the color scheme in the browser.
+         */
+        storeColorScheme?: boolean;
     };
     /**
      * Setup file exporting a default function executed when setting up each story preview.

package/dist/types/index.d.ts

@@ -1,3 +1,5 @@
+export * from './command.js';
 export * from './config.js';
 export * from './plugin.js';
+export * from './prompt.js';
 export * from './story.js';

package/dist/types/index.js

@@ -1,3 +1,5 @@
+export * from './command.js';
 export * from './config.js';
 export * from './plugin.js';
+export * from './prompt.js';
 export * from './story.js';

package/dist/types/plugin.d.ts

@@ -4,6 +4,8 @@ import type pc from 'picocolors';
 import type chokidar from 'chokidar';
 import type { ServerStoryFile, ServerStory, ServerVariant } from './story.js';
 import type { HistoireConfig, ConfigMode } from './config.js';
+import type { PluginCommand } from './command.js';
+import type { Awaitable } from '../type-utils.js';
 export interface SupportPlugin {
     id: string;
     moduleName: string;
@@ -27,7 +29,9 @@ export interface PluginApiBase {
     log: (...msg: any[]) => void;
     warn: (...msg: any[]) => void;
     error: (...msg: any[]) => void;
+    getStories(): ServerStory[];
     addStoryFile: (file: string) => void;
+    getConfig(): HistoireConfig;
 }
 export interface PluginApiDev extends PluginApiBase {
     watcher: typeof chokidar;
@@ -45,6 +49,10 @@ export interface PluginApiBuild extends PluginApiBase {
     onBuildEnd: (cb: BuildEndCallback) => void;
     onPreviewStory: (cb: PreviewStoryCallback) => void;
 }
+export interface PluginApiDevEvent extends PluginApiBase {
+    event: string;
+    payload: any;
+}
 export interface Plugin {
     /**
      * Name of the plugin
@@ -85,4 +93,12 @@ export interface Plugin {
      * This plugin exposes a support plugin (example: Vue, Svelte, etc.)
      */
     supportPlugin?: SupportPlugin;
+    /**
+     * This plugin exposes commands that can be executed from the search bar in development mode.
+     */
+    commands?: PluginCommand[];
+    /**
+     * Handle a custom event from the client in development mode.
+     */
+    onDevEvent?: (api: PluginApiDevEvent) => Awaitable<any>;
 }

package/dist/types/prompt.d.ts

@@ -0,0 +1,19 @@
+import { Awaitable } from '../type-utils.js';
+export interface PromptBase<TValue> {
+    field: string;
+    label: string;
+    required?: boolean;
+    defaultValue?: TValue | ((answers: Record<string, any>) => TValue);
+}
+export interface TextPrompt extends PromptBase<string> {
+    type: 'text';
+}
+export type SelectPromptOption = string | {
+    value: string;
+    label: string;
+};
+export interface SelectPrompt extends PromptBase<string> {
+    type: 'select';
+    options: SelectPromptOption[] | ((search: string, answers: Record<string, any>) => Awaitable<SelectPromptOption[]>);
+}
+export type Prompt<TValue = any> = TextPrompt | SelectPrompt;

package/dist/types/prompt.js

@@ -0,0 +1 @@
+export {};

package/dist/types/story.d.ts

@@ -5,6 +5,7 @@ export interface StoryFile {
     story: Story;
     path: string[];
     filePath: string;
+    docsFilePath?: string;
     source: () => Promise<{
         default: string;
     }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/shared",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Shared utilities for Histoire",
   "license": "MIT",
   "author": {
@@ -25,6 +25,7 @@
   "types": "./dist/index.d.ts",
   "sideEffects": false,
   "dependencies": {
+    "@histoire/vendors": "^0.14.0",
     "@types/fs-extra": "^9.0.13",
     "@types/markdown-it": "^12.2.3",
     "chokidar": "^3.5.3",

package/src/types/command.ts

@@ -0,0 +1,38 @@
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import type { Prompt } from './prompt.js'
+import type { Story, Variant } from './story.js'
+
+export interface CommonCommandOptions {
+  icon?: string
+  searchText?: string
+  prompts?: Prompt[]
+}
+
+export interface Command extends CommonCommandOptions {
+  id: string
+  label: string
+}
+
+export interface ClientCommandOptions extends CommonCommandOptions {
+  showIf?: (ctx: ClientCommandContext) => boolean
+  getParams?: (ctx: ClientCommandContext & { answers?: Record<string, any> }) => Record<string, any>
+  clientAction?: (params: Record<string, any>, ctx: ClientCommandContext) => unknown
+}
+
+/**
+ * A command that can be executed from the search bar.
+ */
+export type ClientCommand = Command & ClientCommandOptions
+
+export interface ClientCommandContext {
+  route: RouteLocationNormalizedLoaded
+  currentStory: Story
+  currentVariant: Variant
+}
+
+export interface PluginCommand<
+  TParams = Record<string, any>
+> extends Command {
+  serverAction?: (params: TParams) => unknown // @TODO ctx
+  clientSetupFile?: string | { file: string, importName: string }
+}

package/src/types/config.ts

@@ -116,6 +116,18 @@ export interface HistoireConfig {
      * Add a link to the main logo
      */
     logoHref?: string
+    /**
+     * Default color scheme for the app.
+     */
+    defaultColorScheme?: 'light' | 'dark' | 'auto'
+    /**
+     * Hides the dark mode button in the toolbar.
+     */
+    hideColorSchemeSwitch?: boolean
+    /**
+     * Enable persistence of the color scheme in the browser.
+     */
+    storeColorScheme?: boolean
   }
   /**
    * Setup file exporting a default function executed when setting up each story preview.

package/src/types/index.ts

@@ -1,3 +1,5 @@
+export * from './command.js'
 export * from './config.js'
 export * from './plugin.js'
+export * from './prompt.js'
 export * from './story.js'

package/src/types/plugin.ts

@@ -11,6 +11,10 @@ import type {
   HistoireConfig,
   ConfigMode,
 } from './config.js'
+import type {
+  PluginCommand,
+} from './command.js'
+import type { Awaitable } from '../type-utils.js'
 
 export interface SupportPlugin {
   id: string
@@ -42,7 +46,10 @@ export interface PluginApiBase {
   warn: (...msg) => void
   error: (...msg) => void
 
+  getStories (): ServerStory[]
   addStoryFile: (file: string) => void
+
+  getConfig (): HistoireConfig
 }
 
 export interface PluginApiDev extends PluginApiBase {
@@ -60,6 +67,11 @@ export interface PluginApiBuild extends PluginApiBase {
   onPreviewStory: (cb: PreviewStoryCallback) => void
 }
 
+export interface PluginApiDevEvent extends PluginApiBase {
+  event: string
+  payload: any
+}
+
 export interface Plugin {
   /**
    * Name of the plugin
@@ -100,4 +112,12 @@ export interface Plugin {
    * This plugin exposes a support plugin (example: Vue, Svelte, etc.)
    */
   supportPlugin?: SupportPlugin
+  /**
+   * This plugin exposes commands that can be executed from the search bar in development mode.
+   */
+  commands?: PluginCommand[]
+  /**
+   * Handle a custom event from the client in development mode.
+   */
+  onDevEvent?: (api: PluginApiDevEvent) => Awaitable<any>
 }

package/src/types/prompt.ts

@@ -0,0 +1,22 @@
+import { Awaitable } from '../type-utils.js'
+
+export interface PromptBase<TValue> {
+  field: string
+  label: string
+  required?: boolean
+  defaultValue?: TValue | ((answers: Record<string, any>) => TValue)
+}
+
+export interface TextPrompt extends PromptBase<string> {
+  type: 'text'
+}
+
+export type SelectPromptOption = string | { value: string, label: string }
+
+export interface SelectPrompt extends PromptBase<string> {
+  type: 'select'
+  options: SelectPromptOption[] | ((search: string, answers: Record<string, any>) => Awaitable<SelectPromptOption[]>)
+}
+
+export type Prompt<TValue = any> = TextPrompt
+| SelectPrompt

package/src/types/story.ts

@@ -5,6 +5,7 @@ export interface StoryFile {
   story: Story
   path: string[]
   filePath: string
+  docsFilePath?: string
   source: () => Promise<{ default: string }>
 }
 

package/tsconfig.json

@@ -5,6 +5,7 @@
     "moduleResolution": "node",
     "outDir": "dist",
     "rootDir": "src",
+    "baseUrl": ".",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "removeComments": false,
@@ -24,6 +25,16 @@
     "strictFunctionTypes": true,
     // Volar
     "jsx": "preserve",
+    // Alias
+    "paths": {
+      "floating-vue": ["node_modules/@histoire/vendors/floating-vue"],
+      "@iconify/vue": ["node_modules/@histoire/vendors/iconify"],
+      "pinia": ["node_modules/@histoire/vendors/pinia"],
+      "scroll-into-view-if-needed": ["node_modules/@histoire/vendors/scroll"],
+      "vue-router": ["node_modules/@histoire/vendors/vue-router"],
+      "@vueuse/core": ["node_modules/@histoire/vendors/vue-use"],
+      "vue": ["node_modules/@histoire/vendors/vue"]
+    }
   },
   "include": [
     "src"