Add SKU list create and update pages

packages/app/package.json

@@ -15,22 +15,23 @@
     "prepare": "touch ./public/config.local.js"
   },
   "dependencies": {
-    "@commercelayer/app-elements": "1.14.6",
-    "@commercelayer/sdk": "5.31.1",
+    "@commercelayer/app-elements": "1.15.1",
+    "@commercelayer/sdk": "5.32.0",
     "@hookform/resolvers": "^3.3.4",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "7.49.3",
+    "react-hook-form": "^7.50.1",
     "swr": "^2.2.4",
-    "type-fest": "^4.9.0",
-    "wouter": "^2.12.1",
+    "type-fest": "^4.10.2",
+    "wouter": "^3.0.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@commercelayer/eslint-config-ts-react": "^1.3.0",
     "@testing-library/react": "^14.1.2",
     "@types/lodash": "^4.14.202",
+    "@types/node": "20.11.16",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.2.1",

packages/app/src/App.tsx

@@ -1,5 +1,7 @@
 import { ErrorNotFound } from '#pages/ErrorNotFound'
 import { SkuListDetails } from '#pages/SkuListDetails'
+import { SkuListEdit } from '#pages/SkuListEdit'
+import { SkuListNew } from '#pages/SkuListNew'
 import { SkuListsList } from '#pages/SkuListsList'
 import {
   CoreSdkProvider,
@@ -46,6 +48,8 @@ export function App(): JSX.Element {
                   path={appRoutes.details.path}
                   component={SkuListDetails}
                 />
+                <Route path={appRoutes.edit.path} component={SkuListEdit} />
+                <Route path={appRoutes.new.path} component={SkuListNew} />
                 <Route>
                   <ErrorNotFound />
                 </Route>

packages/app/src/components/ListEmptyState.tsx

@@ -0,0 +1,60 @@
+import { appRoutes } from '#data/routes'
+import { A, Button, EmptyState } from '@commercelayer/app-elements'
+import { Link, useRoute } from 'wouter'
+
+interface Props {
+  scope?: 'noSKUListItems' | 'noSKUs' | 'noSKUsFiltered'
+}
+
+export function ListEmptyState({
+  scope = 'noSKUListItems'
+}: Props): JSX.Element {
+  if (scope === 'noSKUsFiltered') {
+    return (
+      <EmptyState
+        title='No SKUs found!'
+        description={
+          <div>
+            <p>
+              We didn't find any SKU matching the current filters selection.
+            </p>
+          </div>
+        }
+        className='bg-white'
+      />
+    )
+  }
+  if (scope === 'noSKUs') {
+    return (
+      <EmptyState
+        title='No SKUS yet!'
+        description={
+          <div className='bg-white'>
+            <p>Add a SKU with the API, or use the CLI.</p>
+            <A
+              target='_blank'
+              href='https://docs.commercelayer.io/core/v/api-reference/skus'
+              rel='noreferrer'
+            >
+              View API reference.
+            </A>
+          </div>
+        }
+      />
+    )
+  }
+
+  const [, params] = useRoute<{ skuListId: string }>(appRoutes.edit.path)
+  const skuListId = params?.skuListId ?? ''
+
+  return (
+    <EmptyState
+      title='No items found in the selected SKU list!'
+      action={
+        <Link href={appRoutes.edit.makePath({ skuListId })}>
+          <Button variant='primary'>Add a SKU</Button>
+        </Link>
+      }
+    />
+  )
+}

packages/app/src/components/ListItemCardSkuListItem.tsx

@@ -0,0 +1,73 @@
+import {
+  Avatar,
+  Icon,
+  InputSpinner,
+  ListItem,
+  Text,
+  withSkeletonTemplate
+} from '@commercelayer/app-elements'
+import type { FormSkuListItem } from './SkuListForm'
+
+interface Props {
+  resource?: FormSkuListItem
+  onQuantityChange?: (resource: FormSkuListItem, quantity: number) => void
+  onRemoveClick?: (resource: FormSkuListItem) => void
+  isLoading?: boolean
+  delayMs?: number
+}
+
+export const ListItemCardSkuListItem = withSkeletonTemplate<Props>(
+  ({ resource, onQuantityChange, onRemoveClick }): JSX.Element | null => {
+    return (
+      <ListItem
+        tag='div'
+        icon={
+          <Avatar
+            alt={resource?.sku?.name ?? ''}
+            src={resource?.sku?.image_url as `https://${string}`}
+          />
+        }
+        alignItems='center'
+        variant='card'
+        className='bg-white'
+      >
+        <div>
+          <Text tag='div' weight='medium' variant='info' size='small'>
+            {resource?.sku?.code}
+          </Text>
+          <Text tag='div' weight='semibold'>
+            {resource?.sku?.name}
+          </Text>
+        </div>
+        <div className='flex items-center gap-4'>
+          <InputSpinner
+            defaultValue={resource?.quantity ?? 1}
+            min={1}
+            disableKeyboard
+            onChange={(newQuantity) => {
+              if (onQuantityChange != null && resource != null) {
+                onQuantityChange(resource, newQuantity)
+              }
+            }}
+          />
+          <button
+            className='rounded'
+            type='button'
+            onClick={() => {
+              if (onRemoveClick != null && resource != null) {
+                onRemoveClick(resource)
+              }
+            }}
+          >
+            <Icon
+              name='trash'
+              size='18'
+              weight='bold'
+              className='text-primary'
+            />
+          </button>
+        </div>
+      </ListItem>
+    )
+  }
+)

packages/app/src/components/ListItemSku.tsx

@@ -1,22 +1,19 @@
 import {
   Avatar,
-  Icon,
   ListItem,
   Text,
-  withSkeletonTemplate,
-  type ListItemProps
+  withSkeletonTemplate
 } from '@commercelayer/app-elements'
 import type { Sku } from '@commercelayer/sdk'
 import { makeSku } from 'src/mocks/resources/skus'
 
 interface Props {
   resource?: Sku
-  variant: ListItemProps['variant']
   onSelect?: (resource: Sku) => void
 }
 
 export const ListItemSku = withSkeletonTemplate<Props>(
-  ({ resource = makeSku(), variant, onSelect }) => {
+  ({ resource = makeSku(), onSelect }) => {
     return (
       <ListItem
         tag='a'
@@ -33,7 +30,6 @@ export const ListItemSku = withSkeletonTemplate<Props>(
           />
         }
         className='bg-white'
-        variant={variant}
       >
         <div>
           <Text tag='div' variant='info' weight='semibold'>
@@ -43,9 +39,6 @@ export const ListItemSku = withSkeletonTemplate<Props>(
             {resource.name}
           </Text>
         </div>
-        {variant === 'card' && (
-          <Icon name='x' size='18' weight='bold' className='text-primary' />
-        )}
       </ListItem>
     )
   }

packages/app/src/components/ListItemSkuListItem.tsx

@@ -25,6 +25,7 @@ export const ListItemSkuListItem = withSkeletonTemplate<Props>(
           />
         }
         alignItems='bottom'
+        className='bg-white'
       >
         <div>
           <Text tag='div' weight='medium' variant='info' size='small'>