create-starbase 5.0.0

package/template/src/lib/theme/tailwind.css

@@ -0,0 +1,167 @@
+/*
+  Theme Prefix: "sb-" (starbase)
+  To customize for your project, find/replace "sb-" with your own prefix.
+*/
+
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant is-active (&:not(:disabled):hover, &:not(:disabled):focus-visible);
+
+@theme {
+  /* Fonts */
+  --font-sans: 'Nunito', sans-serif;
+  --font-display: 'Bricolage Grotesque', serif;
+  --font-mono: 'Roboto Mono', monospace;
+
+  /* Text Variant: h1 - Bold display headings */
+  /* 22px → 30px */
+  --text-h1: clamp(1.375rem, 1.125rem + 0.75vw, 1.875rem);
+  --text-h1--font-weight: 600;
+  --text-h1--line-height: 1.15;
+  --text-h1--letter-spacing: -0.01em;
+
+  /* Text Variant: h2 */
+  /* 20px → 24px */
+  --text-h2: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);
+  --text-h2--font-weight: 600;
+  --text-h2--line-height: 1.2;
+  --text-h2--letter-spacing: -0.005em;
+
+  /* Text Variant: h3 */
+  /* 18px → 22px */
+  --text-h3: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
+  --text-h3--font-weight: 600;
+  --text-h3--line-height: 1.25;
+  --text-h3--letter-spacing: -0.005em;
+
+  /* Text Variant: h4 */
+  /* 17px → 20px */
+  --text-h4: clamp(1.0625rem, 0.975rem + 0.275vw, 1.25rem);
+  --text-h4--font-weight: 600;
+  --text-h4--line-height: 1.3;
+  --text-h4--letter-spacing: 0;
+
+  /* Text Variant: h5 */
+  /* 16px → 18px */
+  --text-h5: clamp(1rem, 0.95rem + 0.15vw, 1.125rem);
+  --text-h5--font-weight: 500;
+  --text-h5--line-height: 1.35;
+  --text-h5--letter-spacing: 0;
+
+  /* Text Variant: base - 16px to 17px */
+  --text-base: clamp(1rem, 0.974rem + 0.098vw, 1.063rem);
+  --text-base--font-weight: 400;
+  --text-base--line-height: 1.55;
+  --text-base--letter-spacing: 0.005em;
+
+  /* Text Variant: sm - 15px to 16px */
+  --text-sm: clamp(0.9375rem, 0.912rem + 0.098vw, 1rem);
+  --text-sm--font-weight: 400;
+  --text-sm--line-height: 1.5;
+  --text-sm--letter-spacing: 0.005em;
+
+  /* Text Variant: xs - 14px to 15px */
+  --text-xs: clamp(0.875rem, 0.849rem + 0.098vw, 0.9375rem);
+  --text-xs--font-weight: 400;
+  --text-xs--line-height: 1.45;
+  --text-xs--letter-spacing: 0.01em;
+
+  /* Spacing (padding, margins, height, width, etc) */
+  --spacing-wrapper-page-full-x: clamp(0.75rem, 0.25rem + 1.5vw, 1rem);
+
+  /* List Style Types */
+  --list-style-type-circle: circle;
+  --list-style-type-roman: lower-roman;
+}
+
+/*
+  Theme Color Semantics
+  Mapping primitives to functional roles.
+*/
+@layer base {
+  :root {
+    /* Light Mode Mappings */
+
+    /* Surfaces */
+    --sb-surface: var(--color-stone-100);
+    --sb-surface-raised: var(--color-stone-50);
+    --sb-canvas: var(--color-stone-200);
+
+    /* Text */
+    --sb-fg: var(--color-stone-700);
+    --sb-fg-subtle: var(--color-stone-600);
+    --sb-fg-title: var(--color-stone-800);
+
+    /* Borders */
+    --sb-divider: var(--color-stone-300);
+
+    /* Action */
+    --sb-action: var(--color-red-700);
+    --sb-action-active: var(--color-red-800);
+
+    /* Navigation */
+    --sb-anchor: var(--color-red-700);
+    --sb-anchor-active: var(--color-red-800);
+  }
+
+  ::selection {
+    background-color: var(--color-stone-300);
+    color: var(--color-stone-900);
+  }
+
+  .dark {
+    /* Dark Mode Mappings */
+
+    /* Surfaces */
+    --sb-surface: var(--color-zinc-900);
+    --sb-surface-raised: var(--color-zinc-800);
+    --sb-canvas: var(--color-zinc-950);
+
+    /* Text */
+    --sb-fg: var(--color-zinc-300);
+    --sb-fg-subtle: var(--color-zinc-400);
+    --sb-fg-title: var(--color-zinc-200);
+
+    /* Borders */
+    --sb-divider: var(--color-zinc-800);
+
+    /* Action */
+    --sb-action: var(--color-red-500);
+    --sb-action-active: var(--color-red-400);
+
+    /* Navigation */
+    --sb-anchor: var(--color-red-400);
+    --sb-anchor-active: var(--color-red-300);
+  }
+
+  .dark ::selection {
+    background-color: var(--color-zinc-700);
+    color: var(--color-zinc-100);
+  }
+}
+
+/*
+  Color Tokens
+  Exposing semantic variables as Tailwind utilities.
+*/
+@theme {
+  /* Backgrounds */
+  --color-sb-surface: var(--sb-surface);
+  --color-sb-surface-raised: var(--sb-surface-raised);
+  --color-sb-canvas: var(--sb-canvas);
+
+  /* Text / Foreground */
+  --color-sb-fg: var(--sb-fg);
+  --color-sb-fg-subtle: var(--sb-fg-subtle);
+  --color-sb-fg-title: var(--sb-fg-title);
+
+  /* Borders */
+  --color-sb-divider: var(--sb-divider);
+
+  /* UI Elements */
+  --color-sb-action: var(--sb-action);
+  --color-sb-action-active: var(--sb-action-active);
+  --color-sb-anchor: var(--sb-anchor);
+  --color-sb-anchor-active: var(--sb-anchor-active);
+}

