Merge branch 'pr-fluffy-experiment' of github.com:shairez/qwik-ui into pr-fluffy-experiment

Author: shairez

packages/kit-fluffy/.storybook/main.ts

@@ -0,0 +1,38 @@
+import { qwikVite } from '@builder.io/qwik/optimizer';
+import { resolve } from 'path';
+import { StorybookConfig } from 'storybook-framework-qwik';
+import { mergeConfig } from 'vite';
+import viteTsConfigPaths from 'vite-tsconfig-paths';
+
+const config: StorybookConfig = {
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y'
+  ],
+  framework: {
+    name: 'storybook-framework-qwik'
+  },
+  core: {
+    renderer: 'storybook-framework-qwik'
+  },
+  stories: [
+    // ...rootMain.stories,
+    '../src/components/**/*.stories.mdx',
+    '../src/components/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+
+  viteFinal: async (config: any) => {
+    return mergeConfig(config, {
+      plugins: [
+        qwikVite({
+          vendorRoots: [__dirname],
+          srcDir: resolve(__dirname, '../src')
+        }),
+        viteTsConfigPaths()
+      ]
+    });
+  }
+};
+
+export default config;

packages/kit-fluffy/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

packages/kit-fluffy/.storybook/preview.tsx

@@ -0,0 +1,17 @@
+import { Parameters } from 'storybook-framework-qwik';
+
+export const parameters: Parameters = {
+  a11y: {
+    config: {},
+    options: {
+      checks: { 'color-contrast': { options: { noScroll: true } } },
+      restoreScroll: true
+    }
+  },
+  options: {
+    showRoots: true
+  },
+  docs: {
+    iframeHeight: '200px'
+  }
+};

packages/kit-fluffy/.storybook/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+  },
+
+  "exclude": [
+    "../**/*.spec.ts",
+    "../**/*.test.ts",
+    "../**/*.spec.tsx",
+    "../**/*.test.tsx"
+  ],
+  "include": [
+    "../src/**/*.stories.ts",
+    "../src/**/*.stories.js",
+    "../src/**/*.stories.jsx",
+    "../src/**/*.stories.tsx",
+    "../src/**/*.stories.mdx",
+    "*.ts",
+    "*.js",
+    "preview.tsx"
+  ]
+}

packages/kit-fluffy/package.json

@@ -22,6 +22,7 @@
   "private": false,
   "scripts": {
     "build": "qwik build",
+    "build-storybook": "storybook build",
     "build.lib": "vite build --mode lib",
     "build.types": "tsc --emitDeclarationOnly",
     "dev": "vite --mode ssr",
@@ -31,6 +32,7 @@
     "prebuild.pandacss": "panda codegen --silent",
     "release": "np",
     "start": "vite --open --mode ssr",
+    "storybook": "storybook dev -p 6006",
     "qwik": "qwik"
   },
   "dependencies": {},
@@ -39,6 +41,14 @@
   },
   "devDependencies": {
     "@builder.io/vite-plugin-macro": "~0.0.7",
-    "@pandacss/dev": "^0.4.0"
+    "@pandacss/dev": "^0.4.0",
+    "@storybook/addon-essentials": "7.0.23",
+    "@storybook/addon-links": "7.0.23",
+    "@storybook/blocks": "7.0.23",
+    "@storybook/builder-vite": "7.0.23",
+    "@storybook/html": "7.0.23",
+    "@storybook/html-vite": "7.0.23",
+    "storybook": "7.0.23",
+    "storybook-framework-qwik": "0.2.2"
   }
 }

packages/kit-fluffy/postcss.config.js renamed to packages/kit-fluffy/postcss.config.cjs

@@ -65,6 +65,32 @@
         "tag": "${tag}",
         "notes": "${notes}"
       }
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "packages/kit-fluffy/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "uiFramework": "@storybook/html",
+        "configDir": "packages/kit-fluffy/.storybook",
+        "outputDir": "dist/storybook/fluffy"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
     }
   },
   "tags": []

packages/kit-fluffy/project.json

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from 'storybook-framework-qwik';
+import { Button, type ButtonProps } from './button';
+
+const meta: Meta<ButtonProps> = {
+  component: Button
+};
+
+type Story = StoryObj<ButtonProps>;
+
+export default meta;
+
+export const Primary: Story = {
+  args: {
+    size: 'medium'
+  },
+  render: (props) => <Button {...props}>Some button</Button>
+};

packages/kit-fluffy/src/components/button/button.stories.tsx

@@ -41,3 +41,31 @@
   * Find a way to project the source code of this file into the docs
 
 */
+
+import { Slot, component$, useStylesScoped$ } from '@builder.io/qwik';
+
+export interface ButtonProps {
+  size?: 'small' | 'medium' | 'large';
+}
+export const Button = component$<ButtonProps>(({ size = 'medium' }) => {
+  useStylesScoped$(`
+    .size-small {
+      font-size: 10px;
+    }
+    .size-medium {
+      font-size: 14px;
+    }
+    .size-large {
+      font-size: 18px;
+    }
+  `);
+  return (
+    <button
+      class={{
+        [`size-${size}`]: true
+      }}
+    >
+      <Slot></Slot>
+    </button>
+  );
+});

packages/kit-fluffy/src/components/button/button.tsx

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export default () => {};
+
+// THIS FILE IS ONLY HERE TO SATISFY QWIK BUILD