@shohojdhara/atomix 0.4.9 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/AtomixGlass/shader-utils.ts +1 -1
- package/src/components/AtomixGlass/stories/{Phase1-Animation.stories.tsx → AnimationFeatures.stories.tsx} +1 -1
- package/src/components/AtomixGlass/stories/{Phase1-Test.stories.tsx → AnimationTests.stories.tsx} +1 -1
- package/src/components/AtomixGlass/stories/CardExamples.stories.tsx +212 -0
- package/src/components/AtomixGlass/stories/DashboardExamples.stories.tsx +348 -0
- package/src/components/AtomixGlass/stories/EcommerceExamples.stories.tsx +410 -0
- package/src/components/AtomixGlass/stories/FormExamples.stories.tsx +436 -0
- package/src/components/AtomixGlass/stories/HeroExamples.stories.tsx +264 -0
- package/src/components/AtomixGlass/stories/InteractivePlayground.stories.tsx +247 -0
- package/src/components/AtomixGlass/stories/MobileUIExamples.stories.tsx +418 -0
- package/src/components/AtomixGlass/stories/ModalExamples.stories.tsx +402 -0
- package/src/components/AtomixGlass/stories/Playground.stories.tsx +608 -43
- package/src/components/AtomixGlass/stories/PresetGallery.stories.tsx +335 -0
- package/src/components/AtomixGlass/stories/WidgetExamples.stories.tsx +441 -0
- package/src/components/AtomixGlass/stories/argTypes.ts +384 -0
- package/src/components/AtomixGlass/stories/shared-components.tsx +85 -1
- package/src/components/AtomixGlass/stories/types.ts +127 -0
package/package.json
CHANGED
|
@@ -40,7 +40,7 @@ const smoothStep = (a: number, b: number, t: number): number => {
|
|
|
40
40
|
return 0;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
const clamped = Math.max(0, Math.min(1, (t - a) / (b - a));
|
|
43
|
+
const clamped = Math.max(0, Math.min(1, (t - a) / (b - a)));
|
|
44
44
|
return clamped * clamped * (3 - 2 * clamped);
|
|
45
45
|
};
|
|
46
46
|
|
|
@@ -16,7 +16,7 @@ import { AtomixGlass } from '../AtomixGlass';
|
|
|
16
16
|
import { BackgroundWrapper, backgroundImages } from './shared-components';
|
|
17
17
|
|
|
18
18
|
const meta = {
|
|
19
|
-
title: 'Components/AtomixGlass/
|
|
19
|
+
title: 'Components/AtomixGlass/Features/Animation Features',
|
|
20
20
|
component: AtomixGlass,
|
|
21
21
|
parameters: {
|
|
22
22
|
layout: 'centered',
|
package/src/components/AtomixGlass/stories/{Phase1-Test.stories.tsx → AnimationTests.stories.tsx}
RENAMED
|
@@ -13,7 +13,7 @@ const meta = {
|
|
|
13
13
|
parameters: {
|
|
14
14
|
layout: 'centered',
|
|
15
15
|
},
|
|
16
|
-
tags: ['autodocs'],
|
|
16
|
+
tags: ['!autodocs'], // Exclude from production docs - test stories only
|
|
17
17
|
argTypes: {
|
|
18
18
|
withTimeAnimation: { control: 'boolean' },
|
|
19
19
|
animationSpeed: { control: { type: 'range', min: 0.1, max: 5.0, step: 0.1 } },
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CardExamples.stories.tsx
|
|
3
|
+
*
|
|
4
|
+
* Card-based layouts and content containers using AtomixGlass.
|
|
5
|
+
* Perfect for dashboards, profiles, and content grids.
|
|
6
|
+
*
|
|
7
|
+
* @package Atomix
|
|
8
|
+
* @component AtomixGlass
|
|
9
|
+
*/
|
|
10
|
+
import React from 'react';
|
|
11
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
12
|
+
import AtomixGlass from '../AtomixGlass';
|
|
13
|
+
import { BackgroundWrapper, backgroundImages, StoryErrorBoundary } from './shared-components';
|
|
14
|
+
import { baseArgTypes } from './argTypes';
|
|
15
|
+
|
|
16
|
+
import { Button } from '../../Button';
|
|
17
|
+
import { Badge } from '../../Badge';
|
|
18
|
+
import { Avatar } from '../../Avatar';
|
|
19
|
+
import { Icon } from '../../Icon/Icon';
|
|
20
|
+
|
|
21
|
+
const meta: Meta<typeof AtomixGlass> = {
|
|
22
|
+
title: 'Components/AtomixGlass/Examples/Card Examples',
|
|
23
|
+
component: AtomixGlass,
|
|
24
|
+
parameters: {
|
|
25
|
+
layout: 'centered',
|
|
26
|
+
docs: {
|
|
27
|
+
description: {
|
|
28
|
+
component:
|
|
29
|
+
'Card-based examples demonstrating AtomixGlass for content containers, profiles, and dashboard elements.',
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
tags: ['!autodocs'],
|
|
34
|
+
argTypes: {
|
|
35
|
+
...baseArgTypes,
|
|
36
|
+
children: { control: false },
|
|
37
|
+
},
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export default meta;
|
|
41
|
+
type Story = StoryObj<typeof AtomixGlass>;
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Profile Card
|
|
45
|
+
*
|
|
46
|
+
* User profile card with avatar and social links.
|
|
47
|
+
*/
|
|
48
|
+
export const ProfileCard: Story = {
|
|
49
|
+
render: () => (
|
|
50
|
+
<StoryErrorBoundary>
|
|
51
|
+
<BackgroundWrapper backgroundImage={backgroundImages[1]} overlay overlayOpacity={0.3}>
|
|
52
|
+
<div style={{ maxWidth: '400px' }}>
|
|
53
|
+
<AtomixGlass
|
|
54
|
+
displacementScale={70}
|
|
55
|
+
blurAmount={0.5}
|
|
56
|
+
saturation={140}
|
|
57
|
+
borderRadius={24}
|
|
58
|
+
mode="standard"
|
|
59
|
+
padding="32px"
|
|
60
|
+
>
|
|
61
|
+
<div className="u-text-center u-text-white">
|
|
62
|
+
<Avatar
|
|
63
|
+
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop"
|
|
64
|
+
alt="User avatar"
|
|
65
|
+
size="xl"
|
|
66
|
+
className="u-mb-4"
|
|
67
|
+
/>
|
|
68
|
+
<h3 className="u-mt-0 u-text-xl u-font-bold u-mb-2">Sarah Johnson</h3>
|
|
69
|
+
<p className="u-text-sm u-opacity-90 u-mb-4">Senior Product Designer</p>
|
|
70
|
+
<Badge variant="secondary" className="u-mb-4">
|
|
71
|
+
Available for hire
|
|
72
|
+
</Badge>
|
|
73
|
+
<div className="u-flex u-gap-2 u-justify-center u-flex-wrap" style={{ gap: '12px' }}>
|
|
74
|
+
<Button glass size="sm" variant="primary">
|
|
75
|
+
Follow
|
|
76
|
+
</Button>
|
|
77
|
+
<Button glass size="sm" variant="outline-light">
|
|
78
|
+
Message
|
|
79
|
+
</Button>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</AtomixGlass>
|
|
83
|
+
</div>
|
|
84
|
+
</BackgroundWrapper>
|
|
85
|
+
</StoryErrorBoundary>
|
|
86
|
+
),
|
|
87
|
+
parameters: {
|
|
88
|
+
docs: {
|
|
89
|
+
description: {
|
|
90
|
+
story: 'User profile card with avatar, badges, and action buttons.',
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
},
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* Stats Card
|
|
98
|
+
*
|
|
99
|
+
* Dashboard statistics card with icon and metrics.
|
|
100
|
+
*/
|
|
101
|
+
export const StatsCard: Story = {
|
|
102
|
+
render: () => (
|
|
103
|
+
<StoryErrorBoundary>
|
|
104
|
+
<BackgroundWrapper backgroundImage={backgroundImages[3]}>
|
|
105
|
+
<div style={{ maxWidth: '320px' }}>
|
|
106
|
+
<AtomixGlass
|
|
107
|
+
displacementScale={60}
|
|
108
|
+
blurAmount={0.4}
|
|
109
|
+
saturation={130}
|
|
110
|
+
borderRadius={20}
|
|
111
|
+
mode="standard"
|
|
112
|
+
padding="28px"
|
|
113
|
+
>
|
|
114
|
+
<div className="u-text-white">
|
|
115
|
+
<div className="u-flex u-items-center u-justify-between u-mb-3">
|
|
116
|
+
<div
|
|
117
|
+
style={{
|
|
118
|
+
width: '48px',
|
|
119
|
+
height: '48px',
|
|
120
|
+
borderRadius: '12px',
|
|
121
|
+
background: 'rgba(99, 102, 241, 0.2)',
|
|
122
|
+
display: 'flex',
|
|
123
|
+
alignItems: 'center',
|
|
124
|
+
justifyContent: 'center',
|
|
125
|
+
fontSize: '24px',
|
|
126
|
+
}}
|
|
127
|
+
>
|
|
128
|
+
📊
|
|
129
|
+
</div>
|
|
130
|
+
<Badge variant="success">+12.5%</Badge>
|
|
131
|
+
</div>
|
|
132
|
+
<p className="u-text-sm u-opacity-80 u-mb-1">Total Revenue</p>
|
|
133
|
+
<h3 className="u-mt-0 u-text-3xl u-font-bold u-mb-2">$48,295</h3>
|
|
134
|
+
<p className="u-text-xs u-opacity-70">Compared to $42,890 last month</p>
|
|
135
|
+
</div>
|
|
136
|
+
</AtomixGlass>
|
|
137
|
+
</div>
|
|
138
|
+
</BackgroundWrapper>
|
|
139
|
+
</StoryErrorBoundary>
|
|
140
|
+
),
|
|
141
|
+
parameters: {
|
|
142
|
+
docs: {
|
|
143
|
+
description: {
|
|
144
|
+
story: 'Dashboard statistics card displaying metrics with trend indicators.',
|
|
145
|
+
},
|
|
146
|
+
},
|
|
147
|
+
},
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
/**
|
|
151
|
+
* Content Card
|
|
152
|
+
*
|
|
153
|
+
* Blog post or article preview card.
|
|
154
|
+
*/
|
|
155
|
+
export const ContentCard: Story = {
|
|
156
|
+
render: () => (
|
|
157
|
+
<StoryErrorBoundary>
|
|
158
|
+
<BackgroundWrapper backgroundImage={backgroundImages[6]}>
|
|
159
|
+
<div style={{ maxWidth: '420px' }}>
|
|
160
|
+
<AtomixGlass
|
|
161
|
+
displacementScale={65}
|
|
162
|
+
blurAmount={0.5}
|
|
163
|
+
saturation={135}
|
|
164
|
+
borderRadius={20}
|
|
165
|
+
mode="standard"
|
|
166
|
+
padding="0"
|
|
167
|
+
>
|
|
168
|
+
<div className="u-text-white">
|
|
169
|
+
<div
|
|
170
|
+
style={{
|
|
171
|
+
height: '200px',
|
|
172
|
+
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
173
|
+
borderRadius: '20px 20px 0 0',
|
|
174
|
+
display: 'flex',
|
|
175
|
+
alignItems: 'center',
|
|
176
|
+
justifyContent: 'center',
|
|
177
|
+
fontSize: '64px',
|
|
178
|
+
}}
|
|
179
|
+
aria-hidden="true"
|
|
180
|
+
>
|
|
181
|
+
🎨
|
|
182
|
+
</div>
|
|
183
|
+
<div style={{ padding: '24px' }}>
|
|
184
|
+
<div className="u-flex u-items-center u-gap-2 u-mb-3">
|
|
185
|
+
<Badge variant="primary">Design</Badge>
|
|
186
|
+
<span className="u-text-xs u-opacity-70">5 min read</span>
|
|
187
|
+
</div>
|
|
188
|
+
<h3 className="u-mt-0 u-text-xl u-font-bold u-mb-2">
|
|
189
|
+
The Future of Glass Morphism in UI Design
|
|
190
|
+
</h3>
|
|
191
|
+
<p className="u-text-sm u-opacity-80 u-line-height-relaxed u-mb-4">
|
|
192
|
+
Exploring how glass morphism continues to shape modern interface design trends
|
|
193
|
+
and user expectations.
|
|
194
|
+
</p>
|
|
195
|
+
<Button glass size="sm" variant="outline-light" className="u-w-full">
|
|
196
|
+
Read Article
|
|
197
|
+
</Button>
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
</AtomixGlass>
|
|
201
|
+
</div>
|
|
202
|
+
</BackgroundWrapper>
|
|
203
|
+
</StoryErrorBoundary>
|
|
204
|
+
),
|
|
205
|
+
parameters: {
|
|
206
|
+
docs: {
|
|
207
|
+
description: {
|
|
208
|
+
story: 'Content card for blog posts or articles with category badge and call-to-action.',
|
|
209
|
+
},
|
|
210
|
+
},
|
|
211
|
+
},
|
|
212
|
+
};
|
|
@@ -0,0 +1,348 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DashboardExamples.stories.tsx
|
|
3
|
+
*
|
|
4
|
+
* Dashboard UI components and widgets using AtomixGlass.
|
|
5
|
+
* Perfect for analytics, stats cards, and data visualization interfaces.
|
|
6
|
+
*
|
|
7
|
+
* @package Atomix
|
|
8
|
+
* @component AtomixGlass
|
|
9
|
+
*/
|
|
10
|
+
import React from 'react';
|
|
11
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
12
|
+
import AtomixGlass from '../AtomixGlass';
|
|
13
|
+
import { BackgroundWrapper, backgroundImages, StoryErrorBoundary } from './shared-components';
|
|
14
|
+
import { baseArgTypes } from './argTypes';
|
|
15
|
+
|
|
16
|
+
import { Badge } from '../../Badge';
|
|
17
|
+
import { Icon } from '../../Icon/Icon';
|
|
18
|
+
|
|
19
|
+
const meta: Meta<typeof AtomixGlass> = {
|
|
20
|
+
title: 'Components/AtomixGlass/Examples/Dashboard Examples',
|
|
21
|
+
component: AtomixGlass,
|
|
22
|
+
parameters: {
|
|
23
|
+
layout: 'fullscreen',
|
|
24
|
+
docs: {
|
|
25
|
+
description: {
|
|
26
|
+
component:
|
|
27
|
+
'Dashboard UI examples demonstrating AtomixGlass for analytics, statistics, and data visualization interfaces.',
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
tags: ['!autodocs'],
|
|
32
|
+
argTypes: {
|
|
33
|
+
...baseArgTypes,
|
|
34
|
+
children: { control: false },
|
|
35
|
+
},
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export default meta;
|
|
39
|
+
type Story = StoryObj<typeof AtomixGlass>;
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Analytics Dashboard
|
|
43
|
+
*
|
|
44
|
+
* Complete dashboard layout with multiple stats cards and metrics.
|
|
45
|
+
*/
|
|
46
|
+
export const AnalyticsDashboard: Story = {
|
|
47
|
+
render: () => (
|
|
48
|
+
<StoryErrorBoundary>
|
|
49
|
+
<BackgroundWrapper backgroundImage={backgroundImages[5]} overlay overlayOpacity={0.4}>
|
|
50
|
+
<div style={{ padding: '40px 24px', minHeight: '100vh' }}>
|
|
51
|
+
<div className="u-mb-5 u-text-white">
|
|
52
|
+
<h1 className="u-m-0 u-text-3xl u-font-bold">Analytics Overview</h1>
|
|
53
|
+
<p className="u-mt-1 u-opacity-80">Track your performance metrics</p>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
{/* Stats Grid */}
|
|
57
|
+
<div
|
|
58
|
+
style={{
|
|
59
|
+
display: 'grid',
|
|
60
|
+
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
|
|
61
|
+
gap: '24px',
|
|
62
|
+
marginBottom: '32px',
|
|
63
|
+
}}
|
|
64
|
+
>
|
|
65
|
+
{/* Revenue Card */}
|
|
66
|
+
<AtomixGlass
|
|
67
|
+
displacementScale={60}
|
|
68
|
+
blurAmount={0.5}
|
|
69
|
+
saturation={130}
|
|
70
|
+
borderRadius={20}
|
|
71
|
+
mode="standard"
|
|
72
|
+
padding="28px"
|
|
73
|
+
>
|
|
74
|
+
<div className="u-text-white">
|
|
75
|
+
<div className="u-flex u-items-center u-justify-between u-mb-3">
|
|
76
|
+
<div
|
|
77
|
+
style={{
|
|
78
|
+
width: '48px',
|
|
79
|
+
height: '48px',
|
|
80
|
+
borderRadius: '12px',
|
|
81
|
+
background: 'rgba(99, 102, 241, 0.2)',
|
|
82
|
+
display: 'flex',
|
|
83
|
+
alignItems: 'center',
|
|
84
|
+
justifyContent: 'center',
|
|
85
|
+
fontSize: '24px',
|
|
86
|
+
}}
|
|
87
|
+
aria-hidden="true"
|
|
88
|
+
>
|
|
89
|
+
💰
|
|
90
|
+
</div>
|
|
91
|
+
<Badge variant="success">+12.5%</Badge>
|
|
92
|
+
</div>
|
|
93
|
+
<p className="u-text-sm u-opacity-80 u-mb-1">Total Revenue</p>
|
|
94
|
+
<h3 className="u-mt-0 u-text-3xl u-font-bold u-mb-2">$48,295</h3>
|
|
95
|
+
<p className="u-text-xs u-opacity-70">Compared to $42,890 last month</p>
|
|
96
|
+
</div>
|
|
97
|
+
</AtomixGlass>
|
|
98
|
+
|
|
99
|
+
{/* Users Card */}
|
|
100
|
+
<AtomixGlass
|
|
101
|
+
displacementScale={60}
|
|
102
|
+
blurAmount={0.5}
|
|
103
|
+
saturation={130}
|
|
104
|
+
borderRadius={20}
|
|
105
|
+
mode="standard"
|
|
106
|
+
padding="28px"
|
|
107
|
+
>
|
|
108
|
+
<div className="u-text-white">
|
|
109
|
+
<div className="u-flex u-items-center u-justify-between u-mb-3">
|
|
110
|
+
<div
|
|
111
|
+
style={{
|
|
112
|
+
width: '48px',
|
|
113
|
+
height: '48px',
|
|
114
|
+
borderRadius: '12px',
|
|
115
|
+
background: 'rgba(168, 85, 247, 0.2)',
|
|
116
|
+
display: 'flex',
|
|
117
|
+
alignItems: 'center',
|
|
118
|
+
justifyContent: 'center',
|
|
119
|
+
fontSize: '24px',
|
|
120
|
+
}}
|
|
121
|
+
aria-hidden="true"
|
|
122
|
+
>
|
|
123
|
+
👥
|
|
124
|
+
</div>
|
|
125
|
+
<Badge variant="success">+8.2%</Badge>
|
|
126
|
+
</div>
|
|
127
|
+
<p className="u-text-sm u-opacity-80 u-mb-1">Active Users</p>
|
|
128
|
+
<h3 className="u-mt-0 u-text-3xl u-font-bold u-mb-2">12,847</h3>
|
|
129
|
+
<p className="u-text-xs u-opacity-70">1,234 users online now</p>
|
|
130
|
+
</div>
|
|
131
|
+
</AtomixGlass>
|
|
132
|
+
|
|
133
|
+
{/* Orders Card */}
|
|
134
|
+
<AtomixGlass
|
|
135
|
+
displacementScale={60}
|
|
136
|
+
blurAmount={0.5}
|
|
137
|
+
saturation={130}
|
|
138
|
+
borderRadius={20}
|
|
139
|
+
mode="standard"
|
|
140
|
+
padding="28px"
|
|
141
|
+
>
|
|
142
|
+
<div className="u-text-white">
|
|
143
|
+
<div className="u-flex u-items-center u-justify-between u-mb-3">
|
|
144
|
+
<div
|
|
145
|
+
style={{
|
|
146
|
+
width: '48px',
|
|
147
|
+
height: '48px',
|
|
148
|
+
borderRadius: '12px',
|
|
149
|
+
background: 'rgba(236, 72, 153, 0.2)',
|
|
150
|
+
display: 'flex',
|
|
151
|
+
alignItems: 'center',
|
|
152
|
+
justifyContent: 'center',
|
|
153
|
+
fontSize: '24px',
|
|
154
|
+
}}
|
|
155
|
+
aria-hidden="true"
|
|
156
|
+
>
|
|
157
|
+
📦
|
|
158
|
+
</div>
|
|
159
|
+
<Badge variant="danger">-3.1%</Badge>
|
|
160
|
+
</div>
|
|
161
|
+
<p className="u-text-sm u-opacity-80 u-mb-1">Total Orders</p>
|
|
162
|
+
<h3 className="u-mt-0 u-text-3xl u-font-bold u-mb-2">1,429</h3>
|
|
163
|
+
<p className="u-text-xs u-opacity-70">Compared to 1,475 last month</p>
|
|
164
|
+
</div>
|
|
165
|
+
</AtomixGlass>
|
|
166
|
+
|
|
167
|
+
{/* Conversion Card */}
|
|
168
|
+
<AtomixGlass
|
|
169
|
+
displacementScale={60}
|
|
170
|
+
blurAmount={0.5}
|
|
171
|
+
saturation={130}
|
|
172
|
+
borderRadius={20}
|
|
173
|
+
mode="standard"
|
|
174
|
+
padding="28px"
|
|
175
|
+
>
|
|
176
|
+
<div className="u-text-white">
|
|
177
|
+
<div className="u-flex u-items-center u-justify-between u-mb-3">
|
|
178
|
+
<div
|
|
179
|
+
style={{
|
|
180
|
+
width: '48px',
|
|
181
|
+
height: '48px',
|
|
182
|
+
borderRadius: '12px',
|
|
183
|
+
background: 'rgba(251, 191, 36, 0.2)',
|
|
184
|
+
display: 'flex',
|
|
185
|
+
alignItems: 'center',
|
|
186
|
+
justifyContent: 'center',
|
|
187
|
+
fontSize: '24px',
|
|
188
|
+
}}
|
|
189
|
+
aria-hidden="true"
|
|
190
|
+
>
|
|
191
|
+
📈
|
|
192
|
+
</div>
|
|
193
|
+
<Badge variant="success">+4.3%</Badge>
|
|
194
|
+
</div>
|
|
195
|
+
<p className="u-text-sm u-opacity-80 u-mb-1">Conversion Rate</p>
|
|
196
|
+
<h3 className="u-mt-0 u-text-3xl u-font-bold u-mb-2">3.24%</h3>
|
|
197
|
+
<p className="u-text-xs u-opacity-70">Industry average: 2.86%</p>
|
|
198
|
+
</div>
|
|
199
|
+
</AtomixGlass>
|
|
200
|
+
</div>
|
|
201
|
+
|
|
202
|
+
{/* Recent Activity Section */}
|
|
203
|
+
<AtomixGlass
|
|
204
|
+
displacementScale={65}
|
|
205
|
+
blurAmount={0.6}
|
|
206
|
+
saturation={135}
|
|
207
|
+
borderRadius={20}
|
|
208
|
+
mode="standard"
|
|
209
|
+
>
|
|
210
|
+
<div className="u-text-white" style={{ padding: '28px' }}>
|
|
211
|
+
<h2 className="u-mt-0 u-text-xl u-font-bold u-mb-4">Recent Activity</h2>
|
|
212
|
+
|
|
213
|
+
<div className="u-divide-y" style={{ borderColor: 'rgba(255,255,255,0.1)' }}>
|
|
214
|
+
{[
|
|
215
|
+
{ action: 'New order received', time: '2 minutes ago', icon: '🛒', color: 'rgba(99, 102, 241, 0.2)' },
|
|
216
|
+
{ action: 'Payment processed', time: '15 minutes ago', icon: '💳', color: 'rgba(34, 197, 94, 0.2)' },
|
|
217
|
+
{ action: 'User registered', time: '1 hour ago', icon: '👤', color: 'rgba(168, 85, 247, 0.2)' },
|
|
218
|
+
{ action: 'Product updated', time: '3 hours ago', icon: '✏️', color: 'rgba(251, 191, 36, 0.2)' },
|
|
219
|
+
].map((item, index) => (
|
|
220
|
+
<div key={index} className="u-py-3 u-flex u-items-center u-gap-3">
|
|
221
|
+
<div
|
|
222
|
+
style={{
|
|
223
|
+
width: '40px',
|
|
224
|
+
height: '40px',
|
|
225
|
+
borderRadius: '10px',
|
|
226
|
+
background: item.color,
|
|
227
|
+
display: 'flex',
|
|
228
|
+
alignItems: 'center',
|
|
229
|
+
justifyContent: 'center',
|
|
230
|
+
fontSize: '20px',
|
|
231
|
+
flexShrink: 0,
|
|
232
|
+
}}
|
|
233
|
+
aria-hidden="true"
|
|
234
|
+
>
|
|
235
|
+
{item.icon}
|
|
236
|
+
</div>
|
|
237
|
+
<div className="u-flex-1">
|
|
238
|
+
<p className="u-m-0 u-font-medium">{item.action}</p>
|
|
239
|
+
<p className="u-m-0 u-text-xs u-opacity-70">{item.time}</p>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
))}
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
</AtomixGlass>
|
|
246
|
+
</div>
|
|
247
|
+
</BackgroundWrapper>
|
|
248
|
+
</StoryErrorBoundary>
|
|
249
|
+
),
|
|
250
|
+
parameters: {
|
|
251
|
+
docs: {
|
|
252
|
+
description: {
|
|
253
|
+
story:
|
|
254
|
+
'Complete analytics dashboard with stats cards, trend indicators, and recent activity feed.',
|
|
255
|
+
},
|
|
256
|
+
},
|
|
257
|
+
},
|
|
258
|
+
};
|
|
259
|
+
|
|
260
|
+
/**
|
|
261
|
+
* Weather Widget
|
|
262
|
+
*
|
|
263
|
+
* Compact weather information card with forecast.
|
|
264
|
+
*/
|
|
265
|
+
export const WeatherWidget: Story = {
|
|
266
|
+
render: () => (
|
|
267
|
+
<StoryErrorBoundary>
|
|
268
|
+
<BackgroundWrapper backgroundImage={backgroundImages[4]} overlay overlayOpacity={0.3}>
|
|
269
|
+
<div style={{ maxWidth: '340px' }}>
|
|
270
|
+
<AtomixGlass
|
|
271
|
+
displacementScale={70}
|
|
272
|
+
blurAmount={0.75}
|
|
273
|
+
saturation={140}
|
|
274
|
+
borderRadius={24}
|
|
275
|
+
mode="standard"
|
|
276
|
+
padding="32px"
|
|
277
|
+
>
|
|
278
|
+
<div className="u-text-center u-text-white">
|
|
279
|
+
<div
|
|
280
|
+
style={{
|
|
281
|
+
fontSize: '64px',
|
|
282
|
+
margin: '0 auto 16px',
|
|
283
|
+
filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.2))',
|
|
284
|
+
}}
|
|
285
|
+
aria-hidden="true"
|
|
286
|
+
>
|
|
287
|
+
⛅
|
|
288
|
+
</div>
|
|
289
|
+
|
|
290
|
+
<h2 className="u-m-0 u-text-5xl u-font-bold" style={{ fontSize: '56px' }}>
|
|
291
|
+
72°F
|
|
292
|
+
</h2>
|
|
293
|
+
<p className="u-m-0 u-text-lg u-opacity-90 u-mb-4">Partly Cloudy</p>
|
|
294
|
+
|
|
295
|
+
<div
|
|
296
|
+
style={{
|
|
297
|
+
display: 'grid',
|
|
298
|
+
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
299
|
+
gap: '16px',
|
|
300
|
+
padding: '20px 0',
|
|
301
|
+
borderTop: '1px solid rgba(255,255,255,0.1)',
|
|
302
|
+
borderBottom: '1px solid rgba(255,255,255,0.1)',
|
|
303
|
+
marginBottom: '20px',
|
|
304
|
+
}}
|
|
305
|
+
>
|
|
306
|
+
<div>
|
|
307
|
+
<p className="u-m-0 u-text-xs u-opacity-70">Wind</p>
|
|
308
|
+
<p className="u-m-0 u-font-semibold">12 mph</p>
|
|
309
|
+
</div>
|
|
310
|
+
<div>
|
|
311
|
+
<p className="u-m-0 u-text-xs u-opacity-70">Humidity</p>
|
|
312
|
+
<p className="u-m-0 u-font-semibold">45%</p>
|
|
313
|
+
</div>
|
|
314
|
+
<div>
|
|
315
|
+
<p className="u-m-0 u-text-xs u-opacity-70">UV Index</p>
|
|
316
|
+
<p className="u-m-0 u-font-semibold">Moderate</p>
|
|
317
|
+
</div>
|
|
318
|
+
</div>
|
|
319
|
+
|
|
320
|
+
{/* 3-Day Forecast */}
|
|
321
|
+
<div className="u-flex u-justify-between u-gap-2">
|
|
322
|
+
{[
|
|
323
|
+
{ day: 'Thu', temp: '74°', icon: '☀️' },
|
|
324
|
+
{ day: 'Fri', temp: '71°', icon: '🌧️' },
|
|
325
|
+
{ day: 'Sat', temp: '69°', icon: '⛈️' },
|
|
326
|
+
].map((forecast, index) => (
|
|
327
|
+
<div key={index} className="u-text-center">
|
|
328
|
+
<p className="u-m-0 u-text-sm u-opacity-80">{forecast.day}</p>
|
|
329
|
+
<div style={{ fontSize: '24px', margin: '8px 0' }}>{forecast.icon}</div>
|
|
330
|
+
<p className="u-m-0 u-font-semibold">{forecast.temp}</p>
|
|
331
|
+
</div>
|
|
332
|
+
))}
|
|
333
|
+
</div>
|
|
334
|
+
</div>
|
|
335
|
+
</AtomixGlass>
|
|
336
|
+
</div>
|
|
337
|
+
</BackgroundWrapper>
|
|
338
|
+
</StoryErrorBoundary>
|
|
339
|
+
),
|
|
340
|
+
parameters: {
|
|
341
|
+
docs: {
|
|
342
|
+
description: {
|
|
343
|
+
story:
|
|
344
|
+
'Weather widget displaying current conditions, detailed metrics, and 3-day forecast.',
|
|
345
|
+
},
|
|
346
|
+
},
|
|
347
|
+
},
|
|
348
|
+
};
|