added storybook to the qwik package

.gitignore

@@ -45,3 +45,6 @@ Thumbs.db
 ## Panda
 **/styled-system
 **/styled-system-studio
+
+
+storybook-static

nx.json

@@ -8,7 +8,6 @@
 	"workspaceLayout": {
 		"libsDir": "packages"
 	},
-
 	"targetDefaults": {
 		"build": {
 			"cache": true,
@@ -20,7 +19,16 @@
 			}
 		}
 	},
-
 	"nxCloudAccessToken": "MTEwOTM4NjctMWQ0Yy00ODliLWE5ODctZDhkMGI4ZDVkMDNifHJlYWQtd3JpdGU=",
-	"plugins": []
+	"plugins": [
+		{
+			"plugin": "@nx/storybook/plugin",
+			"options": {
+				"buildStorybookTargetName": "build-storybook",
+				"serveStorybookTargetName": "storybook",
+				"testStorybookTargetName": "test-storybook",
+				"staticStorybookTargetName": "static-storybook"
+			}
+		}
+	]
 }

package.json

@@ -1,37 +1,48 @@
 {
-	"name": "@dui/source",
-	"version": "0.0.0",
-	"license": "MIT",
-	"type": "module",
-	"scripts": {
-		"preinstall": "npx only-allow pnpm",
-		"prepare": "husky"
-	},
-	"private": false,
-	"devDependencies": {
-		"@biomejs/biome": "1.5.3",
-		"@builder.io/mitosis": "^0.0.145",
-		"@builder.io/mitosis-cli": "^0.0.145",
-		"@builder.io/qwik": "^1.4.3",
-		"@nx/js": "18.0.2",
-		"@nx/vite": "^18.0.2",
-		"@nx/workspace": "18.0.2",
-		"@pandacss/dev": "^0.30.1",
-		"@types/node": "18.16.9",
-		"@types/react": "^18.2.55",
-		"@types/react-dom": "^18.2.18",
-		"@vitejs/plugin-react": "^4.2.1",
-		"husky": "^9.0.10",
-		"nx": "18.0.2",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"solid-js": "^1.8.14",
-		"typescript": "~5.3.2",
-		"vite": "^5.0.12",
-		"vite-plugin-solid": "^2.9.1"
-	},
-	"engines": {
-		"pnpm": ">=8.0.0",
-		"node": ">=16.0.0"
-	}
+  "name": "@dui/source",
+  "version": "0.0.0",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "preinstall": "npx only-allow pnpm",
+    "prepare": "husky"
+  },
+  "private": false,
+  "devDependencies": {
+    "@biomejs/biome": "1.5.3",
+    "@builder.io/mitosis": "^0.0.145",
+    "@builder.io/mitosis-cli": "^0.0.145",
+    "@builder.io/qwik": "^1.4.3",
+    "@nx/js": "18.0.2",
+    "@nx/storybook": "18.0.2",
+    "@nx/vite": "^18.0.2",
+    "@nx/web": "18.0.2",
+    "@nx/workspace": "18.0.2",
+    "@pandacss/dev": "^0.30.1",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/builder-vite": "^7.4.6",
+    "@storybook/html": "^7.4.6",
+    "@storybook/html-vite": "^7.4.6",
+    "@types/node": "18.16.9",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "husky": "^9.0.10",
+    "nx": "18.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "solid-js": "^1.8.14",
+    "storybook": "^7.4.6",
+    "storybook-framework-qwik": "^0.2.4",
+    "typescript": "~5.3.2",
+    "vite": "^5.0.12",
+    "vite-plugin-solid": "^2.9.1"
+  },
+  "engines": {
+    "pnpm": ">=8.0.0",
+    "node": ">=16.0.0"
+  },
+  "dependencies": {}
 }

packages/qwik/.storybook/main.ts

@@ -0,0 +1,23 @@
+import { StorybookConfig } from "storybook-framework-qwik";
+
+const config: StorybookConfig = {
+	addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+	framework: {
+		name: "storybook-framework-qwik",
+	},
+	core: {
+		renderer: "storybook-framework-qwik",
+	},
+	stories: [
+		// ...rootMain.stories,
+		"../src/components/**/*.stories.mdx",
+		"../src/components/**/*.stories.@(js|jsx|ts|tsx)",
+	],
+
+	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+	viteFinal: async (config: any) => {
+		return config;
+	},
+};
+
+export default config;

packages/qwik/.storybook/preview-head.html

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

packages/qwik/.storybook/preview.tsx

@@ -0,0 +1,19 @@
+import { Parameters } from "storybook-framework-qwik";
+
+import "../src/global.css";
+
+export const parameters: Parameters = {
+	a11y: {
+		config: {},
+		options: {
+			checks: { "color-contrast": { options: { noScroll: true } } },
+			restoreScroll: true,
+		},
+	},
+	options: {
+		showRoots: true,
+	},
+	docs: {
+		iframeHeight: "200px",
+	},
+};

packages/qwik/.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/qwik/package.json

@@ -1,3 +1,10 @@
 {
-	"type": "module"
+  "type": "module",
+  "scripts": {
+    "build-storybook": "nx build-storybook",
+    "storybook": "nx storybook -p 6006"
+  },
+  "nx": {
+    "includedScripts": []
+  }
 }

packages/qwik/src/components/button/button.stories.tsx

@@ -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/qwik/src/components/button.tsx → packages/qwik/src/components/button/button.tsx

@@ -1,5 +1,5 @@
 import { buttonRecipie } from "@dui/css/recipies";
-import { styled } from "../styled-system/jsx";
+import { styled } from "../../styled-system/jsx";
 
 export const Button = styled("button", buttonRecipie);
 

packages/qwik/src/components/index.tsx

@@ -1,3 +1,3 @@
 export { AspectRatio, Divider, Circle } from "../styled-system/jsx";
 export type { AspectRatioProps, DividerProps, CircleProps } from "../styled-system/jsx";
-export { Button } from "./button";
+export { Button } from "./button/button";