From cefe326fbabade495ea190f6f9bc88c8cff582dc Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 21 Apr 2022 11:10:27 -0700
Subject: [PATCH] Add UI for empty state in the library

---
 .../templates/homeFeed/EmptyLibrary.tsx       |  36 ++++
 .../templates/homeFeed/HomeFeedContainer.tsx  | 175 +++++++++---------
 packages/web/stories/EmptyLibrary.stories.tsx |  19 ++
 3 files changed, 144 insertions(+), 86 deletions(-)
 create mode 100644 packages/web/components/templates/homeFeed/EmptyLibrary.tsx
 create mode 100644 packages/web/stories/EmptyLibrary.stories.tsx

diff --git a/packages/web/components/templates/homeFeed/EmptyLibrary.tsx b/packages/web/components/templates/homeFeed/EmptyLibrary.tsx
new file mode 100644
index 000000000..7d3479c3a
--- /dev/null
+++ b/packages/web/components/templates/homeFeed/EmptyLibrary.tsx
@@ -0,0 +1,36 @@
+
+
+// There aren't any discussions.
+// You can open a new discussion to ask questions about this repository or get help.
+
+import Link from 'next/link'
+import { Book } from 'phosphor-react'
+import { LibraryItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
+import { Button } from '../../elements/Button'
+import { Box, VStack } from '../../elements/LayoutPrimitives'
+import { StyledText } from '../../elements/StyledText'
+import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes'
+import { theme } from '../../tokens/stitches.config'
+
+type EmptyLibraryProps = {
+  onAddLinkClicked: () => void
+}
+
+export function EmptyLibrary(props: EmptyLibraryProps): JSX.Element {
+  return (
+    <VStack alignment="center" distribution="center" css={{ color: '$grayTextContrast', textAlign: 'center', paddingTop: '88px' }}>
+      <Book size={44} color={theme.colors.grayTextContrast.toString()} />
+        <StyledText style="fixedHeadline" css={{ color: '$grayTextContrast' }}>
+          No results found.
+        </StyledText>
+
+        <StyledText style="footnote" css={{ color: '$grayTextContrast' }}>
+          You can add a link or read more about Omnivore's <Link href="/help/search">advanced search</Link>.
+        </StyledText>
+        
+        <Button style="ctaDarkYellow" onClick={() => { props.onAddLinkClicked() }}>
+          Add Link
+        </Button>
+    </VStack>
+  )
+}
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index c8dfb20f4..6a515d1c4 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -38,6 +38,7 @@ import { ConfirmationModal } from '../../patterns/ConfirmationModal'
 import { SetLabelsModal } from '../article/SetLabelsModal'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
 import { isVipUser } from '../../../lib/featureFlag'
+import { EmptyLibrary } from './EmptyLibrary'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
 
@@ -604,95 +605,97 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           }
           </Box>
         )}
