@poveste/plugin-vue 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 Guillaume Chau (original "histoire" project)
+Copyright (c) 2026 Sorin Gitlan (poveste fork)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/client.d.ts

@@ -0,0 +1,2 @@
+// https://github.com/microsoft/TypeScript/issues/33079
+export * from './dist/client/client'

package/collect.d.ts

@@ -0,0 +1,2 @@
+// https://github.com/microsoft/TypeScript/issues/33079
+export * from './dist/client/server'

package/components.d.ts

@@ -0,0 +1,239 @@
+/* eslint-disable @typescript-eslint/ban-types */
+
+import type {
+  StoryLayout,
+  Story,
+  Variant,
+  StoryMeta,
+  VariantMeta,
+} from '@poveste/shared'
+import type {
+  HstButton,
+  HstButtonGroup,
+  HstCheckbox,
+  HstCheckboxList,
+  HstText,
+  HstNumber,
+  HstSlider,
+  HstTextarea,
+  HstSelect,
+  HstRadio,
+  HstJson,
+  HstColorShades,
+  HstTokenList,
+  HstTokenGrid,
+  HstCopyIcon,
+  HstColorSelect,
+} from '@poveste/controls'
+
+// Utils
+
+declare type NonUndefinedable<T> = T extends undefined ? never : T
+declare type TypePropsToRuntimeProps<T> = {
+  [K in keyof T]-?: {} extends Pick<T, K> ? {
+    type: import('vue').PropType<NonUndefinedable<T[K]>>
+  } : {
+    type: import('vue').PropType<T[K]>
+    required: true
+  }
+}
+
+// <Story>
+
+interface VueStoryProps {
+  /**
+   * Title of the story.
+   */
+  title?: string
+  /**
+   * Id of the story used in the URL. By default, the id is automatically generated from the file path. Setting an id manually will ensure the URL parameter doesn't change with the order of the variants in the story.
+   */
+  id?: string
+  /**
+   * Layout of the story.
+   */
+  layout?: StoryLayout
+  /**
+   * A function to configure the Vue application. This will be the default for the variants in the story.
+   */
+  setupApp?: (payload: { app: import('vue').App, story: Story, variant: Variant }) => void | Promise<void>
+  /**
+   * The id of a group to include the story in.
+   */
+  group?: string
+  /**
+   * An Iconify id to customize the story icon in the tree.
+   * https://icones.js.org/
+   */
+  icon?: string
+  /**
+   * The icon color.
+   * Example: `#8B5CF6`
+   */
+  iconColor?: string
+  /**
+   * This story will only render a documentation page.
+   */
+  docsOnly?: boolean
+  /**
+   * The copyable source code of the story.
+   */
+  source?: string
+  /**
+   * Disables the responsive menu, preview resize handles and makes the preview laways fit the available space.
+   */
+  responsiveDisabled?: boolean
+  /**
+   * Free form meta data.
+   *
+   * You can type it with:
+   *
+   * ```ts
+   * declare module 'poveste' {
+   *    // For both Story and Variant
+   *    interface CommonMeta {
+   *     myMeta: string
+   *    }
+   *
+   *   // Only for Story
+   *   interface StoryMeta {
+   *     myMeta: string
+   *   }
+   * }
+   * ```
+   */
+  meta?: StoryMeta
+}
+
+type VueStoryComponent = import('vue').DefineComponent<
+TypePropsToRuntimeProps<VueStoryProps>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<TypePropsToRuntimeProps<VueStoryProps>>> & {}, import('vue').ExtractDefaultPropTypes<TypePropsToRuntimeProps<VueStoryProps>>, import('vue').SlotsType
+>
+
+interface VueStoryPropsGeneric<S extends Record<string, any>> {
+  initState?: () => S
+}
+
+interface VueStoryInternalPropsGeneric<S extends Record<string, any>> {
+  readonly $props: {
+    /**
+     * Function that returns the intial state. Will be used as default value for variants.
+     */
+    initState?: () => S
+  }
+  readonly $slots: {
+    default: import('vue').Slot<{ state: S }>
+    controls: import('vue').Slot<{ state: S }>
+  }
+}
+
+type VueStoryComponentGeneric = new <S extends Record<string, any> = Record<string, any>>(props: VueStoryPropsGeneric<S>) => VueStoryInternalPropsGeneric<S>;
+
+declare const VueStoryComponent: VueStoryComponent & VueStoryComponentGeneric
+
+declare const MeowVueStoryComponent: import('vue').Component<TypePropsToRuntimeProps<VueStoryProps>>
+
+// <Variant>
+
+interface VueVariantProps {
+  /**
+   * Title of the variant.
+   */
+  title?: string
+  /**
+   * Id of the variant used in the URL. By default, the id is automatically generated with the index of the variant in the list. Setting an id manually will ensure the URL parameter doesn't change with the order of the variants in the story.
+   */
+  id?: string
+  /**
+   * A function to configure the Vue application.
+   */
+  setupApp?: (payload: { app: import('vue').App, story: Story, variant: Variant }) => void | Promise<void>
+  /**
+   * An Iconify id to customize the variant icon in the UI.
+   * https://icones.js.org/
+   */
+  icon?: string
+  /**
+   * The icon color.
+   * Example: `#8B5CF6`
+   */
+  iconColor?: string
+  /**
+   * The copyable source code of the variant.
+   */
+  source?: string
+  /**
+   * Disables the responsive menu, preview resize handles and makes the preview laways fit the available space.
+   */
+  responsiveDisabled?: boolean
+  /**
+   * Free form meta data.
+   *
+   * You can type it with:
+   *
+   * ```ts
+   * declare module 'poveste' {
+   *    // For both Story and Variant
+   *    interface CommonMeta {
+   *     myMeta: string
+   *    }
+   *
+   *   // Only for Variant
+   *   interface VariantMeta {
+   *     myMeta: string
+   *   }
+   * }
+   * ```
+   */
+  variant?: VariantMeta
+}
+
+type VueVariantComponent = import('vue').DefineComponent<
+TypePropsToRuntimeProps<VueVariantProps>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<TypePropsToRuntimeProps<VueVariantProps>>> & {}, import('vue').ExtractDefaultPropTypes<TypePropsToRuntimeProps<VueStoryProps>>, import('vue').SlotsType
+>
+
+interface VueVariantPropsGeneric<S extends Record<string, any>> {
+  initState?: () => S
+}
+
+interface VueVariantInternalPropsGeneric<S extends Record<string, any>> {
+  readonly $props: {
+    /**
+     * Function that returns the intial state.
+     */
+    initState?: () => S
+  }
+  readonly $slots: {
+    default: import('vue').Slot<{ state: S }>
+    controls: import('vue').Slot<{ state: S }>
+  }
+}
+
+type VueVariantComponentGeneric = new <S extends Record<string, any> = Record<string, any>>(props: VueVariantPropsGeneric<S>) => VueVariantInternalPropsGeneric<S>;
+
+declare const VueVariantComponent: VueVariantComponent & VueVariantComponentGeneric
+
+// Register global components
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    Story: typeof VueStoryComponent
+    Variant: typeof VueVariantComponent
+    // Controls
+    HstButton: typeof HstButton
+    HstButtonGroup: typeof HstButtonGroup
+    HstCheckbox: typeof HstCheckbox
+    HstCheckboxList: typeof HstCheckboxList
+    HstText: typeof HstText
+    HstNumber: typeof HstNumber
+    HstSlider: typeof HstSlider
+    HstTextarea: typeof HstTextarea
+    HstSelect: typeof HstSelect
+    HstRadio: typeof HstRadio
+    HstJson: typeof HstJson
+    HstColorShades: typeof HstColorShades
+    HstTokenList: typeof HstTokenList
+    HstTokenGrid: typeof HstTokenGrid
+    HstCopyIcon: typeof HstCopyIcon
+    HstColorSelect: typeof HstColorSelect
+  }
+}

