@tydavidson/design-system 1.1.6 → 1.1.7
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/README.md +59 -1
- package/docs/component-colors.ts +94 -0
- package/docs/component-specific-colors.md +253 -0
- package/docs/setup-guide.md +276 -0
- package/docs/theme-usage.md +668 -0
- package/docs/troubleshooting.md +130 -0
- package/package.json +3 -2
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
# Troubleshooting Guide
|
|
2
|
+
|
|
3
|
+
Quick solutions for common issues when using the Float Design System.
|
|
4
|
+
|
|
5
|
+
## 🚨 Critical Issues
|
|
6
|
+
|
|
7
|
+
### "Module not found" errors
|
|
8
|
+
|
|
9
|
+
**Problem**: Can't import from `@tydavidson/design-system/themes`
|
|
10
|
+
|
|
11
|
+
**Solution**:
|
|
12
|
+
1. Ensure you're using version 1.1.4 or later
|
|
13
|
+
2. Clear your node_modules and reinstall: `rm -rf node_modules package-lock.json && npm install`
|
|
14
|
+
|
|
15
|
+
### React Context errors in Next.js App Router
|
|
16
|
+
|
|
17
|
+
**Problem**: `Error: useTheme must be used within a ThemeContextProvider`
|
|
18
|
+
|
|
19
|
+
**Solution**:
|
|
20
|
+
1. Use version 1.1.4 or later (this was fixed)
|
|
21
|
+
2. Make sure you're using `ThemeProvider` (not `ThemeContextProvider`)
|
|
22
|
+
3. Ensure the provider wraps your app correctly
|
|
23
|
+
|
|
24
|
+
### Hydration mismatch errors
|
|
25
|
+
|
|
26
|
+
**Problem**: Server and client rendering don't match
|
|
27
|
+
|
|
28
|
+
**Solution**:
|
|
29
|
+
```tsx
|
|
30
|
+
// Add to your root layout
|
|
31
|
+
<html lang="en" suppressHydrationWarning>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## 🟡 Common Issues
|
|
35
|
+
|
|
36
|
+
### Theme colors not working
|
|
37
|
+
|
|
38
|
+
**Problem**: Components appear in default colors instead of theme colors
|
|
39
|
+
|
|
40
|
+
**Solutions**:
|
|
41
|
+
1. Import the CSS: `import '@tydavidson/design-system/themes/theme.css'`
|
|
42
|
+
2. Configure Tailwind with the color tokens (see setup guide)
|
|
43
|
+
3. Check that CSS variables are set on `:root`
|
|
44
|
+
|
|
45
|
+
### Icons not displaying
|
|
46
|
+
|
|
47
|
+
**Problem**: Icons show as empty boxes or don't render
|
|
48
|
+
|
|
49
|
+
**Solution**:
|
|
50
|
+
```bash
|
|
51
|
+
npm install @tabler/icons-react
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### TypeScript errors
|
|
55
|
+
|
|
56
|
+
**Problem**: TypeScript can't find types
|
|
57
|
+
|
|
58
|
+
**Solutions**:
|
|
59
|
+
1. The package includes types - no additional @types package needed
|
|
60
|
+
2. Check your `tsconfig.json` includes `node_modules`
|
|
61
|
+
3. Restart your TypeScript server
|
|
62
|
+
|
|
63
|
+
### Bundle size too large
|
|
64
|
+
|
|
65
|
+
**Problem**: Design system is making your bundle huge
|
|
66
|
+
|
|
67
|
+
**Solutions**:
|
|
68
|
+
1. Use tree-shaking - only import what you need
|
|
69
|
+
2. Icon libraries are external (won't be bundled)
|
|
70
|
+
3. Use dynamic imports for large components
|
|
71
|
+
|
|
72
|
+
## 🔧 Quick Fixes
|
|
73
|
+
|
|
74
|
+
### Missing peer dependencies
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
npm install react react-dom next-themes @tabler/icons-react
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### CSS not loading
|
|
81
|
+
|
|
82
|
+
Add to your main CSS file or layout:
|
|
83
|
+
```css
|
|
84
|
+
@import '@tydavidson/design-system/themes/theme.css';
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Tailwind not recognizing classes
|
|
88
|
+
|
|
89
|
+
Update your `tailwind.config.js`:
|
|
90
|
+
```js
|
|
91
|
+
content: [
|
|
92
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
93
|
+
"./node_modules/@tydavidson/design-system/dist/**/*.{js,mjs}",
|
|
94
|
+
],
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Theme provider not working
|
|
98
|
+
|
|
99
|
+
Make sure you're using the correct import:
|
|
100
|
+
```tsx
|
|
101
|
+
import { ThemeProvider } from '@tydavidson/design-system/themes';
|
|
102
|
+
// NOT ThemeContextProvider (deprecated)
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## 📋 Checklist
|
|
106
|
+
|
|
107
|
+
Before reporting an issue, verify:
|
|
108
|
+
|
|
109
|
+
- [ ] Using latest version (1.1.4+)
|
|
110
|
+
- [ ] All peer dependencies installed
|
|
111
|
+
- [ ] CSS imported correctly
|
|
112
|
+
- [ ] Tailwind configured with color tokens
|
|
113
|
+
- [ ] ThemeProvider wrapping your app
|
|
114
|
+
- [ ] `suppressHydrationWarning` on html element
|
|
115
|
+
- [ ] No conflicting CSS frameworks
|
|
116
|
+
|
|
117
|
+
## 🆘 Still Having Issues?
|
|
118
|
+
|
|
119
|
+
1. Check the browser console for specific error messages
|
|
120
|
+
2. Verify your setup matches the [setup guide](./setup-guide.md)
|
|
121
|
+
3. Try the [theme usage examples](./theme-usage.md)
|
|
122
|
+
4. Check if the issue is in the consuming project, not the design system
|
|
123
|
+
|
|
124
|
+
## Version History
|
|
125
|
+
|
|
126
|
+
- **1.1.4**: Fixed React context compatibility with Next.js App Router
|
|
127
|
+
- **1.1.3**: Added ESM exports for Next.js compatibility
|
|
128
|
+
- **1.1.2**: Fixed internal module resolution issues
|
|
129
|
+
- **1.1.1**: Fixed import path issues
|
|
130
|
+
- **1.1.0**: Added theme system exports
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tydavidson/design-system",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.7",
|
|
4
4
|
"description": "Float Design System with email components and theme system",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -25,7 +25,8 @@
|
|
|
25
25
|
},
|
|
26
26
|
"files": [
|
|
27
27
|
"dist",
|
|
28
|
-
"src/themes/theme.css"
|
|
28
|
+
"src/themes/theme.css",
|
|
29
|
+
"docs"
|
|
29
30
|
],
|
|
30
31
|
"keywords": [
|
|
31
32
|
"design-system",
|