From 43e6567498bd266d41dcf1cf453925578c7b8f86 Mon Sep 17 00:00:00 2001 From: Gannu456 Date: Wed, 2 Jul 2025 18:55:01 +0530 Subject: [PATCH 1/7] feat(react): add Input component with light theme and states --- js/react/lib/components/input/index.ts | 2 + js/react/lib/components/input/input.const.ts | 9 ++ js/react/lib/components/input/input.tsx | 39 +++++++++ js/react/lib/components/input/input.types.ts | 9 ++ js/react/lib/index.ts | 1 + js/react/showcase/App.tsx | 90 ++++++++++++++++++++ 6 files changed, 150 insertions(+) create mode 100644 js/react/lib/components/input/index.ts create mode 100644 js/react/lib/components/input/input.const.ts create mode 100644 js/react/lib/components/input/input.tsx create mode 100644 js/react/lib/components/input/input.types.ts diff --git a/js/react/lib/components/input/index.ts b/js/react/lib/components/input/index.ts new file mode 100644 index 0000000..8894454 --- /dev/null +++ b/js/react/lib/components/input/index.ts @@ -0,0 +1,2 @@ +export { default } from "./input"; +export * from './input.types'; \ No newline at end of file diff --git a/js/react/lib/components/input/input.const.ts b/js/react/lib/components/input/input.const.ts new file mode 100644 index 0000000..da81ec5 --- /dev/null +++ b/js/react/lib/components/input/input.const.ts @@ -0,0 +1,9 @@ +export const INPUT_VARIANTS = { + default: "bg-white border border-black text-black placeholder:text-neutral-500", + hover: "bg-neutral-100 border border-black text-black placeholder:text-neutral-500", + active: "bg-white border border-orange-500 ring-1 ring-orange-500 text-black placeholder:text-neutral-500", + inactive: "bg-neutral-100 border border-neutral-300 text-neutral-400 placeholder:text-neutral-400 cursor-not-allowed", + error: "bg-white border border-red-600 text-black placeholder:text-neutral-500", +}; + +export const ERROR_TEXT_CLASSES = "text-sm text-red-600 mt-1"; \ No newline at end of file diff --git a/js/react/lib/components/input/input.tsx b/js/react/lib/components/input/input.tsx new file mode 100644 index 0000000..1284070 --- /dev/null +++ b/js/react/lib/components/input/input.tsx @@ -0,0 +1,39 @@ +import { INPUT_VARIANTS, ERROR_TEXT_CLASSES } from "./input.const"; +import { InputFieldProps } from "./input.types"; +import clsx from "clsx"; + +export default function InputField({ + variant = "default", + label, + errorMessage, + icon, + disabled, + className, + ...props +}: InputFieldProps) { + return ( +
+ {label && } +
+ {icon && {icon}} + +
+ {variant === "error" && errorMessage && ( + {errorMessage} + )} +
+ ); +} diff --git a/js/react/lib/components/input/input.types.ts b/js/react/lib/components/input/input.types.ts new file mode 100644 index 0000000..0d74ff9 --- /dev/null +++ b/js/react/lib/components/input/input.types.ts @@ -0,0 +1,9 @@ +import { InputHTMLAttributes, ReactNode } from "react"; +import { INPUT_VARIANTS } from "./input.const"; + +export interface InputFieldProps extends InputHTMLAttributes { + variant?: keyof typeof INPUT_VARIANTS; + label?: string; + errorMessage?: string; + icon?: ReactNode; +} \ No newline at end of file diff --git a/js/react/lib/index.ts b/js/react/lib/index.ts index 6f31147..7ecfde7 100644 --- a/js/react/lib/index.ts +++ b/js/react/lib/index.ts @@ -4,6 +4,7 @@ export * from "./components/contact-form"; export * from "./components/chip"; export * from "./components/tag"; export * from "./components/flap"; +export { default as Input } from "./components/input"; export * from "./components/level"; export * from "./components/avatar"; export * from "./components/collaborators"; diff --git a/js/react/showcase/App.tsx b/js/react/showcase/App.tsx index 033ff89..0fac72b 100644 --- a/js/react/showcase/App.tsx +++ b/js/react/showcase/App.tsx @@ -5,6 +5,8 @@ import { Github, Tag, Telegram, + Input, + Location, Flap, Chip, Level, @@ -480,6 +482,94 @@ export function App() { + +
+
+ +
+ + } + className="w-full" + /> +
+
+ +
+ +
+ + } + className="w-full" + /> +
+
+ +
+ +
+ + } + className="w-full" + /> +
+
+ +
+ +
+ + } + className="w-full" + /> +
+
+ +
+ +
+ + } + errorMessage="Mensaje de error" + className="w-full" + /> +
+
+
+ ); } From 393aa0984f0f158499e38e7ce061299611485fe6 Mon Sep 17 00:00:00 2001 From: Brayan-724 Date: Wed, 2 Jul 2025 14:48:22 -0700 Subject: [PATCH 2/7] fix(react/input): Export named component instead of default --- js/react/lib/components/input/index.ts | 4 ++-- js/react/lib/components/input/input.tsx | 2 +- js/react/lib/index.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/js/react/lib/components/input/index.ts b/js/react/lib/components/input/index.ts index 8894454..727bd58 100644 --- a/js/react/lib/components/input/index.ts +++ b/js/react/lib/components/input/index.ts @@ -1,2 +1,2 @@ -export { default } from "./input"; -export * from './input.types'; \ No newline at end of file +export * from "./input"; +export * from './input.types'; diff --git a/js/react/lib/components/input/input.tsx b/js/react/lib/components/input/input.tsx index 1284070..ffe6b57 100644 --- a/js/react/lib/components/input/input.tsx +++ b/js/react/lib/components/input/input.tsx @@ -2,7 +2,7 @@ import { INPUT_VARIANTS, ERROR_TEXT_CLASSES } from "./input.const"; import { InputFieldProps } from "./input.types"; import clsx from "clsx"; -export default function InputField({ +export function Input({ variant = "default", label, errorMessage, diff --git a/js/react/lib/index.ts b/js/react/lib/index.ts index 23f54c9..6f9ff49 100644 --- a/js/react/lib/index.ts +++ b/js/react/lib/index.ts @@ -5,7 +5,7 @@ export * from "./components/contact-form"; export * from "./components/chip"; export * from "./components/tag"; export * from "./components/flap"; -export { default as Input } from "./components/input"; +export * from "./components/input"; export * from "./components/level"; export * from "./components/avatar"; export * from "./components/collaborators"; From e743f05d76017db0016b0b3db0c2154bc4d9f860 Mon Sep 17 00:00:00 2001 From: Brayan-724 Date: Wed, 2 Jul 2025 14:53:43 -0700 Subject: [PATCH 3/7] fix(react/input): Remove label prop --- js/react/lib/components/input/input.tsx | 2 -- js/react/lib/components/input/input.types.ts | 3 +-- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/js/react/lib/components/input/input.tsx b/js/react/lib/components/input/input.tsx index ffe6b57..6ce5361 100644 --- a/js/react/lib/components/input/input.tsx +++ b/js/react/lib/components/input/input.tsx @@ -4,7 +4,6 @@ import clsx from "clsx"; export function Input({ variant = "default", - label, errorMessage, icon, disabled, @@ -13,7 +12,6 @@ export function Input({ }: InputFieldProps) { return (
- {label && }
{ variant?: keyof typeof INPUT_VARIANTS; - label?: string; errorMessage?: string; icon?: ReactNode; -} \ No newline at end of file +} From 6891db34e73541e6753304206626e5b2b6b47886 Mon Sep 17 00:00:00 2001 From: Brayan-724 Date: Wed, 2 Jul 2025 17:21:20 -0700 Subject: [PATCH 4/7] fix(react/input): Use prop definitions --- js/react/lib/components/input/input.tsx | 10 +- js/react/lib/components/input/input.types.ts | 1 + js/react/showcase/App.tsx | 103 +++---------------- 3 files changed, 22 insertions(+), 92 deletions(-) diff --git a/js/react/lib/components/input/input.tsx b/js/react/lib/components/input/input.tsx index 6ce5361..440095f 100644 --- a/js/react/lib/components/input/input.tsx +++ b/js/react/lib/components/input/input.tsx @@ -3,8 +3,8 @@ import { InputFieldProps } from "./input.types"; import clsx from "clsx"; export function Input({ - variant = "default", errorMessage, + hasError = !!errorMessage, icon, disabled, className, @@ -15,21 +15,21 @@ export function Input({
{icon && {icon}}
- {variant === "error" && errorMessage && ( + {hasError && errorMessage && ( {errorMessage} )}
diff --git a/js/react/lib/components/input/input.types.ts b/js/react/lib/components/input/input.types.ts index 022a92c..f4706ae 100644 --- a/js/react/lib/components/input/input.types.ts +++ b/js/react/lib/components/input/input.types.ts @@ -3,6 +3,7 @@ import { INPUT_VARIANTS } from "./input.const"; export interface InputFieldProps extends InputHTMLAttributes { variant?: keyof typeof INPUT_VARIANTS; + hasError?: boolean; errorMessage?: string; icon?: ReactNode; } diff --git a/js/react/showcase/App.tsx b/js/react/showcase/App.tsx index fba9352..ab54526 100644 --- a/js/react/showcase/App.tsx +++ b/js/react/showcase/App.tsx @@ -526,93 +526,22 @@ export function App() {
- -
-
- -
- - } - className="w-full" - /> -
-
- -
- -
- - } - className="w-full" - /> -
-
- -
- -
- - } - className="w-full" - /> -
-
- -
- -
- - } - className="w-full" - /> -
-
- -
- -
- - } - errorMessage="Mensaje de error" - className="w-full" - /> -
-
-
+ + + } placeholder="Input" />
From 409e53f5b719026823675aa93a859f525a350f78 Mon Sep 17 00:00:00 2001 From: Brayan-724 Date: Wed, 2 Jul 2025 20:08:42 -0700 Subject: [PATCH 5/7] refactor(react/input): Migrate styles to @rustlanges/styles --- js/react/lib/components/input/input.const.ts | 9 ----- js/react/lib/components/input/input.tsx | 20 ++++------ js/react/lib/components/input/input.types.ts | 2 - styles/components.css | 1 + styles/components/input.css | 39 ++++++++++++++++++++ 5 files changed, 48 insertions(+), 23 deletions(-) delete mode 100644 js/react/lib/components/input/input.const.ts create mode 100644 styles/components/input.css diff --git a/js/react/lib/components/input/input.const.ts b/js/react/lib/components/input/input.const.ts deleted file mode 100644 index da81ec5..0000000 --- a/js/react/lib/components/input/input.const.ts +++ /dev/null @@ -1,9 +0,0 @@ -export const INPUT_VARIANTS = { - default: "bg-white border border-black text-black placeholder:text-neutral-500", - hover: "bg-neutral-100 border border-black text-black placeholder:text-neutral-500", - active: "bg-white border border-orange-500 ring-1 ring-orange-500 text-black placeholder:text-neutral-500", - inactive: "bg-neutral-100 border border-neutral-300 text-neutral-400 placeholder:text-neutral-400 cursor-not-allowed", - error: "bg-white border border-red-600 text-black placeholder:text-neutral-500", -}; - -export const ERROR_TEXT_CLASSES = "text-sm text-red-600 mt-1"; \ No newline at end of file diff --git a/js/react/lib/components/input/input.tsx b/js/react/lib/components/input/input.tsx index 440095f..ad691f9 100644 --- a/js/react/lib/components/input/input.tsx +++ b/js/react/lib/components/input/input.tsx @@ -1,6 +1,5 @@ -import { INPUT_VARIANTS, ERROR_TEXT_CLASSES } from "./input.const"; -import { InputFieldProps } from "./input.types"; import clsx from "clsx"; +import { InputFieldProps } from "./input.types"; export function Input({ errorMessage, @@ -11,26 +10,23 @@ export function Input({ ...props }: InputFieldProps) { return ( -
+
- {icon && {icon}} + {icon && {icon}}
{hasError && errorMessage && ( - {errorMessage} + {errorMessage} )}
); diff --git a/js/react/lib/components/input/input.types.ts b/js/react/lib/components/input/input.types.ts index f4706ae..a747e26 100644 --- a/js/react/lib/components/input/input.types.ts +++ b/js/react/lib/components/input/input.types.ts @@ -1,8 +1,6 @@ import { InputHTMLAttributes, ReactNode } from "react"; -import { INPUT_VARIANTS } from "./input.const"; export interface InputFieldProps extends InputHTMLAttributes { - variant?: keyof typeof INPUT_VARIANTS; hasError?: boolean; errorMessage?: string; icon?: ReactNode; diff --git a/styles/components.css b/styles/components.css index e860ef1..819c81c 100644 --- a/styles/components.css +++ b/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"; diff --git a/styles/components/input.css b/styles/components/input.css new file mode 100644 index 0000000..a4dea07 --- /dev/null +++ b/styles/components/input.css @@ -0,0 +1,39 @@ +@layer components { + .rustlanges-input { + @apply flex items-center gap-2 px-4 py-2 rounded-xl transition-colors; + @apply bg-white border border-black text-black placeholder:text-neutral-500; + + @variant hover { + @apply bg-white border border-black text-black placeholder:text-neutral-500; + } + + &:has(> :active), &:has(> :focus) { + @apply bg-white border border-orange-500 ring-1 ring-orange-500 text-black placeholder:text-neutral-500; + } + + @variant has-disabled { + @apply bg-neutral-100 border border-neutral-300 text-neutral-400 placeholder:text-neutral-400 cursor-not-allowed; + } + } + + .rustlanges-input--error { + @apply bg-white border border-red-600 text-black placeholder:text-neutral-500; + } + + .rustlanges-input__container { + @apply flex flex-col gap-1; + } + + .rustlanges-input__error { + @apply text-sm text-red-600 mt-1; + } + + .rustlanges-input__inner { + @apply w-full outline-none bg-transparent placeholder:text-inherit; + @apply disabled:text-neutral-400; + } + + .rustlanges-input__icon { + @apply text-neutral-500; + } +} From 53dba75294dc88f06fb6b762423fef35213f2464 Mon Sep 17 00:00:00 2001 From: Brayan-724 Date: Wed, 2 Jul 2025 21:02:04 -0700 Subject: [PATCH 6/7] fix(styles/input): Match styles to Figma design --- js/react/showcase/App.tsx | 4 ++++ styles/components/input.css | 29 ++++++++++++++++------------- 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/js/react/showcase/App.tsx b/js/react/showcase/App.tsx index ab54526..f58a1a0 100644 --- a/js/react/showcase/App.tsx +++ b/js/react/showcase/App.tsx @@ -527,6 +527,10 @@ export function App() {
:active), &:has(> :focus) { - @apply bg-white border border-orange-500 ring-1 ring-orange-500 text-black placeholder:text-neutral-500; + @apply border-primary-500; } @variant has-disabled { - @apply bg-neutral-100 border border-neutral-300 text-neutral-400 placeholder:text-neutral-400 cursor-not-allowed; + @apply bg-neutral-100 border-neutral-400 text-neutral-600 cursor-not-allowed; + @apply dark:bg-neutral-900 dark:text-neutral-400; } } .rustlanges-input--error { - @apply bg-white border border-red-600 text-black placeholder:text-neutral-500; + @apply border-error-600; } .rustlanges-input__container { @@ -25,15 +23,20 @@ } .rustlanges-input__error { - @apply text-sm text-red-600 mt-1; + @apply text-sm text-error-800 mt-1 dark:text-error-300; } .rustlanges-input__inner { - @apply w-full outline-none bg-transparent placeholder:text-inherit; - @apply disabled:text-neutral-400; + @apply w-full outline-none bg-transparent; + @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-500; + @apply text-neutral-600; + + &:has(+ :disabled) { + @apply text-neutral-400; + } } } From b8bcac8630fc1e77e17516b1d9cbef1a5db645c7 Mon Sep 17 00:00:00 2001 From: Brayan-724 Date: Wed, 2 Jul 2025 21:02:20 -0700 Subject: [PATCH 7/7] styles: `pnpm fmt` --- js/react/lib/components/input/index.ts | 2 +- js/react/lib/components/input/input.tsx | 2 +- js/react/showcase/App.tsx | 40 ++++++++++++++----------- styles/components/input-search.css | 4 +-- styles/components/input.css | 11 +++---- 5 files changed, 31 insertions(+), 28 deletions(-) diff --git a/js/react/lib/components/input/index.ts b/js/react/lib/components/input/index.ts index 727bd58..f144060 100644 --- a/js/react/lib/components/input/index.ts +++ b/js/react/lib/components/input/index.ts @@ -1,2 +1,2 @@ export * from "./input"; -export * from './input.types'; +export * from "./input.types"; diff --git a/js/react/lib/components/input/input.tsx b/js/react/lib/components/input/input.tsx index ad691f9..2a701d4 100644 --- a/js/react/lib/components/input/input.tsx +++ b/js/react/lib/components/input/input.tsx @@ -15,7 +15,7 @@ export function Input({ className={clsx( "rustlanges-input", hasError && "rustlanges-input--error", - className, + className )} > {icon && {icon}} diff --git a/js/react/showcase/App.tsx b/js/react/showcase/App.tsx index f58a1a0..973d45e 100644 --- a/js/react/showcase/App.tsx +++ b/js/react/showcase/App.tsx @@ -526,24 +526,28 @@ export function App() {
- + } placeholder="Input" /> diff --git a/styles/components/input-search.css b/styles/components/input-search.css index 653d563..4c1fc89 100644 --- a/styles/components/input-search.css +++ b/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; } diff --git a/styles/components/input.css b/styles/components/input.css index 3b9d57d..ec68e56 100644 --- a/styles/components/input.css +++ b/styles/components/input.css @@ -1,15 +1,16 @@ @layer components { .rustlanges-input { - @apply flex items-center gap-2 px-[10px] py-3 rounded-xl transition-colors; + @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) { + &:has(> :active), + &:has(> :focus) { @apply border-primary-500; } @variant has-disabled { - @apply bg-neutral-100 border-neutral-400 text-neutral-600 cursor-not-allowed; + @apply cursor-not-allowed border-neutral-400 bg-neutral-100 text-neutral-600; @apply dark:bg-neutral-900 dark:text-neutral-400; } } @@ -23,11 +24,11 @@ } .rustlanges-input__error { - @apply text-sm text-error-800 mt-1 dark:text-error-300; + @apply text-error-800 dark:text-error-300 mt-1 text-sm; } .rustlanges-input__inner { - @apply w-full outline-none bg-transparent; + @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; }