refactor(PrimaryButton): rename to 'ButtonPrimary'

.eslintrc.json

@@ -11,7 +11,7 @@
     "jsx-a11y": {
       "polymorphicPropName": "as",
       "components": {
-        "PrimaryButton": "button"
+        "ButtonPrimary": "button"
       }
     }
   },

src/components/PrimaryButton.stories.tsx → src/components/ButtonPrimary.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { PrimaryButton, type PrimaryButtonProps } from "./PrimaryButton";
+import { ButtonPrimary, type ButtonPrimaryProps } from "./ButtonPrimary";
 
 // TODO: Refactor without generics
-const meta: Meta<PrimaryButtonProps> = {
-  component: PrimaryButton,
+const meta: Meta<ButtonPrimaryProps> = {
+  component: ButtonPrimary,
 };
 
 export default meta;
@@ -19,9 +19,9 @@ export const Basic = {
 export const Sizes = {
   render: () => (
     <div className="flex flex-col items-start gap-y-4">
-      <PrimaryButton size="sm">Small</PrimaryButton>
-      <PrimaryButton size="md">Medium</PrimaryButton>
-      <PrimaryButton size="lg">Large</PrimaryButton>
+      <ButtonPrimary size="sm">Small</ButtonPrimary>
+      <ButtonPrimary size="md">Medium</ButtonPrimary>
+      <ButtonPrimary size="lg">Large</ButtonPrimary>
     </div>
   ),
 } satisfies Story;

src/components/PrimaryButton.tsx → src/components/ButtonPrimary.tsx

@@ -3,13 +3,13 @@ import { clsx } from "clsx/lite";
 import { forwardRefWithGenerics } from "../utils/forwardRefWithGenerics";
 import type { Merge } from "../utils/types";
 
-type PrimaryButtonElementType = React.ElementType<
+type ButtonPrimaryElementType = React.ElementType<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   any,
   "button" | "a"
 >;
 
-export type PrimaryButtonProps<T extends PrimaryButtonElementType = "button"> =
+export type ButtonPrimaryProps<T extends ButtonPrimaryElementType = "button"> =
   Merge<
     React.ComponentPropsWithoutRef<T> & { as?: never },
     {
@@ -19,18 +19,18 @@ export type PrimaryButtonProps<T extends PrimaryButtonElementType = "button"> =
     }
   >;
 
-export const PrimaryButton = forwardRefWithGenerics(function PrimaryButton<
-  T extends PrimaryButtonElementType = "button",
+export const ButtonPrimary = forwardRefWithGenerics(function ButtonPrimary<
+  T extends ButtonPrimaryElementType = "button",
 >(
   {
     as = "button" as T,
     size = "md",
     className,
     ...props
-  }: PrimaryButtonProps<T>,
+  }: ButtonPrimaryProps<T>,
   ref: React.ForwardedRef<React.ElementRef<T>>,
 ) {
-  const Element: PrimaryButtonElementType = as;
+  const Element: ButtonPrimaryElementType = as;
   return (
     <Element
       ref={ref}

src/docs/sample.mdx

@@ -1,7 +1,7 @@
 import { Unstyled } from "@storybook/blocks";
 
 import { Alert } from "../components/Alert";
-import { PrimaryButton } from "../components/PrimaryButton";
+import { ButtonPrimary } from "../components/ButtonPrimary";
 
 <Unstyled>
   <div className="space-y-4 text-base text-ui-neutral-5">
@@ -11,15 +11,15 @@ import { PrimaryButton } from "../components/PrimaryButton";
         page. Only text content updates are conveyed to screen readers,
         preserving focus.
         <div className="flex flex-wrap gap-3">
-          <PrimaryButton>Ok</PrimaryButton>
-          <PrimaryButton>Cancel</PrimaryButton>
+          <ButtonPrimary>Ok</ButtonPrimary>
+          <ButtonPrimary>Cancel</ButtonPrimary>
         </div>
       </div>
     </Alert>
     <Alert sentiment="danger">This is an alert.</Alert>
     <Alert sentiment="success">This is an alert.</Alert>
     <Alert sentiment="warning">This is an alert.</Alert>
     <div>This is just a block of text.</div>
-    <PrimaryButton>Button</PrimaryButton>
+    <ButtonPrimary>Button</ButtonPrimary>
   </div>
 </Unstyled>