detalles cambiados y ejemplo de stepper

.vscode/launch.json

@@ -0,0 +1,22 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "type": "msedge",
+      "request": "launch",
+      "name": "Launch Edge against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

src/routeTree.gen.ts

@@ -9,6 +9,7 @@
 // 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 StepperRouteImport } from './routes/stepper'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as DashboardRouteImport } from './routes/dashboard'
 import { Route as IndexRouteImport } from './routes/index'
@@ -17,6 +18,11 @@ import { Route as PlanesListaRouteRouteImport } from './routes/planes/_lista/rou
 import { Route as PlanesPlanIdRouteRouteImport } from './routes/planes/$planId/route'
 import { Route as PlanesListaNuevoRouteImport } from './routes/planes/_lista/nuevo'
 
+const StepperRoute = StepperRouteImport.update({
+  id: '/stepper',
+  path: '/stepper',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const LoginRoute = LoginRouteImport.update({
   id: '/login',
   path: '/login',
@@ -57,6 +63,7 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/dashboard': typeof DashboardRoute
   '/login': typeof LoginRoute
+  '/stepper': typeof StepperRoute
   '/planes/$planId': typeof PlanesPlanIdRouteRoute
   '/planes': typeof PlanesListaRouteRouteWithChildren
   '/demo/tanstack-query': typeof DemoTanstackQueryRoute
@@ -66,6 +73,7 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/dashboard': typeof DashboardRoute
   '/login': typeof LoginRoute
+  '/stepper': typeof StepperRoute
   '/planes/$planId': typeof PlanesPlanIdRouteRoute
   '/planes': typeof PlanesListaRouteRouteWithChildren
   '/demo/tanstack-query': typeof DemoTanstackQueryRoute
@@ -76,6 +84,7 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/dashboard': typeof DashboardRoute
   '/login': typeof LoginRoute
+  '/stepper': typeof StepperRoute
   '/planes/$planId': typeof PlanesPlanIdRouteRoute
   '/planes/_lista': typeof PlanesListaRouteRouteWithChildren
   '/demo/tanstack-query': typeof DemoTanstackQueryRoute
@@ -87,6 +96,7 @@ export interface FileRouteTypes {
     | '/'
     | '/dashboard'
     | '/login'
+    | '/stepper'
     | '/planes/$planId'
     | '/planes'
     | '/demo/tanstack-query'
@@ -96,6 +106,7 @@ export interface FileRouteTypes {
     | '/'
     | '/dashboard'
     | '/login'
+    | '/stepper'
     | '/planes/$planId'
     | '/planes'
     | '/demo/tanstack-query'
@@ -105,6 +116,7 @@ export interface FileRouteTypes {
     | '/'
     | '/dashboard'
     | '/login'
+    | '/stepper'
     | '/planes/$planId'
     | '/planes/_lista'
     | '/demo/tanstack-query'
@@ -115,6 +127,7 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   DashboardRoute: typeof DashboardRoute
   LoginRoute: typeof LoginRoute
+  StepperRoute: typeof StepperRoute
   PlanesPlanIdRouteRoute: typeof PlanesPlanIdRouteRoute
   PlanesListaRouteRoute: typeof PlanesListaRouteRouteWithChildren
   DemoTanstackQueryRoute: typeof DemoTanstackQueryRoute
@@ -122,6 +135,13 @@ export interface RootRouteChildren {
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/stepper': {
+      id: '/stepper'
+      path: '/stepper'
+      fullPath: '/stepper'
+      preLoaderRoute: typeof StepperRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/login': {
       id: '/login'
       path: '/login'
@@ -189,6 +209,7 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   DashboardRoute: DashboardRoute,
   LoginRoute: LoginRoute,
+  StepperRoute: StepperRoute,
   PlanesPlanIdRouteRoute: PlanesPlanIdRouteRoute,
   PlanesListaRouteRoute: PlanesListaRouteRouteWithChildren,
   DemoTanstackQueryRoute: DemoTanstackQueryRoute,

src/routes/planes/_lista/nuevo.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 
-import CheckoutStepper from '@/components/planes/stepper'
+import CheckoutStepper from '@/components/planes/exampleStepper'
 import { Dialog, DialogContent } from '@/components/ui/dialog'
 
 export const Route = createFileRoute('/planes/_lista/nuevo')({

src/routes/planes/_lista/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute, Outlet, Link } from '@tanstack/react-router'
+import { createFileRoute, Outlet, useNavigate } from '@tanstack/react-router'
 import * as Icons from 'lucide-react'
 import { useMemo, useState } from 'react'
 
@@ -13,6 +13,7 @@ export const Route = createFileRoute('/planes/_lista')({
 })
 
 function RouteComponent() {
+  const navigate = useNavigate()
   type Facultad = { id: string; nombre: string; color: string }
   type Carrera = { id: string; nombre: string; facultadId: string }
   type Plan = {
@@ -230,6 +231,9 @@ function RouteComponent() {
               }
               aria-label="Nuevo plan de estudios"
               title="Nuevo plan de estudios"
+              onClick={() => {
+                navigate({ to: '/planes/nuevo' })
+              }}
             >
               <Icons.Plus className="" />
               Nuevo plan de estudios
@@ -313,9 +317,6 @@ function RouteComponent() {
             })}
           </div>
         </div>
-        <Link to="/planes/nuevo" className="text-blue-500" resetScroll={false}>
-          Nuevo plan de estudios
-        </Link>
         <Outlet />
       </div>
     </main>

src/routes/stepper.tsx

@@ -0,0 +1,65 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { defineStepper } from '@/components/stepper'
+import { Button } from '@/components/ui/button'
+
+export const Route = createFileRoute('/stepper')({
+  component: MyFirstStepper,
+})
+
+const stepperInstance = defineStepper(
+  { id: 'step-1', title: 'Step 1' },
+  { id: 'step-2', title: 'Step 2' },
+  { id: 'step-3', title: 'Step 3' },
+)
+
+export function MyFirstStepper() {
+  return (
+    <stepperInstance.Stepper.Provider className="space-y-4">
+      {({ methods }) => (
+        <>
+          <stepperInstance.Stepper.Navigation>
+            {methods.all.map((step) => (
+              <stepperInstance.Stepper.Step
+                of={step.id}
+                onClick={() => methods.goTo(step.id)}
+              >
+                <stepperInstance.Stepper.Title>
+                  {step.title}
+                </stepperInstance.Stepper.Title>
+              </stepperInstance.Stepper.Step>
+            ))}
+          </stepperInstance.Stepper.Navigation>
+          {methods.switch({
+            'step-1': (step) => <Content id={step.id} />,
+            'step-2': (step) => <Content id={step.id} />,
+            'step-3': (step) => <Content id={step.id} />,
+          })}
+          <stepperInstance.Stepper.Controls>
+            {!methods.isLast && (
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={methods.prev}
+                disabled={methods.isFirst}
+              >
+                Previous
+              </Button>
+            )}
+            <Button onClick={methods.isLast ? methods.reset : methods.next}>
+              {methods.isLast ? 'Reset' : 'Next'}
+            </Button>
+          </stepperInstance.Stepper.Controls>
+        </>
+      )}
+    </stepperInstance.Stepper.Provider>
+  )
+}
+
+const Content = ({ id }: { id: string }) => {
+  return (
+    <stepperInstance.Stepper.Panel className="h-50 content-center rounded border bg-slate-50 p-8">
+      <p className="text-xl font-normal">Content for {id}</p>
+    </stepperInstance.Stepper.Panel>
+  )
+}