fix: more improvements

Author: lisalupi

packages/form/src/components/CheckboxGroupField/__tests__/index.test.tsx

@@ -64,7 +64,7 @@ describe('checkboxField', () => {
     expect(input).toBeChecked()
 
     await userEvent.click(input)
-    expect(onChange).toBeCalledTimes(2)
+    expect(onChange).toHaveBeenCalledTimes(2)
     expect(input).not.toBeChecked()
 
     expect(asFragment()).toMatchSnapshot()

packages/form/src/components/DateInputField/__tests__/index.test.tsx

@@ -73,7 +73,7 @@ describe('dateInputField', () => {
     await userEvent.click(screen.getByText('15'))
 
     await waitFor(() => {
-      expect(onChange).toBeCalledTimes(2)
+      expect(onChange).toHaveBeenCalledTimes(2)
     })
 
     expect(resultForm.current.getValues('test')).toEqual([

packages/form/src/components/SelectableCardGroupField/__tests__/index.test.tsx

@@ -83,7 +83,7 @@ describe('selectableCardField', () => {
     await userEvent.click(input)
     expect(onChange).toHaveBeenCalledOnce()
     await userEvent.click(input)
-    expect(onChange).toBeCalledTimes(2)
+    expect(onChange).toHaveBeenCalledTimes(2)
     expect(asFragment()).toMatchSnapshot()
   })
 })

packages/form/src/components/ToggleGroupField/__tests__/index.test.tsx

@@ -69,7 +69,7 @@ describe('groupField', () => {
     expect(input).toBeChecked()
 
     await userEvent.click(input)
-    expect(onChange).toBeCalledTimes(2)
+    expect(onChange).toHaveBeenCalledTimes(2)
     expect(input).not.toBeChecked()
     expect(asFragment()).toMatchSnapshot()
   })

packages/plus/src/components/OfferList/__tests__/index.test.tsx

@@ -207,8 +207,6 @@ describe('offerList', () => {
           <OfferList.Cell>a cell</OfferList.Cell>
         </OfferList.Row>,
       ),
-    ).toThrowError(
-      'useOfferListContext should be used inside a OfferList component',
-    )
+    ).toThrow('useOfferListContext should be used inside a OfferList component')
   })
 })

packages/ui/src/components/BarStack/__tests__/index.test.tsx

@@ -84,11 +84,11 @@ describe('barStack', () => {
     expect(onMouseEnter).toHaveBeenCalledOnce()
     expect(onMouseDown).toHaveBeenCalledOnce()
     expect(onMouseUp).toHaveBeenCalledOnce()
-    expect(onDoubleClick).toBeCalledTimes(0)
-    expect(onMouseLeave).toBeCalledTimes(0)
+    expect(onDoubleClick).toHaveBeenCalledTimes(0)
+    expect(onMouseLeave).toHaveBeenCalledTimes(0)
     await userEvent.dblClick(helloDiv)
     expect(onDoubleClick).toHaveBeenCalledOnce()
-    expect(onClick).toBeCalledTimes(3)
+    expect(onClick).toHaveBeenCalledTimes(3)
     await userEvent.unhover(helloDiv)
     expect(onMouseLeave).toHaveBeenCalledOnce()
 

packages/ui/src/components/Carousel/Item.tsx

@@ -0,0 +1,29 @@
+import { assignInlineVars } from '@vanilla-extract/dynamic'
+
+import { carouselStyle, widthVar } from './styles.css'
+
+import type { CSSProperties, ReactNode } from 'react'
+
+type CarouselItemProps = {
+  children: ReactNode
+  width?: string
+  style?: CSSProperties
+}
+export const CarouselItem = ({
+  children,
+  width = '240px',
+  style,
+}: CarouselItemProps) => (
+  <div
+    className={carouselStyle.borderWrapper}
+    draggable="true"
+    style={{
+      ...assignInlineVars({
+        [widthVar]: width,
+      }),
+      ...style,
+    }}
+  >
+    {children}
+  </div>
+)

packages/ui/src/components/Carousel/index.tsx

@@ -1,36 +1,12 @@
 'use client'
 
 import { cn } from '@ultraviolet/utils'
-import { assignInlineVars } from '@vanilla-extract/dynamic'
 import { useEffect, useRef, useState } from 'react'
 
-import { carouselStyle, widthVar } from './styles.css'
+import { CarouselItem } from './Item'
+import { carouselStyle } from './styles.css'
 
-import type { CSSProperties, ReactNode } from 'react'
-
-type CarouselItemProps = {
-  children: ReactNode
-  width?: string
-  style?: CSSProperties
-}
-export const CarouselItem = ({
-  children,
-  width = '240px',
-  style,
-}: CarouselItemProps) => (
-  <div
-    className={carouselStyle.borderWrapper}
-    draggable="true"
-    style={{
-      ...assignInlineVars({
-        [widthVar]: width,
-      }),
-      ...style,
-    }}
-  >
-    {children}
-  </div>
-)
+import type { ReactNode } from 'react'
 
 type CarouselProps = {
   className?: string

packages/ui/src/components/CheckboxGroup/Context.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { createContext } from 'react'
+
+import type { InputHTMLAttributes } from 'react'
+
+type CheckboxGroupContextType = {
+  groupName: string
+  groupValues: string[]
+  error: boolean
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange'>> &
+  Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>
+
+export const CheckboxGroupContext = createContext<
+  CheckboxGroupContextType | undefined
+>(undefined)

packages/ui/src/components/CheckboxGroup/SingleCheckbox.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { cn } from '@ultraviolet/utils'
+import { useContext } from 'react'
+
+import { Checkbox } from '../Checkbox'
+
+import { CheckboxGroupContext } from './Context'
+import { checkboxGroupStyle } from './styles.css'
+
+import type { ComponentProps } from 'react'
+
+type CheckboxGroupCheckboxProps = Omit<
+  ComponentProps<typeof Checkbox>,
+  'onChange' | 'checked'
+> & {
+  value: string
+}
+
+export const CheckboxGroupCheckbox = ({
+  onFocus,
+  onBlur,
+  disabled,
+  error,
+  name,
+  value,
+  children,
+  helper,
+  className,
+  autoFocus,
+  'data-testid': dataTestId,
+  required,
+  tooltip,
+  style,
+  size,
+}: CheckboxGroupCheckboxProps) => {
+  const context = useContext(CheckboxGroupContext)
+
+  if (!context) {
+    throw new Error(
+      'CheckboxGroup.Checkbox can only be used inside a CheckboxGroup',
+    )
+  }
+
+  const { groupName, onChange, groupValues, error: errorContext } = context
+
+  const checkboxName = `${groupName}.${name ?? ''}`
+  const checkboxValue = value.toString()
+
+  return (
+    <Checkbox
+      autoFocus={autoFocus} // oxlint-disable-line jsx_a11y/no-autofocus
+      checked={groupValues?.includes(checkboxValue)}
+      className={cn(className, checkboxGroupStyle.checkboxGroup)}
+      data-testid={dataTestId}
+      disabled={disabled}
+      error={error || errorContext}
+      helper={helper}
+      name={checkboxName}
+      onBlur={onBlur}
+      onChange={onChange}
+      onFocus={onFocus}
+      required={required}
+      size={size}
+      style={style}
+      tooltip={tooltip}
+      value={checkboxValue}
+    >
+      {children}
+    </Checkbox>
+  )
+}