@shohojdhara/atomix 0.3.9 → 0.3.11
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/CHANGELOG.md +14 -3
- package/dist/index.d.ts +2 -80
- package/dist/index.esm.js +14 -262
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +58 -303
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/theme.d.ts +1 -32
- package/dist/theme.js +12 -159
- package/dist/theme.js.map +1 -1
- package/package.json +1 -1
- package/src/lib/config/index.ts +5 -5
- package/src/lib/theme/config/index.ts +1 -1
- package/src/lib/theme/core/createTheme.ts +11 -40
- package/src/lib/theme/generators/index.ts +1 -4
- package/src/lib/theme/index.ts +4 -16
- package/src/lib/theme/runtime/ThemeProvider.tsx +1 -16
- package/src/lib/config/loader.ts +0 -147
- package/src/lib/theme/config/__tests__/configLoader.test.ts +0 -207
- package/src/lib/theme/config/configLoader.ts +0 -113
- package/src/lib/theme/config/loader.ts +0 -293
- package/src/lib/theme/generators/cssFile.ts +0 -79
package/dist/theme.d.ts
CHANGED
|
@@ -1043,33 +1043,6 @@ declare function removeCSS(id?: string): void;
|
|
|
1043
1043
|
*/
|
|
1044
1044
|
declare function isCSSInjected(id?: string): boolean;
|
|
1045
1045
|
|
|
1046
|
-
/**
|
|
1047
|
-
* Theme Configuration Loader
|
|
1048
|
-
*
|
|
1049
|
-
* Provides functions to load theme configurations from atomix.config.ts
|
|
1050
|
-
* Includes both sync and async versions, with automatic fallbacks
|
|
1051
|
-
*/
|
|
1052
|
-
|
|
1053
|
-
/**
|
|
1054
|
-
* Load theme from config file (synchronous, Node.js only)
|
|
1055
|
-
* @param configPath - Path to config file (default: atomix.config.ts)
|
|
1056
|
-
* @returns DesignTokens from theme configuration
|
|
1057
|
-
* @throws Error if config loading is not available in browser environment
|
|
1058
|
-
*/
|
|
1059
|
-
declare function loadThemeFromConfigSync(options?: {
|
|
1060
|
-
configPath?: string;
|
|
1061
|
-
required?: boolean;
|
|
1062
|
-
}): DesignTokens;
|
|
1063
|
-
/**
|
|
1064
|
-
* Load theme from config file (asynchronous)
|
|
1065
|
-
* @param configPath - Path to config file (default: atomix.config.ts)
|
|
1066
|
-
* @returns Promise resolving to DesignTokens from theme configuration
|
|
1067
|
-
*/
|
|
1068
|
-
declare function loadThemeFromConfig(options?: {
|
|
1069
|
-
configPath?: string;
|
|
1070
|
-
required?: boolean;
|
|
1071
|
-
}): Promise<DesignTokens>;
|
|
1072
|
-
|
|
1073
1046
|
/**
|
|
1074
1047
|
* Theme Provider
|
|
1075
1048
|
*
|
|
@@ -1759,10 +1732,6 @@ declare function injectTheme(css: string, id?: string): void;
|
|
|
1759
1732
|
* Remove theme from DOM
|
|
1760
1733
|
*/
|
|
1761
1734
|
declare function removeTheme(id?: string): void;
|
|
1762
|
-
/**
|
|
1763
|
-
* Save theme to CSS file
|
|
1764
|
-
*/
|
|
1765
|
-
declare function saveTheme(css: string, filePath: string): Promise<void>;
|
|
1766
1735
|
|
|
1767
|
-
export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, applyCSSVariables, applyComponentTheme, applyTheme, camelToKebab, clearThemes, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isValidCSSVariableName,
|
|
1736
|
+
export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, applyCSSVariables, applyComponentTheme, applyTheme, camelToKebab, clearThemes, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isValidCSSVariableName, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, normalizeThemeTokens, registerTheme, removeCSS, removeCSSVariables, removeTheme, themePropertyToCSSVar, unregisterTheme, useComponentTheme, useHistory, useTheme, useThemeTokens };
|
|
1768
1737
|
export type { A11yIssue, CSSVariableConfig, CSSVariableNamingOptions, ComponentThemeOptions, ComponentThemeOverride, DesignTokens, GenerateCSSVariablesOptions, NamingOptions, RTLConfig, Theme, ThemeChangeEvent, ThemeComparatorProps, ThemeComponentOverrides, ThemeContextValue, ThemeErrorBoundaryProps, ThemeInspectorProps, ThemeLiveEditorProps, ThemeLoadOptions, ThemePreviewProps, ThemeProviderProps, ThemeValidationResult, UseHistoryOptions, UseHistoryReturn, UseThemeReturn, ValidationResult };
|
package/dist/theme.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { loadAtomixConfig } from "../lib/config/loader";
|
|
2
|
-
|
|
3
1
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
4
2
|
|
|
5
3
|
import { createContext, useRef, useEffect, useCallback, useMemo, useState, useContext, Component } from "react";
|
|
@@ -557,39 +555,13 @@ class ThemeLogger {
|
|
|
557
555
|
tokens = input;
|
|
558
556
|
}
|
|
559
557
|
// Merge with defaults and generate CSS
|
|
560
|
-
else
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
try {
|
|
568
|
-
const configLoaderModule = require("../config/configLoader"), loaderModule = require("../../config/loader");
|
|
569
|
-
// Get prefix from config if needed
|
|
570
|
-
if (loadThemeFromConfigSync = configLoaderModule.loadThemeFromConfigSync, loadAtomixConfig = loaderModule.loadAtomixConfig,
|
|
571
|
-
tokens = loadThemeFromConfigSync(), !options?.prefix) try {
|
|
572
|
-
const config = loadAtomixConfig({
|
|
573
|
-
configPath: "atomix.config.ts",
|
|
574
|
-
required: !1
|
|
575
|
-
});
|
|
576
|
-
options = {
|
|
577
|
-
...options,
|
|
578
|
-
prefix: config?.prefix || "atomix"
|
|
579
|
-
};
|
|
580
|
-
} catch (error) {
|
|
581
|
-
// If config loading fails, use default prefix
|
|
582
|
-
options = {
|
|
583
|
-
...options,
|
|
584
|
-
prefix: "atomix"
|
|
585
|
-
};
|
|
586
|
-
}
|
|
587
|
-
} catch (error) {
|
|
588
|
-
throw new ThemeError("No input provided and config loading is not available in this environment. Please provide tokens explicitly.", ThemeErrorCode.CONFIG_LOAD_FAILED, {
|
|
589
|
-
error: error instanceof Error ? error.message : String(error)
|
|
590
|
-
});
|
|
591
|
-
}
|
|
592
|
-
}
|
|
558
|
+
else
|
|
559
|
+
// Auto-loading config from file system is removed for browser compatibility.
|
|
560
|
+
// If no input is provided, we return an empty theme (using defaults only) or user must provide tokens.
|
|
561
|
+
// This allows createTheme to be isomorphic.
|
|
562
|
+
// Warn in development if no input provided
|
|
563
|
+
"production" !== process.env.NODE_ENV && "undefined" != typeof window && console.warn("Atomix: createTheme() called without tokens. Using default tokens only."),
|
|
564
|
+
tokens = {};
|
|
593
565
|
const allTokens = createTokens(tokens), prefix = options?.prefix ?? "atomix";
|
|
594
566
|
// Get prefix from options or use default
|
|
595
567
|
return generateCSSVariables$1(allTokens, {
|
|
@@ -821,26 +793,7 @@ class ThemeLogger {
|
|
|
821
793
|
return !!isBrowser$1() && null !== document.getElementById(id);
|
|
822
794
|
}
|
|
823
795
|
|
|
824
|
-
|
|
825
|
-
* CSS File Utilities
|
|
826
|
-
*
|
|
827
|
-
* Save CSS to file system (Node.js only).
|
|
828
|
-
*/
|
|
829
|
-
/**
|
|
830
|
-
* Save CSS to file
|
|
831
|
-
*
|
|
832
|
-
* Writes CSS string to a file. Only works in Node.js environment.
|
|
833
|
-
*
|
|
834
|
-
* @param css - CSS string to save
|
|
835
|
-
* @param filePath - Output file path
|
|
836
|
-
* @throws Error if called in browser environment
|
|
837
|
-
*
|
|
838
|
-
* @example
|
|
839
|
-
* ```typescript
|
|
840
|
-
* const css = ':root { --atomix-color-primary: #7AFFD7; }';
|
|
841
|
-
* await saveCSSFile(css, './themes/custom.css');
|
|
842
|
-
* ```
|
|
843
|
-
*/ var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
|
|
796
|
+
var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
|
|
844
797
|
|
|
845
798
|
function getDefaultExportFromCjs(x) {
|
|
846
799
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
|
|
@@ -1997,79 +1950,6 @@ function generateClassName(block, element, modifiers) {
|
|
|
1997
1950
|
return property => getComponentThemeValue(component, property, variant, size);
|
|
1998
1951
|
}
|
|
1999
1952
|
|
|
2000
|
-
/**
|
|
2001
|
-
* Theme Configuration Loader
|
|
2002
|
-
*
|
|
2003
|
-
* Provides functions to load theme configurations from atomix.config.ts
|
|
2004
|
-
* Includes both sync and async versions, with automatic fallbacks
|
|
2005
|
-
*/
|
|
2006
|
-
/**
|
|
2007
|
-
* Load theme from config file (synchronous, Node.js only)
|
|
2008
|
-
* @param configPath - Path to config file (default: atomix.config.ts)
|
|
2009
|
-
* @returns DesignTokens from theme configuration
|
|
2010
|
-
* @throws Error if config loading is not available in browser environment
|
|
2011
|
-
*/ function loadThemeFromConfigSync(options) {
|
|
2012
|
-
// Check if we're in a browser environment
|
|
2013
|
-
if ("undefined" != typeof window) throw new Error("loadThemeFromConfigSync: Not available in browser environment. Config loading requires Node.js/SSR environment.");
|
|
2014
|
-
// Use static import - the function handles browser environment checks internally
|
|
2015
|
-
let config;
|
|
2016
|
-
try {
|
|
2017
|
-
config = loadAtomixConfig({
|
|
2018
|
-
configPath: options?.configPath || "atomix.config.ts",
|
|
2019
|
-
required: !1 !== options?.required
|
|
2020
|
-
});
|
|
2021
|
-
} catch (error) {
|
|
2022
|
-
if (!1 !== options?.required) throw new Error("Config loader module not available");
|
|
2023
|
-
// Return empty tokens if config is not required
|
|
2024
|
-
return createTokens({});
|
|
2025
|
-
}
|
|
2026
|
-
if (!config?.theme) return createTokens({});
|
|
2027
|
-
// Extract tokens from config.theme structure
|
|
2028
|
-
// config.theme can have: { extend?: ThemeTokens, tokens?: ThemeTokens, themes?: ... }
|
|
2029
|
-
// We need to extract the actual DesignTokens (flat structure)
|
|
2030
|
-
const themeConfig = config.theme;
|
|
2031
|
-
// Check if theme is directly a flat object (DesignTokens format)
|
|
2032
|
-
// This handles the case where config.theme might be passed as DesignTokens directly
|
|
2033
|
-
return createTokens(!themeConfig || "object" != typeof themeConfig || "extend" in themeConfig || "tokens" in themeConfig || "themes" in themeConfig ? {} : themeConfig);
|
|
2034
|
-
// If theme has nested structure (extend/tokens/themes), we can't directly use it
|
|
2035
|
-
// Return empty tokens - the theme system will use defaults
|
|
2036
|
-
// TODO: Add proper conversion from ThemeTokens to DesignTokens if needed
|
|
2037
|
-
}
|
|
2038
|
-
|
|
2039
|
-
/**
|
|
2040
|
-
* Load theme from config file (asynchronous)
|
|
2041
|
-
* @param configPath - Path to config file (default: atomix.config.ts)
|
|
2042
|
-
* @returns Promise resolving to DesignTokens from theme configuration
|
|
2043
|
-
*/ async function loadThemeFromConfig(options) {
|
|
2044
|
-
// Check if we're in a browser environment
|
|
2045
|
-
if ("undefined" != typeof window) throw new Error("loadThemeFromConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.");
|
|
2046
|
-
// Use static import with runtime check
|
|
2047
|
-
// The function will handle browser environment checks internally
|
|
2048
|
-
let config;
|
|
2049
|
-
try {
|
|
2050
|
-
// loadAtomixConfig is synchronous, not async
|
|
2051
|
-
config = loadAtomixConfig({
|
|
2052
|
-
configPath: options?.configPath || "atomix.config.ts",
|
|
2053
|
-
required: !1 !== options?.required
|
|
2054
|
-
});
|
|
2055
|
-
} catch (error) {
|
|
2056
|
-
if (!1 !== options?.required) throw new Error("Config loader module not available");
|
|
2057
|
-
// Return empty tokens if config is not required
|
|
2058
|
-
return createTokens({});
|
|
2059
|
-
}
|
|
2060
|
-
if (!config?.theme) return createTokens({});
|
|
2061
|
-
// Extract tokens from config.theme structure
|
|
2062
|
-
// config.theme can have: { extend?: ThemeTokens, tokens?: ThemeTokens, themes?: ... }
|
|
2063
|
-
// We need to extract the actual DesignTokens (flat structure)
|
|
2064
|
-
const themeConfig = config.theme;
|
|
2065
|
-
// Check if theme is directly a flat object (DesignTokens format)
|
|
2066
|
-
// This handles the case where config.theme might be passed as DesignTokens directly
|
|
2067
|
-
return createTokens(!themeConfig || "object" != typeof themeConfig || "extend" in themeConfig || "tokens" in themeConfig || "themes" in themeConfig ? {} : themeConfig);
|
|
2068
|
-
// If theme has nested structure (extend/tokens/themes), we can't directly use it
|
|
2069
|
-
// Return empty tokens - the theme system will use defaults
|
|
2070
|
-
// TODO: Add proper conversion from ThemeTokens to DesignTokens if needed
|
|
2071
|
-
}
|
|
2072
|
-
|
|
2073
1953
|
/**
|
|
2074
1954
|
* Theme Context
|
|
2075
1955
|
*
|
|
@@ -2111,21 +1991,9 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
|
|
|
2111
1991
|
if (stored) return stored;
|
|
2112
1992
|
}
|
|
2113
1993
|
// If defaultTheme is provided, use it
|
|
2114
|
-
|
|
2115
|
-
// Try to load from atomix.config.ts as fallback, but only in Node.js/SSR environments
|
|
2116
|
-
if ("undefined" == typeof window) try {
|
|
2117
|
-
// Dynamically import the config loader to avoid bundling issues in browser
|
|
2118
|
-
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
|
2119
|
-
const {loadThemeFromConfigSync: loadThemeFromConfigSync} = require("../config/configLoader"), configTokens = loadThemeFromConfigSync();
|
|
2120
|
-
if (configTokens && Object.keys(configTokens).length > 0)
|
|
2121
|
-
// For simplicity, we'll treat config tokens as a special theme name
|
|
2122
|
-
return "config-theme";
|
|
2123
|
-
} catch (error) {
|
|
2124
|
-
// Failed to load theme from config, using default
|
|
2125
|
-
}
|
|
1994
|
+
return null != defaultTheme ? defaultTheme : "default";
|
|
2126
1995
|
// Default fallback
|
|
2127
|
-
|
|
2128
|
-
}), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : "tokens-theme")), [activeTokens, setActiveTokens] = useState((() =>
|
|
1996
|
+
}), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : "tokens-theme")), [activeTokens, setActiveTokens] = useState((() =>
|
|
2129
1997
|
// If defaultTheme is DesignTokens, store them
|
|
2130
1998
|
defaultTheme && "string" != typeof defaultTheme ? createTokens(defaultTheme) : null)), [isLoading, setIsLoading] = useState(!1), [error, setError] = useState(null), loadedThemesRef = useRef(new Set), themePromisesRef = useRef({}), abortControllerRef = useRef(null);
|
|
2131
1999
|
// Handle initial DesignTokens defaultTheme
|
|
@@ -5268,6 +5136,7 @@ class RTLManager {
|
|
|
5268
5136
|
// Core Theme Functions
|
|
5269
5137
|
// ============================================================================
|
|
5270
5138
|
// Create theme CSS from DesignTokens
|
|
5139
|
+
// File saving utilities removed to prevent bundling Node.js modules in browser
|
|
5271
5140
|
/**
|
|
5272
5141
|
* Inject theme CSS into DOM
|
|
5273
5142
|
*/ function injectTheme(css, id = "atomix-theme") {
|
|
@@ -5280,21 +5149,5 @@ class RTLManager {
|
|
|
5280
5149
|
removeCSS(id);
|
|
5281
5150
|
}
|
|
5282
5151
|
|
|
5283
|
-
|
|
5284
|
-
* Save theme to CSS file
|
|
5285
|
-
*/ async function saveTheme(css, filePath) {
|
|
5286
|
-
await async function(css, filePath) {
|
|
5287
|
-
// Check if in browser environment
|
|
5288
|
-
if ("undefined" != typeof window) throw new Error("saveCSSFile can only be used in Node.js environment. Use injectCSS() for browser environments.");
|
|
5289
|
-
// Dynamic import to avoid bundling Node.js modules in browser builds
|
|
5290
|
-
const fs = await import("fs/promises"), dir = (await import("path")).dirname(filePath);
|
|
5291
|
-
await fs.mkdir(dir, {
|
|
5292
|
-
recursive: !0
|
|
5293
|
-
}),
|
|
5294
|
-
// Write file
|
|
5295
|
-
await fs.writeFile(filePath, css, "utf8");
|
|
5296
|
-
}(css, filePath);
|
|
5297
|
-
}
|
|
5298
|
-
|
|
5299
|
-
export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, applyCSSVariables, applyComponentTheme, applyTheme, camelToKebab, clearThemes, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables$1 as generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isValidCSSVariableName, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, normalizeThemeTokens, registerTheme, removeCSS, removeCSSVariables, removeTheme, saveTheme, themePropertyToCSSVar, unregisterTheme, useComponentTheme, useHistory, useTheme, useThemeTokens };
|
|
5152
|
+
export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, applyCSSVariables, applyComponentTheme, applyTheme, camelToKebab, clearThemes, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables$1 as generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isValidCSSVariableName, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, normalizeThemeTokens, registerTheme, removeCSS, removeCSSVariables, removeTheme, themePropertyToCSSVar, unregisterTheme, useComponentTheme, useHistory, useTheme, useThemeTokens };
|
|
5300
5153
|
//# sourceMappingURL=theme.js.map
|