@sit-onyx/storybook-utils 1.0.0-beta.9 → 1.0.0-beta.91

package/src/assets/logo-onyx.svg

@@ -1,51 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 128 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(0.0550098,0,0,0.0550098,-13.9945,-10.7764)">
-        <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
-            <path d="M1399.09,387.23L1457.51,302.52C1460.2,299.31 1462.88,297.7 1466.62,297.7L1526.12,297.7C1532.55,297.7 1534.17,301.99 1530.41,307.36L1437.8,438.74L1399.08,387.23L1399.09,387.23Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
-        </g>
-        <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
-            <path d="M1438.22,438.15L1541.14,584.49C1544.35,589.85 1542.75,594.14 1536.32,594.14L1476.82,594.14C1473.61,594.14 1470.92,592.53 1468.77,589.32L1399.09,488.54L1329.4,589.32C1327.27,592.53 1324.58,594.14 1321.36,594.14L1261.86,594.14C1255.43,594.14 1243.69,589.85 1247.45,584.49L1359.96,438.15L1267.76,307.36C1264,301.99 1265.62,297.7 1272.04,297.7L1331.54,297.7C1335.3,297.7 1338.51,299.31 1340.65,302.52L1399.08,387.23L1438.21,438.15L1438.22,438.15Z" style="fill:rgb(50,184,198);fill-rule:nonzero;"/>
-        </g>
-    </g>
-    <g transform="matrix(0.0550098,0,0,0.0550098,-13.9945,-10.7764)">
-        <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
-            <path d="M520.64,448.86C520.64,569.47 497.06,599.49 389.85,599.49C282.63,599.49 259.58,569.47 259.58,448.86C259.58,327.71 282.63,297.69 389.85,297.69C497.05,297.69 520.64,327.71 520.64,448.86ZM324.45,448.86C324.45,524.44 332.49,543.21 389.85,543.21C447.2,543.21 455.24,524.44 455.24,448.86C455.24,372.74 447.19,353.98 389.85,353.98C332.48,353.98 324.45,372.74 324.45,448.86Z" style="fill:rgb(50,184,198);fill-rule:nonzero;"/>
-        </g>
-        <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
-            <g>
-                <clipPath id="_clip2">
-                    <path d="M519.88,480.88C520.37,470.95 520.64,460.4 520.64,448.86C520.64,327.71 497.06,297.69 389.85,297.69C388.74,297.69 367.12,297.69 351.01,299.54C339.69,316.68 332.26,373.81 327.82,394.43C328.83,388.21 332.15,379.08 334.43,374.91C339.44,365.73 346.24,361.39 354.56,358.41C368.59,353.39 384.37,353.98 389.86,353.98C447.22,353.98 455.26,372.74 455.26,448.86"/>
-                </clipPath>
-                <g clip-path="url(#_clip2)">
-                    <g transform="matrix(0.999067,0,0,0.995598,327.82,297.69)">
-                        <use id="_Image3_" serif:id="_Image3" xlink:href="#_Image3" x="0" y="0" width="193px" height="184px"/>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-    <g transform="matrix(0.0550098,0,0,0.0550098,-13.9945,-10.7764)">
-        <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
-            <path d="M662.36,353.99L724.46,353.99C774.85,353.99 787.16,357.2 787.16,436.54L787.16,588.77C787.16,594.14 789.85,596.82 795.21,596.82L843.46,596.82C848.82,596.82 852.03,594.14 852.03,588.77L852.03,424.75C852.03,312.71 824.69,297.7 725.52,297.7C707.79,297.7 685.61,297.9 662.72,299.33L662.36,353.99Z" style="fill:url(#_Linear4);fill-rule:nonzero;"/>
-        </g>
-        <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
-            <path d="M662.8,306.45L662.8,588.77C662.8,594.14 660.12,596.82 654.76,596.82L605.45,596.82C600.08,596.82 597.94,594.14 597.94,588.77L597.94,314.86C597.94,307.89 600.62,307.35 605.45,306.28C623.63,302.59 643.45,300.48 662.79,299.28L662.79,306.45L662.8,306.45Z" style="fill:rgb(50,184,198);fill-rule:nonzero;"/>
-        </g>
-    </g>
-    <g transform="matrix(0.0550098,0,0,0.0550098,-13.9945,-10.7764)">
-        <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
-            <path d="M1123.83,591.43C1100.93,595.16 1080.37,596.19 1055.33,596.19C956.8,596.19 931.78,562.64 931.78,455.06L931.78,307.02C931.78,301.69 934.44,299.03 939.77,299.03L988.23,299.03C993.56,299.03 996.23,301.69 996.23,307.02L996.23,446.01C996.23,522.16 1005.81,539.73 1065.46,539.73C1083.04,539.73 1104.87,539.2 1123.51,536.54L1123.84,591.43L1123.83,591.43Z" style="fill:url(#_Linear5);fill-rule:nonzero;"/>
-        </g>
-        <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
-            <path d="M1123.5,536.54L1123.5,307.02C1123.5,301.69 1126.16,299.03 1131.49,299.03L1179.96,299.03C1185.29,299.03 1187.95,301.69 1187.95,307.02L1187.95,576.49C1187.41,669.15 1169.31,702.7 1061.19,702.7C1025.52,702.7 1000.48,701.1 971.19,696.83C966.4,695.77 964.26,693.11 964.26,688.31L964.26,656.89C964.26,651.03 966.39,648.9 971.72,648.9L1057.46,648.9C1110.71,648.9 1123.49,636.12 1123.49,594.05L1123.49,536.54L1123.5,536.54Z" style="fill:rgb(50,184,198);fill-rule:nonzero;"/>
-        </g>
-    </g>
-    <defs>
-        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(133.32,0,0,133.32,1399.09,368.22)"><stop offset="0" style="stop-color:rgb(1,141,160);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(50,184,198);stop-opacity:1"/></linearGradient>
-        <image id="_Image3" width="193px" height="184px" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAC4AMEDAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAgAGAf/EABgQAQEBAQEAAAAAAAAAAAAAAAEAAhFh/8QAGQEBAQEBAQEAAAAAAAAAAAAAAAIBAwYH/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Ayl7V8MUFBQUFBQUFAggQRphAwgQQIKQwgeSKMIGECCBhAggQWBhB3kUzFbkoKCgoKCgoEECCNMIEEDCBBSGEDCBhFGECCBhAggQWBhAgii5Bla3JQUFBQUFAggQRphAggYQIKQwgYQPJFGECCBhAggQWBhAgijCDvIMnW5KCgoKCgQQII0wgQQMIEFIYQMIHkijCBBAwgQQILAwgQRRhAggXIMhW5KCgoKBBAgjTCBBAwgQUhhAwijyQMIEEDCBBAgsDCBBFGECCBhB3nkGOrclBQUCCBBGmECCBhAgpDCBhFHkgYQIIGECCBBYGECCKMIEEDCBBAuUjF3VyUFAggQRphAggYQIKQwgYRR5IGECCBhAggQWBhAgijCBBAwgQQMKR3nkGJurkoEECCNMIEEDCBBSGEDCKPJAwgQQMIEECCwMIEEUYQIIGECCBhSGEHeQYa6uRBAgjTCBBAwgQUhhAwijyQMIEEDCBBAggYWBBFGECCBhAggYUhhAgg7yDDBdXIgjTCBBAwgQUhhAwijyQMIEEDCBBAggYWBBFGECCBhAggYUhhAggYQd5BhQurmYQIIGECCkMIGEUeSBhAggYQIIEEDCwIIowgQQMIEEDCkMIEEDCBBAuQYULq5kEDCBBSGEDCKPJAwgQQMIEECCBhYEEUYQIIGECCBhSEEDCBhAggYRpcgwgXVyMIEFIYQMIo8kDCBBAwgQQIIGFgQRRhAggYQIIGFIQQMIGECCBhGmEC5BhAurkQUhhA8kDCKMIEEDCBBAggYWBBFGECCBhAggYUhBAwgYQIIGEaYQIg7BhQrcjCBhAwiiCBhAggYQIIGFgQRRhAggYQIIGFIQQMIGECCBhGmECIOwUGICtyMIGEUQQMIEEDCBBYGECCKMIEEDCBBAwpCCBhAwgQQMI0wgRB2CgoMWFbkYRRBAwgQQMIEFgYQIIowgQQMIEEDCkIIGEDCBBAwjTCBEHYKCgoMcFaCCBhAggYQILAwgQRRhAggYQIIGFIQQMIGECCBhGmECIOwUFBQUGQCtBhAggYQILAwgQRRhAggYQIIGFIQQMIGECCBhGmECIOwUFBQUFBkwrQQQMIEFgYQIIowgQQMIEEDCkIIGEDCBBAwjTCBEHYKCgoKCgoMqFaDCBBYGECCKMIEEDCBBAwpCCBhAwgQQMI0wgRB2CgoKCgoKCgzAVoILAwgQRRhAggYQIIGFIQQMIGECCBhGmECIOwUFBQUFBQUFBmgqQYQIIowgQQMIEEDCkIIGECCB5IGEaYQIg7BQUFBQUFBQUFB//2Q=="/>
-        <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(35974.7,0,0,35974.7,126292,134082)"><stop offset="0" style="stop-color:rgb(1,141,160);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(50,184,198);stop-opacity:1"/></linearGradient>
-        <linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(192.05,0,0,192.05,931.78,447.61)"><stop offset="0" style="stop-color:rgb(50,184,198);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(1,141,160);stop-opacity:1"/></linearGradient>
-    </defs>
-</svg>

