storybook-framework-qwik 0.2.4 → 0.3.0

package/dist/addArgsHelpers.d.ts

@@ -0,0 +1,10 @@
+import type { Renderer, ArgsEnhancer } from "@storybook/types";
+/**
+ * Automatically add action args for argTypes whose name
+ * matches a regex, such as `^on.*` for react-style `onClick` etc.
+ */
+export declare const inferActionsFromArgTypesRegex: ArgsEnhancer<Renderer>;
+/**
+ * Add action args for list of strings.
+ */
+export declare const addActionsFromArgTypes: ArgsEnhancer<Renderer>;

package/dist/addArgsHelpers.js

@@ -0,0 +1,41 @@
+// This file is entirely copied from @storybook/addon-actions (changing the action import)
+import { action } from "@storybook/addon-actions";
+// interface ActionsParameter {
+//   disable?: boolean;
+//   argTypesRegex?: RegExp;
+// }
+const isInInitialArgs = (name, initialArgs) => typeof initialArgs[name] === "undefined" && !(name in initialArgs);
+/**
+ * Automatically add action args for argTypes whose name
+ * matches a regex, such as `^on.*` for react-style `onClick` etc.
+ */
+export const inferActionsFromArgTypesRegex = (context) => {
+    const { initialArgs, argTypes, parameters: { actions }, } = context;
+    if (!actions || actions.disable || !actions.argTypesRegex || !argTypes) {
+        return {};
+    }
+    const argTypesRegex = new RegExp(actions.argTypesRegex);
+    const argTypesMatchingRegex = Object.entries(argTypes).filter(([name]) => !!argTypesRegex.test(name));
+    return argTypesMatchingRegex.reduce((acc, [name, argType]) => {
+        if (isInInitialArgs(name, initialArgs)) {
+            acc[name] = action(name);
+        }
+        return acc;
+    }, {});
+};
+/**
+ * Add action args for list of strings.
+ */
+export const addActionsFromArgTypes = (context) => {
+    const { initialArgs, argTypes, parameters: { actions }, } = context;
+    if (actions?.disable || !argTypes) {
+        return {};
+    }
+    const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType["action"]);
+    return argTypesWithAction.reduce((acc, [name, argType]) => {
+        if (isInInitialArgs(name, initialArgs)) {
+            acc[name] = action(typeof argType["action"] === "string" ? argType["action"] : name);
+        }
+        return acc;
+    }, {});
+};

package/dist/component-to-jsx.d.ts

@@ -1,3 +1,3 @@
 import { FunctionComponent } from "@builder.io/qwik";
 import { Args } from "./types.js";
-export declare const componentToJSX: (Component: FunctionComponent, args: Args) => import("@builder.io/qwik/jsx-runtime").JSX.Element;
+export declare const componentToJSX: (Component: FunctionComponent, args: Args) => import("@builder.io/qwik").JSXOutput;

package/dist/docs/qwik-docgen.js

@@ -17,7 +17,7 @@ export function qwikDocgen() {
                         skipPropsWithName: ["key", "q:slot"],
                     },
                 });
-                const s = new MagicString.default(src);
+                const s = new MagicString(src);
                 s.append(`window.__STORYBOOK_COMPONENT_DOC__ ??= new Map();`);
                 componentDocs.forEach((componentDoc) => s.append(`window.__STORYBOOK_COMPONENT_DOC__.set("${toKebabCase(componentDoc.displayName)}", ${JSON.stringify(componentDoc)});`));
                 return {

package/dist/preview.d.ts

@@ -1,5 +1,6 @@
-import { ArgsStoryFn, RenderContext } from "@storybook/types";
+import { ArgsEnhancer, ArgsStoryFn, RenderContext } from "@storybook/types";
 import { QwikRenderer } from "./types.js";
 export { parameters, argTypesEnhancers } from "./docs/config.js";
 export declare const render: ArgsStoryFn<QwikRenderer<unknown>>;
 export declare function renderToCanvas<T>({ storyFn, showMain }: RenderContext<QwikRenderer<T>>, canvasElement: QwikRenderer<T>["canvasElement"]): Promise<void>;
+export declare const argsEnhancers: ArgsEnhancer[];

package/dist/preview.js

@@ -1,5 +1,6 @@
-import { render as renderQwik } from "@builder.io/qwik";
+import { inlinedQrl, render as renderQwik } from "@builder.io/qwik";
 import { componentToJSX } from "./component-to-jsx.js";
+import { addActionsFromArgTypes, inferActionsFromArgTypesRegex, } from "./addArgsHelpers.js";
 export { parameters, argTypesEnhancers } from "./docs/config.js";
 // returns the Qwik component as a JSX element (</MyComponent>)
 // If a story has a custom renderer, it will replace this function.
@@ -12,9 +13,9 @@ export const render = (args, context) => {
 };
 export async function renderToCanvas({ storyFn, showMain }, canvasElement) {
     const container = document.createElement("div");
-    await renderQwik(container, storyFn());
     canvasElement.childNodes.forEach((c) => c.remove());
     canvasElement.append(container);
+    await renderQwik(container, storyFn());
     showMain();
 }
 // I don't know how to do HMR stuff correctly, and Vite seems to keep referencing old files when you make a change.
@@ -25,3 +26,19 @@ if (viteHotMeta) {
         document.location.reload();
     });
 }
