ars9
32beec2229
- add Timestamp component with moment relative time and ISO tooltip - add Timestamp stories (JustNow, MinutesAgo, HoursAgo, DaysAgo, MonthsAgo) - add ESLint 10 with typescript-eslint, react-hooks, react-refresh, prettier - add Prettier config with singleQuote, semi, trailingComma all, printWidth 100 - add lint, lint:fix, format, test:storybook scripts to package.json - fix react-hooks/set-state-in-effect in all page components - auto-fix 113 Prettier formatting issues across src and .storybook
60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
import { Card } from '../../src/ui/Card/Card';
|
|
import { Badge } from '../../src/ui/Badge/Badge';
|
|
import { Button } from '../../src/ui/Button/Button';
|
|
|
|
const meta: Meta<typeof Card> = {
|
|
title: 'UI/Card',
|
|
component: Card,
|
|
parameters: { layout: 'centered' },
|
|
tags: ['autodocs'],
|
|
decorators: [
|
|
(Story) => (
|
|
<div style={{ width: 360 }}>
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
argTypes: {
|
|
padding: { control: 'select', options: ['sm', 'md', 'lg'] },
|
|
},
|
|
};
|
|
export default meta;
|
|
type Story = StoryObj<typeof Card>;
|
|
|
|
export const Default: Story = {
|
|
args: { children: 'Card content goes here.', padding: 'md' },
|
|
};
|
|
|
|
export const ScenarioCard: Story = {
|
|
render: () => (
|
|
<Card>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
marginBottom: 8,
|
|
}}
|
|
>
|
|
<span style={{ fontWeight: 600, fontSize: 14 }}>Login flow</span>
|
|
<Badge variant="success" dot>
|
|
Passed
|
|
</Badge>
|
|
</div>
|
|
<p style={{ margin: '0 0 16px', fontSize: 13, color: 'var(--color-text-muted)' }}>
|
|
Last run 2 minutes ago · 4 steps
|
|
</p>
|
|
<div style={{ display: 'flex', gap: 8 }}>
|
|
<Button size="sm" variant="primary">
|
|
Run
|
|
</Button>
|
|
<Button size="sm" variant="ghost">
|
|
Edit
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
),
|
|
};
|