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

package/src/components/icons/icons.tsx

@@ -0,0 +1,119 @@
+import { createIcon } from './create-icon'
+
+export const ChevronUpIcon = createIcon({
+  displayName: 'ChevronUpIcon',
+  path: <polyline points="18 15 12 9 6 15"></polyline>,
+})
+
+export const ChevronDownIcon = createIcon({
+  displayName: 'ChevronDownIcon',
+  path: <polyline points="6 9 12 15 18 9"></polyline>,
+})
+
+export const ChevronLeftIcon = createIcon({
+  displayName: 'ChevronLeftIcon',
+  path: <polyline points="15 18 9 12 15 6"></polyline>,
+})
+
+export const ChevronRightIcon = createIcon({
+  displayName: 'ChevronRightIcon',
+  path: <polyline points="9 18 15 12 9 6"></polyline>,
+})
+
+export const HamburgerIcon = createIcon({
+  displayName: 'ChevronDownIcon',
+  path: (
+    <g fill="none">
+      <line x1="3" y1="12" x2="21" y2="12"></line>
+      <line x1="3" y1="6" x2="21" y2="6"></line>
+      <line x1="3" y1="18" x2="21" y2="18"></line>
+    </g>
+  ),
+})
+
+export const CloseIcon = createIcon({
+  displayName: 'CloseIcon',
+  path: (
+    <g>
+      <line x1="18" y1="6" x2="6" y2="18"></line>
+      <line x1="6" y1="6" x2="18" y2="18"></line>
+    </g>
+  ),
+})
+
+export const FilterIcon = createIcon({
+  displayName: 'FilterIcon',
+  path: (
+    <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+  ),
+})
+
+export const CalendarIcon = createIcon({
+  displayName: 'CalendarIcon',
+  path: (
+    <g>
+      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+      <line x1="16" y1="2" x2="16" y2="6"></line>
+      <line x1="8" y1="2" x2="8" y2="6"></line>
+      <line x1="3" y1="10" x2="21" y2="10"></line>
+    </g>
+  ),
+})
+
+export const PlusIcon = createIcon({
+  displayName: 'PlusIcon',
+  path: (
+    <g>
+      <line x1="12" y1="5" x2="12" y2="19"></line>
+      <line x1="5" y1="12" x2="19" y2="12"></line>
+    </g>
+  ),
+})
+
+export const MinusIcon = createIcon({
+  displayName: 'MinusIcon',
+  path: (
+    <g>
+      <line x1="5" y1="12" x2="19" y2="12"></line>
+    </g>
+  ),
+})
+
+export const ViewOffIcon = createIcon({
+  displayName: 'ViewOffIcon',
+  path: (
+    <g>
+      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+      <line x1="1" y1="1" x2="23" y2="23"></line>
+    </g>
+  ),
+})
+
+export const ViewIcon = createIcon({
+  displayName: 'ViewOffIcon',
+  path: (
+    <g>
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+      <circle cx="12" cy="12" r="3"></circle>
+    </g>
+  ),
+})
+
+export const SearchIcon = createIcon({
+  displayName: 'SearchIcon',
+  path: (
+    <g>
+      <circle cx="11" cy="11" r="8"></circle>
+      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+    </g>
+  ),
+})
+
+export const CheckIcon = createIcon({
+  displayName: 'CheckIcon',
+  path: (
+    <g>
+      <polyline points="20 6 9 17 4 12"></polyline>
+    </g>
+  ),
+})

package/src/components/icons/index.ts

@@ -0,0 +1 @@
+export * from './icons.tsx'

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

@@ -0,0 +1 @@
+export * from './input-group'

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

@@ -0,0 +1,46 @@
+import { cloneElement, forwardRef, isValidElement } from 'react'
+
+import type { BoxProps, InputElementProps } from '@chakra-ui/react'
+import { Group, InputElement } from '@chakra-ui/react'
+
+export interface InputGroupProps extends BoxProps {
+  startElementProps?: InputElementProps
+  endElementProps?: InputElementProps
+  startElement?: React.ReactNode
+  endElement?: React.ReactNode
+  children: React.ReactNode
+}
+
+export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(
+  function InputGroup(props, ref) {
+    const {
+      startElement,
+      startElementProps,
+      endElement,
+      endElementProps,
+      children,
+      ...rest
+    } = props
+
+    return (
+      <Group ref={ref} display="flex" {...rest}>
+        {startElement && (
+          <InputElement pointerEvents="none" {...startElementProps}>
+            {startElement}
+          </InputElement>
+        )}
+        {isValidElement(children) &&
+          cloneElement(children, {
+            ...(startElement && { ps: 'calc(var(--input-height) - 6px)' }),
+            ...(endElement && { pe: 'calc(var(--input-height) - 6px)' }),
+            ...children.props,
+          })}
+        {endElement && (
+          <InputElement placement="end" {...endElementProps}>
+            {endElement}
+          </InputElement>
+        )}
+      </Group>
+    )
+  },
+)

package/src/components/link/index.ts

@@ -0,0 +1,2 @@
+export { Link } from './link'
+export type { LinkProps } from './link'