+const actionsArgsEnhancers = [
+    addActionsFromArgTypes,
+    inferActionsFromArgTypesRegex,
+];
+export const argsEnhancers = 
+// use the argsEnhancers from addon-actions, then wrap the actions in Qwik's inlinedQrl function so things work.
+actionsArgsEnhancers.map((actionsEnhancer) => {
+    return ((context) => {
+        const argsWithActions = actionsEnhancer(context);
+        let finalArgs = {};
+        Object.keys(argsWithActions).forEach((key) => {
+            finalArgs[key] = inlinedQrl(argsWithActions[key], key);
+        });
+        return finalArgs;
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-framework-qwik",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Storybook for Qwik: View Qwik components in isolation.",
   "keywords": [
     "storybook",
@@ -83,24 +83,24 @@
     "fmt.check": "prettier --check ."
   },
   "dependencies": {
-    "@storybook/builder-vite": ">=7.0.0",
-    "@storybook/docs-tools": ">=7.0.0",
-    "magic-string": "^0.30.0",
+    "@storybook/builder-vite": "^7.6.16",
+    "@storybook/docs-tools": "^7.6.16",
+    "magic-string": "^0.30.7",
     "react-docgen-typescript": "^2.2.2"
   },
   "peerDependencies": {
     "@builder.io/qwik": ">=0.15.2"
   },
   "optionalDependencies": {
-    "@builder.io/qwik-city": "^1.1.4"
+    "@builder.io/qwik-city": "1.4.1"
   },
   "devDependencies": {
-    "@storybook/types": ">=7.0.0",
+    "@storybook/types": "^7.6.16",
     "@suin/semantic-release-yarn": "1.1.0",
-    "@types/node": "^18.16.16",
-    "semantic-release": "^21.0.2",
-    "typescript": "~5.2.2",
-    "vite": "^4.4.9"
+    "@types/node": "^18.19.17",
+    "semantic-release": "^22.0.12",
+    "typescript": "~5.3.3",
+    "vite": "^5.1.3"
   },
   "engines": {
     "node": "^14.18 || >=16"

package/template/cli/button.stories.ts

@@ -1,20 +1,12 @@
-import { action } from "@storybook/addon-actions";
-import { $ } from "@builder.io/qwik";
 import type { Meta, StoryObj } from "storybook-framework-qwik";
-import type { ButtonProps, onClickEvent } from "./button";
+import type { ButtonProps } from "./button";
 import { Button } from "./button";
 
 const meta = {
   title: "Button",
-  args: {
-    // automatic actions are not yet supported.
-    // See https://github.com/literalpie/storybook-framework-qwik/issues/16
-    // For now, use the legacy addon-actions API wrapped in a $ to make your own QRL action.
-    onClick$: $<onClickEvent>((event, element) => {
-      action("click action")({ event, element });
-    }),
-  },
+  args: { },
   argTypes: {
+    onClick$: { action: 'onClick'},
     backgroundColor: { control: "color" },
   },
   component: Button,

package/template/cli/button.tsx

@@ -1,4 +1,4 @@
-import type { PropFunction, QwikMouseEvent } from "@builder.io/qwik";
+import type { PropFunction } from "@builder.io/qwik";
 import { component$, useStylesScoped$ } from "@builder.io/qwik";
 import buttonStyles from "./button.css?inline";
 
@@ -37,7 +37,7 @@ export const getClassForSize = (size: "small" | "medium" | "large") => {
 };
 
 export type onClickEvent = (
-  event: QwikMouseEvent<HTMLButtonElement, MouseEvent>,
+  event: MouseEvent,
   element: Element
 ) => void;
 

package/template/cli/header.stories.ts

@@ -1,8 +1,6 @@
 import type { Meta, StoryObj } from "storybook-framework-qwik";
 import type { HeaderProps } from "./header";
 import { Header } from "./header";
-import { $ } from "@builder.io/qwik";
-import { action } from "@storybook/addon-actions";
 
 const meta = {
   title: "Example/Header",
@@ -13,20 +11,12 @@ const meta = {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
     layout: "fullscreen",
   },
-  args: {
-    // automatic actions are not yet supported.
-    // See https://github.com/literalpie/storybook-framework-qwik/issues/16
-    // For now, use the legacy addon-actions API wrapped in a $ to make your own QRL action.
-    onCreateAccount$: $<() => void>(() => {
-      action("Create Account Action")();
-    }),
-    onLogin$: $<() => void>(() => {
-      action("Login Action")();
-    }),
-    onLogout$: $<() => void>(() => {
-      action("Logout Action")();
-    }),
-  },
+  args: { },
+  argTypes: {
+    onCreateAccount$: { action: 'onCreateAccount' },
+    onLogin$: { action: 'onLogin' },
+    onLogout$: { action: 'onLogout' },
+  }
 } satisfies Meta<HeaderProps>;
 
 export default meta;

package/template/cli/header.tsx

@@ -26,7 +26,7 @@ export const Header = component$(
             viewBox="0 0 32 32"
             xmlns="http://www.w3.org/2000/svg"
           >
-            <g fill="none" fillRule="evenodd">
+            <g fill="none" fill-rule="evenodd">
               <path
                 d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
                 fill="#FFF"