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

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

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

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

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

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

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

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

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

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

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

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

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