feat: storybook template (#18)

This will make sb init support possible

Fixes #15

app/qwik/package.json

@@ -65,6 +65,7 @@
   "files": [
     "README.md",
     "./dist/*.js",
+    "./template/cli/**",
     "*.js",
     "*.d.ts",
     "./dist/*.d.ts"

app/qwik/template/cli/button.stories.tsx

@@ -0,0 +1,62 @@
+import { action } from '@storybook/addon-actions';
+import { $ } from '@builder.io/qwik';
+import { Meta, StoryObj } from 'storybook-framework-qwik';
+import { ButtonProps, Button } from './button';
+
+export default {
+  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$: $((event, element) => {
+      action('click action')({ event, element });
+    }),
+  },
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  render: ({ label, backgroundColor, primary, onClick$, size }) => {
+    return (
+      <Button
+        backgroundColor={backgroundColor}
+        primary={primary}
+        onClick$={(args, element) => onClick$?.(args, element)}
+        size={size}
+      >
+        {label}
+      </Button>
+    );
+  },
+  component: Button,
+} as Meta<ButtonProps & { label: string }>;
+
+type Story = StoryObj<ButtonProps & { label: string }>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

app/qwik/template/cli/button.tsx

@@ -0,0 +1,63 @@
+import {
+  component$,
+  QRL,
+  QwikMouseEvent,
+  Slot,
+  useStylesScoped$,
+} from "@builder.io/qwik";
+import buttonStyles from "./button.css?inline";
+
+export interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: "small" | "medium" | "large";
+  /**
+   * Optional click handler
+   */
+  onClick$?: QRL<onClickEvent> | undefined;
+}
+
+export const getClassForSize = (size: "small" | "medium" | "large") => {
+  switch (size) {
+    case "small":
+      return "storybook-button--small";
+    case "medium":
+      return "storybook-button--medium";
+    case "large":
+      return "storybook-button--large";
+  }
+};
+
+type onClickEvent = (
+  event: QwikMouseEvent<HTMLButtonElement, MouseEvent>,
+  element: Element
+) => any;
+
+export const Button = component$<ButtonProps>(
+  ({ primary = false, size = "medium", backgroundColor, onClick$ }) => {
+    useStylesScoped$(buttonStyles);
+    const classes = [
+      "storybook-button",
+      primary ? "storybook-button--primary" : "storybook-button--secondary",
+      getClassForSize(size),
+    ];
+    return (
+      <button
+        class={classes}
+        style={{ backgroundColor }}
+        onClick$={(event, element) => onClick$?.(event, element)}
+      >
+        <Slot />
+      </button>
+    );
+  }
+);

app/qwik/template/cli/story-example.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta } from "storybook-framework-qwik";
+import { StoryExample, StoryExampleProps } from "./story-example";
+
+export default {
+  title: "Story Example",
+  args: {
+    label: "Example label",
+    color: "red",
+  },
+  argTypes: {
+    color: {
+      options: ["red", "green", "blue"],
+      control: {
+        type: "select",
+      },
+    },
+  },
+  render: ({ label, color }) => {
+    return <StoryExample color={color}>{label}</StoryExample>;
+  },
+  component: StoryExample,
+} as Meta<Options>;
+
+type Options = StoryExampleProps & { label: string };
+
+export const Default = {};

app/qwik/template/cli/story-example.tsx

@@ -0,0 +1,26 @@
+import { component$, Slot, useStylesScoped$ } from '@builder.io/qwik';
+
+export interface StoryExampleProps {
+  color: 'red' | 'green' | 'blue';
+}
+
+export const StoryExample = component$((props: StoryExampleProps) => {
+  useStylesScoped$(`
+    div {
+      align-items: center;
+      border-radius: 50%;
+      display: flex;
+      height: 200px;
+      justify-content: center;
+      width: 200px;
+    }
+  `);
+
+  return (
+    <div style={`background-color: ${props.color}`}>
+      <span>
+        <Slot />
+      </span>
+    </div>
+  );
+});

examples/qwik-app/package.json

@@ -44,7 +44,6 @@
     "vite-tsconfig-paths": "3.5.0"
   },
   "dependencies": {
-    "@storybook/builder-vite": "7.0.0-beta.9",
-    "@storybook/html-vite": "^7.0.0-alpha.58"
+    "@storybook/builder-vite": "7.0.0-beta.9"
   }
 }