@papernote/ui 1.0.0 → 1.2.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/LICENSE +21 -21
- package/README.md +455 -445
- package/dist/components/CurrencyInput.d.ts +52 -0
- package/dist/components/CurrencyInput.d.ts.map +1 -0
- package/dist/components/DataTable.d.ts +3 -1
- package/dist/components/DataTable.d.ts.map +1 -1
- package/dist/components/Modal.d.ts.map +1 -1
- package/dist/components/Page.d.ts +2 -0
- package/dist/components/Page.d.ts.map +1 -1
- package/dist/components/PageLayout.d.ts +5 -1
- package/dist/components/PageLayout.d.ts.map +1 -1
- package/dist/components/Spreadsheet.d.ts +129 -0
- package/dist/components/Spreadsheet.d.ts.map +1 -0
- package/dist/components/Tabs.d.ts +5 -1
- package/dist/components/Tabs.d.ts.map +1 -1
- package/dist/components/index.d.ts +6 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/index.d.ts +336 -5
- package/dist/index.esm.js +51152 -174
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +51145 -143
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1187 -11
- package/dist/utils/excelExport.d.ts +143 -0
- package/dist/utils/excelExport.d.ts.map +1 -0
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/package.json +13 -3
- package/src/components/AdminModal.css +49 -49
- package/src/components/CurrencyInput.stories.tsx +290 -0
- package/src/components/CurrencyInput.tsx +193 -0
- package/src/components/DataTable.stories.tsx +87 -0
- package/src/components/DataTable.tsx +149 -37
- package/src/components/Modal.stories.tsx +64 -0
- package/src/components/Modal.tsx +15 -2
- package/src/components/Page.stories.tsx +76 -0
- package/src/components/Page.tsx +35 -3
- package/src/components/PageLayout.stories.tsx +75 -0
- package/src/components/PageLayout.tsx +28 -9
- package/src/components/RoleManager.css +10 -10
- package/src/components/Spreadsheet.css +216 -0
- package/src/components/Spreadsheet.stories.tsx +362 -0
- package/src/components/Spreadsheet.tsx +351 -0
- package/src/components/SpreadsheetSimple.stories.tsx +27 -0
- package/src/components/Tabs.stories.tsx +31 -0
- package/src/components/Tabs.tsx +28 -4
- package/src/components/TimePicker.tsx +1 -1
- package/src/components/Toast.tsx +9 -9
- package/src/components/__tests__/Input.test.tsx +22 -26
- package/src/components/index.ts +11 -2
- package/src/styles/index.css +44 -6
- package/src/utils/excelExport.stories.tsx +535 -0
- package/src/utils/excelExport.ts +225 -0
- package/src/utils/index.ts +3 -0
- package/src/utils/sqlToNaturalLanguage.ts +1 -1
- package/tailwind.config.js +253 -253
- package/dist/components/Button.stories.d.ts +0 -51
- package/dist/components/Button.stories.d.ts.map +0 -1
- package/dist/components/ChartVisualizationUI.d.ts +0 -21
- package/dist/components/ChartVisualizationUI.d.ts.map +0 -1
- package/dist/components/ChatUI.d.ts +0 -23
- package/dist/components/ChatUI.d.ts.map +0 -1
- package/dist/components/CommissionDashboardUI.d.ts +0 -25
- package/dist/components/CommissionDashboardUI.d.ts.map +0 -1
- package/dist/components/DataTable.stories.d.ts +0 -23
- package/dist/components/DataTable.stories.d.ts.map +0 -1
- package/dist/components/FormField.d.ts +0 -35
- package/dist/components/FormField.d.ts.map +0 -1
- package/dist/components/Input.stories.d.ts +0 -366
- package/dist/components/Input.stories.d.ts.map +0 -1
- package/dist/components/InsightsPanelUI.d.ts +0 -21
- package/dist/components/InsightsPanelUI.d.ts.map +0 -1
- package/dist/components/PaymentHistoryTimeline.d.ts +0 -34
- package/dist/components/PaymentHistoryTimeline.d.ts.map +0 -1
- package/dist/components/RelationshipManagerUI.d.ts +0 -60
- package/dist/components/RelationshipManagerUI.d.ts.map +0 -1
- package/dist/components/RoleManager.d.ts +0 -19
- package/dist/components/RoleManager.d.ts.map +0 -1
- package/dist/components/SplitCommissionBadge.d.ts +0 -18
- package/dist/components/SplitCommissionBadge.d.ts.map +0 -1
- package/dist/components/__tests__/Button.test.d.ts +0 -2
- package/dist/components/__tests__/Button.test.d.ts.map +0 -1
- package/dist/components/__tests__/Input.test.d.ts +0 -2
- package/dist/components/__tests__/Input.test.d.ts.map +0 -1
package/tailwind.config.js
CHANGED
|
@@ -1,254 +1,254 @@
|
|
|
1
|
-
/** @type {import('tailwindcss').Config} */
|
|
2
|
-
export default {
|
|
3
|
-
content: [
|
|
4
|
-
"./index.html",
|
|
5
|
-
"./src/**/*.{js,ts,jsx,tsx}",
|
|
6
|
-
],
|
|
7
|
-
theme: {
|
|
8
|
-
extend: {
|
|
9
|
-
colors: {
|
|
10
|
-
// Primary: Warm slate tones (ink on paper feel)
|
|
11
|
-
primary: {
|
|
12
|
-
50: '#f8fafc', // Very light slate
|
|
13
|
-
100: '#f1f5f9', // Light slate
|
|
14
|
-
200: '#e2e8f0', // Soft slate
|
|
15
|
-
300: '#cbd5e1', // Medium slate
|
|
16
|
-
400: '#94a3b8', // Slate
|
|
17
|
-
500: '#64748b', // Base slate (like ink)
|
|
18
|
-
600: '#475569', // Deep slate
|
|
19
|
-
700: '#334155', // Darker slate
|
|
20
|
-
800: '#1e293b', // Very dark slate
|
|
21
|
-
900: '#0f172a', // Nearly black
|
|
22
|
-
950: '#020617', // Black
|
|
23
|
-
},
|
|
24
|
-
// Accent: Subtle warm tone (very muted, Claude-like)
|
|
25
|
-
accent: {
|
|
26
|
-
50: '#fafaf8', // Nearly white with warmth
|
|
27
|
-
100: '#f5f5f0', // Very light warm gray
|
|
28
|
-
200: '#e8e7e0', // Soft warm gray
|
|
29
|
-
300: '#d4d2c8', // Medium warm gray
|
|
30
|
-
400: '#a8a599', // Muted warm gray
|
|
31
|
-
500: '#8b8878', // Base muted warm (subtle highlight)
|
|
32
|
-
600: '#6e6d5e', // Deep muted warm
|
|
33
|
-
700: '#565548', // Darker warm gray
|
|
34
|
-
800: '#3f3e35', // Very dark warm
|
|
35
|
-
900: '#2a2922', // Nearly black warm
|
|
36
|
-
},
|
|
37
|
-
// Success: Muted emerald green
|
|
38
|
-
success: {
|
|
39
|
-
50: '#f0fdf4',
|
|
40
|
-
100: '#dcfce7',
|
|
41
|
-
200: '#bbf7d0',
|
|
42
|
-
300: '#86efac',
|
|
43
|
-
400: '#4ade80',
|
|
44
|
-
500: '#10b981', // Softer than before
|
|
45
|
-
600: '#059669',
|
|
46
|
-
700: '#047857',
|
|
47
|
-
800: '#065f46',
|
|
48
|
-
900: '#064e3b',
|
|
49
|
-
},
|
|
50
|
-
// Warning: Soft amber (slightly different shade than accent)
|
|
51
|
-
warning: {
|
|
52
|
-
50: '#fffbeb',
|
|
53
|
-
100: '#fef3c7',
|
|
54
|
-
200: '#fde68a',
|
|
55
|
-
300: '#fcd34d',
|
|
56
|
-
400: '#fbbf24',
|
|
57
|
-
500: '#f59e0b',
|
|
58
|
-
600: '#d97706',
|
|
59
|
-
700: '#b45309',
|
|
60
|
-
800: '#92400e',
|
|
61
|
-
900: '#78350f',
|
|
62
|
-
},
|
|
63
|
-
// Error: Muted red
|
|
64
|
-
error: {
|
|
65
|
-
50: '#fef2f2',
|
|
66
|
-
100: '#fee2e2',
|
|
67
|
-
200: '#fecaca',
|
|
68
|
-
300: '#fca5a5',
|
|
69
|
-
400: '#f87171',
|
|
70
|
-
500: '#ef4444',
|
|
71
|
-
600: '#dc2626',
|
|
72
|
-
700: '#b91c1c',
|
|
73
|
-
800: '#991b1b',
|
|
74
|
-
900: '#7f1d1d',
|
|
75
|
-
},
|
|
76
|
-
// Paper: Warm off-white backgrounds (like quality paper)
|
|
77
|
-
paper: {
|
|
78
|
-
50: '#fafaf9', // Base page background (very warm white)
|
|
79
|
-
100: '#f5f5f4', // Subtle depth
|
|
80
|
-
200: '#e7e5e4', // Soft borders
|
|
81
|
-
300: '#d6d3d1', // Medium borders
|
|
82
|
-
400: '#a8a29e', // Muted elements
|
|
83
|
-
},
|
|
84
|
-
// Ink: Text colors (warm grays)
|
|
85
|
-
ink: {
|
|
86
|
-
50: '#fafaf9', // Very light text
|
|
87
|
-
100: '#f5f5f4', // Light text
|
|
88
|
-
200: '#e7e5e4', // Subtle text
|
|
89
|
-
300: '#d6d3d1', // Muted text
|
|
90
|
-
400: '#a8a29e', // Light body text
|
|
91
|
-
500: '#78716c', // Body text
|
|
92
|
-
600: '#57534e', // Strong body text
|
|
93
|
-
700: '#44403c', // Headings
|
|
94
|
-
800: '#292524', // Strong headings
|
|
95
|
-
900: '#1c1917', // Black text
|
|
96
|
-
},
|
|
97
|
-
// Keep neutral for backwards compatibility
|
|
98
|
-
neutral: {
|
|
99
|
-
25: '#fcfcfd',
|
|
100
|
-
50: '#f8fafc',
|
|
101
|
-
100: '#f1f5f9',
|
|
102
|
-
200: '#e2e8f0',
|
|
103
|
-
300: '#cbd5e1',
|
|
104
|
-
400: '#94a3b8',
|
|
105
|
-
500: '#64748b',
|
|
106
|
-
600: '#475569',
|
|
107
|
-
700: '#334155',
|
|
108
|
-
800: '#1e293b',
|
|
109
|
-
900: '#0f172a',
|
|
110
|
-
950: '#020617',
|
|
111
|
-
}
|
|
112
|
-
},
|
|
113
|
-
fontFamily: {
|
|
114
|
-
sans: [
|
|
115
|
-
'ui-sans-serif',
|
|
116
|
-
'system-ui',
|
|
117
|
-
'-apple-system',
|
|
118
|
-
'BlinkMacSystemFont',
|
|
119
|
-
'Segoe UI',
|
|
120
|
-
'Roboto',
|
|
121
|
-
'Inter',
|
|
122
|
-
'Helvetica Neue',
|
|
123
|
-
'Arial',
|
|
124
|
-
'Noto Sans',
|
|
125
|
-
'sans-serif',
|
|
126
|
-
'Apple Color Emoji',
|
|
127
|
-
'Segoe UI Emoji',
|
|
128
|
-
],
|
|
129
|
-
mono: [
|
|
130
|
-
'JetBrains Mono Variable',
|
|
131
|
-
'JetBrains Mono',
|
|
132
|
-
'Fira Code',
|
|
133
|
-
'Monaco',
|
|
134
|
-
'Consolas',
|
|
135
|
-
'Liberation Mono',
|
|
136
|
-
'Courier New',
|
|
137
|
-
'monospace'
|
|
138
|
-
],
|
|
139
|
-
},
|
|
140
|
-
fontSize: {
|
|
141
|
-
'2xs': ['0.625rem', { lineHeight: '0.875rem' }],
|
|
142
|
-
'xs': ['0.75rem', { lineHeight: '1.125rem' }],
|
|
143
|
-
'sm': ['0.875rem', { lineHeight: '1.375rem' }], // Increased line-height
|
|
144
|
-
'base': ['1rem', { lineHeight: '1.625rem' }], // More comfortable reading (16px/26px)
|
|
145
|
-
'lg': ['1.125rem', { lineHeight: '1.875rem' }],
|
|
146
|
-
'xl': ['1.25rem', { lineHeight: '2rem' }],
|
|
147
|
-
'2xl': ['1.5rem', { lineHeight: '2.25rem' }],
|
|
148
|
-
'3xl': ['1.875rem', { lineHeight: '2.5rem' }],
|
|
149
|
-
'4xl': ['2.25rem', { lineHeight: '2.75rem' }],
|
|
150
|
-
'5xl': ['3rem', { lineHeight: '3.25rem' }],
|
|
151
|
-
'6xl': ['3.75rem', { lineHeight: '1' }],
|
|
152
|
-
'7xl': ['4.5rem', { lineHeight: '1' }],
|
|
153
|
-
'8xl': ['6rem', { lineHeight: '1' }],
|
|
154
|
-
'9xl': ['8rem', { lineHeight: '1' }],
|
|
155
|
-
},
|
|
156
|
-
spacing: {
|
|
157
|
-
'4.5': '1.125rem',
|
|
158
|
-
'5.5': '1.375rem',
|
|
159
|
-
'6.5': '1.625rem',
|
|
160
|
-
'7.5': '1.875rem',
|
|
161
|
-
'8.5': '2.125rem',
|
|
162
|
-
'9.5': '2.375rem',
|
|
163
|
-
'17': '4.25rem',
|
|
164
|
-
'18': '4.5rem',
|
|
165
|
-
'19': '4.75rem',
|
|
166
|
-
'21': '5.25rem',
|
|
167
|
-
'22': '5.5rem',
|
|
168
|
-
'23': '5.75rem',
|
|
169
|
-
'25': '6.25rem',
|
|
170
|
-
'26': '6.5rem',
|
|
171
|
-
'27': '6.75rem',
|
|
172
|
-
'29': '7.25rem',
|
|
173
|
-
'30': '7.5rem',
|
|
174
|
-
'31': '7.75rem',
|
|
175
|
-
'33': '8.25rem',
|
|
176
|
-
'34': '8.5rem',
|
|
177
|
-
'35': '8.75rem',
|
|
178
|
-
},
|
|
179
|
-
borderRadius: {
|
|
180
|
-
'4xl': '2rem',
|
|
181
|
-
'5xl': '2.5rem',
|
|
182
|
-
},
|
|
183
|
-
boxShadow: {
|
|
184
|
-
'xs': '0 1px 2px 0 rgb(0 0 0 / 0.03)', // Very subtle
|
|
185
|
-
'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)', // Soft paper lift
|
|
186
|
-
'md': '0 2px 4px 0 rgb(0 0 0 / 0.06)', // Gentle elevation
|
|
187
|
-
'lg': '0 4px 6px -1px rgb(0 0 0 / 0.08)', // Moderate elevation
|
|
188
|
-
'xl': '0 10px 15px -3px rgb(0 0 0 / 0.1)', // Strong elevation
|
|
189
|
-
'2xl': '0 20px 25px -5px rgb(0 0 0 / 0.12)', // Maximum elevation
|
|
190
|
-
'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.04)', // Subtle inner shadow
|
|
191
|
-
'paper': '0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.03)', // Paper-like shadow
|
|
192
|
-
'card': '0 2px 4px 0 rgb(0 0 0 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.02)', // Card shadow
|
|
193
|
-
},
|
|
194
|
-
animation: {
|
|
195
|
-
'fade-in': 'fadeIn 0.5s ease-in-out',
|
|
196
|
-
'fade-in-up': 'fadeInUp 0.5s ease-out',
|
|
197
|
-
'slide-in': 'slideIn 0.3s ease-out',
|
|
198
|
-
'slide-in-right': 'slideInRight 0.3s ease-out',
|
|
199
|
-
'bounce-subtle': 'bounceSubtle 2s infinite',
|
|
200
|
-
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
201
|
-
'shimmer': 'shimmer 2s linear infinite',
|
|
202
|
-
'float': 'float 6s ease-in-out infinite',
|
|
203
|
-
'scale-in': 'scaleIn 0.2s ease-out',
|
|
204
|
-
},
|
|
205
|
-
keyframes: {
|
|
206
|
-
fadeIn: {
|
|
207
|
-
'0%': { opacity: '0' },
|
|
208
|
-
'100%': { opacity: '1' },
|
|
209
|
-
},
|
|
210
|
-
fadeInUp: {
|
|
211
|
-
'0%': { opacity: '0', transform: 'translateY(10px)' },
|
|
212
|
-
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
213
|
-
},
|
|
214
|
-
slideIn: {
|
|
215
|
-
'0%': { transform: 'translateX(-10px)', opacity: '0' },
|
|
216
|
-
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
217
|
-
},
|
|
218
|
-
slideInRight: {
|
|
219
|
-
'0%': { transform: 'translateX(10px)', opacity: '0' },
|
|
220
|
-
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
221
|
-
},
|
|
222
|
-
bounceSubtle: {
|
|
223
|
-
'0%, 100%': { transform: 'translateY(0)' },
|
|
224
|
-
'50%': { transform: 'translateY(-2px)' },
|
|
225
|
-
},
|
|
226
|
-
shimmer: {
|
|
227
|
-
'0%': { transform: 'translateX(-100%)' },
|
|
228
|
-
'100%': { transform: 'translateX(100%)' },
|
|
229
|
-
},
|
|
230
|
-
float: {
|
|
231
|
-
'0%, 100%': { transform: 'translateY(0px)' },
|
|
232
|
-
'50%': { transform: 'translateY(-10px)' },
|
|
233
|
-
},
|
|
234
|
-
scaleIn: {
|
|
235
|
-
'0%': { transform: 'scale(0.9)', opacity: '0' },
|
|
236
|
-
'100%': { transform: 'scale(1)', opacity: '1' },
|
|
237
|
-
},
|
|
238
|
-
},
|
|
239
|
-
backdropBlur: {
|
|
240
|
-
'xs': '2px',
|
|
241
|
-
},
|
|
242
|
-
backgroundImage: {
|
|
243
|
-
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
|
244
|
-
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
|
245
|
-
'grid-pattern': `url("data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23e2e8f0' fill-opacity='0.4'%3e%3ccircle cx='30' cy='30' r='1.5'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e")`,
|
|
246
|
-
// Subtle paper texture (very fine grain)
|
|
247
|
-
'paper-texture': `url("data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noise'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3e%3cfeColorMatrix type='saturate' values='0'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3e%3c/svg%3e")`,
|
|
248
|
-
// Very subtle grain for cards
|
|
249
|
-
'subtle-grain': `url("data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noise'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3e%3cfeColorMatrix type='saturate' values='0'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3e%3c/svg%3e")`,
|
|
250
|
-
},
|
|
251
|
-
},
|
|
252
|
-
},
|
|
253
|
-
plugins: [],
|
|
1
|
+
/** @type {import('tailwindcss').Config} */
|
|
2
|
+
export default {
|
|
3
|
+
content: [
|
|
4
|
+
"./index.html",
|
|
5
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
6
|
+
],
|
|
7
|
+
theme: {
|
|
8
|
+
extend: {
|
|
9
|
+
colors: {
|
|
10
|
+
// Primary: Warm slate tones (ink on paper feel)
|
|
11
|
+
primary: {
|
|
12
|
+
50: '#f8fafc', // Very light slate
|
|
13
|
+
100: '#f1f5f9', // Light slate
|
|
14
|
+
200: '#e2e8f0', // Soft slate
|
|
15
|
+
300: '#cbd5e1', // Medium slate
|
|
16
|
+
400: '#94a3b8', // Slate
|
|
17
|
+
500: '#64748b', // Base slate (like ink)
|
|
18
|
+
600: '#475569', // Deep slate
|
|
19
|
+
700: '#334155', // Darker slate
|
|
20
|
+
800: '#1e293b', // Very dark slate
|
|
21
|
+
900: '#0f172a', // Nearly black
|
|
22
|
+
950: '#020617', // Black
|
|
23
|
+
},
|
|
24
|
+
// Accent: Subtle warm tone (very muted, Claude-like)
|
|
25
|
+
accent: {
|
|
26
|
+
50: '#fafaf8', // Nearly white with warmth
|
|
27
|
+
100: '#f5f5f0', // Very light warm gray
|
|
28
|
+
200: '#e8e7e0', // Soft warm gray
|
|
29
|
+
300: '#d4d2c8', // Medium warm gray
|
|
30
|
+
400: '#a8a599', // Muted warm gray
|
|
31
|
+
500: '#8b8878', // Base muted warm (subtle highlight)
|
|
32
|
+
600: '#6e6d5e', // Deep muted warm
|
|
33
|
+
700: '#565548', // Darker warm gray
|
|
34
|
+
800: '#3f3e35', // Very dark warm
|
|
35
|
+
900: '#2a2922', // Nearly black warm
|
|
36
|
+
},
|
|
37
|
+
// Success: Muted emerald green
|
|
38
|
+
success: {
|
|
39
|
+
50: '#f0fdf4',
|
|
40
|
+
100: '#dcfce7',
|
|
41
|
+
200: '#bbf7d0',
|
|
42
|
+
300: '#86efac',
|
|
43
|
+
400: '#4ade80',
|
|
44
|
+
500: '#10b981', // Softer than before
|
|
45
|
+
600: '#059669',
|
|
46
|
+
700: '#047857',
|
|
47
|
+
800: '#065f46',
|
|
48
|
+
900: '#064e3b',
|
|
49
|
+
},
|
|
50
|
+
// Warning: Soft amber (slightly different shade than accent)
|
|
51
|
+
warning: {
|
|
52
|
+
50: '#fffbeb',
|
|
53
|
+
100: '#fef3c7',
|
|
54
|
+
200: '#fde68a',
|
|
55
|
+
300: '#fcd34d',
|
|
56
|
+
400: '#fbbf24',
|
|
57
|
+
500: '#f59e0b',
|
|
58
|
+
600: '#d97706',
|
|
59
|
+
700: '#b45309',
|
|
60
|
+
800: '#92400e',
|
|
61
|
+
900: '#78350f',
|
|
62
|
+
},
|
|
63
|
+
// Error: Muted red
|
|
64
|
+
error: {
|
|
65
|
+
50: '#fef2f2',
|
|
66
|
+
100: '#fee2e2',
|
|
67
|
+
200: '#fecaca',
|
|
68
|
+
300: '#fca5a5',
|
|
69
|
+
400: '#f87171',
|
|
70
|
+
500: '#ef4444',
|
|
71
|
+
600: '#dc2626',
|
|
72
|
+
700: '#b91c1c',
|
|
73
|
+
800: '#991b1b',
|
|
74
|
+
900: '#7f1d1d',
|
|
75
|
+
},
|
|
76
|
+
// Paper: Warm off-white backgrounds (like quality paper)
|
|
77
|
+
paper: {
|
|
78
|
+
50: '#fafaf9', // Base page background (very warm white)
|
|
79
|
+
100: '#f5f5f4', // Subtle depth
|
|
80
|
+
200: '#e7e5e4', // Soft borders
|
|
81
|
+
300: '#d6d3d1', // Medium borders
|
|
82
|
+
400: '#a8a29e', // Muted elements
|
|
83
|
+
},
|
|
84
|
+
// Ink: Text colors (warm grays)
|
|
85
|
+
ink: {
|
|
86
|
+
50: '#fafaf9', // Very light text
|
|
87
|
+
100: '#f5f5f4', // Light text
|
|
88
|
+
200: '#e7e5e4', // Subtle text
|
|
89
|
+
300: '#d6d3d1', // Muted text
|
|
90
|
+
400: '#a8a29e', // Light body text
|
|
91
|
+
500: '#78716c', // Body text
|
|
92
|
+
600: '#57534e', // Strong body text
|
|
93
|
+
700: '#44403c', // Headings
|
|
94
|
+
800: '#292524', // Strong headings
|
|
95
|
+
900: '#1c1917', // Black text
|
|
96
|
+
},
|
|
97
|
+
// Keep neutral for backwards compatibility
|
|
98
|
+
neutral: {
|
|
99
|
+
25: '#fcfcfd',
|
|
100
|
+
50: '#f8fafc',
|
|
101
|
+
100: '#f1f5f9',
|
|
102
|
+
200: '#e2e8f0',
|
|
103
|
+
300: '#cbd5e1',
|
|
104
|
+
400: '#94a3b8',
|
|
105
|
+
500: '#64748b',
|
|
106
|
+
600: '#475569',
|
|
107
|
+
700: '#334155',
|
|
108
|
+
800: '#1e293b',
|
|
109
|
+
900: '#0f172a',
|
|
110
|
+
950: '#020617',
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
fontFamily: {
|
|
114
|
+
sans: [
|
|
115
|
+
'ui-sans-serif',
|
|
116
|
+
'system-ui',
|
|
117
|
+
'-apple-system',
|
|
118
|
+
'BlinkMacSystemFont',
|
|
119
|
+
'Segoe UI',
|
|
120
|
+
'Roboto',
|
|
121
|
+
'Inter',
|
|
122
|
+
'Helvetica Neue',
|
|
123
|
+
'Arial',
|
|
124
|
+
'Noto Sans',
|
|
125
|
+
'sans-serif',
|
|
126
|
+
'Apple Color Emoji',
|
|
127
|
+
'Segoe UI Emoji',
|
|
128
|
+
],
|
|
129
|
+
mono: [
|
|
130
|
+
'JetBrains Mono Variable',
|
|
131
|
+
'JetBrains Mono',
|
|
132
|
+
'Fira Code',
|
|
133
|
+
'Monaco',
|
|
134
|
+
'Consolas',
|
|
135
|
+
'Liberation Mono',
|
|
136
|
+
'Courier New',
|
|
137
|
+
'monospace'
|
|
138
|
+
],
|
|
139
|
+
},
|
|
140
|
+
fontSize: {
|
|
141
|
+
'2xs': ['0.625rem', { lineHeight: '0.875rem' }],
|
|
142
|
+
'xs': ['0.75rem', { lineHeight: '1.125rem' }],
|
|
143
|
+
'sm': ['0.875rem', { lineHeight: '1.375rem' }], // Increased line-height
|
|
144
|
+
'base': ['1rem', { lineHeight: '1.625rem' }], // More comfortable reading (16px/26px)
|
|
145
|
+
'lg': ['1.125rem', { lineHeight: '1.875rem' }],
|
|
146
|
+
'xl': ['1.25rem', { lineHeight: '2rem' }],
|
|
147
|
+
'2xl': ['1.5rem', { lineHeight: '2.25rem' }],
|
|
148
|
+
'3xl': ['1.875rem', { lineHeight: '2.5rem' }],
|
|
149
|
+
'4xl': ['2.25rem', { lineHeight: '2.75rem' }],
|
|
150
|
+
'5xl': ['3rem', { lineHeight: '3.25rem' }],
|
|
151
|
+
'6xl': ['3.75rem', { lineHeight: '1' }],
|
|
152
|
+
'7xl': ['4.5rem', { lineHeight: '1' }],
|
|
153
|
+
'8xl': ['6rem', { lineHeight: '1' }],
|
|
154
|
+
'9xl': ['8rem', { lineHeight: '1' }],
|
|
155
|
+
},
|
|
156
|
+
spacing: {
|
|
157
|
+
'4.5': '1.125rem',
|
|
158
|
+
'5.5': '1.375rem',
|
|
159
|
+
'6.5': '1.625rem',
|
|
160
|
+
'7.5': '1.875rem',
|
|
161
|
+
'8.5': '2.125rem',
|
|
162
|
+
'9.5': '2.375rem',
|
|
163
|
+
'17': '4.25rem',
|
|
164
|
+
'18': '4.5rem',
|
|
165
|
+
'19': '4.75rem',
|
|
166
|
+
'21': '5.25rem',
|
|
167
|
+
'22': '5.5rem',
|
|
168
|
+
'23': '5.75rem',
|
|
169
|
+
'25': '6.25rem',
|
|
170
|
+
'26': '6.5rem',
|
|
171
|
+
'27': '6.75rem',
|
|
172
|
+
'29': '7.25rem',
|
|
173
|
+
'30': '7.5rem',
|
|
174
|
+
'31': '7.75rem',
|
|
175
|
+
'33': '8.25rem',
|
|
176
|
+
'34': '8.5rem',
|
|
177
|
+
'35': '8.75rem',
|
|
178
|
+
},
|
|
179
|
+
borderRadius: {
|
|
180
|
+
'4xl': '2rem',
|
|
181
|
+
'5xl': '2.5rem',
|
|
182
|
+
},
|
|
183
|
+
boxShadow: {
|
|
184
|
+
'xs': '0 1px 2px 0 rgb(0 0 0 / 0.03)', // Very subtle
|
|
185
|
+
'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)', // Soft paper lift
|
|
186
|
+
'md': '0 2px 4px 0 rgb(0 0 0 / 0.06)', // Gentle elevation
|
|
187
|
+
'lg': '0 4px 6px -1px rgb(0 0 0 / 0.08)', // Moderate elevation
|
|
188
|
+
'xl': '0 10px 15px -3px rgb(0 0 0 / 0.1)', // Strong elevation
|
|
189
|
+
'2xl': '0 20px 25px -5px rgb(0 0 0 / 0.12)', // Maximum elevation
|
|
190
|
+
'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.04)', // Subtle inner shadow
|
|
191
|
+
'paper': '0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.03)', // Paper-like shadow
|
|
192
|
+
'card': '0 2px 4px 0 rgb(0 0 0 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.02)', // Card shadow
|
|
193
|
+
},
|
|
194
|
+
animation: {
|
|
195
|
+
'fade-in': 'fadeIn 0.5s ease-in-out',
|
|
196
|
+
'fade-in-up': 'fadeInUp 0.5s ease-out',
|
|
197
|
+
'slide-in': 'slideIn 0.3s ease-out',
|
|
198
|
+
'slide-in-right': 'slideInRight 0.3s ease-out',
|
|
199
|
+
'bounce-subtle': 'bounceSubtle 2s infinite',
|
|
200
|
+
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
201
|
+
'shimmer': 'shimmer 2s linear infinite',
|
|
202
|
+
'float': 'float 6s ease-in-out infinite',
|
|
203
|
+
'scale-in': 'scaleIn 0.2s ease-out',
|
|
204
|
+
},
|
|
205
|
+
keyframes: {
|
|
206
|
+
fadeIn: {
|
|
207
|
+
'0%': { opacity: '0' },
|
|
208
|
+
'100%': { opacity: '1' },
|
|
209
|
+
},
|
|
210
|
+
fadeInUp: {
|
|
211
|
+
'0%': { opacity: '0', transform: 'translateY(10px)' },
|
|
212
|
+
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
213
|
+
},
|
|
214
|
+
slideIn: {
|
|
215
|
+
'0%': { transform: 'translateX(-10px)', opacity: '0' },
|
|
216
|
+
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
217
|
+
},
|
|
218
|
+
slideInRight: {
|
|
219
|
+
'0%': { transform: 'translateX(10px)', opacity: '0' },
|
|
220
|
+
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
221
|
+
},
|
|
222
|
+
bounceSubtle: {
|
|
223
|
+
'0%, 100%': { transform: 'translateY(0)' },
|
|
224
|
+
'50%': { transform: 'translateY(-2px)' },
|
|
225
|
+
},
|
|
226
|
+
shimmer: {
|
|
227
|
+
'0%': { transform: 'translateX(-100%)' },
|
|
228
|
+
'100%': { transform: 'translateX(100%)' },
|
|
229
|
+
},
|
|
230
|
+
float: {
|
|
231
|
+
'0%, 100%': { transform: 'translateY(0px)' },
|
|
232
|
+
'50%': { transform: 'translateY(-10px)' },
|
|
233
|
+
},
|
|
234
|
+
scaleIn: {
|
|
235
|
+
'0%': { transform: 'scale(0.9)', opacity: '0' },
|
|
236
|
+
'100%': { transform: 'scale(1)', opacity: '1' },
|
|
237
|
+
},
|
|
238
|
+
},
|
|
239
|
+
backdropBlur: {
|
|
240
|
+
'xs': '2px',
|
|
241
|
+
},
|
|
242
|
+
backgroundImage: {
|
|
243
|
+
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
|
244
|
+
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
|
245
|
+
'grid-pattern': `url("data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23e2e8f0' fill-opacity='0.4'%3e%3ccircle cx='30' cy='30' r='1.5'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e")`,
|
|
246
|
+
// Subtle paper texture (very fine grain)
|
|
247
|
+
'paper-texture': `url("data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noise'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3e%3cfeColorMatrix type='saturate' values='0'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3e%3c/svg%3e")`,
|
|
248
|
+
// Very subtle grain for cards
|
|
249
|
+
'subtle-grain': `url("data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noise'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3e%3cfeColorMatrix type='saturate' values='0'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3e%3c/svg%3e")`,
|
|
250
|
+
},
|
|
251
|
+
},
|
|
252
|
+
},
|
|
253
|
+
plugins: [],
|
|
254
254
|
}
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import type { StoryObj } from '@storybook/react';
|
|
2
|
-
import Button from './Button';
|
|
3
|
-
declare const meta: {
|
|
4
|
-
title: string;
|
|
5
|
-
component: typeof Button;
|
|
6
|
-
parameters: {
|
|
7
|
-
layout: string;
|
|
8
|
-
};
|
|
9
|
-
tags: string[];
|
|
10
|
-
argTypes: {
|
|
11
|
-
variant: {
|
|
12
|
-
control: "select";
|
|
13
|
-
options: string[];
|
|
14
|
-
};
|
|
15
|
-
size: {
|
|
16
|
-
control: "select";
|
|
17
|
-
options: string[];
|
|
18
|
-
};
|
|
19
|
-
loading: {
|
|
20
|
-
control: "boolean";
|
|
21
|
-
};
|
|
22
|
-
disabled: {
|
|
23
|
-
control: "boolean";
|
|
24
|
-
};
|
|
25
|
-
fullWidth: {
|
|
26
|
-
control: "boolean";
|
|
27
|
-
};
|
|
28
|
-
iconOnly: {
|
|
29
|
-
control: "boolean";
|
|
30
|
-
};
|
|
31
|
-
};
|
|
32
|
-
};
|
|
33
|
-
export default meta;
|
|
34
|
-
type Story = StoryObj<typeof meta>;
|
|
35
|
-
export declare const Primary: Story;
|
|
36
|
-
export declare const Secondary: Story;
|
|
37
|
-
export declare const Ghost: Story;
|
|
38
|
-
export declare const Danger: Story;
|
|
39
|
-
export declare const Outline: Story;
|
|
40
|
-
export declare const WithIcon: Story;
|
|
41
|
-
export declare const IconRight: Story;
|
|
42
|
-
export declare const IconOnly: Story;
|
|
43
|
-
export declare const Loading: Story;
|
|
44
|
-
export declare const Disabled: Story;
|
|
45
|
-
export declare const WithBadge: Story;
|
|
46
|
-
export declare const Small: Story;
|
|
47
|
-
export declare const Large: Story;
|
|
48
|
-
export declare const FullWidth: Story;
|
|
49
|
-
export declare const AllVariants: Story;
|
|
50
|
-
export declare const AllSizes: Story;
|
|
51
|
-
//# sourceMappingURL=Button.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../src/components/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface ChartData {
|
|
3
|
-
type: string;
|
|
4
|
-
title: string;
|
|
5
|
-
charts?: any[];
|
|
6
|
-
chartType?: string;
|
|
7
|
-
data?: any;
|
|
8
|
-
lastUpdated?: string;
|
|
9
|
-
message?: string;
|
|
10
|
-
}
|
|
11
|
-
export interface ChartVisualizationUIProps {
|
|
12
|
-
chartData: ChartData | null;
|
|
13
|
-
isLoading: boolean;
|
|
14
|
-
error: string | null;
|
|
15
|
-
reportId: string;
|
|
16
|
-
title?: string;
|
|
17
|
-
height?: string;
|
|
18
|
-
onRefresh?: () => void;
|
|
19
|
-
}
|
|
20
|
-
export declare const ChartVisualizationUI: React.FC<ChartVisualizationUIProps>;
|
|
21
|
-
//# sourceMappingURL=ChartVisualizationUI.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ChartVisualizationUI.d.ts","sourceRoot":"","sources":["../../src/components/ChartVisualizationUI.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AA+FD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA2HpE,CAAC"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface ChatMessage {
|
|
3
|
-
id: string;
|
|
4
|
-
role: 'user' | 'assistant';
|
|
5
|
-
content: string;
|
|
6
|
-
timestamp: Date;
|
|
7
|
-
}
|
|
8
|
-
export interface ChatUIProps {
|
|
9
|
-
messages: ChatMessage[];
|
|
10
|
-
inputValue: string;
|
|
11
|
-
isLoading: boolean;
|
|
12
|
-
suggestedQuestions?: string[];
|
|
13
|
-
isMinimized?: boolean;
|
|
14
|
-
className?: string;
|
|
15
|
-
messagesEndRef?: React.RefObject<HTMLDivElement | null>;
|
|
16
|
-
onInputChange: (value: string) => void;
|
|
17
|
-
onSendMessage: () => void;
|
|
18
|
-
onKeyPress: (e: React.KeyboardEvent) => void;
|
|
19
|
-
onSuggestedQuestion?: (question: string) => void;
|
|
20
|
-
onMinimize?: (minimized: boolean) => void;
|
|
21
|
-
}
|
|
22
|
-
export declare const ChatUI: React.FC<ChatUIProps>;
|
|
23
|
-
//# sourceMappingURL=ChatUI.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ChatUI.d.ts","sourceRoot":"","sources":["../../src/components/ChatUI.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACxD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC7C,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmIxC,CAAC"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import './CommissionDashboardUI.css';
|
|
3
|
-
export interface MonthlyCommission {
|
|
4
|
-
year: number;
|
|
5
|
-
month: number;
|
|
6
|
-
totalCommission: number;
|
|
7
|
-
totalPaid: number;
|
|
8
|
-
totalUnpaid: number;
|
|
9
|
-
lineItemCount: number;
|
|
10
|
-
}
|
|
11
|
-
export interface CommissionSummary {
|
|
12
|
-
userId: string;
|
|
13
|
-
userName: string;
|
|
14
|
-
currentYearTotal: number;
|
|
15
|
-
currentMonthTotal: number;
|
|
16
|
-
monthlyBreakdown: MonthlyCommission[];
|
|
17
|
-
}
|
|
18
|
-
export interface CommissionDashboardUIProps {
|
|
19
|
-
summary: CommissionSummary | null;
|
|
20
|
-
isLoading: boolean;
|
|
21
|
-
error: string | null;
|
|
22
|
-
onRefresh?: () => void;
|
|
23
|
-
}
|
|
24
|
-
export declare const CommissionDashboardUI: React.FC<CommissionDashboardUIProps>;
|
|
25
|
-
//# sourceMappingURL=CommissionDashboardUI.d.ts.map
|