package/dist/bundled/client/app/MountStory.js

@@ -0,0 +1,55 @@
+import { defineComponent as i, h as l, ref as m, watch as a, onMounted as s, onUnmounted as c } from "@poveste/vendors/vue";
+import { reactive as y } from "vue";
+import { createPreviewHost as d } from "./host.js";
+const v = i({
+  name: "MountStory",
+  props: {
+    story: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(e) {
+    const n = m(), u = y({
+      mode: "mount",
+      slotName: "default",
+      currentVariant: null,
+      externalState: null,
+      nextVariantIndex: {
+        value: 0
+      }
+    });
+    let t;
+    async function o() {
+      t = d({
+        name: "MountStorySubApp",
+        el: n.value,
+        getStory: () => e.story,
+        getVariant: () => null,
+        renderContext: u
+      }), await t.mount();
+    }
+    function r() {
+      t?.unmount(), t = null;
+    }
+    return a(() => e.story.id, async () => {
+      r(), await o();
+    }), s(async () => {
+      await o();
+    }), a(() => e.story.variants, () => {
+      t?.forceUpdate();
+    }), c(() => {
+      r();
+    }), {
+      el: n
+    };
+  },
+  render() {
+    return l("div", {
+      ref: "el"
+    });
+  }
+});
+export {
+  v as default
+};

package/dist/bundled/client/app/RenderStory.js

@@ -0,0 +1,74 @@
+import { defineComponent as v, h as S, ref as x, onMounted as V, watch as c, onBeforeUnmount as g } from "@poveste/vendors/vue";
+import { reactive as m } from "vue";
+import { createPreviewHost as N } from "./host.js";
+import { syncStateBundledAndExternal as l } from "./util.js";
+const j = v({
+  name: "RenderStory",
+  props: {
+    variant: {
+      type: Object,
+      required: !0
+    },
+    story: {
+      type: Object,
+      required: !0
+    },
+    slotName: {
+      type: String,
+      default: "default"
+    }
+  },
+  emits: {
+    ready: () => !0
+  },
+  setup(t, { emit: f }) {
+    const o = x();
+    let e, n = !1;
+    const r = m({});
+    let i = l(t.variant.state, r);
+    const a = m({
+      mode: "render",
+      slotName: t.slotName,
+      currentVariant: t.variant,
+      externalState: r,
+      nextVariantIndex: {
+        value: 0
+      }
+    });
+    function u() {
+      e?.unmount(), e = null;
+    }
+    function s() {
+      i?.stop(), i = l(t.variant.state, r);
+    }
+    async function d() {
+      n || (n = !0, u(), a.currentVariant = t.variant, a.slotName = t.slotName, e = N({
+        name: "RenderStorySubApp",
+        el: o.value,
+        getStory: () => t.story,
+        getVariant: () => t.variant,
+        renderContext: a,
+        wrapInDiv: !0
+      }), await e.mount(), n = !1, f("ready"));
+    }
+    return V(async () => {
+      t.variant.configReady && await d();
+    }), c(() => t.variant, () => {
+      a.currentVariant = t.variant, s();
+    }), c(() => [t.story.id, t.slotName, t.variant.id, t.variant.configReady], async ([, y]) => {
+      a.currentVariant = t.variant, a.slotName = y, t.variant.configReady && !n && (e ? e.forceUpdate() : await d());
+    }), g(() => {
+      i?.stop(), u();
+    }), {
+      sandbox: o
+    };
+  },
+  render() {
+    return S("div", {
+      ref: "sandbox"
+    });
+  }
+});
+export {
+  j as default
+};

package/dist/bundled/client/app/RouterLinkStub.js

@@ -0,0 +1,40 @@
+import { defineComponent as r, computed as e, h as a } from "vue";
+const s = {
+  path: "/",
+  name: void 0,
+  redirectedFrom: void 0,
+  params: {},
+  query: {},
+  hash: "",
+  fullPath: "/",
+  matched: [],
+  meta: {},
+  href: "/"
+}, n = r({
+  name: "RouterLinkStub",
+  compatConfig: { MODE: 3 },
+  props: {
+    to: {
+      type: [String, Object],
+      required: !0
+    },
+    custom: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  render() {
+    const t = e(() => s), o = this.$slots?.default?.({
+      route: t,
+      href: e(() => t.value.href),
+      isActive: e(() => !1),
+      isExactActive: e(() => !1),
+      navigate: async () => {
+      }
+    });
+    return this.custom ? o : a("a", void 0, o);
+  }
+});
+export {
+  n as RouterLinkStub
+};

package/dist/bundled/client/app/Story.js

@@ -0,0 +1,112 @@
+import { omitInheritStoryProps as g } from "@poveste/shared";
+import { defineComponent as j, h as $, getCurrentInstance as C, useAttrs as O, computed as P, provide as h, reactive as _, isRef as S, cloneVNode as A } from "vue";
+import { useRenderContext as I } from "./render-context.js";
+import R from "./Variant.js";
+const F = j({
+  name: "Story",
+  __histoireType: "story",
+  inheritAttrs: !1,
+  props: {
+    initState: {
+      type: Function,
+      default: void 0
+    },
+    meta: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(c) {
+    const a = C(), n = O(), p = I(), y = P(() => n.story);
+    h("story", y);
+    const i = a.parent, d = _({});
+    Object.defineProperty(d, "$data", {
+      enumerable: !0,
+      configurable: !0,
+      get: () => i.data,
+      set: (t) => {
+        Object.assign(i.data, t);
+      }
+    });
+    function l(t, o) {
+      const f = t[o];
+      typeof f == "function" || f?.__file || typeof f?.render == "function" || typeof f?.setup == "function" || Object.defineProperty(d, o, {
+        enumerable: !0,
+        configurable: !0,
+        get: () => {
+          const r = t[o];
+          return S(r) ? r.value : r;
+        },
+        set: (r) => {
+          const e = t[o];
+          S(e) ? e.value = r : e && typeof e == "object" && r && typeof r == "object" ? Object.assign(e, r) : t[o] = r;
+        }
+      });
+    }
+    for (const t in i.exposed)
+      l(i.exposed, t);
+    for (const t in i.devtoolsRawSetupState)
+      l(i.devtoolsRawSetupState, t);
+    for (const t in i.data)
+      l(i.data, t);
+    h("implicitState", () => d);
+    function v() {
+      c.meta && (n.story.meta || (n.story.meta = {}), Object.assign(n.story.meta, c.meta)), Object.assign(n.story, {
+        slots: () => a.proxy.$slots
+      });
+    }
+    return {
+      renderContext: p,
+      story: y,
+      renderMountStory: x,
+      renderPreviewStory: b,
+      updateStory: v
+    };
+    function x() {
+      let t = 0;
+      const o = (f) => {
+        const r = [];
+        for (const e of f) {
+          if (e.type?.__histoireType === "variant") {
+            const m = n.story.variants[t];
+            if (t++, !m)
+              continue;
+            const u = {
+              variant: m
+            };
+            !e.props?.initState && !e.props?.["init-state"] && (u.initState = c.initState);
+            for (const s in a.proxy.$attrs)
+              typeof e.props?.[s] > "u" && (u[s] = a.proxy.$attrs[s]);
+            for (const s in n.story)
+              !g.includes(s) && typeof e.props?.[s] > "u" && (u[s] = n.story[s]);
+            r.push(A(e, u));
+            continue;
+          }
+          Array.isArray(e.children) && (e.children = o(e.children)), r.push(e);
+        }
+        return r;
+      };
+      return o(a.proxy.$slots.default?.() ?? []);
+    }
+    function b() {
+      p.nextVariantIndex.value = 0;
+      const t = {
+        state: p.externalState
+      }, o = [];
+      return p.slotName === "controls" && o.push(...a.proxy.$slots.controls?.(t) ?? []), (p.slotName === "default" || n.story.meta?.hasVariantChildComponents) && o.push(...a.proxy.$slots.default?.(t) ?? []), o;
+    }
+  },
+  render() {
+    this.updateStory();
+    const [c] = this.story.variants;
+    return c?.id === "_default" ? $(R, {
+      variant: c,
+      initState: this.initState,
+      implicit: !0,
+      ...this.$attrs
+    }, this.$slots) : this.renderContext?.mode === "render" ? this.renderPreviewStory() : this.renderMountStory();
+  }
+});
+export {
+  F as default
+};

package/dist/bundled/client/app/Variant.js

@@ -0,0 +1,104 @@
+import { applyState as V } from "@poveste/shared";
+import { defineComponent as x, useAttrs as h, getCurrentInstance as b, inject as p, computed as C, onBeforeUnmount as D } from "vue";
+import { syncVariantAutoProps as A } from "./auto-props.js";
+import { useRenderContext as P } from "./render-context.js";
+import { toRawDeep as g, syncStateBundledAndExternal as m } from "./util.js";
+const $ = x({
+  name: "Variant",
+  __histoireType: "variant",
+  props: {
+    initState: {
+      type: Function,
+      default: void 0
+    },
+    source: {
+      type: String,
+      default: void 0
+    },
+    responsiveDisabled: {
+      type: Boolean,
+      default: !1
+    },
+    autoPropsDisabled: {
+      type: Boolean,
+      default: !1
+    },
+    setupApp: {
+      type: Function,
+      default: void 0
+    },
+    meta: {
+      type: Object,
+      default: void 0
+    },
+    implicit: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  async setup(t) {
+    const l = h(), u = b(), o = p("story"), s = p("implicitState"), e = P();
+    let c, d, a;
+    const r = C(() => l.variant);
+    if (e?.mode !== "render" && typeof t.initState == "function" && r.value) {
+      const n = await t.initState();
+      V(r.value.state, g(n));
+    }
+    e?.mode !== "render" && r.value && s && m(r.value.state, s());
+    function f(n) {
+      Object.assign(n, {
+        slots: () => u.proxy.$slots,
+        source: t.source,
+        responsiveDisabled: t.responsiveDisabled,
+        autoPropsDisabled: t.autoPropsDisabled,
+        setupApp: t.setupApp,
+        meta: t.meta,
+        configReady: !0
+      }), !t.implicit && !o.value?.meta?.hasVariantChildComponents && (o.value.meta || (o.value.meta = {}), Object.assign(o.value.meta, {
+        hasVariantChildComponents: !0
+      }));
+    }
+    function v() {
+      return l.variant ? l.variant : e?.mode !== "render" ? null : (d || (d = o.value?.variants[e.nextVariantIndex.value], e.nextVariantIndex.value++), d);
+    }
+    function y(n) {
+      if (e.slotName === "controls")
+        return u.proxy.$slots.controls?.({
+          state: e.externalState
+        }) ?? null;
+      if (e.slotName !== "default")
+        return null;
+      const i = u.proxy.$slots.default?.({
+        state: e.externalState
+      }) ?? null;
+      return i && !n.autoPropsDisabled && (c = A(
+        n,
+        i,
+        e.externalState,
+        c
+      )), i;
+    }
+    function S(n) {
+      if (!s)
+        return;
+      const i = e?.mode === "render" && e.currentVariant?.id === n.id;
+      i && !a ? a = m(n.state, s()) : !i && a && (a.stop(), a = null);
+    }
+    return r.value && f(r.value), D(() => {
+      a?.stop();
+    }), {
+      renderContext: e,
+      renderVariantSlot: y,
+      resolveVariant: v,
+      syncRenderVariantState: S,
+      updateVariant: f
+    };
+  },
+  render() {
+    const t = this.resolveVariant();
+    return !t || (this.updateVariant(t), this.syncRenderVariantState(t), this.renderContext?.mode !== "render") || this.renderContext.currentVariant?.id !== t.id ? null : this.renderVariantSlot(t);
+  }
+});
+export {
+  $ as default
+};