feat(react): add Input component (#52)

Co-authored-by: Apika Luca <[email protected]>

Author: Gannu456

js/react/lib/components/input/index.ts

@@ -0,0 +1,2 @@
+export * from "./input";
+export * from "./input.types";

js/react/lib/components/input/input.tsx

@@ -0,0 +1,33 @@
+import clsx from "clsx";
+import { InputFieldProps } from "./input.types";
+
+export function Input({
+  errorMessage,
+  hasError = !!errorMessage,
+  icon,
+  disabled,
+  className,
+  ...props
+}: InputFieldProps) {
+  return (
+    <div className="rustlanges-input__container">
+      <div
+        className={clsx(
+          "rustlanges-input",
+          hasError && "rustlanges-input--error",
+          className
+        )}
+      >
+        {icon && <span className="rustlanges-input__icon">{icon}</span>}
+        <input
+          disabled={disabled}
+          className="rustlanges-input__inner"
+          {...props}
+        />
+      </div>
+      {hasError && errorMessage && (
+        <span className="rustlanges-input__error">{errorMessage}</span>
+      )}
+    </div>
+  );
+}

js/react/lib/components/input/input.types.ts

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes, ReactNode } from "react";
+
+export interface InputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  hasError?: boolean;
+  errorMessage?: string;
+  icon?: ReactNode;
+}

js/react/lib/index.ts

@@ -5,6 +5,7 @@ export * from "./components/contact-form";
 export * from "./components/chip";
 export * from "./components/tag";
 export * from "./components/flap";
+export * from "./components/input";
 export * from "./components/level";
 export * from "./components/avatar";
 export * from "./components/collaborators";

js/react/showcase/App.tsx

@@ -5,6 +5,8 @@ import {
   Github,
   Tag,
   Telegram,
+  Input,
+  Location,
   Flap,
   Chip,
   Level,
@@ -524,6 +526,31 @@ export function App() {
           </div>
         </div>
       </ShowComponent>
+      <ShowComponent
+        title="Input"
+        propsDef={{
+          placeholder: {
+            type: "string",
+            default: "Input",
+          },
+          disabled: {
+            type: "boolean",
+            default: false,
+          },
+          hasError: {
+            type: "boolean",
+            default: false,
+          },
+          errorMessage: {
+            type: "string",
+            default: "Error",
+          },
+        }}
+        component={Input}
+      />
+      <ShowComponent title="Input With Icon">
+        <Input icon={<Location />} placeholder="Input" />
+      </ShowComponent>
       <ShowComponent title="Input Search">
         <div className="flex min-h-60 w-full flex-wrap justify-evenly gap-40 p-5">
           <InputSearch

styles/components.css

@@ -6,6 +6,7 @@
 @import "./components/collaborators.css";
 @import "./components/dropdown.css";
 @import "./components/flap.css";
+@import "./components/input.css";
 @import "./components/level.css";
 @import "./components/radio.css";
 @import "./components/tag.css";

styles/components/input-search.css

@@ -1,9 +1,7 @@
 @layer components {
-  
-
   .rustlanges-input-search-container {
     @apply relative flex h-fit w-full;
-    
+
     svg {
       @apply text-gray-600 dark:text-gray-400;
     }

styles/components/input.css

@@ -0,0 +1,43 @@
+@layer components {
+  .rustlanges-input {
+    @apply flex items-center gap-2 rounded-xl px-[10px] py-3 transition-colors;
+    @apply bg-light border-1 border-black text-black hover:bg-neutral-100;
+    @apply dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900;
+
+    &:has(> :active),
+    &:has(> :focus) {
+      @apply border-primary-500;
+    }
+
+    @variant has-disabled {
+      @apply cursor-not-allowed border-neutral-400 bg-neutral-100 text-neutral-600;
+      @apply dark:bg-neutral-900 dark:text-neutral-400;
+    }
+  }
+
+  .rustlanges-input--error {
+    @apply border-error-600;
+  }
+
+  .rustlanges-input__container {
+    @apply flex flex-col gap-1;
+  }
+
+  .rustlanges-input__error {
+    @apply text-error-800 dark:text-error-300 mt-1 text-sm;
+  }
+
+  .rustlanges-input__inner {
+    @apply w-full bg-transparent outline-none;
+    @apply placeholder:text-neutral-600 dark:placeholder:text-neutral-400;
+    @apply disabled:pointer-events-none disabled:placeholder:text-neutral-400 dark:disabled:placeholder:text-neutral-600;
+  }
+
+  .rustlanges-input__icon {
+    @apply text-neutral-600;
+
+    &:has(+ :disabled) {
+      @apply text-neutral-400;
+    }
+  }
+}