docs(input): add documentation for input component

ruru-m07 · Jul 28, 2024 · f9cb1d2 · f9cb1d2
1 parent 8a4fd89
commit f9cb1d2
Show file tree

Hide file tree

Showing 2 changed files with 255 additions and 0 deletions.
diff --git a/apps/www/content/docs/components/input.mdx b/apps/www/content/docs/components/input.mdx
@@ -0,0 +1,253 @@
+---
+title: Input
+description: The Input component is used to get user input.
+preview: input
+---
+
+import { Input, SearchInput } from "ruru-ui/components/input";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+## Usage
+
+<Tabs items={["Preview", "Code"]}>
+<Tab className={"flex justify-center"} value="Preview" >
+<Input placeholder="Enter text" />
+</Tab>
+<Tab className={"-mt-8"} value="Code">
+
+```tsx
+import { Input } from "ruru-ui/components/input";
+
+export function InputDemo() {
+  return <Input placeholder="Enter text" />;
+}
+```
+
+</Tab>
+</Tabs>
+
+## Variants
+
+---
+
+### Default Input
+
+<Tabs items={["Preview", "Code"]}>
+<Tab className={"flex justify-center"} value="Preview" >
+<Input placeholder="Enter text" />
+</Tab>
+<Tab className={"-mt-8"} value="Code">
+```tsx
+import { Input } from "ruru-ui/components/input";
+
+export function DefaultInputDemo() {
+  return <Input placeholder="Enter text" />;
+}
+````;
+
+ </Tab>
+</Tabs>
+
+### Input with Label
+
+<Tabs items={["Preview", "Code"]}>
+<Tab className={"flex justify-center"} value="Preview" >
+ <Input label="Email" placeholder="Enter your email" />
+</Tab>
+<Tab className={"-mt-8"} value="Code">
+```tsx
+ import { Input } from "ruru-ui/components/input";
+
+export function LabelInputDemo() {
+  return <Input label="Email" placeholder="Enter your email" />;
+}
+
+````
+</Tab>
+</Tabs>
+
+### Input with Prefix and Suffix
+
+<Tabs items={["Preview", "Code"]}>
+<Tab className={"flex justify-center gap-5"} value="Preview" >
+<Input prefix="@" placeholder="Username" />
+<Input suffix=".com" placeholder="Website" />
+</Tab>
+<Tab className={"-mt-8"} value="Code">
+```tsx
+import { Input } from "ruru-ui/components/input";
+
+export function PrefixSuffixInputDemo() {
+  return (
+    <div className={"flex justify-center gap-5"}>
+      <Input prefix="@" placeholder="Username" />
+      <Input suffix=".com" placeholder="Website" />
+    </div>
+  )
+}
+````
+
+ </Tab>
+</Tabs>
+
+### Input with Error Message
+
+<Tabs items={["Preview", "Code"]}>
+<Tab className={"flex justify-center"} value="Preview" >
+ <Input error="Invalid input" placeholder="Enter text" />
+</Tab>
+<Tab className={"-mt-8"} value="Code">
+```tsx
+ import { Input } from "ruru-ui/components/input";
+
+export function ErrorInputDemo() {
+  return <Input error="Invalid input" placeholder="Enter text" />;
+}
+
+````
+</Tab>
+</Tabs>
+
+### Search Input
+
+<Tabs items={["Preview", "Code"]}>
+<Tab className={"flex justify-center"} value="Preview" >
+<SearchInput placeholder="Search..." />
+</Tab>
+<Tab className={"-mt-8"} value="Code">
+```tsx
+import { SearchInput } from "ruru-ui/components/input";
+
+export function SearchInputDemo() {
+  return (
+      <SearchInput placeholder="Search..." />
+  )
+}
+````
+
+ </Tab>
+</Tabs>
+
+## Props
+
+### Input
+
+| Name            | Type                          | Default     | Description                                                    |
+| --------------- | ----------------------------- | ----------- | -------------------------------------------------------------- |
+| `className`     | `string`                      | `""`        | Additional class names for the container.                      |
+| `iclassName`    | `string`                      | `""`        | Additional class names for the input element.                  |
+| `prefix`        | `React.ReactNode` or `string` | `undefined` | Node or string to render as prefix inside the input container. |
+| `suffix`        | `React.ReactNode` or `string` | `undefined` | Node or string to render as suffix inside the input container. |
+| `prefixStyling` | `boolean`                     | `true`      | Flag to apply styling to the prefix.                           |
+| `suffixStyling` | `boolean`                     | `true`      | Flag to apply styling to the suffix.                           |
+| `label`         | `string`                      | `undefined` | Label for the input element.                                   |
+| `error`         | `string`                      | `""`        | Error message to display below the input.                      |
+
+### SearchInput
+
+| Name                  | Type      | Default | Description                          |
+| --------------------- | --------- | ------- | ------------------------------------ |
+| `enablePrefixStyling` | `boolean` | `false` | Flag to apply styling to the prefix. |
+
+## Examples
+
+### Default Input Example
+
+<Tabs items={["Preview", "Code"]}>
+<Tab className={"flex justify-center"} value="Preview" >
+ <Input placeholder="Enter text" />
+</Tab>
+<Tab className={"-mt-8"} value="Code">
+```tsx
+ import { Input } from "ruru-ui/components/input";
+
+export function DefaultInputExample() {
+  return <Input placeholder="Enter text" />;
+}
+
+````
+</Tab>
+</Tabs>
+
+### Input with Label Example
+
+<Tabs items={["Preview", "Code"]}>
+<Tab className={"flex justify-center"} value="Preview" >
+<Input label="Email" placeholder="Enter your email" />
+</Tab>
+<Tab className={"-mt-8"} value="Code">
+```tsx
+import { Input } from "ruru-ui/components/input";
+
+export function LabelInputExample() {
+  return (
+      <Input label="Email" placeholder="Enter your email" />
+  )
+}
+````
+
+ </Tab>
+</Tabs>
+
+### Input with Prefix and Suffix Example
+
+<Tabs items={["Preview", "Code"]}>
+<Tab className={"flex justify-center gap-5"} value="Preview" >
+ <Input prefix="@" placeholder="Username" />
+ <Input suffix=".com" placeholder="Website" />
+</Tab>
+<Tab className={"-mt-8"} value="Code">
+```tsx
+ import { Input } from "ruru-ui/components/input";
+
+export function PrefixSuffixInputExample() {
+  return (
+    <div className={"flex justify-center gap-5"}>
+      <Input prefix="@" placeholder="Username" />
+      <Input suffix=".com" placeholder="Website" />
+    </div>
+  );
+}
+
+````
+</Tab>
+</Tabs>
+
+### Input with Error Message Example
+
+<Tabs items={["Preview", "Code"]}>
+<Tab className={"flex justify-center"} value="Preview" >
+<Input error="Invalid input" placeholder="Enter text" />
+</Tab>
+<Tab className={"-mt-8"} value="Code">
+```tsx
+import { Input } from "ruru-ui/components/input";
+
+export function ErrorInputExample() {
+  return (
+      <Input error="Invalid input" placeholder="Enter text" />
+  )
+}
+````
+
+ </Tab>
+</Tabs>
+
+### Search Input Example
+
+<Tabs items={["Preview", "Code"]}>
+<Tab className={"flex justify-center"} value="Preview" >
+ <SearchInput placeholder="Search..." />
+</Tab>
+<Tab className={"-mt-8"} value="Code">
+```tsx
+ import { SearchInput } from "ruru-ui/components/input";
+
+export function SearchInputExample() {
+  return <SearchInput placeholder="Search..." />;
+}
+
+```
+</Tab>
+</Tabs>
+
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 import { cn } from "@/utils/cn";