package/template/src/lib/utils/cn.ts

@@ -0,0 +1,16 @@
+import { type ClassValue, clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      spacing: ['wrapper-page-full-x'],
+      text: ['h1', 'h2', 'h3', 'h4', 'h5', 'base', 'sm', 'xs'],
+    },
+    classGroups: {
+      'list-style-type': [{ list: ['circle', 'roman'] }],
+    },
+  },
+});
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

package/template/src/lib/utils/darkMode.ts

@@ -0,0 +1,44 @@
+import Cookies from 'js-cookie';
+
+const DARK_MODE_COOKIE = 'theme-preference';
+const DARK_CLASS = 'dark';
+
+export type ThemePreference = 'light' | 'dark' | 'system';
+
+export function getThemePreference(): ThemePreference {
+  const value = Cookies.get(DARK_MODE_COOKIE);
+
+  if (value === 'light' || value === 'dark') {
+    return value;
+  }
+
+  return 'system';
+}
+
+export function setThemePreference(preference: ThemePreference): void {
+  Cookies.set(DARK_MODE_COOKIE, preference, {
+    expires: 365,
+    sameSite: 'lax',
+  });
+}
+
+export function getEffectiveTheme(
+  preference: ThemePreference,
+): 'light' | 'dark' {
+  if (preference === 'system') {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light';
+  }
+  return preference;
+}
+
+export function applyTheme(theme: 'light' | 'dark'): void {
+  if (theme === 'dark') {
+    document.documentElement.classList.add(DARK_CLASS);
+    document.documentElement.style.backgroundColor = 'var(--sb-canvas)';
+  } else {
+    document.documentElement.classList.remove(DARK_CLASS);
+    document.documentElement.style.backgroundColor = 'var(--sb-surface)';
+  }
+}

