Add tools section / triplex integration / vscode extensions suggestion integration point

.github/workflows/build.yml

@@ -0,0 +1,35 @@
+name: Build
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-22.04
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+          run_install: true
+
+      - name: Build packages
+        run: pnpm --filter "@react-three/*" build
+
+      - name: Build website
+        run: pnpm --filter "react-three-org-website" build
+
+      - name: Build gh-app
+        run: pnpm --filter "github-app" build

.github/workflows/test.yml

@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-22.04
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+          run_install: true
+
+      - name: Run tests
+        run: pnpm test

README.md

@@ -44,6 +44,7 @@ npm create @react-three
 | `--offscreen` | Add [@react-three/offscreen](https://github.com/pmndrs/offscreen) for offscreen rendering |
 | `--zustand` | Add [zustand](https://github.com/pmndrs/zustand) for state management |
 | `--koota` | Add [koota](https://github.com/pmndrs/koota) for animation |
+| `--triplex` | Add [Triplex](https://triplex.dev) for a visual development environment |
 | `--package-manager <manager>` | Specify package manager (npm, yarn, or pnpm) |
 | `--skip-setup` | Skip automatic dependency installation, dev server start, and browser opening |
 | `-y, --yes` | Skip prompts and use default values |

apps/github/src/index.ts

@@ -35,6 +35,7 @@ const GenerateOptionsSchema = z.object({
   rapier: z.boolean().optional(),
   uikit: z.boolean().optional(),
   xr: z.boolean().optional(),
+  triplex: z.boolean().optional(),
   zustand: z.boolean().optional(),
 })
 

apps/react-three-org/src/app.tsx

@@ -4,30 +4,25 @@ import { useQuery } from '@tanstack/react-query'
 import { PackageCard } from '@/components/package-card'
 import { ProjectConfigurator } from '@/components/project-configurator'
 import { NavBar } from '@/components/nav-bar'
-import { packages } from '@/lib/packages'
+import { packages, tools, PackageIDs, ToolIDs } from '@/lib/packages'
 import { BackgroundAnimation } from '@/components/background-animation'
-import { Button } from './components/ui/button.js'
-import { CheckSquare, PackageIcon, X } from 'lucide-react'
+import { CogIcon, PackageIcon } from 'lucide-react'
 import { Toaster } from 'sonner'
+import { SelectionSection } from './components/selection-section.js'
 
 const searchParams = new URLSearchParams(location.search)
-
 const sessionAccessTokenKey = 'access_token'
 const sessionAccessToken = sessionStorage.getItem(sessionAccessTokenKey)
 
 export function App() {
   const [state, setState] = useState(() => searchParams.get('state'))
-  const [selectedPackages, setSelectedPackages] = useState<string[]>([])
+  const [selectedPackages, setSelectedPackages] = useState<PackageIDs[]>([])
+  const [selectedTools, setSelectedTools] = useState<ToolIDs[]>(['triplex'])
+
   if (state != null) {
     return <GithubRepo state={state} />
   }
 
-  const togglePackage = (packageId: string) => {
-    setSelectedPackages((prev) =>
-      prev.includes(packageId) ? prev.filter((id) => id !== packageId) : [...prev, packageId],
-    )
-  }
-
   return (
     <main className="relative min-h-screen flex flex-col pb-36">
       <BackgroundAnimation />
@@ -43,55 +38,66 @@ export function App() {
         {/* Visual separator using space instead of a border */}
         <div className="mb-10 mt-8"></div>
 
-        <div className="flex flex-col mb-6">
-          <div className="flex justify-between items-center">
-            <p className="text-sm font-medium text-white/70 flex items-center">
-              <PackageIcon className="h-3.5 w-3.5 mr-1.5 opacity-70" />
-              Select packages to include in your project
-            </p>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="text-xs hover:bg-white/5 flex items-center"
-              onClick={() => {
-                if (selectedPackages.length === packages.length) {
-                  setSelectedPackages([])
-                } else {
-                  setSelectedPackages(packages.map((pkg) => pkg.id))
-                }
-              }}
-              aria-label={selectedPackages.length === packages.length ? "Deselect all packages" : "Select all packages"}
-            >
-              {selectedPackages.length === packages.length ? (
-                <X className="h-3.5 w-3.5 mr-1 opacity-70" />
-              ) : (
-                <CheckSquare className="h-3.5 w-3.5 mr-1 opacity-70" />
-              )}
-              {selectedPackages.length === packages.length ? 'Deselect All' : 'Select All'}
-            </Button>
-          </div>
-        </div>
+        <SelectionSection
+          value={selectedPackages}
+          icon={PackageIcon}
+          label="packages"
+          onChange={setSelectedPackages}
+          options={packages}
+        />
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
           {packages.map((pkg) => (
             <PackageCard
               key={pkg.id}
               package={pkg}
               isSelected={selectedPackages.includes(pkg.id)}
-              onToggle={() => togglePackage(pkg.id)}
+              onToggle={() => {
+                setSelectedPackages((prev) =>
+                  prev.includes(pkg.id) ? prev.filter((id) => id !== pkg.id) : [...prev, pkg.id],
+                )
+              }}
+            />
+          ))}
+        </div>
+
+        {/* Visual separator using space instead of a border */}
+        <div className="mb-10 mt-8"></div>
+
+        <SelectionSection
+          label="tools"
+          value={selectedTools}
+          icon={CogIcon}
+          onChange={setSelectedTools}
+          options={tools}
+        />
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+          {tools.map((pkg) => (
+            <PackageCard
+              key={pkg.id}
+              package={pkg}
+              isSelected={selectedTools.includes(pkg.id)}
+              onToggle={() => {
+                setSelectedTools((prev) =>
+                  prev.includes(pkg.id) ? prev.filter((id) => id !== pkg.id) : [...prev, pkg.id],
+                )
+              }}
             />
           ))}
         </div>
 
         <ProjectConfigurator
           createGithubRepo={() => {
             const integrations: any = {}
-            for (const integration of selectedPackages) {
+            const selections = [...selectedPackages, ...selectedTools]
+            for (const integration of selections) {
               integrations[integration] = true
             }
+
             setState(btoa(JSON.stringify(integrations)))
           }}
-          selectedPackages={selectedPackages}
+          selections={[...selectedPackages, ...selectedTools]}
         />
       </div>
       <Toaster

apps/react-three-org/src/components/project-configurator.tsx

@@ -5,12 +5,14 @@ import JSZip from 'jszip'
 import { toast } from 'sonner'
 
 interface ProjectConfiguratorProps {
-  selectedPackages: string[]
+  selections: string[]
   createGithubRepo: () => void
 }
 
-export function ProjectConfigurator({ selectedPackages, createGithubRepo }: ProjectConfiguratorProps) {
-  const command = `npm create @react-three ${selectedPackages.length > 0 ? "-- " : ""}${selectedPackages.map((id) => `--${id}`).join(' ')}`
+export function ProjectConfigurator({ selections, createGithubRepo }: ProjectConfiguratorProps) {
+  const command = `npm create @react-three ${selections.length > 0 ? '-- ' : ''}${selections
+    .map((id) => `--${id}`)
+    .join(' ')}`
 
   const copyToClipboard = async () => {
     try {
@@ -41,7 +43,7 @@ export function ProjectConfigurator({ selectedPackages, createGithubRepo }: Proj
               onClick={async () => {
                 const element = document.createElement('a')
                 const options: any = {}
-                for (const selectedPackage of selectedPackages) {
+                for (const selectedPackage of selections) {
                   options[selectedPackage] = true
                 }
                 const files = generate(options)

apps/react-three-org/src/components/selection-section.tsx

@@ -0,0 +1,51 @@
+import { JSX } from 'react'
+import { Button } from './ui/button'
+import { Package } from '../lib/packages'
+import { CheckSquare, X } from 'lucide-react'
+
+interface SelectionSectionProps<TOption extends string> {
+  icon: (props: { className?: string }) => React.ReactNode
+  options: Package[]
+  value: TOption[]
+  onChange: (value: TOption[]) => void
+  label: string
+}
+
+export function SelectionSection<TOption extends string>({
+  label,
+  value,
+  onChange,
+  options,
+  icon: Icon,
+}: SelectionSectionProps<TOption>) {
+  return (
+    <div className="flex flex-col mb-6">
+      <div className="flex justify-between items-center">
+        <p className="text-sm font-medium text-white/70 flex items-center">
+          <Icon className="h-3.5 w-3.5 mr-1.5 opacity-70" />
+          Select {label} to include in your project
+        </p>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-xs hover:bg-white/5 flex items-center"
+          onClick={() => {
+            if (options.length === value.length) {
+              onChange([])
+            } else {
+              onChange(options.map((pkg) => pkg.id as TOption))
+            }
+          }}
+          aria-label={value.length === options.length ? `Deselect all ${label}` : `Select all ${label}`}
+        >
+          {value.length === options.length ? (
+            <X className="h-3.5 w-3.5 mr-1 opacity-70" />
+          ) : (
+            <CheckSquare className="h-3.5 w-3.5 mr-1 opacity-70" />
+          )}
+          {value.length === options.length ? 'Deselect All' : 'Select All'}
+        </Button>
+      </div>
+    </div>
+  )
+}

apps/react-three-org/src/lib/packages.ts

@@ -80,4 +80,18 @@ export const packages: Package[] = [
     githubUrl: "https://github.com/pmndrs/zustand",
     docsUrl: "https://zustand.docs.pmnd.rs/",
   },
-]
+] as const satisfies Package[]
+
+export const tools = [
+  {
+    id: 'triplex',
+    name: 'Triplex',
+    description: 'Build the 2D and 3D web without coding. Your visual workspace for React / Three Fiber.',
+    githubUrl: 'https://github.com/try-triplex/triplex',
+    docsUrl: 'https://triplex.dev/docs/get-started',
+  },
+] as const satisfies Package[]
+
+export type ToolIDs = (typeof tools)[number]['id']
+
+export type PackageIDs = (typeof packages)[number]['id']

package.json

@@ -2,6 +2,10 @@
   "dependencies": {
     "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
-    "json": "^11.0.0"
+    "json": "^11.0.0",
+    "vitest": "^3.1.3"
+  },
+  "scripts": {
+    "test": "vitest"
   }
 }

packages/react-three-create/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "build": "tsc",
+    "build": "tsc --project ./tsconfig.build.json",
     "dev": "node --loader ts-node/esm src/cli.ts"
   },
   "files": [

packages/react-three-create/src/cli.ts

@@ -86,7 +86,8 @@ async function promptForOptions(name: string | undefined): Promise<GenerateOptio
     {
       type: 'confirm',
       name: 'skipSetup' as const,
-      message: 'Skip automatic setup? (This will skip installing dependencies, starting the dev server, and opening the browser)',
+      message:
+        'Skip automatic setup? (This will skip installing dependencies, starting the dev server, and opening the browser)',
       initial: false,
     },
     {
@@ -114,6 +115,7 @@ async function promptForOptions(name: string | undefined): Promise<GenerateOptio
         { title: 'Offscreen', value: 'offscreen', selected: true },
         { title: 'Zustand', value: 'zustand', selected: true },
         { title: 'Koota', value: 'koota', selected: true },
+        { title: 'Triplex', value: 'triplex', selected: true },
       ],
     },
   ] satisfies Array<PromptObject>
@@ -142,6 +144,7 @@ async function promptForOptions(name: string | undefined): Promise<GenerateOptio
     offscreen: answers.integrations?.includes('offscreen') ? {} : undefined,
     zustand: answers.integrations?.includes('zustand') ? {} : undefined,
     koota: answers.integrations?.includes('koota') ? {} : undefined,
+    triplex: answers.integrations?.includes('triplex') ? {} : undefined,
     packageManager: answers.packageManager === 'custom' ? answers.customPackageManager : answers.packageManager,
     skipSetup: answers.skipSetup,
   }
@@ -161,6 +164,7 @@ interface CliOptions {
   offscreen?: boolean
   zustand?: boolean
   koota?: boolean
+  triplex?: boolean
   'package-manager'?: string
   'skip-setup'?: boolean
   yes?: boolean
@@ -184,6 +188,7 @@ async function main() {
     .option('--offscreen', 'add @react-three/offscreen')
     .option('--zustand', 'add zustand')
     .option('--koota', 'add koota')
+    .option('--triplex', 'set up triplex development environment')
     .option('--package-manager <manager>', 'specify package manager (e.g. npm, yarn, pnpm)')
     .option(
       '--skip-setup',
@@ -210,6 +215,7 @@ async function main() {
           offscreen: options.offscreen ? {} : undefined,
           zustand: options.zustand ? {} : undefined,
           koota: options.koota ? {} : undefined,
+          triplex: options.triplex,
           packageManager: options['package-manager'],
           skipSetup: options['skip-setup'],
         }