Skip to content

Commit 807c010

Browse files
Brayan-724Brayan-724
authored
feat: Create centralized way to style with tailwindcss (#43)
2 parents 4361e26 + 63d7a67 commit 807c010

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+838
-505
lines changed

‎js/react/lib/components/avatar/avatar.component.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,14 @@ export const Avatar = withAs(
1717
return (
1818
<Component
1919
{...rest}
20-
className={cn([
21-
"grid aspect-square place-items-center overflow-hidden rounded-full border object-cover",
22-
className,
23-
])}
20+
className={cn(["rustlanges-avatar", className])}
2421
style={{
2522
width: size,
2623
height: size,
2724
...style,
2825
}}
2926
>
30-
<img
31-
className="aspect-square h-full w-full"
32-
src={avatarUrl}
33-
alt={alt}
34-
/>
27+
<img className="rustlanges-avatar__img" src={avatarUrl} alt={alt} />
3528
</Component>
3629
);
3730
}

‎js/react/lib/components/badge/badge.component.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,12 @@ export const Badge = withAs(
2020
<Component
2121
{...rest}
2222
className={cn([
23-
"text-paragraph-2 flex w-fit items-center gap-1 rounded-full border-[0.8px] border-black px-2",
23+
"text-paragraph-2 rustlanges-badge",
2424
BADGE_VARIANTS[variant],
2525
BADGE_TYPE[type],
26-
"desktop:text-[12px] text-[10px]",
2726
])}
2827
>
29-
<div className="size-1 rounded-full" />
28+
<div className="rustlanges-badge__dot" />
3029
<span>{displayValue()}</span>
3130
</Component>
3231
);

‎js/react/lib/components/badge/badge.const.ts‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,13 @@
11
export const BADGE_VARIANTS = {
2-
completed: [
3-
"bg-success-100 text-success-600 [&>div]:bg-success-600",
4-
"dark:bg-success-950 dark:text-success-400 [&>div]:bg-success-600",
5-
],
6-
reading: [
7-
"bg-warning-100 text-warning-500 [&>div]:bg-warning-500",
8-
"dark:bg-warning-950 dark:text-warning-300 [&>div]:bg-warning-300",
9-
],
10-
pending: [
11-
"bg-error-100 text-error-600 [&>div]:bg-error-600",
12-
"dark:bg-error-950 dark:text-error-300 [&>div]:bg-error-300",
13-
],
14-
unread: [
15-
"bg-neutral-100 text-neutral-500 [&>div]:bg-neutral-500",
16-
"dark:bg-neutral-950 dark:text-neutral-300 [&>div]:bg-neutral-300",
17-
],
2+
completed: "rustlanges-badge--variant-completed",
3+
reading: "rustlanges-badge--variant-reading",
4+
pending: "rustlanges-badge--variant-pending",
5+
unread: "rustlanges-badge--variant-unread",
186
};
197

208
export const BADGE_TYPE = {
21-
default: "[&>span]:hidden size-4 px-0! justify-center",
22-
numeric: "flex-row-reverse ",
9+
default: "rustlanges-badge--type-default",
10+
numeric: "rustlanges-badge--type-numeric",
2311
text: undefined,
2412
};
2513

‎js/react/lib/components/button/button.component.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,8 @@ export const Button = withAs((Component, props: ButtonProps) => {
1616
return (
1717
<Component
1818
className={cn(
19-
...variants[variant],
20-
"text-button flex h-12 w-fit cursor-pointer items-center justify-center gap-2.5 px-8 transition disabled:cursor-not-allowed",
21-
"[&>svg]:size-6",
19+
variants[variant],
20+
"text-button rustlanges-button",
2221
className
2322
)}
2423
{...attr}

‎js/react/lib/components/button/button.const.ts‎

Lines changed: 4 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,8 @@
11
export const variants = {
2-
primary: [
3-
"border rounded-2xl",
4-
"bg-primary-500 border-black text-black shadow-rb-black",
5-
"dark:bg-primary-300",
6-
"hover:bg-primary-600 dark:hover:bg-primary-400 active:shadow-none",
7-
"disabled:bg-neutral-100 disabled:shadow-none disabled:border-neutral-400 disabled:text-neutral-400",
8-
"dark:disabled:bg-neutral-950",
9-
],
10-
secondary: [
11-
"border rounded-2xl",
12-
"bg-light text-neutral-950 border-neutral-950 shadow-rb-neutral-950",
13-
"dark:bg-dark dark:text-light dark:border-light dark:shadow-rb-neutral-50",
14-
"hover:shadow-rb-primary-500 hover:border-primary-500 hover:text-primary-500",
15-
"disabled:bg-neutral-100 disabled:text-neutral-400 disabled:border-neutral-400! disabled:shadow-none",
16-
"dark:disabled:bg-neutral-950",
17-
"active:shadow-none",
18-
],
19-
text: [
20-
"text-neutral-950 hover:text-primary-600",
21-
"dark:text-light dark:hover:text-primary-300",
22-
],
23-
icon: [
24-
"rounded-full border aspect-square p-2! !h-fit",
25-
"bg-light border-black text-black",
26-
"dark:bg-dark dark:border-light dark:text-light",
27-
"hover:text-primary-500 hover:border-primary-500",
28-
],
2+
primary: "rustlanges-button--primary",
3+
secondary: "rustlanges-button--secondary",
4+
text: "rustlanges-button--text",
5+
icon: "rustlanges-button--icon",
296
};
307

318
export type ButtonVariants = keyof typeof variants;

‎js/react/lib/components/chip/chip.component.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,7 @@ export const Chip = (props: ChipProps) => {
1212
const { label, variant = "featured", className, ...attr } = props;
1313
return (
1414
<div
15-
className={cn(
16-
...variants[variant],
17-
"flex w-fit cursor-default items-center justify-center gap-1 transition",
18-
"[&>svg]:size-3.5",
19-
className
20-
)}
15+
className={cn(variants[variant], "rustlanges-chip", className)}
2116
{...attr}
2217
>
2318
{icons[variant] ? React.createElement(icons[variant]) : null}

‎js/react/lib/components/chip/chip.const.ts‎

Lines changed: 5 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,11 @@
11
import { Location, StarBold } from "@/icons";
22

33
export const variants = {
4-
featured: [
5-
"border rounded-[20px]",
6-
"bg-primary-400 border-black text-black",
7-
"min-h-[32px]",
8-
"text-sm",
9-
"p-[4px] px-[12px]",
10-
],
11-
numeric: [
12-
"border rounded-[20px]",
13-
"bg-primary-200 border-black text-black",
14-
"min-h-[32px]",
15-
"text-sm",
16-
"p-[4px] px-[12px]",
17-
],
18-
description: [
19-
"border rounded-[20px]",
20-
"bg-secondary-200 border-black text-black",
21-
"min-h-[32px]",
22-
"text-sm",
23-
"p-[4px] px-[12px]",
24-
],
25-
location: [
26-
"border rounded-[20px]",
27-
"bg-secondary-200 border-black text-black",
28-
"min-h-[24px]",
29-
"text-sm",
30-
"p-[2px] px-[12px]",
31-
],
32-
small: [
33-
"border rounded-[20px]",
34-
"bg-secondary-200 border-black text-black",
35-
"min-h-[22px]",
36-
"text-xs",
37-
"p-[2px] px-[8px]",
38-
],
4+
featured: "rustlanges-chip--featured",
5+
numeric: "rustlanges-chip--numeric",
6+
description: "rustlanges-chip--description",
7+
location: "rustlanges-chip--location",
8+
small: "rustlanges-chip--small",
399
};
4010

4111
export type ChipVariants = keyof typeof variants;

‎js/react/lib/components/collaborators/collaborators.component.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ export const Collaborators = ({
2424
const hasMaxCollaborators = numberOfCollaborators > MAX_COLLABORATORS;
2525
const extraCollaborators = numberOfCollaborators - MAX_COLLABORATORS;
2626
return (
27-
<div className="flex h-12 w-full items-center justify-between">
28-
<div className="flex w-fit items-center">
27+
<div className="rustlanges-collaborators">
28+
<div className="rustlanges-collaborators__avatars">
2929
{collaborators.slice(0, MAX_COLLABORATORS).map((collaborator, idx) => {
3030
const space = idx ? 12 : 0;
3131
return (

‎js/react/lib/components/dropdown/dropdown.component.tsx‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -23,37 +23,32 @@ export const DropdownState = ({ value, onChange }: DropdownStateProps) => {
2323
const Icon = open ? ArrowUp : ArrowDown;
2424

2525
return (
26-
<div className="relative grid w-fit">
26+
<div className="rustlanges-dropdown">
2727
<button
2828
onClick={handleOpen}
2929
className={cn([
30-
"shadow-rb-black text-paragraph-2 flex h-6 items-center gap-1 overflow-hidden rounded-sm border border-black",
30+
"text-paragraph-2 rustlanges-dropdown__view",
3131
DROPDOWN_STATUS_VARIANTS[value],
32-
"text-[12px]",
3332
])}
3433
>
35-
<div className="ml-2 size-1 rounded-full" />
34+
<div className="rustlanges-dropdown__view-dot" />
3635
<span className="mr-2">{BADGE_TEXT[value]}</span>
37-
<Icon
38-
className={cn([
39-
"size-6 rounded-r-sm border-l border-l-black",
40-
"bg-white text-black",
41-
"dark:bg-dark dark:text-neutral-50",
42-
])}
43-
/>
36+
<Icon className={cn(["rustlanges-dropdown__view-icon"])} />
4437
</button>
4538
<div
4639
className={cn([
47-
"absolute left-0 top-full mt-2 w-full transition duration-200",
48-
open ? "visible opacity-100" : "invisible opacity-0",
40+
"rustlanges-dropdown__content",
41+
open
42+
? "rustlanges-dropdown__content--open"
43+
: "rustlanges-dropdown__content--closed",
4944
])}
5045
>
5146
{open && (
52-
<ul className="options shadow-rb-black dark:bg-dark grid gap-1.5 rounded-sm border border-black bg-white px-2 py-1.5 transition">
47+
<ul className="rustlanges-dropdown__list">
5348
{DROPDOWN_OPTIONS.map(opt => (
5449
<li
5550
key={opt.value}
56-
className="option cursor-pointer"
51+
className="rustlanges-dropdown__list-item"
5752
onClick={() => handleSelect(opt.value)}
5853
>
5954
<Badge type="text" variant={opt.value} />

‎js/react/lib/components/flap/flap.component.tsx‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,12 @@ type FlapProps = {
1010
export const Flap = ({ label, variant, className, ...rest }: FlapProps) => {
1111
const Icon = FLAP_ICONS[variant];
1212
return (
13-
<div
14-
title={label}
15-
className={cn([
16-
"relative flex justify-center gap-2",
17-
"h-6 w-20 px-5",
18-
"desktop:w-[167.5px] desktop:h-[47.5px] desktop:px-8",
19-
className,
20-
])}
21-
{...rest}
22-
>
13+
<div title={label} className={cn(["rustlanges-flap", className])} {...rest}>
2314
<svg
2415
viewBox="0 0 145 49"
2516
fill="none"
2617
preserveAspectRatio="none"
27-
className={cn([
28-
"desktop:px-3 absolute left-0 top-0 z-0 h-full w-full px-1",
29-
FLAP_VARIANTS[variant],
30-
])}
18+
className={cn(["rustlanges-flap__svg", FLAP_VARIANTS[variant]])}
3119
>
3220
<path
3321
d="M120.962 5.00869L141.872 30.4082C147.78 37.5847 142.676 48.3997 133.38 48.3997L12.488 48.3996C3.19249 48.3996 -1.91244 37.5847 3.99561 30.4082L24.906 5.00869C26.9955 2.47056 30.1108 1.00009 33.3984 1.00009L112.47 1.0001C115.757 1.0001 118.872 2.47057 120.962 5.00869Z"
@@ -37,14 +25,12 @@ export const Flap = ({ label, variant, className, ...rest }: FlapProps) => {
3725
</svg>
3826
<span
3927
className={cn([
40-
"z-10 flex h-fit w-full items-center justify-center gap-2 text-center font-medium text-neutral-950",
41-
!!Icon && "desktop:*:even:block pt-[3px] *:even:hidden",
42-
"desktop:pt-1",
43-
"[&>svg]:h-3 [&>svg]:w-3",
28+
"rustlanges-flap__view",
29+
!!Icon && "rustlanges-flap__view--icon",
4430
])}
4531
>
4632
{Icon ? <Icon /> : null}
47-
<span className="text-paragraph-2 desktop:pt-0 line-clamp-1 pt-px">
33+
<span className="text-paragraph-2 rustlanges-flap__view-text">
4834
{label}
4935
</span>
5036
</span>

0 commit comments

Comments
 (0)