storybook-framework-qwik 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-framework-qwik",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Storybook for Qwik: View Qwik components in isolation.",
   "keywords": [
     "storybook",
@@ -42,6 +42,16 @@
     },
     "./package.json": "./package.json"
   },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/index.d.ts"
+      ],
+      "qwik-city-decorator": [
+        "./dist/qwik-city-decorator.d.ts"
+      ]
+    }
+  },
   "homepage": "https://github.com/literalpie/storybook-framework-qwik",
   "bugs": {
     "url": "https://github.com/literalpie/storybook-framework-qwik"
@@ -55,6 +65,7 @@
   "files": [
     "README.md",
     "./dist/*.js",
+    "./template/cli/**",
     "*.js",
     "*.d.ts",
     "./dist/*.d.ts"
@@ -70,10 +81,10 @@
     "@storybook/builder-vite": "^7.0.0-beta.7"
   },
   "peerDependencies": {
-    "@builder.io/qwik": "^0.15.2"
+    "@builder.io/qwik": ">=0.15.2"
   },
   "optionalDependencies": {
-    "@builder.io/qwik-city": "^0.0.128"
+    "@builder.io/qwik-city": ">=0.0.128"
   },
   "devDependencies": {
     "@types/node": "^16.0.0",

package/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',
+  },
+};

package/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>
+    );
+  }
+);

package/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 = {};

package/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>
+  );
+});