storybook-framework-qwik 0.0.1

package/README.md

@@ -0,0 +1,11 @@
+# Storybook for framework
+
+---
+
+Storybook for framework is a UI development environment for your plain framework snippets.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

package/dist/index.js

@@ -0,0 +1 @@
+export {};

package/dist/preset.js

@@ -0,0 +1,25 @@
+import { mergeConfig } from 'vite';
+import { QWIK_LOADER } from '@builder.io/qwik/loader';
+export const core = {
+    builder: '@storybook/builder-vite',
+    renderer: '@storybook/html',
+};
+export const viteFinal = async (defaultConfig, options) => {
+    console.log('VITE THING');
+    const config = mergeConfig(defaultConfig, {
+        build: {
+            target: 'es2020',
+            rollupOptions: {
+                external: ['@qwik-city-sw-register', '@qwik-city-plan'],
+            },
+        },
+    });
+    return config;
+};
+export const previewAnnotations = (entry = []) => [
+    ...entry,
+    require.resolve('storybook-framework-qwik/preview.js'),
+];
+export const previewHead = (head) => {
+    return `${head} <script>${QWIK_LOADER}</script>`;
+};

package/dist/preview.js

@@ -0,0 +1,13 @@
+import { render } from '@builder.io/qwik';
+import { QwikCityMockProvider } from '@builder.io/qwik-city';
+import { jsx as _jsx } from '@builder.io/qwik/jsx-runtime';
+const qwikCityDecorator = (Story) => {
+    const parent = document.createElement('div');
+    const jsxNode = Story();
+    const tree = _jsx(QwikCityMockProvider, {
+        children: jsxNode,
+    }, 'QwikCityMockProvider');
+    render(parent, tree);
+    return parent;
+};
+export const decorators = [qwikCityDecorator];

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "storybook-framework-qwik",
+  "version": "0.0.1",
+  "description": "Storybook for Qwik: View Qwik components in isolation.",
+  "keywords": [
+    "storybook",
+    "qwik"
+  ],
+  "type": "module",
+  "//": "not sure why dist/preview is needed, but it is",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.js",
+      "types": "./dist/preset.d.ts"
+    },
+    "./dist/preview.js": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.js",
+      "types": "./dist/preview.d.ts"
+    },
+    "./preview.js": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.js",
+      "types": "./dist/preview.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "homepage": "TODO",
+  "bugs": {
+    "//": "TODO"
+  },
+  "repository": {
+    "type": "git",
+    "directory": "app/qwik"
+  },
+  "license": "MIT",
+  "files": [
+    "README.md",
+    "./dist/*.js",
+    "*.js",
+    "*.d.ts"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "watch": "tsc --watch --outDir ./dist --listEmittedFiles",
+    "build": "tsc --outDir ./dist --listEmittedFiles"
+  },
+  "dependencies": {
+    "@builder.io/qwik": "^0.15.2",
+    "@builder.io/qwik-city": "^0.0.128",
+    "@storybook/addons": "7.0.0-beta.9",
+    "@storybook/builder-vite": "7.0.0-beta.9",
+    "@storybook/channel-postmessage": "7.0.0-beta.9",
+    "@storybook/channel-websocket": "7.0.0-beta.9",
+    "@storybook/client-api": "7.0.0-beta.9",
+    "@storybook/core-server": "7.0.0-beta.9",
+    "@storybook/html": "7.0.0-beta.9",
+    "@storybook/node-logger": "7.0.0-beta.9",
+    "@storybook/preview-web": "7.0.0-beta.9",
+    "magic-string": "^0.26.1"
+  },
+  "devDependencies": {
+    "@types/node": "^16.0.0",
+    "typescript": "~4.9.3"
+  },
+  "engines": {
+    "node": "^14.18 || >=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}