@saas-ui/react 2.11.2 → 3.0.0-alpha.1

package/src/components/navbar/navbar.stories.tsx

@@ -0,0 +1,435 @@
+import React, { type HTMLProps, forwardRef } from 'react'
+
+import {
+  Box,
+  Button,
+  Container,
+  Drawer,
+  HStack,
+  Menu,
+  Skeleton as SkeletonPrimitive,
+  type SkeletonProps,
+  Stack,
+  useDisclosure,
+} from '@chakra-ui/react'
+import { SaasUIIcon } from '@saas-ui/assets'
+import { Meta, StoryObj } from '@storybook/react'
+import { LuMenu as FiMenu, LuX as FiX, LuX } from 'react-icons/lu'
+
+import { AppShell } from '../app-shell'
+import { Persona } from '../persona'
+import { SearchInput } from '../search-input'
+import { Navbar } from './index.ts'
+
+export default {
+  title: 'Components/Navbar',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    position: {
+      control: {
+        type: 'select',
+      },
+      options: ['static', 'fixed'],
+    },
+    maxWidth: {
+      control: {
+        type: 'select',
+      },
+      options: ['sm', 'md', 'lg', 'xl', '2xl', 'full'],
+    },
+  },
+} as Meta
+
+type Story = StoryObj<typeof Navbar.Root>
+
+const AppLogo = () => <SaasUIIcon width="28px" height="28px" />
+
+const Link = forwardRef<HTMLAnchorElement, HTMLProps<HTMLAnchorElement>>(
+  ({ children, ...props }, ref) => {
+    return (
+      <Link ref={ref} onClick={(e) => e.preventDefault()} {...props}>
+        {children}
+      </Link>
+    )
+  },
+)
+
+export interface SkeletonTextProps extends SkeletonProps {
+  noOfLines?: number
+}
+
+const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+  function Skeleton(props, ref) {
+    return (
+      <SkeletonPrimitive ref={ref} variant="none" bg="bg.subtle" {...props} />
+    )
+  },
+)
+
+const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(
+  function SkeletonText(props, ref) {
+    const { noOfLines = 3, gap, ...rest } = props
+    return (
+      <Stack gap={gap} width="full" ref={ref}>
+        {Array.from({ length: noOfLines }).map((_, index) => (
+          <SkeletonPrimitive
+            height="4"
+            key={index}
+            _last={{ maxW: '80%' }}
+            variant="none"
+            bg="bg.subtle"
+            {...rest}
+          />
+        ))}
+      </Stack>
+    )
+  },
+)
+
+const App = React.forwardRef(({ children, navbar }: any, ref: any) => {
+  return (
+    <AppShell header={navbar}>
+      <Box ref={ref} height="100%" width="100%" overflowY="auto">
+        {children}
+        <Container
+          maxW="container.xl"
+          pt="8"
+          px="8"
+          display="flex"
+          flexDirection="column"
+          margin="0 auto"
+        >
+          <Stack gap="4" mb="14">
+            <Skeleton width="100px" height="24px" />
+          </Stack>
+          <Stack direction="row" gap="8" mb="14">
+            <Stack gap="4" flex="1">
+              <Skeleton width="100px" height="20px" />
+              <SkeletonText />
+            </Stack>
+            <Stack gap="4" flex="1">
+              <Skeleton width="100px" height="20px" />
+              <SkeletonText />
+            </Stack>
+          </Stack>
+          <Stack direction="row" gap="8">
+            <Stack gap="4" flex="1">
+              <Skeleton width="100px" height="20px" />
+              <SkeletonText />
+            </Stack>
+            <Stack gap="4" flex="1">
+              <Skeleton width="100px" height="20px" />
+              <SkeletonText />
+            </Stack>
+          </Stack>
+        </Container>
+      </Box>
+    </AppShell>
+  )
+})
+
+App.displayName = 'App'
+
+const Template = (args: Navbar.RootProps) => {
+  const parentRef = React.useRef(null)
+
+  return (
+    <App ref={parentRef}>
+      <Navbar.Root {...args} parentRef={parentRef}>
+        <Navbar.Content>
+          <Navbar.Brand>
+            <AppLogo />
+          </Navbar.Brand>
+          <HStack display={{ base: 'hidden', md: 'flex' }}>
+            <Navbar.Item asChild>
+              <Link href="#">Features</Link>
+            </Navbar.Item>
+            <Navbar.Item active asChild>
+              <Link href="#">Customers</Link>
+            </Navbar.Item>
+            <Navbar.Item asChild>
+              <Link href="#">Integrations</Link>
+            </Navbar.Item>
+            <Navbar.Item asChild>
+              <Link href="#">Pricing</Link>
+            </Navbar.Item>
+          </HStack>
+          <HStack justifyContent="end" gap="2">
+            <Navbar.Item asChild>
+              <Link href="#">Login</Link>
+            </Navbar.Item>
+            <Button variant="solid" asChild>
+              <Link href="#">Sign Up</Link>
+            </Button>
+          </HStack>
+        </Navbar.Content>
+      </Navbar.Root>
+    </App>
+  )
+}
+
+const WithMenuTemplate = (args: Navbar.RootProps) => {
+  const parentRef = React.useRef(null)
+  const mobileNav = useDisclosure()
+  const menuItems = ['Features', 'Customers', 'Integrations', 'Pricing']
+
+  return (
+    <App ref={parentRef}>
+      <Navbar.Root parentRef={parentRef} position="sticky" {...args}>
+        <Navbar.Content>
+          <Navbar.Brand>
+            <AppLogo />
+          </Navbar.Brand>
+
+          <HStack display={{ base: 'none', sm: 'flex' }}>
+            <Navbar.Item asChild>
+              <Link href="#">Features</Link>
+            </Navbar.Item>
+            <Navbar.Item active asChild>
+              <Link href="#">Customers</Link>
+            </Navbar.Item>
+            <Navbar.Item asChild>
+              <Link href="#">Integrations</Link>
+            </Navbar.Item>
+            <Navbar.Item asChild>
+              <Link href="#">Pricing</Link>
+            </Navbar.Item>
+          </HStack>
+
+          <HStack justifyContent="end" gap="2">
+            <Navbar.Item asChild>
+              <Link href="#">Login</Link>
+            </Navbar.Item>
+
+            <Button variant="solid" asChild>
+              <Link href="#">Sign Up</Link>
+            </Button>
+
+            <Button
+              aria-label={mobileNav.open ? 'Close menu' : 'Open menu'}
+              display={{ base: 'inline-flex', sm: 'none' }}
+              onClick={mobileNav.onToggle}
+              variant="ghost"
+            >
+              {mobileNav.open ? <FiX /> : <FiMenu />}
+            </Button>
+          </HStack>
+        </Navbar.Content>
+
+        <Drawer.Root open={mobileNav.open} onOpenChange={mobileNav.onToggle}>
+          <Drawer.Backdrop />
+          <Drawer.Content>
+            <Drawer.Header>
+              <Drawer.CloseTrigger>
+                <Button variant="ghost">
+                  <LuX />
+                </Button>
+              </Drawer.CloseTrigger>
+            </Drawer.Header>
+            <Drawer.Body fontSize="md">
+              <Stack direction="column" gap="4">
+                {menuItems.map((item, index) => (
+                  <Navbar.Item key={`${item}-${index}`} width="full" asChild>
+                    <Link href="#">{item}</Link>
+                  </Navbar.Item>
+                ))}
+              </Stack>
+            </Drawer.Body>
+          </Drawer.Content>
+        </Drawer.Root>
+      </Navbar.Root>
+    </App>
+  )
+}
+
+const WithUserMenuTemplate = (args: Navbar.RootProps) => {
+  return (
+    <App>
+      <Navbar.Root {...args}>
+        <Navbar.Content>
+          <Navbar.Brand>
+            <AppLogo />
+          </Navbar.Brand>
+
+          <HStack display={{ base: 'hidden', sm: 'flex' }}>
+            <Navbar.Item asChild active>
+              <Link href="#">Inbox</Link>
+            </Navbar.Item>
+            <Navbar.Item asChild>
+              <Link href="#">Contacts</Link>
+            </Navbar.Item>
+            <Navbar.Item asChild>
+              <Link href="#">Tasks</Link>
+            </Navbar.Item>
+          </HStack>
+
+          <Box>
+            <Menu.Root>
+              <Menu.Trigger>
+                <Persona.Avatar
+                  src="/showcase-avatar.jpg"
+                  name="Beatriz"
+                  size="xs"
+                >
+                  <Persona.PresenceBadge presence="online" />
+                </Persona.Avatar>
+              </Menu.Trigger>
+              <Menu.Content>
+                <Menu.ItemGroup title="beatriz@saas-ui.dev">
+                  <Menu.Item value="profile" asChild>
+                    <Link href="#">Profile</Link>
+                  </Menu.Item>
+                  <Menu.Item value="settings" asChild>
+                    <Link href="#">Settings</Link>
+                  </Menu.Item>
+                  <Menu.Item value="help" asChild>
+                    <Link href="#">Help & feedback</Link>
+                  </Menu.Item>
+                </Menu.ItemGroup>
+                <Menu.Separator />
+                <Menu.Item value="logout" asChild>
+                  <Link href="#">Log out</Link>
+                </Menu.Item>
+              </Menu.Content>
+            </Menu.Root>
+          </Box>
+        </Navbar.Content>
+      </Navbar.Root>
+    </App>
+  )
+}
+
+const WithSearchInputTemplate = (args: Navbar.RootProps) => {
+  return (
+    <App>
+      <Navbar.Root {...args}>
+        <Navbar.Content>
+          <Navbar.Brand>
+            <AppLogo />
+          </Navbar.Brand>
+
+          <HStack display={{ base: 'hidden', sm: 'flex' }} gap="1">
+            <Navbar.Item asChild>
+              <Link href="#">Inbox</Link>
+            </Navbar.Item>
+            <Navbar.Item active asChild>
+              <Link href="#">Contacts</Link>
+            </Navbar.Item>
+            <Navbar.Item asChild>
+              <Link href="#">Tasks</Link>
+            </Navbar.Item>
+          </HStack>
+
+          <HStack gap="4">
+            <Box width="180px">
+              <SearchInput size="sm" />
+            </Box>
+            <Menu.Root>
+              <Menu.Trigger>
+                <Persona.Avatar
+                  src="/showcase-avatar.jpg"
+                  name="Beatriz"
+                  size="xs"
+                >
+                  <Persona.PresenceBadge presence="online" />
+                </Persona.Avatar>
+              </Menu.Trigger>
+              <Menu.Content>
+                <Menu.ItemGroup title="beatriz@saas-ui.dev">
+                  <Menu.Item value="profile" asChild>
+                    <Link href="#">Profile</Link>
+                  </Menu.Item>
+                  <Menu.Item value="settings" asChild>
+                    <Link href="#">Settings</Link>
+                  </Menu.Item>
+                  <Menu.Item value="help" asChild>
+                    <Link href="#">Help & feedback</Link>
+                  </Menu.Item>
+                </Menu.ItemGroup>
+                <Menu.Separator />
+                <Menu.Item value="logout" asChild>
+                  <Link href="#">Log out</Link>
+                </Menu.Item>
+              </Menu.Content>
+            </Menu.Root>
+          </HStack>
+        </Navbar.Content>
+      </Navbar.Root>
+    </App>
+  )
+}
+
+export const Static: Story = {
+  render: Template,
+
+  args: {
+    position: 'static',
+  },
+}
+
+export const Sticky: Story = {
+  render: Template,
+
+  args: {
+    position: 'sticky',
+  },
+}
+
+export const Border: Story = {
+  render: Template,
+
+  args: {
+    position: 'sticky',
+    borderBottomWidth: '1px',
+  },
+}
+
+export const BlurredBg: Story = {
+  render: Template,
+
+  args: {
+    position: 'sticky',
+    borderBottomWidth: '1px',
+    background: 'transparent',
+    backdropFilter: 'blur(4px)',
+  },
+}
+
+export const Shadow: Story = {
+  render: Template,
+
+  args: {
+    position: 'sticky',
+    background: 'transparent',
+    backdropFilter: 'blur(4px)',
+    css: {
+      '&:not([data-at-top])': {
+        borderBottomWidth: '1px',
+        boxShadow: 'lg',
+      },
+    },
+  },
+}
+
+export const HideOnScroll: Story = {
+  render: Template,
+
+  args: {
+    position: 'sticky',
+    shouldHideOnScroll: true,
+  },
+}
+
+export const WithMenu: Story = {
+  render: WithMenuTemplate,
+}
+
+export const WithUserMenu: Story = {
+  render: WithUserMenuTemplate,
+}
+
+export const WithSearchInput: Story = {
+  render: WithSearchInputTemplate,
+}

