storybook-framework-qwik 0.0.7 → 0.1.0

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

@@ -0,0 +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;

package/dist/component-to-jsx.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@builder.io/qwik/jsx-runtime";
+export const componentToJSX = (Component, args) => {
+    return _jsx(Component, { ...args });
+};

package/dist/index.d.ts

@@ -1,2 +1 @@
-export type { StorybookConfig } from '@storybook/builder-vite';
 export * from './types.js';

package/dist/preset.d.ts

@@ -1,5 +1,5 @@
-import type { StorybookConfig } from '@storybook/builder-vite';
-export declare const core: StorybookConfig['core'];
-export declare const viteFinal: StorybookConfig['viteFinal'];
-export declare const previewAnnotations: StorybookConfig['previewAnnotations'];
+import type { StorybookViteConfig } from '@storybook/builder-vite';
+export declare const core: StorybookViteConfig['core'];
+export declare const viteFinal: StorybookViteConfig['viteFinal'];
+export declare const previewAnnotations: StorybookViteConfig['previewAnnotations'];
 export declare const previewHead: (head: string) => string;

package/dist/preset.js

@@ -9,7 +9,7 @@ export const viteFinal = async (defaultConfig, options) => {
         build: {
             target: 'es2020',
             rollupOptions: {
-                external: ['@qwik-city-sw-register', '@qwik-city-plan'],
+                external: ['@qwik-city-plan'],
             },
         },
     });

package/dist/preview.js

@@ -1,10 +1,11 @@
 import { render as renderQwik } from '@builder.io/qwik';
+import { componentToJSX } from './component-to-jsx.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 = (args, context) => {
     const { component } = context;
     if (typeof component === 'function') {
-        return component(args, context.name);
+        return componentToJSX(component, args);
     }
     return component;
 };
@@ -15,7 +16,7 @@ export async function renderToCanvas({ storyFn, showMain }, canvasElement) {
     canvasElement.append(container);
     showMain();
 }
-// I don't know how to to HMR stuff correctly, and Vite seems to keep referencing old files when you make a change.
+// I don't know how to do HMR stuff correctly, and Vite seems to keep referencing old files when you make a change.
 // Force a reload when vite notifies of an update as a dirty temporary workaround.
 const viteHotMeta = import.meta.hot;
 if (viteHotMeta) {

package/dist/qwik-city-decorator.js

@@ -1,6 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@builder.io/qwik/jsx-runtime";
 import { QwikCityMockProvider } from '@builder.io/qwik-city';
 /** Wraps story in QwikCityMockProvider */
-export const qwikCityDecorator = (Story) => 
-// Something is out of sync with the JSXNode generated here and the type expected by Decorator
-(_jsx(QwikCityMockProvider, { children: Story() }));
+export const qwikCityDecorator = (Story) => (_jsx(QwikCityMockProvider, { children: Story() }));

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 import { Component } from '@builder.io/qwik';
 import { WebRenderer } from '@storybook/types';
 export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
-import type { AnnotatedStoryFn, Args, ComponentAnnotations, StoryAnnotations, DecoratorFunction, LoaderFunction, StoryContext as GenericStoryContext, StrictArgs } from '@storybook/types';
+import type { AnnotatedStoryFn, Args, ComponentAnnotations, StoryAnnotations, DecoratorFunction, LoaderFunction, StoryContext as GenericStoryContext, StrictArgs, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 export interface QwikRenderer<T> extends WebRenderer {
     component: Component<T>;
     storyResult: ReturnType<Component<T>>;
@@ -27,3 +27,8 @@ export type StoryObj<TArgs = Args> = StoryAnnotations<QwikRenderer<TArgs>, TArgs
 export type Decorator<TArgs = StrictArgs> = DecoratorFunction<QwikRenderer<TArgs>, TArgs>;
 export type Loader<TArgs = StrictArgs> = LoaderFunction<QwikRenderer<TArgs>, TArgs>;
 export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<QwikRenderer<TArgs>, TArgs>;
+export type StorybookConfig = Omit<StorybookConfigBase, 'framework'> & {
+    framework: 'storybook-framework-qwik' | {
+        name: 'storybook-framework-qwik';
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-framework-qwik",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "description": "Storybook for Qwik: View Qwik components in isolation.",
   "keywords": [
     "storybook",
@@ -76,10 +76,11 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "watch": "tsc --watch --outDir ./dist --listEmittedFiles",
-    "build": "tsc --outDir ./dist --listEmittedFiles"
+    "build": "tsc --outDir ./dist --listEmittedFiles",
+    "semantic-release": "semantic-release"
   },
   "dependencies": {
-    "@storybook/builder-vite": "^7.0.0-beta.7"
+    "@storybook/builder-vite": ">=7.0.0-beta.7"
   },
   "peerDependencies": {
     "@builder.io/qwik": ">=0.15.2"
@@ -88,8 +89,11 @@
     "@builder.io/qwik-city": ">=0.0.128"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0",
-    "typescript": "~4.9.3"
+    "@suin/semantic-release-yarn": "1.1.0",
+    "@types/node": "^18",
+    "semantic-release": "^21.0.0",
+    "typescript": "~5.0.2",
+    "vite": "^4.2.1"
   },
   "engines": {
     "node": "^14.18 || >=16"
@@ -97,4 +101,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/typings.d.ts

@@ -0,0 +1 @@
+declare module 'global';

package/template/cli/button.tsx

@@ -53,7 +53,7 @@ export const Button = component$<ButtonProps>(
     return (
       <button
         class={classes}
-        style={{ backgroundColor }}
+        style={backgroundColor ? { backgroundColor } : {}}
         onClick$={(event, element) => onClick$?.(event, element)}
       >
         <Slot />

package/template/cli/story-example.stories.tsx

@@ -1,17 +1,18 @@
-import { Meta } from "storybook-framework-qwik";
-import { StoryExample, StoryExampleProps } from "./story-example";
+import React from 'react';
+import { Meta } from 'storybook-framework-qwik';
+import { StoryExample, StoryExampleProps } from './story-example';
 
 export default {
-  title: "Story Example",
+  title: 'Story Example',
   args: {
-    label: "Example label",
-    color: "red",
+    label: 'Example label',
+    color: 'red',
   },
   argTypes: {
     color: {
-      options: ["red", "green", "blue"],
+      options: ['red', 'green', 'blue'],
       control: {
-        type: "select",
+        type: 'select',
       },
     },
   },