added basic package setup for react, qwik and solidjs

.github/workflows/ci.yml

@@ -18,7 +18,7 @@ jobs:
         with:
           fetch-depth: 0
 
-      - run: npx nx-cloud start-ci-run --distribute-on="5 linux-medium-js" --stop-agents-after="build"
+      # - run: npx nx-cloud start-ci-run --distribute-on="5 linux-medium-js" --stop-agents-after="build"
 
       # Cache node_modules
       - uses: actions/setup-node@v4

.gitignore

@@ -41,3 +41,7 @@ Thumbs.db
 .nx/cache
 
 .envrc
+
+## Panda
+**/styled-system
+**/styled-system-studio

package.json

@@ -1,24 +1,35 @@
 {
-  "name": "@dui/source",
-  "version": "0.0.0",
-  "license": "MIT",
-  "scripts": {
-    "preinstall": "npx only-allow pnpm",
-    "prepare": "husky"
-  },
-  "private": false,
-  "devDependencies": {
-    "@biomejs/biome": "1.5.3",
-    "@nx/js": "18.0.2",
-    "@nx/workspace": "18.0.2",
-    "@types/node": "18.16.9",
-    "husky": "^9.0.10",
-    "nx": "18.0.2",
-    "typescript": "~5.3.2"
-  },
-  "engines": {
-    "pnpm": ">=8.0.0",
-    "node": ">=16.0.0"
-  },
-  "dependencies": {}
+	"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/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"
+	}
 }

packages/css/package.json

@@ -0,0 +1,3 @@
+{
+	"type": "module"
+}

packages/css/panda.config.js

@@ -0,0 +1,2 @@
+import { getDefaultConfig } from "../../panda.base.config.js";
+export default getDefaultConfig(__dirname);

packages/css/postcss.config.js

@@ -0,0 +1,2 @@
+import { getDefaultConfig } from "../../postcss.base.config.js";
+export default getDefaultConfig();

packages/css/project.json

@@ -1,8 +1,15 @@
 {
 	"name": "css",
 	"$schema": "../node_modules/nx/schemas/project-schema.json",
-	"sourceRoot": "css/src",
+	"sourceRoot": "packages/css/src",
 	"projectType": "library",
-	"targets": {},
+	"targets": {
+		"prepare-build": {
+			"executor": "nx:run-commands",
+			"options": {
+				"command": "pnpm panda codegen"
+			}
+		}
+	},
 	"tags": []
 }

packages/qwik/README.md

@@ -0,0 +1,3 @@
+## Qwik components
+
+Contains auto-generated components through Mitosis with PandsCSS styles

packages/qwik/package.json

@@ -0,0 +1,17 @@
+{
+	"type": "module",
+	"scripts": {
+		"build": "qwik build",
+		"build.lib": "vite build --mode lib",
+		"build.types": "tsc --emitDeclarationOnly",
+		"dev": "vite --mode ssr",
+		"dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
+		"fmt": "prettier --write .",
+		"fmt.check": "prettier --check .",
+		"lint": "eslint \"src/**/*.ts*\"",
+		"release": "np",
+		"start": "vite --open --mode ssr",
+		"test": "echo \"No test specified\" && exit 0",
+		"qwik": "qwik"
+	}
+}

packages/qwik/project.json

@@ -0,0 +1,16 @@
+{
+	"name": "qwik",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "packages/qwik/src",
+	"projectType": "library",
+	"targets": {
+		"prepare-build": {
+			"executor": "nx:run-commands",
+			"options": {
+				"cwd": "packages/qwik",
+				"command": "pnpm panda codegen"
+			}
+		}
+	},
+	"tags": []
+}

packages/qwik/src/components/counter/counter.tsx

@@ -0,0 +1,14 @@
+import { component$, useSignal } from "@builder.io/qwik";
+
+export const Counter = component$(() => {
+  const count = useSignal(0);
+
+  return (
+    <div>
+      <p>Count: {count.value}</p>
+      <p>
+        <button onClick$={() => count.value++}>Increment</button>
+      </p>
+    </div>
+  );
+});

packages/qwik/src/components/logo/logo.tsx

@@ -0,0 +1,16 @@
+import { component$ } from "@builder.io/qwik";
+
+export const Logo = component$(() => {
+  return (
+    <div>
+      <a href="https://qwik.builder.io/">
+        <img
+          alt="Qwik Logo"
+          width={400}
+          height={147}
+          src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F667ab6c2283d4c4d878fb9083aacc10f"
+        />
+      </a>
+    </div>
+  );
+});

