@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.
Files changed (76) hide show
  1. package/dist/atomix.css +95 -69
  2. package/dist/atomix.css.map +1 -1
  3. package/dist/atomix.min.css +1 -1
  4. package/dist/atomix.min.css.map +1 -1
  5. package/dist/charts.d.ts +1 -0
  6. package/dist/charts.js +231 -332
  7. package/dist/charts.js.map +1 -1
  8. package/dist/core.d.ts +1 -0
  9. package/dist/core.js +232 -333
  10. package/dist/core.js.map +1 -1
  11. package/dist/forms.d.ts +1 -0
  12. package/dist/forms.js +231 -332
  13. package/dist/forms.js.map +1 -1
  14. package/dist/heavy.d.ts +11 -2
  15. package/dist/heavy.js +233 -334
  16. package/dist/heavy.js.map +1 -1
  17. package/dist/index.d.ts +13 -2
  18. package/dist/index.esm.js +228 -327
  19. package/dist/index.esm.js.map +1 -1
  20. package/dist/index.js +227 -326
  21. package/dist/index.js.map +1 -1
  22. package/dist/index.min.js +1 -1
  23. package/dist/index.min.js.map +1 -1
  24. package/package.json +11 -1
  25. package/src/components/AtomixGlass/AtomixGlass.tsx +188 -128
  26. package/src/components/AtomixGlass/AtomixGlassContainer.tsx +62 -90
  27. package/src/components/AtomixGlass/PerformanceDashboard.tsx +153 -201
  28. package/src/components/AtomixGlass/glass-utils.ts +50 -0
  29. package/src/components/AtomixGlass/stories/AnimationFeatures.stories.tsx +52 -46
  30. package/src/components/AtomixGlass/stories/Examples.stories.tsx +573 -236
  31. package/src/components/AtomixGlass/stories/Playground.stories.tsx +88 -41
  32. package/src/components/AtomixGlass/stories/argTypes.ts +19 -19
  33. package/src/components/AtomixGlass/stories/shared-components.tsx +7 -12
  34. package/src/components/AtomixGlass/stories/types.ts +3 -3
  35. package/src/lib/composables/useAtomixGlass.ts +108 -71
  36. package/src/lib/composables/useAtomixGlassStyles.ts +0 -2
  37. package/src/lib/constants/components.ts +1 -0
  38. package/src/lib/types/components.ts +1 -0
  39. package/src/lib/utils/displacement-generator.ts +1 -1
  40. package/src/styles/06-components/_components.atomix-glass.scss +158 -97
  41. package/scripts/cli/__tests__/README.md +0 -81
  42. package/scripts/cli/__tests__/basic.test.js +0 -116
  43. package/scripts/cli/__tests__/clean.test.js +0 -278
  44. package/scripts/cli/__tests__/component-generator.test.js +0 -332
  45. package/scripts/cli/__tests__/component-validator.test.js +0 -433
  46. package/scripts/cli/__tests__/generator.test.js +0 -613
  47. package/scripts/cli/__tests__/glass-motion.test.js +0 -256
  48. package/scripts/cli/__tests__/integration.test.js +0 -938
  49. package/scripts/cli/__tests__/migrate.test.js +0 -74
  50. package/scripts/cli/__tests__/security.test.js +0 -206
  51. package/scripts/cli/__tests__/test-setup.js +0 -135
  52. package/scripts/cli/__tests__/theme-bridge.test.js +0 -507
  53. package/scripts/cli/__tests__/token-manager.test.js +0 -251
  54. package/scripts/cli/__tests__/token-provider.test.js +0 -361
  55. package/scripts/cli/__tests__/utils.test.js +0 -165
  56. package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap +0 -216
  57. package/src/components/AtomixGlass/stories/AnimationTests.stories.tsx +0 -95
  58. package/src/components/AtomixGlass/stories/CardExamples.stories.tsx +0 -212
  59. package/src/components/AtomixGlass/stories/Customization.stories.tsx +0 -131
  60. package/src/components/AtomixGlass/stories/DashboardExamples.stories.tsx +0 -348
  61. package/src/components/AtomixGlass/stories/EcommerceExamples.stories.tsx +0 -410
  62. package/src/components/AtomixGlass/stories/FormExamples.stories.tsx +0 -436
  63. package/src/components/AtomixGlass/stories/HeroExamples.stories.tsx +0 -264
  64. package/src/components/AtomixGlass/stories/InteractivePlayground.stories.tsx +0 -247
  65. package/src/components/AtomixGlass/stories/MobileUIExamples.stories.tsx +0 -418
  66. package/src/components/AtomixGlass/stories/ModalExamples.stories.tsx +0 -402
  67. package/src/components/AtomixGlass/stories/Modes.stories.tsx +0 -1082
  68. package/src/components/AtomixGlass/stories/Overview.stories.tsx +0 -497
  69. package/src/components/AtomixGlass/stories/Performance.stories.tsx +0 -103
  70. package/src/components/AtomixGlass/stories/PresetGallery.stories.tsx +0 -335
  71. package/src/components/AtomixGlass/stories/Shaders.stories.tsx +0 -395
  72. package/src/components/AtomixGlass/stories/WidgetExamples.stories.tsx +0 -441
  73. package/src/components/TypedButton/TypedButton.stories.tsx +0 -59
  74. package/src/components/TypedButton/TypedButton.tsx +0 -39
  75. package/src/components/TypedButton/index.ts +0 -2
  76. 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
- };