@chakra-ui/color-mode - npm Package Compare versions

Comparing version 1.0.0-rc.0 to 1.0.0-rc.1

CHANGELOG.md

@@ -6,2 +6,21 @@ # Change Log
 
+# [1.0.0-rc.1](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/color-mode@1.0.0-rc.0...@chakra-ui/color-mode@1.0.0-rc.1) (2020-08-06)
+
+### Features
+
+- added cookieStorageManager. still WIP
+  ([9a9c305](https://github.com/chakra-ui/chakra-ui/commit/9a9c305d9c4ae7b5b44271e633c8a3bad81df066))
+- added storageManager prop to ColorModeProvider. this is WIP
+  ([2e9b538](https://github.com/chakra-ui/chakra-ui/commit/2e9b538f66fbd5ab70e30a55d5c7cfc43c7b6c6c))
+- cleaned up some storageManager code. set color mode cookie to expire after a
+  year
+  ([d7ca15e](https://github.com/chakra-ui/chakra-ui/commit/d7ca15e6be9b393ed42cfc1a394d2872d7a8e5df))
+- updated cookieStorageManager and next-js example to use cookieStorageManager
+  ([e7df198](https://github.com/chakra-ui/chakra-ui/commit/e7df198065f041433c9f46f36b1990fc7e90a5de))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 # [1.0.0-rc.0](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/color-mode@1.0.0-next.7...@chakra-ui/color-mode@1.0.0-rc.0) (2020-07-26)
@@ -8,0 +27,0 @@

dist/cjs/color-mode.js

@@ -5,6 +5,5 @@ "use strict";
 exports.useColorMode = useColorMode;
-exports.ColorModeProvider = ColorModeProvider;
 exports.getColorModeValue = getColorModeValue;
 exports.useColorModeValue = useColorModeValue;
-exports.LightMode = exports.DarkMode = exports.ColorModeContext = void 0;
+exports.LightMode = exports.DarkMode = exports.ColorModeProvider = exports.ColorModeContext = void 0;
 
@@ -15,2 +14,4 @@ var _utils = require("@chakra-ui/utils");
 
+var _colorMode = require("./color-mode.utils");
+
 var _useColorModeState2 = _interopRequireDefault(require("./use-color-mode-state"));
@@ -24,4 +25,2 @@
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var ColorModeContext = /*#__PURE__*/React.createContext({
@@ -50,3 +49,3 @@ colorMode: "light",
  */
-function ColorModeProvider(props) {
+var ColorModeProvider = function ColorModeProvider(props) {
   var value = props.value,
@@ -57,6 +56,8 @@ children = props.children,
       _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? "light" : _props$defaultValue;
+      defaultValue = _props$defaultValue === void 0 ? "light" : _props$defaultValue,
+      storageManager = props.storageManager;
   var config = {
     useSystemColorMode: useSystemColorMode,
-    initialColorMode: defaultValue
+    initialColorMode: defaultValue,
+    storageManager: storageManager
   };
@@ -83,4 +84,6 @@
   }, children);
-}
+};
 
+exports.ColorModeProvider = ColorModeProvider;
+
 if (_utils.__DEV__) {
@@ -94,9 +97,11 @@ ColorModeProvider.displayName = "ColorModeProvider";
 
-var DarkMode = function DarkMode(props) {
-  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
+var DarkMode = function DarkMode(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
     value: {
       colorMode: "dark",
       toggleColorMode: _utils.noop
-    }
-  }, props));
+    },
+    children: children
+  });
 };
@@ -114,9 +119,11 @@
 
-var LightMode = function LightMode(props) {
-  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
+var LightMode = function LightMode(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
     value: {
       colorMode: "light",
       toggleColorMode: _utils.noop
-    }
-  }, props));
+    },
+    children: children
+  });
 };
@@ -123,0 +130,0 @@

dist/cjs/color-mode.utils.js

@@ -7,9 +7,6 @@ "use strict";
 exports.addListener = addListener;
-exports.darkQuery = exports.lightQuery = exports.queries = exports.body = exports.storage = exports.storageKey = void 0;
+exports.darkQuery = exports.lightQuery = exports.queries = exports.body = void 0;
 
 var _utils = require("@chakra-ui/utils");
 