package/template/src/lib/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './cn';
+export * as darkMode from './darkMode';

package/template/src/main.tsx

@@ -0,0 +1,38 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+
+import '@fontsource/bricolage-grotesque/400.css';
+import '@fontsource/bricolage-grotesque/500.css';
+import '@fontsource/bricolage-grotesque/600.css';
+import '@fontsource/nunito/400.css';
+import '@fontsource/nunito/500.css';
+import '@fontsource/nunito/600.css';
+import '@fontsource/roboto-mono/400.css';
+
+import './lib/theme/app.css';
+
+import { routeTree } from './routeTree.gen';
+
+const queryClient = new QueryClient();
+
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  context: { queryClient },
+});
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  </StrictMode>,
+);

package/template/src/routeTree.gen.ts

@@ -0,0 +1,77 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as LiftoffRouteImport } from './routes/liftoff'
+import { Route as IndexRouteImport } from './routes/index'
+
+const LiftoffRoute = LiftoffRouteImport.update({
+  id: '/liftoff',
+  path: '/liftoff',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/liftoff': typeof LiftoffRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/liftoff': typeof LiftoffRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/liftoff': typeof LiftoffRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/liftoff'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/liftoff'
+  id: '__root__' | '/' | '/liftoff'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  LiftoffRoute: typeof LiftoffRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/liftoff': {
+      id: '/liftoff'
+      path: '/liftoff'
+      fullPath: '/liftoff'
+      preLoaderRoute: typeof LiftoffRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  LiftoffRoute: LiftoffRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/template/src/routes/__root.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import type { QueryClient } from '@tanstack/react-query';
+import {
+  HeadContent,
+  createRootRouteWithContext,
+  Outlet,
+} from '@tanstack/react-router';
+import { DarkModeToggle } from 'molecules/DarkModeToggle';
+import { Stargazers } from 'molecules/Stargazers';
+
+export interface RouterContext {
+  queryClient: QueryClient;
+}
+
+const devtools =
+  !import.meta.env.PROD && import.meta.env.VITE_DEVTOOLS === 'true';
+
+const TanStackRouterDevtools = devtools
+  ? React.lazy(() =>
+      import('@tanstack/react-router-devtools').then((res) => ({
+        default: res.TanStackRouterDevtools,
+      })),
+    )
+  : () => null;
+
+const ReactQueryDevtools = devtools
+  ? React.lazy(() =>
+      import('@tanstack/react-query-devtools').then((res) => ({
+        default: res.ReactQueryDevtools,
+      })),
+    )
+  : () => null;
+
+export const Route = createRootRouteWithContext<RouterContext>()({
+  component: () => (
+    <>
+      <HeadContent />
+      <main className="flex min-h-screen flex-col items-center justify-center gap-6 p-8">
+        <Outlet />
+        <footer className="flex items-center gap-3">
+          <Stargazers />
+          <DarkModeToggle />
+        </footer>
+      </main>
+      <TanStackRouterDevtools />
+      <ReactQueryDevtools />
+    </>
+  ),
+});

package/template/src/routes/index.tsx

@@ -0,0 +1,29 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { Code } from 'atoms/Code';
+import { RouterLink } from 'atoms/Link';
+import { PageHeader } from 'molecules/PageHeader';
+
+export const Route = createFileRoute('/')({
+  component: Index,
+  head: () => ({
+    meta: [{ title: 'Starbase' }],
+  }),
+});
+
+function Index() {
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <PageHeader title="Starbase" />
+      <p className="text-sb-fg-subtle max-w-md text-center text-balance">
+        A launchpad for modern React apps, built on Vite, TypeScript, Tailwind
+        CSS, TanStack Router, and TanStack Query. Start your mission today:
+      </p>
+
+      <Code>npm create starbase@latest</Code>
+
+      <RouterLink to="/liftoff" className="text-sm">
+        Ready for liftoff?
+      </RouterLink>
+    </div>
+  );
+}

package/template/src/routes/liftoff.tsx

@@ -0,0 +1,22 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { RouterLink } from 'atoms/Link';
+import { PageHeader } from 'molecules/PageHeader';
+
+export const Route = createFileRoute('/liftoff')({
+  component: Liftoff,
+  head: () => ({
+    meta: [{ title: 'Liftoff — Starbase' }],
+  }),
+});
+
+function Liftoff() {
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <PageHeader title="Liftoff" />
+      <p className="text-sb-fg-subtle">More details coming soon.</p>
+      <RouterLink to="/" className="text-sm">
+        Back to home
+      </RouterLink>
+    </div>
+  );
+}

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

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { createLink, type LinkComponent } from '@tanstack/react-router';
+import { cn } from 'utils';
+
+export type ButtonVariant = 'anchor' | 'outline' | 'ghost';
+
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  iconOnly?: boolean;
+  size?: ButtonSize;
+  ref?: React.Ref<HTMLButtonElement>;
+}
+
+interface ButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  variant?: ButtonVariant;
+  iconOnly?: boolean;
+  size?: ButtonSize;
+  ref?: React.Ref<HTMLAnchorElement>;
+}
+
+const makeButtonClasses = (
+  variant?: ButtonVariant,
+  iconOnly?: boolean,
+  size: ButtonSize = 'md',
+  className?: string,
+) =>
+  cn(
+    // Base styles
+    'inline-flex items-center justify-center',
+    'font-sans font-semibold rounded-md border border-transparent outline-none focus-visible:outline-sb-action cursor-pointer',
+    'transition-all duration-150 ease-out',
+    'disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none',
+    {
+      /* iconOnly sizes (square buttons) */
+      'shrink-0 p-0 size-8': iconOnly && size === 'sm',
+      'shrink-0 p-0 size-9': iconOnly && size === 'md',
+      'shrink-0 p-0 size-11 rounded-lg': iconOnly && size === 'lg',
+
+      /* text button sizes */
+      'text-sm px-3 py-1.5': !iconOnly && size === 'sm',
+      'text-base px-4 py-2': !iconOnly && size === 'md',
+      'text-lg px-5 py-2.5': !iconOnly && size === 'lg',
+
+      /* Variant: anchor */
+      'bg-sb-anchor border-sb-anchor text-sb-surface-raised shadow-sm is-active:bg-sb-anchor-active is-active:border-sb-anchor-active is-active:shadow-md':
+        variant === 'anchor',
+
+      /* Variant: outline */
+      'bg-transparent border-sb-divider text-sb-fg is-active:bg-sb-canvas is-active:border-sb-fg-subtle/30':
+        variant === 'outline',
+
+      /* Variant: ghost */
+      'bg-transparent text-sb-fg is-active:bg-sb-fg/5': variant === 'ghost',
+    },
+    className,
+  );
+
+export const ButtonLink = ({
+  children,
+  className,
+  variant = 'anchor',
+  iconOnly,
+  size,
+  ref,
+  ...rest
+}: ButtonLinkProps) => {
+  return (
+    <a
+      {...rest}
+      ref={ref}
+      className={makeButtonClasses(variant, iconOnly, size, className)}
+    >
+      {children}
+    </a>
+  );
+};
+
+export const Button = ({
+  children,
+  className,
+  variant = 'anchor',
+  iconOnly,
+  size,
+  type = 'button',
+  ref,
+  ...rest
+}: ButtonProps) => {
+  return (
+    <button
+      {...rest}
+      ref={ref}
+      type={type}
+      className={makeButtonClasses(variant, iconOnly, size, className)}
+    >
+      {children}
+    </button>
+  );
+};
+
+const CreatedLinkComponent = createLink(ButtonLink);
+
+export const RouterButtonLink: LinkComponent<typeof ButtonLink> = (props) => {
+  return <CreatedLinkComponent preload={'intent'} {...props} />;
+};

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

