@crystin001/theme-settings-lib 1.0.0 → 1.1.0

package/README.md

@@ -24,7 +24,9 @@ Add to your `package.json`:
 }
 ```
 
-Then run `npm install`.
+Then run `npm install`. The library will automatically build during installation.
+
+**Note:** The library requires TypeScript to build. It will be installed automatically as a dev dependency and the build will run during `npm install`.
 
 To install a specific version or branch:
 
@@ -36,18 +38,20 @@ To install a specific version or branch:
 }
 ```
 
-### Option B: Local Package (Monorepo)
+### Option B: Local Package (Development)
 
-If the library is in the same repository:
+For local development, you can use a file path to link the library directly:
 
 ```json
 {
   "dependencies": {
-    "@crystin001/theme-settings-lib": "file:../packages/theme-settings-lib"
+    "@crystin001/theme-settings-lib": "file:../theme-settings-lib"
   }
 }
 ```
 
+**Note:** Make sure to run `npm run build` in the library directory after making changes.
+
 ### Option C: npm Package (Future)
 
 ```bash
@@ -302,42 +306,15 @@ import { ensureContrast } from '@crystin001/theme-settings-lib';
 const readableColor = ensureContrast('#888888', '#FFFFFF', 'AA');
 ```
 
-## Development
-
-### Building the Library
-
-```bash
-npm run build
-```
-
-This compiles TypeScript to JavaScript and generates type declaration files in the `dist/` folder.
-
-### Project Structure
-
-```
-theme-settings-lib/
-├── src/
-│   ├── hooks/          # React hooks
-│   ├── theme.ts        # Theme definitions
-│   ├── i18n.ts         # Internationalization setup
-│   ├── settings-context.tsx  # Settings provider
-│   ├── color-utils.ts  # Color utility functions
-│   └── index.ts        # Main exports
-├── dist/               # Compiled output (generated)
-├── package.json
-└── tsconfig.json
-```
-
-## Updating the Library
+## Contributing / Development
 
-To update themes or translations across all apps:
+For information about developing the library, including:
+- Building the library
+- Running the example app for visual theme development
+- Project structure
+- Development workflow
 
-1. Make changes in `src/` directory
-2. Run `npm run build` to compile
-3. Update the version in `package.json`
-4. Commit and push to the repository
-5. In each app, update the dependency version and run `npm install`
-6. Apps will automatically get the latest themes and translations
+See [SETUP.md](./SETUP.md) in the repository.
 
 ## Versioning
 