packages/qwik/src/entry.dev.tsx

@@ -0,0 +1,17 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * Development entry point using only client-side modules:
+ * - Do not use this mode in production!
+ * - No SSR
+ * - No portion of the application is pre-rendered on the server.
+ * - All of the application is running eagerly in the browser.
+ * - More code is transferred to the browser than in SSR mode.
+ * - Optimizer/Serialization/Deserialization code is not exercised!
+ */
+import { render, type RenderOptions } from "@builder.io/qwik";
+import Root from "./root";
+
+export default function (opts: RenderOptions) {
+  return render(document, <Root />, opts);
+}

packages/qwik/src/entry.ssr.tsx

@@ -0,0 +1,25 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is rendered outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
+import {
+  renderToStream,
+  type RenderToStreamOptions,
+} from "@builder.io/qwik/server";
+import { manifest } from "@qwik-client-manifest";
+import Root from "./root";
+
+export default function (opts: RenderToStreamOptions) {
+  return renderToStream(<Root />, {
+    manifest,
+    ...opts,
+  });
+}

packages/qwik/src/index.ts

@@ -0,0 +1,2 @@
+export { Logo } from "./components/logo/logo";
+export { Counter } from "./components/counter/counter";

packages/qwik/src/root.tsx

@@ -0,0 +1,17 @@
+import { Counter } from "./components/counter/counter";
+import { Logo } from "./components/logo/logo";
+
+export default () => {
+  return (
+    <>
+      <head>
+        <meta charSet="utf-8" />
+        <title>Qwik Blank App</title>
+      </head>
+      <body>
+        <Logo />
+        <Counter />
+      </body>
+    </>
+  );
+};

packages/qwik/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"references": [
+		{
+			"path": "./tsconfig.lib.json"
+		},
+		{
+			"path": "./tsconfig.node.json"
+		}
+	]
+}

packages/qwik/tsconfig.lib.json

@@ -0,0 +1,16 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"outDir": "../../dist/css",
+		"declaration": true,
+		"allowSyntheticDefaultImports": true,
+		"esModuleInterop": true,
+		"jsx": "react-jsx",
+		"jsxImportSource": "@builder.io/qwik",
+		"noEmit": true,
+		"isolatedModules": true,
+		"types": ["vite/client"]
+	},
+	"include": ["src/**/*.tsx"],
+	"exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}

packages/qwik/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"skipLibCheck": true,
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"allowSyntheticDefaultImports": true,
+		"types": ["node"]
+	},
+	"include": ["vite.config.ts", "postcss.config.ts", "panda.config.ts"]
+}

packages/qwik/vite.config.ts

@@ -0,0 +1,26 @@
+import { qwikVite } from "@builder.io/qwik/optimizer";
+import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
+import { defineConfig } from "vite";
+import pkg from "./package.json";
+
+const { dependencies = {}, peerDependencies = {} } = pkg as any;
+const makeRegex = (dep) => new RegExp(`^${dep}(/.*)?$`);
+const excludeAll = (obj) => Object.keys(obj).map(makeRegex);
+
+export default defineConfig(() => {
+	return {
+		build: {
+			target: "es2020",
+			lib: {
+				entry: "./src/index.ts",
+				formats: ["es", "cjs"],
+				fileName: (format) => `index.qwik.${format === "es" ? "mjs" : "cjs"}`,
+			},
+			rollupOptions: {
+				// externalize deps that shouldn't be bundled into the library
+				external: [/^node:.*/, ...excludeAll(dependencies), ...excludeAll(peerDependencies)],
+			},
+		},
+		plugins: [qwikVite(), nxViteTsPaths()],
+	};
+});

packages/react/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

packages/react/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/react/README.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

packages/react/package.json

@@ -0,0 +1,9 @@
+{
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc && vite build",
+		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+		"preview": "vite preview"
+	}
+}

packages/react/panda.config.ts

@@ -0,0 +1,2 @@
+import { getDefaultConfig } from "../../panda.base.config.js";
+export default getDefaultConfig(__dirname);

packages/react/postcss.config.ts

@@ -0,0 +1,2 @@
+import { getDefaultConfig } from "../../postcss.base.config.js";
+export default getDefaultConfig();