@@ -0,0 +1,52 @@
+import { type HTMLAttributes, type Ref, useEffect, useState } from 'react';
+import { useCopyToClipboard } from 'usehooks-ts';
+import { LuCopy, LuCheck } from 'react-icons/lu';
+import { Button } from 'atoms/Button';
+import { cn } from 'utils';
+
+export interface CodeProps extends HTMLAttributes<HTMLElement> {
+  children: string;
+  ref?: Ref<HTMLElement>;
+}
+
+export const Code = ({ children, className, ref, ...rest }: CodeProps) => {
+  const [, copy] = useCopyToClipboard();
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!copied) return;
+    const id = setTimeout(() => setCopied(false), 2000);
+    return () => clearTimeout(id);
+  }, [copied]);
+
+  const handleCopy = () => {
+    copy(children).then(() => setCopied(true));
+  };
+
+  return (
+    <code
+      {...rest}
+      ref={ref}
+      className={cn(
+        'inline-flex items-center gap-2 font-mono',
+        'bg-sb-canvas text-sb-fg px-4 py-2 rounded-lg',
+        className,
+      )}
+    >
+      {children}
+      <Button
+        variant="ghost"
+        iconOnly
+        size="sm"
+        onClick={handleCopy}
+        aria-label={copied ? 'Copied' : 'Copy to clipboard'}
+      >
+        {copied ? (
+          <LuCheck className="size-4" />
+        ) : (
+          <LuCopy className="size-4" />
+        )}
+      </Button>
+    </code>
+  );
+};

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

