Skip to content

Commit 41586a1

Browse files
viniarrudaviniarruda
authored
Merge pull request #103 from react-shop/feat/refact_web
feat: refact web
2 parents 5e35a11 + cafb388 commit 41586a1

File tree

97 files changed

+4020
-476
lines changed

Some content is hidden

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

97 files changed

+4020
-476
lines changed

‎apps/storybook/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
dist
3+
storybook-static
4+

‎apps/storybook/.storybook/main.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import type { StorybookConfig } from '@storybook/react-vite';
2+
import { mergeConfig } from 'vite';
3+
import path from 'path';
4+
5+
const config: StorybookConfig = {
6+
stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
7+
addons: [
8+
'@storybook/addon-links',
9+
'@storybook/addon-essentials',
10+
'@storybook/addon-interactions',
11+
],
12+
framework: {
13+
name: '@storybook/react-vite',
14+
options: {},
15+
},
16+
docs: {
17+
autodocs: 'tag',
18+
},
19+
async viteFinal(config) {
20+
return mergeConfig(config, {
21+
resolve: {
22+
alias: {
23+
'@lib': path.resolve(__dirname, '../../../packages/design-system/src/lib'),
24+
'@components': path.resolve(__dirname, '../../../packages/design-system/src/components'),
25+
},
26+
},
27+
});
28+
},
29+
};
30+
31+
export default config;
32+

‎apps/storybook/.storybook/preview-head.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<link rel="preconnect" href="https://fonts.googleapis.com" />
2+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
3+
<link
4+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
5+
rel="stylesheet"
6+
/>
7+
<style>
8+
:root {
9+
--font-poppins: 'Poppins', system-ui, sans-serif;
10+
}
11+
body {
12+
font-family: var(--font-poppins);
13+
}
14+
</style>
15+

‎apps/storybook/.storybook/preview.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from "react";
2+
import type { Preview } from "@storybook/react";
3+
import "@react-shop/design-system/src/styles/global.css";
4+
5+
const preview: Preview = {
6+
parameters: {
7+
actions: { argTypesRegex: "^on[A-Z].*" },
8+
controls: {
9+
matchers: {
10+
color: /(background|color)$/i,
11+
date: /Date$/i,
12+
},
13+
},
14+
backgrounds: {
15+
default: "light",
16+
values: [
17+
{ name: "light", value: "#ffffff" },
18+
{ name: "dark", value: "#1a1a1a" },
19+
],
20+
},
21+
},
22+
};
23+
24+
export default preview;

‎apps/storybook/README.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Storybook - Design System Documentation
2+
3+
This is the Storybook documentation app for `@react-shop/design-system`.
4+
5+
## Getting Started
6+
7+
```bash
8+
# Install dependencies (from root)
9+
pnpm install
10+
11+
# Start Storybook
12+
cd apps/storybook
13+
pnpm dev
14+
```
15+
16+
Storybook will be available at `http://localhost:6006`
17+
18+
## Building
19+
20+
```bash
21+
pnpm build
22+
```
23+
24+
## Writing Stories
25+
26+
Create stories in the `stories/` directory:
27+
28+
```typescript
29+
// stories/Button.stories.tsx
30+
import type { Meta, StoryObj } from '@storybook/react';
31+
import { Button } from '@react-shop/design-system';
32+
33+
const meta = {
34+
title: 'Atoms/Button',
35+
component: Button,
36+
tags: ['autodocs'],
37+
} satisfies Meta<typeof Button>;
38+
39+
export default meta;
40+
type Story = StoryObj<typeof meta>;
41+
42+
export const Primary: Story = {
43+
args: {
44+
children: 'Button',
45+
variant: 'solid',
46+
},
47+
};
48+
```
49+
50+
## Structure
51+
52+
```
53+
stories/
54+
├── Atoms/ → Basic components (Button, Text, Input)
55+
├── Molecules/ → Composite components (Card, Rating)
56+
├── Organisms/ → Complex components (Modal, ProductCard)
57+
└── Layout/ → Layout components (Header, Footer)
58+
```
59+

‎apps/storybook/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "storybook",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "storybook dev -p 6006",
7+
"build": "storybook build",
8+
"preview": "storybook preview"
9+
},
10+
"dependencies": {
11+
"@react-shop/design-system": "workspace:*",
12+
"react": "^18.2.0",
13+
"react-dom": "^18.2.0"
14+
},
15+
"devDependencies": {
16+
"@storybook/addon-essentials": "^8.0.0",
17+
"@storybook/addon-interactions": "^8.0.0",
18+
"@storybook/addon-links": "^8.0.0",
19+
"@storybook/blocks": "^8.0.0",
20+
"@storybook/react": "^8.0.0",
21+
"@storybook/react-vite": "^8.0.0",
22+
"@types/react": "^18.2.0",
23+
"@types/react-dom": "^18.2.0",
24+
"autoprefixer": "^10.4.16",
25+
"postcss": "^8.4.32",
26+
"storybook": "^8.0.0",
27+
"tailwindcss": "^3.4.0",
28+
"tsconfig": "workspace:*",
29+
"typescript": "^5.0.0",
30+
"vite": "^5.0.0"
31+
}
32+
}

‎apps/storybook/postcss.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};
7+

