feat: add navbar component (#176)

* feat: add navbar component * chore: update pro * chore: add navbar docs * chore: add figma link * chore: update title and description * chore: cleanup * chore: fix component overview * chore: finish navbar docs * chore: remove unused element * chore: fix tests
saas-js · Nov 18, 2023 · 31d05ed · 31d05ed
1 parent a75ae32
commit 31d05ed
Show file tree

Hide file tree

Showing 35 changed files with 3,068 additions and 512 deletions.
diff --git a/.changeset/dirty-eyes-rule.md b/.changeset/dirty-eyes-rule.md
@@ -0,0 +1,7 @@
+---
+'@saas-ui/theme': minor
+'@saas-ui/core': minor
+'@saas-ui/react': minor
+---
+
+Added new Navbar component 🥳
diff --git a/apps/website/src/components/overview/item.tsx b/apps/website/src/components/overview/item.tsx
@@ -8,6 +8,7 @@ import {
   Checkbox,
   CloseButton,
   Code,
+  Flex,
   FormControl,
   FormErrorMessage,
   FormLabel,
@@ -18,6 +19,7 @@ import {
   Input,
   LinkBox,
   LinkOverlay,
+  Spacer,
   Table,
   Tbody,
   Td,
@@ -36,6 +38,7 @@ import {
   ToolbarButton,
   Command,
   ActiveFilter,
+  Beacon,
 } from '@saas-ui-pro/react'
 import {
   AppShell,
@@ -65,18 +68,32 @@ import {
   Web3Address,
   Steps,
   StepsItem,
+  Navbar,
+  SelectOption,
+  SelectList,
+  Link,
+  Timeline,
+  TimelineItem,
+  TimelineSeparator,
+  TimelineDot,
+  TimelineContent,
+  TimelineTrack,
+  TimelineIcon,
 } from '@saas-ui/react'
 import NextLink from 'next/link'
 import {
   FiBold,
   FiCheck,
+  FiFilter,
   FiHome,
   FiItalic,
   FiMaximize,
   FiPlus,
   FiUnderline,
   FiUsers,
 } from 'react-icons/fi'
+import SaasUIGlyph from '../saas-ui-glyph'
+import { SelectButton } from '@saas-ui/forms'
 
 const autoform = `z.object({
   name: z.string()
@@ -111,11 +128,39 @@ const componentIllustrations = {
       />
     </Page>
   ),
+  splitpage: (
+    <HStack height="100%" width="full" spacing="0">
+      <Page height="100%" borderRightWidth="1px" flex="0">
+        <PageHeader
+          title="Inbox"
+          toolbar={
+            <Toolbar>
+              <Button variant="secondary" size="xs">
+                <FiFilter />
+              </Button>
+            </Toolbar>
+          }
+        />
+      </Page>
+      <Page height="100%" flex="1">
+        <PageHeader title="Hello" />
+      </Page>
+    </HStack>
+  ),
   section: (
-    <Section>
+    <Section width="80%">
       <SectionHeader title="Settings" description="Manage your settings" />
     </Section>
   ),
+  commandbar: <Command>CMD+K</Command>,
+  togglebutton: (
+    <Button variant="primary" size="xs">
+      Toggle
+    </Button>
+  ),
+  web3address: (
+    <Web3Address address="0x71C7656EC7ab88b098defB751B7401B5f6d8976F" />
+  ),
   toolbar: (
     <Toolbar flex="0" borderWidth="1px" rounded="md">
       <ToolbarButton label="bold" icon={<FiBold />} />
@@ -130,6 +175,21 @@ const componentIllustrations = {
       <StepsItem title="Account" />
     </Steps>
   ),
+  navbar: (
+    <HStack
+      borderBottomWidth="1px"
+      width="full"
+      px="3"
+      py="2"
+      alignSelf="start"
+    >
+      <SaasUIGlyph width="18px" />
+      <Spacer />
+      <Button variant="primary" size="xs">
+        Log in
+      </Button>
+    </HStack>
+  ),
   sidebar: (
     <Sidebar width="80%" borderRadius="md">
       <SidebarSection>
@@ -203,11 +263,16 @@ const componentIllustrations = {
     </Code>
   ),
   select: (
-    <Select
-      name="type"
-      options={['Fullstack Developer']}
-      value="Fullstack Developer"
-    />
+    <Box width="90%">
+      <Select name="type" value="Fullstack Developer" defaultIsOpen>
+        <SelectButton>Fullstack Developer</SelectButton>
+        <SelectList>
+          <SelectOption value="Fullstack Developer">
+            Fullstack Developer
+          </SelectOption>
+        </SelectList>
+      </Select>
+    </Box>
   ),
   passwordinput: (
     <Box width="80%">
@@ -219,6 +284,11 @@ const componentIllustrations = {
       <SearchInput size="sm" />
     </Box>
   ),
+  fileupload: (
+    <Box borderWidth="1px" rounded="md" p="4">
+      Drop your files here or <Link href="#">select files</Link>
+    </Box>
+  ),
   datatable: (
     <Box>
       <Table size="sm">
@@ -254,7 +324,7 @@ const componentIllustrations = {
       actions={<Button variant="link">Reset search</Button>}
     />
   ),
-  list: (
+  structuredlist: (
     <StructuredList width="90%">
       <StructuredListItem>
         <StructuredListIcon>
@@ -285,6 +355,27 @@ const componentIllustrations = {
       tertiaryLabel="Out for lunch"
     />
   ),
+  timeline: (
+    <Timeline>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineIcon />
+          <TimelineTrack />
+        </TimelineSeparator>
+        <TimelineContent>
+          <Text fontSize="sm">New signup</Text>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineIcon />
+        </TimelineSeparator>
+        <TimelineContent>
+          <Text fontSize="sm">Account upgraded</Text>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  ),
   command: <Command>G then D</Command>,
   datagrid: (
     <Box>
@@ -329,6 +420,23 @@ const componentIllustrations = {
   filters: (
     <ActiveFilter id="status" label="Status" operator="is" value="Active" />
   ),
+  kanban: (
+    <HStack spacing="4" alignItems="start" width="90%">
+      <Flex flexDirection="column" flex="1" gap="2">
+        <Box>Todo</Box>
+        <Box borderWidth="1px" rounded="md" px="2" py="4"></Box>
+      </Flex>
+      <Flex flexDirection="column" flex="1" gap="2">
+        <Box>Done</Box>
+        <Box borderWidth="1px" rounded="md" px="2" py="4"></Box>
+        <Box borderWidth="1px" rounded="md" px="2" py="4"></Box>
+      </Flex>
+      <Flex flexDirection="column" flex="1" gap="2">
+        <Box>Doing</Box>
+        <Box borderWidth="1px" rounded="md" px="2" py="4"></Box>
+      </Flex>
+    </HStack>
+  ),
   banner: (
     <Banner width="80%" colorScheme="primary" variant="solid" rounded="md">
       <BannerContent>
@@ -350,7 +458,7 @@ const componentIllustrations = {
       <CloseButton size="sm" />
     </HStack>
   ),
-  loader: (
+  loadingoverlay: (
     <LoadingOverlay>
       <LoadingSpinner />
     </LoadingOverlay>
@@ -424,6 +532,7 @@ const componentIllustrations = {
       <Box>Remove</Box>
     </VStack>
   ),
+  beacon: <Beacon />,
   'benefits-modal': (
     <VStack
       rounded="md"

diff --git a/apps/website/src/data/components-sidebar.ts b/apps/website/src/data/components-sidebar.ts
@@ -32,6 +32,11 @@ const sidebar = {
           title: 'App Shell',
           path: '/docs/components/layout/app-shell',
         },
+        {
+          title: 'Navbar',
+          path: '/docs/components/layout/navbar',
+          new: true,
+        },
         {
           title: 'Sidebar',
           path: '/docs/components/layout/sidebar',

diff --git a/apps/website/src/data/header-nav.tsx b/apps/website/src/data/header-nav.tsx
@@ -13,6 +13,11 @@ const headerNav: NavLinkProps[] = [
     label: 'Themes',
     ...hideMobile,
   },
+  {
+    href: '/figma',
+    label: 'Figma',
+    ...hideMobile,
+  },
   {
     href: '/pricing',
     label: 'Pricing',

diff --git a/apps/website/src/docs/components/mdx-components/codeblock/codeblock.tsx b/apps/website/src/docs/components/mdx-components/codeblock/codeblock.tsx
@@ -28,7 +28,9 @@ function CodeBlock(props) {
     mountStylesheet = false,
     height,
     overflow,
+    overflowY,
     center,
+    padding,
   } = props.children.props
 
   const _live = live === 'true' || live === true
@@ -52,7 +54,9 @@ function CodeBlock(props) {
     mountStylesheet,
     height,
     overflow,
+    overflowY,
     center,
+    padding,
   }
 
   if (isMounted && language === 'jsx' && _live === true) {

diff --git a/apps/website/src/docs/components/mdx-components/codeblock/react-live-block.tsx b/apps/website/src/docs/components/mdx-components/codeblock/react-live-block.tsx
@@ -105,7 +105,9 @@ function ReactLiveBlock({
   theme,
   height,
   overflow,
+  overflowY,
   center,
+  padding,
   ...rest
 }) {
   const [editorCode, setEditorCode] = useState(rawCode.trim())
@@ -119,6 +121,8 @@ function ReactLiveBlock({
 
   let sx: object = {
     overflow,
+    overflowY,
+    padding,
   }
 
   if (center) {

diff --git a/apps/website/src/docs/components/mdx-components/codeblock/react-live-scope.tsx b/apps/website/src/docs/components/mdx-components/codeblock/react-live-scope.tsx
@@ -26,6 +26,8 @@ import {
   FiInbox,
   FiUsers,
   FiUser,
+  FiMenu,
+  FiX,
   FiFilter,
   FiCircle,
   FiSettings,
@@ -46,6 +48,7 @@ import {
   FiLink,
   FiChevronsLeft,
   FiChevronsRight,
+  FiChevronDown,
   FiUserCheck,
   FiCode,
   FiRefreshCw,
@@ -67,6 +70,8 @@ const reactIcons = {
   FiInbox,
   FiUsers,
   FiUser,
+  FiMenu,
+  FiX,
   FiFilter,
   FiCircle,
   FiSettings,
@@ -92,6 +97,7 @@ const reactIcons = {
   FaCookie,
   FiChevronsLeft,
   FiChevronsRight,
+  FiChevronDown,
   FiUserCheck,
   FiCode,
   FiRefreshCw,

diff --git a/apps/website/src/pages/docs/components/index.tsx b/apps/website/src/pages/docs/components/index.tsx
@@ -10,10 +10,12 @@ import {
 } from '@chakra-ui/react'
 import { GetStaticProps } from 'next'
 
-import OverviewItem from '@/components/overview/item'
-import docsSidebar from '@/data/docs-sidebar'
+import docsSidebar from '@/data/components-sidebar'
 import Layout from '@/layouts/index'
 import { Link } from '@saas-ui/react'
+import dynamic from 'next/dynamic'
+
+const OverviewItem = dynamic(() => import('@/components/overview/item'))
 
 type Component = {
   title: string
@@ -32,6 +34,7 @@ type Props = {
 }
 
 export const ComponentsOverview = ({ categories, headings }: Props) => {
+  console.log(categories)
   return (
     <Layout
       frontMatter={{
@@ -98,18 +101,15 @@ export const ComponentsOverview = ({ categories, headings }: Props) => {
 }
 
 export const getStaticProps: GetStaticProps<Props> = async () => {
-  const data = docsSidebar.routes
-    .find((route) => route.path.match(/\/docs\/components/))
-    .routes.concat()
-    .splice(1)
+  const data = docsSidebar.routes?.concat().splice(1) || []
   const categories: Category[] = await Promise.all(
-    data.map(async ({ title, routes }) => {
+    data.map(async ({ title, routes = [] }) => {
       const components = await Promise.all(
         routes.map(async ({ title: routeTitle, path: url }) => {
           const doc = allDocs.find((doc) => doc.slug === url)
           const component: Component = {
             title: routeTitle,
-            url,
+            url: url!,
             description: doc?.description || null,
           }