Skip to content

Commit 9c477de

Browse files
iknowmagiciknowmagic
committed
feat: add Storybook viewport configurations and update package versions to 1.7.0
1 parent 239f9d9 commit 9c477de

File tree

6 files changed

+243
-3
lines changed

6 files changed

+243
-3
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -487,3 +487,4 @@ sketch
487487

488488
*storybook.log
489489
amalgamated.txt
490+
log.txt

‎.storybook/main.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ const config: StorybookConfig = {
55
addons: [
66
'@storybook/addon-essentials',
77
'@storybook/addon-onboarding',
8+
'@storybook/addon-viewport',
89
// '@chromatic-com/storybook',
910
'@storybook/experimental-addon-test',
1011
],

‎.storybook/preview.ts

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,141 @@
11
import type { Preview } from '@storybook/react'
2+
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
23
import '../src/styles/main.css'
34

5+
// Add ReactCraft custom viewports
6+
const CUSTOM_VIEWPORTS = {
7+
reactcraftXs: {
8+
name: 'ReactCraft XS',
9+
styles: {
10+
width: '320px',
11+
height: '568px',
12+
},
13+
type: 'mobile',
14+
},
15+
reactcraftSm: {
16+
name: 'ReactCraft SM',
17+
styles: {
18+
width: '640px',
19+
height: '1024px',
20+
},
21+
type: 'tablet',
22+
},
23+
reactcraftMd: {
24+
name: 'ReactCraft MD',
25+
styles: {
26+
width: '768px',
27+
height: '1024px',
28+
},
29+
type: 'tablet',
30+
},
31+
reactcraftLg: {
32+
name: 'ReactCraft LG',
33+
styles: {
34+
width: '1024px',
35+
height: '768px',
36+
},
37+
type: 'desktop',
38+
},
39+
reactcraftXl: {
40+
name: 'ReactCraft XL',
41+
styles: {
42+
width: '1280px',
43+
height: '800px',
44+
},
45+
type: 'desktop',
46+
},
47+
// New iPhone devices
48+
iphone15ProMax: {
49+
name: 'iPhone 15 Pro Max',
50+
styles: {
51+
width: '430px',
52+
height: '932px',
53+
},
54+
type: 'mobile',
55+
},
56+
iphone15Pro: {
57+
name: 'iPhone 15 Pro',
58+
styles: {
59+
width: '393px',
60+
height: '852px',
61+
},
62+
type: 'mobile',
63+
},
64+
iphone15: {
65+
name: 'iPhone 15',
66+
styles: {
67+
width: '390px',
68+
height: '844px',
69+
},
70+
type: 'mobile',
71+
},
72+
iphone15Plus: {
73+
name: 'iPhone 15 Plus',
74+
styles: {
75+
width: '428px',
76+
height: '926px',
77+
},
78+
type: 'mobile',
79+
},
80+
iphoneSE: {
81+
name: 'iPhone SE (2022)',
82+
styles: {
83+
width: '375px',
84+
height: '667px',
85+
},
86+
type: 'mobile',
87+
},
88+
// New iPad devices
89+
iPadPro13: {
90+
name: 'iPad Pro 13"',
91+
styles: {
92+
width: '1032px',
93+
height: '1376px',
94+
},
95+
type: 'tablet',
96+
},
97+
iPadPro12_9: {
98+
name: 'iPad Pro 12.9" / Air 13"',
99+
styles: {
100+
width: '1024px',
101+
height: '1366px',
102+
},
103+
type: 'tablet',
104+
},
105+
iPadPro11: {
106+
name: 'iPad Pro 11"',
107+
styles: {
108+
width: '834px',
109+
height: '1194px',
110+
},
111+
type: 'tablet',
112+
},
113+
iPadAir10_9: {
114+
name: 'iPad Air (gen 4-5)',
115+
styles: {
116+
width: '820px',
117+
height: '1180px',
118+
},
119+
type: 'tablet',
120+
},
121+
iPad10_9: {
122+
name: 'iPad (gen 10-11)',
123+
styles: {
124+
width: '810px',
125+
height: '1080px',
126+
},
127+
type: 'tablet',
128+
},
129+
iPad10_2: {
130+
name: 'iPad (gen 7-9)',
131+
styles: {
132+
width: '810px',
133+
height: '1080px',
134+
},
135+
type: 'tablet',
136+
},
137+
}
138+
4139
const preview: Preview = {
5140
parameters: {
6141
controls: {
@@ -9,6 +144,13 @@ const preview: Preview = {
9144
date: /Date$/i,
10145
},
11146
},
147+
viewport: {
148+
viewports: {
149+
...INITIAL_VIEWPORTS,
150+
...CUSTOM_VIEWPORTS,
151+
},
152+
defaultViewport: 'responsive',
153+
},
12154
},
13155
}
14156

‎CHANGELOG.md

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
# Changelog
2+
3+
All notable changes to the ReactCraft project will be documented in this file.
4+
5+
## [v1.7.0]
6+
7+
### Added
8+
9+
- Storybook viewport configurations for modern devices
10+
- ESLint configuration improvements
11+
12+
## [v1.6.1]
13+
14+
### Changed
15+
16+
- Bump version to 1.6.1 in package.json and package-lock.json
17+
18+
## [v1.6.0]
19+
20+
### Added
21+
22+
- Zustand store for theme management with enhanced tests
23+
- Development guidelines and project structure documentation to README.md
24+
- Home component with new features and improved layout
25+
26+
### Changed
27+
28+
- Updated Theme type to use AVAILABLE_THEMES for better consistency
29+
- Updated package versions
30+
- Removed Visual Studio Code settings from .gitignore
31+
32+
### Removed
33+
34+
- Modal component and related files
35+
- Modal store for simplified state management
36+
37+
## [v1.5.0]
38+
39+
### Added
40+
41+
- Enhanced ThemeToggle with system theme support
42+
43+
## [v1.4.0]
44+
45+
### Added
46+
47+
- Theme-aware sections and dark theme styles for Home component
48+
- React-icons dependency and close icon in Navbar component
49+
- Path alias resolution in Vitest configuration
50+
- Header and Page components with Storybook stories
51+
52+
### Changed
53+
54+
- Updated Navbar and ThemeToggle components with new styles and icons
55+
- Restructured Navbar and Home components with TypeScript support
56+
- Updated Storybook configuration
57+
- Removed unused components and styles
58+
59+
## [v1.3.0]
60+
61+
### Added
62+
63+
- ThemeToggle component with theme switching functionality
64+
- VSCode settings and extensions configuration
65+
- Testing setup
66+
67+
### Changed
68+
69+
- Improved component templates and test structure
70+
- Added npm version scripts for minor and major updates
71+
- Updated dependencies
72+
73+
## [v1.2.0]
74+
75+
### Added
76+
77+
- Plop for component generation
78+
79+
## [v1.1.0]
80+
81+
### Added
82+
83+
- .npmrc to configure git-tag-version setting
84+
85+
## [v1.0.0]
86+
87+
### Added
88+
89+
- Initial project setup with React 19 and TypeScript
90+
- Vite build system configuration
91+
- Tailwind CSS and DaisyUI integration
92+
- Base component architecture
93+
- Core project structure and documentation
94+
- Git workflow with Husky and lint-staged

‎package-lock.json

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-ts-custom",
33
"private": true,
4-
"version": "1.6.1",
4+
"version": "1.7.0",
55
"type": "module",
66
"scripts": {
77
"dev": "vite",
@@ -44,6 +44,7 @@
4444
"@eslint/js": "^9.25.1",
4545
"@storybook/addon-essentials": "^8.6.12",
4646
"@storybook/addon-onboarding": "^8.6.12",
47+
"@storybook/addon-viewport": "^8.6.12",
4748
"@storybook/blocks": "^8.6.12",
4849
"@storybook/experimental-addon-test": "^8.6.12",
4950
"@storybook/react": "^8.6.12",

0 commit comments

Comments
 (0)