format

packages/qwik-app/src/components/button/button.stories.ts

@@ -4,9 +4,9 @@ import { Button } from "./button";
 
 const meta = {
   title: "Button",
-  args: { },
+  args: {},
   argTypes: {
-    onClick$: { action: 'onClick'},
+    onClick$: { action: "onClick" },
   },
   component: Button,
 } satisfies Meta<ButtonProps>;
@@ -16,4 +16,4 @@ export default meta;
 type Story = StoryObj<ButtonProps>;
 
 // More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
-export const Primary: Story = {};
+export const Primary: Story = {};

packages/qwik-app/src/components/button/button.tsx

@@ -12,19 +12,10 @@ export interface ButtonProps {
   onClick$?: PropFunction<onClickEvent> | undefined;
 }
 
-export type onClickEvent = (
-  event: MouseEvent,
-  element: Element
-) => void;
+export type onClickEvent = (event: MouseEvent, element: Element) => void;
 
 export const Button = component$<ButtonProps>(
-  ({ label="click me!", onClick$ }) => {
-    return (
-      <button
-        onClick$={onClick$}
-      >
-        {label}
-      </button>
-    );
-  }
+  ({ label = "click me!", onClick$ }) => {
+    return <button onClick$={onClick$}>{label}</button>;
+  },
 );

packages/storybook-framework-qwik/src/addArgsHelpers.ts

@@ -1,22 +1,24 @@
 // This file is entirely copied from @storybook/addon-actions (changing the action import)
 
-import type { Args, Renderer, ArgsEnhancer } from '@storybook/types';
-import { action } from '@storybook/addon-actions';
+import type { Args, Renderer, ArgsEnhancer } from "@storybook/types";
+import { action } from "@storybook/addon-actions";
 
 // interface ActionsParameter {
 //   disable?: boolean;
 //   argTypesRegex?: RegExp;
 // }
 
 const isInInitialArgs = (name: string, initialArgs: Args) =>
-  typeof initialArgs[name] === 'undefined' && !(name in 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: ArgsEnhancer<Renderer> = (context) => {
+export const inferActionsFromArgTypesRegex: ArgsEnhancer<Renderer> = (
+  context,
+) => {
   const {
     initialArgs,
     argTypes,
@@ -28,7 +30,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer<Renderer> = (context) =
 
   const argTypesRegex = new RegExp(actions.argTypesRegex);
   const argTypesMatchingRegex = Object.entries(argTypes).filter(
-    ([name]) => !!argTypesRegex.test(name)
+    ([name]) => !!argTypesRegex.test(name),
   );
 
   return argTypesMatchingRegex.reduce((acc, [name, argType]) => {
@@ -53,12 +55,14 @@ export const addActionsFromArgTypes: ArgsEnhancer<Renderer> = (context) => {
   }
 
   const argTypesWithAction = Object.entries(argTypes).filter(
-    ([name, argType]) => !!argType['action']
+    ([name, argType]) => !!argType["action"],
   );
 
   return argTypesWithAction.reduce((acc, [name, argType]) => {
     if (isInInitialArgs(name, initialArgs)) {
-      acc[name] = action(typeof argType['action'] === 'string' ? argType['action'] : name);
+      acc[name] = action(
+        typeof argType["action"] === "string" ? argType["action"] : name,
+      );
     }
     return acc;
   }, {} as Args);

packages/storybook-framework-qwik/src/preview.ts

@@ -2,10 +2,12 @@ import { inlinedQrl, render as renderQwik } from "@builder.io/qwik";
 import { ArgsEnhancer, ArgsStoryFn, RenderContext } from "@storybook/types";
 import { QwikRenderer } from "./types.js";
 import { componentToJSX } from "./component-to-jsx.js";
-import { addActionsFromArgTypes, inferActionsFromArgTypesRegex } from "./addArgsHelpers.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.
 export const render: ArgsStoryFn<QwikRenderer<unknown>> = (args, context) => {
@@ -41,17 +43,15 @@ const actionsArgsEnhancers: ArgsEnhancer[] = [
   inferActionsFromArgTypesRegex,
 ];
 
-
-export const argsEnhancers: ArgsEnhancer[] = 
-// use the argsEnhancers from addon-actions, then wrap the actions in Qwik's inlinedQrl function so things work.
-  actionsArgsEnhancers.map((actionsEnhancer: ArgsEnhancer)=>{
-    return ((context)=>{
+export const argsEnhancers: ArgsEnhancer[] =
+  // use the argsEnhancers from addon-actions, then wrap the actions in Qwik's inlinedQrl function so things work.
+  actionsArgsEnhancers.map((actionsEnhancer: ArgsEnhancer) => {
+    return ((context) => {
       const argsWithActions = actionsEnhancer(context);
-      let finalArgs:any = {}
-      Object.keys(argsWithActions).forEach(key=>{
+      let finalArgs: any = {};
+      Object.keys(argsWithActions).forEach((key) => {
         finalArgs[key] = inlinedQrl(argsWithActions[key], key);
-      })
+      });
       return finalArgs;
-
-    }) as ArgsEnhancer
-  })
+    }) as ArgsEnhancer;
+  });