Skip to content

Commit 97164c0

Browse files
sergeyzwezdinsergeyzwezdin
authored
Card component styles (#32)
* fix: fixing button component styles * chore: code cleanup * fix: reverted to standard card * chore: code cleanup * fix: card styles fix * chore: changeset added * chore: changeset added * chore: version bump * fix: button storybook fix * fix: remove card shadow * fix: card background fix for light theme
1 parent d334fb7 commit 97164c0

6 files changed

Lines changed: 99 additions & 187 deletions

File tree

‎packages/ui/CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# @hoodieshq/ms-tools-ui
22

3+
## 0.8.0
4+
5+
### Minor Changes
6+
7+
- 1d659ac: Button component styles adjustments
8+
- b5047a3: Card component styles adjustments
9+
310
## 0.7.1
411

512
### Patch Changes

‎packages/ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@hoodieshq/ms-tools-ui",
3-
"version": "0.7.1",
3+
"version": "0.8.0",
44
"description": "Reusable React components built with React, Tailwind CSS, and Shadcn, forming the visual building blocks of microsites",
55
"main": ".",
66
"types": "./dist/index.d.ts",

‎packages/ui/src/components/button.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,6 @@ export const Icon: Story = {
9191
args: {
9292
variant: 'default',
9393
size: 'icon',
94-
children: <span className="h-4 w-4">❤️</span>, // Replace with an actual icon component
94+
children: <span>❤️</span>, // Replace with an actual icon component
9595
},
9696
}

‎packages/ui/src/components/card.stories.tsx‎

Lines changed: 11 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,27 @@
1-
import { ComponentProps, MouseEventHandler } from 'react'
21
import type { Meta, StoryObj } from '@storybook/react'
3-
import { fn } from '@storybook/test'
4-
import { Button } from './button'
5-
import {
6-
Card,
7-
CardAction,
8-
CardAsideCounter,
9-
CardContent,
10-
CardDescription,
11-
CardFooter,
12-
CardHeader,
13-
CardTitle,
14-
} from './card'
2+
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card'
153

16-
type Props = ComponentProps<typeof Card> & {
17-
title: string
18-
description: string
19-
aside: 'div' | 'counter'
20-
asideText: string
21-
content: string
22-
actionTitle: string
23-
onClick: MouseEventHandler<HTMLButtonElement>
24-
}
25-
26-
export default {
4+
const meta = {
275
title: 'Card',
286
component: Card,
29-
argTypes: {
30-
title: { control: 'text' },
31-
description: { control: 'text' },
32-
aside: { control: 'select', options: ['div', 'counter'], table: { category: 'aside' } },
33-
asideText: { control: 'text', table: { category: 'aside' } },
34-
content: { control: 'text', table: { category: 'content' } },
35-
actionTitle: { control: 'text', table: { category: 'action' } },
36-
onClick: { table: { disable: true } },
37-
},
38-
args: {
39-
title: 'Create test account',
40-
description: 'Receive 1000 free tokens in your account for testing purposes',
41-
aside: 'counter',
42-
asideText: '1',
43-
content: '20 SOL',
44-
actionTitle: 'Reload',
45-
onClick: fn(),
46-
},
47-
} satisfies Meta<Props>
7+
} satisfies Meta<typeof Card>
488

49-
type Story = StoryObj<Props>
9+
export default meta
5010

51-
export const Default: Story = {
52-
parameters: {
53-
controls: { include: ['title', 'description'] },
54-
},
55-
render: ({ title, description }) => (
56-
<Card>
57-
<CardHeader>
58-
<CardTitle>{title}</CardTitle>
59-
<CardDescription>{description}</CardDescription>
60-
</CardHeader>
61-
</Card>
62-
),
63-
}
11+
type Story = StoryObj<typeof meta>
6412

65-
export const WithAside: Story = {
66-
parameters: {
67-
controls: { include: ['title', 'description', 'aside', 'asideText'] },
68-
},
69-
// args: aside (custom div element, icon/counter with text)
70-
render: ({ title, description, aside, asideText }) => (
71-
<Card
72-
aside={
73-
aside === 'div' ? <div>{asideText}</div> : <CardAsideCounter>{asideText}</CardAsideCounter>
74-
}
75-
>
76-
<CardHeader>
77-
<CardTitle>{title}</CardTitle>
78-
<CardDescription>{description}</CardDescription>
79-
</CardHeader>
80-
</Card>
81-
),
82-
}
83-
84-
export const CustomContent: Story = {
85-
parameters: {
86-
controls: { include: ['title', 'description', 'content'] },
87-
},
88-
args: {
89-
title: 'Wallet Balance',
90-
description: '',
91-
content: '20 SOL',
92-
},
93-
render: ({ title, description, content }) => (
13+
export const Default: Story = {
14+
render: () => (
9415
<Card>
9516
<CardHeader>
96-
<CardTitle>{title}</CardTitle>
97-
<CardDescription>{description}</CardDescription>
17+
<CardTitle>Card Title</CardTitle>
18+
<CardDescription>Card Description</CardDescription>
9819
</CardHeader>
9920
<CardContent>
100-
<span className="font-semibold">{content}</span>
21+
<p>Card Content</p>
10122
</CardContent>
102-
</Card>
103-
),
104-
}
105-
106-
export const WithFooter: Story = {
107-
parameters: {
108-
controls: { include: ['title', 'description', 'actionTitle'] },
109-
},
110-
render: ({ title, description, actionTitle, onClick }) => (
111-
<Card>
112-
<CardHeader>
113-
<CardTitle>{title}</CardTitle>
114-
<CardDescription>{description}</CardDescription>
115-
</CardHeader>
11623
<CardFooter>
117-
<CardAction>
118-
<Button onClick={onClick}>{actionTitle}</Button>
119-
</CardAction>
24+
<p>Card Footer</p>
12025
</CardFooter>
12126
</Card>
12227
),

‎packages/ui/src/components/card.tsx‎

Lines changed: 75 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,84 @@
1-
import { ComponentProps, FC, ReactNode } from 'react'
2-
import { cn } from '@/lib/utils'
1+
import * as React from 'react'
2+
import { cn } from '@/lib/utils/index'
33

4-
type CardProps = ComponentProps<'div'> & {
5-
aside?: ReactNode
4+
function Card({
5+
className,
6+
children,
7+
aside,
8+
...props
9+
}: React.ComponentProps<'div'> & { aside?: React.ReactNode }) {
10+
return (
11+
<div
12+
data-slot="card"
13+
className={cn(
14+
'bg-card text-card-foreground border-table-stroke flex flex-nowrap gap-2 rounded-xl border px-3 py-2',
15+
className
16+
)}
17+
{...props}
18+
>
19+
{aside && <aside className="shrink-0">{aside}</aside>}
20+
<div className="flex flex-1 flex-col gap-2">{children}</div>
21+
</div>
22+
)
623
}
724

8-
export const Card: FC<CardProps> = ({ className, children, aside, ...props }) => (
9-
<div
10-
data-slot="card"
11-
className={cn(
12-
'flex flex-row gap-2 overflow-hidden rounded-sm border border-stone-100 bg-stone-100 px-2 py-3 text-sm tracking-tight text-black shadow-sm dark:border-black dark:bg-stone-900 dark:text-white dark:shadow-none',
13-
className
14-
)}
15-
{...props}
16-
>
17-
<div className="order-2 flex flex-1 flex-col gap-2">{children}</div>
18-
{aside && (
19-
<aside data-slot="card-aside" className="order-1 max-w-8 shrink-0 overflow-hidden">
20-
{aside}
21-
</aside>
22-
)}
23-
</div>
24-
)
25-
26-
type CardAsideCounterProps = ComponentProps<'div'>
27-
export const CardAsideCounter: FC<CardAsideCounterProps> = ({ className, ...props }) => (
28-
<div
29-
data-slot="card-aside-counter"
30-
className={cn(
31-
'min-h-5 min-w-5 overflow-hidden rounded-full border border-emerald-700 bg-emerald-700 px-0.5 pt-0.5 pb-1 text-center text-xs leading-none tracking-tight text-ellipsis whitespace-nowrap text-white dark:border-emerald-400 dark:bg-transparent dark:text-emerald-400',
32-
className
33-
)}
34-
{...props}
35-
/>
36-
)
25+
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
26+
return (
27+
<div
28+
data-slot="card-header"
29+
className={cn(
30+
'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-0.5 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
31+
className
32+
)}
33+
{...props}
34+
/>
35+
)
36+
}
3737

38-
type CardHeaderProps = ComponentProps<'div'>
39-
export const CardHeader: FC<CardHeaderProps> = ({ className, ...props }) => (
40-
<div data-slot="card-header" className={cn('flex flex-col gap-0.5', className)} {...props} />
41-
)
38+
function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
39+
return (
40+
<div
41+
data-slot="card-title"
42+
className={cn('text-foreground text-sm leading-none tracking-[-0.00875rem]', className)}
43+
{...props}
44+
/>
45+
)
46+
}
4247

43-
type CardTitleProps = ComponentProps<'div'>
44-
export const CardTitle: FC<CardTitleProps> = ({ className, ...props }) => (
45-
<div
46-
data-slot="card-title"
47-
className={cn('text-sm leading-none tracking-tight text-black dark:text-white', className)}
48-
{...props}
49-
/>
50-
)
48+
function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
49+
return (
50+
<div
51+
data-slot="card-description"
52+
className={cn('text-muted text-xs leading-none tracking-[-0.00875rem]', className)}
53+
{...props}
54+
/>
55+
)
56+
}
5157

52-
type CardDescriptionProps = ComponentProps<'div'>
53-
export const CardDescription: FC<CardDescriptionProps> = ({ className, ...props }) => (
54-
<div
55-
data-slot="card-description"
56-
className={cn(
57-
'text-xs leading-none tracking-tight text-black/50 dark:text-white/50',
58-
className
59-
)}
60-
{...props}
61-
/>
62-
)
58+
function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
59+
return (
60+
<div
61+
data-slot="card-action"
62+
className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
63+
{...props}
64+
/>
65+
)
66+
}
6367

64-
type CardContentProps = ComponentProps<'div'>
65-
export const CardContent: FC<CardContentProps> = ({ className, ...props }) => (
66-
<div
67-
data-slot="card-content"
68-
className={cn('text-base leading-none tracking-tight text-black dark:text-white', className)}
69-
{...props}
70-
/>
71-
)
68+
function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
69+
return (
70+
<div data-slot="card-content" className={cn('text-foreground text-sm', className)} {...props} />
71+
)
72+
}
7273

