chore(examples): start-styled-components

examples/react/start-styled-components/.gitignore

@@ -0,0 +1,22 @@
+node_modules
+package-lock.json
+yarn.lock
+
+.DS_Store
+.cache
+.env
+.vercel
+.output
+.vinxi
+
+/build/
+/api/
+/server/build
+/public/build
+.vinxi
+# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

examples/react/start-styled-components/.prettierignore

@@ -0,0 +1,4 @@
+**/build
+**/public
+pnpm-lock.yaml
+routeTree.gen.ts

examples/react/start-styled-components/README.md

@@ -0,0 +1,12 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm start` or `yarn start`
+
+## How this works
+
+This example uses [styled-components](https://styled-components.com/) to style the components. The `styled` function is used to create styled components, which can be used just like regular React components.
+
+To support server-side rendering, the `ServerStyleSheet` from `styled-components` is used to collect styles during the server render. The styles are then injected into the HTML response.

examples/react/start-styled-components/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "tanstack-start-styled-components",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && tsc --noEmit",
+    "start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "^1.121.2",
+    "@tanstack/react-router-devtools": "^1.121.2",
+    "@tanstack/react-start": "^1.121.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^2.6.0",
+    "vite": "^6.3.5",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.5.4",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

examples/react/start-styled-components/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

examples/react/start-styled-components/src/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,87 @@
+import {
+  ErrorComponent,
+  Link,
+  rootRouteId,
+  useMatch,
+  useRouter,
+} from '@tanstack/react-router'
+import type { ErrorComponentProps } from '@tanstack/react-router'
+import { css, styled } from 'styled-components'
+
+const Layout = styled.div`
+  min-width: 0;
+  flex: 1;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+`
+
+const ButtonsRow = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+`
+
+const buttonStyles = css`
+  padding: 0.5rem 1rem;
+  background-color: #4a5568; /* gray-600 */
+  color: white;
+  border-radius: 0.375rem; /* rounded */
+  text-transform: uppercase;
+  font-weight: 800; /* font-extrabold */
+  cursor: pointer;
+
+  &:hover {
+    background-color: #2d3748; /* dark:bg-gray-700 */
+  }
+`
+
+const TryAgainButton = styled.button`
+  ${buttonStyles}
+`
+
+const StyledLink = styled(Link)`
+  ${buttonStyles}
+`
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+  const router = useRouter()
+  const isRoot = useMatch({
+    strict: false,
+    select: (state) => state.id === rootRouteId,
+  })
+
+  console.error('DefaultCatchBoundary Error:', error)
+
+  return (
+    <Layout>
+      <ErrorComponent error={error} />
+      <ButtonsRow>
+        <TryAgainButton
+          onClick={() => {
+            router.invalidate()
+          }}
+        >
+          Try Again
+        </TryAgainButton>
+        {isRoot ? (
+          <StyledLink to="/">Home</StyledLink>
+        ) : (
+          <StyledLink
+            to="/"
+            onClick={(e) => {
+              e.preventDefault()
+              window.history.back()
+            }}
+          >
+            Go Back
+          </StyledLink>
+        )}
+      </ButtonsRow>
+    </Layout>
+  )
+}

examples/react/start-styled-components/src/components/NotFound.tsx

@@ -0,0 +1,65 @@
+import { Link } from '@tanstack/react-router'
+import { styled } from 'styled-components'
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+`
+
+const Content = styled.div`
+  color: #4a5568; /* gray-600 */
+  @media (prefers-color-scheme: dark) {
+    color: #a0aec0; /* dark:text-gray-400 */
+  }
+`
+
+const ButtonsRow = styled.p`
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+`
+
+const GoBackButton = styled.button`
+  all: unset;
+
+  cursor: pointer;
+  background-color: #38a169; /* emerald-500 */
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem; /* rounded */
+  text-transform: uppercase;
+  font-weight: 900; /* font-black */
+  font-size: 0.875rem; /* text-sm */
+`
+
+const StartOverLink = styled(Link)`
+  all: unset;
+
+  cursor: pointer;
+  background-color: #00bcd4; /* cyan-600 */
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem; /* rounded */
+  text-transform: uppercase;
+  font-weight: 900; /* font-black */
+  font-size: 0.875rem; /* text-sm */
+`
+
+export function NotFound({ children }: { children?: any }) {
+  return (
+    <Layout>
+      <Content>
+        {children || <p>The page you are looking for does not exist.</p>}
+      </Content>
+      <ButtonsRow>
+        <GoBackButton onClick={() => window.history.back()}>
+          Go back
+        </GoBackButton>
+        <StartOverLink to="/">Start Over</StartOverLink>
+      </ButtonsRow>
+    </Layout>
+  )
+}

examples/react/start-styled-components/src/routeTree.gen.ts

@@ -0,0 +1,59 @@
+/* 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 IndexRouteImport } from './routes/index'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/'
+  id: '__root__' | '/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

examples/react/start-styled-components/src/router.tsx

@@ -0,0 +1,22 @@
+import { createRouter as createTanStackRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+import { DefaultCatchBoundary } from './components/DefaultCatchBoundary'
+import { NotFound } from './components/NotFound'
+
+export function createRouter() {
+  const router = createTanStackRouter({
+    routeTree,
+    defaultPreload: 'intent',
+    defaultErrorComponent: DefaultCatchBoundary,
+    defaultNotFoundComponent: () => <NotFound />,
+    scrollRestoration: true,
+  })
+
+  return router
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof createRouter>
+  }
+}