feat: add otp component - fix #139

src/components/form/form/form.stories.tsx

@@ -2,6 +2,7 @@ import { fn } from "@storybook/test";
 import { FormComponent } from "./form.component";
 import { InputComponent, SelectorComponent, ButtonComponent } from "../index";
 import { BoxComponent, CardComponent } from "../../../components";
+import { OtpComponent } from "../otp";
 
 export default {
   title: "Components/Form",
@@ -50,6 +51,7 @@ export const Primary = {
           type="password"
           placeholder="repeat password"
         />
+        <OtpComponent name="otp" placeholder="2FA" />
         <SelectorComponent
           name="country"
           placeholder="country"

src/components/form/index.ts

@@ -4,3 +4,4 @@ export * from "./selector";
 export * from "./table";
 export * from "./form";
 export * from "./file-input";
+export * from "./otp";

src/components/form/otp/index.ts

@@ -0,0 +1 @@
+export * from "./otp.component";

src/components/form/otp/otp.component.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+
+// @ts-ignore
+import styles from "./otp.module.scss";
+import { cn } from "../../../utils";
+import { useCallback, useId, useMemo, useRef } from "react";
+import { BoxComponent, extractBoxProps } from "../../../components";
+import type { BoxProps } from "../../../components";
+
+type Props = {
+  className?: string;
+  wrapperClassName?: string;
+  placeholder?: string;
+  bordered?: boolean;
+  length?: number;
+} & Partial<BoxProps> &
+  React.HTMLProps<HTMLInputElement>;
+
+export const OtpComponent: React.FC<Props> = ({
+  className,
+  wrapperClassName,
+  placeholder,
+  bordered,
+  length = 6,
+  ...props
+}) => {
+  const id = useId();
+  const [otherProps, boxProps] = extractBoxProps<Props>(props);
+
+  const otpValueRef = useRef([]);
+  const hiddenInputRef = useRef(null);
+
+  const onChangeInput = useCallback(
+    (index: number) => (event) => {
+      if (!parseInt(event.target.value)) {
+        event.target.value = null;
+        return event.preventDefault();
+      }
+      try {
+        document.activeElement.nextElementSibling.focus();
+      } catch (e) {}
+      otpValueRef.current[index] = event.target.value;
+      hiddenInputRef.current.value = otpValueRef.current.join("");
+    },
+    [],
+  );
+
+  const inputRender = useMemo(() => {
+    const inputs = [];
+    for (let i = 0; i < length; i++) {
+      inputs.push(
+        <input
+          onChange={onChangeInput(i)}
+          id={id + i}
+          key={id + i}
+          className={cn(styles.input, className)}
+          maxLength={1}
+        />,
+      );
+    }
+    return inputs;
+  }, [length, onChangeInput, id, className]);
+
+  return (
+    <BoxComponent
+      {...boxProps}
+      className={cn(
+        styles.inputWrapper,
+        wrapperClassName,
+        [styles.bordered, !!bordered],
+        { [styles.disabled]: props.disabled },
+      )}
+    >
+      <label className={styles.placeholder}>{placeholder}</label>
+      <input {...otherProps} ref={hiddenInputRef} type="hidden" />
+      <div className={styles.inputs}>{inputRender}</div>
+    </BoxComponent>
+  );
+};

src/components/form/otp/otp.module.scss

@@ -0,0 +1,71 @@
+@use "../../../styles/all.module" as *;
+
+.inputWrapper {
+  display: inline-flex;
+  position: relative;
+  width: 100%;
+  flex-direction: column;
+
+  .placeholder {
+    color: var(--input-placeholder-c);
+    padding: 0;
+    cursor: text;
+    user-select: none;
+    margin-left: 0rem;
+  }
+
+  .inputs {
+    display: flex;
+    gap: 0.5rem;
+    width: 100%;
+
+    .input {
+      background-color: var(--input-bg);
+      color: var(--input-c);
+      width: 3rem;
+      border: 0.2rem solid transparent;
+
+      padding: 1rem 0;
+      border-radius: var(--border-radius);
+      outline: none;
+      text-align: center;
+
+      display: inline-flex;
+
+      &.hasPlaceholder {
+        transition: padding;
+        transition-duration: 0.3s;
+
+        &:not(:placeholder-shown),
+        :-webkit-autofill {
+          padding-top: 1.7rem;
+          padding-bottom: 0.3rem;
+        }
+      }
+
+      &:active,
+      &:focus {
+        background-color: var(--input-focus-bg);
+        color: var(--input-focus-c);
+      }
+    }
+
+    &.bordered .input {
+      border: 0.2rem solid var(--input-bd);
+
+      &:active,
+      &:focus {
+        border: 0.2rem solid var(--input-focus-bd);
+      }
+    }
+    &.disabled {
+      opacity: 0.5;
+    }
+
+    // Weird hack to style autofill color in Chrome
+    .input:-webkit-autofill {
+      box-shadow: 0 0 0 1000px var(--input-bg) inset;
+      -webkit-text-fill-color: var(--input-c);
+    }
+  }
+}

src/components/form/otp/otp.stories.ts

@@ -0,0 +1,19 @@
+import { fn } from "@storybook/test";
+import { OtpComponent } from "./otp.component";
+
+export default {
+  title: "Components/Form/OTP Input",
+  component: OtpComponent,
+  parameters: {
+    layout: "centered",
+    backgrounds: { default: "dark" },
+  },
+  args: { onChange: fn() },
+};
+
+export const Primary = {
+  args: {
+    placeholder: "2FA",
+    name: "otp",
+  },
+};