feat: bring tab-routes syntax in line with grid-routes

pubkeyapp · Jan 9, 2024 · 351e0d6 · 351e0d6
1 parent 2a2431d
commit 351e0d6
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 34 deletions.
diff --git a/apps/web/src/app/features/demo/demo-feature-tab-routes.tsx b/apps/web/src/app/features/demo/demo-feature-tab-routes.tsx
@@ -5,30 +5,30 @@ export function DemoFeatureTabRoutes() {
   return (
     <UiCard title="Tab Routes">
       <UiTabRoutes
-        baseUrl="/demo/tab-routes"
+        basePath="/demo/tab-routes"
         tabs={[
           {
-            value: 'overview',
+            path: 'overview',
             label: 'Overview',
-            component: (
+            element: (
               <SimpleGrid cols={2} spacing="md">
                 <UiCard title="Overview">Overview</UiCard>
               </SimpleGrid>
             ),
           },
           {
-            value: 'content',
+            path: 'content',
             label: 'Content',
-            component: (
+            element: (
               <SimpleGrid cols={2} spacing="md">
                 <UiCard title="Content">Content</UiCard>
               </SimpleGrid>
             ),
           },
           {
-            value: 'settings',
+            path: 'settings',
             label: 'Settings',
-            component: (
+            element: (
               <SimpleGrid cols={2} spacing="md">
                 <UiCard title="Settings">Settings</UiCard>
               </SimpleGrid>

diff --git a/packages/core/src/lib/ui-tab-routes/ui-tab-routes.tsx b/packages/core/src/lib/ui-tab-routes/ui-tab-routes.tsx
@@ -3,40 +3,40 @@ import { ReactElement, ReactNode } from 'react'
 import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
 
 export interface UiTabRoute {
-  component: ReactNode
+  element: ReactNode
   label: ReactElement | string
-  value: string
+  path: string
 }
 
 export function UiTabRoutes({
   grow = false,
   tabs,
-  baseUrl,
+  basePath,
   ...props
 }: Omit<TabsProps, 'children'> & {
   children?: ReactNode
-  baseUrl?: string
+  basePath?: string
   grow?: boolean
   tabs: UiTabRoute[]
 }) {
   const navigate = useNavigate()
   const location = useLocation()
-  // Set the active tab based on matching the location pathname with the tab value
-  const activeTab = tabs.find((tab) => location.pathname.includes(`/${tab.value}`))?.value
+  // Set the active tab based on matching the location pathname with the tab path
+  const activeTab = tabs.find((tab) => location.pathname.includes(`/${tab.path}`))?.path
   // Set default redirect route to the first tab
-  const redirect = tabs.length && tabs[0].value !== '' ? tabs[0].value : undefined
+  const redirect = tabs.length && tabs[0].path !== '' ? tabs[0].path : undefined
 
   return (
     <Box>
       <Tabs
         value={activeTab}
-        onChange={(value) => navigate(`${baseUrl ? `${baseUrl}/${value}` : value}`)}
+        onChange={(value) => navigate(`${basePath ? `${basePath}/${value}` : value}`)}
         mb="md"
         {...props}
       >
         <Tabs.List grow={grow}>
           {tabs.map((tab) => (
-            <Tabs.Tab key={tab.value} value={tab.value}>
+            <Tabs.Tab key={tab.path} value={tab.path}>
               <Text>{tab.label}</Text>
             </Tabs.Tab>
           ))}
@@ -45,7 +45,7 @@ export function UiTabRoutes({
       <Routes>
         {redirect ? <Route index element={<Navigate replace to={`./${redirect}`} />} /> : null}
         {tabs.map((tab) => (
-          <Route key={tab.value} path={`${tab.value}/*`} element={tab.component} />
+          <Route key={tab.path} path={`${tab.path}/*`} element={tab.element} />
         ))}
         <Route path="*" element={<Navigate replace to={`./${redirect}`} />} />
       </Routes>

diff --git a/...tors/src/generators/component/files/tab-routes/__prefixFileName__-tab-routes.tsx.template b/...tors/src/generators/component/files/tab-routes/__prefixFileName__-tab-routes.tsx.template
@@ -3,40 +3,40 @@ import { ReactElement, ReactNode } from 'react'
 import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
 
 export interface <%= prefix.className %>TabRoute {
-  component: ReactNode
+  element: ReactNode
   label: ReactElement | string
-  value: string
+  path: string
 }
 
 export function <%= prefix.className %>TabRoutes({
   grow = false,
   tabs,
-  baseUrl,
+  basePath,
   ...props
 }: Omit<TabsProps, 'children'> & {
   children?: ReactNode
-  baseUrl?: string
+  basePath?: string
   grow?: boolean
   tabs: <%= prefix.className %>TabRoute[]
 }) {
   const navigate = useNavigate()
   const location = useLocation()
-  // Set the active tab based on matching the location pathname with the tab value
-  const activeTab = tabs.find((tab) => location.pathname.includes(`/${tab.value}`))?.value
+  // Set the active tab based on matching the location pathname with the tab path
+  const activeTab = tabs.find((tab) => location.pathname.includes(`/${tab.path}`))?.path
   // Set default redirect route to the first tab
-  const redirect = tabs.length && tabs[0].value !== '' ? tabs[0].value : undefined
+  const redirect = tabs.length && tabs[0].path !== '' ? tabs[0].path : undefined
 
   return (
     <Box>
       <Tabs
         value={activeTab}
-        onChange={(value) => navigate(`${baseUrl ? `${baseUrl}/${value}` : value}`)}
+        onChange={(value) => navigate(`${basePath ? `${basePath}/${value}` : value}`)}
         mb="md"
         {...props}
       >
         <Tabs.List grow={grow}>
           {tabs.map((tab) => (
-            <Tabs.Tab key={tab.value} value={tab.value}>
+            <Tabs.Tab key={tab.path} value={tab.path}>
               <Text>{tab.label}</Text>
             </Tabs.Tab>
           ))}
@@ -45,7 +45,7 @@ export function <%= prefix.className %>TabRoutes({
       <Routes>
         {redirect ? <Route index element={<Navigate replace to={`./${redirect}`} />} /> : null}
         {tabs.map((tab) => (
-          <Route key={tab.value} path={`${tab.value}/*`} element={tab.component} />
+          <Route key={tab.path} path={`${tab.path}/*`} element={tab.element} />
         ))}
         <Route path="*" element={<Navigate replace to={`./${redirect}`} />} />
       </Routes>

diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature-tab-routes.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature-tab-routes.tsx.template
@@ -5,30 +5,30 @@ export function DemoFeatureTabRoutes() {
   return (
     <<%= prefix.className %>Card title="Tab Routes">
       <<%= prefix.className %>TabRoutes
-        baseUrl="/demo/tab-routes"
+        basePath="/demo/tab-routes"
         tabs={[
           {
-            value: 'overview',
+            path: 'overview',
             label: 'Overview',
-            component: (
+            element: (
               <SimpleGrid cols={2} spacing="md">
                 <<%= prefix.className %>Card title="Overview">Overview</<%= prefix.className %>Card>
               </SimpleGrid>
             ),
           },
           {
-            value: 'content',
+            path: 'content',
             label: 'Content',
-            component: (
+            element: (
               <SimpleGrid cols={2} spacing="md">
                 <<%= prefix.className %>Card title="Content">Content</<%= prefix.className %>Card>
               </SimpleGrid>
             ),
           },
           {
-            value: 'settings',
+            path: 'settings',
             label: 'Settings',
-            component: (
+            element: (
               <SimpleGrid cols={2} spacing="md">
                 <<%= prefix.className %>Card title="Settings">Settings</<%= prefix.className %>Card>
               </SimpleGrid>