added solidjs storybook

.prettierignore

@@ -0,0 +1,4 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+/.nx/cache

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-	"recommendations": ["nrwl.angular-console", "biomejs.biome"]
+	"recommendations": ["nrwl.angular-console", "biomejs.biome", "esbenp.prettier-vscode"]
 }

nx.json

@@ -2,7 +2,12 @@
 	"$schema": "./node_modules/nx/schemas/nx-schema.json",
 	"namedInputs": {
 		"default": ["{projectRoot}/**/*", "sharedGlobals"],
-		"production": ["default"],
+		"production": [
+			"default",
+			"!{projectRoot}/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+			"!{projectRoot}/.storybook/**/*",
+			"!{projectRoot}/tsconfig.storybook.json"
+		],
 		"sharedGlobals": []
 	},
 	"workspaceLayout": {
@@ -17,6 +22,9 @@
 			"options": {
 				"outputPath": "dist/{projectRoot}"
 			}
+		},
+		"prepare-build": {
+			"cache": false
 		}
 	},
 	"nxCloudAccessToken": "MTEwOTM4NjctMWQ0Yy00ODliLWE5ODctZDhkMGI4ZDVkMDNifHJlYWQtd3JpdGU=",
@@ -30,5 +38,12 @@
 				"staticStorybookTargetName": "static-storybook"
 			}
 		}
-	]
+	],
+	"tasksRunnerOptions": {
+		"default": {
+			"options": {
+				"cacheableOperations": ["build-storybook"]
+			}
+		}
+	}
 }

package.json

@@ -1,48 +1,65 @@
 {
-  "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": {}
+	"name": "@dui/source",
+	"version": "0.0.0",
+	"license": "MIT",
+	"type": "module",
+	"scripts": {
+		"storybook": "pnpm nx run-many -t storybook --output-style=stream",
+		"build-storybook": "pnpm nx run-many -t build-storybook --output-style=stream",
+		"preinstall": "npx only-allow pnpm",
+		"prepare": "husky"
+	},
+	"private": false,
+	"devDependencies": {
+		"@biomejs/biome": "1.5.3",
+		"@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.32.0",
+		"@storybook/addon-essentials": "7.6.16",
+		"@storybook/addon-interactions": "^7.5.3",
+		"@storybook/addon-links": "^7.4.6",
+		"@storybook/blocks": "^7.4.6",
+		"@storybook/builder-vite": "^7.4.6",
+		"@storybook/core-server": "7.6.16",
+		"@storybook/html": "^7.4.6",
+		"@storybook/html-vite": "^7.4.6",
+		"@storybook/jest": "^0.2.3",
+		"@storybook/react": "7.6.16",
+		"@storybook/react-vite": "7.6.16",
+		"@storybook/test-runner": "^0.13.0",
+		"@storybook/testing-library": "^0.2.2",
+		"@swc-node/register": "~1.6.7",
+		"@swc/core": "~1.3.85",
+		"@swc/helpers": "~0.5.2",
+		"@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",
+		"prettier": "^2.6.2",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"solid-js": "^1.8.14",
+		"storybook": "7.6.16",
+		"storybook-framework-qwik": "^0.2.4",
+		"storybook-solidjs": "1.0.0-beta.2",
+		"storybook-solidjs-vite": "1.0.0-beta.2",
+		"ts-node": "10.9.1",
+		"typescript": "~5.3.2",
+		"vite": "^5.0.12",
+		"vite-plugin-solid": "^2.9.1"
+	},
+	"engines": {
+		"pnpm": ">=8.0.0",
+		"node": ">=16.0.0"
+	},
+	"dependencies": {
+		"@ark-ui/react": "^2.1.1",
+		"@ark-ui/solid": "^2.1.1"
+	}
 }

packages/css/postcss.config.js

@@ -1,2 +1,6 @@
-import { getDefaultConfig } from "../../postcss.base.config.mjs";
-export default getDefaultConfig();
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import test from "../../postcss.base.config.cjs";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export default test.getDefaultConfig(__dirname);

packages/css/src/recipies/button.ts

@@ -1,12 +1,13 @@
 import { defineRecipe } from "@pandacss/dev";
