refactor(ui): add forwardRef to almost all components

- remove `helperText` prop from all components in favor of simple lego building using the `HelperText` component primitive
themesberg · Jan 17, 2025 · 781336d · 781336d
1 parent 4a74eb8
commit 781336d
Show file tree

Hide file tree

Showing 86 changed files with 2,573 additions and 2,740 deletions.
diff --git a/apps/storybook/src/Banner.stories.tsx b/apps/storybook/src/Banner.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from "@storybook/react";
-import type { BannerComponentProps } from "flowbite-react";
+import type { BannerProps } from "flowbite-react";
 import { Banner, BannerCollapseButton } from "flowbite-react";
 import { HiX } from "react-icons/hi";
 import { MdAnnouncement } from "react-icons/md";
@@ -9,7 +9,7 @@ export default {
   component: Banner,
 } as Meta;
 
-const Template: StoryFn<BannerComponentProps> = (args) => <Banner {...args} />;
+const Template: StoryFn<BannerProps> = (args) => <Banner {...args} />;
 
 export const DefaultBanner = Template.bind({});
 DefaultBanner.storyName = "Default";

diff --git a/apps/web/content/docs/components/forms.mdx b/apps/web/content/docs/components/forms.mdx
@@ -53,7 +53,7 @@ Pass the `shadow` prop to the form components from React to automatically add a
 
 ## Form helper text
 
-Show a helper and descriptive text next to the input field to improve UI/UX when submitting forms by passing the `helperText` prop to the input component from React.
+Show a helper and descriptive text next to the input field to improve UI/UX when submitting forms.
 
 <Example name="forms.helperText" />
 