‎apps/storybook/stories/Atoms/Avatar.stories.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { Avatar } from '@react-shop/design-system';
3+
4+
const meta = {
5+
title: 'Atoms/Avatar',
6+
component: Avatar,
7+
tags: ['autodocs'],
8+
argTypes: {
9+
size: {
10+
control: 'select',
11+
options: ['sm', 'md', 'lg', 'xl'],
12+
},
13+
},
14+
} satisfies Meta<typeof Avatar>;
15+
16+
export default meta;
17+
type Story = StoryObj<typeof meta>;
18+
19+
export const Default: Story = {
20+
args: {
21+
src: 'https://i.pravatar.cc/150?img=1',
22+
alt: 'User Avatar',
23+
},
24+
};
25+
26+
export const WithFallback: Story = {
27+
args: {
28+
src: undefined,
29+
fallback: 'JD',
30+
},
31+
};
32+
33+
export const Sizes: Story = {
34+
render: () => (
35+
<div className="flex items-center gap-4">
36+
<Avatar src="https://i.pravatar.cc/150?img=2" alt="Small" size="sm" />
37+
<Avatar src="https://i.pravatar.cc/150?img=3" alt="Medium" size="md" />
38+
<Avatar src="https://i.pravatar.cc/150?img=4" alt="Large" size="lg" />
39+
<Avatar src="https://i.pravatar.cc/150?img=5" alt="Extra Large" size="xl" />
40+
</div>
41+
),
42+
};
43+
44+
export const Fallbacks: Story = {
45+
render: () => (
46+
<div className="flex items-center gap-4">
47+
<Avatar fallback="AB" size="md" />
48+
<Avatar fallback="CD" size="md" />
49+
<Avatar fallback="EF" size="md" />
50+
</div>
51+
),
52+
};
53+

‎apps/storybook/stories/Atoms/Badge.stories.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { Badge } from '@react-shop/design-system';
3+
4+
const meta = {
5+
title: 'Atoms/Badge',
6+
component: Badge,
7+
tags: ['autodocs'],
8+
argTypes: {
9+
variant: {
10+
control: 'select',
11+
options: ['default', 'primary', 'success', 'error', 'warning'],
12+
},
13+
},
14+
} satisfies Meta<typeof Badge>;
15+
16+
export default meta;
17+
type Story = StoryObj<typeof meta>;
18+
19+
export const Default: Story = {
20+
args: {
21+
children: 'Badge',
22+
},
23+
};
24+
25+
export const Primary: Story = {
26+
args: {
27+
children: 'Primary',
28+
variant: 'primary',
29+
},
30+
};
31+
32+
export const Success: Story = {
33+
args: {
34+
children: 'Success',
35+
variant: 'success',
36+
},
37+
};
38+
39+
export const Error: Story = {
40+
args: {
41+
children: 'Error',
42+
variant: 'error',
43+
},
44+
};
45+
46+
export const Warning: Story = {
47+
args: {
48+
children: 'Warning',
49+
variant: 'warning',
50+
},
51+
};
52+
53+
export const AllVariants: Story = {
54+
render: () => (
55+
<div className="flex flex-wrap gap-4">
56+
<Badge>Default</Badge>
57+
<Badge variant="primary">Primary</Badge>
58+
<Badge variant="success">Success</Badge>
59+
<Badge variant="error">Error</Badge>
60+
<Badge variant="warning">Warning</Badge>
61+
</div>
62+
),
63+
};
64+

‎apps/storybook/stories/Atoms/Button.stories.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { Button } from '@react-shop/design-system';
3+
4+
const meta = {
5+
title: 'Atoms/Button',
6+
component: Button,
7+
tags: ['autodocs'],
8+
argTypes: {
9+
variant: {
10+
control: 'select',
11+
options: ['solid', 'outline', 'ghost', 'link'],
12+
},
13+
size: {
14+
control: 'select',
15+
options: ['sm', 'md', 'lg'],
16+
},
17+
fullWidth: {
18+
control: 'boolean',
19+
},
20+
disabled: {
21+
control: 'boolean',
22+
},
23+
},
24+
} satisfies Meta<typeof Button>;
25+
26+
export default meta;
27+
type Story = StoryObj<typeof meta>;
28+
29+
export const Solid: Story = {
30+
args: {
31+
children: 'Solid Button',
32+
variant: 'solid',
33+
},
34+
};
35+
36+
export const Outline: Story = {
37+
args: {
38+
children: 'Outline Button',
39+
variant: 'outline',
40+
},
41+
};
42+
43+
export const Ghost: Story = {
44+
args: {
45+
children: 'Ghost Button',
46+
variant: 'ghost',
47+
},
48+
};
49+
50+
export const Link: Story = {
51+
args: {
52+
children: 'Link Button',
53+
variant: 'link',
54+
},
55+
};
56+
57+
export const Small: Story = {
58+
args: {
59+
children: 'Small Button',
60+
size: 'sm',
61+
},
62+
};
63+
64+
export const Large: Story = {
65+
args: {
66+
children: 'Large Button',
67+
size: 'lg',
68+
},
69+
};
70+
71+
export const FullWidth: Story = {
72+
args: {
73+
children: 'Full Width Button',
74+
fullWidth: true,
75+
},
76+
};
77+
78+
export const Disabled: Story = {
79+
args: {
80+
children: 'Disabled Button',
81+
disabled: true,
82+
},
83+
};
84+

0 commit comments

Comments
 (0)