first commit

calcom/packages/ui/components/TokenHandler/TokenHandler.tsx

@@ -0,0 +1,36 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Label, Input } from "@calcom/ui";
+
+type Digit = {
+  value: number;
+  onChange: () => void;
+};
+type PropType = {
+  digits: Digit[];
+  digitClassName: string;
+};
+
+const TokenHandler = ({ digits, digitClassName }: PropType) => {
+  const { t } = useLocale();
+
+  return (
+    <div>
+      <Label htmlFor="code">{t("code")}</Label>
+      <div className="flex flex-row justify-between">
+        {digits.map((element, index) => (
+          <Input
+            key={index}
+            className={digitClassName}
+            name={`2fa${index + 1}`}
+            inputMode="decimal"
+            {...element}
+            autoFocus={index === 0}
+            autoComplete="one-time-code"
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TokenHandler;

calcom/packages/ui/components/TokenHandler/token-handler.test.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable playwright/missing-playwright-await */
+import { render, screen, fireEvent } from "@testing-library/react";
+import { vi } from "vitest";
+
+import TokenHandler from "./TokenHandler";
+
+describe("Tests for TokenHandler component", () => {
+  test("Should render the correct number of input elements", () => {
+    const digits = [
+      { value: 1, onChange: vi.fn() },
+      { value: 2, onChange: vi.fn() },
+      { value: 3, onChange: vi.fn() },
+    ];
+
+    render(<TokenHandler digits={digits} digitClassName="digit" />);
+    expect(screen.getAllByRole("textbox")).toHaveLength(digits.length);
+  });
+
+  test("Should handle digit input correctly", () => {
+    const onChangeMock = vi.fn();
+    const digits = [{ value: 1, onChange: onChangeMock }];
+
+    render(<TokenHandler digits={digits} digitClassName="digit" />);
+
+    const inputElement = screen.getByRole("textbox");
+    fireEvent.change(inputElement, { target: { value: "5" } });
+
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+  });
+});

calcom/packages/ui/components/TokenHandler/tokenhandler.stories.mdx

@@ -0,0 +1,43 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import { Examples, Example, Note, Title, CustomArgsTable } from "@calcom/storybook/components";
+
+import TokenHandler from "./TokenHandler";
+
+<Meta title="UI/TokenHandler" component={TokenHandler} />
+
+<Title title="TokenHandler" subtitle="Version 0.1" />
+
+## Structure
+
+<TokenHandler
+  digits={[
+    {
+      value: "1",
+      onChange: (e) => {},
+    },
+    {
+      value: "2",
+      onChange: (e) => {},
+    },
+    {
+      value: "3",
+      onChange: (e) => {},
+    },
+    {
+      value: "4",
+      onChange: (e) => {},
+    },
+    {
+      value: "5",
+      onChange: (e) => {},
+    },
+    {
+      value: "6",
+      onChange: (e) => {},
+    },
+  ]}
+  digitClassName="digit-input"
+/>
+
+#all the numbers should be visible while the first one is focused