minor: abstract some common ui (#141)

latitude-dev · Sep 6, 2024 · c81be41 · c81be41
1 parent f9cf528
commit c81be41
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 97 deletions.
diff --git a/apps/web/src/app/(private)/dashboard/layout.tsx b/apps/web/src/app/(private)/dashboard/layout.tsx
@@ -2,8 +2,8 @@ import { ReactNode } from 'react'
 
 import {
   Container,
-  ListingHeader,
   TableBlankSlate,
+  TableWithHeader,
   Text,
 } from '@latitude-data/web-ui'
 import { AppLayout } from '$/components/layouts'
@@ -46,33 +46,33 @@ export default async function DashboardLayout({
     >
       <Container>
         {children}
-        <div className='flex-1'>
-          <ListingHeader
-            title='Projects'
-            actions={
-              <Link href={ROUTES.dashboard.projects.new.root}>
-                <ListingHeader.Button>Add project</ListingHeader.Button>
-              </Link>
-            }
-          />
-          <div className='flex flex-col gap-2'>
-            {projects.length > 0 && (
-              <ProjectsTable documents={documents} projects={projects} />
-            )}
-            {projects.length === 0 && (
-              <TableBlankSlate
-                description='There are no projects yet. Create one to start adding your prompts.'
-                link={
-                  <Link href={ROUTES.dashboard.projects.new.root}>
-                    <TableBlankSlate.Button>
-                      Create your first project
-                    </TableBlankSlate.Button>
-                  </Link>
-                }
-              />
-            )}
-          </div>
-        </div>
+        <TableWithHeader
+          title='Projects'
+          actions={
+            <Link href={ROUTES.dashboard.projects.new.root}>
+              <TableWithHeader.Button>Add project</TableWithHeader.Button>
+            </Link>
+          }
+          table={
+            <>
+              {projects.length > 0 && (
+                <ProjectsTable documents={documents} projects={projects} />
+              )}
+              {projects.length === 0 && (
+                <TableBlankSlate
+                  description='There are no projects yet. Create one to start adding your prompts.'
+                  link={
+                    <Link href={ROUTES.dashboard.projects.new.root}>
+                      <TableBlankSlate.Button>
+                        Create your first project
+                      </TableBlankSlate.Button>
+                    </Link>
+                  }
+                />
+              )}
+            </>
+          }
+        />
       </Container>
     </AppLayout>
   )

diff --git a/apps/web/src/app/(private)/datasets/layout.tsx b/apps/web/src/app/(private)/datasets/layout.tsx
@@ -2,8 +2,8 @@ import { ReactNode } from 'react'
 
 import {
   Container,
-  ListingHeader,
   TableBlankSlate,
+  TableWithHeader,
 } from '@latitude-data/web-ui'
 import { AppLayout } from '$/components/layouts'
 import { getCurrentUser } from '$/services/auth/getCurrentUser'
@@ -32,22 +32,24 @@ export default async function DatasetsList({
     >
       <Container>
         {children}
-        <ListingHeader
+        <TableWithHeader
           title='Datasets'
           actions={
             <Link href={ROUTES.datasets.new.root}>
-              <ListingHeader.Button>Upload dataset</ListingHeader.Button>
+              <TableWithHeader.Button>Upload dataset</TableWithHeader.Button>
             </Link>
           }
-        />
-        <TableBlankSlate
-          description='There are no datasets yet. Create one to start testing your prompts.'
-          link={
-            <Link href={ROUTES.datasets.new.root}>
-              <TableBlankSlate.Button>
-                Create your first dataset
-              </TableBlankSlate.Button>
-            </Link>
+          table={
+            <TableBlankSlate
+              description='There are no datasets yet. Create one to start testing your prompts.'
+              link={
+                <Link href={ROUTES.datasets.new.root}>
+                  <TableBlankSlate.Button>
+                    Create your first dataset
+                  </TableBlankSlate.Button>
+                </Link>
+              }
+            />
           }
         />
       </Container>

diff --git a/apps/web/src/app/(private)/evaluations/_components/ActiveEvaluations/index.tsx b/apps/web/src/app/(private)/evaluations/_components/ActiveEvaluations/index.tsx
@@ -1,4 +1,4 @@
-import { ListingHeader, TableBlankSlate } from '@latitude-data/web-ui'
+import { TableBlankSlate, TableWithHeader } from '@latitude-data/web-ui'
 import useEvaluations from '$/stores/evaluations'
 
 import ActiveEvaluationsTable from './Table'
@@ -12,27 +12,29 @@ export default function ActiveEvaluations({
   if (isLoading) return null
 
   return (
-    <div className='w-full flex flex-col gap-4'>
-      <ListingHeader
-        title='Your evaluations'
-        actions={
-          <ListingHeader.Button onClick={onCreateEvaluation}>
-            Add evaluation
-          </ListingHeader.Button>
-        }
-      />
-      {evaluations?.length ? (
-        <ActiveEvaluationsTable evaluations={evaluations} />
-      ) : (
-        <TableBlankSlate
-          description='There are no evaluations yet. Create one to start reviewing your prompts.'
-          link={
-            <TableBlankSlate.Button onClick={onCreateEvaluation}>
-              Create your first evaluation
-            </TableBlankSlate.Button>
-          }
-        />
-      )}
-    </div>
+    <TableWithHeader
+      title='Your evaluations'
+      actions={
+        <TableWithHeader.Button onClick={onCreateEvaluation}>
+          Add evaluation
+        </TableWithHeader.Button>
+      }
+      table={
+        <>
+          {evaluations?.length ? (
+            <ActiveEvaluationsTable evaluations={evaluations} />
+          ) : (
+            <TableBlankSlate
+              description='There are no evaluations yet. Create one to start reviewing your prompts.'
+              link={
+                <TableBlankSlate.Button onClick={onCreateEvaluation}>
+                  Create your first evaluation
+                </TableBlankSlate.Button>
+              }
+            />
+          )}
+        </>
+      }
+    />
   )
 }
diff --git a/apps/web/src/app/(private)/evaluations/_components/Evaluations.tsx b/apps/web/src/app/(private)/evaluations/_components/Evaluations.tsx
@@ -20,38 +20,32 @@ export default function Evaluations({
     useState<CreateEvaluationData>()
 
   return (
-    <>
-      <Container>
-        <ActiveEvaluations
-          onCreateEvaluation={() =>
+    <Container>
+      <ActiveEvaluations
+        onCreateEvaluation={() =>
+          setNewEvaluationData({
+            title: 'New Evaluation',
+            description: '',
+            prompt: '',
+          })
+        }
+      />
+      {evaluationTemplates.length > 0 && (
+        <EvaluationTemplates
+          evaluationTemplates={evaluationTemplates}
+          onSelectTemplate={(template) =>
             setNewEvaluationData({
-              title: 'New Evaluation',
-              description: '',
-              prompt: '',
+              title: template.name,
+              description: template.description,
+              prompt: template.prompt,
             })
           }
         />
-      </Container>
-      {evaluationTemplates.length > 0 && (
-        <div className='mt-6'>
-          <Container>
-            <EvaluationTemplates
-              evaluationTemplates={evaluationTemplates}
-              onSelectTemplate={(template) =>
-                setNewEvaluationData({
-                  title: template.name,
-                  description: template.description,
-                  prompt: template.prompt,
-                })
-              }
-            />
-          </Container>
-        </div>
       )}
       <CreateEvaluationModal
         data={newEvaluationData}
         onClose={() => setNewEvaluationData(undefined)}
       />
-    </>
+    </Container>
   )
 }
diff --git a/apps/web/src/app/(private)/settings/layout.tsx b/apps/web/src/app/(private)/settings/layout.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 
-import { Container, ListingHeader, Text } from '@latitude-data/web-ui'
+import { Container, Text, TitleWithActions } from '@latitude-data/web-ui'
 import { AppLayout } from '$/components/layouts'
 import { getCurrentUser } from '$/services/auth/getCurrentUser'
 import { getSession } from '$/services/auth/getSession'
@@ -36,7 +36,7 @@ export default async function SettingsLayout({
     >
       <Container>
         {children}
-        <ListingHeader title='Workspace' />
+        <TitleWithActions title='Workspace' />
         <WorkspaceName />
         <ProviderApiKeys />
         <Memberships />

diff --git a/packages/web-ui/src/ds/molecules/ListingHeader/index.tsx b/packages/web-ui/src/ds/molecules/ListingHeader/index.tsx
@@ -1,6 +1,7 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react'
 
-import { Button, Text } from '../../atoms'
+import { Button } from '../../atoms'
+import { TitleWithActions } from '../TitleWithActions'
 
 export function ListingButton({
   children,
@@ -13,21 +14,21 @@ export function ListingButton({
   )
 }
 
-const ListingHeader = ({
+export const TableWithHeader = ({
   title,
   actions,
+  table,
 }: {
   title: string
   actions?: ReactNode
+  table?: ReactNode
 }) => {
   return (
-    <div className='flex flex-row justify-between items-center gap-4'>
-      <Text.H4B>{title}</Text.H4B>
-      {actions ? <div className='flex gap-1'>{actions}</div> : null}
+    <div className='flex flex-col gap-4'>
+      <TitleWithActions title={title} actions={actions} />
+      <div>{table}</div>
     </div>
   )
 }
 
-ListingHeader.Button = ListingButton
-
-export { ListingHeader }
+TableWithHeader.Button = ListingButton
diff --git a/packages/web-ui/src/ds/molecules/TitleWithActions/index.tsx b/packages/web-ui/src/ds/molecules/TitleWithActions/index.tsx
@@ -0,0 +1,18 @@
+import { ReactNode } from 'react'
+
+import { Text } from '../../atoms'
+
+export const TitleWithActions = ({
+  title,
+  actions,
+}: {
+  title: string
+  actions?: ReactNode
+}) => {
+  return (
+    <div className='flex flex-row justify-between items-center gap-4'>
+      <Text.H4B>{title}</Text.H4B>
+      {actions ? <div className='flex gap-1'>{actions}</div> : null}
+    </div>
+  )
+}
diff --git a/packages/web-ui/src/ds/molecules/index.ts b/packages/web-ui/src/ds/molecules/index.ts
@@ -5,3 +5,4 @@ export * from './ClicktoCopy'
 export * from './TabSelector'
 export * from './TableBlankSlate'
 export * from './ListingHeader'
+export * from './TitleWithActions'