-        <Box
-          ref={props.gridContainerRef}
-          css={{
-            py: '$3',
-            display: 'grid',
-            width: '100%',
-            gridAutoRows: 'auto',
-            borderRadius: '8px',
-            gridGap: layout == 'LIST_LAYOUT' ? '0' : '$3',
-            marginTop: layout == 'LIST_LAYOUT' ? '21px' : '0',
-            marginBottom: '0px',
-            paddingTop: layout == 'LIST_LAYOUT' ? '0' : '21px',
-            paddingBottom: layout == 'LIST_LAYOUT' ? '0px' : '21px',
-            overflow: 'hidden',
-            '@smDown': {
-              border: 'unset',
-              width: layout == 'LIST_LAYOUT' ? '100vw' : undefined,
-              margin: layout == 'LIST_LAYOUT' ? '16px -16px' : undefined,
-              borderRadius: layout == 'LIST_LAYOUT' ? 0 : undefined,
-            },
-            '@md': {
-              gridTemplateColumns: layout == 'LIST_LAYOUT' ? 'none' : '1fr 1fr',
-            },
-            '@lg': {
-              gridTemplateColumns:
-                layout == 'LIST_LAYOUT' ? 'none' : 'repeat(3, 1fr)',
-            },
-          }}
-        >
-          {props.items.map((linkedItem) => (
-            <Box
-              className="linkedItemCard"
-              id={linkedItem.node.id}
-              tabIndex={0}
-              key={linkedItem.node.id}
-              css={{
-                width: '100%',
-                '&> div': {
-                  bg: '$grayBg',
-                },
-                '&:focus': {
-                  '> div': {
-                    bg: '$grayBgActive',
+        {props.items.length == 0 ? <EmptyLibrary onAddLinkClicked={() => { props.setShowAddLinkModal(true) }} /> : (
+          <Box
+            ref={props.gridContainerRef}
+            css={{
+              py: '$3',
+              display: 'grid',
+              width: '100%',
+              gridAutoRows: 'auto',
+              borderRadius: '8px',
+              gridGap: layout == 'LIST_LAYOUT' ? '0' : '$3',
+              marginTop: layout == 'LIST_LAYOUT' ? '21px' : '0',
+              marginBottom: '0px',
+              paddingTop: layout == 'LIST_LAYOUT' ? '0' : '21px',
+              paddingBottom: layout == 'LIST_LAYOUT' ? '0px' : '21px',
+              overflow: 'hidden',
+              '@smDown': {
+                border: 'unset',
+                width: layout == 'LIST_LAYOUT' ? '100vw' : undefined,
+                margin: layout == 'LIST_LAYOUT' ? '16px -16px' : undefined,
+                borderRadius: layout == 'LIST_LAYOUT' ? 0 : undefined,
+              },
+              '@md': {
+                gridTemplateColumns: layout == 'LIST_LAYOUT' ? 'none' : '1fr 1fr',
+              },
+              '@lg': {
+                gridTemplateColumns:
+                  layout == 'LIST_LAYOUT' ? 'none' : 'repeat(3, 1fr)',
+              },
+            }}
+          >
+            {props.items.map((linkedItem) => (
+              <Box
+                className="linkedItemCard"
+                id={linkedItem.node.id}
+                tabIndex={0}
+                key={linkedItem.node.id}
+                css={{
+                  width: '100%',
+                  '&> div': {
+                    bg: '$grayBg',
                   },
-                },
-                '&:hover': {
-                  '> div': {
-                    bg: '$grayBgActive',
+                  '&:focus': {
+                    '> div': {
+                      bg: '$grayBgActive',
+                    },
                   },
-                },
-              }}
-            >
-              {viewerData?.me && (
-                <LinkedItemCard
-                  layout={layout}
-                  item={linkedItem.node}
-                  viewer={viewerData.me}
-                  handleAction={(action: LinkedItemCardAction) => {
-                    if (action === 'delete') {
-                      setShowRemoveLinkConfirmation(true)
-                      setLinkToRemove(linkedItem)
-                    } else {
-                      props.actionHandler(action, linkedItem)
-                    }
-                  }}
-                />
-              )}
-            </Box>
-          ))}
-        </Box>
-        <HStack
-          distribution="center"
-          css={{ width: '100%', mt: '$2', mb: '$4' }}
-        >
-          {props.hasMore ? (
-            <Button
-              style="ctaGray"
-              css={{
-                cursor: props.isValidating ? 'not-allowed' : 'pointer',
-              }}
-              onClick={props.loadMore}
-              disabled={props.isValidating}
-            >
-              {props.isValidating ? 'Loading' : 'Load More'}
-            </Button>
-          ) : (
-            <StyledText style="caption"></StyledText>
+                  '&:hover': {
+                    '> div': {
+                      bg: '$grayBgActive',
+                    },
+                  },
+                }}
+              >
+                {viewerData?.me && (
+                  <LinkedItemCard
+                    layout={layout}
+                    item={linkedItem.node}
+                    viewer={viewerData.me}
+                    handleAction={(action: LinkedItemCardAction) => {
+                      if (action === 'delete') {
+                        setShowRemoveLinkConfirmation(true)
+                        setLinkToRemove(linkedItem)
+                      } else {
+                        props.actionHandler(action, linkedItem)
+                      }
+                    }}
+                  />
+                )}
+              </Box>
+            ))}
+          </Box>
           )}
-        </HStack>
+          <HStack
+            distribution="center"
+            css={{ width: '100%', mt: '$2', mb: '$4' }}
+          >
+            {props.hasMore ? (
+              <Button
+                style="ctaGray"
+                css={{
+                  cursor: props.isValidating ? 'not-allowed' : 'pointer',
+                }}
+                onClick={props.loadMore}
+                disabled={props.isValidating}
+              >
+                {props.isValidating ? 'Loading' : 'Load More'}
+              </Button>
+            ) : (
+              <StyledText style="caption"></StyledText>
+            )}
+          </HStack>
       </VStack>
       {props.showAddLinkModal && (
         <AddLinkModal onOpenChange={() => props.setShowAddLinkModal(false)} />
diff --git a/packages/web/stories/EmptyLibrary.stories.tsx b/packages/web/stories/EmptyLibrary.stories.tsx
new file mode 100644
index 000000000..4a04f23fe
--- /dev/null
+++ b/packages/web/stories/EmptyLibrary.stories.tsx
@@ -0,0 +1,19 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { EmptyLibrary } from '../components/templates/homeFeed/EmptyLibrary'
+
+export default {
+  title: 'Components/EmptyLibraryStory',
+  component: EmptyLibrary,
+  argTypes: {
+    position: {
+      description: 'The empty library component',
+      control: { type: 'select' },
+    },
+  },
+} as ComponentMeta<typeof EmptyLibrary>
+
+export const EmptyLibraryStory: ComponentStory<typeof EmptyLibrary> = (args: any) => {
+  return (
+    <EmptyLibrary />
+  )
+}