diff --git a/apps/web/examples/floatingLabel/floatingLabel.helperText.tsx b/apps/web/examples/floatingLabel/floatingLabel.helperText.tsx
@@ -1,27 +1,25 @@
-import { FloatingLabel } from "flowbite-react";
+import { FloatingLabel, HelperText } from "flowbite-react";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
-import { FloatingLabel } from "flowbite-react";
+import { FloatingLabel, HelperText } from "flowbite-react";
 
 export function Component() {
   return (
-    <FloatingLabel
-      variant="filled"
-      label="Floating Helper"
-      helperText="Remember, contributions to this topic should follow our Community Guidelines."
-    />
+    <>
+      <FloatingLabel variant="filled" label="Floating Helper" />
+      <HelperText>Remember, contributions to this topic should follow our Community Guidelines.</HelperText>
+    </>
   );
 }
 `;
 
 export function Component() {
   return (
-    <FloatingLabel
-      variant="filled"
-      label="Floating Helper"
-      helperText="Remember, contributions to this topic should follow our Community Guidelines."
-    />
+    <>
+      <FloatingLabel variant="filled" label="Floating Helper" />
+      <HelperText>Remember, contributions to this topic should follow our Community Guidelines.</HelperText>
+    </>
   );
 }
 

diff --git a/apps/web/examples/forms/forms.helperText.tsx b/apps/web/examples/forms/forms.helperText.tsx
@@ -1,30 +1,23 @@
-import { Label, TextInput } from "flowbite-react";
+import { HelperText, Label, TextInput } from "flowbite-react";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
-import { Label, TextInput } from "flowbite-react";
+import { HelperText, Label, TextInput } from "flowbite-react";
 
 export function Component() {
   return (
     <div className="max-w-md">
       <div className="mb-2 block">
         <Label htmlFor="email3" value="Your email" />
       </div>
-      <TextInput
-        id="email3"
-        type="email"
-        placeholder="name@flowbite.com"
-        required
-        helperText={
-          <>
-            We’ll never share your details. Read our
-            <a href="#" className="ml-1 font-medium text-cyan-600 hover:underline dark:text-cyan-500">
-              Privacy Policy
-            </a>
-            .
-          </>
-        }
-      />
+      <TextInput id="email3" type="email" placeholder="name@flowbite.com" required />
+      <HelperText>
+        We’ll never share your details. Read our
+        <a href="#" className="ml-1 font-medium text-cyan-600 hover:underline dark:text-cyan-500">
+          Privacy Policy
+        </a>
+        .
+      </HelperText>
     </div>
   );
 }
@@ -36,21 +29,14 @@ export function Component() {
       <div className="mb-2 block">
         <Label htmlFor="email3" value="Your email" />
       </div>
-      <TextInput
-        id="email3"
-        type="email"
-        placeholder="name@flowbite.com"
-        required
-        helperText={
-          <>
-            We’ll never share your details. Read our
-            <a href="#" className="ml-1 font-medium text-cyan-600 hover:underline dark:text-cyan-500">
-              Privacy Policy
-            </a>
-            .
-          </>
-        }
-      />
+      <TextInput id="email3" type="email" placeholder="name@flowbite.com" required />
+      <HelperText>
+        We’ll never share your details. Read our
+        <a href="#" className="ml-1 font-medium text-cyan-600 hover:underline dark:text-cyan-500">
+          Privacy Policy
+        </a>
+        .
+      </HelperText>
     </div>
   );
 }

diff --git a/apps/web/examples/forms/forms.validation.tsx b/apps/web/examples/forms/forms.validation.tsx
@@ -1,8 +1,8 @@
-import { Label, TextInput } from "flowbite-react";
+import { HelperText, Label, TextInput } from "flowbite-react";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
-import { Label, TextInput } from "flowbite-react";
+import { HelperText, Label, TextInput } from "flowbite-react";
 
 export function Component() {
   return (
@@ -11,33 +11,19 @@ export function Component() {
         <div className="mb-2 block">
           <Label htmlFor="username3" color="success" value="Your name" />
         </div>
-        <TextInput
-          id="username"
-          placeholder="Bonnie Green"
-          required
-          color="success"
-          helperText={
-            <>
-              <span className="font-medium">Alright!</span> Username available!
-            </>
-          }
-        />
+        <TextInput id="username" placeholder="Bonnie Green" required color="success" />
+        <HelperText>
+          <span className="font-medium">Alright!</span> Username available!
+        </HelperText>
       </div>
       <div>
         <div className="mb-2 block">
           <Label htmlFor="username4" color="failure" value="Your name" />
         </div>
-        <TextInput
-          id="username4"
-          placeholder="Bonnie Green"
-          required
-          color="failure"
-          helperText={
-            <>
-              <span className="font-medium">Oops!</span> Username already taken!
-            </>
-          }
-        />
+        <TextInput id="username4" placeholder="Bonnie Green" required color="failure" />
+        <HelperText>
+          <span className="font-medium">Oops!</span> Username already taken!
+        </HelperText>
       </div>
     </div>
   );
@@ -51,33 +37,19 @@ export function Component() {
         <div className="mb-2 block">
           <Label htmlFor="username3" color="success" value="Your name" />
         </div>
-        <TextInput
-          id="username"
-          placeholder="Bonnie Green"
-          required
-          color="success"
-          helperText={
-            <>
-              <span className="font-medium">Alright!</span> Username available!
-            </>
-          }
-        />
+        <TextInput id="username" placeholder="Bonnie Green" required color="success" />
+        <HelperText>
+          <span className="font-medium">Alright!</span> Username available!
+        </HelperText>
       </div>
       <div>
         <div className="mb-2 block">
           <Label htmlFor="username4" color="failure" value="Your name" />
         </div>
-        <TextInput
-          id="username4"
-          placeholder="Bonnie Green"
-          required
-          color="failure"
-          helperText={
-            <>
-              <span className="font-medium">Oops!</span> Username already taken!
-            </>
-          }
-        />
+        <TextInput id="username4" placeholder="Bonnie Green" required color="failure" />
+        <HelperText>
+          <span className="font-medium">Oops!</span> Username already taken!
+        </HelperText>
       </div>
     </div>
   );

diff --git a/packages/ui/src/components/Alert/Alert.tsx b/packages/ui/src/components/Alert/Alert.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import type { ComponentProps, FC, ReactNode } from "react";
+import { forwardRef, type ComponentProps, type FC, type ReactNode } from "react";
 import { get } from "../../helpers/get";
 import { useResolveTheme } from "../../helpers/resolve-theme";
 import { twMerge } from "../../helpers/tailwind-merge";
@@ -35,56 +35,62 @@ export interface AlertProps extends Omit<ComponentProps<"div">, "color">, Themin
   withBorderAccent?: boolean;
 }
 
-export function Alert({
-  additionalContent,
-  children,
-  className,
-  color = "info",
-  icon: Icon,
-  onDismiss,
-  rounded = true,
-  withBorderAccent,
-  theme: customTheme,
-  clearTheme,
-  applyTheme,
-  ...props
-}: AlertProps) {
-  const provider = useThemeProvider();
-  const theme = useResolveTheme(
-    [alertTheme, provider.theme?.alert, customTheme],
-    [get(provider.clearTheme, "alert"), clearTheme],
-    [get(provider.applyTheme, "alert"), applyTheme],
-  );
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      additionalContent,
+      children,
+      className,
+      color = "info",
+      icon: Icon,
+      onDismiss,
+      rounded = true,
+      withBorderAccent,
+      theme: customTheme,
+      clearTheme,
+      applyTheme,
+      ...props
+    },
+    ref,
+  ) => {
+    const provider = useThemeProvider();
+    const theme = useResolveTheme(
+      [alertTheme, provider.theme?.alert, customTheme],
+      [get(provider.clearTheme, "alert"), clearTheme],
+      [get(provider.applyTheme, "alert"), applyTheme],
+    );
 
-  return (
-    <div
-      className={twMerge(
-        theme.base,
-        theme.color[color],
-        rounded && theme.rounded,
-        withBorderAccent && theme.borderAccent,
-        className,
-      )}
-      role="alert"
-      {...props}
-    >
-      <div className={theme.wrapper} data-testid="flowbite-alert-wrapper">
-        {Icon && <Icon className={theme.icon} data-testid="flowbite-alert-icon" />}
-        <div>{children}</div>
-        {typeof onDismiss === "function" && (
-          <button
-            aria-label="Dismiss"
-            className={twMerge(theme.closeButton.base, theme.closeButton.color[color])}
-            onClick={onDismiss}
-            type="button"
-          >
-            <XIcon aria-hidden className={theme.closeButton.icon} />
-          </button>
+    return (
+      <div
+        ref={ref}
+        className={twMerge(
+          theme.base,
+          theme.color[color],
+          rounded && theme.rounded,
+          withBorderAccent && theme.borderAccent,
+          className,
         )}
+        role="alert"
+        {...props}
+      >
+        <div className={theme.wrapper} data-testid="flowbite-alert-wrapper">
+          {Icon && <Icon className={theme.icon} data-testid="flowbite-alert-icon" />}
+          <div>{children}</div>
+          {typeof onDismiss === "function" && (
+            <button
+              aria-label="Dismiss"
+              className={twMerge(theme.closeButton.base, theme.closeButton.color[color])}
+              onClick={onDismiss}
+              type="button"
+            >
+              <XIcon aria-hidden className={theme.closeButton.icon} />
+            </button>
+          )}
+        </div>
+        {additionalContent && <div>{additionalContent}</div>}
       </div>
-      {additionalContent && <div>{additionalContent}</div>}
-    </div>
-  );
-}
+    );
+  },
+);
 
 Alert.displayName = "Alert";