refactor: context creation utility (#184)

* refactor: improve and simplify context utilities * refactor: use new create context utility * chore: add .idea directory to gitignore
giantnodes · Aug 26, 2024 · ed7852b · ed7852b
1 parent 73c69bf
commit ed7852b
Show file tree

Hide file tree

Showing 81 changed files with 312 additions and 276 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,6 +15,7 @@ dist/
 
 # misc
 .DS_Store
+.idea
 *.pem
 
 # debug

diff --git a/packages/react/src/components/alert/Alert.tsx b/packages/react/src/components/alert/Alert.tsx
@@ -4,7 +4,7 @@ import type { AlertVariantProps } from '@giantnodes/theme'
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { AlertContext, useAlert } from '~/components/alert/use-alert.hook'
+import { AlertContext, useAlertValue } from '~/components/alert/use-alert.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -28,7 +28,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useAlert({ color })
+    const context = useAlertValue({ color })
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({

diff --git a/packages/react/src/components/alert/AlertBody.tsx b/packages/react/src/components/alert/AlertBody.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useAlertContext } from '~/components/alert/use-alert.hook'
+import { useAlert } from '~/components/alert/use-alert.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useAlertContext()
+    const { slots } = useAlert()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({

diff --git a/packages/react/src/components/alert/AlertHeading.tsx b/packages/react/src/components/alert/AlertHeading.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { Heading } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useAlertContext } from '~/components/alert/use-alert.hook'
+import { useAlert } from '~/components/alert/use-alert.hook'
 
 const __ELEMENT_TYPE__ = 'h1'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Heading
 
-    const { slots } = useAlertContext()
+    const { slots } = useAlert()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({

diff --git a/packages/react/src/components/alert/AlertItem.tsx b/packages/react/src/components/alert/AlertItem.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useAlertContext } from '~/components/alert/use-alert.hook'
+import { useAlert } from '~/components/alert/use-alert.hook'
 
 const __ELEMENT_TYPE__ = 'li'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useAlertContext()
+    const { slots } = useAlert()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({

diff --git a/packages/react/src/components/alert/AlertList.tsx b/packages/react/src/components/alert/AlertList.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useAlertContext } from '~/components/alert/use-alert.hook'
+import { useAlert } from '~/components/alert/use-alert.hook'
 
 const __ELEMENT_TYPE__ = 'ul'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useAlertContext()
+    const { slots } = useAlert()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({

diff --git a/packages/react/src/components/alert/use-alert.hook.ts b/packages/react/src/components/alert/use-alert.hook.ts
@@ -4,13 +4,13 @@ import type { AlertVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { alert } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
 type UseAlertProps = AlertVariantProps
 
-type UseAlertReturn = ReturnType<typeof useAlert>
+type AlertContextType = ReturnType<typeof useAlertValue>
 
-export const useAlert = (props: UseAlertProps) => {
+export const useAlertValue = (props: UseAlertProps) => {
   const { color } = props
 
   const slots = React.useMemo(() => alert({ color }), [color])
@@ -20,8 +20,8 @@ export const useAlert = (props: UseAlertProps) => {
   }
 }
 
-export const [AlertContext, useAlertContext] = createContext<UseAlertReturn>({
+export const [AlertContext, useAlert] = create<AlertContextType>({
   name: 'AlertContext',
   strict: true,
-  errorMessage: 'useAlertContext: `context` is undefined. Seems you forgot to wrap component within <Alert />',
+  errorMessage: 'useAlert: `context` is undefined. Seems you forgot to wrap component within <Alert.Root />',
 })
diff --git a/packages/react/src/components/avatar/Avatar.tsx b/packages/react/src/components/avatar/Avatar.tsx
@@ -4,7 +4,7 @@ import type { AvatarVariantProps } from '@giantnodes/theme'
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { AvatarContext, useAvatar, useAvatarContext } from '~/components/avatar/use-avatar.hook'
+import { AvatarContext, useAvatar, useAvatarValue } from '~/components/avatar/use-avatar.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
@@ -28,8 +28,8 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const parent = useAvatarContext()
-    const context = useAvatar({
+    const parent = useAvatar()
+    const context = useAvatarValue({
       color: parent?.color ?? color,
       radius: parent?.radius ?? radius,
       size: parent?.size ?? size,

diff --git a/packages/react/src/components/avatar/AvatarGroup.tsx b/packages/react/src/components/avatar/AvatarGroup.tsx
@@ -4,7 +4,7 @@ import type { AvatarVariantProps } from '@giantnodes/theme'
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { AvatarContext, useAvatar } from '~/components/avatar/use-avatar.hook'
+import { AvatarContext, useAvatarValue } from '~/components/avatar/use-avatar.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
@@ -28,7 +28,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useAvatar({ color, radius, size, zoomed })
+    const context = useAvatarValue({ color, radius, size, zoomed })
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({

diff --git a/packages/react/src/components/avatar/AvatarIcon.tsx b/packages/react/src/components/avatar/AvatarIcon.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useAvatarContext } from '~/components/avatar/use-avatar.hook'
+import { useAvatar } from '~/components/avatar/use-avatar.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
@@ -29,7 +29,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useAvatarContext()
+    const context = useAvatar()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({

diff --git a/packages/react/src/components/avatar/AvatarImage.tsx b/packages/react/src/components/avatar/AvatarImage.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useAvatarContext } from '~/components/avatar/use-avatar.hook'
+import { useAvatar } from '~/components/avatar/use-avatar.hook'
 
 const __ELEMENT_TYPE__ = 'img'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useAvatarContext()
+    const context = useAvatar()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({

diff --git a/packages/react/src/components/avatar/AvatarNotification.tsx b/packages/react/src/components/avatar/AvatarNotification.tsx
@@ -4,7 +4,7 @@ import type { AvatarVariantProps } from '@giantnodes/theme'
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useAvatarContext } from '~/components/avatar/use-avatar.hook'
+import { useAvatar } from '~/components/avatar/use-avatar.hook'
 
 const __ELEMENT_TYPE__ = 'span'
 
@@ -28,7 +28,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useAvatarContext()
+    const context = useAvatar()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({

diff --git a/packages/react/src/components/avatar/use-avatar.hook.ts b/packages/react/src/components/avatar/use-avatar.hook.ts
@@ -4,13 +4,13 @@ import type { AvatarVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { avatar } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
 type UseAvatarProps = AvatarVariantProps
 
-type UseAvatarReturn = ReturnType<typeof useAvatar>
+type AvatarContextType = ReturnType<typeof useAvatarValue>
 
-export const useAvatar = (props: UseAvatarProps) => {
+export const useAvatarValue = (props: UseAvatarProps) => {
   const { color, radius, size, zoomed } = props
 
   const slots = React.useMemo(
@@ -33,8 +33,8 @@ export const useAvatar = (props: UseAvatarProps) => {
   }
 }
 
-export const [AvatarContext, useAvatarContext] = createContext<UseAvatarReturn | undefined>({
+export const [AvatarContext, useAvatar] = create<AvatarContextType | undefined>({
   name: 'AvatarContext',
   strict: false,
-  errorMessage: 'useAvatarContext: `context` is undefined. Seems you forgot to wrap component within <Avatar />',
+  errorMessage: 'useAvatar: `context` is undefined. Seems you forgot to wrap component within <Avatar.Root />',
 })
diff --git a/packages/react/src/components/breadcrumb/Breadcrumb.tsx b/packages/react/src/components/breadcrumb/Breadcrumb.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 import { Breadcrumbs } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { BreadcrumbContext, useBreadcrumb } from '~/components/breadcrumb/use-breadcrumb.hook'
+import { BreadcrumbContext, useBreadcrumbValue } from '~/components/breadcrumb/use-breadcrumb.hook'
 
 const __ELEMENT_TYPE__ = 'ol'
 
@@ -30,7 +30,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Breadcrumbs
 
-    const context = useBreadcrumb({ size, separator })
+    const context = useBreadcrumbValue({ size, separator })
 
     const component = React.useMemo<BreadcrumbsProps<TData>>(
       () => ({

diff --git a/packages/react/src/components/breadcrumb/BreadcrumbItem.tsx b/packages/react/src/components/breadcrumb/BreadcrumbItem.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { Breadcrumb, Link } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useBreadcrumbContext } from '~/components/breadcrumb/use-breadcrumb.hook'
+import { useBreadcrumb } from '~/components/breadcrumb/use-breadcrumb.hook'
 import { cn } from '~/utilities'
 
 const __ELEMENT_TYPE__ = 'span'
@@ -32,7 +32,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? Breadcrumb
 
-    const { slots, separator } = useBreadcrumbContext()
+    const { slots, separator } = useBreadcrumb()
 
     const component = React.useMemo<Omit<BreadcrumbProps, 'children'>>(
       () => ({

diff --git a/packages/react/src/components/breadcrumb/use-breadcrumb.hook.ts b/packages/react/src/components/breadcrumb/use-breadcrumb.hook.ts
@@ -4,15 +4,15 @@ import type { BreadcrumbVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { breadcrumb } from '@giantnodes/theme'
 
-import { createContext } from '~/utilities/context'
+import { create } from '~/utilities/create-context'
 
-type UseBreadcrumbProps = {
+type UseBreadcrumbProps = BreadcrumbVariantProps & {
   separator?: React.ReactNode
-} & BreadcrumbVariantProps
+}
 
-type UseBreadcrumbReturn = ReturnType<typeof useBreadcrumb>
+type BreadcrumbContextType = ReturnType<typeof useBreadcrumbValue>
 
-export const useBreadcrumb = (props: UseBreadcrumbProps) => {
+export const useBreadcrumbValue = (props: UseBreadcrumbProps) => {
   const { size, separator = '/' } = props
 
   const slots = React.useMemo(() => breadcrumb({ size }), [size])
@@ -23,9 +23,8 @@ export const useBreadcrumb = (props: UseBreadcrumbProps) => {
   }
 }
 
-export const [BreadcrumbContext, useBreadcrumbContext] = createContext<UseBreadcrumbReturn>({
+export const [BreadcrumbContext, useBreadcrumb] = create<BreadcrumbContextType>({
   name: 'BreadcrumbContext',
   strict: true,
-  errorMessage:
-    'useBreadcrumbContext: `context` is undefined. Seems you forgot to wrap component within <Breadcrumb />',
+  errorMessage: 'useBreadcrumb: `context` is undefined. Seems you forgot to wrap component within <Breadcrumb.Root />',
 })
diff --git a/packages/react/src/components/card/Card.tsx b/packages/react/src/components/card/Card.tsx
@@ -4,7 +4,7 @@ import type { CardVariantProps } from '@giantnodes/theme'
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { CardContext, useCard } from '~/components/card/use-card.hook'
+import { CardContext, useCardValue } from '~/components/card/use-card.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -28,7 +28,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useCard()
+    const context = useCardValue()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({

diff --git a/packages/react/src/components/card/CardBody.tsx b/packages/react/src/components/card/CardBody.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useCardContext } from '~/components/card/use-card.hook'
+import { useCard } from '~/components/card/use-card.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useCardContext()
+    const { slots } = useCard()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({

diff --git a/packages/react/src/components/card/CardFooter.tsx b/packages/react/src/components/card/CardFooter.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useCardContext } from '~/components/card/use-card.hook'
+import { useCard } from '~/components/card/use-card.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useCardContext()
+    const { slots } = useCard()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({

diff --git a/packages/react/src/components/card/CardHeader.tsx b/packages/react/src/components/card/CardHeader.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import type * as Polymophic from '~/utilities/polymorphic'
-import { useCardContext } from '~/components/card/use-card.hook'
+import { useCard } from '~/components/card/use-card.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
@@ -27,7 +27,7 @@ const Component: ComponentType = React.forwardRef(
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const { slots } = useCardContext()
+    const { slots } = useCard()
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,7 @@ dist/ @@
     # misc
     .DS_Store
+    .idea
     *.pem
     # debug
@@ Expand Down @@