@flexnative/theme-context - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/colors.d.ts

@@ -5,7 +5,7 @@ /**
  * @ Modified by: Redon Alla
- * @ Modified time: 2024-10-20 13:05:09
+ * @ Modified time: 2024-10-27 16:07:16
  * @ Description: Default colors for FlexNative framework. Support dark and light colors.
  */
-import { BaseTheme } from './types';
-export declare const light: BaseTheme;
-export declare const dark: BaseTheme;
+import { BaseColors } from './props';
+export declare const light: BaseColors;
+export declare const dark: BaseColors;

dist/colors.js

@@ -5,6 +5,8 @@ /**
  * @ Modified by: Redon Alla
- * @ Modified time: 2024-10-20 13:05:09
+ * @ Modified time: 2024-10-27 16:07:16
  * @ Description: Default colors for FlexNative framework. Support dark and light colors.
  */
 export const light = {
+    white: '#FFFFFF',
+    black: '#424242',
     background: "#f8f8f8",
@@ -23,5 +25,8 @@ default: '#f5f5f5',
     light: "#ebebeb",
-    primary: '#ff6358'
+    primary: '#ff6358',
+    overlay: '#00000021',
 };
 export const dark = {
+    white: '#FFFFFF',
+    black: '#424242',
     default: '#404040',
@@ -40,4 +45,5 @@ background: "#000000",
     light: "#ebebeb",
-    primary: '#ff6358'
+    primary: '#ff6358',
+    overlay: '#FFFFFF21',
 };
 //# sourceMappingURL=colors.js.map

dist/index.d.ts

@@ -5,3 +5,3 @@ /**
  * @ Modified by: Redon Alla
- * @ Modified time: 2024-10-20 13:06:06
+ * @ Modified time: 2024-11-05 22:00:06
  * @ Description: Exports necessary props, classes for Theme Context.
@@ -11,3 +11,4 @@ */
 export { default as ThemeProvider } from './ThemeProvider';
-export type { BaseTheme, ThemeProviderProps, ThemeContextProps } from './types';
+export type { BaseColors, ThemeProviderProps, ThemeContextProps } from './props';
+export { createTheme } from './utilities';
 export * from './colors';

dist/index.js

@@ -5,3 +5,3 @@ /**
  * @ Modified by: Redon Alla
- * @ Modified time: 2024-10-20 13:06:06
+ * @ Modified time: 2024-11-05 22:00:06
  * @ Description: Exports necessary props, classes for Theme Context.
@@ -11,3 +11,4 @@ */
 export { default as ThemeProvider } from './ThemeProvider';
+export { createTheme } from './utilities';
 export * from './colors';
 //# sourceMappingURL=index.js.map

dist/ThemeContext.d.ts

@@ -5,9 +5,9 @@ /**
  * @ Modified by: Redon Alla
- * @ Modified time: 2024-10-20 13:06:30
+ * @ Modified time: 2024-10-27 19:53:28
  * @ Description: Theme Context.
  */
 import React from 'react';
-import { ThemeContextProps } from './types';
+import { ThemeContextProps } from './props';
 declare const ThemeContext: React.Context<ThemeContextProps<any>>;
 export declare const useThemeContext: () => ThemeContextProps<any>;
 export default ThemeContext;

dist/ThemeContext.js

@@ -5,3 +5,3 @@ /**
  * @ Modified by: Redon Alla
- * @ Modified time: 2024-10-20 13:06:30
+ * @ Modified time: 2024-10-27 19:53:28
  * @ Description: Theme Context.
@@ -8,0 +8,0 @@ */

dist/ThemeProvider.d.ts

@@ -5,3 +5,3 @@ /**
  * @ Modified by: Redon Alla
- * @ Modified time: 2024-10-20 13:06:47
+ * @ Modified time: 2024-11-05 21:58:52
  * @ Description: Theme Provider
@@ -11,8 +11,13 @@ */
 import { ColorSchemeName } from 'react-native';
-import { BaseTheme, ThemeProviderProps } from './types';
+import { BaseColors, BaseTheme, ThemeProviderProps } from './props';
 interface StateProps<TColors> {
-    colors: BaseTheme & TColors;
-    colorScheme?: ColorSchemeName;
+    /**
+     * Default theme colors.
+     * You can add whatever values you want to the theme, and they will be merged with the default.
+    */
+    colors: BaseColors & TColors;
+    /** Theme colorScheme {@link ColorSchemeName} */
+    scheme?: ColorSchemeName;
 }