-var isStorageSupported = typeof Storage !== "undefined";
-var storageKey = "chakra-ui-color-mode";
-exports.storageKey = storageKey;
 var classNames = {
@@ -21,21 +18,4 @@ light: "chakra-ui-light",
 /**
- * Simple object for handle read-write for localStorage
- */
-var storage = {
-  get: function get(init) {
-    var exist = isStorageSupported && !!window.localStorage.getItem(storageKey);
-    var value = exist ? window.localStorage.getItem(storageKey) : init;
-    return value;
-  },
-  set: function set(value) {
-    if (isStorageSupported) {
-      window.localStorage.setItem(storageKey, value);
-    }
-  }
-};
-/**
  * SSR: Graceful fallback for the `body` element
  */
-
-exports.storage = storage;
 var mockBody = {
@@ -42,0 +22,0 @@ classList: {

dist/cjs/index.js

@@ -18,2 +18,9 @@ "use strict";
 });
+
+var _storageManager = require("./storage-manager");
+
+Object.keys(_storageManager).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  exports[key] = _storageManager[key];
+});
 //# sourceMappingURL=index.js.map

dist/cjs/use-color-mode-state.js

@@ -9,10 +9,8 @@ "use strict";
 
-var React = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _colorMode = require("./color-mode.utils");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+var _storageManager = require("./storage-manager");
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
@@ -27,3 +25,3 @@ * Syncs the classname of the `<body />` based on the
 function useSyncBodyClass(mode) {
-  React.useEffect(function () {
+  (0, _react.useEffect)(function () {
     requestAnimationFrame(function () {
@@ -45,3 +43,3 @@ (0, _colorMode.syncBodyClassName)(mode === "dark");
   var callback = (0, _hooks.useLatestRef)(fn);
-  React.useEffect(function () {
+  (0, _react.useEffect)(function () {
     if (!enabled) return;
@@ -60,24 +58,24 @@ var removeListener = (0, _colorMode.addListener)(callback.current);
 function useColorModeState(options) {
-  var _React$useState = React.useState((options == null ? void 0 : options.initialColorMode) || "light"),
-      mode = _React$useState[0],
-      setMode = _React$useState[1];
+  var storageManager = (options == null ? void 0 : options.storageManager) || _storageManager.localStorageManager;
 
-  useSyncBodyClass(mode);
-  useSyncSystemColorMode(setMode, !!(options == null ? void 0 : options.useSystemColorMode));
-  React.useEffect(function () {
-    var stored = _colorMode.storage.get();
+  var _useState = (0, _react.useState)(function () {
+    var stored = storageManager.get();
+    if (stored) return stored;
 
-    if (!stored && (options == null ? void 0 : options.useSystemColorMode)) {
-      setMode(_colorMode.getColorScheme);
-      return;
+    if (options == null ? void 0 : options.useSystemColorMode) {
+      return (0, _colorMode.getColorScheme)();
     }
 
-    if (!stored || stored === mode) return;
-    setMode(stored); // eslint-disable-next-line
-  }, []);
-  React.useEffect(function () {
+    return (options == null ? void 0 : options.initialColorMode) || "light";
+  }),
+      mode = _useState[0],
+      setMode = _useState[1];
+
+  useSyncBodyClass(mode);
+  useSyncSystemColorMode(setMode, !!(options == null ? void 0 : options.useSystemColorMode));
+  (0, _react.useEffect)(function () {
     if (mode) {
-      _colorMode.storage.set(mode);
+      storageManager.set(mode);
     }
-  }, [mode]);
+  }, [storageManager, mode]);
   return [mode, setMode];
@@ -84,0 +82,0 @@ }

dist/esm/color-mode.js

@@ -1,5 +0,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import { noop, __DEV__ } from "@chakra-ui/utils";
 import * as React from "react";
+import { ColorMode } from "./color-mode.utils";
 import useColorModeState from "./use-color-mode-state";
@@ -28,3 +27,3 @@ export var ColorModeContext = /*#__PURE__*/React.createContext({
  */
-export function ColorModeProvider(props) {
+export var ColorModeProvider = props => {
   var {
@@ -34,7 +33,9 @@ value,
     useSystemColorMode = false,
-    defaultValue = "light"
+    defaultValue = "light",
+    storageManager
   } = props;
   var config = {
     useSystemColorMode,
-    initialColorMode: defaultValue
+    initialColorMode: defaultValue,
+    storageManager
   };
@@ -56,3 +57,3 @@ var [colorMode, setColorMode] = useColorModeState(config);
   }, children);
-}
+};
 
@@ -67,8 +68,14 @@ if (__DEV__) {
 
-export var DarkMode = props => /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
-  value: {
-    colorMode: "dark",
-    toggleColorMode: noop
-  }
-}, props));
+export var DarkMode = (_ref) => {
+  var {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
+    value: {
+      colorMode: "dark",
+      toggleColorMode: noop
+    },
+    children: children
+  });
+};
 
@@ -83,8 +90,14 @@ if (__DEV__) {
 
-export var LightMode = props => /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
-  value: {
-    colorMode: "light",
-    toggleColorMode: noop
-  }
-}, props));
+export var LightMode = (_ref2) => {
+  var {
+    children
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
+    value: {
+      colorMode: "light",
+      toggleColorMode: noop
+    },
+    children: children
+  });
+};
 
@@ -91,0 +104,0 @@ if (__DEV__) {

dist/esm/color-mode.utils.js

 import { isBrowser, noop } from "@chakra-ui/utils";
-var isStorageSupported = typeof Storage !== "undefined";
-export var storageKey = "chakra-ui-color-mode";
 var classNames = {
@@ -10,22 +8,4 @@ light: "chakra-ui-light",
 /**
- * Simple object for handle read-write for localStorage
- */
-export var storage = {
-  get(init) {
-    var exist = isStorageSupported && !!window.localStorage.getItem(storageKey);
-    var value = exist ? window.localStorage.getItem(storageKey) : init;
-    return value;
-  },
-
-  set(value) {
-    if (isStorageSupported) {
-      window.localStorage.setItem(storageKey, value);
-    }
-  }
-
-};
-/**
  * SSR: Graceful fallback for the `body` element
  */
-
 var mockBody = {
@@ -32,0 +12,0 @@ classList: {

dist/esm/index.js

 export * from "./color-mode";
 export * from "./initialize-color-mode";
+export * from "./storage-manager";
 //# sourceMappingURL=index.js.map

dist/esm/use-color-mode-state.js

 import { useLatestRef } from "@chakra-ui/hooks";
-import * as React from "react";
-import { addListener, getColorScheme, storage, syncBodyClassName } from "./color-mode.utils";
+import { useEffect, useState } from "react";
+import { addListener, getColorScheme, syncBodyClassName } from "./color-mode.utils";
+import { localStorageManager } from "./storage-manager";
 /**
@@ -14,3 +15,3 @@ * Syncs the classname of the `<body />` based on the
 function useSyncBodyClass(mode) {
-  React.useEffect(() => {
+  useEffect(() => {
     requestAnimationFrame(() => {
@@ -32,3 +33,3 @@ syncBodyClassName(mode === "dark");
   var callback = useLatestRef(fn);
-  React.useEffect(() => {
+  useEffect(() => {
     if (!enabled) return;
@@ -47,21 +48,20 @@ var removeListener = addListener(callback.current);
 export function useColorModeState(options) {
-  var [mode, setMode] = React.useState((options == null ? void 0 : options.initialColorMode) || "light");
-  useSyncBodyClass(mode);
-  useSyncSystemColorMode(setMode, !!(options == null ? void 0 : options.useSystemColorMode));
-  React.useEffect(() => {
-    var stored = storage.get();
+  var storageManager = (options == null ? void 0 : options.storageManager) || localStorageManager;
+  var [mode, setMode] = useState(() => {
+    var stored = storageManager.get();
+    if (stored) return stored;
 
-    if (!stored && (options == null ? void 0 : options.useSystemColorMode)) {
-      setMode(getColorScheme);
-      return;
+    if (options == null ? void 0 : options.useSystemColorMode) {
+      return getColorScheme();
     }
 
-    if (!stored || stored === mode) return;
-    setMode(stored); // eslint-disable-next-line
-  }, []);
-  React.useEffect(() => {
+    return (options == null ? void 0 : options.initialColorMode) || "light";
+  });
+  useSyncBodyClass(mode);
+  useSyncSystemColorMode(setMode, !!(options == null ? void 0 : options.useSystemColorMode));
+  useEffect(() => {
     if (mode) {
-      storage.set(mode);
+      storageManager.set(mode);
     }
-  }, [mode]);
+  }, [storageManager, mode]);
   return [mode, setMode];
@@ -68,0 +68,0 @@ }

dist/types/color-mode.d.ts

 import * as React from "react";
-import type { ColorMode } from "./color-mode.utils";
+import { ColorMode } from "./color-mode.utils";
+import { StorageManager } from "./storage-manager";
 export type { ColorMode };
@@ -19,2 +20,3 @@ interface ColorModeContextType {
     defaultValue?: ColorMode;
+    storageManager?: StorageManager;
 }
@@ -25,6 +27,3 @@ /**
  */
-export declare function ColorModeProvider(props: ColorModeProviderProps): JSX.Element;
-export declare namespace ColorModeProvider {
-    var displayName: string;
-}
+export declare const ColorModeProvider: React.FC<ColorModeProviderProps>;
 /**
@@ -31,0 +30,0 @@ * Locks the color mode to `dark`, without any way to change it.

dist/types/color-mode.utils.d.ts

@@ -1,10 +0,2 @@
-export declare const storageKey = "chakra-ui-color-mode";
 export declare type ColorMode = "light" | "dark";
-/**
- * Simple object for handle read-write for localStorage
- */
-export declare const storage: {
-    get(init?: "light" | "dark" | undefined): "light" | "dark" | undefined;
-    set(value: ColorMode): void;
-};
 export declare const body: {
@@ -26,3 +18,3 @@ classList: {
 export declare const darkQuery = "(prefers-color-scheme: dark)";
-export declare function getColorScheme(): "light" | "dark";
+export declare function getColorScheme(): "dark" | "light";
 /**
@@ -29,0 +21,0 @@ * Adds system os color mode listener, and run the callback

dist/types/index.d.ts

 export * from "./color-mode";
 export * from "./initialize-color-mode";
 export type { ColorModeOptions } from "./use-color-mode-state";
+export * from "./storage-manager";

dist/types/use-color-mode-state.d.ts

@@ -1,3 +0,4 @@
-import * as React from "react";
+/// <reference types="react" />
 import { ColorMode } from "./color-mode.utils";
+import { StorageManager } from "./storage-manager";
 export interface ColorModeOptions {
@@ -7,2 +8,5 @@ initialColorMode?: ColorMode;
 }
+interface useColorModeStateOptions extends ColorModeOptions {
+    storageManager?: StorageManager;
+}
 /**
@@ -12,3 +16,3 @@ * React hook that sets up the localStorage, body className,
  */
-export declare function useColorModeState<T extends ColorModeOptions>(options?: T): readonly [ColorMode, React.Dispatch<React.SetStateAction<ColorMode>>];
+export declare function useColorModeState<T extends useColorModeStateOptions>(options?: T): readonly [ColorMode, import("react").Dispatch<import("react").SetStateAction<ColorMode>>];
 export default useColorModeState;

package.json

 {
   "name": "@chakra-ui/color-mode",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0-rc.1",
   "description": "React component and hooks for handling light and dark mode.",
@@ -54,4 +54,4 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/hooks": "1.0.0-rc.0",
-    "@chakra-ui/utils": "1.0.0-rc.0"
+    "@chakra-ui/hooks": "1.0.0-rc.1",
+    "@chakra-ui/utils": "1.0.0-rc.1"
   },
@@ -61,3 +61,3 @@ "peerDependencies": {
   },
-  "gitHead": "60392008d42867da38211687e2491f02da9975a9"
+  "gitHead": "e0470c73a9f6be24525dc5458d6fb157096b5ae3"
 }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68855

increased by8%

Number of package files

34

increased by17.24%

Lines of code

742

increased by9.12%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@chakra-ui/hooks@1.0.0-rc.1(transitive)

• + Added@chakra-ui/utils@1.0.0-rc.1(transitive)

• - Removed@chakra-ui/hooks@1.0.0-rc.0(transitive)

• - Removed@chakra-ui/utils@1.0.0-rc.0(transitive)

• Updated@chakra-ui/hooks@1.0.0-rc.1

• Updated@chakra-ui/utils@1.0.0-rc.1