feat: add devtools project

src/libraries/devtools.tsx

@@ -0,0 +1,91 @@
+import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa'
+import { Library } from '.'
+import { BiBookAlt } from 'react-icons/bi'
+import { VscWand } from 'react-icons/vsc'
+import { twMerge } from 'tailwind-merge'
+
+const repo = 'tanstack/devtools'
+
+const textStyles = 'text-gray-700 dark:text-gray-500'
+
+export const devtoolsProject = {
+  id: 'devtools',
+  name: 'TanStack Devtools',
+  cardStyles: `shadow-xl shadow-slate-700/20 dark:shadow-lg dark:shadow-slate-500/30 text-slate-400 border-2 border-transparent hover:border-current`,
+  to: '/devtools',
+  tagline: `Centralized devtools panel for TanStack libraries and other custom devtools`,
+  description: `A unified devtools panel that houses all TanStack devtools and allows you to create and integrate your own custom devtools.`,
+  ogImage:
+    'https://github.com/tanstack/devtools/raw/main/media/repo-header.png',
+  badge: 'alpha',
+  bgStyle: 'bg-slate-400',
+  textStyle: 'text-slate-400',
+  repo,
+  latestBranch: 'main',
+  latestVersion: 'v0',
+  availableVersions: ['v0'],
+  colorFrom: 'from-slate-400',
+  colorTo: 'to-slate-600',
+  textColor: 'text-slate-600',
+  frameworks: ['react', 'solid', 'vanilla'],
+  menu: [
+    {
+      icon: <BiBookAlt />,
+      label: 'Docs',
+      to: '/devtools/latest/docs',
+    },
+    {
+      icon: <FaGithub />,
+      label: 'Github',
+      to: `https://github.com/${repo}`,
+    },
+  ],
+  featureHighlights: [
+    {
+      title: 'Unified Devtools Panel',
+      icon: <VscWand className="text-slate-400" />,
+      description: (
+        <div>
+          TanStack Devtools provides a centralized panel that houses all
+          TanStack library devtools in one place. No more switching between
+          different devtools panels - everything you need is{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            organized and accessible from a single interface
+          </span>{' '}
+          for a streamlined development experience.
+        </div>
+      ),
+    },
+    {
+      title: 'Framework Agnostic',
+      icon: <FaBolt className="text-slate-500" />,
+      description: (
+        <div>
+          Built with Solid.js for lightweight performance, but designed to work
+          within any framework. Create and integrate your own custom devtools
+          regardless of your tech stack.{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            Whether you're using React, Vue, Angular, or any other framework,
+          </span>{' '}
+          TanStack Devtools provides the flexibility you need.
+        </div>
+      ),
+    },
+    {
+      title: 'Custom Devtools Support',
+      icon: <FaCogs className="text-slate-600" />,
+      description: (
+        <div>
+          Extend the devtools panel with your own custom devtools. The platform
+          is designed to be extensible, allowing you to create devtools for your
+          specific needs and integrate them seamlessly.{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            Build, share, and use custom devtools that enhance your development
+            workflow
+          </span>{' '}
+          while maintaining the same unified experience.
+        </div>
+      ),
+    },
+  ],
+} satisfies Library

src/libraries/index.tsx

@@ -18,6 +18,7 @@ import { rangerProject } from './ranger'
 import { storeProject } from './store'
 import { pacerProject } from './pacer'
 import { dbProject } from './db'
+import { devtoolsProject } from './devtools'
 
 export const frameworkOptions = [
   { label: 'React', value: 'react', logo: reactLogo, color: 'bg-blue-500' },
@@ -56,6 +57,7 @@ export type Library = {
     | 'pacer'
     | 'db'
     | 'config'
+    | 'devtools'
     | 'react-charts'
     | 'create-tsrouter-app'
   name: string
@@ -111,6 +113,7 @@ export const libraries = [
   rangerProject,
   dbProject,
   configProject,
+  devtoolsProject,
   {
     id: 'react-charts',
     name: 'React Charts',
@@ -133,7 +136,7 @@ export const librariesByGroup = {
     pacerProject,
   ],
   headlessUI: [tableProject, formProject, virtualProject, rangerProject],
-  other: [configProject],
+  other: [devtoolsProject, configProject],
 }
 
 export const librariesGroupNamesMap = {

src/routeTree.gen.ts

@@ -48,6 +48,7 @@ import { Route as LibrariesRangerVersionIndexRouteImport } from './routes/_libra
 import { Route as LibrariesQueryVersionIndexRouteImport } from './routes/_libraries/query.$version.index'
 import { Route as LibrariesPacerVersionIndexRouteImport } from './routes/_libraries/pacer.$version.index'
 import { Route as LibrariesFormVersionIndexRouteImport } from './routes/_libraries/form.$version.index'
+import { Route as LibrariesDevtoolsVersionIndexRouteImport } from './routes/_libraries/devtools.$version.index'
 import { Route as LibrariesDbVersionIndexRouteImport } from './routes/_libraries/db.$version.index'
 import { Route as LibrariesConfigVersionIndexRouteImport } from './routes/_libraries/config.$version.index'
 import { Route as LibraryIdVersionDocsIndexRouteImport } from './routes/$libraryId/$version.docs.index'
@@ -230,6 +231,12 @@ const LibrariesFormVersionIndexRoute =
     path: '/form/$version/',
     getParentRoute: () => LibrariesRouteRoute,
   } as any)
+const LibrariesDevtoolsVersionIndexRoute =
+  LibrariesDevtoolsVersionIndexRouteImport.update({
+    id: '/devtools/$version/',
+    path: '/devtools/$version/',
+    getParentRoute: () => LibrariesRouteRoute,
+  } as any)
 const LibrariesDbVersionIndexRoute = LibrariesDbVersionIndexRouteImport.update({
   id: '/db/$version/',
   path: '/db/$version/',
@@ -326,6 +333,7 @@ export interface FileRoutesByFullPath {
   '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute
   '/config/$version': typeof LibrariesConfigVersionIndexRoute
   '/db/$version': typeof LibrariesDbVersionIndexRoute
+  '/devtools/$version': typeof LibrariesDevtoolsVersionIndexRoute
   '/form/$version': typeof LibrariesFormVersionIndexRoute
   '/pacer/$version': typeof LibrariesPacerVersionIndexRoute
   '/query/$version': typeof LibrariesQueryVersionIndexRoute
@@ -365,6 +373,7 @@ export interface FileRoutesByTo {
   '/$libraryId/$version/docs': typeof LibraryIdVersionDocsIndexRoute
   '/config/$version': typeof LibrariesConfigVersionIndexRoute
   '/db/$version': typeof LibrariesDbVersionIndexRoute
+  '/devtools/$version': typeof LibrariesDevtoolsVersionIndexRoute
   '/form/$version': typeof LibrariesFormVersionIndexRoute
   '/pacer/$version': typeof LibrariesPacerVersionIndexRoute
   '/query/$version': typeof LibrariesQueryVersionIndexRoute
@@ -409,6 +418,7 @@ export interface FileRoutesById {
   '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute
   '/_libraries/config/$version/': typeof LibrariesConfigVersionIndexRoute
   '/_libraries/db/$version/': typeof LibrariesDbVersionIndexRoute
+  '/_libraries/devtools/$version/': typeof LibrariesDevtoolsVersionIndexRoute
   '/_libraries/form/$version/': typeof LibrariesFormVersionIndexRoute
   '/_libraries/pacer/$version/': typeof LibrariesPacerVersionIndexRoute
   '/_libraries/query/$version/': typeof LibrariesQueryVersionIndexRoute
@@ -453,6 +463,7 @@ export interface FileRouteTypes {
     | '/$libraryId/$version/docs/'
     | '/config/$version'
     | '/db/$version'
+    | '/devtools/$version'
     | '/form/$version'
     | '/pacer/$version'
     | '/query/$version'
@@ -492,6 +503,7 @@ export interface FileRouteTypes {
     | '/$libraryId/$version/docs'
     | '/config/$version'
     | '/db/$version'
+    | '/devtools/$version'
     | '/form/$version'
     | '/pacer/$version'
     | '/query/$version'
@@ -535,6 +547,7 @@ export interface FileRouteTypes {
     | '/$libraryId/$version/docs/'
     | '/_libraries/config/$version/'
     | '/_libraries/db/$version/'
+    | '/_libraries/devtools/$version/'
     | '/_libraries/form/$version/'
     | '/_libraries/pacer/$version/'
     | '/_libraries/query/$version/'
@@ -796,6 +809,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LibrariesDbVersionIndexRouteImport
       parentRoute: typeof LibrariesRouteRoute
     }
+    '/_libraries/devtools/$version/': {
+      id: '/_libraries/devtools/$version/'
+      path: '/devtools/$version'
+      fullPath: '/devtools/$version'
+      preLoaderRoute: typeof LibrariesDevtoolsVersionIndexRouteImport
+      parentRoute: typeof LibrariesRouteRoute
+    }
     '/_libraries/form/$version/': {
       id: '/_libraries/form/$version/'
       path: '/form/$version'
@@ -1101,6 +1121,13 @@ declare module '@tanstack/react-start/server' {
       preLoaderRoute: unknown
       parentRoute: typeof rootServerRouteImport
     }
+    '/_libraries/devtools/$version/': {
+      id: '/_libraries/devtools/$version/'
+      path: '/devtools/$version'
+      fullPath: '/devtools/$version'
+      preLoaderRoute: unknown
+      parentRoute: typeof rootServerRouteImport
+    }
     '/_libraries/form/$version/': {
       id: '/_libraries/form/$version/'
       path: '/form/$version'
@@ -1695,6 +1722,23 @@ declare module './routes/_libraries/db.$version.index' {
     unknown
   >
 }
+declare module './routes/_libraries/devtools.$version.index' {
+  const createFileRoute: CreateFileRoute<
+    '/_libraries/devtools/$version/',
+    FileRoutesByPath['/_libraries/devtools/$version/']['parentRoute'],
+    FileRoutesByPath['/_libraries/devtools/$version/']['id'],
+    FileRoutesByPath['/_libraries/devtools/$version/']['path'],
+    FileRoutesByPath['/_libraries/devtools/$version/']['fullPath']
+  >
+
+  const createServerFileRoute: CreateServerFileRoute<
+    ServerFileRoutesByPath['/_libraries/devtools/$version/']['parentRoute'],
+    ServerFileRoutesByPath['/_libraries/devtools/$version/']['id'],
+    ServerFileRoutesByPath['/_libraries/devtools/$version/']['path'],
+    ServerFileRoutesByPath['/_libraries/devtools/$version/']['fullPath'],
+    unknown
+  >
+}
 declare module './routes/_libraries/form.$version.index' {
   const createFileRoute: CreateFileRoute<
     '/_libraries/form/$version/',
@@ -2015,6 +2059,7 @@ interface LibrariesRouteRouteChildren {
   LibrariesAccountSplatRoute: typeof LibrariesAccountSplatRoute
   LibrariesConfigVersionIndexRoute: typeof LibrariesConfigVersionIndexRoute
   LibrariesDbVersionIndexRoute: typeof LibrariesDbVersionIndexRoute
+  LibrariesDevtoolsVersionIndexRoute: typeof LibrariesDevtoolsVersionIndexRoute
   LibrariesFormVersionIndexRoute: typeof LibrariesFormVersionIndexRoute
   LibrariesPacerVersionIndexRoute: typeof LibrariesPacerVersionIndexRoute
   LibrariesQueryVersionIndexRoute: typeof LibrariesQueryVersionIndexRoute
@@ -2041,6 +2086,7 @@ const LibrariesRouteRouteChildren: LibrariesRouteRouteChildren = {
   LibrariesAccountSplatRoute: LibrariesAccountSplatRoute,
   LibrariesConfigVersionIndexRoute: LibrariesConfigVersionIndexRoute,
   LibrariesDbVersionIndexRoute: LibrariesDbVersionIndexRoute,
+  LibrariesDevtoolsVersionIndexRoute: LibrariesDevtoolsVersionIndexRoute,
   LibrariesFormVersionIndexRoute: LibrariesFormVersionIndexRoute,
   LibrariesPacerVersionIndexRoute: LibrariesPacerVersionIndexRoute,
   LibrariesQueryVersionIndexRoute: LibrariesQueryVersionIndexRoute,