split context out

lib/src/components/badge/Badge.context.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+import type { TBadgeProps } from './Badge'
+
+type TBadgeProviderProps = {
+  size?: TBadgeProps['size']
+  overflow?: TBadgeProps['overflow']
+}
+
+type TBadgeContext = TBadgeProviderProps & {
+  textContent?: React.ReactNode,
+  setTextContent?: React.Dispatch<React.SetStateAction<React.ReactNode>>
+  isOverflowing?: boolean,
+  setIsOverflowing?: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export const BadgeContext = React.createContext<TBadgeContext>({})
+
+export const BadgeProvider: React.FC<TBadgeProviderProps> = ({
+  size,
+  overflow,
+  children
+}) => {
+  const [textContent, setTextContent] = React.useState('')
+  const [isOverflowing, setIsOverflowing] = React.useState(false)
+
+  const value = React.useMemo<TBadgeContext>(
+    () => ({ size, overflow, textContent, setTextContent, isOverflowing, setIsOverflowing }),
+    [size, overflow, textContent, setTextContent, isOverflowing, setIsOverflowing]
+  )
+  return <BadgeContext.Provider value={value}>{children}</BadgeContext.Provider>
+}
+

lib/src/components/badge/Badge.tsx

@@ -6,6 +6,7 @@ import { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'
 import { styled } from '~/stitches'
 import { OptionallyTooltipWrapper } from '~/utilities/optionally-tooltip-wrapper'
 import { BadgeText } from './BadgeText'
+import { BadgeContext, BadgeProvider } from './Badge.context'
 
 import { colorSchemes as badgeColorSchemes } from './stitches.badge.colorscheme.config'
 
@@ -49,7 +50,7 @@ const StyledBadgeRoot = styled(Flex, {
   }
 })
 
-type TBadgeProps = React.ComponentProps<typeof StyledBadgeRoot> & {
+export type TBadgeProps = React.ComponentProps<typeof StyledBadgeRoot> & {
   theme?: keyof typeof badgeColorSchemes
   overflow?: React.ComponentProps<typeof BadgeText>['overflow']
   colorScheme?: TcolorScheme
@@ -60,33 +61,6 @@ type TBadge = React.ForwardRefExoticComponent<TBadgeProps> & {
   Text: typeof BadgeText
 }
 
-export type TBadgeContext = {
-  size?: TBadgeProps['size']
-  overflow?: TBadgeProps['overflow']
-  textContent?: React.ReactNode,
-  setTextContent?: React.Dispatch<React.SetStateAction<React.ReactNode>>
-  isOverflowing?: boolean,
-  setIsOverflowing?: React.Dispatch<React.SetStateAction<boolean>>
-}
-export type TBadgeProviderProps = TBadgeContext
-
-export const BadgeContext = React.createContext<TBadgeContext>({})
-
-export const BadgeProvider: React.FC<TBadgeProviderProps> = ({
-  size,
-  overflow,
-  children
-}) => {
-  const [textContent, setTextContent] = React.useState('')
-  const [isOverflowing, setIsOverflowing] = React.useState(false)
-
-  const value = React.useMemo<TBadgeContext>(
-    () => ({ size, overflow, textContent, setTextContent, isOverflowing, setIsOverflowing }),
-    [size, overflow, textContent, setTextContent, isOverflowing, setIsOverflowing]
-  )
-  return <BadgeContext.Provider value={value}>{children}</BadgeContext.Provider>
-}
-
 type TBadgeRootProps = Omit<Omit<TBadgeProps, 'size'>, 'overflow'>
 
 const BadgeRoot = React.forwardRef<HTMLDivElement, TBadgeRootProps>(

lib/src/utilities/optionally-tooltip-wrapper/OptionallyTooltipWrapper.tsx

@@ -3,8 +3,8 @@ import * as React from 'react'
 import { Tooltip } from '~/components/tooltip'
 
 export type TOptionallyTooltipWrapperProps = {
-  hasTooltip: boolean
-  label: React.ReactNode
+  hasTooltip?: boolean
+  label?: React.ReactNode
   tooltipSide?: 'bottom' | 'left' | 'right' | 'top'
 }