package/src/components/link/link.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Link } from './'
+
+export default {
+  title: 'Components/Link',
+  component: Link,
+} as Meta
+
+type Story = StoryObj<typeof Link>
+
+export const Default: Story = {
+  args: {
+    href: '#',
+    children: 'Link',
+  },
+}

package/src/components/link/link.test.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+import { render } from '@saas-ui/test-utils'
+
+import { SaasProvider } from '../provider'
+
+import { Link } from './link'
+
+interface LinkComponentProps {
+  href: string
+  children: React.ReactNode
+}
+
+const LinkComponent: React.FC<LinkComponentProps> = (props) => {
+  const { children, href, ...rest } = props
+  return (
+    <a href={href} {...rest} className="saas-ui-link">
+      {children}
+    </a>
+  )
+}
+
+const renderLink = (ui: React.ReactNode) => {
+  return render(<SaasProvider linkComponent={LinkComponent}>{ui}</SaasProvider>)
+}
+
+test('should render the link', async () => {
+  const { getByText } = renderLink(<Link>Test</Link>)
+
+  const link = getByText('Test')
+
+  expect(link).toHaveClass('saas-ui-link')
+})

package/src/components/link/link.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { Link as ChakraLink, LinkProps } from '@chakra-ui/react'
+
+import { useLink } from '../../provider'
+
+export type { LinkProps }
+
+/**
+ * Chakra UI `Link` component wrapped in a router specific link component.
+ * Falls back to a plain `Link` if no Saas UI context is available or no `linkComponent` is configured
+ * The router link component can be configured in `SaasProvider`.
+ * @see https://saas-ui.dev/docs/core/getting-started
+ */
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  (props, ref) => {
+    const LinkComponent = useLink()
+
+    return (
+      <ChakraLink asChild>
+        <LinkComponent ref={ref} {...props} />
+      </ChakraLink>
+    )
+  },
+)
+
+Link.displayName = 'Link'

package/src/components/loading-overlay/index.ts

@@ -0,0 +1 @@
+export * as LoadingOverlay from './namespace.ts'

package/src/components/loading-overlay/loading-overlay.recipe.ts

