create-starbase 5.0.0

package/template/src/ui/atoms/StarbaseLogo.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react';
+import { cn } from 'utils';
+
+export function StarbaseLogo({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 576 512"
+      aria-hidden="true"
+      className={cn('fill-red-500 stroke-black', className)}
+      {...props}
+    >
+      <path
+        strokeWidth={30}
+        d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
+      />
+    </svg>
+  );
+}

package/template/src/ui/molecules/DarkModeToggle.tsx

@@ -0,0 +1,29 @@
+import { useCallback, useState } from 'react';
+import { LuMoon, LuSun } from 'react-icons/lu';
+import { Button } from 'atoms/Button';
+import { darkMode } from 'utils';
+
+export function DarkModeToggle() {
+  const [isDark, setIsDark] = useState(
+    () => darkMode.getEffectiveTheme(darkMode.getThemePreference()) === 'dark',
+  );
+
+  const toggle = useCallback(() => {
+    const next = isDark ? 'light' : 'dark';
+    darkMode.setThemePreference(next);
+    darkMode.applyTheme(next);
+    setIsDark(next === 'dark');
+  }, [isDark]);
+
+  return (
+    <Button
+      variant="ghost"
+      iconOnly
+      size="sm"
+      onClick={toggle}
+      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {isDark ? <LuSun size={16} /> : <LuMoon size={16} />}
+    </Button>
+  );
+}

package/template/src/ui/molecules/PageHeader.tsx

@@ -0,0 +1,35 @@
+import { motion, useReducedMotion } from 'motion/react';
+import { useLocation } from '@tanstack/react-router';
+import { StarbaseLogo } from 'atoms/StarbaseLogo';
+
+interface PageHeaderProps {
+  title: string;
+}
+
+export function PageHeader({ title }: PageHeaderProps) {
+  const { pathname } = useLocation();
+  const prefersReducedMotion = useReducedMotion();
+
+  return (
+    <header className="flex flex-col items-center gap-4">
+      <motion.div
+        key={pathname}
+        initial={prefersReducedMotion ? false : { y: -20, rotate: 12 }}
+        animate={{ y: 0, rotate: [16, 8, 14, 10, 12] }}
+        transition={
+          prefersReducedMotion
+            ? { duration: 0 }
+            : { duration: 0.5, ease: 'easeOut' }
+        }
+        whileHover={
+          prefersReducedMotion
+            ? undefined
+            : { rotate: [12, 4, 20, 6, 18, 9, 15, 12] }
+        }
+      >
+        <StarbaseLogo className="size-12" />
+      </motion.div>
+      <h1 className="text-sb-fg-title">{title}</h1>
+    </header>
+  );
+}

package/template/src/ui/molecules/Stargazers.tsx

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+import { github } from 'queries';
+import { Link } from 'atoms/Link';
+
+export function Stargazers() {
+  const { data } = useQuery({
+    ...github.starbaseRepoQueryOptions(),
+    retry: false,
+  });
+
+  return (
+    <Link
+      href="https://github.com/bstaruk/starbase"
+      target="_blank"
+      rel="noopener noreferrer"
+      variant="fg-subtle"
+    >
+      {data
+        ? `${data.stargazers_count.toLocaleString()} stargazers on GitHub`
+        : 'find us on GitHub'}
+      <span className="sr-only"> (opens in new tab)</span>
+    </Link>
+  );
+}

package/template/tsconfig.app.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    /* Path Aliases */
+    "baseUrl": ".",
+    "paths": {
+      "queries": ["src/lib/queries/index.ts"],
+      "utils": ["src/lib/utils/index.ts"],
+      "atoms/*": ["src/ui/atoms/*"],
+      "molecules/*": ["src/ui/molecules/*"],
+      "organisms/*": ["src/ui/organisms/*"],
+      "templates/*": ["src/ui/templates/*"]
+    }
+  },
+  "include": ["src"]
+}

package/template/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/template/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,27 @@
+import path from 'path';
+import { defineConfig } from 'vite';
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    tanstackRouter({ target: 'react', autoCodeSplitting: true }),
+    react(),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      queries: path.resolve(__dirname, 'src/lib/queries'),
+      utils: path.resolve(__dirname, 'src/lib/utils'),
+      atoms: path.resolve(__dirname, 'src/ui/atoms'),
+      molecules: path.resolve(__dirname, 'src/ui/molecules'),
+      organisms: path.resolve(__dirname, 'src/ui/organisms'),
+      templates: path.resolve(__dirname, 'src/ui/templates'),
+    },
+  },
+  server: {
+    port: 3000,
+  },
+});