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

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

@@ -1,435 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

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

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

@@ -1,41 +0,0 @@
-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

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

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

@@ -1,93 +0,0 @@
-'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

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

package/src/components/persona/namespace.ts

@@ -1,18 +0,0 @@
-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'