@shohojdhara/atomix 0.5.0 → 0.5.1
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/dist/atomix.css +95 -69
- package/dist/atomix.css.map +1 -1
- package/dist/atomix.min.css +1 -1
- package/dist/atomix.min.css.map +1 -1
- package/dist/charts.d.ts +1 -0
- package/dist/charts.js +231 -332
- package/dist/charts.js.map +1 -1
- package/dist/core.d.ts +1 -0
- package/dist/core.js +232 -333
- package/dist/core.js.map +1 -1
- package/dist/forms.d.ts +1 -0
- package/dist/forms.js +231 -332
- package/dist/forms.js.map +1 -1
- package/dist/heavy.d.ts +11 -2
- package/dist/heavy.js +233 -334
- package/dist/heavy.js.map +1 -1
- package/dist/index.d.ts +13 -2
- package/dist/index.esm.js +228 -327
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +227 -326
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +11 -1
- package/src/components/AtomixGlass/AtomixGlass.tsx +188 -128
- package/src/components/AtomixGlass/AtomixGlassContainer.tsx +62 -90
- package/src/components/AtomixGlass/PerformanceDashboard.tsx +153 -201
- package/src/components/AtomixGlass/glass-utils.ts +50 -0
- package/src/components/AtomixGlass/stories/AnimationFeatures.stories.tsx +52 -46
- package/src/components/AtomixGlass/stories/Examples.stories.tsx +573 -236
- package/src/components/AtomixGlass/stories/Playground.stories.tsx +88 -41
- package/src/components/AtomixGlass/stories/argTypes.ts +19 -19
- package/src/components/AtomixGlass/stories/shared-components.tsx +7 -12
- package/src/components/AtomixGlass/stories/types.ts +3 -3
- package/src/lib/composables/useAtomixGlass.ts +108 -71
- package/src/lib/composables/useAtomixGlassStyles.ts +0 -2
- package/src/lib/constants/components.ts +1 -0
- package/src/lib/types/components.ts +1 -0
- package/src/lib/utils/displacement-generator.ts +1 -1
- package/src/styles/06-components/_components.atomix-glass.scss +158 -97
- package/scripts/cli/__tests__/README.md +0 -81
- package/scripts/cli/__tests__/basic.test.js +0 -116
- package/scripts/cli/__tests__/clean.test.js +0 -278
- package/scripts/cli/__tests__/component-generator.test.js +0 -332
- package/scripts/cli/__tests__/component-validator.test.js +0 -433
- package/scripts/cli/__tests__/generator.test.js +0 -613
- package/scripts/cli/__tests__/glass-motion.test.js +0 -256
- package/scripts/cli/__tests__/integration.test.js +0 -938
- package/scripts/cli/__tests__/migrate.test.js +0 -74
- package/scripts/cli/__tests__/security.test.js +0 -206
- package/scripts/cli/__tests__/test-setup.js +0 -135
- package/scripts/cli/__tests__/theme-bridge.test.js +0 -507
- package/scripts/cli/__tests__/token-manager.test.js +0 -251
- package/scripts/cli/__tests__/token-provider.test.js +0 -361
- package/scripts/cli/__tests__/utils.test.js +0 -165
- package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap +0 -216
- package/src/components/AtomixGlass/stories/AnimationTests.stories.tsx +0 -95
- package/src/components/AtomixGlass/stories/CardExamples.stories.tsx +0 -212
- package/src/components/AtomixGlass/stories/Customization.stories.tsx +0 -131
- package/src/components/AtomixGlass/stories/DashboardExamples.stories.tsx +0 -348
- package/src/components/AtomixGlass/stories/EcommerceExamples.stories.tsx +0 -410
- package/src/components/AtomixGlass/stories/FormExamples.stories.tsx +0 -436
- package/src/components/AtomixGlass/stories/HeroExamples.stories.tsx +0 -264
- package/src/components/AtomixGlass/stories/InteractivePlayground.stories.tsx +0 -247
- package/src/components/AtomixGlass/stories/MobileUIExamples.stories.tsx +0 -418
- package/src/components/AtomixGlass/stories/ModalExamples.stories.tsx +0 -402
- package/src/components/AtomixGlass/stories/Modes.stories.tsx +0 -1082
- package/src/components/AtomixGlass/stories/Overview.stories.tsx +0 -497
- package/src/components/AtomixGlass/stories/Performance.stories.tsx +0 -103
- package/src/components/AtomixGlass/stories/PresetGallery.stories.tsx +0 -335
- package/src/components/AtomixGlass/stories/Shaders.stories.tsx +0 -395
- package/src/components/AtomixGlass/stories/WidgetExamples.stories.tsx +0 -441
- package/src/components/TypedButton/TypedButton.stories.tsx +0 -59
- package/src/components/TypedButton/TypedButton.tsx +0 -39
- package/src/components/TypedButton/index.ts +0 -2
- package/src/lib/composables/useTypedButton.ts +0 -66
|
@@ -1,165 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* CLI Utilities Tests
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
import { describe, it, expect, beforeEach, afterEach } from 'vitest';
|
|
6
|
-
import {
|
|
7
|
-
validatePath,
|
|
8
|
-
validateComponentName,
|
|
9
|
-
validateThemeName,
|
|
10
|
-
sanitizeInput,
|
|
11
|
-
fileExists,
|
|
12
|
-
AtomixCLIError
|
|
13
|
-
} from '../utils.js';
|
|
14
|
-
import { mkdtemp, rm, writeFile } from 'fs/promises';
|
|
15
|
-
import { join } from 'path';
|
|
16
|
-
import { tmpdir } from 'os';
|
|
17
|
-
|
|
18
|
-
describe('CLI Utils', () => {
|
|
19
|
-
let tempDir;
|
|
20
|
-
|
|
21
|
-
beforeEach(async () => {
|
|
22
|
-
tempDir = await mkdtemp(join(tmpdir(), 'atomix-test-'));
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
afterEach(async () => {
|
|
26
|
-
await rm(tempDir, { recursive: true, force: true });
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
describe('validatePath', () => {
|
|
30
|
-
it('should accept valid relative paths', () => {
|
|
31
|
-
const result = validatePath('./src/components', tempDir);
|
|
32
|
-
expect(result.isValid).toBe(true);
|
|
33
|
-
expect(result.safePath != null ? result.safePath : '').toMatch(/src\/components/);
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
it('should reject paths outside project directory', () => {
|
|
37
|
-
const result = validatePath('../../etc/passwd', tempDir);
|
|
38
|
-
expect(result.isValid).toBe(false);
|
|
39
|
-
expect(result.error).toMatch(/outside|traversal/);
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
it('should reject sensitive files', () => {
|
|
43
|
-
const result = validatePath('.env', tempDir);
|
|
44
|
-
expect(result.isValid).toBe(false);
|
|
45
|
-
expect(result.error).toContain('sensitive path');
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
it('should handle absolute paths within project', () => {
|
|
49
|
-
const validPath = join(tempDir, 'src', 'components');
|
|
50
|
-
const result = validatePath(validPath, tempDir);
|
|
51
|
-
expect(result.isValid).toBe(true);
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
it('should normalize paths correctly', () => {
|
|
55
|
-
const result = validatePath('./src/../src/components', tempDir);
|
|
56
|
-
expect(result.isValid).toBe(true);
|
|
57
|
-
expect(result.safePath != null ? result.safePath : '').toMatch(/src\/components/);
|
|
58
|
-
});
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
describe('validateComponentName', () => {
|
|
62
|
-
it('should accept valid PascalCase names', () => {
|
|
63
|
-
const validNames = ['Button', 'CardHeader', 'ModalDialog', 'FormInput'];
|
|
64
|
-
|
|
65
|
-
validNames.forEach(name => {
|
|
66
|
-
const result = validateComponentName(name);
|
|
67
|
-
expect(result.isValid).toBe(true);
|
|
68
|
-
});
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
it('should reject invalid names', () => {
|
|
72
|
-
const invalidNames = ['123Button', '', '1', 'Component', 'React'];
|
|
73
|
-
|
|
74
|
-
invalidNames.forEach(name => {
|
|
75
|
-
const result = validateComponentName(name);
|
|
76
|
-
expect(result.isValid).toBe(false);
|
|
77
|
-
});
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
it('should reject reserved words', () => {
|
|
81
|
-
const reservedWords = ['Component', 'React', 'Fragment', 'Suspense'];
|
|
82
|
-
|
|
83
|
-
reservedWords.forEach(name => {
|
|
84
|
-
const result = validateComponentName(name);
|
|
85
|
-
expect(result.isValid).toBe(false);
|
|
86
|
-
});
|
|
87
|
-
});
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
describe('validateThemeName', () => {
|
|
91
|
-
it('should accept valid kebab-case names', () => {
|
|
92
|
-
const validNames = ['dark-theme', 'light', 'high-contrast', 'custom-brand'];
|
|
93
|
-
|
|
94
|
-
validNames.forEach(name => {
|
|
95
|
-
const result = validateThemeName(name);
|
|
96
|
-
expect(result.isValid).toBe(true);
|
|
97
|
-
});
|
|
98
|
-
});
|
|
99
|
-
|
|
100
|
-
it('should reject invalid theme names', () => {
|
|
101
|
-
const invalidNames = ['DarkTheme', 'theme_dark', 'Theme-Dark', '123theme', ''];
|
|
102
|
-
|
|
103
|
-
invalidNames.forEach(name => {
|
|
104
|
-
const result = validateThemeName(name);
|
|
105
|
-
expect(result.isValid).toBe(false);
|
|
106
|
-
});
|
|
107
|
-
});
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
describe('sanitizeInput', () => {
|
|
111
|
-
it('should remove dangerous shell characters', () => {
|
|
112
|
-
const dangerousInputs = [
|
|
113
|
-
'test; rm -rf /',
|
|
114
|
-
'input && malicious-command',
|
|
115
|
-
'command | pipe',
|
|
116
|
-
'`substitution`',
|
|
117
|
-
'$(command)',
|
|
118
|
-
'input > /dev/null',
|
|
119
|
-
'"quoted"',
|
|
120
|
-
"'singlequoted'",
|
|
121
|
-
'" $(whoami) "',
|
|
122
|
-
"' ; rm -rf / '"
|
|
123
|
-
];
|
|
124
|
-
|
|
125
|
-
dangerousInputs.forEach(input => {
|
|
126
|
-
const sanitized = sanitizeInput(input);
|
|
127
|
-
expect(sanitized).not.toMatch(/[;&|`$<>\\"']/);
|
|
128
|
-
});
|
|
129
|
-
});
|
|
130
|
-
|
|
131
|
-
it('should preserve safe characters', () => {
|
|
132
|
-
const safeInput = 'Button-Component_123';
|
|
133
|
-
const sanitized = sanitizeInput(safeInput);
|
|
134
|
-
expect(sanitized).toBe(safeInput);
|
|
135
|
-
});
|
|
136
|
-
});
|
|
137
|
-
|
|
138
|
-
describe('fileExists', () => {
|
|
139
|
-
it('should return true for existing files', async () => {
|
|
140
|
-
const testFile = join(tempDir, 'test.txt');
|
|
141
|
-
await writeFile(testFile, 'test content');
|
|
142
|
-
|
|
143
|
-
const exists = await fileExists(testFile);
|
|
144
|
-
expect(exists).toBe(true);
|
|
145
|
-
});
|
|
146
|
-
|
|
147
|
-
it('should return false for non-existing files', async () => {
|
|
148
|
-
const nonExistent = join(tempDir, 'nonexistent.txt');
|
|
149
|
-
const exists = await fileExists(nonExistent);
|
|
150
|
-
expect(exists).toBe(false);
|
|
151
|
-
});
|
|
152
|
-
});
|
|
153
|
-
|
|
154
|
-
describe('AtomixCLIError', () => {
|
|
155
|
-
it('should create error with code and suggestions', () => {
|
|
156
|
-
const suggestions = ['Use PascalCase', 'Start with letter'];
|
|
157
|
-
const error = new AtomixCLIError('Invalid name', 'INVALID_NAME', suggestions);
|
|
158
|
-
|
|
159
|
-
expect(error.message).toBe('Invalid name');
|
|
160
|
-
expect(error.code).toBe('INVALID_NAME');
|
|
161
|
-
expect(error.suggestions).toEqual(suggestions);
|
|
162
|
-
expect(error.name).toBe('AtomixCLIError');
|
|
163
|
-
});
|
|
164
|
-
});
|
|
165
|
-
});
|
|
@@ -1,216 +0,0 @@
|
|
|
1
|
-
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
2
|
-
|
|
3
|
-
exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`] = `
|
|
4
|
-
<div>
|
|
5
|
-
<div
|
|
6
|
-
class="c-atomix-glass"
|
|
7
|
-
style="--atomix-glass-radius: 16px; --atomix-glass-transform: scale(1); --atomix-glass-top: 0px; --atomix-glass-left: 0px; --atomix-glass-width: 270px; --atomix-glass-height: 69px; --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem); --atomix-glass-blend-mode: overlay; --atomix-glass-border-gradient-1: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08399999999999999) 33%, rgba(255, 255, 255, 0.27999999999999997) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-border-gradient-2: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22399999999999998) 33%, rgba(255, 255, 255, 0.42) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-hover-1-opacity: 0; --atomix-glass-hover-1-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%); --atomix-glass-hover-2-opacity: 0; --atomix-glass-hover-2-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%); --atomix-glass-hover-3-opacity: 0; --atomix-glass-hover-3-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); --atomix-glass-base-opacity: 0; --atomix-glass-base-gradient: rgba(255, 255, 255, 0.1); --atomix-glass-overlay-opacity: 0; --atomix-glass-overlay-gradient: rgba(255, 255, 255, 0.05); --atomix-glass-overlay-highlight-opacity: 0; --atomix-glass-overlay-highlight-bg: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 60%);"
|
|
8
|
-
>
|
|
9
|
-
<div
|
|
10
|
-
class="c-atomix-glass__container "
|
|
11
|
-
style="position: relative; --atomix-glass-container-radius: 16px; --atomix-glass-container-backdrop: blur(0.1px) saturate(140%) contrast(1.4) brightness(0.9); --atomix-glass-container-shadow: 0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset; --atomix-glass-container-shadow-opacity: 1; --atomix-glass-container-bg: none; --atomix-glass-container-text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.4); --atomix-glass-container-box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.25); --atomix-glass-container-width: 100%; --atomix-glass-container-height: 100%; --atomix-glass-container-padding: 0;"
|
|
12
|
-
>
|
|
13
|
-
<div
|
|
14
|
-
class="c-atomix-glass__inner"
|
|
15
|
-
>
|
|
16
|
-
<div
|
|
17
|
-
class="c-atomix-glass__filter"
|
|
18
|
-
>
|
|
19
|
-
<svg
|
|
20
|
-
aria-hidden="true"
|
|
21
|
-
style="position: absolute; width: 100%; height: 100%; inset: 0;"
|
|
22
|
-
>
|
|
23
|
-
<defs>
|
|
24
|
-
<radialgradient
|
|
25
|
-
cx="50%"
|
|
26
|
-
cy="50%"
|
|
27
|
-
id="atomix-glass-filter-16-edge-mask"
|
|
28
|
-
r="50%"
|
|
29
|
-
>
|
|
30
|
-
<stop
|
|
31
|
-
offset="0%"
|
|
32
|
-
stop-color="black"
|
|
33
|
-
stop-opacity="0"
|
|
34
|
-
/>
|
|
35
|
-
<stop
|
|
36
|
-
offset="76%"
|
|
37
|
-
stop-color="black"
|
|
38
|
-
stop-opacity="0"
|
|
39
|
-
/>
|
|
40
|
-
<stop
|
|
41
|
-
offset="100%"
|
|
42
|
-
stop-color="white"
|
|
43
|
-
stop-opacity="1"
|
|
44
|
-
/>
|
|
45
|
-
</radialgradient>
|
|
46
|
-
<filter
|
|
47
|
-
color-interpolation-filters="sRGB"
|
|
48
|
-
height="170%"
|
|
49
|
-
id="atomix-glass-filter-16"
|
|
50
|
-
width="170%"
|
|
51
|
-
x="-35%"
|
|
52
|
-
y="-35%"
|
|
53
|
-
>
|
|
54
|
-
<feimage
|
|
55
|
-
height="100%"
|
|
56
|
-
href="data:image/jpeg;base64,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cUAUAkEkziomgGgkoxZGgxZFQFQlYnQHRdPfj/10KCSCKESCNiVkViPSLpD0h6I0Q0I0A2IoBWBIJIBKBIJoJIJ2R2J0JWBUJ0JUB0XTv479dFZDYiglYigkhEgjZFQjRFQjRFQjQigFYigHYigmgEgmglYlYnQlQlYlQHQlQnQ9P/kf1yVkNiNCNkNiVENiNiViNEViNkVCVgKCViViViSCViSCVgdCViVCViVCdgVCVCdD1D+U/XBWQ2I0I2Q2JUQ2I0JWQ0I2JUQ2JUI2JUI2J0JWJWJWA2R0BWJ0I2JUJ2BUJUJ0P//EABkQAQEBAQEBAAAAAAAAAAAAAAECABEDEP/aAAgBAQABAgB1atWrVq1atWrVq1atWrVq1atWrVq1atWrVq+OrVq1atWrVq1atWrVq1atWrVq1atWrVq1atXxVppppppdWrVq1atWrVq1NNNNNNNNNNNPVWmmmmms6tWrVq1atWpppppppppppppp6q0000uc51atWrVq1ammmmmmmmmmmmmt1Vpppc5znVq1atWrVqaaaaaaaaaaaaaeqtNLnOc51atWrVq1ammmmmmmmmmmmmnqrS5znOc6tWrVq16222mmmmmmlVppp6tKuc5znOrVq1a9TbbbbTTTTTSq000qtLnOc5zq1atWrW0222200000qqqtKqrnOc5zq1atTbbbbbbbbTTTSqqqqqq5znOc6tTTTbbbbbbbbTTTSqqqqrlVznOctNNNtttttttttNNNNKqqqrqznKqrTTTTbbbbbbbbbTTTSqqqqrqznOc5aaaabbbbbbbbbaaaaVVVVVdWc5znVq1NNttttttttttNNKqqqqudWc5znVq16tbbbbbbbbbbTTSqqqq5XVnOc6tWrVrb1tttttttttNNKqqqqrWrK5VWmmm2230bbbbbbaaaXOc5zlVa1KuVVppptttt9G22222mmlzlVznK6tWVVWmmmm2222222222mlznOc5znLWppVVWmmm22222229bTWrOc5znOcq1qaaVpWmm222222229erVqznOc5znKtatStK0rTbTTbbbberXr1as5znOc5aVpppppWlabaabbbb1ta9WrVnOc5znU0rTTTTTTTTTbTTbbbTWvVq1as5znOdTTStNNNNNNNNNtNNtttN6tWvVq1ZznOrU00rTTTTTTTTTTTTTbTWvVq1atWrOc6tTTTStNNNNNNNNNNtNNtNa9WrVq1Z1Z1NNNNNK1q1NNNNNNNNNNNtNatWrVq1atWrU00000rWrVq1atWrVq1alaaa1atWrVq1NNNammmmla1atWrVq1aterVq16tWrVnVqa1NK1qaaaVX/xAAWEAADAAAAAAAAAAAAAAAAAAAhgJD/2gAIAQEAAz8AaExf/8QAGhEBAQEBAQEBAAAAAAAAAAAAAQISEQADEP/aAAgBAgEBAgDx48ePHjx48ePHjx48ePHjx48ePHjx48ePHj86IiIiIiInjx48ePHjx48IiIiIj0oooooooooRERER73ve60UUUUUUVrWiiiiiihERERER73ve97ooooorRWiiiiihKERERER73ve973RRRRWtFFFFFFCIiIiIiPe973ve60UUVrRRRRRRQiIlCIiI973ve973pRRWiiiiiiiiiiiiiiihEe973ve973RRWtFFFFFFFFFFFFFFFFFFa13ve973WitaKKKKKKKKKKKKKKKKKK1rWtd1rutFa1oooooooooooosssooorWta1rWta1rRRRRRRRRRRZZZZZZZZZWta1rWta1rRRRRRRRRZZZZZZZZZZZZe9a1rWta1rWitaKLLLLLLLLLLLLLLLLL3rWta1rWtFbLLLLLLLLLLLLLLLLLLLL3vWta1rWita1ssssssss+hZZZZZZZZe961rWta0Vre97LLLLLLLLLLLPoWWWWWXrWta1oorWta3ssss+hZZZZ9Cyyyyyyyyiita1orWta1ve9llllllllllllllllFFa0VorWta1ve9llllllllllllllllllFFFaK1rWta1rWiyyyyyyyyyyyyiiiiiiitFFa1rWta1oosoosssssoooosoooorRRRWta1rWta0UUUUUWUUUUUUUUUUUVoooorWta1rWtaKKKKKKmiiiiiiiiiiiiiiitd73ve61oSiiipoqaKKKKKKKKKK0UUUVrve973vREREZoSihEooooorRRRRWtd73ve9EREREREoSiiiiitFllllla73ve9ERERERESiiiiiitH0PoWWWWVrXe96IiIiMoiJRRRRRRWjwlFFllllFFd6IiIiIlCUUUUUUUUUePHjx48ePCIiIiIiIiUUUUUUUUUUUePHjx48ePHjx48ePHjx48IiUUUUUUJRRRX//xAAWEQADAAAAAAAAAAAAAAAAAAABYJD/2gAIAQIBAz8AtEV7/8QAFxEBAQEBAAAAAAAAAAAAAAAAAAECEP/aAAgBAwEBAgCtNNNNNNNNNNNNNNNNNNNNNNNNNNNNNcrTTTTTTTTTTTTTTTTTTTTTTTTTTTTTXKrTTTTTTTU000000000000000000001FVpppppqampqaaaaaaaaaaaaaaaaaaaa5Vaaaaampqampqammmmmmmmmmmlaaaaaaiq0001NTU1NTU1NTTTTTTTTTTSqqtNNNcqtNNSyzU1LNTU1NTTTTTTTTTSqqq001ytNLLLLNTU1NTU1NTbbbTTTTTSqqq001ytNLLLLLNTU1NTU3NttttNNNNNKqq001KrSyyyyyzU1NTU3Nzc02220000qqqqrSqqyyyyyzU1NTU3Nzc3NttttNNNKqqqqqqssssss1NTU3Nzc3NzbbbbTTTSqqqqqqrLLLLLNTU1Nzc3Nzc22220000qqqqqqqqssss1NTU3Nzc3NzbbbbbTTSqqqqqqqqqqzU1NTc3Nzc3Nzbc22000qqqqqqqqqqqtTU3Nzc3Nzc3NtzbTTSqqqqrKqqqqqtNNzc23Nzc3Nzc3NTU1KqqqrKqqqqqtNNNNttzc3Nzc3NzU1NLLLLLKqqqqqqqq0022223Nzc3NzU1NSyyyyyyqqqqqqqrTTbbbbc3Nzc3NTU1LLLLLLKsqqqqqqrTTTTbbbc3Nzc1NTUsssssssqqqqqqrTTTTTbbbTc3NTU1NTUsssssqqqqqqqq0000222023NTU1NTUsssssqqqqqqqq000000003NTU1NTU1LLLLLNKrTSqqqqtNNNNNNtNNTU1NSzUssss00qq0qqqqrTTTTTTTTTU1NTUs1LLLNNNKrTTTSqqq00000000001NTU1LNTU0000qtNNNKqqqtNNNNNNNNTU1NTUs1NNNNNKss1NNNK00qtK0000001NNTU0s000000qq000001NKrStNNNNK1NNNNStNNNNNKqtNNNNNNNK0000000rU0000rTTTTTSq00000rTTTTTTTTTTTTTTTTStNNNNKr/xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAEDAQM/AAAf/9k="
|
|
57
|
-
id="atomix-glass-filter-16-image"
|
|
58
|
-
preserveAspectRatio="xMidYMid slice"
|
|
59
|
-
result="DISPLACEMENT_MAP"
|
|
60
|
-
width="100%"
|
|
61
|
-
x="0"
|
|
62
|
-
y="0"
|
|
63
|
-
/>
|
|
64
|
-
<fecolormatrix
|
|
65
|
-
in="DISPLACEMENT_MAP"
|
|
66
|
-
result="EDGE_INTENSITY"
|
|
67
|
-
type="matrix"
|
|
68
|
-
values="0.3 0.3 0.3 0 0
|
|
69
|
-
0.3 0.3 0.3 0 0
|
|
70
|
-
0.3 0.3 0.3 0 0
|
|
71
|
-
0 0 0 1 0"
|
|
72
|
-
/>
|
|
73
|
-
<fecomponenttransfer
|
|
74
|
-
in="EDGE_INTENSITY"
|
|
75
|
-
result="EDGE_MASK"
|
|
76
|
-
>
|
|
77
|
-
<fefunca
|
|
78
|
-
tableValues="0 0.1 1"
|
|
79
|
-
type="discrete"
|
|
80
|
-
/>
|
|
81
|
-
</fecomponenttransfer>
|
|
82
|
-
<feoffset
|
|
83
|
-
dx="0"
|
|
84
|
-
dy="0"
|
|
85
|
-
in="SourceGraphic"
|
|
86
|
-
result="CENTER_ORIGINAL"
|
|
87
|
-
/>
|
|
88
|
-
<fedisplacementmap
|
|
89
|
-
in="SourceGraphic"
|
|
90
|
-
in2="DISPLACEMENT_MAP"
|
|
91
|
-
result="RED_DISPLACED"
|
|
92
|
-
scale="-70"
|
|
93
|
-
xChannelSelector="R"
|
|
94
|
-
yChannelSelector="B"
|
|
95
|
-
/>
|
|
96
|
-
<fecolormatrix
|
|
97
|
-
in="RED_DISPLACED"
|
|
98
|
-
result="RED_CHANNEL"
|
|
99
|
-
type="matrix"
|
|
100
|
-
values="1 0 0 0 0
|
|
101
|
-
0 0 0 0 0
|
|
102
|
-
0 0 0 0 0
|
|
103
|
-
0 0 0 1 0"
|
|
104
|
-
/>
|
|
105
|
-
<fedisplacementmap
|
|
106
|
-
in="SourceGraphic"
|
|
107
|
-
in2="DISPLACEMENT_MAP"
|
|
108
|
-
result="GREEN_DISPLACED"
|
|
109
|
-
scale="-72.8"
|
|
110
|
-
xChannelSelector="R"
|
|
111
|
-
yChannelSelector="B"
|
|
112
|
-
/>
|
|
113
|
-
<fecolormatrix
|
|
114
|
-
in="GREEN_DISPLACED"
|
|
115
|
-
result="GREEN_CHANNEL"
|
|
116
|
-
type="matrix"
|
|
117
|
-
values="0 0 0 0 0
|
|
118
|
-
0 1 0 0 0
|
|
119
|
-
0 0 0 0 0
|
|
120
|
-
0 0 0 1 0"
|
|
121
|
-
/>
|
|
122
|
-
<fedisplacementmap
|
|
123
|
-
in="SourceGraphic"
|
|
124
|
-
in2="DISPLACEMENT_MAP"
|
|
125
|
-
result="BLUE_DISPLACED"
|
|
126
|
-
scale="-74.2"
|
|
127
|
-
xChannelSelector="R"
|
|
128
|
-
yChannelSelector="B"
|
|
129
|
-
/>
|
|
130
|
-
<fecolormatrix
|
|
131
|
-
in="BLUE_DISPLACED"
|
|
132
|
-
result="BLUE_CHANNEL"
|
|
133
|
-
type="matrix"
|
|
134
|
-
values="0 0 0 0 0
|
|
135
|
-
0 0 0 0 0
|
|
136
|
-
0 0 1 0 0
|
|
137
|
-
0 0 0 1 0"
|
|
138
|
-
/>
|
|
139
|
-
<feblend
|
|
140
|
-
in="GREEN_CHANNEL"
|
|
141
|
-
in2="BLUE_CHANNEL"
|
|
142
|
-
mode="screen"
|
|
143
|
-
result="GB_COMBINED"
|
|
144
|
-
/>
|
|
145
|
-
<feblend
|
|
146
|
-
in="RED_CHANNEL"
|
|
147
|
-
in2="GB_COMBINED"
|
|
148
|
-
mode="screen"
|
|
149
|
-
result="RGB_COMBINED"
|
|
150
|
-
/>
|
|
151
|
-
<fegaussianblur
|
|
152
|
-
in="RGB_COMBINED"
|
|
153
|
-
result="ABERRATED_BLURRED"
|
|
154
|
-
stdDeviation="0"
|
|
155
|
-
/>
|
|
156
|
-
<fecomposite
|
|
157
|
-
in="ABERRATED_BLURRED"
|
|
158
|
-
in2="EDGE_MASK"
|
|
159
|
-
operator="in"
|
|
160
|
-
result="EDGE_ABERRATION"
|
|
161
|
-
/>
|
|
162
|
-
<fecomponenttransfer
|
|
163
|
-
in="EDGE_MASK"
|
|
164
|
-
result="INVERTED_MASK"
|
|
165
|
-
>
|
|
166
|
-
<fefunca
|
|
167
|
-
tableValues="1 0"
|
|
168
|
-
type="table"
|
|
169
|
-
/>
|
|
170
|
-
</fecomponenttransfer>
|
|
171
|
-
<fecomposite
|
|
172
|
-
in="CENTER_ORIGINAL"
|
|
173
|
-
in2="INVERTED_MASK"
|
|
174
|
-
operator="in"
|
|
175
|
-
result="CENTER_CLEAN"
|
|
176
|
-
/>
|
|
177
|
-
<fecomposite
|
|
178
|
-
in="EDGE_ABERRATION"
|
|
179
|
-
in2="CENTER_CLEAN"
|
|
180
|
-
operator="over"
|
|
181
|
-
/>
|
|
182
|
-
</filter>
|
|
183
|
-
</defs>
|
|
184
|
-
</svg>
|
|
185
|
-
<div
|
|
186
|
-
class="c-atomix-glass__filter-overlay"
|
|
187
|
-
style="filter: url(#atomix-glass-filter-16);"
|
|
188
|
-
/>
|
|
189
|
-
<div
|
|
190
|
-
class="c-atomix-glass__filter-shadow"
|
|
191
|
-
/>
|
|
192
|
-
</div>
|
|
193
|
-
<div
|
|
194
|
-
class="c-atomix-glass__content"
|
|
195
|
-
>
|
|
196
|
-
<div>
|
|
197
|
-
Default Glass
|
|
198
|
-
</div>
|
|
199
|
-
</div>
|
|
200
|
-
</div>
|
|
201
|
-
</div>
|
|
202
|
-
<div
|
|
203
|
-
class="c-atomix-glass__background-layer c-atomix-glass__background-layer--dark c-atomix-glass__background-layer--hidden"
|
|
204
|
-
/>
|
|
205
|
-
<div
|
|
206
|
-
class="c-atomix-glass__background-layer c-atomix-glass__background-layer--black c-atomix-glass__background-layer--hidden"
|
|
207
|
-
/>
|
|
208
|
-
<span
|
|
209
|
-
class="c-atomix-glass__border-1"
|
|
210
|
-
/>
|
|
211
|
-
<span
|
|
212
|
-
class="c-atomix-glass__border-2"
|
|
213
|
-
/>
|
|
214
|
-
</div>
|
|
215
|
-
</div>
|
|
216
|
-
`;
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Quick Test Story for Phase 1 Animations
|
|
3
|
-
*
|
|
4
|
-
* This is a minimal test to verify the animation pipeline is working
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
8
|
-
import { AtomixGlass } from '../AtomixGlass';
|
|
9
|
-
|
|
10
|
-
const meta = {
|
|
11
|
-
title: 'Testing/Phase 1 Animation Quick Test',
|
|
12
|
-
component: AtomixGlass,
|
|
13
|
-
parameters: {
|
|
14
|
-
layout: 'centered',
|
|
15
|
-
},
|
|
16
|
-
tags: ['!autodocs'], // Exclude from production docs - test stories only
|
|
17
|
-
argTypes: {
|
|
18
|
-
withTimeAnimation: { control: 'boolean' },
|
|
19
|
-
animationSpeed: { control: { type: 'range', min: 0.1, max: 5.0, step: 0.1 } },
|
|
20
|
-
distortionOctaves: { control: { type: 'range', min: 1, max: 8, step: 1 } },
|
|
21
|
-
distortionQuality: {
|
|
22
|
-
control: 'select',
|
|
23
|
-
options: ['low', 'medium', 'high', 'ultra']
|
|
24
|
-
},
|
|
25
|
-
},
|
|
26
|
-
} satisfies Meta<typeof AtomixGlass>;
|
|
27
|
-
|
|
28
|
-
export default meta;
|
|
29
|
-
type Story = StoryObj<typeof meta>;
|
|
30
|
-
|
|
31
|
-
// Default test with animations enabled
|
|
32
|
-
export const Animated: Story = {
|
|
33
|
-
args: {
|
|
34
|
-
children: (
|
|
35
|
-
<div style={{ padding: '40px', color: 'white', textAlign: 'center' }}>
|
|
36
|
-
<h2>Phase 1 Animation Test</h2>
|
|
37
|
-
<p>If you see flowing liquid glass effects, it's working!</p>
|
|
38
|
-
</div>
|
|
39
|
-
),
|
|
40
|
-
mode: 'shader',
|
|
41
|
-
withTimeAnimation: true,
|
|
42
|
-
animationSpeed: 1.0,
|
|
43
|
-
distortionOctaves: 4,
|
|
44
|
-
distortionQuality: 'high',
|
|
45
|
-
displacementScale: 30,
|
|
46
|
-
blurAmount: 8,
|
|
47
|
-
saturation: 180,
|
|
48
|
-
aberrationIntensity: 3,
|
|
49
|
-
// Dark background to make effects visible
|
|
50
|
-
style: {
|
|
51
|
-
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
52
|
-
},
|
|
53
|
-
},
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
// Comparison: Same config without animations
|
|
57
|
-
export const Static: Story = {
|
|
58
|
-
args: {
|
|
59
|
-
...Animated.args,
|
|
60
|
-
withTimeAnimation: false,
|
|
61
|
-
},
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
// Speed comparison
|
|
65
|
-
export const FastAnimation: Story = {
|
|
66
|
-
args: {
|
|
67
|
-
...Animated.args,
|
|
68
|
-
animationSpeed: 3.0,
|
|
69
|
-
},
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
export const SlowAnimation: Story = {
|
|
73
|
-
args: {
|
|
74
|
-
...Animated.args,
|
|
75
|
-
animationSpeed: 0.3,
|
|
76
|
-
},
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
// High complexity FBM
|
|
80
|
-
export const HighDetailFBM: Story = {
|
|
81
|
-
args: {
|
|
82
|
-
...Animated.args,
|
|
83
|
-
distortionOctaves: 7,
|
|
84
|
-
distortionQuality: 'ultra',
|
|
85
|
-
},
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
// Mobile optimized (low quality)
|
|
89
|
-
export const MobileOptimized: Story = {
|
|
90
|
-
args: {
|
|
91
|
-
...Animated.args,
|
|
92
|
-
distortionOctaves: 2,
|
|
93
|
-
distortionQuality: 'low',
|
|
94
|
-
},
|
|
95
|
-
};
|