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

package/src/provider/sui-provider.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+
+import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react'
+
+export interface SuiContextValue {
+  linkComponent?: React.ElementType<any>
+}
+
+export const SuiContext = React.createContext<SuiContextValue>({})
+
+export interface SuiProviderProps extends ChakraProviderProps {
+  linkComponent?: React.ElementType<any>
+  children: React.ReactNode
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void
+}
+
+export function SuiProvider(props: SuiProviderProps) {
+  const { linkComponent, onError, children, ...rest } = props
+
+  const context = React.useMemo(
+    () => ({
+      linkComponent,
+    }),
+    [],
+  )
+
+  return (
+    <SuiContext.Provider value={context}>
+      <ChakraProvider {...rest}>{children}</ChakraProvider>
+    </SuiContext.Provider>
+  )
+}
+
+export const useSui = (): SuiContextValue => React.useContext(SuiContext)

package/src/provider/use-link.test.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { hooks, render } from '@saas-ui/test-utils'
+
+import { SaasProvider, useLink } from './index'
+
+const DummyComponent = ({ href = '' }) => {
+  const LinkWrapper = useLink()
+
+  if (LinkWrapper) {
+    return (
+      <LinkWrapper href={href}>
+        <a>Link</a>
+      </LinkWrapper>
+    )
+  }
+  return <a>Link</a>
+}
+
+const Link = ({
+  href = '',
+  children,
+}: {
+  href: string
+  children: React.ReactNode
+}) => {
+  return (
+    <>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement<any>(child, {
+            href,
+          })
+        }
+        return child
+      })}
+    </>
+  )
+}
+
+const renderLink = (ui: React.ReactNode) => {
+  return render(<SaasProvider linkComponent={Link}>{ui}</SaasProvider>, {
+    withSaasProvider: false,
+  })
+}
+
+test('it should not throw without context', () => {
+  const { result } = hooks.render(() => useLink())
+})
+
+test('it should render', () => {
+  const { getByText } = renderLink(<DummyComponent />)
+
+  expect(getByText('Link')).toBeInTheDocument()
+})
+
+test('it should render with href', () => {
+  const { getByText } = renderLink(<DummyComponent href="/test" />)
+
+  expect(getByText('Link')).toHaveAttribute('href', '/test')
+})

package/src/provider/use-link.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import { chakra } from '@chakra-ui/react'
+
+import { useSui } from './sui-provider'
+
+export function useLink(): React.ElementType {
+  const context = useSui()
+  if (context?.linkComponent) {
+    return context.linkComponent
+  }
+  return chakra.a
+}

package/src/styled-system/create-recipe-context.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { forwardRef } from 'react'
+
+import {
+  type RecipeKey,
+  type UseRecipeOptions,
+  chakra,
+  createContext,
+  mergeProps,
+  useRecipe,
+} from '@chakra-ui/react'
+import { cx } from '@saas-ui/core/utils'
+
+import { EMPTY_STYLES } from './empty.ts'
+import type { JsxFactoryOptions } from './factory.types.ts'
+
+const upperFirst = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
+
+export function createRecipeContext<K extends RecipeKey>(
+  options: UseRecipeOptions<K>,
+) {
+  const { key: recipeKey, recipe: recipeConfig } = options
+
+  const contextName = upperFirst(
+    recipeKey || (recipeConfig as any).className || 'Component',
+  )
+
+  const [PropsProvider, usePropsContext] = createContext<Record<string, any>>({
+    strict: false,
+    name: `${contextName}PropsContext`,
+    providerName: `${contextName}PropsContext`,
+  })
+
+  function useRecipeResult(props: any) {
+    const { unstyled, ...restProps } = props
+
+    const recipe = useRecipe({
+      key: recipeKey,
+      recipe: restProps.recipe || recipeConfig,
+    })
+
+    // @ts-ignore
+    const [variantProps, otherProps] = recipe.splitVariantProps(restProps)
+    const styles = unstyled ? EMPTY_STYLES : recipe(variantProps)
+
+    return {
+      styles,
+      className: recipe.className,
+      props: otherProps,
+    }
+  }
+
+  const withContext = <T, P>(
+    Component: React.ElementType<any>,
+    options?: JsxFactoryOptions<P>,
+  ): React.ForwardRefExoticComponent<
+    React.PropsWithoutRef<P> & React.RefAttributes<T>
+  > => {
+    const SuperComponent = chakra(Component, {}, options as any)
+    const StyledComponent = forwardRef<any, any>((inProps, ref) => {
+      const props = mergeProps(usePropsContext(), inProps)
+      const { styles, className, props: localProps } = useRecipeResult(props)
+
+      return (
+        <SuperComponent
+          {...localProps}
+          ref={ref}
+          css={[styles, props.css]}
+          className={cx(className, props.className)}
+        />
+      )
+    })
+
+    // @ts-expect-error
+    StyledComponent.displayName = Component.displayName || Component.name
+    return StyledComponent as any
+  }
+
+  function withPropsProvider<P>(): React.Provider<Partial<P>> {
+    return PropsProvider as any
+  }
+
+  return {
+    withContext,
+    PropsProvider,
+    withPropsProvider,
+    usePropsContext,
+    useRecipeResult,
+  }
+}

