@tydavidson/design-system 1.1.6 → 1.1.8

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