feat(checkbox): apply a generic type to the checked type of Checkbox

.changeset/silent-mayflies-change.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Apply a generic type to the `checked` type of `Checkbox`

packages/bezier-react/src/components/Forms/Checkbox/Checkbox.stories.tsx

@@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/react'
 
 /* Internal dependencies */
 import { getTitle } from '~/src/utils/storyUtils'
-import { CheckboxProps } from './Checkbox.types'
+import { CheckboxProps, CheckedState } from './Checkbox.types'
 import { Checkbox } from './Checkbox'
 
 export default {
@@ -25,7 +25,7 @@ export default {
   },
 } as Meta
 
-const Template: Story<CheckboxProps> = ({ children, ...otherCheckboxProps }) => (
+const Template: Story<CheckboxProps<CheckedState>> = ({ children, ...otherCheckboxProps }) => (
   <Checkbox {...otherCheckboxProps}>
     { children }
   </Checkbox>

packages/bezier-react/src/components/Forms/Checkbox/Checkbox.styled.ts

@@ -40,7 +40,7 @@ const focusStyle = css`
   ${checkIconFocusStyle}
 `
 
-export const CheckboxPrimitiveRoot = styled(CheckboxPrimitive.Root)<CheckboxProps>`
+export const CheckboxPrimitiveRoot = styled(CheckboxPrimitive.Root)<CheckboxProps<any>>`
   all: unset;
   display: flex;
   align-items: center;

packages/bezier-react/src/components/Forms/Checkbox/Checkbox.test.tsx

@@ -6,22 +6,22 @@ import userEvent from '@testing-library/user-event'
 /* Internal dependencies */
 import { render } from '~/src/utils/testUtils'
 import { Checkbox } from './Checkbox'
-import { CheckboxProps } from './Checkbox.types'
+import { CheckboxProps, CheckedState } from './Checkbox.types'
 
 const VALUES = ['0', '1', '2']
 
 describe('Checkbox', () => {
   const renderCheckbox = ({
     children,
     ...rest
-  }: CheckboxProps = {}) => render(
+  }: CheckboxProps<CheckedState> = {}) => render(
     <Checkbox {...rest}>
       { children }
     </Checkbox>,
   )
 
   const renderCheckboxes = (
-    props: Omit<CheckboxProps, 'children'> = {},
+    props: Omit<CheckboxProps<CheckedState>, 'children'> = {},
   ) => render(
     <div role="group">
       { VALUES.map(value => (

packages/bezier-react/src/components/Forms/Checkbox/Checkbox.tsx

@@ -7,7 +7,7 @@ import useId from '~/src/hooks/useId'
 import { IconSize, CheckBoldIcon, HyphenBoldIcon } from '~/src/components/Icon'
 import { FormFieldSize } from '~/src/components/Forms'
 import useFormFieldProps from '~/src/components/Forms/useFormFieldProps'
-import { CheckboxProps } from './Checkbox.types'
+import { CheckboxProps, CheckedState } from './Checkbox.types'
 import * as Styled from './Checkbox.styled'
 
 type CheckIconProps = {} | {
@@ -37,40 +37,12 @@ const CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(function CheckIcon(
   )
 })
 
-/**
- * `Checkbox` is a control that allows the user to toggle between checked and not checked.
- * It can be used with labels or standalone.
- *
- * @example
- *
- * ```tsx
- * const [checked, setChecked] = useState(false)
- * // Controlled / With label
- * <Checkbox
- *   checked={checked}
- *   onCheckedChange={setChecked}
- * >
- *   Label
- * </Checkbox>
- * // Controlled / Standalone
- * <Checkbox
- *   checked={checked}
- *   onCheckedChange={setChecked}
- * />
- * // Uncontrolled
- * <Checkbox
- *   defaultChecked={true}
- * >
- *   Label
- * </Checkbox>
- * ```
- */
-export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(function Checkbox({
+function CheckboxImpl<Checked extends CheckedState>({
   children,
   checked,
   id: idProp,
   ...rest
-}, forwardedRef) {
+}: CheckboxProps<Checked>, forwardedRef: React.Ref<HTMLButtonElement>) {
   const id = useId(idProp, 'bezier-checkbox')
   const {
     hasError,
@@ -108,4 +80,36 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(function Ch
       ) }
     </Styled.Container>
   )
-})
+}
+
+/**
+ * `Checkbox` is a control that allows the user to toggle between checked and not checked.
+ * It can be used with labels or standalone.
+ *
+ * @example
+ *
+ * ```tsx
+ * const [checked, setChecked] = useState(false)
+ * // Controlled / With label
+ * <Checkbox
+ *   checked={checked}
+ *   onCheckedChange={setChecked}
+ * >
+ *   Label
+ * </Checkbox>
+ * // Controlled / Standalone
+ * <Checkbox
+ *   checked={checked}
+ *   onCheckedChange={setChecked}
+ * />
+ * // Uncontrolled
+ * <Checkbox
+ *   defaultChecked={true}
+ * >
+ *   Label
+ * </Checkbox>
+ * ```
+ */
+export const Checkbox = forwardRef(CheckboxImpl) as <Checked extends CheckedState>(
+  props: CheckboxProps<Checked> & { ref?: React.ForwardedRef<HTMLButtonElement> }
+) => ReturnType<typeof CheckboxImpl<Checked>>

packages/bezier-react/src/components/Forms/Checkbox/Checkbox.types.ts

@@ -4,17 +4,17 @@ import { FormComponentProps } from '~/src/components/Forms'
 
 export type CheckedState = boolean | 'indeterminate'
 
-interface CheckboxOptions {
+interface CheckboxOptions<Checked extends CheckedState> {
   /**
    * The controlled checked state of the checkbox.
    * Must be used in conjunction with `onCheckedChange`.
    */
-  checked?: CheckedState
+  checked?: Checked
   /**
    * The checked state of the checkbox when it is initially rendered.
    * Use when you do not need to control its checked state.
    */
-  defaultChecked?: CheckedState
+  defaultChecked?: Checked
   /**
    * The unique id of the checkbox. It is created automatically by default.
    * It used by the label element in the checkbox.
@@ -33,12 +33,12 @@ interface CheckboxOptions {
   /**
    * Event handler called when the checked state of the checkbox changes.
    */
-  onCheckedChange?: (checked: CheckedState) => void
+  onCheckedChange?: (checked: Checked) => void
 }
 
-export interface CheckboxProps extends
+export interface CheckboxProps<Checked extends CheckedState> extends
   Omit<BezierComponentProps, 'as'>,
   ChildrenProps,
   FormComponentProps,
-  Omit<React.HTMLAttributes<HTMLButtonElement>, keyof CheckboxOptions>,
-  CheckboxOptions {}
+  Omit<React.HTMLAttributes<HTMLButtonElement>, keyof CheckboxOptions<Checked>>,
+  CheckboxOptions<Checked> {}