From 9de9c33339122e947fc3f3aca29f434bda0994e5 Mon Sep 17 00:00:00 2001
From: rian mandala <60568628+rianmandala@users.noreply.github.com>
Date: Mon, 16 Dec 2024 11:02:17 +0700
Subject: [PATCH] feat: form builder v2 adjustment (#73)

* feat: add custom listen input

* feat: add ref checkbox form

* bump version

* bump alpha version

* chore: update version
---
 lerna.json                                    |   2 +-
 packages/apsara-icons/package.json            |   2 +-
 packages/apsara-ui/package.json               |   2 +-
 packages/apsara-ui/src/Checkbox/Checkbox.tsx  | 100 ++++++++++--------
 .../components/field/field.tsx                |  23 ++--
 5 files changed, 73 insertions(+), 56 deletions(-)

diff --git a/lerna.json b/lerna.json
index 20ff2b26..c3c06def 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,7 +2,7 @@
     "packages": ["packages/*"],
     "npmClient": "yarn",
     "useWorkspaces": true,
-    "version": "0.11.1",
+    "version": "0.11.2",
     "command": {
         "version": {
             "message": "chore(release): publish %s"
diff --git a/packages/apsara-icons/package.json b/packages/apsara-icons/package.json
index 177891cd..7d5910b3 100644
--- a/packages/apsara-icons/package.json
+++ b/packages/apsara-icons/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/icons",
-    "version": "0.11.1",
+    "version": "0.11.2",
     "description": "Apsara icons",
     "scripts": {
         "build": "node scripts/build.js",
diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json
index ae465ed4..2afbb230 100644
--- a/packages/apsara-ui/package.json
+++ b/packages/apsara-ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/apsara",
-    "version": "0.11.1",
+    "version": "0.11.2",
     "description": "A list of base components for apsara",
     "author": "Praveen Yadav <praveen.yadav@go-jek.com>",
     "license": "Apache-2.0",
diff --git a/packages/apsara-ui/src/Checkbox/Checkbox.tsx b/packages/apsara-ui/src/Checkbox/Checkbox.tsx
index aa049171..a8aca46f 100644
--- a/packages/apsara-ui/src/Checkbox/Checkbox.tsx
+++ b/packages/apsara-ui/src/Checkbox/Checkbox.tsx
@@ -1,5 +1,5 @@
 import { CheckIcon } from "@radix-ui/react-icons";
-import React, { useEffect, useState } from "react";
+import React, { forwardRef, Ref, useEffect, useState } from "react";
 import { CheckboxWrapper, CheckboxGroupWrapper, StyledCheckbox, StyledIndicator } from "./Checkbox.styles";
 import { generateRandomId } from "../helper";
 import transformCheckedValue from "../helper/transform-checked-value";
@@ -16,6 +16,7 @@ type CheckboxProps = {
     className?: string;
     style?: React.CSSProperties;
     id?: string;
+    ref?: Ref<HTMLButtonElement>;
 };
 
 type CheckboxGroupProps = {
@@ -31,51 +32,57 @@ type CheckboxGroupProps = {
 };
 
 const prefixCls = "apsara-checkbox";
-const Checkbox = ({
-    defaultChecked = false,
-    checked,
-    onChange,
-    disabled,
-    required,
-    name,
-    value,
-    label,
-    style,
-    id = generateRandomId(),
-}: CheckboxProps) => {
-    const [isChecked, setIsChecked] = useState<boolean | "indeterminate">(checked || defaultChecked || false);
+const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
+    (
+        {
+            defaultChecked = false,
+            checked,
+            onChange,
+            disabled,
+            required,
+            name,
+            value,
+            label,
+            style,
+            id = generateRandomId(),
+        },
+        ref,
+    ) => {
+        const [isChecked, setIsChecked] = useState<boolean | "indeterminate">(checked || defaultChecked || false);
 
-    useEffect(() => {
-        setIsChecked(checked || false);
-    }, [checked]);
+        useEffect(() => {
+            setIsChecked(checked || false);
+        }, [checked]);
 
-    return (
-        <CheckboxWrapper className={`${prefixCls}-wrapper`}>
-            <StyledCheckbox
-                defaultChecked={defaultChecked}
-                id={id}
-                checked={isChecked || transformCheckedValue(value)}
-                onCheckedChange={
-                    onChange ||
-                    function (checked) {
-                        setIsChecked(checked);
+        return (
+            <CheckboxWrapper className={`${prefixCls}-wrapper`}>
+                <StyledCheckbox
+                    ref={ref}
+                    defaultChecked={defaultChecked}
+                    id={id}
+                    checked={isChecked || transformCheckedValue(value)}
+                    onCheckedChange={
+                        onChange ||
+                        function (checked) {
+                            setIsChecked(checked);
+                        }
                     }
-                }
-                disabled={disabled}
-                required={required}
-                name={name}
-                value={value}
-                style={style}
-                className={prefixCls}
-            >
-                <StyledIndicator>
-                    <CheckIcon style={{ width: "13px", height: "13px" }} />
-                </StyledIndicator>
-            </StyledCheckbox>
-            {label && <label htmlFor={id}>{label}</label>}
-        </CheckboxWrapper>
-    );
-};
+                    disabled={disabled}
+                    required={required}
+                    name={name}
+                    value={value}
+                    style={style}
+                    className={prefixCls}
+                >
+                    <StyledIndicator>
+                        <CheckIcon style={{ width: "13px", height: "13px" }} />
+                    </StyledIndicator>
+                </StyledCheckbox>
+                {label && <label htmlFor={id}>{label}</label>}
+            </CheckboxWrapper>
+        );
+    },
+);
 
 const CheckboxGroup = ({
     defaultValue,
@@ -111,6 +118,7 @@ const CheckboxGroup = ({
                             id={`${id}${option.value}${index}`}
                             checked={selectedValues.includes(option.value || "")}
                             value={option.value}
+                            ref={option.ref}
                             {...props}
                         />
                         <label className="checkbox_label" htmlFor={`${id}${option.value}${index}`}>
@@ -122,6 +130,8 @@ const CheckboxGroup = ({
     );
 };
 
-Checkbox.Group = CheckboxGroup;
+Checkbox.displayName = "Checkbox";
+
+const CompoundCheckbox = Object.assign(Checkbox, { CheckboxGroup });
 
-export default Checkbox;
+export default CompoundCheckbox;
diff --git a/packages/apsara-ui/src/form-builder-v2/components/field/field.tsx b/packages/apsara-ui/src/form-builder-v2/components/field/field.tsx
index d3c472f2..33221820 100644
--- a/packages/apsara-ui/src/form-builder-v2/components/field/field.tsx
+++ b/packages/apsara-ui/src/form-builder-v2/components/field/field.tsx
@@ -15,6 +15,7 @@ export interface FieldProps extends UseControllerProps {
     children: ReactElement;
     className?: string;
     style?: React.CSSProperties;
+    onChange?: (value: any) => void;
 }
 
 const Field = (props: FieldProps) => {
@@ -59,14 +60,20 @@ const Field = (props: FieldProps) => {
                 control={control}
                 rules={enhancedRules}
                 {...controllerProps}
-                render={({ field }) => (
-                    <>
-                        {React.cloneElement(children, {
-                            ...field,
-                            id: controllerProps.name,
-                        })}
-                    </>
-                )}
+                render={({ field }) => {
+                    const handleChange = (value: any) => {
+                        field.onChange(value);
+                        if (controllerProps.onChange) {
+                            controllerProps.onChange(value);
+                        }
+                    };
+
+                    return React.cloneElement(children, {
+                        ...field,
+                        id: controllerProps.name,
+                        onChange: handleChange,
+                    });
+                }}
             />
             <ErrorMessageWrapper
                 errors={errors}