package/src/index.css

@@ -1,26 +0,0 @@
-@import url("sit-onyx/themes/onyx.css");
-
-.onyx-disclaimer {
-  border-radius: 0.5rem;
-  padding: 1rem;
-  line-height: 1.5rem;
-  margin: 1rem 0;
-
-  /* same color as VitePress var(--vp-c-tip-soft) */
-  background-color: color-mix(in srgb, var(--onyx-color-base-info-400) 25%, transparent);
-}
-
-.onyx-disclaimer__title {
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-}
-
-.onyx-disclaimer p {
-  margin: 0;
-}
-
-/* the Storybook table of content headline is always black so we need to manually set it for the dark mode */
-#storybook-docs .sbdocs-wrapper > div:nth-child(2) {
-  /* same as Storybook color "textMuted" inside ./theme.ts */
-  color: var(--onyx-color-text-icons-neutral-medium);
-}

package/src/source-code-generator.spec.ts

@@ -1,258 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-//
-// This file is only a temporary copy of the improved source code generation for Storybook.
-// It is intended to be deleted once its officially released in Storybook itself, see:
-// https://github.com/storybookjs/storybook/pull/27194
-//
-import { expect, test } from "vitest";
-import { h } from "vue";
-import {
-  generatePropsSourceCode,
-  generateSlotSourceCode,
-  generateSourceCode,
-  getFunctionParamNames,
-  parseDocgenInfo,
-  type SourceCodeGeneratorContext,
-} from "./source-code-generator";
-
-test("should generate source code for props", () => {
-  const ctx: SourceCodeGeneratorContext = {
-    scriptVariables: {},
-    imports: {},
-  };
-
-  const code = generatePropsSourceCode(
-    {
-      a: "foo",
-      b: '"I am double quoted"',
-      c: 42,
-      d: true,
-      e: false,
-      f: [1, 2, 3],
-      g: {
-        g1: "foo",
-        g2: 42,
-      },
-      h: undefined,
-      i: null,
-      j: "",
-      k: BigInt(9007199254740991),
-      l: Symbol(),
-      m: Symbol("foo"),
-      modelValue: "test-v-model",
-      otherModelValue: 42,
-      default: "default slot",
-      testSlot: "test slot",
-    },
-    ["default", "testSlot"],
-    ["update:modelValue", "update:otherModelValue"],
-    ctx,
-  );
-
-  expect(code).toBe(
-    `a="foo" b='"I am double quoted"' :c="42" d :e="false" :f="f" :g="g" :k="BigInt(9007199254740991)" :l="Symbol()" :m="Symbol('foo')" v-model="modelValue" v-model:otherModelValue="otherModelValue"`,
-  );
-
-  expect(ctx.scriptVariables).toStrictEqual({
-    f: `[1,2,3]`,
-    g: `{"g1":"foo","g2":42}`,
-    modelValue: 'ref("test-v-model")',
-    otherModelValue: "ref(42)",
-  });
-
-  expect(Array.from(ctx.imports.vue.values())).toStrictEqual(["ref"]);
-});
-
-test("should generate source code for slots", () => {
-  // slot code generator should support primitive values (string, number etc.)
-  // but also VNodes (e.g. created using h()) so custom Vue components can also be used
-  // inside slots with proper generated code
-
-  const slots = {
-    default: "default content",
-    a: "a content",
-    b: 42,
-    c: true,
-    // single VNode without props
-    d: h("div", "d content"),
-    // VNode with props and single child
-    e: h("div", { style: "color:red" }, "e content"),
-    // VNode with props and single child returned as getter
-    f: h("div", { style: "color:red" }, () => "f content"),
-    // VNode with multiple children
-    g: h("div", { style: "color:red" }, [
-      "child 1",
-      h("span", { style: "color:green" }, "child 2"),
-    ]),
-    // VNode multiple children but returned as getter
-    h: h("div", { style: "color:red" }, () => [
-      "child 1",
-      h("span", { style: "color:green" }, "child 2"),
-    ]),
-    // VNode with multiple and nested children
-    i: h("div", { style: "color:red" }, [
-      "child 1",
-      h("span", { style: "color:green" }, ["nested child 1", h("p", "nested child 2")]),
-    ]),
-    j: ["child 1", "child 2"],
-    k: null,
-    l: { foo: "bar" },
-    m: BigInt(9007199254740991),
-  };
-
-  const expectedCode = `default content
-
-<template #a>a content</template>
-
-<template #b>42</template>
-
-<template #c>true</template>
-
-<template #d><div>d content</div></template>
-
-<template #e><div style="color:red">e content</div></template>
-
-<template #f><div style="color:red">f content</div></template>
-
-<template #g><div style="color:red">child 1
-<span style="color:green">child 2</span></div></template>
-
-<template #h><div style="color:red">child 1
-<span style="color:green">child 2</span></div></template>
-
-<template #i><div style="color:red">child 1
-<span style="color:green">nested child 1
-<p>nested child 2</p></span></div></template>
-
-<template #j>child 1
-child 2</template>
-
-<template #l>{"foo":"bar"}</template>
-
-<template #m>{{ BigInt(9007199254740991) }}</template>`;
-
-  let actualCode = generateSlotSourceCode(slots, Object.keys(slots), {
-    scriptVariables: {},
-    imports: {},
-  });
-  expect(actualCode).toBe(expectedCode);
-
-  // should generate the same code if getters/functions are used to return the slot content
-  const slotsWithGetters = Object.entries(slots).reduce<
-    Record<string, () => (typeof slots)[keyof typeof slots]>
-  >((obj, [slotName, value]) => {
-    obj[slotName] = () => value;
-    return obj;
-  }, {});
-
-  actualCode = generateSlotSourceCode(slotsWithGetters, Object.keys(slotsWithGetters), {
-    scriptVariables: {},
-    imports: {},
-  });
-  expect(actualCode).toBe(expectedCode);
-});
-
-test("should generate source code for slots with bindings", () => {
-  type TestBindings = {
-    foo: string;
-    bar?: number;
-  };
-
-  const slots = {
-    a: ({ foo, bar }: TestBindings) => `Slot with bindings ${foo} and ${bar}`,
-    b: ({ foo }: TestBindings) => h("a", { href: foo, target: foo }, `Test link: ${foo}`),
-  };
-
-  const expectedCode = `<template #a="{ foo, bar }">Slot with bindings {{ foo }} and {{ bar }}</template>
-
-<template #b="{ foo }"><a :href="foo" :target="foo">Test link: {{ foo }}</a></template>`;
-
-  const actualCode = generateSlotSourceCode(slots, Object.keys(slots), {
-    imports: {},
-    scriptVariables: {},
-  });
-  expect(actualCode).toBe(expectedCode);
-});
-
-test("should generate source code with <script setup> block", () => {
-  const actualCode = generateSourceCode({
-    title: "MyComponent",
-    component: {
-      __docgenInfo: {
-        slots: [{ name: "mySlot" }],
-        events: [{ name: "update:c" }],
-      },
-    },
-    args: {
-      a: 42,
-      b: "foo",
-      c: [1, 2, 3],
-      d: { bar: "baz" },
-      mySlot: () => h("div", { test: [1, 2], d: { nestedProp: "foo" } }),
-    },
-  });
-
-  expect(actualCode).toBe(`<script lang="ts" setup>
-import { ref } from "vue";
-
-const c = ref([1,2,3]);
-
-const d = {"bar":"baz"};
-
-const d1 = {"nestedProp":"foo"};
-
-const test = [1,2];
-</script>
-
-<template>
-  <MyComponent :a="42" b="foo" v-model:c="c" :d="d"> <template #mySlot><div :d="d1" :test="test" /></template> </MyComponent>
-</template>`);
-});
-
-test.each([
-  { __docgenInfo: "invalid-value", slotNames: [] },
-  { __docgenInfo: {}, slotNames: [] },
-  { __docgenInfo: { slots: "invalid-value" }, slotNames: [] },
-  { __docgenInfo: { slots: ["invalid-value"] }, slotNames: [] },
-  {
-    __docgenInfo: { slots: [{ name: "slot-1" }, { name: "slot-2" }, { notName: "slot-3" }] },
-    slotNames: ["slot-1", "slot-2"],
-  },
-])("should parse slots names from __docgenInfo", ({ __docgenInfo, slotNames }) => {
-  const docgenInfo = parseDocgenInfo({ __docgenInfo });
-  expect(docgenInfo.slotNames).toStrictEqual(slotNames);
-});
-
-test.each([
-  { __docgenInfo: "invalid-value", eventNames: [] },
-  { __docgenInfo: {}, eventNames: [] },
-  { __docgenInfo: { events: "invalid-value" }, eventNames: [] },
-  { __docgenInfo: { events: ["invalid-value"] }, eventNames: [] },
-  {
-    __docgenInfo: { events: [{ name: "event-1" }, { name: "event-2" }, { notName: "event-3" }] },
-    eventNames: ["event-1", "event-2"],
-  },
-])("should parse event names from __docgenInfo", ({ __docgenInfo, eventNames }) => {
-  const docgenInfo = parseDocgenInfo({ __docgenInfo });
-  expect(docgenInfo.eventNames).toStrictEqual(eventNames);
-});
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-test.each<{ fn: (...args: any[]) => unknown; expectedNames: string[] }>([
-  { fn: () => ({}), expectedNames: [] },
-  { fn: (a) => ({}), expectedNames: ["a"] },
-  { fn: (a, b) => ({}), expectedNames: ["a", "b"] },
-  { fn: (a, b, { c }) => ({}), expectedNames: ["a", "b", "{", "c", "}"] },
-  { fn: ({ a, b }) => ({}), expectedNames: ["{", "a", "b", "}"] },
-  {
-    fn: {
-      // simulate minified function after running "storybook build"
-      toString: () => "({a:foo,b:bar})=>({})",
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } as (...args: any[]) => unknown,
-    expectedNames: ["{", "a", "b", "}"],
-  },
-])("should extract function parameter names", ({ fn, expectedNames }) => {
-  const paramNames = getFunctionParamNames(fn);
-  expect(paramNames).toStrictEqual(expectedNames);
-});