feat(form)!: use native events for primitive components

.vscode/settings.json

@@ -4,7 +4,7 @@
     "serverId": "sonarcloud"
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "[typescriptreact,jsonc,typescript,javascript,html,json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

package.json

@@ -2,6 +2,7 @@
   "name": "@axa-fr/react-toolkit",
   "version": "0.0.0",
   "private": true,
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/AxaFrance/react-toolkit.git"

packages/Form/Input/card/src/CardGroup.tsx

@@ -1,9 +1,10 @@
 import React, { ComponentProps } from 'react';
 import { getComponentClassName } from '@axa-fr/react-toolkit-core';
-import { withInput } from '@axa-fr/react-toolkit-form-core';
+import { withIsVisible } from '@axa-fr/react-toolkit-form-core';
 import CardGroupStateless from './CardGroupStateless';
 
-type Props = ComponentProps<typeof CardGroupStateless>;
+type Props = ComponentProps<typeof CardGroupStateless> &
+  OnChange & { id: string };
 const CardGroup = ({
   type,
   title,
@@ -13,6 +14,8 @@ const CardGroup = ({
   name = 'defaultName',
   values,
   value,
+  id,
+  onChange,
   ...otherProps
 }: Props) => {
   const componentClassName = getComponentClassName(
@@ -31,6 +34,35 @@ const CardGroup = ({
     isActive ? 'af-rccard-group--active' : ''
   }`;
 
+  const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    if (type === 'checkbox') {
+      let newValues = [] as string[];
+      if (values) {
+        newValues = [...values];
+      }
+
+      const index = newValues.indexOf(e.target.value);
+      const checked = index <= -1;
+      if (checked) {
+        newValues.push(e.target.value);
+      } else {
+        newValues.splice(index, 1);
+      }
+      onChange &&
+        onChange({
+          values: newValues,
+          target: {
+            value: e.target.value,
+            checked,
+          },
+          name,
+          id,
+        });
+    } else {
+      onChange && onChange({ value: e.target.value, name, id });
+    }
+  };
+
   return (
     <CardGroupStateless
       type={type}
@@ -39,7 +71,8 @@ const CardGroup = ({
       values={values}
       value={value}
       className={cardGroupClassName}
-      {...otherProps}>
+      {...otherProps}
+      onChange={handleOnChange}>
       {children}
     </CardGroupStateless>
   );
@@ -55,45 +88,6 @@ type OnChange = {
   }) => void;
 };
 
-const handlers = {
-  onChange:
-    ({
-      type,
-      values,
-      name,
-      id,
-      onChange,
-    }: Omit<Props, 'onChange'> & OnChange) =>
-    (e: any) => {
-      if (type === 'checkbox') {
-        let newValues = [] as string[];
-        if (values) {
-          newValues = [...values];
-        }
-
-        const index = newValues.indexOf(e.value);
-        const checked = index <= -1;
-        if (checked) {
-          newValues.push(e.value);
-        } else {
-          newValues.splice(index, 1);
-        }
-        onChange &&
-          onChange({
-            values: newValues,
-            target: {
-              value: e.value,
-              checked,
-            },
-            name,
-            id,
-          });
-      } else {
-        onChange && onChange({ value: e.value, name, id });
-      }
-    },
-};
-
-const EnhancedComponent = withInput(handlers)(CardGroup);
+const EnhancedComponent = withIsVisible(CardGroup);
 
 export default EnhancedComponent;

packages/Form/Input/card/src/CardGroupStateless.tsx

@@ -32,7 +32,10 @@ const formatTitle = (titleParam: ReactNode) => {
   );
 };
 type Card = typeof import('./Card').default;
-type Props = Omit<ComponentProps<Card>, 'nbCards' | 'children' | 'title'> & {
+type Props = Omit<
+  ComponentProps<Card>,
+  'nbCards' | 'children' | 'title' | 'id'
+> & {
   title?: ReactNode | string;
   propClassName?: string;
   values?: string[];

packages/Form/Input/card/src/__tests__/Card.spec.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
 import { render } from '@testing-library/react';
+import React from 'react';
 import {
-  CardGroupCheckbox,
   Card,
-  CardHeader,
-  CardFooter,
   CardContent,
+  CardFooter,
+  CardGroupCheckbox,
+  CardHeader,
 } from '../index';
 
 describe('<Card>', () => {
   it('renders Card correctly', () => {
     const { asFragment } = render(
-      <CardGroupCheckbox onChange={jest.fn()} values={['1']}>
+      <CardGroupCheckbox onChange={jest.fn()} values={['1']} id="id">
         <Card name="name" id="name" value="1">
           <CardHeader>
             <p className="af-rccard-header__title"> Référence</p>

packages/Form/Input/checkbox/src/Checkbox.tsx

@@ -1,42 +1,71 @@
 import React, { ComponentProps, ReactNode } from 'react';
-import { Option, withInput } from '@axa-fr/react-toolkit-form-core';
+import { Option, withIsVisible } from '@axa-fr/react-toolkit-form-core';
 import CheckBoxModes from './CheckboxModes';
 import CheckboxItem from './CheckboxItem';
 
+type OnChange = {
+  onChange: (data: {
+    values: string[];
+    target: { value: string; checked: boolean };
+    name: string;
+    id: string;
+  }) => void;
+};
+
 type Props = Omit<
   ComponentProps<typeof CheckboxItem>,
-  'value' | 'label' | 'checked'
+  'value' | 'label' | 'checked' | 'onChange'
 > & {
   options: Option[];
   values?: string[];
   children?: ReactNode;
-};
+  mode?: keyof typeof CheckBoxModes;
+} & OnChange;
 
 const Checkbox = ({
+  id,
+  name,
   options,
   disabled,
   children,
   values,
+  mode = CheckBoxModes.default,
+  onChange,
   ...otherProps
-}: Props) => (
-  <>
-    {options.map((option) => {
-      const isChecked = values ? values.indexOf(option.value) >= 0 : false;
-      return (
-        <CheckboxItem
-          {...otherProps}
-          key={option.value}
-          id={option.id}
-          value={option.value}
-          label={option.label}
-          isChecked={isChecked}
-          disabled={option.disabled || disabled}>
-          {children}
-        </CheckboxItem>
-      );
-    })}
-  </>
-);
+}: Props) => {
+  const className = defaultClassName(mode);
+
+  const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = ({
+    target: { value, checked },
+  }) => {
+    const newValues = checked
+      ? [...values, value]
+      : values.filter((v) => v !== value);
+    onChange({ values: newValues, target: { value, checked }, id, name });
+  };
+  return (
+    <>
+      {options.map((option) => {
+        const isChecked = values ? values.indexOf(option.value) >= 0 : false;
+        return (
+          <CheckboxItem
+            {...otherProps}
+            onChange={handleOnChange}
+            key={option.value}
+            className={className}
+            id={option.id}
+            value={option.value}
+            label={option.label}
+            isChecked={isChecked}
+            name={name}
+            disabled={option.disabled || disabled}>
+            {children}
+          </CheckboxItem>
+        );
+      })}
+    </>
+  );
+};
 
 const defaultClassName = (mode: string) => {
   switch (mode) {
@@ -49,48 +78,6 @@ const defaultClassName = (mode: string) => {
   }
 };
 
-type OnChange = {
-  onChange: (data: {
-    values: string[];
-    target: { value: string; checked: boolean };
-    name: string;
-    id: string;
-  }) => void;
-};
-
-const handlersOverride = {
-  onChange:
-    ({ onChange, name, values, id }: Omit<Props, 'onChange'> & OnChange) =>
-    (e: any) => {
-      let newValues: typeof values = [];
-      if (values) {
-        newValues = [...values];
-      }
-      const index = newValues.indexOf(e.value);
-      const checked = index <= -1;
-      if (checked) {
-        newValues.push(e.value);
-      } else {
-        newValues.splice(index, 1);
-      }
-      onChange &&
-        onChange({
-          values: newValues,
-          target: { value: e.value, checked },
-          name,
-          id,
-        });
-    },
-};
-
-const propsOverride = ({
-  mode = CheckBoxModes.default,
-}: {
-  mode?: keyof typeof CheckBoxModes;
-}) => ({
-  className: defaultClassName(mode),
-});
-
 Checkbox.displayName = 'EnhancedInputCheckbox';
 
-export default withInput(handlersOverride, propsOverride)(Checkbox);
+export default withIsVisible(Checkbox);

packages/Form/Input/checkbox/src/CheckboxInput.tsx

@@ -43,7 +43,6 @@ const CheckboxInput = ({
       classNameContainerInput={classNameContainerInput}>
       <Checkbox
         mode={mode}
-        isVisible={isVisible}
         options={newOptions}
         classModifier={classModifier}
         required={classModifier?.includes('required')}

packages/Form/Input/checkbox/src/CheckboxItem.tsx

@@ -4,7 +4,7 @@ import React, {
   ReactNode,
 } from 'react';
 import { useId } from '@axa-fr/react-toolkit-core';
-import { getOptionClassName, withInput } from '@axa-fr/react-toolkit-form-core';
+import { getOptionClassName } from '@axa-fr/react-toolkit-form-core';
 
 type Props = Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'label'> & {
   classModifier?: string;
@@ -16,20 +16,27 @@ type Props = Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'label'> & {
 };
 
 const CheckboxItem = ({
-  disabled = true,
+  disabled,
   value = '',
   id,
   children,
   label,
   isChecked,
-  optionClassName,
   inputRef,
-  className: _className,
-  classModifier: _classModifier,
+  className,
+  classModifier,
   ...otherProps
 }: Props) => {
   const newLabel = children || label;
   const newId = useId(id); // id is require on this component
+
+  const optionClassName = getOptionClassName(
+    className,
+    classModifier,
+    'af-form__checkbox',
+    disabled
+  );
+
   return (
     <div className={optionClassName}>
       <input
@@ -52,22 +59,4 @@ const CheckboxItem = ({
   );
 };
 
-type PropsOverride = {
-  className?: string;
-  classModifier?: string;
-  disabled?: boolean;
-};
-const propsOverrides = ({
-  className,
-  classModifier,
-  disabled,
-}: PropsOverride) => ({
-  optionClassName: getOptionClassName(
-    className,
-    classModifier,
-    'af-form__checkbox',
-    disabled
-  ),
-});
-
-export default withInput({}, propsOverrides)(CheckboxItem);
+export default CheckboxItem;

packages/Form/Input/checkbox/src/__tests__/CheckboxInput.spec.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import CheckboxInput from '../CheckboxInput';
 
-describe('<DateInput>', () => {
-  it('renders DateInput correctly', () => {
+describe('<CheckboxInput>', () => {
+  it('renders CheckboxInput correctly', () => {
     const { asFragment } = render(
       <CheckboxInput
         label="Image *"