feat(DSYS-486): migrate Checkbox to ADR-0004 (CheckboxPropsShared)

packages/design-system-react-native/src/components/Checkbox/Checkbox.types.ts

@@ -1,49 +1,18 @@
+import type { CheckboxPropsShared } from '@metamask/design-system-shared';
 import type { PressableProps, ViewProps } from 'react-native';
 
 import type { IconProps } from '../Icon';
 import type { TextProps } from '../Text';
+
 /**
  * Checkbox component props.
  */
-
-export type CheckboxProps = {
-  /**
-   * Required prop to determine whether the checkbox is currently selected.
-   * This component is fully controlled, so you must manage this state
-   * in your parent component.
-   */
-  isSelected: boolean;
-
-  /**
-   * Optional prop that when true, disables the checkbox.
-   *
-   * @default false
-   */
-  isDisabled?: boolean;
-
-  /**
-   * Optional prop that when true, displays the invalid/error state of the checkbox.
-   *
-   * @default false
-   */
-  isInvalid?: boolean;
-
-  /**
-   * Optional label prop that renders text or a React node as a label beside the checkbox.
-   */
-  label?: React.ReactNode | string;
-
+export type CheckboxProps = CheckboxPropsShared & {
   /**
    * Optional props to be passed to the label's Text component.
    */
   labelProps?: Omit<Partial<TextProps>, 'children'>;
 
-  /**
-   * Required callback for when the checked state changes.
-   * Use this to update your state.
-   */
-  onChange: (isSelected: boolean) => void;
-
   /**
    * Optional props passed to the container view wrapping the checkbox icon.
    */

packages/design-system-react/src/components/Checkbox/Checkbox.types.ts

@@ -1,3 +1,4 @@
+import type { CheckboxPropsShared } from '@metamask/design-system-shared';
 import type { ComponentProps } from 'react';
 
 import type { IconProps } from '../Icon';
@@ -6,79 +7,48 @@ import type { TextProps } from '../Text';
 export type CheckboxProps = Omit<
   ComponentProps<'label'>,
   'style' | 'className' | 'children' | 'htmlFor'
-> & {
-  /**
-   * Required unique identifier for the checkbox input element.
-   * This is used for the input's ID and the label's htmlFor attributes.
-   */
-  id: string;
-
-  /**
-   * Required prop to determine whether the checkbox is currently selected.
-   * This component is fully controlled, so you must manage this state
-   * in your parent component.
-   */
-  isSelected: boolean;
-
-  /**
-   * Optional prop that when true, disables the checkbox.
-   *
-   * @default false
-   */
-  isDisabled?: boolean;
-
-  /**
-   * Optional prop that when true, displays the invalid/error state of the checkbox.
-   *
-   * @default false
-   */
-  isInvalid?: boolean;
-
-  /**
-   * Optional label prop that renders text or a React node as a label beside the checkbox.
-   */
-  label?: React.ReactNode | string;
-
-  /**
-   * Optional props to be passed to the label's Text component
-   */
-  labelProps?: Omit<Partial<TextProps>, 'children'>;
-
-  /**
-   * Required callback for when the checked state changes.
-   * Use this to update your state.
-   */
-  onChange: (isSelected: boolean) => void;
-
-  /**
-   * Optional props passed to the input element.
-   */
-  inputProps?: Omit<
-    ComponentProps<'input'>,
-    'type' | 'checked' | 'onChange' | 'disabled'
-  > & {
-    [key: `data-${string}`]: string;
-  };
-
-  /**
-   * Optional props passed to the container div wrapping the checkbox icon.
-   */
-  checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {
+> &
+  CheckboxPropsShared & {
+    /**
+     * Required unique identifier for the checkbox input element.
+     * This is used for the input's ID and the label's htmlFor attributes.
+     */
+    id: string;
+
+    /**
+     * Optional props to be passed to the label's Text component
+     */
+    labelProps?: Omit<Partial<TextProps>, 'children'>;
+
+    /**
+     * Optional props passed to the input element.
+     */
+    inputProps?: Omit<
+      ComponentProps<'input'>,
+      'type' | 'checked' | 'onChange' | 'disabled'
+    > & {
+      [key: `data-${string}`]: string;
+    };
+
+    /**
+     * Optional props passed to the container div wrapping the checkbox icon.
+     */
+    checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {
+      className?: string;
+    }) &
+      Record<string, unknown>;
+
+    /**
+     * Optional props to be passed to the check Icon component
+     */
+    checkedIconProps?: Partial<IconProps>;
+    /**
+     * Optional prop for additional CSS classes to be applied to the Checkbox component.
+     * These classes will be merged with the component's default classes using twMerge.
+     */
     className?: string;
-  }) &
-    Record<string, unknown>;
-
-  /**
-   * Optional props to be passed to the check Icon component
-   */
-  checkedIconProps?: Partial<IconProps>;
-  /**
-   * Optional prop for additional CSS classes to be applied to the Checkbox component.
-   * These classes will be merged with the component's default classes using twMerge.
-   */
-  className?: string;
-  /**
-   * Optional CSS styles for the outer container.
-   */
-  style?: React.CSSProperties;
-};
+    /**
+     * Optional CSS styles for the outer container.
+     */
+    style?: React.CSSProperties;
+  };

packages/design-system-shared/src/index.ts

@@ -56,3 +56,6 @@ export {
   type BadgeWrapperCustomPosition,
   type BadgeWrapperPropsShared,
 } from './types/BadgeWrapper';
+
+// Checkbox types (ADR-0004)
+export { type CheckboxPropsShared } from './types/Checkbox';

packages/design-system-shared/src/types/Checkbox/Checkbox.types.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Checkbox component shared props (ADR-0004)
+ * Platform-independent properties shared across React and React Native.
+ */
+export type CheckboxPropsShared = {
+  /**
+   * Required prop to determine whether the checkbox is currently selected.
+   * This component is fully controlled, so you must manage this state
+   * in your parent component.
+   */
+  isSelected: boolean;
+
+  /**
+   * Optional prop that when true, disables the checkbox.
+   *
+   * @default false
+   */
+  isDisabled?: boolean;
+
+  /**
+   * Optional prop that when true, displays the invalid/error state of the checkbox.
+   *
+   * @default false
+   */
+  isInvalid?: boolean;
+
+  /**
+   * Optional label prop that renders text or a React node as a label beside the checkbox.
+   */
+  label?: ReactNode | string;
+
+  /**
+   * Required callback for when the checked state changes.
+   * Use this to update your state.
+   */
+  onChange: (isSelected: boolean) => void;
+};

packages/design-system-shared/src/types/Checkbox/index.ts

@@ -0,0 +1 @@
+export { type CheckboxPropsShared } from './Checkbox.types';