package/src/styled-system/create-slot-recipe-context.tsx

@@ -0,0 +1,188 @@
+'use client'
+
+import { forwardRef } from 'react'
+
+import {
+  type SlotRecipeKey,
+  type UseSlotRecipeOptions,
+  chakra,
+  createContext,
+  mergeProps,
+  useSlotRecipe,
+} from '@chakra-ui/react'
+import type { SystemStyleObject } from '@chakra-ui/react'
+import { cx } from '@saas-ui/core/utils'
+
+import { EMPTY_SLOT_STYLES } from './empty.ts'
+import type { JsxFactoryOptions } from './factory.types.ts'
+
+type ConfigRecipeSlots = any
+
+interface WrapElementProps<P> {
+  wrapElement?(element: React.ReactElement, props: P): React.ReactElement
+}
+
+interface WithRootProviderOptions<P> extends WrapElementProps<P> {
+  defaultProps?: Partial<P>
+}
+
+interface WithProviderOptions<P>
+  extends JsxFactoryOptions<P>,
+    WrapElementProps<P> {}
+
+interface WithContextOptions<P> extends JsxFactoryOptions<P> {}
+
+const upperFirst = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
+
+export const createSlotRecipeContext = <R extends SlotRecipeKey>(
+  options: UseSlotRecipeOptions<R>,
+) => {
+  const { key: recipeKey, recipe: recipeConfig } = options
+
+  const contextName = upperFirst(
+    recipeKey || (recipeConfig as any).className || 'Component',
+  )
+
+  const [StylesProvider, useStyles] = createContext<
+    Record<string, SystemStyleObject>
+  >({
+    name: `${contextName}StylesContext`,
+    errorMessage: `use${contextName}Styles returned is 'undefined'. Seems you forgot to wrap the components in "<${contextName}.Root />" `,
+  })
+
+  const [ClassNamesProvider, useClassNames] = createContext<
+    Record<string, string>
+  >({
+    name: `${contextName}ClassNameContext`,
+    errorMessage: `use${contextName}ClassNames returned is 'undefined'. Seems you forgot to wrap the components in "<${contextName}.Root />" `,
+    strict: false,
+  })
+
+  const [PropsProvider, usePropsContext] = createContext<Record<string, any>>({
+    strict: false,
+    name: `${contextName}PropsContext`,
+    providerName: `${contextName}PropsContext`,
+    defaultValue: {},
+  })
+
+  function useRecipeResult(props: any) {
+    const { unstyled, ...restProps } = props
+
+    const slotRecipe = useSlotRecipe({
+      key: recipeKey,
+      recipe: restProps.recipe || recipeConfig,
+    })
+
+    // @ts-ignore
+    const [variantProps, otherProps] = slotRecipe.splitVariantProps(restProps)
+    const styles = unstyled ? EMPTY_SLOT_STYLES : slotRecipe(variantProps)
+
+    return {
+      styles: styles as Record<string, SystemStyleObject>,
+      classNames: slotRecipe.classNameMap as Record<string, string>,
+      props: otherProps,
+    }
+  }
+
+  function withRootProvider<P>(
+    Component: React.ElementType<any>,
+    options: WithRootProviderOptions<P> = {},
+  ): React.FC<React.PropsWithoutRef<P>> {
+    const { defaultProps } = options
+
+    const StyledComponent = (inProps: any) => {
+      const props = mergeProps(defaultProps, usePropsContext(), inProps)
+      const { styles, classNames, props: rootProps } = useRecipeResult(props)
+
+      return (
+        <StylesProvider value={styles}>
+          <ClassNamesProvider value={classNames}>
+            <Component {...rootProps} />
+          </ClassNamesProvider>
+        </StylesProvider>
+      )
+    }
+
+    // @ts-expect-error
+    StyledComponent.displayName = Component.displayName || Component.name
+    return StyledComponent as any
+  }
+
+  const withProvider = <T, P>(
+    Component: React.ElementType<any>,
+    slot: R extends keyof ConfigRecipeSlots ? ConfigRecipeSlots[R] : string,
+    options?: WithProviderOptions<P>,
+  ): React.ForwardRefExoticComponent<
+    React.PropsWithoutRef<P> & React.RefAttributes<T>
+  > => {
+    const { defaultProps, ...restOptions } = options ?? {}
+    const SuperComponent = chakra(Component, {}, restOptions as any)
+
+    const StyledComponent = forwardRef<any, any>((inProps, ref) => {
+      const props = mergeProps(defaultProps ?? {}, usePropsContext(), inProps)
+      const { styles, props: rootProps, classNames } = useRecipeResult(props)
+      const className = classNames[slot as keyof typeof classNames]
+
+      const element = (
+        <StylesProvider value={styles}>
+          <ClassNamesProvider value={classNames}>
+            <SuperComponent
+              ref={ref}
+              {...rootProps}
+              css={[styles[slot], props.css]}
+              className={cx(props.className, className)}
+            />
+          </ClassNamesProvider>
+        </StylesProvider>
+      )
+
+      return options?.wrapElement?.(element, props) ?? element
+    })
+
+    // @ts-expect-error
+    StyledComponent.displayName = Component.displayName || Component.name
+
+    return StyledComponent as any
+  }
+
+  const withContext = <T, P>(
+    Component: React.ElementType<any>,
+    slot?: R extends keyof ConfigRecipeSlots ? ConfigRecipeSlots[R] : string,
+    options?: WithContextOptions<P>,
+  ): React.ForwardRefExoticComponent<
+    React.PropsWithoutRef<P> & React.RefAttributes<T>
+  > => {
+    const SuperComponent = chakra(Component, {}, options as any)
+    const StyledComponent = forwardRef<any, any>((props, ref) => {
+      const styles = useStyles()
+      const classNames = useClassNames()
+      const className = classNames?.[slot as keyof typeof classNames]
+
+      return (
+        <SuperComponent
+          {...props}
+          css={[slot ? styles[slot] : undefined, props.css]}
+          ref={ref}
+          className={cx(props.className, className)}
+        />
+      )
+    })
+
+    // @ts-expect-error
+    StyledComponent.displayName = Component.displayName || Component.name
+    return StyledComponent as any
+  }
+
+  return {
+    StylesProvider,
+    ClassNamesProvider,
+    PropsProvider,
+    usePropsContext,
+    useRecipeResult,
+    withProvider,
+    withContext,
+    withRootProvider,
+    useStyles,
+    useClassNames,
+  }
+}

