@tanstack/cta-ui 0.10.0-alpha.26 → 0.10.0-alpha.28

package/src/store/project.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { useQuery } from '@tanstack/react-query'
@@ -10,6 +10,18 @@ import type { Mode, SerializedOptions } from '@tanstack/cta-engine'
 import type { AddOnInfo, DryRunOutput, StarterInfo } from '@/types.js'
 import { dryRunAddToApp, dryRunCreateApp, loadInitialData } from '@/lib/api'
 
+export const useProjectOptions = create<SerializedOptions>(() => ({
+  framework: 'react-cra',
+  mode: 'file-router',
+  projectName: 'my-app',
+  targetDir: 'my-app',
+  typescript: true,
+  tailwind: true,
+  git: true,
+  chosenAddOns: [],
+  packageManager: 'pnpm',
+}))
+
 const useInitialData = () =>
   useQuery({
     queryKey: ['initial-data'],
@@ -18,8 +30,8 @@ const useInitialData = () =>
       options: {
         framework: 'react-cra',
         mode: 'file-router',
-        projectName: 'my-application',
-        targetDir: 'my-application',
+        projectName: 'my-app',
+        targetDir: 'my-app',
         typescript: true,
         tailwind: true,
         git: true,
@@ -50,8 +62,8 @@ export const useRegistry = () => useInitialData().data.registry
 
 export const useProjectLocalFiles = () => useInitialData().data.localFiles
 export const useOriginalOutput = () => useInitialData().data.output
-export const useOriginalSelectedAddOns = () =>
-  useInitialData().data.options.chosenAddOns
+export const useOriginalOptions = () => useInitialData().data.options
+export const useOriginalSelectedAddOns = () => useOriginalOptions().chosenAddOns
 export const useApplicationMode = () => useInitialData().data.applicationMode
 export const useReady = () => useInitialData().isFetched
 export const useCodeRouterAddOns = () =>
@@ -59,18 +71,6 @@ export const useCodeRouterAddOns = () =>
 export const useFileRouterAddOns = () =>
   useInitialData().data.addOns['file-router']
 
-export const useProjectOptions = create<SerializedOptions>(() => ({
-  framework: 'react-cra',
-  mode: 'file-router',
-  projectName: 'my-app',
-  targetDir: 'my-app',
-  typescript: true,
-  tailwind: true,
-  git: true,
-  chosenAddOns: [],
-  packageManager: 'pnpm',
-}))
-
 const useApplicationSettings = create<{
   includeFiles: Array<string>
 }>(() => ({
@@ -128,7 +128,7 @@ export function useAddOns() {
     for (const addOn of originalSelectedAddOns) {
       originalAddOns.add(addOn)
     }
-    for (const addOn of forcedAddOns) {
+    for (const addOn of forcedAddOns || []) {
       originalAddOns.add(addOn)
     }
     return getAddOnStatus(
@@ -148,7 +148,7 @@ export function useAddOns() {
     const addOns = new Set(
       Object.keys(addOnState).filter((addOn) => addOnState[addOn].selected),
     )
-    for (const addOn of forcedAddOns) {
+    for (const addOn of forcedAddOns || []) {
       addOns.add(addOn)
     }
     return Array.from(addOns)
@@ -156,7 +156,7 @@ export function useAddOns() {
 
   const toggleAddOn = useCallback(
     (addOnId: string) => {
-      if (addOnState[addOnId] && addOnState[addOnId].enabled) {
+      if (addOnState[addOnId].enabled) {
         if (addOnState[addOnId].selected) {
           useMutableAddOns.setState((state) => ({
             userSelectedAddOns: state.userSelectedAddOns.filter(
@@ -328,4 +328,20 @@ export function setProjectStarter(starter: StarterInfo | undefined) {
   useProjectStarter.setState(() => ({
     projectStarter: starter,
   }))
+  if (starter) {
+    useProjectOptions.setState({
+      mode: starter.mode,
+    })
+  }
+}
+
+export function useManager() {
+  const ready = useReady()
+  const originalOptions = useOriginalOptions()
+
+  useEffect(() => {
+    if (ready) {
+      useProjectOptions.setState(originalOptions)
+    }
+  }, [ready])
 }

package/src/styles.css

@@ -1,23 +1,38 @@
 @import 'tailwindcss';
+@layer theme, base, components, utilities;
 
 @plugin "tailwindcss-animate";
 
 @source inline("bg-green-500");
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:where(.dark, .dark *));
 
 body {
   @apply m-0;
   font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    'Inter',
+    ui-sans-serif,
+    system-ui,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    Segoe UI Symbol,
+    'Noto Color Emoji';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
+  font-size: 12px;
   font-family:
-    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+    'JetBrains Mono',
+    Menlo,
+    Monaco,
+    Consolas,
+    monospace,
+    Courier New;
+  white-space: pre;
+  -webkit-overflow-scrolling: touch;
 }
 
 :root {
@@ -57,7 +72,7 @@ code {
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
+  --background: rgb(3, 7, 18);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.141 0.005 285.823);
   --card-foreground: oklch(0.985 0 0);
@@ -155,25 +170,74 @@ code {
 }
 
 @layer base {
+  html,
+  body {
+    @apply text-gray-900 bg-gray-50 dark:bg-black dark:text-gray-200;
+    background: rgb(3, 7, 18);
+  }
+
+  .using-mouse * {
+    outline: none !important;
+  }
+
   * {
-    @apply border-border outline-ring/50;
+    scrollbar-color: theme(colors.gray.400) theme(colors.gray.100);
   }
-  body {
-    @apply bg-background text-foreground;
+
+  *::-webkit-scrollbar,
+  * scrollbar {
+    width: 1rem;
+    height: 1rem;
   }
-}
 
-[data-sidebar='group'] {
-  background-color: hsl(240 5.9% 6%) !important;
-  @apply mb-2 rounded-lg inset-shadow-gray-600 inset-shadow-sm;
-}
+  *::-webkit-scrollbar-track,
+  * scrollbar-track {
+    background: theme(colors.gray.100);
+  }
 
-[data-sidebar='content'] {
-  @apply p-2 pt-5;
-}
+  *::-webkit-scrollbar-thumb,
+  * scrollbar-thumb {
+    background: theme(colors.gray.300);
+    border-radius: 0.5rem;
+    border: 3px solid theme(colors.gray.100);
+  }
 
-[data-sidebar='header'] {
-  @apply shadow-gray-700 shadow-md z-50;
+  html.dark {
+    &,
+    * {
+      color-scheme: dark;
+    }
+
+    &,
+    * {
+      scrollbar-color: theme(colors.gray.700) theme(colors.gray.800);
+    }
+
+    &::-webkit-scrollbar,
+    *::-webkit-scrollbar,
+    * scrollbar {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    & *::-webkit-scrollbar-track,
+    *::-webkit-scrollbar-track,
+    * scrollbar-track {
+      background: theme(colors.gray.800);
+    }
+
+    &::-webkit-scrollbar-thumb,
+    *::-webkit-scrollbar-thumb,
+    * scrollbar-thumb {
+      background: theme(colors.gray.600);
+      border-radius: 0.5rem;
+      border: 3px solid theme(colors.gray.800);
+    }
+  }
+
+  [disabled] {
+    @apply opacity-50 pointer-events-none;
+  }
 }
 
 .cm-changedLine {
@@ -183,3 +247,11 @@ code {
 .file-filters {
   background-color: oklch(0.2 0.005 285.823);
 }
+
+.font-black {
+  font-weight: 900;
+}
+
+.font-medium {
+  font-weight: 800;
+}

package/src/types.d.ts

@@ -80,7 +80,7 @@ export type InitialData = {
   applicationMode: ApplicationMode
   forcedRouterMode?: Mode
   forcedAddOns?: Array<string>
-  registry: Registry | undefined
+  registry?: Registry | undefined
 }
 
 export type EventItem = {

package/tailwind.config.cjs

@@ -0,0 +1,47 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,ts,jsx,tsx}', './index.html'],
+  plugins: [require('@tailwindcss/typography')],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: `"Inter", ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"`,
+      },
+      zIndex: {
+        '-10': '-10',
+      },
+      boxShadow: {
+        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
+        DEFAULT:
+          '0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03)',
+        md: '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
+        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)',
+        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02)',
+        '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.2)',
+        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.25)',
+        inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.04)',
+        none: 'none',
+      },
+      aria: {
+        current: 'current="location"',
+      },
+      colors: {
+        twine: {
+          50: '#f8f5ee',
+          100: '#eee6d3',
+          200: '#dfcda9',
+          300: '#cdac77',
+          400: '#bd9051',
+          500: '#ae7d44',
+          600: '#956339',
+          700: '#784b30',
+          800: '#653f2e',
+          900: '#58362b',
+          950: '#321c16',
+        },
+        discord: '#536bbd',
+      },
+    },
+  },
+}