package/src/components/navbar/navbar.test.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import { render, testStories } from '@saas-ui/test-utils'
+
+import { Navbar, NavbarBrand, NavbarItem, NavbarContent } from './index'
+
+import * as stories from './navbar.stories'
+
+testStories<typeof stories>(stories)
+
+describe('Navbar', () => {
+  it('should render correctly', () => {
+    const wrapper = render(<Navbar />)
+
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
+  it('ref should be forwarded', () => {
+    const ref = React.createRef<HTMLDivElement>()
+
+    render(<Navbar ref={ref} />)
+    expect(ref.current).not.toBeNull()
+  })
+
+  it('should render correctly with brand', () => {
+    const wrapper = render(
+      <Navbar>
+        <NavbarBrand data-testid="navbar-test">Saas UI</NavbarBrand>
+      </Navbar>
+    )
+
+    expect(wrapper.getByTestId('navbar-test')).toBeInTheDocument()
+  })
+
+  it('should render correctly content children', () => {
+    const wrapper = render(
+      <Navbar>
+        <NavbarContent data-testid="navbar-content-test">
+          <NavbarItem>Dashboard</NavbarItem>
+          <NavbarItem>Contacts</NavbarItem>
+          <NavbarItem>Settings</NavbarItem>
+        </NavbarContent>
+      </Navbar>
+    )
+
+    const navbarContent = wrapper.getByTestId('navbar-content-test')
+
+    expect(navbarContent.children.length).toBe(3)
+  })
+})

package/src/components/navbar/navbar.tsx

@@ -0,0 +1,39 @@
+import type { HTMLChakraProps } from '@chakra-ui/react'
+import { createSlotRecipeContext } from '@chakra-ui/react'
+import { Navbar } from '@saas-ui/core/navbar'
+
+const {
+  withProvider,
+  withContext,
+  useStyles: useNavbarStyles,
+} = createSlotRecipeContext({
+  key: 'navbar',
+})
+
+export { useNavbarStyles }
+
+export interface NavbarRootProps
+  extends Navbar.RootProps,
+    Omit<HTMLChakraProps<'div'>, keyof Navbar.RootProps> {}
+
+export const NavbarRoot = withProvider<HTMLDivElement, NavbarRootProps>(
+  Navbar.Root,
+  'root',
+)
+
+export const NavbarBrand = withContext(Navbar.Brand, 'brand')
+
+export const NavbarContent = withContext<
+  HTMLDivElement,
+  HTMLChakraProps<'div'>
+>(Navbar.Content, 'content')
+
+export const NavbarItem = withContext<HTMLLIElement, HTMLChakraProps<'li'>>(
+  Navbar.Item,
+  'item',
+)
+
+export const NavbarLink = withContext<HTMLAnchorElement, HTMLChakraProps<'a'>>(
+  Navbar.Link,
+  'link',
+)

package/src/components/number-input/index.ts

@@ -0,0 +1,2 @@
+export { NumberInput } from './number-input.tsx'
+export type { NumberInputProps } from './number-input.tsx'

package/src/components/number-input/number-input.tsx

@@ -0,0 +1,41 @@
+import { forwardRef } from 'react'
+
+import { NumberInput as ChakraNumberInput } from '@chakra-ui/react'
+
+import { InputGroup } from '#components/input-group/index.ts'
+
+export interface NumberInputProps
+  extends Omit<ChakraNumberInput.RootProps, 'children'> {
+  rootRef?: React.Ref<HTMLDivElement>
+  hideControls?: boolean
+  startElement?: React.ReactNode
+  endElement?: React.ReactNode
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+}
+
+export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
+  function NumberInput(props, ref) {
+    const {
+      hideControls,
+      startElement,
+      endElement,
+      inputProps,
+      rootRef,
+      ...rest
+    } = props
+    return (
+      <ChakraNumberInput.Root ref={rootRef} {...rest}>
+        <InputGroup startElement={startElement} endElement={endElement}>
+          <ChakraNumberInput.Input ref={ref} {...inputProps} />
+        </InputGroup>
+
+        {!hideControls && !endElement ? (
+          <ChakraNumberInput.Control>
+            <ChakraNumberInput.IncrementTrigger />
+            <ChakraNumberInput.DecrementTrigger />
+          </ChakraNumberInput.Control>
+        ) : null}
+      </ChakraNumberInput.Root>
+    )
+  },
+)

package/src/components/password-input/index.ts

@@ -0,0 +1,2 @@
+export { PasswordInput } from './password-input'
+export type { PasswordInputProps } from './password-input'

package/src/components/password-input/password-input.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { forwardRef, useRef } from 'react'
+
+import type { ButtonProps, GroupProps, InputProps } from '@chakra-ui/react'
+import {
+  IconButton,
+  Input,
+  mergeRefs,
+  useControllableState,
+} from '@chakra-ui/react'
+import { LuEye, LuEyeOff } from 'react-icons/lu'
+
+import { InputGroup } from '../input-group'
+
+export interface PasswordInputProps
+  extends InputProps,
+    PasswordVisibilityProps {
+  rootProps?: GroupProps
+}
+
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+  function PasswordInput(props, ref) {
+    const {
+      rootProps,
+      defaultVisible,
+      visible: visibleProp,
+      onVisibleChange,
+      visibilityIcon = { on: <LuEye />, off: <LuEyeOff /> },
+      ...rest
+    } = props
+
+    const [visible, setVisible] = useControllableState({
+      value: visibleProp,
+      defaultValue: defaultVisible || false,
+      onChange: onVisibleChange,
+    })
+
+    const inputRef = useRef<HTMLInputElement>(null)
+
+    return (
+      <InputGroup
+        width="full"
+        endElement={
+          <VisibilityTrigger
+            disabled={rest.disabled}
+            onPointerDown={(e) => {
+              if (rest.disabled) return
+              if (e.button !== 0) return
+              e.preventDefault()
+              setVisible(!visible)
+            }}
+          >
+            {visible ? visibilityIcon.off : visibilityIcon.on}
+          </VisibilityTrigger>
+        }
+        {...rootProps}
+      >
+        <Input
+          {...rest}
+          ref={mergeRefs(ref, inputRef)}
+          type={visible ? 'text' : 'password'}
+        />
+      </InputGroup>
+    )
+  },
+)
+
+export interface PasswordVisibilityProps {
+  defaultVisible?: boolean
+  visible?: boolean
+  onVisibleChange?: (visible: boolean) => void
+  visibilityIcon?: { on: React.ReactNode; off: React.ReactNode }
+}
+
+const VisibilityTrigger = forwardRef<HTMLButtonElement, ButtonProps>(
+  function VisibilityTrigger(props, ref) {
+    return (
+      <IconButton
+        tabIndex={-1}
+        ref={ref}
+        me="-2"
+        aspectRatio="square"
+        size="sm"
+        variant="ghost"
+        colorPalette="gray"
+        height="calc(100% - {spacing.2})"
+        aria-label="Toggle password visibility"
+        {...props}
+      />
+    )
+  },
+)

package/src/components/persona/index.ts

@@ -0,0 +1,2 @@
+export { Persona, PersonaAvatar } from './persona.tsx'
+export type { PersonaProps, PersonaAvatarProps } from './persona.tsx'

package/src/components/persona/namespace.ts

@@ -0,0 +1,18 @@
+export {
+  PersonaRoot as Root,
+  PersonaAvatar as Avatar,
+  PersonaPresenceBadge as PresenceBadge,
+  PersonaDetails as Details,
+  PersonaLabel as Label,
+  PersonaSecondaryLabel as SecondaryLabel,
+  PersonaTertiaryLabel as TertiaryLabel,
+} from './persona-primitive.tsx'
+
+export type {
+  PersonaRootProps as RootProps,
+  PersonaAvatarProps as AvatarProps,
+  PersonaPresenceBadgeProps as PresenceBadgeProps,
+  PersonaDetailsProps as DetailsProps,
+  PersonaLabelProps as LabelProps,
+  Presence,
+} from './persona-primitive.tsx'