feat/phoneInput: added phoneInput Form Feature

apps/web/content/docs/forms/phone-input.mdx

@@ -0,0 +1,38 @@
+---
+title: React Phone Input - Flowbite
+description: Use the phone number input component from Flowbite to set a phone number inside a form field and use sizes
+---
+
+The phone number input component from Flowbite React can be used to set a phone number inside a form field by using the native type="tel" attribute.
+
+The examples are built with the utility classes from Tailwind CSS and they are fully responsive, dark mode compatible and support RTL layouts and can be used for any type of web project.
+
+To start using the component make sure that you have imported it from Flowbite React:
+
+```jsx
+import { PhoneInput } from "flowbite-react";
+```
+
+## Default phone input
+
+Get started with the following phone input example with default type as `type="tel"`.
+
+<Example name="phoneInput.root" />
+
+## Example with Helper Text
+
+<Example name="phoneInput.withHelperText" />
+
+## Example with Icon on the right
+
+<Example name="phoneInput.withRightIcon" />
+
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<Theme name="phoneInput" />
+
+## References
+
+- [Flowbite Phone Input](https://flowbite.com/docs/forms/phone-input/)

apps/web/data/docs-sidebar.ts

@@ -90,6 +90,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
     items: [
       { title: "File Input", href: "/docs/forms/file-input" },
       { title: "Floating Label", href: "/docs/forms/floating-label", isNew: true },
+      { title: "Phone Input", href: "/docs/forms/phone-input", isNew: true },
     ],
   },
   {

apps/web/examples/index.ts

@@ -21,6 +21,7 @@ export * as listGroup from "./listGroup";
 export * as modal from "./modal";
 export * as navbar from "./navbar";
 export * as pagination from "./pagination";
+export * as phoneInput from "./phoneInput";
 export * as popover from "./popover";
 export * as progress from "./progress";
 export * as rating from "./rating";

apps/web/examples/phoneInput/index.ts

@@ -0,0 +1,3 @@
+export { root } from "./phoneInput.root";
+export { withHelperText } from "./phoneInput.withHelperText";
+export { withRightIcon } from "./phoneInput.withRightIcon";

apps/web/examples/phoneInput/phoneInput.root.tsx

@@ -0,0 +1,52 @@
+import { PhoneInput } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { PhoneInput } from "flowbite-react";
+
+function Component() {
+    return (
+        <form className="max-w-sm mx-auto">
+            <PhoneInput />
+        </form>
+    )
+}
+`;
+
+const codeRSC = `
+function Component() {
+    return (
+        <form className="max-w-sm mx-auto">
+            <PhoneInput />
+        </form>
+    )
+}
+`;
+
+function Component() {
+  return (
+    <form className="mx-auto max-w-sm">
+      <PhoneInput pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required placeholder="123-456-7890" />
+    </form>
+  );
+}
+
+export const root: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "/phoneInput/phoneInput.root.tsx",
+  component: <Component />,
+};

apps/web/examples/phoneInput/phoneInput.withHelperText.tsx

@@ -0,0 +1,57 @@
+import { PhoneInput } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { PhoneInput } from "flowbite-react";
+
+function Component() {
+    return (
+        <form className="max-w-sm mx-auto">
+            <PhoneInput helperText="Select a phone number that matches the format." />
+        </form>
+    )
+}
+`;
+
+const codeRSC = `
+function Component() {
+    return (
+        <form className="max-w-sm mx-auto">
+            <PhoneInput helperText="Select a phone number that matches the format." />
+        </form>
+    )
+}
+`;
+
+function Component() {
+  return (
+    <form className="mx-auto max-w-sm">
+      <PhoneInput
+        pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
+        required
+        placeholder="123-456-7890"
+        helperText="Select a phone number that matches the format."
+      />
+    </form>
+  );
+}
+
+export const withHelperText: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "/phoneInput/phoneInput.withHelperText.tsx",
+  component: <Component />,
+};

apps/web/examples/phoneInput/phoneInput.withRightIcon.tsx