-export const buttonRecipie = defineRecipe({
+
+export const button = defineRecipe({
 	className: "button",
+	jsx: ["Button", "Primary"],
 	staticCss: ["*"],
 	base: {
 		display: "inline-flex",
 		alignItems: "center",
 		justifyContent: "center",
-		backgroundColor: "blue.900",
 		color: "stone.50",
 		borderRadius: "8px",
 		boxShadow: "0 3px 5px rgba(0, 0, 0, 0.18)",
@@ -31,7 +32,15 @@ export const buttonRecipie = defineRecipe({
 				minHeight: "52px",
 			},
 		},
+		variant: {
+			primary: {
+				backgroundColor: "blue.900",
+				color: "stone.50",
+			},
+			secondary: {
+				backgroundColor: "stone.50",
+				color: "blue.900",
+			},
+		},
 	},
 });
-
-export type { ButtonVariant } from "styled-system/recipes";

packages/css/tsconfig.lib.json

@@ -1,8 +1,6 @@
 {
 	"extends": "./tsconfig.json",
-	"compilerOptions": {
-		"baseUrl": "./src",
-	},
-	"include": ["src/**/*.ts"],
+	"compilerOptions": {},
+	"include": ["src/**/*"],
 	"exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
 }

packages/qwik/.storybook/index.css

@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;

packages/qwik/.storybook/main.ts

@@ -1,18 +1,14 @@
-import { StorybookConfig } from "storybook-framework-qwik";
+import type { StorybookConfig } from "storybook-framework-qwik";
 
 const config: StorybookConfig = {
 	addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+	stories: ["../src/components/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
 	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) => {

packages/qwik/.storybook/preview.tsx

@@ -1,19 +1,17 @@
-import { Parameters } from "storybook-framework-qwik";
+import type { Preview } from "storybook-framework-qwik";
+import "./index.css";
 
-import "../src/global.css";
-
-export const parameters: Parameters = {
-	a11y: {
-		config: {},
-		options: {
-			checks: { "color-contrast": { options: { noScroll: true } } },
-			restoreScroll: true,
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: "^on[A-Z].*" },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/,
+			},
 		},
-	},
-	options: {
-		showRoots: true,
-	},
-	docs: {
-		iframeHeight: "200px",
+		layout: "padded",
 	},
 };
+
+export default preview;

packages/qwik/postcss.config.js

@@ -1,2 +1,6 @@
-import { getDefaultConfig } from "../../postcss.base.config.mjs";
-export default getDefaultConfig();
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import test from "../../postcss.base.config.cjs";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export default test.getDefaultConfig(__dirname);

packages/qwik/project.json

@@ -31,6 +31,33 @@
 			"options": {
 				"outputPath": "dist/qwik"
 			}
+		},
+		"storybook": {
+			"executor": "@nx/storybook:storybook",
+			"options": {
+				"port": 4400,
+				"configDir": "packages/qwik/.storybook",
+				"docsMode": true
+			},
+			"configurations": {
+				"ci": {
+					"quiet": true
+				}
+			}
+		},
+		"build-storybook": {
+			"executor": "@nx/storybook:build",
+			"outputs": ["{options.outputDir}"],
+			"options": {
+				"outputDir": "dist/storybook/qwik",
+				"configDir": "packages/qwik/.storybook",
+				"docsMode": true
+			},
+			"configurations": {
+				"ci": {
+					"quiet": true
+				}
+			}
 		}
 	},
 	"tags": []

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

@@ -1,6 +1,18 @@
-import type { Meta, StoryObj } from "storybook-framework-qwik";
+import type { ArgTypes, Meta, StoryObj } from "storybook-framework-qwik";
+import { button } from "../../styled-system/recipes/button";
 import { Button, type ButtonProps } from "./button";
 
+const argTypes = button.variantKeys.reduce(
+	(acc, key) => {
+		acc[key] = {
+			options: button.variantMap[key],
+			control: { type: "inline-radio" },
+		};
+		return acc;
+	},
+	{} as Partial<ArgTypes<ButtonProps>>,
+);
+
 const meta: Meta<ButtonProps> = {
 	component: Button,
 };

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

@@ -1,6 +1,11 @@
-import { buttonRecipie } from "@dui/css/recipies";
+import type { Component } from "@builder.io/qwik";
+import { button } from "@dui/css/recipies";
 import { styled } from "../../styled-system/jsx";
+import type { ButtonVariantProps } from "../../styled-system/recipes";
 
-export const Button = styled("button", buttonRecipie);
+export const Button = styled("button", button);
+export type ButtonProps = Component<ButtonVariantProps>;
 
-export const CssButton = () => <Button size="small">Hello</Button>;
+const Test = () => {
+	return <Button onClick={(e) => e.preventDefault}>Test</Button>;
+};

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 { AspectRatio, Divider, Circle, Square } from "../styled-system/jsx";
+export type { AspectRatioProps, DividerProps, CircleProps, SquareProps } from "../styled-system/jsx";
 export { Button } from "./button/button";

packages/qwik/tsconfig.json

@@ -3,6 +3,9 @@
 	"references": [
 		{
 			"path": "./tsconfig.lib.json"
+		},
+		{
+			"path": "./tsconfig.storybook.json"
 		}
 	]
 }