-/**
+/** ThemeContext for handling colors and scheme change.
  * @template TColors
@@ -28,3 +33,3 @@ * @author Redon Alla <[e-mail]>
       and this method it is used to write the logic for reading the theme from your storage and render on your app.
-      @see Example <http://localhost:3000/docs/theme/ra-theme-multiple-themes>
+      @see Example <https://redonalla.github.io/flexnative/docs/theme/examples>
     * @return Promise of type void {Promise<void>}
@@ -38,11 +43,11 @@ */
     */
-    abstract onChangeColorSchemeTheme(colorScheme: ColorSchemeName): Promise<void>;
+    abstract onChangeColorScheme(colorScheme: ColorSchemeName): Promise<void>;
     /**
      * This method it is used to change theme of your app.
-     * @param {BaseTheme & TColors} theme
+     * @param {BaseColors & TColors} theme
      * @return Promise so you can write the logic for storing your theme on you preferred storage.
      */
-    abstract onChangeTheme(theme: BaseTheme & TColors): Promise<void>;
+    abstract onChangeTheme(theme: BaseTheme<TColors>): Promise<void>;
     render(): React.JSX.Element;
 }
 export {};

dist/ThemeProvider.js

@@ -5,19 +5,10 @@ /**
  * @ Modified by: Redon Alla
- * @ Modified time: 2024-10-20 13:06:47
+ * @ Modified time: 2024-11-05 21:58:52
  * @ Description: Theme Provider
  */
 import React from 'react';
-import { Appearance } from 'react-native';
-import { light, dark } from './colors';
 import ThemeContext from './ThemeContext';
+import { createTheme, defaultColors } from './utilities';
 ;
-/**
-  * Return default theme.
-  * @param colorScheme
-  * @return default theme colors according device ColorSchemeName.
-*/
-function GetDefaultTheme(colorSchemeName) {
-    return colorSchemeName === 'dark' ? dark : light;
-}
-/**
+/** ThemeContext for handling colors and scheme change.
  * @template TColors
@@ -29,5 +20,5 @@ * @author Redon Alla <[e-mail]>
         super(props);
-        /** @type {StateProps<TColors>} */
         this.state = {
-            colors: props.colors ?? GetDefaultTheme(Appearance.getColorScheme())
+            scheme: props.scheme,
+            colors: props.colors ?? defaultColors(props.scheme)
         };
@@ -39,9 +30,8 @@ }
     render() {
-        return (React.createElement(ThemeContext.Provider, { value: {
-                ...this.state,
-                setTheme: this.onChangeTheme,
-                setColorScheme: this.onChangeColorSchemeTheme
-            } }, this.props.children));
+        return (React.createElement(ThemeContext.Provider, { value: createTheme(Object.assign({}, this.props, {
+                scheme: this.props.scheme,
+                colors: this.props.colors
+            })) }, this.props.children));
     }
 }
 //# sourceMappingURL=ThemeProvider.js.map

package.json

 {
   "name": "@flexnative/theme-context",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React ThemeContext",
@@ -26,3 +26,10 @@ "main": "dist/index.js",
   "license": "MIT",
-  "devDependencies": {}
+  "devDependencies": {},
+  "homepage": "https://redonalla.github.io/flexnative/",
+  "bugs": "https://github.com/RedonAlla/flexnative/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/RedonAlla/flexnative.git",
+    "directory": "npm-packages/src/packages/context/ra-theme-context"
+  }
 }

README.md

 # 🎨 Theme
 
-The ***FlexNative Theme Context*** is part of the **FlexNative** and is available under the `@flexnative/theme-context` NPM package.
+FlexNative Theme Context is part of the FlexNative and is available under the `@flexnative/theme-context` NPM package.
 
@@ -9,2 +9,2 @@ The theme object is where you define your application's color palette.
 
-For more details on how tu start and how to use read the [documentation](https://redonalla.github.io/ra-framework-docks/).
+For more details on how to start and how to use read the [documentation](https://redonalla.github.io/flexnative/docs/theme).

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20243

87.02%

Number of package files

23

35.29%

Lines of code

410

83.04%

Number of low quality alerts

2

-33.33%

Number of low supply chain risk alerts

0

-100%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes