Rian/add invalid submit form

lerna.json

@@ -2,7 +2,7 @@
     "packages": ["packages/*"],
     "npmClient": "yarn",
     "useWorkspaces": true,
-    "version": "0.11.0",
+    "version": "0.11.2",
     "command": {
         "version": {
             "message": "chore(release): publish %s"

packages/apsara-icons/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/icons",
-    "version": "0.11.0",
+    "version": "0.11.2",
     "description": "Apsara icons",
     "scripts": {
         "build": "node scripts/build.js",

packages/apsara-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/apsara",
-    "version": "0.11.0",
+    "version": "0.11.2",
     "description": "A list of base components for apsara",
     "author": "Praveen Yadav <[email protected]>",
     "license": "Apache-2.0",

packages/apsara-ui/src/Radio/Radio.styles.tsx

@@ -53,7 +53,6 @@ export const Label = styled("label")`
     color: ${({ theme }) => theme?.radio?.label};
     margin: ${({ dir }) => dir === "rtl" && "8px"};
     font-size: 15px;
-    line-height: 1px;
     user-select: none;
     padding-left: 15px;
 `;

packages/apsara-ui/src/Radio/Radio.tsx

@@ -1,14 +1,19 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, ReactNode } from "react";
 import { RadioGroup, StyledRadioItem, StyledIndicator, Label, Flex, StyledRadioButton } from "./Radio.styles";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { generateRandomId } from "../helper";
 import { PREFIX_CLS } from "./constants";
 
+interface WrapperProps {
+    children: ReactNode;
+}
+
 export type RadioItem = {
     label?: string;
     value: string;
     disabled?: boolean;
     required?: boolean;
+    wrapper?: ({ children }: WrapperProps) => ReactNode;
 };
 
 type RadioButtonType = {
@@ -40,6 +45,10 @@ export type RadioProps = {
     id?: string;
 };
 
+const defaultWrapper = ({ children }: WrapperProps) => {
+    return <>{children}</>;
+};
+
 const Radio = forwardRef<HTMLInputElement, RadioProps>(
     ({ defaultValue, value, items, onChange, required, orientation, dir, id = generateRandomId(), ...props }, ref) => {
         return (
@@ -56,23 +65,33 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
                 ref={ref}
             >
                 {items &&
-                    items.map((item, i) => (
-                        <Flex dir={dir} key={item.value}>
-                            <StyledRadioItem
-                                value={item.value}
-                                disabled={item.disabled}
-                                required={item.required}
-                                {...props.itemStyle}
-                                id={`${id}${item.value}${i}`}
-                                className={`${PREFIX_CLS} ${props.className ? props.className : ""}`}
-                            >
-                                <StyledIndicator />
-                            </StyledRadioItem>
-                            <Label dir={dir} htmlFor={`${id}${item.value}${i}`}>
-                                {item.label}
-                            </Label>
-                        </Flex>
-                    ))}
+                    items.map((item, i) => {
+                        const { wrapper = defaultWrapper } = item;
+
+                        return (
+                            <>
+                                {wrapper({
+                                    children: (
+                                        <Flex dir={dir} key={item.value}>
+                                            <StyledRadioItem
+                                                value={item.value}
+                                                disabled={item.disabled}
+                                                required={item.required}
+                                                {...props.itemStyle}
+                                                id={`${id}${item.value}${i}`}
+                                                className={`${PREFIX_CLS} ${props.className ? props.className : ""}`}
+                                            >
+                                                <StyledIndicator />
+                                            </StyledRadioItem>
+                                            <Label dir={dir} htmlFor={`${id}${item.value}${i}`}>
+                                                {item.label}
+                                            </Label>
+                                        </Flex>
+                                    ),
+                                })}
+                            </>
+                        );
+                    })}
                 {!items && props.children}
             </RadioGroup>
         );

packages/apsara-ui/src/Tooltip/Tooltip.tsx

@@ -14,7 +14,8 @@ export type TooltipProps = {
     onOpenChange?: ((open: boolean) => void) | undefined;
     delayDuration?: number;
     avoidCollisions?: boolean;
-} & HTMLAttributes<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement> &
+    RadixTooltip.TooltipContentProps;
 
 export const PREFIX_CLS = "apsara-tooltip";
 const Tooltip = ({

packages/apsara-ui/src/form-builder-v2/components/field/field.tsx

@@ -5,7 +5,7 @@ import { PREFIX_CLS } from "../../constants";
 import withDefaultErrorMessage from "../../utils/default-error-message";
 import { ErrorMessage as ErrorMessageWrapper } from "@hookform/error-message";
 
-type ErrorAnimation = "shake" | "none";
+export type ErrorAnimation = "shake" | "none";
 
 export interface FieldProps extends UseControllerProps {
     label?: string;

packages/apsara-ui/src/form-builder-v2/form-builder-v2.stories.tsx

@@ -10,6 +10,7 @@ import DatePicker from "../DatePicker";
 import Combobox from "../Combobox";
 import Switch from "../Switch";
 import Checkbox from "../Checkbox";
+import Tooltip from "../Tooltip";
 
 export default {
     title: "Data Display/FormV2",
@@ -77,6 +78,12 @@ export const MyForm = () => {
                             disabled: true,
                             label: "Orange",
                             value: "Orange",
+                            // eslint-disable-next-line react/display-name
+                            wrapper: ({ children }) => (
+                                <Tooltip sideOffset={-5} title="Will coming soon!" placement="top">
+                                    {children}
+                                </Tooltip>
+                            ),
                         },
                     ]}
                     orientation="horizontal"

packages/apsara-ui/src/form-builder-v2/form-builder-v2.tsx

@@ -1,18 +1,25 @@
 import React, { ReactNode } from "react";
-import { FieldValues, FormProvider, SubmitHandler, UseFormReturn } from "react-hook-form";
+import { FieldValues, FormProvider, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
 import Field from "./components/field";
 import { PREFIX_CLS } from "./constants";
+import { noop } from "../utils";
 
 interface FormBuilderProps<T extends FieldValues> {
     children: ReactNode;
     onSubmit: SubmitHandler<T>;
+    onInvalidSubmit?: SubmitErrorHandler<T>;
     form: UseFormReturn<T>;
 }
 
-const FormBuilderV2 = <T extends FieldValues>({ children, onSubmit, form }: FormBuilderProps<T>) => {
+const FormBuilderV2 = <T extends FieldValues>({
+    children,
+    onSubmit,
+    onInvalidSubmit = noop,
+    form,
+}: FormBuilderProps<T>) => {
     return (
         <FormProvider {...form}>
-            <form className={`${PREFIX_CLS}`} onSubmit={form.handleSubmit(onSubmit)}>
+            <form className={`${PREFIX_CLS}`} onSubmit={form.handleSubmit(onSubmit, onInvalidSubmit)}>
                 {children}
             </form>
         </FormProvider>

packages/apsara-ui/src/index.ts

@@ -10,6 +10,7 @@ import Text from "./Text";
 import Tag from "./Tag";
 import States from "./States";
 import FormBuilder, { Form, FormInstance } from "./FormBuilder";
+import FormBuilderV2 from "./form-builder-v2";
 import Learn from "./Learn";
 import Markdown from "./Markdown";
 import ContentLayout from "./ContentLayout";
@@ -72,6 +73,7 @@ export {
     Text,
     Tag,
     FormBuilder,
+    FormBuilderV2,
     FormInstance,
     Form,
     States,