feat: align ui with other apps

commercelayer · Apr 24, 2024 · 51565d0 · 51565d0
1 parent b57d677
commit 51565d0
Show file tree

Hide file tree

Showing 5 changed files with 187 additions and 79 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -29,7 +29,7 @@
     "prepare": "touch ./public/config.local.js"
   },
   "dependencies": {
-    "@commercelayer/app-elements": "^1.16.0",
+    "@commercelayer/app-elements": "^1.23.1",
     "@commercelayer/eslint-config-ts-react": "^1.3.0",
     "@commercelayer/sdk": "5.33.1",
     "@vitejs/plugin-react": "^4.2.1",

diff --git a/packages/app/src/components/List/Item.tsx b/packages/app/src/components/List/Item.tsx
@@ -33,7 +33,7 @@ export function Item({ job }: Props): JSX.Element {
 
   return (
     <Link href={appRoutes.details.makePath(job.id)} asChild>
-      <ListItem tag='a' icon={<TaskIcon job={job} />}>
+      <ListItem icon={<TaskIcon job={job} />}>
         <div>
           <Text tag='div' weight='semibold'>
             {formatResourceName({

diff --git a/packages/app/src/pages/ListPage.tsx b/packages/app/src/pages/ListPage.tsx
@@ -5,8 +5,10 @@ import {
   Button,
   EmptyState,
   HomePageLayout,
+  Icon,
   List,
   PageSkeleton,
+  Spacer,
   useCoreSdkProvider,
   useTokenProvider
 } from '@commercelayer/app-elements'
@@ -22,67 +24,77 @@ function ListPage(): JSX.Element {
 
   return (
     <HomePageLayout title='Imports'>
-      <ListImportProvider sdkClient={sdkClient} pageSize={25}>
-        {({ state, changePage }) => {
-          const { isLoading, currentPage, list } = state
+      <Spacer top='14'>
+        <ListImportProvider sdkClient={sdkClient} pageSize={25}>
+          {({ state, changePage }) => {
+            const { isLoading, currentPage, list } = state
 
-          if (isLoading) {
-            return <List isLoading />
-          }
+            if (isLoading) {
+              return <List isLoading />
+            }
 
-          if (list == null) {
-            return (
-              <div>
-                <EmptyState title='Unable to load list' />
-              </div>
-            )
-          }
+            if (list == null) {
+              return (
+                <div>
+                  <EmptyState title='Unable to load list' />
+                </div>
+              )
+            }
 
-          if (list.length === 0) {
-            return (
-              <div>
-                <EmptyState
-                  title='No imports yet!'
-                  description='Create your first import'
-                  action={
-                    canUser('create', 'imports') ? (
-                      <Link href={appRoutes.selectResource.makePath()}>
-                        <Button variant='primary'>New import</Button>
-                      </Link>
-                    ) : undefined
-                  }
-                />
-              </div>
-            )
-          }
+            if (list.length === 0) {
+              return (
+                <div>
+                  <EmptyState
+                    title='No imports yet!'
+                    description='Create your first import'
+                    action={
+                      canUser('create', 'imports') ? (
+                        <Link href={appRoutes.selectResource.makePath()}>
+                          <Button variant='primary'>New import</Button>
+                        </Link>
+                      ) : undefined
+                    }
+                  />
+                </div>
+              )
+            }
 
-          const isRefetching = currentPage !== list.meta.currentPage
-          const { recordCount, recordsPerPage, pageCount } = list.meta
+            const isRefetching = currentPage !== list.meta.currentPage
+            const { recordCount, recordsPerPage, pageCount } = list.meta
 
-          return (
-            <List
-              isDisabled={isRefetching}
-              title='All Imports'
-              actionButton={
-                <Link href={appRoutes.selectResource.makePath()}>
-                  New import
-                </Link>
-              }
-              pagination={{
-                recordsPerPage,
-                recordCount,
-                currentPage,
-                onChangePageRequest: changePage,
-                pageCount
-              }}
-            >
-              {list.map((job) => (
-                <Item key={job.id} job={job} />
-              ))}
-            </List>
-          )
-        }}
-      </ListImportProvider>
+            return (
+              <List
+                isDisabled={isRefetching}
+                title='All Imports'
+                actionButton={
+                  <Link href={appRoutes.selectResource.makePath()} asChild>
+                    <Button
+                      variant='secondary'
+                      size='mini'
+                      alignItems='center'
+                      aria-label='Add import'
+                    >
+                      <Icon name='plus' />
+                      New
+                    </Button>
+                  </Link>
+                }
+                pagination={{
+                  recordsPerPage,
+                  recordCount,
+                  currentPage,
+                  onChangePageRequest: changePage,
+                  pageCount
+                }}
+              >
+                {list.map((job) => (
+                  <Item key={job.id} job={job} />
+                ))}
+              </List>
+            )
+          }}
+        </ListImportProvider>
+      </Spacer>
     </HomePageLayout>
   )
 }

diff --git a/packages/app/src/pages/ResourceSelectorPage.tsx b/packages/app/src/pages/ResourceSelectorPage.tsx
@@ -38,7 +38,7 @@ export function ResourceSelectorPage(): JSX.Element {
               href={appRoutes.newImport.makePath(resource)}
               asChild
             >
-              <ListItem tag='a'>
+              <ListItem>
                 <Text weight='semibold'>
                   {formatResourceName({
                     resource,