@@ -0,0 +1,78 @@
+import {
+  type AnchorHTMLAttributes,
+  type ButtonHTMLAttributes,
+  type Ref,
+} from 'react';
+import { createLink, type LinkComponent } from '@tanstack/react-router';
+import { cn } from 'utils';
+
+type LinkVariant = 'anchor' | 'fg' | 'fg-subtle';
+
+type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  variant?: LinkVariant;
+  ref?: Ref<HTMLAnchorElement>;
+};
+
+type LinkButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: LinkVariant;
+  ref?: Ref<HTMLButtonElement>;
+};
+
+const makeLinkClasses = (variant?: LinkVariant, className?: string) => {
+  return cn(
+    'outline-none focus-visible:outline-sb-action transition-colors duration-100',
+    'underline decoration-current/30 underline-offset-4',
+    'hover:decoration-current focus-visible:decoration-current',
+    {
+      'text-sb-anchor hover:text-sb-anchor-active': variant === 'anchor',
+      'text-sb-fg hover:text-sb-anchor': variant === 'fg',
+      'text-sb-fg-subtle hover:text-sb-fg': variant === 'fg-subtle',
+    },
+    className,
+  );
+};
+
+export const Link = ({
+  children,
+  className,
+  variant = 'anchor',
+  ref,
+  ...rest
+}: LinkProps) => {
+  return (
+    <a {...rest} ref={ref} className={makeLinkClasses(variant, className)}>
+      {children}
+    </a>
+  );
+};
+
+const CreatedLinkComponent = createLink(Link);
+
+export const RouterLink: LinkComponent<typeof Link> = (props) => {
+  return <CreatedLinkComponent preload={'intent'} {...props} />;
+};
+
+export const LinkButton = ({
+  children,
+  className,
+  type = 'button',
+  variant = 'anchor',
+  disabled,
+  ref,
+  ...rest
+}: LinkButtonProps) => {
+  return (
+    <button
+      {...rest}
+      ref={ref}
+      type={type}
+      disabled={disabled}
+      className={cn(
+        makeLinkClasses(variant, className),
+        disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+      )}
+    >
+      {children}
+    </button>
+  );
+};