package/src/styled-system/empty.ts

@@ -0,0 +1,7 @@
+import type { SystemStyleObject } from '@chakra-ui/react'
+
+export const EMPTY_STYLES = Object.freeze({} as SystemStyleObject)
+
+export const EMPTY_SLOT_STYLES = Object.freeze(
+  {} as Record<string, SystemStyleObject>,
+)

package/src/styled-system/factory.types.ts

@@ -0,0 +1,11 @@
+export type DataAttr = Record<
+  `data-${string}`,
+  string | number | undefined | null | boolean
+>
+
+export interface JsxFactoryOptions<TProps> {
+  forwardProps?: string[]
+  defaultProps?: Partial<TProps> & DataAttr
+  forwardAsChild?: boolean
+  shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+}

package/src/theme/animation-styles.ts

@@ -0,0 +1,53 @@
+import { defineAnimationStyles } from '@chakra-ui/react'
+
+export const animationStyles: any = defineAnimationStyles({
+  'slide-fade-in': {
+    value: {
+      transformOrigin: 'var(--transform-origin)',
+      '&[data-placement^=top]': {
+        animationName: 'slide-from-bottom, fade-in',
+      },
+      '&[data-placement^=bottom]': {
+        animationName: 'slide-from-top, fade-in',
+      },
+      '&[data-placement^=left]': {
+        animationName: 'slide-from-right, fade-in',
+      },
+      '&[data-placement^=right]': {
+        animationName: 'slide-from-left, fade-in',
+      },
+    },
+  },
+
+  'slide-fade-out': {
+    value: {
+      transformOrigin: 'var(--transform-origin)',
+      '&[data-placement^=top]': {
+        animationName: 'slide-to-bottom, fade-out',
+      },
+      '&[data-placement^=bottom]': {
+        animationName: 'slide-to-top, fade-out',
+      },
+      '&[data-placement^=left]': {
+        animationName: 'slide-to-right, fade-out',
+      },
+      '&[data-placement^=right]': {
+        animationName: 'slide-to-left, fade-out',
+      },
+    },
+  },
+
+  'scale-fade-in': {
+    value: {
+      transformOrigin: 'var(--transform-origin)',
+      animationName: 'scale-in, fade-in',
+    },
+  },
+
+  'scale-fade-out': {
+    value: {
+      transformOrigin: 'var(--transform-origin)',
+      animationName: 'scale-out, fade-out',
+    },
+  },
+})

