Skip to content

Commit 61e3241

Browse files
PedroodelvallePedroodelvalle
authored
Merge pull request #4 from Conty-App/develop
feat(ui): adiciona callout e padroniza o badge
2 parents a14eb87 + 096ec17 commit 61e3241

File tree

19 files changed

+1036
-196
lines changed

19 files changed

+1036
-196
lines changed

‎apps/storybook/.storybook/preview.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const preview: Preview = {
3232
}
3333
],
3434
parameters: {
35+
options: {
36+
storySort: {
37+
order: ["Components", ["Button", "Callout", "Badge"]]
38+
}
39+
},
3540
controls: {
3641
matchers: {
3742
color: /(background|color)$/i,

‎apps/storybook/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
"dependencies": {
1313
"@conty/tokens": "*",
1414
"@conty/ui": "*",
15+
"@hugeicons/core-free-icons": "^3.3.0",
16+
"@hugeicons/react": "^1.1.5",
1517
"react": "^19.2.0",
1618
"react-dom": "^19.2.0"
1719
},

‎apps/storybook/src/badge.stories.tsx‎

Lines changed: 75 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,28 @@ const meta = {
66
title: "Components/Badge",
77
component: Badge,
88
tags: ["autodocs"],
9+
parameters: {
10+
controls: {
11+
include: ["children", "variant", "color", "size", "asChild"]
12+
}
13+
},
14+
argTypes: {
15+
variant: {
16+
control: "select",
17+
options: ["surface", "solid", "soft", "ghost"]
18+
},
19+
size: {
20+
control: "select",
21+
options: ["1", "2", "3", "4"]
22+
},
23+
color: {
24+
control: "select",
25+
options: ["purple", "cyan", "orange", "pink", "success", "warning", "danger"]
26+
},
27+
asChild: {
28+
control: "boolean"
29+
}
30+
},
931
args: {
1032
children: "Badge"
1133
}
@@ -17,23 +39,61 @@ type Story = StoryObj<typeof meta>
1739

1840
export const Default: Story = {}
1941

20-
export const Secondary: Story = {
21-
args: {
22-
variant: "secondary",
23-
children: "Secondary"
24-
}
42+
export const AVariantGrid: Story = {
43+
name: "Variant Grid",
44+
render: () => (
45+
<div className="flex flex-wrap items-center gap-3">
46+
<Badge variant="surface">Surface</Badge>
47+
<Badge variant="solid">Solid</Badge>
48+
<Badge variant="soft">Soft</Badge>
49+
<Badge variant="ghost">Ghost</Badge>
50+
</div>
51+
)
2552
}
2653

27-
export const Destructive: Story = {
28-
args: {
29-
variant: "destructive",
30-
children: "Destructive"
31-
}
54+
export const Color: Story = {
55+
render: () => (
56+
<div className="flex flex-wrap items-center gap-3">
57+
<Badge color="purple">Badge</Badge>
58+
<Badge color="cyan">Badge</Badge>
59+
<Badge color="orange">Badge</Badge>
60+
<Badge color="pink">Badge</Badge>
61+
<Badge color="success">Success</Badge>
62+
<Badge color="warning">Warning</Badge>
63+
<Badge color="danger">Danger</Badge>
64+
</div>
65+
)
3266
}
3367

34-
export const Outline: Story = {
35-
args: {
36-
variant: "outline",
37-
children: "Outline"
38-
}
68+
export const Size: Story = {
69+
render: () => (
70+
<div className="flex flex-wrap items-center gap-3">
71+
<Badge size="1">Size 1</Badge>
72+
<Badge size="2">Size 2</Badge>
73+
<Badge size="3">Size 3</Badge>
74+
<Badge size="4">Size 4</Badge>
75+
</div>
76+
)
77+
}
78+
79+
export const AsLink: Story = {
80+
render: () => (
81+
<div className="flex flex-wrap items-center gap-3">
82+
<Badge asChild variant="surface">
83+
<a href="#" onClick={(event) => event.preventDefault()}>
84+
Surface Link
85+
</a>
86+
</Badge>
87+
<Badge asChild variant="solid">
88+
<a href="#" onClick={(event) => event.preventDefault()}>
89+
Solid Link
90+
</a>
91+
</Badge>
92+
<Badge asChild variant="ghost">
93+
<a href="#" onClick={(event) => event.preventDefault()}>
94+
Ghost Link
95+
</a>
96+
</Badge>
97+
</div>
98+
)
3999
}

‎apps/storybook/src/callout.stories.tsx‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import type { Meta, StoryObj } from "@storybook/react-vite"
2+
import {
3+
Alert02Icon,
4+
CheckmarkCircle02Icon,
5+
InformationCircleIcon
6+
} from "@hugeicons/core-free-icons"
7+
import { HugeiconsIcon } from "@hugeicons/react"
8+
9+
import { Callout, CalloutDescription, CalloutIcon } from "@conty/ui"
10+
11+
const meta = {
12+
title: "Components/Callout",
13+
component: Callout,
14+
tags: ["autodocs"],
15+
parameters: {
16+
controls: {
17+
include: ["variant", "size"]
18+
}
19+
},
20+
argTypes: {
21+
variant: {
22+
control: "select",
23+
options: ["default", "info", "success", "warning", "destructive"]
24+
},
25+
size: {
26+
control: "select",
27+
options: ["sm", "md", "lg"]
28+
}
29+
}
30+
} satisfies Meta<typeof Callout>
31+
32+
export default meta
33+
34+
type Story = StoryObj<typeof meta>
35+
36+
function SemanticCallouts() {
37+
return (
38+
<>
39+
<Callout variant="info">
40+
<CalloutIcon>
41+
<HugeiconsIcon icon={InformationCircleIcon} size={20} strokeWidth={1.8} />
42+
</CalloutIcon>
43+
<CalloutDescription>
44+
A new Frosted-UI update is available and ready to install.{" "}
45+
<a href="#" onClick={(event) => event.preventDefault()}>
46+
Learn what changed
47+
</a>
48+
.
49+
</CalloutDescription>
50+
</Callout>
51+
<Callout variant="success">
52+
<CalloutIcon>
53+
<HugeiconsIcon icon={CheckmarkCircle02Icon} size={20} strokeWidth={1.8} />
54+
</CalloutIcon>
55+
<CalloutDescription>
56+
Your changes were saved successfully and synced to the cloud.{" "}
57+
<a href="#" onClick={(event) => event.preventDefault()}>
58+
View details
59+
</a>
60+
.
61+
</CalloutDescription>
62+
</Callout>
63+
<Callout variant="warning">
64+
<CalloutIcon>
65+
<HugeiconsIcon icon={Alert02Icon} size={20} strokeWidth={1.8} />
66+
</CalloutIcon>
67+
<CalloutDescription>
68+
Your session will expire soon. Save your work to avoid losing data.{" "}
69+
<a href="#" onClick={(event) => event.preventDefault()}>
70+
Extend session
71+
</a>
72+
.
73+
</CalloutDescription>
74+
</Callout>
75+
<Callout variant="destructive">
76+
<CalloutIcon>
77+
<HugeiconsIcon icon={Alert02Icon} size={20} strokeWidth={1.8} />
78+
</CalloutIcon>
79+
<CalloutDescription>
80+
We could not complete your request. Please check your data and try again.{" "}
81+
<a href="#" onClick={(event) => event.preventDefault()}>
82+
Read troubleshooting tips
83+
</a>
84+
.
85+
</CalloutDescription>
86+
</Callout>
87+
</>
88+
)
89+
}
90+
91+
export const Default: Story = {
92+
render: (args) => (
93+
<Callout {...args} className="max-w-md">
94+
<CalloutIcon>
95+
<HugeiconsIcon icon={InformationCircleIcon} size={20} strokeWidth={1.8} />
96+
</CalloutIcon>
97+
<CalloutDescription>
98+
You will need to upgrade to the{" "}
99+
<a href="#" onClick={(event) => event.preventDefault()}>
100+
newest Frosted-UI
101+
</a>{" "}
102+
version now.
103+
</CalloutDescription>
104+
</Callout>
105+
)
106+
}
107+
108+
export const Destructive: Story = {
109+
args: {
110+
variant: "destructive"
111+
},
112+
render: (args) => (
113+
<Callout {...args} className="max-w-md">
114+
<CalloutIcon>
115+
<HugeiconsIcon icon={InformationCircleIcon} size={20} strokeWidth={1.8} />
116+
</CalloutIcon>
117+
<CalloutDescription>
118+
We could not complete your request. Please check your data and try again.
119+
</CalloutDescription>
120+
</Callout>
121+
)
122+
}
123+
124+
export const SemanticColors: Story = {
125+
render: () => (
126+
<div className="flex w-full max-w-2xl flex-col gap-4">
127+
<SemanticCallouts />
128+
</div>
129+
)
130+
}
131+
132+
export const Sizes: Story = {
133+
name: "Size Scale",
134+
render: () => (
135+
<div className="flex w-full max-w-2xl flex-col gap-4">
136+
<Callout size="sm">
137+
<CalloutIcon>
138+
<HugeiconsIcon icon={InformationCircleIcon} size={16} strokeWidth={1.8} />
139+
</CalloutIcon>
140+
<CalloutDescription>
141+
Small callout for compact contexts and supporting messages.
142+
</CalloutDescription>
143+
</Callout>
144+
<Callout size="md">
145+
<CalloutIcon>
146+
<HugeiconsIcon icon={InformationCircleIcon} size={20} strokeWidth={1.8} />
147+
</CalloutIcon>
148+
<CalloutDescription>
149+
Medium callout as the default option for most product screens.
150+
</CalloutDescription>
151+
</Callout>
152+
<Callout size="lg">
153+
<CalloutIcon>
154+
<HugeiconsIcon icon={InformationCircleIcon} size={24} strokeWidth={1.8} />
155+
</CalloutIcon>
156+
<CalloutDescription>
157+
Large callout for stronger emphasis in onboarding or key updates.
158+
</CalloutDescription>
159+
</Callout>
160+
</div>
161+
)
162+
}

‎apps/storybook/src/card.stories.tsx‎

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

‎docs/roadmap-publico.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Este arquivo mostra, de forma simples, no que estamos focados agora e como voce
1010

1111
## O que estamos construindo agora
1212

13-
- Melhorar componentes base (ex.: `Button`, `Badge`, `Card` e afins).
13+
- Melhorar componentes base (ex.: `Button`, `Badge`, `Callout` e afins).
1414
- Garantir consistencia visual com tokens.
1515
- Tornar a documentacao mais clara para uso e contribuicao.
1616

0 commit comments

Comments
 (0)