@@ -0,0 +1,59 @@
+import { PhoneInput } from "flowbite-react";
+import { FaPhoneAlt } from "react-icons/fa";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { PhoneInput } from "flowbite-react";
+
+function Component() {
+    return (
+        <form className="max-w-sm mx-auto">
+            <PhoneInput helperText="Select a phone number that matches the format."  rightIcon={FaPhoneAlt}/>
+        </form>
+    )
+}
+`;
+
+const codeRSC = `
+function Component() {
+    return (
+        <form className="max-w-sm mx-auto">
+            <PhoneInput helperText="Select a phone number that matches the format." rightIcon={FaPhoneAlt} />
+        </form>
+    )
+}
+`;
+
+function Component() {
+  return (
+    <form className="mx-auto max-w-sm">
+      <PhoneInput
+        pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
+        required
+        placeholder="123-456-7890"
+        helperText="Select a phone number that matches the format."
+        rightIcon={FaPhoneAlt}
+      />
+    </form>
+  );
+}
+
+export const withRightIcon: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "/phoneInput/phoneInput.withRightIcon.tsx",
+  component: <Component />,
+};

packages/ui/src/components/Flowbite/FlowbiteTheme.ts

@@ -23,6 +23,7 @@ import type { FlowbiteListGroupTheme } from "../ListGroup";
 import type { FlowbiteModalTheme } from "../Modal";
 import type { FlowbiteNavbarTheme } from "../Navbar";
 import type { FlowbitePaginationTheme } from "../Pagination";
+import { FlowbitePhoneInputTheme } from "../PhoneInput/PhoneInput";
 import type { FlowbitePopoverTheme } from "../Popover";
 import type { FlowbiteProgressTheme } from "../Progress";
 import type { FlowbiteRadioTheme } from "../Radio";
@@ -68,6 +69,7 @@ export interface FlowbiteTheme {
   modal: FlowbiteModalTheme;
   navbar: FlowbiteNavbarTheme;
   pagination: FlowbitePaginationTheme;
+  phoneInput: FlowbitePhoneInputTheme;
   popover: FlowbitePopoverTheme;
   progress: FlowbiteProgressTheme;
   radio: FlowbiteRadioTheme;

packages/ui/src/components/PhoneInput/PhoneInput.spec.tsx

@@ -0,0 +1,30 @@
+import { render } from "@testing-library/react";
+import { FaPhoneAlt } from "react-icons/fa";
+import { describe, expect, it } from "vitest";
+import { PhoneInput } from "./PhoneInput";
+
+describe.concurrent("Components / PhoneInput", () => {
+  describe.concurrent("A11y", () => {
+    it('should have `role="textbox"` by default', () => {
+      const textInput = render(<PhoneInput />).getByRole("textbox");
+
+      expect(textInput).toBeInTheDocument();
+    });
+
+    it("should have Left Icon", () => {
+      const leftPage = render(<PhoneInput />).getAllByTestId("left-icon");
+
+      leftPage.forEach((leftIcon) => {
+        expect(leftIcon).toBeInTheDocument();
+      });
+    });
+
+    it("should have Right Icon", () => {
+      const rightPage = render(<PhoneInput rightIcon={FaPhoneAlt} />).getAllByTestId("right-icon");
+
+      rightPage.forEach((rightIcon) => {
+        expect(rightIcon).toBeInTheDocument();
+      });
+    });
+  });
+});

packages/ui/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryFn } from "@storybook/react";
+import { FaPhoneAlt } from "react-icons/fa";
+import type { PhoneInputProps } from "./PhoneInput";
+import { PhoneInput } from "./PhoneInput";
+
+export default {
+  title: "Components/PhoneInput",
+  component: PhoneInput,
+} as Meta;
+
+const Template: StoryFn<PhoneInputProps> = (args) => {
+  return (
+    <form className="mx-auto max-w-sm">
+      <PhoneInput {...args} />
+    </form>
+  );
+};
+
+export const Default = Template.bind({});
+Default.storyName = "Phone Input";
+Default.args = {
+  placeholder: "123-456-7890",
+  pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}",
+  required: true,
+};
+
+export const WithRightIcon = Template.bind({});
+WithRightIcon.storyName = "Phone Input with Right Icon";
+WithRightIcon.args = {
+  placeholder: "123-456-7890",
+  pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}",
+  required: true,
+  rightIcon: FaPhoneAlt,
+};
+
+export const WithHelperText = Template.bind({});
+WithHelperText.storyName = "Phone Input with Helper Text";
+WithHelperText.args = {
+  placeholder: "123-456-7890",
+  pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}",
+  required: true,
+  helperText: "Select a phone number that matches the format.",
+};

packages/ui/src/components/PhoneInput/PhoneInput.tsx

@@ -0,0 +1,78 @@
+import { forwardRef, type ComponentProps, type FC, type ReactNode } from "react";
+import { FaPhoneAlt } from "react-icons/fa";
+import { twMerge } from "tailwind-merge";
+import { mergeDeep } from "../../helpers/merge-deep";
+import { getTheme } from "../../theme-store";
+import type { DeepPartial } from "../../types";
+import { FlowbiteSizes } from "../Flowbite";
+import { HelperText } from "../HelperText";
+
+export interface FlowbitePhoneInputTheme {
+  root: {
+    base: string;
+    input: {
+      base: string;
+      sizes: FlowbitePhoneInputSizes;
+      startIcon: {
+        base: string;
+        icon: string;
+      };
+      rightIcon: {
+        base: string;
+        icon: string;
+      };
+    };
+  };
+}
+
+export interface FlowbitePhoneInputSizes extends Pick<FlowbiteSizes, "sm" | "md" | "lg"> {
+  [key: string]: string;
+}
+
+export interface PhoneInputProps extends Omit<ComponentProps<"input">, "ref"> {
+  helperText?: ReactNode;
+  icon?: FC<ComponentProps<"svg">>;
+  rightIcon?: FC<ComponentProps<"svg">>;
+  sizing?: keyof FlowbitePhoneInputSizes;
+  theme?: DeepPartial<FlowbitePhoneInputTheme>;
+}
+
+export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
+  (
+    { helperText, icon: LeftIcon, rightIcon: RightIcon, sizing = "md", theme: customTheme = {}, className, ...props },
+    ref,
+  ) => {
+    const theme = mergeDeep(getTheme().phoneInput.root, customTheme);
+
+    const StartIcon = LeftIcon ? LeftIcon : FaPhoneAlt;
+
+    return (
+      <>
+        <div className={twMerge(theme.base, className)}>
+          <div data-testid="left-icon" className={theme.input.startIcon.base}>
+            <StartIcon aria-hidden className={theme.input.startIcon.icon} />
+          </div>
+          <div className={theme.input.rightIcon.base}>
+            {RightIcon && (
+              <div data-testid="right-icon" className={theme.input.rightIcon.base}>
+                <RightIcon className={theme.input.rightIcon.icon} />
+              </div>
+            )}
+          </div>
+          <input
+            type="tel"
+            id="phone-input"
+            aria-describedby="phone-input"
+            data-testid="phone-input-field"
+            className={theme.input.base}
+            ref={ref}
+            {...props}
+          />
+        </div>
+        {helperText && <HelperText color="grey">{helperText}</HelperText>}
+      </>
+    );
+  },
+);
+
+PhoneInput.displayName = "PhoneInput";