Skip to content

Commit 1545555

Browse files
mykalmaxmykalmax
committed
clean up
1 parent d56fe9a commit 1545555

33 files changed

+437
-1128
lines changed

‎web/common/src/components/Badge/Badge.stories.tsx‎

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,11 @@
11
import type { Meta, StoryObj } from '@storybook/react-vite'
22

3-
import { EnumShape, EnumSize } from '@/types/enums'
3+
import type { Shape, Size } from '@/types'
44
import { Badge } from './Badge'
55

66
const meta: Meta<typeof Badge> = {
77
title: 'Components/Badge',
88
component: Badge,
9-
tags: ['autodocs'],
10-
argTypes: {
11-
size: {
12-
control: { type: 'select' },
13-
options: Object.values(EnumSize),
14-
},
15-
shape: {
16-
control: { type: 'select' },
17-
options: Object.values(EnumShape),
18-
},
19-
children: { control: 'text' },
20-
},
219
}
2210

2311
export default meta
@@ -29,10 +17,13 @@ export const Default: Story = {
2917
},
3018
}
3119

20+
const sizes: Size[] = ['2xs', 'xs', 's', 'm', 'l', 'xl', '2xl']
21+
const shapes: Shape[] = ['square', 'round', 'pill']
22+
3223
export const Sizes: Story = {
3324
render: args => (
3425
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
35-
{Object.values(EnumSize).map(size => (
26+
{sizes.map(size => (
3627
<Badge
3728
key={size}
3829
size={size}
@@ -51,7 +42,7 @@ export const Sizes: Story = {
5142
export const Shapes: Story = {
5243
render: args => (
5344
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
54-
{Object.values(EnumShape).map(shape => (
45+
{shapes.map(shape => (
5546
<Badge
5647
key={shape}
5748
shape={shape}
@@ -78,32 +69,32 @@ export const Colors: Story = {
7869
}}
7970
>
8071
<Badge
81-
size={EnumSize.S}
82-
shape={EnumShape.Pill}
72+
size="s"
73+
shape="pill"
8374
className="bg-[red] text-light"
8475
{...args}
8576
>
8677
Primary Badge
8778
</Badge>
8879
<Badge
89-
size={EnumSize.S}
90-
shape={EnumShape.Pill}
80+
size="s"
81+
shape="pill"
9182
className="bg-[lightblue] text-prose"
9283
{...args}
9384
>
9485
Secondary Badge
9586
</Badge>
9687
<Badge
97-
size={EnumSize.S}
98-
shape={EnumShape.Round}
88+
size="s"
89+
shape="round"
9990
className="bg-[green] text-light"
10091
{...args}
10192
>
10293
Failed Badge
10394
</Badge>
10495
<Badge
105-
size={EnumSize.XXS}
106-
shape={EnumShape.Round}
96+
size="2xs"
97+
shape="round"
10798
className="bg-[orange] text-light"
10899
{...args}
109100
>

‎web/common/src/components/Badge/Badge.test.tsx‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎web/common/src/components/Badge/Badge.tsx‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import { Slot } from '@radix-ui/react-slot'
2-
import { type VariantProps } from 'class-variance-authority'
32
import React from 'react'
43

5-
import { type Size, type Shape } from '@/types/enums'
4+
import type { Shape, Size } from '@/types'
65
import { cn } from '@/utils'
7-
import { badgeVariants } from './help'
6+
import { cva } from 'class-variance-authority'
87

98
import './Badge.css'
109

11-
export interface BadgeProps
12-
extends React.HTMLAttributes<HTMLSpanElement>,
13-
VariantProps<typeof badgeVariants> {
10+
export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
1411
asChild?: boolean
1512
size?: Size
1613
shape?: Shape
@@ -30,3 +27,33 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
3027
},
3128
)
3229
Badge.displayName = 'Badge'
30+
31+
const size: Record<Size, string> = {
32+
'2xs': 'h-5 px-2 text-2xs leading-none rounded-2xs',
33+
xs: 'h-6 px-2 text-2xs rounded-xs',
34+
s: 'h-7 px-3 text-xs rounded-sm',
35+
m: 'h-8 px-4 rounded-md',
36+
l: 'h-9 px-4 rounded-lg',
37+
xl: 'h-10 px-4 rounded-xl',
38+
'2xl': 'h-11 px-6 rounded-2xl',
39+
}
40+
41+
const shape: Record<Shape, string> = {
42+
square: 'rounded-none',
43+
round: 'rounded-inherit',
44+
pill: 'rounded-full',
45+
}
46+
47+
const badgeVariants = cva(
48+
'bg-badge-background text-badge-foreground font-mono inline-flex align-middle items-center justify-center gap-2 leading-none whitespace-nowrap font-semibold',
49+
{
50+
variants: {
51+
size,
52+
shape,
53+
},
54+
defaultVariants: {
55+
size: 's',
56+
shape: 'round',
57+
},
58+
},
59+
)

‎web/common/src/components/Badge/help.ts‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎web/common/src/components/Button/Button.css‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,31 @@
11
:root {
2-
--color-button-focused: var(--color-gray-100);
2+
--color-button-primary-background: var(--color-action);
3+
--color-button-primary-foreground: var(--color-light);
4+
--color-button-primary-hover: var(--color-action-hover);
5+
--color-button-primary-active: var(--color-action-active);
36

4-
--color-button-primary-background: var(--color-gray-100);
5-
--color-button-primary-foreground: var(--color-prose);
6-
--color-button-primary-hover: var(--color-gray-100);
7-
--color-button-primary-active: var(--color-gray-100);
8-
9-
--color-button-secondary-background: var(--color-gray-100);
7+
--color-button-secondary-background: var(--color-neutral-100);
108
--color-button-secondary-foreground: var(--color-prose);
11-
--color-button-secondary-hover: var(--color-gray-100);
12-
--color-button-secondary-active: var(--color-gray-100);
9+
--color-button-secondary-hover: var(--color-neutral-125);
10+
--color-button-secondary-active: var(--color-neutral-150);
1311

14-
--color-button-alternative-background: var(--color-gray-100);
12+
--color-button-alternative-background: var(--color-light);
1513
--color-button-alternative-foreground: var(--color-prose);
16-
--color-button-alternative-hover: var(--color-gray-100);
17-
--color-button-alternative-active: var(--color-gray-100);
14+
--color-button-alternative-hover: var(--color-neutral-125);
15+
--color-button-alternative-active: var(--color-neutral-150);
1816

19-
--color-button-destructive-background: var(--color-gray-100);
20-
--color-button-destructive-foreground: var(--color-prose);
21-
--color-button-destructive-hover: var(--color-gray-100);
22-
--color-button-destructive-active: var(--color-gray-100);
17+
--color-button-destructive-background: var(--color-neutral-100);
18+
--color-button-destructive-foreground: var(--color-destructive-foreground);
19+
--color-button-destructive-hover: var(--color-neutral-125);
20+
--color-button-destructive-active: var(--color-neutral-150);
2321

24-
--color-button-danger-background: var(--color-gray-100);
25-
--color-button-danger-foreground: var(--color-prose);
26-
--color-button-danger-hover: var(--color-gray-100);
27-
--color-button-danger-active: var(--color-gray-100);
22+
--color-button-danger-background: var(--color-destructive);
23+
--color-button-danger-foreground: var(--color-light);
24+
--color-button-danger-hover: var(--color-destructive-hover);
25+
--color-button-danger-active: var(--color-destructive-active);
2826

29-
--color-button-transparent-background: var(--color-gray-100);
27+
--color-button-transparent-background: transparent;
3028
--color-button-transparent-foreground: var(--color-prose);
31-
--color-button-transparent-hover: var(--color-gray-100);
32-
--color-button-transparent-active: var(--color-gray-100);
29+
--color-button-secondary-hover: var(--color-neutral-125);
30+
--color-button-secondary-active: var(--color-neutral-150);
3331
}

0 commit comments

Comments
 (0)