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"),