refactor: rename Input to InputOutlined

kripod · Jul 19, 2024 · 6db9d94 · 6db9d94
1 parent fa16eab
commit 6db9d94
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 23 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -16,7 +16,7 @@
         "ButtonPrimary": "button",
         "ButtonSecondary": "button",
         "ButtonTertiary": "button",
-        "Input": "input"
+        "InputOutlined": "input"
       }
     }
   },

diff --git a/src/components/Input.stories.tsx → src/components/InputOutlined.stories.tsx b/src/components/Input.stories.tsx → src/components/InputOutlined.stories.tsx
@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent } from "@storybook/test";
 
-import { Input } from "./Input";
+import { InputOutlined } from "./InputOutlined";
 
 const meta = {
-  component: Input,
-} satisfies Meta<typeof Input>;
+  component: InputOutlined,
+} satisfies Meta<typeof InputOutlined>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -23,11 +23,11 @@ export const Basic = {
 export const Interactivity = {
   render: () => (
     <div className="flex flex-col items-start gap-4">
-      <Input defaultValue="Focused" />
-      <Input defaultValue="Invalid" aria-invalid />
-      <Input value="Read-only" readOnly />
-      <Input placeholder="Placeholder" />
-      <Input value="Disabled" disabled />
+      <InputOutlined defaultValue="Focused" />
+      <InputOutlined defaultValue="Invalid" aria-invalid />
+      <InputOutlined value="Read-only" readOnly />
+      <InputOutlined placeholder="Placeholder" />
+      <InputOutlined value="Disabled" disabled />
     </div>
   ),
   play: async () => {
@@ -38,18 +38,18 @@ export const Interactivity = {
 export const Sizes = {
   render: () => (
     <div className="flex flex-col items-start gap-4">
-      <Input size="sm" placeholder="Small" />
-      <Input size="md" placeholder="Medium" />
-      <Input size="lg" placeholder="Large" />
+      <InputOutlined size="sm" placeholder="Small" />
+      <InputOutlined size="md" placeholder="Medium" />
+      <InputOutlined size="lg" placeholder="Large" />
     </div>
   ),
 } satisfies Story;
 
 export const Shapes = {
   render: () => (
     <div className="flex flex-col items-start gap-4">
-      <Input shape="rectangle" placeholder="Rectangle" />
-      <Input shape="pill" placeholder="Pill" />
+      <InputOutlined shape="rectangle" placeholder="Rectangle" />
+      <InputOutlined shape="pill" placeholder="Pill" />
     </div>
   ),
 } satisfies Story;
diff --git a/src/components/Input.tsx → src/components/InputOutlined.tsx b/src/components/Input.tsx → src/components/InputOutlined.tsx
@@ -3,14 +3,14 @@ import { forwardRef } from "react";
 
 import { controlClassName } from "../utils/controlClassName";
 
-export interface InputProps
+export interface InputOutlinedProps
   extends Omit<React.ComponentPropsWithRef<"input">, "size"> {
   size?: "sm" | "md" | "lg";
   shape?: "rectangle" | "pill";
 }
 
-export const Input = forwardRef(function Input(
-  { size = "md", shape = "rectangle", className, ...props }: InputProps,
+export const InputOutlined = forwardRef(function InputOutlined(
+  { size = "md", shape = "rectangle", className, ...props }: InputOutlinedProps,
   ref: React.ForwardedRef<HTMLInputElement>,
 ) {
   return (

diff --git a/src/docs/sample.mdx b/src/docs/sample.mdx
@@ -5,7 +5,7 @@ import { ButtonPlain } from "../components/ButtonPlain";
 import { ButtonPrimary } from "../components/ButtonPrimary";
 import { ButtonSecondary } from "../components/ButtonSecondary";
 import { ButtonTertiary } from "../components/ButtonTertiary";
-import { Input } from "../components/Input";
+import { InputOutlined } from "../components/InputOutlined";
 
 <Unstyled>
   <div className="flex flex-col gap-4 bg-ui-neutral-50 p-4 text-base text-ui-neutral-800">
@@ -15,7 +15,7 @@ import { Input } from "../components/Input";
         page. Only text content updates are conveyed to screen readers,
         preserving focus.
         <div className="flex flex-wrap gap-2">
-          <Input size="sm" placeholder="Placeholder" />
+          <InputOutlined size="sm" placeholder="Placeholder" />
           <ButtonPrimary size="sm">Ok</ButtonPrimary>
         </div>
       </div>
@@ -39,15 +39,15 @@ import { Input } from "../components/Input";
     </div>
     <div>This is just a block of text.</div>
     <div className="flex gap-2">
-      <Input size="sm" placeholder="Placeholder" />
+      <InputOutlined size="sm" placeholder="Placeholder" />
       <ButtonTertiary size="sm">Submit</ButtonTertiary>
     </div>
     <div className="flex gap-2">
-      <Input size="md" placeholder="Placeholder" />
+      <InputOutlined size="md" placeholder="Placeholder" />
       <ButtonTertiary size="md">Submit</ButtonTertiary>
     </div>
     <div className="flex gap-2">
-      <Input size="lg" placeholder="Placeholder" />
+      <InputOutlined size="lg" placeholder="Placeholder" />
       <ButtonTertiary size="lg">Submit</ButtonTertiary>
     </div>
   </div>

diff --git a/src/mod.ts b/src/mod.ts
@@ -12,4 +12,7 @@ export {
   ButtonTertiary,
   type ButtonTertiaryProps,
 } from "./components/ButtonTertiary";
-export { Input, type InputProps } from "./components/Input";
+export {
+  InputOutlined,
+  type InputOutlinedProps,
+} from "./components/InputOutlined";