@tydavidson/design-system 1.1.5 → 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.
Files changed (7) hide show
  1. package/README.md +59 -1
  2. package/docs/component-colors.ts +94 -0
  3. package/docs/component-specific-colors.md +253 -0
  4. package/docs/setup-guide.md +276 -0
  5. package/docs/theme-usage.md +668 -0
  6. package/docs/troubleshooting.md +130 -0
  7. package/package.json +5 -5
package/docs/troubleshooting.md ADDED
@@ -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.5",
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",
@@ -37,8 +38,7 @@
37
38
  "react": ">=18.0.0",
38
39
  "react-dom": ">=18.0.0",
39
40
  "next-themes": ">=0.2.0",
40
- "@tabler/icons-react": ">=2.0.0",
41
- "lucide-react": ">=0.500.0"
41
+ "@tabler/icons-react": ">=2.0.0"
42
42
  },
43
43
  "author": "Float Technologies",
44
44
  "license": "ISC",
@@ -87,7 +87,7 @@
87
87
  "clsx": "^2.0.0",
88
88
  "cmdk": "^1.1.1",
89
89
  "date-fns": "^4.1.0",
90
- "lucide-react": "^0.509.0",
90
+
91
91
  "next": "^15.3.1",
92
92
  "next-svgr": "^0.0.2",
93
93
  "next-themes": "^0.2.1",