chore: improve CodeConfirmation, Select, and ContactForm

SIKKA-7564[closed] - add onCancel to CodeConfirmation - rename actions of CodeConfirmation SIKKA-7565[closed] - fix border issue in PinInput in RTL SIKKA-7498[closed] - make Select accessable + improved UI SIKKA-7366[closed] - ContactForm: allow submission with mod+enter SIKKA-7372[closed] - ContactForm: allow consumer to pass their custom classnames
sikka-software · Aug 5, 2024 · d5146eb · d5146eb
1 parent 1dbcdbd
commit d5146eb
Show file tree

Hide file tree

Showing 13 changed files with 151 additions and 43 deletions.
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-docs
 
+## 0.0.106
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.45.0
+
 ## 0.0.105
 
 ### Patch Changes

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-docs",
-  "version": "0.0.105",
+  "version": "0.0.106",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3001",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @sikka/hawa
 
+## 0.45.0
+
+### Minor Changes
+
+- `CodeConfirmation`: Add `onCancel` prop
+- `CodeConfirmation`: Rename `handleConfirm` and `handleResend` to `onConfirm` and `onResend`
+- `PinInput`: fix border issue in PinInput in RTL
+- `Select`: Improve accessiblilty
+- `Select`: Improved hover and selection UI
+- `ContactForm`: Allow submission with mod+enter
+- `ContactForm`: Allow consumer to pass their custom classnames
+
 ## 0.44.0
 
 ### Minor Changes

diff --git a/packages/components/blocks/auth/CodeConfirmation.tsx b/packages/components/blocks/auth/CodeConfirmation.tsx
@@ -27,8 +27,10 @@ type TConfirmation = {
   errorText?: any;
   phoneNumber?: string;
   confirmLoading?: boolean;
-  handleConfirm?: any;
-  handleResend?: any;
+  onConfirm?: any;
+  onResend?: any;
+  onCancel?: any;
+
   codeLength?: number;
 };
 