@@ -0,0 +1,61 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+
+export const loadingOverlaySlotRecipe = defineSlotRecipe({
+  className: 'sui-loading-overlay',
+  slots: ['root', 'text'],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      p: 4,
+      transitionProperty: 'opacity',
+      transitionDuration: 'slower',
+      _open: {
+        opacity: 1,
+      },
+      _closed: {
+        opacity: 0,
+      },
+    },
+  },
+  variants: {
+    variant: {
+      fill: {
+        root: {
+          flex: 1,
+          height: '100%',
+          bg: {
+            base: 'whiteAlpha.400',
+            _dark: 'blackAlpha.400',
+          },
+        },
+      },
+      fullscreen: {
+        root: {
+          position: 'fixed',
+          inset: 0,
+          zIndex: 'modal',
+          bg: {
+            base: 'white',
+            _dark: 'gray.800',
+          },
+        },
+      },
+      overlay: {
+        root: {
+          position: 'absolute',
+          inset: 0,
+          bg: {
+            base: 'whiteAlpha.300',
+            _dark: 'blackAlpha.300',
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'fill',
+  },
+})

package/src/components/loading-overlay/loading-overlay.stories.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react'
+
+import { Button, Card, Container, Text } from '@chakra-ui/react'
+
+import { LoadingOverlay } from './index.ts'
+
+export default {
+  title: 'Components/LoadingOverlay',
+  decorators: [
+    (Story: any) => (
+      <Container mt="40px">
+        <Story />
+      </Container>
+    ),
+  ],
+}
+
+export const Basic = () => (
+  <Card.Root width="400px" height="200px" overflow="hidden">
+    <LoadingOverlay.Root>
+      <LoadingOverlay.Spinner />
+    </LoadingOverlay.Root>
+  </Card.Root>
+)
+
+export const Overlay = () => (
+  <Card.Root width="400px" height="200px" pos="relative" p="4">
+    <Text>This content will be overlayed.</Text>
+    <LoadingOverlay.Root variant="overlay">
+      <LoadingOverlay.Spinner />
+    </LoadingOverlay.Root>
+  </Card.Root>
+)
+
+export const Fullscreen = () => (
+  <LoadingOverlay.Root variant="fullscreen">
+    <LoadingOverlay.Spinner />
+  </LoadingOverlay.Root>
+)
+
+export const WithText = () => (
+  <Card.Root width="400px" height="200px">
+    <LoadingOverlay.Root borderRadius="md">
+      <LoadingOverlay.Text>Loading...</LoadingOverlay.Text>
+    </LoadingOverlay.Root>
+  </Card.Root>
+)
+
+export const ExitAnimation = () => {
+  const [loading, setLoading] = React.useState(false)
+
+  React.useEffect(() => {
+    if (loading) {
+      setTimeout(() => {
+        setLoading(false)
+      }, 4000)
+    }
+  }, [loading])
+
+  return (
+    <Card.Root width="400px" height="200px" pos="relative" p="4">
+      <Button onClick={() => setLoading(true)}>Show loader</Button>
+      <LoadingOverlay.Root variant="overlay" loading={loading}>
+        <LoadingOverlay.Spinner />
+      </LoadingOverlay.Root>
+    </Card.Root>
+  )
+}

package/src/components/loading-overlay/loading-overlay.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import {
+  Presence,
+  type PresenceBaseProps,
+  splitPresenceProps,
+} from '@ark-ui/react/presence'
+import {
+  HTMLChakraProps,
+  SlotRecipeProps,
+  chakra,
+  createSlotRecipeContext,
+} from '@chakra-ui/react'
+
+import { Spinner } from '#components/spinner'
+
+const { useStyles, withContext, withProvider } = createSlotRecipeContext({
+  key: 'loadingOverlay',
+})
+
+export const useLoadingOverlayStyles = useStyles
+
+export interface LoadingOverlayProps
+  extends HTMLChakraProps<'div'>,
+    SlotRecipeProps<'loadingOverlay'>,
+    PresenceBaseProps {
+  /**
+   * Show or hide the LoadingOverlay.
+   * @default true
+   */
+  loading?: boolean
+}
+
+const LoadingOverlay: React.FC<LoadingOverlayProps> = (props) => {
+  const { children, loading = true, ...rest } = props
+
+  const [presenceProps, rootProps] = splitPresenceProps(rest)
+
+  return (
+    <Presence present={loading} {...presenceProps} asChild>
+      <chakra.div {...rootProps}>{children}</chakra.div>
+    </Presence>
+  )
+}
+
+export const LoadingOverlayRoot = withProvider(LoadingOverlay, 'root')
+
+LoadingOverlayRoot.displayName = 'LoadingOverlay'
+
+export const LoadingOverlaySpinner = Spinner
+
+export interface LoadingTextProps extends HTMLChakraProps<'p'> {}
+
+export const LoadingOverlayText = withContext('p', 'text')

package/src/components/loading-overlay/namespace.ts

@@ -0,0 +1,7 @@
+import {
+  LoadingOverlayRoot as Root,
+  LoadingOverlaySpinner as Spinner,
+  LoadingOverlayText as Text,
+} from './loading-overlay.tsx'
+
+export { Root, Spinner, Text }

package/src/components/navbar/index.ts

@@ -0,0 +1 @@
+export * as Navbar from './namespace'

package/src/components/navbar/namespace.ts

@@ -0,0 +1,9 @@
+export {
+  NavbarRoot as Root,
+  NavbarContent as Content,
+  NavbarBrand as Brand,
+  NavbarItem as Item,
+  NavbarLink as Link,
+} from './navbar'
+
+export type { NavbarRootProps as RootProps } from './navbar'

package/src/components/navbar/navbar.recipe.ts

@@ -0,0 +1,109 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+
+export const navbarSlotRecipe = defineSlotRecipe({
+  className: 'sui-navbar',
+  slots: ['root', 'content', 'brand', 'item'],
+  base: {
+    root: {
+      display: 'flex',
+      zIndex: 'layer-3',
+      width: 'full',
+      height: 'auto',
+      alignItems: 'center',
+      justifyContent: 'center',
+      top: 0,
+      insetX: 0,
+      transitionProperty: 'common',
+      transitionDuration: 'normal',
+      transitionTimingFunction: 'ease-in-out',
+      _hidden: {
+        transform: 'translateY(-100%)',
+      },
+    },
+    content: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      width: 'full',
+      height: 'var(--navbar-height)',
+      flexWrap: 'nowrap',
+    },
+    brand: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      height: 'full',
+      bg: 'transparent',
+      textDecoration: 'none',
+      color: 'inherit',
+      whiteSpace: 'nowrap',
+      boxSizing: 'border-box',
+    },
+    item: {
+      bg: 'transparent',
+      color: 'currentColor',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      textDecoration: 'none',
+      whiteSpace: 'nowrap',
+      boxSizing: 'border-box',
+      borderRadius: 'md',
+      transitionProperty: 'common',
+      transitionDuration: 'normal',
+      lineHeight: 1,
+      _focusVisible: {
+        outline: 'none',
+        boxShadow: 'outline',
+      },
+      _hover: {
+        bg: 'blackAlpha.100',
+        textDecoration: 'none',
+        _dark: {
+          bg: 'whiteAlpha.200',
+        },
+      },
+      _active: {
+        fontWeight: 'semibold',
+      },
+    },
+  },
+  variants: {
+    variant: {
+      neutral: {
+        root: {
+          bg: 'bg.panel',
+          color: 'fg',
+        },
+      },
+      solid: {
+        root: {
+          bg: 'colorPalette.500',
+          color: 'colorPalette.contrast',
+        },
+      },
+    },
+    size: {
+      md: {
+        root: {
+          fontSize: 'sm',
+        },
+        content: {
+          px: {
+            base: 4,
+            lg: 6,
+          },
+          gap: 4,
+        },
+        item: {
+          px: 3,
+          h: 8,
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'neutral',
+    size: 'md',
+  },
+})