@uni-design-system/uni-react 0.0.16 → 0.0.17

package/dist/cjs/core/text/text.component.js

@@ -17,7 +17,7 @@ exports.Text = Text;
 function Style(theme, textAlign, role, color) {
     const { fontSize, letterSpacing, lineHeight, fontWeight, fontFamily, fontStyle, textTransform } = theme.typography[role];
     return {
-        color: theme.colors[color],
+        color: theme.colors[color || 'on-background'],
         fontSize: fontSize + 'px',
         letterSpacing,
         textAlign,

package/dist/cjs/core/theme/index.d.ts

@@ -1,2 +1,9 @@
-export * from './theme.hook';
-export * from './theme.provider';
+/// <reference types="react" />
+import { Theme } from '@uni-design-system/uni-core';
+export declare const ThemeProvider: import("react").ComponentType<{
+    theme?: Theme | undefined;
+}>, withTheme: <Props extends {
+    theme: Theme;
+}, C>(WrappedComponent: import("react").ComponentType<Props> & C) => import("react").ComponentType<import("@callstack/react-theme-provider").$Without<Props, "theme"> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<Props> & C, {}>, useTheme: <T = Theme>(overrides?: import("@callstack/react-theme-provider").$DeepPartial<T> | undefined) => T;

package/dist/cjs/core/theme/index.js

@@ -1,18 +1,7 @@
 "use strict";
-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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./theme.hook"), exports);
-__exportStar(require("./theme.provider"), exports);
+exports.useTheme = exports.withTheme = exports.ThemeProvider = void 0;
+const react_theme_provider_1 = require("@callstack/react-theme-provider");
+const uni_core_1 = require("@uni-design-system/uni-core");
+_a = (0, react_theme_provider_1.createTheming)(uni_core_1.LightTheme), exports.ThemeProvider = _a.ThemeProvider, exports.withTheme = _a.withTheme, exports.useTheme = _a.useTheme;

package/dist/cjs/core/theme/theme.context.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
-import { ThemeProps } from '@uni-design-system/uni-core';
-declare const ThemeContext: React.Context<ThemeProps>;
+import { Theme } from '@uni-design-system/uni-core';
+export interface ThemeContextProps {
+    themeId?: string;
+    themes?: Record<string, Theme>;
+    switchTheme: (themeId: string) => void;
+}
+declare const ThemeContext: React.Context<ThemeContextProps>;
 export default ThemeContext;

package/dist/cjs/core/theme/theme.context.js

@@ -4,7 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const ThemeContext = react_1.default.createContext({});
+const uni_core_1 = require("@uni-design-system/uni-core");
+const ThemeContext = react_1.default.createContext({
+    themeId: 'LightTheme',
+    themes: { LightTheme: uni_core_1.LightTheme },
+    switchTheme: () => { },
+});
 if (process.env.NODE_ENV !== 'production') {
     ThemeContext.displayName = 'ThemeContext';
 }

package/dist/cjs/core/theme/theme.hook.d.ts

@@ -1,3 +1,5 @@
 import { Theme } from '@uni-design-system/uni-core';
 export declare const useTheme: () => Theme;
-export declare const useSwitchTheme: (defaultThemeId?: string) => [string, (themeId?: string) => void];
+export declare const useSwitchTheme: () => {
+    switchTheme: (themeId: string) => void;
+};

package/dist/cjs/core/theme/theme.hook.js

@@ -30,28 +30,24 @@ exports.useSwitchTheme = exports.useTheme = void 0;
 const react_1 = __importStar(require("react"));
 const theme_context_1 = __importDefault(require("./theme.context"));
 const uni_core_1 = require("@uni-design-system/uni-core");
-const findTheme = (props) => {
-    const { themeId, themes } = props;
-    return themes && themeId ? themes[themeId] : uni_core_1.BaseTheme;
-};
 const useTheme = () => {
-    const themeProps = (0, react_1.useContext)(theme_context_1.default);
-    const theme = findTheme(themeProps);
+    const { themeId, themes } = (0, react_1.useContext)(theme_context_1.default);
+    let theme = themes && themeId ? themes[themeId] : uni_core_1.BaseTheme;
+    (0, react_1.useEffect)(() => { }, [themeId]);
     if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         react_1.default.useDebugValue(theme);
     }
+    (0, react_1.useEffect)(() => {
+        console.log(themeId);
+        theme = themes && themeId ? themes[themeId] : uni_core_1.BaseTheme;
+    }, [themeId]);
     // return theme || LightTheme;
     return theme;
 };
 exports.useTheme = useTheme;
-const useSwitchTheme = (defaultThemeId) => {
-    const [themeId, setThemeId] = (0, react_1.useState)(defaultThemeId || uni_core_1.DefaultThemeId);
-    const switchTheme = (themeId) => {
-        if (!themeId)
-            return;
-        setThemeId(themeId);
-    };
-    return [themeId, switchTheme];
+const useSwitchTheme = () => {
+    const { switchTheme } = (0, react_1.useContext)(theme_context_1.default);
+    return { switchTheme };
 };
 exports.useSwitchTheme = useSwitchTheme;

package/dist/cjs/core/theme/theme.provider.js

@@ -38,17 +38,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeProvider = void 0;
 const react_1 = __importStar(require("react"));
 const theme_context_1 = __importDefault(require("./theme.context"));
-const theme_hook_1 = require("./theme.hook");
 const STORAGE_KEY = 'THEME_ID';
 const ThemeProvider = ({ children, themeId, themes }) => {
-    const [_themeId, setThemeId] = (0, theme_hook_1.useSwitchTheme)(themeId);
+    const [_themeId, setThemeId] = (0, react_1.useState)(themeId);
     (0, react_1.useEffect)(() => {
         (() => __awaiter(void 0, void 0, void 0, function* () {
             const id = localStorage.getItem(STORAGE_KEY);
             setThemeId(id || themeId);
         }))();
     }, [themeId]);
-    return (react_1.default.createElement(theme_context_1.default.Provider, { value: { themeId: _themeId, themes } }, _themeId ? children : null));
+    return (react_1.default.createElement(theme_context_1.default.Provider, { value: { themeId: _themeId, themes, switchTheme: setThemeId } }, _themeId ? children : null));
 };
 exports.ThemeProvider = ThemeProvider;
 /*export function withTheme(Component: ({children, theme, themes }: (any & ThemeProps)) => JSX.Element) {

package/dist/cjs/index.d.ts

@@ -1,2 +1,3 @@
 export * from './core';
 export * from './components';
+export * from './utils';

package/dist/cjs/index.js

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./core"), exports);
 __exportStar(require("./components"), exports);
+__exportStar(require("./utils"), exports);

package/dist/cjs/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './storage-manager';

package/dist/cjs/utils/index.js

@@ -0,0 +1,17 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./storage-manager"), exports);

package/dist/cjs/utils/storage-manager.d.ts

@@ -0,0 +1,7 @@
+export interface StorageManager<T> {
+    type: 'cookie' | 'localStorage';
+    get(init?: T): T | undefined;
+    set(value: T): void;
+}
+export declare const createLocalStorageManager: <T>(key: string) => StorageManager<T>;
+export declare const createCookieStorageManager: (key: string, cookie?: string) => StorageManager<string>;

package/dist/cjs/utils/storage-manager.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCookieStorageManager = exports.createLocalStorageManager = void 0;
+// Usage
+// export const localStorageManager = createLocalStorageManager(STORAGE_KEY);
+const createLocalStorageManager = (key) => ({
+    type: 'localStorage',
+    get(init) {
+        if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document))
+            return init;
+        let value;
+        try {
+            value = localStorage.getItem(key) || init;
+        }
+        catch (e) {
+            // no op
+        }
+        return JSON.parse(value) || init;
+    },
+    set(value) {
+        try {
+            localStorage.setItem(key, JSON.stringify(value));
+        }
+        catch (e) {
+            // no op
+        }
+    },
+});
+exports.createLocalStorageManager = createLocalStorageManager;
+const parseCookie = (cookie, key) => {
+    const match = cookie.match(new RegExp(`(^| )${key}=([^;]+)`));
+    return match === null || match === void 0 ? void 0 : match[2];
+};
+// Usage
+// export const cookieStorageManager = createCookieStorageManager(STORAGE_KEY);
+const createCookieStorageManager = (key, cookie) => ({
+    type: 'cookie',
+    get(init) {
+        if (cookie)
+            return parseCookie(cookie, key);
+        if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document))
+            return init;
+        return parseCookie(document.cookie, key) || init;
+    },
+    set(value) {
+        document.cookie = `${key}=${value}; max-age=31536000; path=/`;
+    },
+});
+exports.createCookieStorageManager = createCookieStorageManager;

package/dist/esm/core/text/text.component.js

@@ -10,7 +10,7 @@ export function Text(props) {
 function Style(theme, textAlign, role, color) {
     const { fontSize, letterSpacing, lineHeight, fontWeight, fontFamily, fontStyle, textTransform } = theme.typography[role];
     return {
-        color: theme.colors[color],
+        color: theme.colors[color || 'on-background'],
         fontSize: fontSize + 'px',
         letterSpacing,
         textAlign,

package/dist/esm/core/theme/index.d.ts

@@ -1,2 +1,9 @@
-export * from './theme.hook';
-export * from './theme.provider';
+/// <reference types="react" />
+import { Theme } from '@uni-design-system/uni-core';
+export declare const ThemeProvider: import("react").ComponentType<{
+    theme?: Theme | undefined;
+}>, withTheme: <Props extends {
+    theme: Theme;
+}, C>(WrappedComponent: import("react").ComponentType<Props> & C) => import("react").ComponentType<import("@callstack/react-theme-provider").$Without<Props, "theme"> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<Props> & C, {}>, useTheme: <T = Theme>(overrides?: import("@callstack/react-theme-provider").$DeepPartial<T> | undefined) => T;

package/dist/esm/core/theme/index.js

@@ -1,2 +1,3 @@
-export * from './theme.hook';
-export * from './theme.provider';
+import { createTheming } from '@callstack/react-theme-provider';
+import { LightTheme } from '@uni-design-system/uni-core';
+export const { ThemeProvider, withTheme, useTheme } = createTheming(LightTheme);

package/dist/esm/core/theme/theme.context.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
-import { ThemeProps } from '@uni-design-system/uni-core';
-declare const ThemeContext: React.Context<ThemeProps>;
+import { Theme } from '@uni-design-system/uni-core';
+export interface ThemeContextProps {
+    themeId?: string;
+    themes?: Record<string, Theme>;
+    switchTheme: (themeId: string) => void;
+}
+declare const ThemeContext: React.Context<ThemeContextProps>;
 export default ThemeContext;

package/dist/esm/core/theme/theme.context.js

@@ -1,5 +1,10 @@
 import React from 'react';
-const ThemeContext = React.createContext({});
+import { LightTheme } from '@uni-design-system/uni-core';
+const ThemeContext = React.createContext({
+    themeId: 'LightTheme',
+    themes: { LightTheme },
+    switchTheme: () => { },
+});
 if (process.env.NODE_ENV !== 'production') {
     ThemeContext.displayName = 'ThemeContext';
 }

package/dist/esm/core/theme/theme.hook.d.ts

@@ -1,3 +1,5 @@
 import { Theme } from '@uni-design-system/uni-core';
 export declare const useTheme: () => Theme;
-export declare const useSwitchTheme: (defaultThemeId?: string) => [string, (themeId?: string) => void];
+export declare const useSwitchTheme: () => {
+    switchTheme: (themeId: string) => void;
+};

package/dist/esm/core/theme/theme.hook.js

@@ -1,26 +1,22 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import ThemeContext from './theme.context';
-import { BaseTheme, DefaultThemeId } from '@uni-design-system/uni-core';
-const findTheme = (props) => {
-    const { themeId, themes } = props;
-    return themes && themeId ? themes[themeId] : BaseTheme;
-};
+import { BaseTheme } from '@uni-design-system/uni-core';
 export const useTheme = () => {
-    const themeProps = useContext(ThemeContext);
-    const theme = findTheme(themeProps);
+    const { themeId, themes } = useContext(ThemeContext);
+    let theme = themes && themeId ? themes[themeId] : BaseTheme;
+    useEffect(() => { }, [themeId]);
     if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         React.useDebugValue(theme);
     }
+    useEffect(() => {
+        console.log(themeId);
+        theme = themes && themeId ? themes[themeId] : BaseTheme;
+    }, [themeId]);
     // return theme || LightTheme;
     return theme;
 };
-export const useSwitchTheme = (defaultThemeId) => {
-    const [themeId, setThemeId] = useState(defaultThemeId || DefaultThemeId);
-    const switchTheme = (themeId) => {
-        if (!themeId)
-            return;
-        setThemeId(themeId);
-    };
-    return [themeId, switchTheme];
+export const useSwitchTheme = () => {
+    const { switchTheme } = useContext(ThemeContext);
+    return { switchTheme };
 };

package/dist/esm/core/theme/theme.provider.js

@@ -7,19 +7,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import ThemeContext from './theme.context';
-import { useSwitchTheme } from './theme.hook';
 const STORAGE_KEY = 'THEME_ID';
 export const ThemeProvider = ({ children, themeId, themes }) => {
-    const [_themeId, setThemeId] = useSwitchTheme(themeId);
+    const [_themeId, setThemeId] = useState(themeId);
     useEffect(() => {
         (() => __awaiter(void 0, void 0, void 0, function* () {
             const id = localStorage.getItem(STORAGE_KEY);
             setThemeId(id || themeId);
         }))();
     }, [themeId]);
-    return (React.createElement(ThemeContext.Provider, { value: { themeId: _themeId, themes } }, _themeId ? children : null));
+    return (React.createElement(ThemeContext.Provider, { value: { themeId: _themeId, themes, switchTheme: setThemeId } }, _themeId ? children : null));
 };
 /*export function withTheme(Component: ({children, theme, themes }: (any & ThemeProps)) => JSX.Element) {
 

package/dist/esm/index.d.ts

@@ -1,2 +1,3 @@
 export * from './core';
 export * from './components';
+export * from './utils';

package/dist/esm/index.js

@@ -1,2 +1,3 @@
 export * from './core';
 export * from './components';
+export * from './utils';

package/dist/esm/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './storage-manager';

package/dist/esm/utils/index.js

@@ -0,0 +1 @@
+export * from './storage-manager';

package/dist/esm/utils/storage-manager.d.ts

@@ -0,0 +1,7 @@
+export interface StorageManager<T> {
+    type: 'cookie' | 'localStorage';
+    get(init?: T): T | undefined;
+    set(value: T): void;
+}
+export declare const createLocalStorageManager: <T>(key: string) => StorageManager<T>;
+export declare const createCookieStorageManager: (key: string, cookie?: string) => StorageManager<string>;

package/dist/esm/utils/storage-manager.js

@@ -0,0 +1,44 @@
+// Usage
+// export const localStorageManager = createLocalStorageManager(STORAGE_KEY);
+export const createLocalStorageManager = (key) => ({
+    type: 'localStorage',
+    get(init) {
+        if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document))
+            return init;
+        let value;
+        try {
+            value = localStorage.getItem(key) || init;
+        }
+        catch (e) {
+            // no op
+        }
+        return JSON.parse(value) || init;
+    },
+    set(value) {
+        try {
+            localStorage.setItem(key, JSON.stringify(value));
+        }
+        catch (e) {
+            // no op
+        }
+    },
+});
+const parseCookie = (cookie, key) => {
+    const match = cookie.match(new RegExp(`(^| )${key}=([^;]+)`));
+    return match === null || match === void 0 ? void 0 : match[2];
+};
+// Usage
+// export const cookieStorageManager = createCookieStorageManager(STORAGE_KEY);
+export const createCookieStorageManager = (key, cookie) => ({
+    type: 'cookie',
+    get(init) {
+        if (cookie)
+            return parseCookie(cookie, key);
+        if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document))
+            return init;
+        return parseCookie(document.cookie, key) || init;
+    },
+    set(value) {
+        document.cookie = `${key}=${value}; max-age=31536000; path=/`;
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-react",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "React component library for the UNI Design System.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -33,10 +33,11 @@
   "homepage": "https://github.com/uni-design-system/uni-react#readme",
   "packageManager": "yarn@3.0.2",
   "dependencies": {
+    "@callstack/react-theme-provider": "^3.0.8",
     "@dnd-kit/core": "^6.0.7",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
-    "@uni-design-system/uni-core": "^0.0.34",
+    "@uni-design-system/uni-core": "^0.0.35",
     "@uni-design-system/uni-react-icons": "^0.1.2",
     "framer-motion": "4.1.17",
     "use-ripple-hook": "^1.0.22"