From e9e521969364a0fcc122c5a212ae00a9921073de Mon Sep 17 00:00:00 2001 From: Franco Pertusati Date: Sun, 29 Jun 2025 23:10:26 -0300 Subject: [PATCH 1/9] Implementacion de cardComponent --- .../lib/components/card/card.component.tsx | 25 +++++++++++++++++++ js/react/lib/components/card/card.const.ts | 14 +++++++++++ js/react/lib/components/card/card.types.ts | 8 ++++++ js/react/lib/components/card/index.ts | 1 + js/react/lib/index.ts | 1 + js/react/showcase/App.tsx | 14 +++++++++++ 6 files changed, 63 insertions(+) create mode 100644 js/react/lib/components/card/card.component.tsx create mode 100644 js/react/lib/components/card/card.const.ts create mode 100644 js/react/lib/components/card/card.types.ts create mode 100644 js/react/lib/components/card/index.ts diff --git a/js/react/lib/components/card/card.component.tsx b/js/react/lib/components/card/card.component.tsx new file mode 100644 index 0000000..f719142 --- /dev/null +++ b/js/react/lib/components/card/card.component.tsx @@ -0,0 +1,25 @@ +import { withAs } from "@/utils/hoc"; +import { cn } from "@/utils/tw-merge"; +import { CARD_GROUP_VARIANTS } from "./card.const"; + +export type CardProps = { + clickable?: boolean; + className?: string; + disabled?: boolean; +}; + +export const Card = withAs((Component, props: CardProps) => { + const { clickable = false, disabled = false, className, ...attr } = props; + + return ( + + ); +}, "div"); diff --git a/js/react/lib/components/card/card.const.ts b/js/react/lib/components/card/card.const.ts new file mode 100644 index 0000000..190e90b --- /dev/null +++ b/js/react/lib/components/card/card.const.ts @@ -0,0 +1,14 @@ +export const CARD_GROUP_VARIANTS = { + default: [ + "min-w-96 min-h-96", + "border-1 shadow-brutal rounded-lg border-black p-4 bg-light", + "hover:shadow-rb-violet-700 hover:border-violet-700", + "disabled:bg-neutral-100 disabled:shadow-none disabled:border-neutral-400 disabled:text-neutral-400", + "active:shadow-none", + + "dark:active:shadow-none", + "hover:dark:border-primary-600 hover:dark:shadow-rb-primary-600", + "dark:bg-neutral-800", + "dark:disabled:shadow-none dar:disabled:border-neutral-100" + ], +}; diff --git a/js/react/lib/components/card/card.types.ts b/js/react/lib/components/card/card.types.ts new file mode 100644 index 0000000..42b666c --- /dev/null +++ b/js/react/lib/components/card/card.types.ts @@ -0,0 +1,8 @@ +import { CARD_GROUP_VARIANTS } from "./card.const"; + +export interface CardGroupProps { + variant?: keyof typeof CARD_GROUP_VARIANTS; + disabled?: boolean; + children: React.ReactNode; + className?: string; +} diff --git a/js/react/lib/components/card/index.ts b/js/react/lib/components/card/index.ts new file mode 100644 index 0000000..9215614 --- /dev/null +++ b/js/react/lib/components/card/index.ts @@ -0,0 +1 @@ +export * from "./card.component"; \ No newline at end of file diff --git a/js/react/lib/index.ts b/js/react/lib/index.ts index 529383a..b6791e9 100644 --- a/js/react/lib/index.ts +++ b/js/react/lib/index.ts @@ -1,5 +1,6 @@ export * from "./components/Example"; export * from "./components/button"; +export * from "./components/card"; export * from "./components/chip"; export * from "./components/tag"; export * from "./components/flap"; diff --git a/js/react/showcase/App.tsx b/js/react/showcase/App.tsx index d26dff1..daa2fc1 100644 --- a/js/react/showcase/App.tsx +++ b/js/react/showcase/App.tsx @@ -11,6 +11,7 @@ import { Radio, Badge, DropdownState, + Card } from "@rustlanges/react"; import { ShowComponent } from "./ShowComponent"; @@ -258,6 +259,19 @@ export function App() { }, }} /> + ); } From 9e5aaafb1840d46a53b4bf8ec9374bd77bcf91b6 Mon Sep 17 00:00:00 2001 From: Brayan-724 Date: Tue, 1 Jul 2025 14:46:56 -0700 Subject: [PATCH 2/9] fix(react/showcase): syntax error --- js/react/showcase/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/react/showcase/App.tsx b/js/react/showcase/App.tsx index 63eca02..d6bc5b9 100644 --- a/js/react/showcase/App.tsx +++ b/js/react/showcase/App.tsx @@ -12,7 +12,7 @@ import { Radio, Badge, DropdownState, - Card + Card, Calendar, CalendarRangeDate, DropdownTree, From 2d04f971b53f10f8c83681bf5e07995b97e4b01c Mon Sep 17 00:00:00 2001 From: Brayan-724 Date: Tue, 1 Jul 2025 14:52:11 -0700 Subject: [PATCH 3/9] fix(react/card): clickable styles over clickable card --- js/react/lib/components/card/card.component.tsx | 5 ++--- js/react/lib/components/card/card.const.ts | 13 +++++++++---- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/js/react/lib/components/card/card.component.tsx b/js/react/lib/components/card/card.component.tsx index f719142..abcd1a3 100644 --- a/js/react/lib/components/card/card.component.tsx +++ b/js/react/lib/components/card/card.component.tsx @@ -9,14 +9,13 @@ export type CardProps = { }; export const Card = withAs((Component, props: CardProps) => { - const { clickable = false, disabled = false, className, ...attr } = props; + const { clickable = false, className, ...attr } = props; return ( Date: Tue, 1 Jul 2025 15:22:09 -0700 Subject: [PATCH 4/9] remove unused file --- js/react/lib/components/card/card.types.ts | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 js/react/lib/components/card/card.types.ts diff --git a/js/react/lib/components/card/card.types.ts b/js/react/lib/components/card/card.types.ts deleted file mode 100644 index 42b666c..0000000 --- a/js/react/lib/components/card/card.types.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { CARD_GROUP_VARIANTS } from "./card.const"; - -export interface CardGroupProps { - variant?: keyof typeof CARD_GROUP_VARIANTS; - disabled?: boolean; - children: React.ReactNode; - className?: string; -} From 2ec61a7968c630b3b513cb26d00b85cc7f10ca32 Mon Sep 17 00:00:00 2001 From: Brayan-724 Date: Tue, 1 Jul 2025 15:27:22 -0700 Subject: [PATCH 5/9] refactor(react/card): split styles into `@rustlanges/styles` --- .../lib/components/card/card.component.tsx | 11 +++++------ js/react/lib/components/card/card.const.ts | 19 ------------------- styles/components.css | 1 + styles/components/card.css | 17 +++++++++++++++++ 4 files changed, 23 insertions(+), 25 deletions(-) delete mode 100644 js/react/lib/components/card/card.const.ts create mode 100644 styles/components/card.css diff --git a/js/react/lib/components/card/card.component.tsx b/js/react/lib/components/card/card.component.tsx index abcd1a3..6bf7d55 100644 --- a/js/react/lib/components/card/card.component.tsx +++ b/js/react/lib/components/card/card.component.tsx @@ -1,11 +1,10 @@ +import { PropsWithChildren } from "react"; import { withAs } from "@/utils/hoc"; import { cn } from "@/utils/tw-merge"; -import { CARD_GROUP_VARIANTS } from "./card.const"; -export type CardProps = { +export type CardProps = PropsWithChildren & { clickable?: boolean; className?: string; - disabled?: boolean; }; export const Card = withAs((Component, props: CardProps) => { @@ -14,11 +13,11 @@ export const Card = withAs((Component, props: CardProps) => { return ( + /> ); }, "div"); diff --git a/js/react/lib/components/card/card.const.ts b/js/react/lib/components/card/card.const.ts deleted file mode 100644 index 605d28e..0000000 --- a/js/react/lib/components/card/card.const.ts +++ /dev/null @@ -1,19 +0,0 @@ -export const CARD_GROUP_VARIANTS = { - default: [ - "min-w-96 min-h-96", - "border-1 shadow-brutal rounded-lg border-black p-4 bg-light", - - "dark:bg-neutral-800", - ], - clickable: [ - "cursor-pointer disabled:pointer-events-none", - - "active:shadow-none", - "hover:shadow-rb-violet-700 hover:border-violet-700", - "disabled:bg-neutral-100 disabled:shadow-none disabled:border-neutral-400 disabled:text-neutral-400", - - "dark:active:shadow-none", - "hover:dark:border-primary-600 hover:dark:shadow-rb-primary-600", - "dark:disabled:shadow-none dark:disabled:border-neutral-100" - ] -}; diff --git a/styles/components.css b/styles/components.css index 8f27202..d553c9e 100644 --- a/styles/components.css +++ b/styles/components.css @@ -1,6 +1,7 @@ @import "./components/avatar.css"; @import "./components/badge.css"; @import "./components/button.css"; +@import "./components/card.css"; @import "./components/chip.css"; @import "./components/collaborators.css"; @import "./components/dropdown.css"; diff --git a/styles/components/card.css b/styles/components/card.css new file mode 100644 index 0000000..25f750c --- /dev/null +++ b/styles/components/card.css @@ -0,0 +1,17 @@ +@layer components { + .rustlanges-card { + @apply border-1 shadow-brutal rounded-lg border-black p-4 bg-light; + @apply dark:bg-neutral-800; + } + + .rustlanges-card--clickable { + @apply cursor-pointer disabled:pointer-events-none; + + @apply active:shadow-none; + @apply hover:shadow-rb-violet-700 hover:border-violet-700; + @apply disabled:bg-neutral-100 disabled:shadow-none disabled:border-neutral-400 disabled:text-neutral-400; + + @apply hover:dark:border-primary-600 hover:dark:shadow-rb-primary-600; + @apply dark:disabled:shadow-none dark:disabled:border-neutral-10; + } +} From 06fe3cff88610671d956cdde088abc7cd19e9ed4 Mon Sep 17 00:00:00 2001 From: Brayan-724 Date: Tue, 1 Jul 2025 15:28:17 -0700 Subject: [PATCH 6/9] styles: `pnpm fmt` --- js/react/lib/components/card/index.ts | 2 +- styles/components/card.css | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/js/react/lib/components/card/index.ts b/js/react/lib/components/card/index.ts index 9215614..8151bac 100644 --- a/js/react/lib/components/card/index.ts +++ b/js/react/lib/components/card/index.ts @@ -1 +1 @@ -export * from "./card.component"; \ No newline at end of file +export * from "./card.component"; diff --git a/styles/components/card.css b/styles/components/card.css index 25f750c..3aff3fc 100644 --- a/styles/components/card.css +++ b/styles/components/card.css @@ -1,6 +1,6 @@ @layer components { .rustlanges-card { - @apply border-1 shadow-brutal rounded-lg border-black p-4 bg-light; + @apply border-1 shadow-brutal bg-light rounded-lg border-black p-4; @apply dark:bg-neutral-800; } @@ -9,9 +9,9 @@ @apply active:shadow-none; @apply hover:shadow-rb-violet-700 hover:border-violet-700; - @apply disabled:bg-neutral-100 disabled:shadow-none disabled:border-neutral-400 disabled:text-neutral-400; + @apply disabled:border-neutral-400 disabled:bg-neutral-100 disabled:text-neutral-400 disabled:shadow-none; @apply hover:dark:border-primary-600 hover:dark:shadow-rb-primary-600; - @apply dark:disabled:shadow-none dark:disabled:border-neutral-10; + @apply dark:disabled:border-neutral-10 dark:disabled:shadow-none; } } From 0951da868a5f3c1fcbb818f05d764de84350346b Mon Sep 17 00:00:00 2001 From: Brayan-724 Date: Tue, 1 Jul 2025 17:48:28 -0700 Subject: [PATCH 7/9] fix(react/card): match styles to figma design --- .../lib/components/card/card.component.tsx | 4 +++- js/react/showcase/App.tsx | 5 +++++ styles/components/card.css | 20 ++++++++++++------- 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/js/react/lib/components/card/card.component.tsx b/js/react/lib/components/card/card.component.tsx index 6bf7d55..cf69ac4 100644 --- a/js/react/lib/components/card/card.component.tsx +++ b/js/react/lib/components/card/card.component.tsx @@ -4,17 +4,19 @@ import { cn } from "@/utils/tw-merge"; export type CardProps = PropsWithChildren & { clickable?: boolean; + disabled?: boolean; className?: string; }; export const Card = withAs((Component, props: CardProps) => { - const { clickable = false, className, ...attr } = props; + const { clickable = false, disabled = false, className, ...attr } = props; return ( Date: Tue, 1 Jul 2025 17:53:31 -0700 Subject: [PATCH 8/9] feat(react/showcase): Add onClick callback to card --- js/react/showcase/App.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/js/react/showcase/App.tsx b/js/react/showcase/App.tsx index 83ccd84..e290243 100644 --- a/js/react/showcase/App.tsx +++ b/js/react/showcase/App.tsx @@ -385,6 +385,9 @@ export function App() { type: "string", default: "min-w-50 min-h-50" }, + onClick: { + type: "callback", + }, }} component={Card} /> From b5abd35cf17bf52bcd405117a4ab4972e1eb228e Mon Sep 17 00:00:00 2001 From: Brayan-724 Date: Tue, 1 Jul 2025 17:55:19 -0700 Subject: [PATCH 9/9] styles: `pnpm fmt` --- js/react/showcase/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/react/showcase/App.tsx b/js/react/showcase/App.tsx index e290243..f97b7c7 100644 --- a/js/react/showcase/App.tsx +++ b/js/react/showcase/App.tsx @@ -383,7 +383,7 @@ export function App() { }, className: { type: "string", - default: "min-w-50 min-h-50" + default: "min-w-50 min-h-50", }, onClick: { type: "callback",