wip: adding more components

.github/workflows/check-on-pr.yml

@@ -5,8 +5,8 @@ on:
     branches:
       - main
     paths:
-      - "**"
-      - "!README.md"
+      - '**'
+      - '!README.md'
 
 jobs:
   lint:
@@ -53,4 +53,4 @@ jobs:
     permissions:
       contents: read
       pull-requests: read
-      checks: write
+      checks: write

src/components/account-menu.tsx

@@ -123,7 +123,7 @@ type AvatarButtonProps = {
 const AvatarButton = forwardRef<AvatarButtonProps, 'div'>(
   ({ name, picture, isActive, hasBadge, ...props }, ref) => (
     <div ref={ref} {...props} className={cx('cursor-pointer')}>
-      <ActiveCircle>
+      <ActiveCircle isActive={isActive}>
         <NotificationBadge hasBadge={hasBadge}>
           <Avatar
             name={name}

src/components/app-bar.tsx

@@ -2,8 +2,8 @@ import { ReactElement } from 'react'
 import cx from 'classnames'
 
 export type AppBarProps = {
-  bar: ReactElement
-  buttons: ReactElement
+  bar?: ReactElement
+  buttons?: ReactElement
 }
 
 export const AppBar = ({ bar, buttons }: AppBarProps) => (
@@ -18,7 +18,9 @@ export const AppBar = ({ bar, buttons }: AppBarProps) => (
       'w-full',
     )}
   >
-    <div className={cx('grow')}>{bar}</div>
+    <div className={cx('flex', 'flex-row', 'items-center', 'gap-1.5', 'grow')}>
+      {bar}
+    </div>
     <div className={cx('flex', 'flex-row', 'items-center', 'gap-1.5')}>
       {buttons}
     </div>

src/components/auxiliary-drawer.tsx

@@ -35,7 +35,7 @@ export const AuxiliaryDrawer = ({
 }: AuxiliaryDrawerProps) => {
   const buttonRef = useRef<HTMLButtonElement>(null)
   return (
-    <>
+    <div className="inline-block">
       <NotificationBadge hasBadge={hasBadge}>
         <IconButton
           ref={buttonRef}
@@ -59,6 +59,6 @@ export const AuxiliaryDrawer = ({
           <DrawerFooter>{footer}</DrawerFooter>
         </DrawerContent>
       </Drawer>
-    </>
+    </div>
   )
 }

src/components/index.ts

@@ -13,6 +13,6 @@ export * from './text'
 export * from './logo'
 export * from './app-bar'
 export * from './auxiliary-drawer'
-export * from './navigation-item'
+export * from './nav-bar'
 export * from './search-bar'
 export * from './account-menu'

src/components/layout-drawer/layout-drawer-context.ts

@@ -1,11 +1,11 @@
 import { createContext } from 'react'
 
-export type DrawerContextType = {
+export type LayoutDrawerContextType = {
   isCollapsed: boolean | undefined
   isTouched: boolean
 }
 
-export const LayoutDrawerContext = createContext<DrawerContextType>({
+export const LayoutDrawerContext = createContext<LayoutDrawerContextType>({
   isCollapsed: undefined,
   isTouched: false,
 })

src/components/layout-drawer/layout-drawer-item.tsx

@@ -8,7 +8,6 @@ export type DrawerItemProps = {
   href: string
   primaryText: string
   secondaryText: string
-  isActive?: boolean
   pathnameFn: () => string
   navigateFn: (href: string) => void
 }

src/components/layout-drawer/layout-drawer.tsx

@@ -5,7 +5,7 @@ import { StorageOptions } from '../../types'
 import { IconChevronLeft, IconChevronRight } from '../icons'
 import { LayoutDrawerContext } from './layout-drawer-context'
 
-export type DrawerProps = {
+export type LayoutDrawerProps = {
   children?: ReactNode
   logo?: ReactNode
   storage?: StorageOptions
@@ -19,7 +19,7 @@ export const LayoutDrawer = ({
   logo,
   homeHref,
   navigateFn,
-}: DrawerProps) => {
+}: LayoutDrawerProps) => {
   const [isCollapsed, setIsCollapsed] = useState<boolean | undefined>(undefined)
   const [isTouched, setIsTouched] = useState(false)
   const localStorageCollapsedKey = useMemo(

src/components/nav-bar.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react'
+import { Link as ChakraLink } from '@chakra-ui/react'
+import cx from 'classnames'
+
+export type NavBarProps = {
+  items: NavItem[]
+  pathnameFn: () => string
+  navigateFn: (href: string) => void
+}
+
+export type NavItem = {
+  title: string
+  href: string
+  isActive?: boolean
+}
+
+export const NavBar = ({ items, pathnameFn, navigateFn }: NavBarProps) => {
+  return (
+    <div className={cx('flex', 'flex-row', 'gap-1.5')}>
+      {items
+        ? items.map((item, index) => (
+            <Item
+              key={index}
+              title={item.title}
+              href={item.href}
+              pathnameFn={pathnameFn}
+              navigateFn={navigateFn}
+            />
+          ))
+        : null}
+    </div>
+  )
+}
+
+type ItemProps = {
+  title: string
+  href: string
+  pathnameFn: () => string
+  navigateFn: (href: string) => void
+}
+
+const Item = ({ title, href, pathnameFn, navigateFn }: ItemProps) => {
+  const pathname = pathnameFn()
+  const [isActive, setIsActive] = useState(false)
+
+  useEffect(() => {
+    if (
+      (href === '/' && pathname === '/') ||
+      (href !== '/' && pathname.startsWith(href))
+    ) {
+      setIsActive(true)
+    } else {
+      setIsActive(false)
+    }
+  }, [pathname, href])
+
+  return (
+    <ChakraLink
+      variant="no-underline"
+      className={cx(
+        'flex',
+        'items-center',
+        'opacity-100',
+        'hover:opacity-80',
+        'h-[40px]',
+        'rounded-xl',
+        'pt-0',
+        'pr-[20px]',
+        'pb-0',
+        'pl-[20px]',
+        'font-semibold',
+        {
+          'text-white': isActive,
+          'dark:text-gray-600': isActive,
+          'bg-black': isActive,
+          'dark:bg-white': isActive,
+          'bg-transparent': !isActive,
+        },
+      )}
+      onClick={() => navigateFn(href)}
+    >
+      {title}
+    </ChakraLink>
+  )
+}

src/components/search-bar.tsx

@@ -75,7 +75,7 @@ export const SearchBar = ({
   }, [])
 
   return (
-    <div className={cx('flex', 'flex-row', 'gap-0.5')}>
+    <div className={cx('flex', 'flex-row', 'gap-0.5', 'grow')}>
       <InputGroup>
         <InputLeftElement pointerEvents="none">
           <Icon as={IconSearch} className={cx('text-gray-300')} />

src/components/shell.tsx

@@ -3,24 +3,24 @@ import cx from 'classnames'
 import { StorageOptions } from '../types'
 import { LayoutDrawer, LayoutDrawerItem } from './layout-drawer'
 
-export type ShellItem = {
-  href: string
-  icon: ReactElement
-  primaryText: string
-  secondaryText: string
-}
-
 export type ShellProps = {
   storage?: StorageOptions
   logo: ReactElement
   topBar: ReactElement
-  items: ShellItem[]
+  items?: ShellItem[]
   children?: ReactElement
   onContentClick?: (event: MouseEvent) => void
   pathnameFn: () => string
   navigateFn: (href: string) => void
 }
 
+export type ShellItem = {
+  href: string
+  icon: ReactElement
+  primaryText: string
+  secondaryText: string
+}
+
 export const Shell = ({
   logo,
   topBar,
@@ -33,17 +33,19 @@ export const Shell = ({
 }: ShellProps) => (
   <div className={cx('flex', 'flex-row', 'items-center', 'gap-0', 'h-full')}>
     <LayoutDrawer storage={storage} logo={logo} navigateFn={navigateFn}>
-      {items.map((item, index) => (
-        <LayoutDrawerItem
-          key={index}
-          href={item.href}
-          icon={item.icon}
-          primaryText={item.primaryText}
-          secondaryText={item.secondaryText}
-          pathnameFn={pathnameFn}
-          navigateFn={navigateFn}
-        />
-      ))}
+      {items
+        ? items.map((item, index) => (
+            <LayoutDrawerItem
+              key={index}
+              href={item.href}
+              icon={item.icon}
+              primaryText={item.primaryText}
+              secondaryText={item.secondaryText}
+              pathnameFn={pathnameFn}
+              navigateFn={navigateFn}
+            />
+          ))
+        : null}
     </LayoutDrawer>
     <div
       className={cx('flex', 'flex-col', 'items-center', 'h-full', 'w-full')}

src/stories/Shell.stories.tsx → src/stories/bundles/layout.stories.tsx

@@ -19,10 +19,10 @@ import {
   NumberTag,
   SearchBar,
   Shell,
-} from '../components'
+} from '../../components'
 
 const meta: Meta<typeof Shell> = {
-  title: 'Components/Shell',
+  title: 'Bundles/Layout',
   component: Shell,
   parameters: {
     layout: 'fullscreen',
@@ -32,7 +32,7 @@ const meta: Meta<typeof Shell> = {
 export default meta
 type Story = StoryObj<typeof Shell>
 
-export const Default: Story = {
+export const ShellWithAppBar: Story = {
   render: () => {
     const location = useLocation()
     const navigate = useNavigate()
@@ -42,7 +42,7 @@ export const Default: Story = {
 
     return (
       <Shell
-        storage={{ prefix: 'lorem-ipsum', namespace: 'main' }}
+        storage={{ prefix: 'layout', namespace: 'main' }}
         logo={<Logo type="voltaserve" size="sm" />}
         topBar={
           <AppBar
@@ -124,7 +124,7 @@ export const Default: Story = {
         }
         items={[
           {
-            href: '/workspace',
+            href: '/',
             icon: <IconWorkspaces />,
             primaryText: 'Workspaces',
             secondaryText: 'Isolated containers for files and folders.',
@@ -143,7 +143,7 @@ export const Default: Story = {
           },
         ]}
         pathnameFn={() => location.pathname}
-        navigateFn={(href: string) => navigate(href)}
+        navigateFn={navigate}
       ></Shell>
     )
   },