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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/navbar/index.ts

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

package/src/components/navbar/namespace.ts

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

@@ -1,109 +0,0 @@
-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',
-  },
-})