73-
type CardActionProps = ComponentProps<'div'>
74-
export const CardAction: FC<CardActionProps> = ({ className, ...props }) => (
75-
<div
76-
data-slot="card-action"
77-
className={cn('flex flex-row-reverse gap-4', className)}
78-
{...props}
79-
/>
80-
)
74+
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
75+
return (
76+
<div
77+
data-slot="card-footer"
78+
className={cn('text-foreground flex items-center text-sm [.border-t]:pt-6', className)}
79+
{...props}
80+
/>
81+
)
82+
}
8183

82-
type CardFooterProps = ComponentProps<'div'>
83-
export const CardFooter: FC<CardFooterProps> = ({ className, ...props }) => (
84-
<div data-slot="card-footer" className={cn('pt-4', className)} {...props} />
85-
)
84+
export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }

‎packages/ui/src/styles/globals.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,11 @@
6060

6161
/* System preference - dark theme */
6262
@media (prefers-color-scheme: dark) {
63-
:root:not(.light), :root:is(.dark) {
63+
:root:not(.light),
64+
:root:is(.dark) {
6465
--background: oklch(0.2165 0.0078 182.18);
6566
--foreground: oklch(1 0 0);
66-
--card: oklch(0.145 0 0);
67+
--card: oklch(0.2497 0.0089 184.49);
6768
--card-foreground: oklch(0.985 0 0);
6869
--popover: oklch(0.145 0 0);
6970
--popover-foreground: oklch(0.985 0 0);
@@ -115,7 +116,7 @@
115116
.dark {
116117
--background: oklch(0.2165 0.0078 182.18);
117118
--foreground: oklch(1 0 0);
118-
--card: oklch(0.145 0 0);
119+
--card: oklch(0.2497 0.0089 184.49);
119120
--card-foreground: oklch(0.985 0 0);
120121
--popover: oklch(0.145 0 0);
121122
--popover-foreground: oklch(0.985 0 0);

0 commit comments

Comments
 (0)