Create react package (#1)

.github/workflows/ci.yml

@@ -28,9 +28,9 @@ jobs:
       - uses: ./.github/shared
       - run: pnpm lint
 
-  tsc:
+  typecheck:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/shared
-      - run: pnpm tsc
+      - run: pnpm typecheck

.gitignore

@@ -58,3 +58,5 @@ web_modules/
 .DS_Store
 
 .nx
+
+packages/*/dist

apps/www/package.json

@@ -10,7 +10,7 @@
     "build-pagefind": "pagefind --site .vercel/output/static && cp -r .vercel/output/static/pagefind public",
     "preview": "astro preview",
     "astro": "astro",
-    "tsc": "astro check"
+    "typecheck": "astro check"
   },
   "dependencies": {
     "@astrojs/db": "^0.8.6",
@@ -57,7 +57,8 @@
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "@llm-ui/react": "workspace:*"
   },
   "devDependencies": {
     "@astrojs/check": "^0.5.10",

apps/www/src/components/CommandMenu.tsx

@@ -12,8 +12,11 @@ import {
 } from "@/components/ui/Command";
 import { search, type PagefindResultWithData } from "@/lib/search";
 import { cn } from "@/lib/utils";
+import { helloWorld } from "@llm-ui/react";
 import { FileIcon } from "lucide-react";
 
+helloWorld();
+
 type CommandMenuProps = DialogProps;
 
 export const CommandMenu = ({ ...props }: CommandMenuProps) => {

eslint.config.mjs

@@ -7,31 +7,36 @@ import reactRecommended from "eslint-plugin-react/configs/recommended.js";
 import globals from "globals";
 const astroRecommended = eslintPluginAstro.configs["flat/recommended"];
 
-const wwwFolder = "apps/www";
+const appWww = "apps/www";
+const packageReact = "packages/react";
+
+const reactProjects = [appWww, packageReact];
+const reactProjectsGlob = `{${reactProjects.join(",")}}`;
+const typescriptProjects = [...reactProjects];
 
 export default [
   {
     ignores: [
-      `${wwwFolder}/{public,dist,.vercel,.astro}/**/*`,
-      `${wwwFolder}/src/components/Posthog.astro`,
+      `${appWww}/{public,dist,.vercel,.astro}/**/*`,
+      `${appWww}/src/components/Posthog.astro`,
     ],
   },
-  {
-    files: [`${wwwFolder}/**/*.{ts,tsx}`],
+  ...typescriptProjects.map((project) => ({
+    files: [`${project}/**/*.{ts,tsx}`],
     plugins: {
       "@typescript-eslint": typescriptPlugin,
     },
     languageOptions: {
       parser: typescriptParser,
       parserOptions: {
-        project: `${wwwFolder}/tsconfig.json`,
+        project: `${project}/tsconfig.json`,
         sourceType: "module",
         ecmaVersion: 2020,
       },
     },
-  },
+  })),
   {
-    files: [`${wwwFolder}/**/*.{jsx,tsx}`],
+    files: [`${reactProjectsGlob}/**/*.{jsx,tsx}`],
     ...reactRecommended,
     languageOptions: {
       ...reactRecommended.languageOptions,
@@ -46,7 +51,7 @@ export default [
     },
   },
   {
-    files: [`${wwwFolder}/**/*.{js,jsx,mjs,cjs,ts,tsx}`],
+    files: [`${reactProjectsGlob}/**/*.{js,jsx,mjs,cjs,ts,tsx}`],
     ...js.configs.recommended,
     plugins: {
       "prefer-arrow": preferArrow,
@@ -67,7 +72,7 @@ export default [
   },
   {
     ...astroRecommended,
-    files: [`${wwwFolder}/**/*.{astro}`],
+    files: [`${appWww}/**/*.{astro}`],
     rules: {
       ...astroRecommended.rules,
     },

lint-staged.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  "{apps,packages,tools}/**/*.{cjs,mjs,js,ts,jsx,tsx,json,yaml,yml,astro,css}":
+  "{apps,packages,tooling}/**/*.{cjs,mjs,js,ts,jsx,tsx,json,yaml,yml,astro,css}":
     [
       (files) => `pnpm exec eslint ${files.join(" ")}`,
       (files) =>

package.json

@@ -2,9 +2,12 @@
   "name": "llm-ui",
   "packageManager": "[email protected]+sha256.4b4efa12490e5055d59b9b9fc9438b7d581a6b7af3b5675eb5c5f447cee1a589",
   "scripts": {
+    "ci": "pnpm lint && pnpm typecheck && pnpm build",
     "lint": "eslint .",
     "dev": "nx run-many -t dev",
-    "tsc": "nx run-many -t tsc",
+    "build": "nx run-many -t build",
+    "typecheck": "nx run-many -t typecheck",
+    "test": "nx run-many -t test -- run",
     "prepare": "husky",
     "format-check": "prettier --config=.prettierrc.precommit.mjs --check .",
     "format-write": "prettier --config=.prettierrc.precommit.mjs --write ."
@@ -24,7 +27,8 @@
     "prettier-plugin-astro": "^0.13.0",
     "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-tailwindcss": "^0.5.13",
-    "typescript": "^5.4.3"
+    "typescript": "^5.4.3",
+    "vitest": "^1.3.1"
   },
   "license": "ISC"
 }

packages/react/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@llm-ui/react",
+  "version": "0.0.1",
+  "type": "module",
+  "license": "ISC",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./src/index.ts"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "@llm-ui/tsconfig": "workspace:*",
+    "@types/react": "18.2.60",
+    "@types/react-dom": "18.2.19",
+    "@uploadthing/eslint-config": "0.2.0",
+    "react": "18.2.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.3"
+  }
+}

packages/react/src/dummy.test.ts

@@ -0,0 +1,7 @@
+import { describe, expect, it } from "vitest";
+
+describe("dummy", () => {
+  it("dummy", () => {
+    expect(1 + 1).toBe(2);
+  });
+});

packages/react/src/index.ts

@@ -0,0 +1 @@
+export const helloWorld = () => console.log("Hello world!");

packages/react/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@llm-ui/tsconfig/base",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*", "*.ts", "test"],
+  "exclude": ["node_modules"]
+}

packages/react/tsup.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+  format: ["cjs", "esm"],
+});

packages/react/vitest.config.ts

@@ -0,0 +1 @@
+export { default } from "../../vitest.config";