@@ -347,6 +324,57 @@ The library follows [Semantic Versioning](https://semver.org/):
 - **Minor** (0.x.0) - New themes, features, or languages
 - **Patch** (0.0.x) - Bug fixes and theme adjustments
 
+## Troubleshooting
+
+### "Unable to resolve path to module" Error
+
+If you get an error like `Unable to resolve path to module '@crystin001/theme-settings-lib'`, try these steps:
+
+1. **The library should build automatically during installation.** If you're using a local file path and made changes, rebuild:
+   ```bash
+   cd theme-settings-lib
+   npm run build
+   ```
+   
+   **Note:** When installing from git, the library builds automatically via the `prepare` script. You only need to manually build if using a local `file:` path and making changes.
+
+2. **Clear Metro cache and restart:**
+   ```bash
+   # In your app directory
+   npx react-native start --reset-cache
+   # Or for Expo:
+   npx expo start --clear
+   ```
+
+3. **Reinstall dependencies:**
+   ```bash
+   # In your app directory
+   rm -rf node_modules
+   npm install
+   # Or if using yarn:
+   rm -rf node_modules
+   yarn install
+   ```
+
+4. **If using local file path, verify the path is correct:**
+   ```json
+   {
+     "dependencies": {
+       "@crystin001/theme-settings-lib": "file:../theme-settings-lib"
+     }
+   }
+   ```
+   Make sure the relative path from your app's `package.json` to the library is correct.
+
+5. **For Expo projects, you may need to restart the development server completely:**
+   ```bash
+   # Stop the server, then:
+   npx expo start --clear
+   ```
+
+6. **Check that `dist/` folder exists and contains compiled files:**
+   The library must be built before it can be used. Run `npm run build` in the library directory.
+
 ## Peer Dependencies
 
 This library requires the following peer dependencies (installed by your app):
@@ -366,3 +394,8 @@ MIT
 ## Repository
 
 [https://github.com/trial-and-code/theme-settings-lib](https://github.com/trial-and-code/theme-settings-lib)
+
+---
+
+**For developers:** See [SETUP.md](./SETUP.md) for development setup, building the library, and running the example app.
+

package/dist/components/ThemeShowcase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * ThemeShowcase Component
+ *
+ * A visual component to showcase all available themes for development purposes.
+ * Displays all theme families with their light and dark variants, showing
+ * color palettes and sample UI components.
+ */
+import React from 'react';
+export declare function ThemeShowcase(): React.JSX.Element;
+//# sourceMappingURL=ThemeShowcase.d.ts.map

package/dist/components/ThemeShowcase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeShowcase.d.ts","sourceRoot":"","sources":["../../src/components/ThemeShowcase.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAmIxC,wBAAgB,aAAa,sBA0E5B"}

package/dist/components/ThemeShowcase.js

@@ -0,0 +1,357 @@
+"use strict";
+/**
+ * ThemeShowcase Component
+ *
+ * A visual component to showcase all available themes for development purposes.
+ * Displays all theme families with their light and dark variants, showing
+ * color palettes and sample UI components.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeShowcase = ThemeShowcase;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const theme_1 = require("../theme");
+const settings_context_1 = require("../settings-context");
+const { width } = react_native_1.Dimensions.get('window');
+const CARD_WIDTH = width > 600 ? (width - 60) / 2 : width - 40;
+function ColorSwatch({ label, color, textColor }) {
+    return (<react_native_1.View style={[styles.swatch, { backgroundColor: color }]}>
+      <react_native_1.Text style={[styles.swatchLabel, { color: textColor || '#000' }]} numberOfLines={1}>
+        {label}
+      </react_native_1.Text>
+      <react_native_1.Text style={[styles.swatchValue, { color: textColor || '#000' }]} numberOfLines={1}>
+        {color}
+      </react_native_1.Text>
+    </react_native_1.View>);
+}
+function ThemeCard({ themeName, colors, isSelected, onSelect }) {
+    const displayName = themeName.replace(/-/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase());
+    const isDark = themeName.endsWith('-dark');
+    return (<react_native_1.Pressable onPress={onSelect} style={[
+            styles.themeCard,
+            {
+                backgroundColor: colors.card,
+                borderColor: isSelected ? colors.primary : colors.border,
+                borderWidth: isSelected ? 3 : 1,
+            },
+            isSelected && styles.selectedCard,
+        ]}>
+      <react_native_1.View style={[styles.themeHeader, { backgroundColor: colors.background }]}>
+        <react_native_1.Text style={[styles.themeTitle, { color: colors.text }]}>{displayName}</react_native_1.Text>
+        {isSelected && (<react_native_1.View style={[styles.selectedBadge, { backgroundColor: colors.primary }]}>
+            <react_native_1.Text style={[styles.selectedBadgeText, { color: colors.buttonText }]}>Active</react_native_1.Text>
+          </react_native_1.View>)}
+      </react_native_1.View>
+
+      <react_native_1.View style={styles.colorGrid}>
+        <ColorSwatch label="Background" color={colors.background} textColor={colors.text}/>
+        <ColorSwatch label="Text" color={colors.text}/>
+        <ColorSwatch label="Primary" color={colors.primary}/>
+        <ColorSwatch label="Secondary" color={colors.secondary}/>
+        <ColorSwatch label="Tint" color={colors.tint}/>
+        <ColorSwatch label="Card" color={colors.card} textColor={colors.cardText}/>
+      </react_native_1.View>
+
+      <react_native_1.View style={styles.sampleSection}>
+        <react_native_1.Text style={[styles.sampleLabel, { color: colors.text }]}>Sample UI:</react_native_1.Text>
+        
+        <react_native_1.View style={[styles.sampleCard, { backgroundColor: colors.card, borderColor: colors.border }]}>
+          <react_native_1.Text style={[styles.sampleText, { color: colors.cardText }]}>
+            Sample card content
+          </react_native_1.Text>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.buttonRow}>
+          <react_native_1.Pressable style={[styles.sampleButton, { backgroundColor: colors.button }]} onPress={() => { }}>
+            <react_native_1.Text style={[styles.sampleButtonText, { color: colors.buttonText }]}>
+              Primary
+            </react_native_1.Text>
+          </react_native_1.Pressable>
+          <react_native_1.Pressable style={[styles.sampleButton, styles.sampleButtonSecondary, { backgroundColor: colors.buttonSecondary }]} onPress={() => { }}>
+            <react_native_1.Text style={[styles.sampleButtonText, { color: colors.buttonSecondaryText }]}>
+              Secondary
+            </react_native_1.Text>
+          </react_native_1.Pressable>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.statusRow}>
+          <react_native_1.View style={[styles.statusBadge, { backgroundColor: colors.success }]}>
+            <react_native_1.Text style={[styles.statusText, { color: '#FFF' }]}>Success</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={[styles.statusBadge, { backgroundColor: colors.warning }]}>
+            <react_native_1.Text style={[styles.statusText, { color: '#000' }]}>Warning</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={[styles.statusBadge, { backgroundColor: colors.error }]}>
+            <react_native_1.Text style={[styles.statusText, { color: '#FFF' }]}>Error</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={[styles.statusBadge, { backgroundColor: colors.info }]}>
+            <react_native_1.Text style={[styles.statusText, { color: '#FFF' }]}>Info</react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.View style={[styles.sampleInput, { backgroundColor: colors.input, borderColor: colors.inputBorder }]}>
+          <react_native_1.Text style={[styles.sampleInputText, { color: colors.inputText }]}>
+            Sample input field
+          </react_native_1.Text>
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.Pressable>);
+}
+function ThemeShowcase() {
+    const { currentTheme, setThemeFamily, availableThemeFamilies } = (0, settings_context_1.useSettings)();
+    const [filter, setFilter] = (0, react_1.useState)('all');
+    const themeEntries = Object.entries(theme_1.Themes);
+    const filteredThemes = themeEntries.filter(([name]) => {
+        if (filter === 'light')
+            return name.endsWith('-light');
+        if (filter === 'dark')
+            return name.endsWith('-dark');
+        return true;
+    });
+    const handleThemeSelect = (themeName) => {
+        // Extract theme family from theme name (e.g., 'neon-surf-light' -> 'neon-surf')
+        const family = themeName.replace(/-light$|-dark$/, '');
+        setThemeFamily(family);
+    };
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.View style={styles.header}>
+        <react_native_1.Text style={styles.headerTitle}>Theme Showcase</react_native_1.Text>
+        <react_native_1.Text style={styles.headerSubtitle}>
+          Tap any theme card to apply it
+        </react_native_1.Text>
+      </react_native_1.View>
+
+      <react_native_1.View style={styles.filterContainer}>
+        <react_native_1.TouchableOpacity style={[styles.filterButton, filter === 'all' && styles.filterButtonActive]} onPress={() => setFilter('all')}>
+          <react_native_1.Text style={[styles.filterText, filter === 'all' && styles.filterTextActive]}>
+            All
+          </react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+        <react_native_1.TouchableOpacity style={[styles.filterButton, filter === 'light' && styles.filterButtonActive]} onPress={() => setFilter('light')}>
+          <react_native_1.Text style={[styles.filterText, filter === 'light' && styles.filterTextActive]}>
+            Light
+          </react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+        <react_native_1.TouchableOpacity style={[styles.filterButton, filter === 'dark' && styles.filterButtonActive]} onPress={() => setFilter('dark')}>
+          <react_native_1.Text style={[styles.filterText, filter === 'dark' && styles.filterTextActive]}>
+            Dark
+          </react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+      </react_native_1.View>
+
+      <react_native_1.ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={true}>
+        {filteredThemes.map(([themeName, colors]) => {
+            const isSelected = currentTheme === themeName;
+            return (<ThemeCard key={themeName} themeName={themeName} colors={colors} isSelected={isSelected} onSelect={() => handleThemeSelect(themeName)}/>);
+        })}
+      </react_native_1.ScrollView>
+    </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#F5F5F5',
+    },
+    header: {
+        padding: 20,
+        paddingTop: 40,
+        backgroundColor: '#FFF',
+        borderBottomWidth: 1,
+        borderBottomColor: '#E0E0E0',
+    },
+    headerTitle: {
+        fontSize: 28,
+        fontWeight: 'bold',
+        color: '#000',
+        marginBottom: 4,
+    },
+    headerSubtitle: {
+        fontSize: 14,
+        color: '#666',
+    },
+    filterContainer: {
+        flexDirection: 'row',
+        padding: 12,
+        backgroundColor: '#FFF',
+        borderBottomWidth: 1,
+        borderBottomColor: '#E0E0E0',
+        gap: 8,
+    },
+    filterButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 20,
+        backgroundColor: '#F0F0F0',
+    },
+    filterButtonActive: {
+        backgroundColor: '#007AFF',
+    },
+    filterText: {
+        fontSize: 14,
+        color: '#666',
+        fontWeight: '500',
+    },
+    filterTextActive: {
+        color: '#FFF',
+    },
+    scrollView: {
+        flex: 1,
+    },
+    scrollContent: {
+        padding: 20,
+        gap: 20,
+    },
+    themeCard: {
+        width: CARD_WIDTH,
+        alignSelf: 'center',
+        borderRadius: 12,
+        padding: 16,
+        marginBottom: 8,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 3,
+    },
+    selectedCard: {
+        shadowOpacity: 0.2,
+        shadowRadius: 8,
+        elevation: 6,
+    },
+    themeHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 16,
+        padding: 12,
+        borderRadius: 8,
+    },
+    themeTitle: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        flex: 1,
+    },
+    selectedBadge: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 12,
+    },
+    selectedBadgeText: {
+        fontSize: 12,
+        fontWeight: '600',
+    },
+    colorGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+        marginBottom: 16,
+    },
+    swatch: {
+        width: (CARD_WIDTH - 48) / 3 - 6,
+        height: 60,
+        borderRadius: 6,
+        padding: 6,
+        justifyContent: 'flex-end',
+    },
+    swatchLabel: {
+        fontSize: 10,
+        fontWeight: '600',
+        marginBottom: 2,
+    },
+    swatchValue: {
+        fontSize: 9,
+        opacity: 0.8,
+    },
+    sampleSection: {
+        marginTop: 8,
+    },
+    sampleLabel: {
+        fontSize: 14,
+        fontWeight: '600',
+        marginBottom: 8,
+    },
+    sampleCard: {
+        padding: 12,
+        borderRadius: 8,
+        borderWidth: 1,
+        marginBottom: 12,
+    },
+    sampleText: {
+        fontSize: 14,
+    },
+    buttonRow: {
+        flexDirection: 'row',
+        gap: 8,
+        marginBottom: 12,
+    },
+    sampleButton: {
+        flex: 1,
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        borderRadius: 6,
+        alignItems: 'center',
+    },
+    sampleButtonSecondary: {
+    // Additional styles if needed
+    },
+    sampleButtonText: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    statusRow: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+        marginBottom: 12,
+    },
+    statusBadge: {
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+        borderRadius: 12,
+    },
+    statusText: {
+        fontSize: 11,
+        fontWeight: '600',
+    },
+    sampleInput: {
+        padding: 12,
+        borderRadius: 6,
+        borderWidth: 1,
+    },
+    sampleInputText: {
+        fontSize: 14,
+    },
+});

package/dist/index.d.ts

@@ -23,5 +23,6 @@ export * from './i18n';
 export * from './hooks/use-theme-color';
 export * from './hooks/use-translation';
 export * from './color-utils';
+export * from './theme-validation';
 export { default as i18n } from './i18n';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,cAAc,SAAS,CAAC;AAGxB,cAAc,oBAAoB,CAAC;AAGnC,cAAc,QAAQ,CAAC;AAGvB,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,eAAe,CAAC;AAG9B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,cAAc,SAAS,CAAC;AAGxB,cAAc,oBAAoB,CAAC;AAGnC,cAAc,QAAQ,CAAC;AAGvB,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AAGnC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/index.js

@@ -48,6 +48,7 @@ __exportStar(require("./hooks/use-theme-color"), exports);
 __exportStar(require("./hooks/use-translation"), exports);
 // Utility exports
 __exportStar(require("./color-utils"), exports);
+__exportStar(require("./theme-validation"), exports);
 // Re-export i18n instance for apps that need direct access
 var i18n_1 = require("./i18n");
 Object.defineProperty(exports, "i18n", { enumerable: true, get: function () { return __importDefault(i18n_1).default; } });

package/dist/stories/ThemeStories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const AllThemes: () => React.JSX.Element;
+export declare const LightThemes: () => React.JSX.Element;
+export declare const DarkThemes: () => React.JSX.Element;
+export declare const IndividualThemes: () => React.JSX.Element;
+//# sourceMappingURL=ThemeStories.d.ts.map

package/dist/stories/ThemeStories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeStories.d.ts","sourceRoot":"","sources":["../../src/stories/ThemeStories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkG1B,eAAO,MAAM,SAAS,yBAgBrB,CAAC;AAGF,eAAO,MAAM,WAAW,yBAevB,CAAC;AAGF,eAAO,MAAM,UAAU,yBAetB,CAAC;AAGF,eAAO,MAAM,gBAAgB,yBAsB5B,CAAC"}