package/src/theme/breakpoints.ts

@@ -0,0 +1,11 @@
+export const breakpointValues = {
+  sm: '480px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1536px',
+}
+
+export const breakpoints = Object.fromEntries(
+  Object.entries(breakpointValues).map(([key, value]) => [key, `${value}px`]),
+)

package/src/theme/conditions.ts

@@ -0,0 +1,26 @@
+import { defineConditions } from '@chakra-ui/react'
+
+export const conditions = defineConditions({
+  collapsible: '&:is([data-scope=collapsible])',
+  groupCollapsible:
+    '.group:is([data-scope=collapsible]) &, [role=group]:is([data-scope=collapsible]) &',
+  groupOpen:
+    '.group:is([data-state=open]) &, [role=group]:is([data-state=open]) &',
+  groupFocus:
+    '.group:is(:focus, [data-focus]) &, [role=group]:is(:focus, [data-focus]) &',
+  groupHover:
+    '.group:is(:hover, [data-hover]):not(:disabled, [data-disabled]) &, [role=group]:is(:hover, [data-hover]):not(:disabled, [data-disabled]) &',
+  groupActive:
+    '.group:is(:active, [data-active]):not(:disabled, [data-disabled]) &, [role=group]:is(:active, [data-active]):not(:disabled, [data-disabled]) &',
+  groupFocusWithin: '.group:focus-within &, [role=group]:focus-within &',
+  groupFocusVisible:
+    '.group:is(:focus-visible, [data-focus-visible]) &, [role=group]:is(:focus-visible, [data-focus-visible]) &',
+  groupDisabled:
+    '.group:is(:disabled, [disabled], [data-disabled]) &, [role=group]:is(:disabled, [disabled], [data-disabled]) &',
+  groupChecked:
+    '.group:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &, [role=group]:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &',
+  groupExpanded:
+    '.group:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &, [role=group]:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &',
+  groupInvalid: '.group:invalid &, [role=group]:invalid &',
+  parentHover: 'button:hover > &, a:hover > &',
+})

package/src/theme/fluid-font-sizes.ts

