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

package/src/components/icon-badge/icon-badge.recipe.ts

@@ -0,0 +1,57 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const iconBadgeRecipe = defineRecipe({
+  className: 'sui-icon-badge',
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  variants: {
+    variant: {
+      outline: {
+        borderWidth: '1px',
+        borderColor: 'colorPalette.subtle',
+        color: 'colorPalette.fg',
+      },
+      solid: {
+        bg: 'colorPalette.solid',
+        color: 'white',
+      },
+      subtle: {
+        bg: 'colorPalette.subtle',
+        color: 'colorPalette.fg',
+      },
+    },
+    size: {
+      sm: {
+        borderRadius: 'sm',
+        fontSize: '0.9em',
+        w: 6,
+        h: 6,
+      },
+      md: {
+        borderRadius: 'md',
+        fontSize: '1.1em',
+        w: 8,
+        h: 8,
+      },
+      lg: {
+        borderRadius: 'md',
+        fontSize: '1.3em',
+        w: 10,
+        h: 10,
+      },
+      xl: {
+        borderRadius: 'md',
+        fontSize: '1.5em',
+        w: 12,
+        h: 12,
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md',
+  },
+})

package/src/components/icon-badge/icon-badge.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { LuUser } from 'react-icons/lu'
+
+import { IconBadge } from './index.ts'
+
+export default {
+  title: 'Components/IconBadge',
+  component: IconBadge,
+} as Meta
+
+type Story = StoryObj<typeof IconBadge>
+
+export const Default: Story = {
+  args: {
+    icon: <LuUser />,
+  },
+}
+
+export const SolidVariant: Story = {
+  args: {
+    variant: 'solid',
+    icon: <LuUser />,
+  },
+}
+
+export const SubtleVariant: Story = {
+  args: {
+    variant: 'subtle',
+    icon: <LuUser />,
+  },
+}
+
+export const Rounded: Story = {
+  args: {
+    borderRadius: 'full',
+    icon: <LuUser />,
+  },
+}

package/src/components/icon-badge/icon-badge.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import * as React from 'react'
+import { cloneElement, isValidElement } from 'react'
+
+import {
+  type HTMLChakraProps,
+  RecipeProps,
+  chakra,
+  useRecipe,
+} from '@chakra-ui/react'
+import { cx } from '@saas-ui/core/utils'
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface IconBadgeProps
+  extends HTMLChakraProps<'div'>,
+    RecipeProps<'iconBadge'> {
+  /**
+   * The icon to display
+   */
+  icon: React.ReactNode
+
+  /**
+   * A11y: A label that describes the icon
+   */
+  'aria-label'?: string
+}
+
+export const IconBadge = React.forwardRef<HTMLDivElement, IconBadgeProps>(
+  (props, ref) => {
+    const { icon, children, ...rest } = props
+    const recipe = useRecipe({ key: 'iconBadge', recipe: props.recipe })
+    const [variantProps, localProps] = recipe.splitVariantProps(rest)
+    const styles = recipe(variantProps)
+
+    /**
+     * Passing the icon as prop or children should work
+     */
+    const element = icon || children
+    const _children = isValidElement(element)
+      ? cloneElement(element as any, {
+          'aria-hidden': true,
+          focusable: false,
+        })
+      : null
+
+    return (
+      <chakra.div
+        ref={ref}
+        {...localProps}
+        css={[styles, props.css]}
+        className={cx(recipe.className, props.className)}
+      >
+        {_children}
+      </chakra.div>
+    )
+  },
+)

package/src/components/icon-badge/index.ts

@@ -0,0 +1,2 @@
+export { IconBadge } from './icon-badge'
+export type { IconBadgeProps } from './icon-badge'

package/src/components/icons/create-icon.tsx

@@ -0,0 +1,41 @@
+import type { IconProps } from '@chakra-ui/react'
+import { createIcon as _createIcon } from '@chakra-ui/react'
+
+interface CreateIconOptions {
+  /**
+   * The icon `svg` viewBox
+   * @default "0 0 24 24"
+   */
+  viewBox?: string
+  /**
+   * The `svg` path or group element
+   * @type React.ReactElement | React.ReactElement[]
+   */
+  path?: React.ReactElement | React.ReactElement[]
+  /**
+   * If the `svg` has a single path, simply copy the path's `d` attribute
+   */
+  d?: string
+  /**
+   * The display name useful in the dev tools
+   */
+  displayName?: string
+  /**
+   * Default props automatically passed to the component; overwriteable
+   */
+  defaultProps?: IconProps
+}
+
+export const createIcon = (props: CreateIconOptions) => {
+  return _createIcon({
+    viewBox: '0 0 24 24',
+    defaultProps: {
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeWidth: '2',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+    },
+    ...props,
+  })
+}

package/src/components/icons/icons.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react'
+
+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/link-button.tsx

@@ -0,0 +1,12 @@
+"use client"
+
+import type { HTMLChakraProps, RecipeProps } from "@chakra-ui/react"
+import { createRecipeContext } from "@chakra-ui/react"
+
+export interface LinkButtonProps
+  extends HTMLChakraProps<"a", RecipeProps<"button">> {}
+
+const { withContext } = createRecipeContext({ key: "button" })
+
+// Replace "a" with your framework's link component
+export const LinkButton = withContext<HTMLAnchorElement, LinkButtonProps>("a")

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 }