@@ -101,12 +103,10 @@ export const CodeConfirmation: FC<TConfirmation> = ({
         <form
           noValidate
           onSubmit={handleSubmit((e) => {
-            if (props.handleConfirm) {
-              return props.handleConfirm(e);
+            if (props.onConfirm) {
+              return props.onConfirm(e);
             } else {
-              console.log(
-                "Form is submitted but handleConfirm prop is missing",
-              );
+              console.log("Form is submitted but onConfirm prop is missing");
             }
           })}
         >
@@ -133,7 +133,7 @@ export const CodeConfirmation: FC<TConfirmation> = ({
                 className="clickable-link"
                 onClick={() => {
                   startResendTimer();
-                  props.handleResend();
+                  props.onResend();
                 }}
               >
                 {props.texts?.resendCode || "Click to resend"}
@@ -142,7 +142,21 @@ export const CodeConfirmation: FC<TConfirmation> = ({
           )}
 
           <div className="hawa-mt-4 hawa-grid hawa-grid-cols-2 hawa-gap-2">
-            <Button variant="outline">{props.texts?.cancel || "Cancel"}</Button>
+            <Button
+              type="button"
+              onClick={() => {
+                if (props.onCancel) {
+                  return props.onCancel();
+                } else {
+                  console.log(
+                    "Cancel button clicked but onCancel prop is missing",
+                  );
+                }
+              }}
+              variant="outline"
+            >
+              {props.texts?.cancel || "Cancel"}
+            </Button>
             <Button isLoading={props.confirmLoading}>
               {props.texts?.confirm || "Confirm"}
             </Button>

diff --git a/packages/components/blocks/misc/ContactForm.tsx b/packages/components/blocks/misc/ContactForm.tsx
@@ -20,6 +20,8 @@ import { Textarea } from "@elements/textarea";
 import { RadioOptionType } from "@_types/commonTypes";
 import { TextInputType } from "@_types/textTypes";
 
+import { getHotkeyHandler } from "../../hooks/useShortcuts";
+
 type ContactFormData = { name: string; email: string; message: string } & {
   [key: string]: string;
 };
@@ -35,12 +37,15 @@ type ContactFormProps = {
   cardless?: boolean;
   formId?: string;
   formAutoComplete?: "on" | "off";
+  clearOnSubmit?: boolean;
   size?: "sm" | "default";
   onSubmit: (e: ContactFormData) => void;
   customFields?: CustomField[];
   showSuccess?: boolean;
   classNames?: {
     submitButton?: string;
+    container?: string;
+
   };
   texts?: {
     submit: string;
@@ -62,6 +67,7 @@ export const ContactForm: React.FC<ContactFormProps> = ({
   onSubmit,
   customFields,
   classNames,
+  clearOnSubmit = true,
   ...props
 }) => {
   const customFieldsSchema = z.object({
@@ -118,7 +124,10 @@ export const ContactForm: React.FC<ContactFormProps> = ({
     handleSubmit,
     formState: { errors },
     reset,
+    getValues,
+    trigger,
   } = useForm<ContactFormData>({
+    mode: "all",
     resolver: zodResolver(MainSchema),
     defaultValues: {
       name: "",
@@ -128,10 +137,16 @@ export const ContactForm: React.FC<ContactFormProps> = ({
     },
   });
 
-  const handleFormSubmit = (data: ContactFormData) => {
+  const SubmitForm = async (data: ContactFormData) => {
+    const isValid = await trigger();
+    if (!isValid) {
+      return;
+    }
     if (onSubmit) {
       onSubmit(data);
-      reset();
+      if (clearOnSubmit) {
+        reset();
+      }
     } else {
       console.log("Form is submitted but onSubmit prop is missing");
     }
@@ -143,6 +158,7 @@ export const ContactForm: React.FC<ContactFormProps> = ({
         "hawa-w-full",
         cardless &&
           "hawa-border-none hawa-bg-transparent hawa-shadow-none hawa-drop-shadow-none",
+        classNames?.container,
       )}
       style={cardless ? { boxShadow: "none" } : undefined}
     >
@@ -158,7 +174,7 @@ export const ContactForm: React.FC<ContactFormProps> = ({
         ) : (
           <form
             noValidate
-            onSubmit={handleSubmit(handleFormSubmit)}
+            onSubmit={handleSubmit(SubmitForm)}
             className="hawa-space-y-2"
             id={formId}
             autoComplete={formAutoComplete}
@@ -250,6 +266,9 @@ export const ContactForm: React.FC<ContactFormProps> = ({
                     placeholder: texts?.message.placeholder,
                     className: "hawa-min-h-20",
                     ...field,
+                    onKeyDown: getHotkeyHandler([
+                      ["mod+enter", () => SubmitForm(getValues())],
+                    ]),
                   }}
                   classNames={{ textarea: "hawa-min-h-40 hawa-h-full" }}
                   helperText={errors.message?.message}

diff --git a/packages/components/elements/pinInput/PinInput.tsx b/packages/components/elements/pinInput/PinInput.tsx
@@ -97,22 +97,26 @@ const PinInput: React.FC<PinInputProps> = ({
     <div className="hawa-flex hawa-flex-col hawa-gap-2">
       <PinInputRoot {...props}>
         {firstGroupLength > 0 && (
-          <PinInputGroup className="hawa-w-full">
+          <PinInputGroup className="hawa-w-full hawa-gap-2">
             {[...Array(firstGroupLength)].map((_, index) => (
-              <PinInputSlot key={index} index={index} className="hawa-w-full" />
+              <PinInputSlot
+                key={index}
+                index={index}
+                className="hawa-w-full hawa-border"
+              />
             ))}
           </PinInputGroup>
         )}
         {separatorPosition > 0 && separatorPosition < props.maxLength && (
           <PinInputSeperator />
         )}
         {secondGroupLength > 0 && (
-          <PinInputGroup className="hawa-w-full">
+          <PinInputGroup className="hawa-w-full hawa-gap-2">
             {[...Array(secondGroupLength)].map((_, index) => (
               <PinInputSlot
                 key={index + firstGroupLength}
                 index={index + firstGroupLength}
-                className="hawa-w-full"
+                className="hawa-w-full hawa-border"
               />
             ))}
           </PinInputGroup>

diff --git a/packages/components/elements/select/Select.tsx b/packages/components/elements/select/Select.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import ReactSelect, { MenuProps } from "react-select";
+import ReactSelect, { MenuProps, OptionProps } from "react-select";
 import CreatableSelect from "react-select/creatable";
 
 import { cn } from "@util/index";
@@ -28,12 +28,14 @@ type MenuTypes = MenuProps & {
 };
 
 // The single options
-type OptionTypes = {
+type OptionTypes = OptionProps & {
   cx: any;
   children: any;
   getStyles: any;
   innerProps: any;
   innerRef: any;
+  isFocused: boolean;
+  isSelected: boolean;
   size?: "small" | "normal" | "large";
 };
 
@@ -96,12 +98,22 @@ export const Select: FC<SelectTypes> = ({
       </div>
     );
   };
-  const Option: FC<OptionTypes> = ({ children, innerProps, innerRef }) => {
+  const Option: FC<OptionTypes> = ({
+    children,
+    innerProps,
+    innerRef,
+    isFocused,
+    isSelected,
+  }) => {
     return (
       <div
         ref={innerRef}
         className={cn(
-          "hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hawa-transition-all hover:hawa-bg-primary hover:hawa-text-primary-foreground",
+          "hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hawa-transition-all",
+          isFocused
+            ? "hawa-bg-accent hawa-text-bg-accent-foreground"
+            : "hover:hawa-bg-accent hover:hawa-text-accent-foreground",
+          isSelected && "hawa-bg-primary hawa-text-primary-foreground",
         )}
         {...innerProps}
       >
@@ -166,18 +178,26 @@ export const Select: FC<SelectTypes> = ({
               cn(
                 selectContainerStyles,
                 props.phoneCode && phoneCodeStyles,
-                props.disabled
-                  ? "hawa-cursor-not-allowed"
-                  : "hawa-cursor-pointer",
+
                 props.isMulti && "hawa-ps-0 ",
               ),
-            placeholder: () => selectPlaceholderStyles,
+            placeholder: () =>
+              cn(
+                selectPlaceholderStyles,
+                props.disabled && "hawa-text-muted-foreground",
+              ),
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
-            singleValue: () => "hawa-text-foreground",
+            singleValue: () =>
+              cn(
+                props.disabled
+                  ? "hawa-text-muted-foreground hawa-opacity-30"
+                  : "hawa-text-foreground",
+              ),
             indicatorsContainer: () =>
               cn(
                 selectIndicatorContainerStyles,
                 props.hideIndicator ? "hawa-invisible" : "hawa-px-1",
+                props.disabled && "hawa-opacity-30",
               ),
           }}
           unstyled
@@ -188,13 +208,6 @@ export const Select: FC<SelectTypes> = ({
               : {
                   Option,
                   Menu,
-                  // Control: (e) => (
-                  //   <div
-                  //     className={cn(e.className, "hawa-flex hawa-flex-row")}
-                  //     {...e}
-                  //   />
-                  // ),
-
                   ValueContainer: (e) => (
                     <div
                       className={cn(

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",

diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-storybook
 
+## 0.26.128
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.45.0
+
 ## 0.26.127
 
 ### Patch Changes

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-storybook",
-  "version": "0.26.127",
+  "version": "0.26.128",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",

diff --git a/packages/storybook/stories/BlocksStories/AuthStories/CodeConfirmation.stories.tsx b/packages/storybook/stories/BlocksStories/AuthStories/CodeConfirmation.stories.tsx
@@ -7,7 +7,7 @@ import { setLocale, t } from "../../../translations/i18n";
 
 const meta = {
   title: "Blocks/User Auth/CodeConfirmation",
-  component: CodeConfirmation
+  component: CodeConfirmation,
 } satisfies Meta<typeof CodeConfirmation>;
 
 export default meta;
@@ -35,12 +35,16 @@ export const Default: Story = {
             codeTooShort: t("codeTooShort"),
             cancel: t("cancel"),
             confirm: t("confirm"),
-            seconds: t("seconds")
+            seconds: t("seconds"),
           }}
         />
       </div>
     );
   },
   args: {},
-  argTypes: { handleConfirm: { action: "handleConfirm" } }
+  argTypes: {
+    onConfirm: { action: "onConfirm" },
+    onCancel: { action: "onCancel" },
+    onResend: { action: "onResend" },
+  },
 };
diff --git a/packages/storybook/stories/BlocksStories/MiscStories/ContactForm.stories.tsx b/packages/storybook/stories/BlocksStories/MiscStories/ContactForm.stories.tsx
@@ -23,6 +23,7 @@ export const Default: Story = {
       <div dir={direction} className="hawa-max-w-lg">
         <ContactForm
           {...args}
+          clearOnSubmit={false}
           texts={{
             email: {
               invalid: t("emailInvalidText"),