@@ -0,0 +1,65 @@
+// const fluidFontSizes = {
+//   'min-max': fluid({
+//     property: 'fluid-text-size',
+//     from: breakpointValues.sm,
+//     to: breakpointValues['2xl'],
+//     divider: 1,
+//   }),
+// }
+
+// 'fluid-text-size': {
+//   'min-max': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_2XL, divider: 1 }),
+//   'sm-md': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_MD, divider: 1 }),
+//   'sm-lg': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_LG, divider: 1 }),
+//   'sm-xl': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_XL, divider: 1 }),
+//   'md-lg': fluid({ property: 'fluid-text-size', from: BP_MD, to: BP_LG, divider: 1 }),
+//   'md-xl': fluid({ property: 'fluid-text-size', from: BP_MD, to: BP_XL, divider: 1 }),
+//   'md-2xl': fluid({ property: 'fluid-text-size', from: BP_MD, to: BP_2XL, divider: 1 }),
+//   'lg-xl': fluid({ property: 'fluid-text-size', from: BP_LG, to: BP_XL, divider: 1 }),
+//   'lg-2xl': fluid({ property: 'fluid-text-size', from: BP_LG, to: BP_2XL, divider: 1 }),
+// },
+
+// {
+//   utilities: {
+//     fluidFontSize: {
+//       shorthand: ['fluidFontSize'],
+//       transform(value, args) {
+//         console.log(value, args)
+//         const val = 'min-max(sm, lg)'
+
+//         const match = val.match(/(\w+-\w+)\((\w+),\s*(\w+)\)/)
+
+//         if (!match) {
+//           return {}
+//         }
+
+//         const [, breakpoints, min, max] = match
+//         console.log(match)
+//         const minSize = args.token.raw(`fontSizes.${min}`)?.value
+//         const maxSize = args.token.raw(`fontSizes.${max}`)?.value
+//         console.log(minSize, maxSize)
+//         return {
+//           fontSize: `var(--fluid-text-size-${breakpoints})`,
+//           '--fluid-text-size-min': minSize,
+//           '--fluid-text-size-max': maxSize,
+//         }
+//       },
+//     },
+//     fluidFontSizeMin: {
+//       shorthand: ['fluidFontSizeMin'],
+//       transform(value, args) {
+//         return {
+//           '--fluid-text-size-min': value,
+//         }
+//       },
+//     },
+//     fluidFontSizeMax: {
+//       shorthand: ['fluidFontSizeMax'],
+//       transform(value, args) {
+//         return {
+//           '--fluid-text-size-max': value,
+//         }
+//       },
+//     },
+//   },
+// },

package/src/theme/global-css.ts

@@ -0,0 +1,94 @@
+import { defineGlobalStyles } from '@chakra-ui/react'
+
+const empty = 'var(--chakra-empty,/*!*/ /*!*/)'
+
+export const globalCss = defineGlobalStyles({
+  '*': {
+    fontFeatureSettings: '"cv11"',
+    '--ring-inset': empty,
+    '--ring-offset-width': '0px',
+    '--ring-offset-color': '#fff',
+    '--ring-color': 'rgba(66, 153, 225, 0.6)',
+    '--ring-offset-shadow': '0 0 #0000',
+    '--ring-shadow': '0 0 #0000',
+    ...Object.fromEntries(
+      [
+        'brightness',
+        'contrast',
+        'grayscale',
+        'hue-rotate',
+        'invert',
+        'saturate',
+        'sepia',
+        'drop-shadow',
+      ].map((prop) => [`--${prop}`, empty]),
+    ),
+    ...Object.fromEntries(
+      [
+        'blur',
+        'brightness',
+        'contrast',
+        'grayscale',
+        'hue-rotate',
+        'invert',
+        'opacity',
+        'saturate',
+        'sepia',
+      ].map((prop) => [`--backdrop-${prop}`, empty]),
+    ),
+    '--global-font-mono': 'fonts.mono',
+    '--global-font-body': 'fonts.body',
+    '--global-color-border': 'colors.border',
+    '--cursor-button': 'default',
+    '--radius-factor': '1',
+    '--radius-full': '9999px',
+    '--scale-factor': '1',
+  },
+  body: {
+    color: 'fg',
+    bg: 'bg',
+    lineHeight: '1.5',
+    colorPalette: 'accent',
+  },
+  '*::placeholder': {
+    color: 'fg.subtle',
+  },
+  '*::selection': {
+    bg: 'colorPalette.muted/80',
+  },
+  '[data-radius="none"]': {
+    '--radius-factor': '0',
+    '--radius-full': '0',
+  },
+  '[data-radius="sm"]': {
+    '--radius-factor': '0.9',
+    '--radius-full': '0',
+  },
+  '[data-radius="md"]': {
+    '--radius-factor': '1',
+    '--radius-full': '0',
+  },
+  '[data-radius="lg"]': {
+    '--radius-factor': '1.5',
+    '--radius-full': '0',
+  },
+  '[data-radius="full"]': {
+    '--radius-factor': '1.5',
+    '--radius-full': '9999px',
+  },
+  '[data-scale="xs"]': {
+    '--scale-factor': '0.9',
+  },
+  '[data-scale="sm"]': {
+    '--scale-factor': '0.95',
+  },
+  '[data-scale="md"]': {
+    '--scale-factor': '1',
+  },
+  '[data-scale="lg"]': {
+    '--scale-factor': '1.05',
+  },
+  '[data-scale="xl"]': {
+    '--scale-factor': '1.1',
+  },
+})