@pareto-engineering/design-system 2.0.0-alpha.52 → 2.0.0-alpha.53

package/dist/cjs/{c/SiteFooter/common/Section/Section.js → a/AppContext/ContextProvider.js}

@@ -9,9 +9,9 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
+var _useTheme = _interopRequireDefault(require("./useTheme"));
 
-var _b = require("../../../../b");
+var _Context = _interopRequireDefault(require("./Context"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -25,71 +25,72 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var baseClassName = _bem.default.base;
-console.log(_bem.default);
-var componentClassName = _bem.default.elementSection;
-/**
- * This is the component description.
- */
+// Component-level imports
+// Helper Definitions
+var reducer = (state, action) => {
+  switch (action.type) {
+    case 'UPDATE_STATE':
+      return _objectSpread(_objectSpread({}, state), action.payload);
 
-var Section = _ref => {
+    default:
+      return state;
+  }
+};
+
+var AppContextProvider = _ref => {
   var {
-    id,
-    className: userClassName,
-    style,
     children,
-    title,
-    span // ...otherProps
+    initialTheme,
+    config,
+    initialState // ...otherProps
 
   } = _ref;
-  console.log(1);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: _objectSpread({
-      '--span': span
-    }, style) // {...otherProps}
-
-  }, title && /*#__PURE__*/React.createElement(_b.Title, {
-    headingAs: "p",
-    headingClassName: "h4 c-on-y",
-    heading: title
-  }), children);
+  var theme = (0, _useTheme.default)(initialTheme);
+  var [state, dispatch] = (0, React.useReducer)(reducer, initialState);
+  return /*#__PURE__*/React.createElement(_Context.default.Provider, {
+    value: _objectSpread(_objectSpread({
+      state,
+      dispatch
+    }, config), theme)
+  }, children);
 };
 
-Section.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-
+AppContextProvider.propTypes = {
   /**
-   * The React-written, css properties for this element.
+   *  The children JSX
    */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
+  children: _propTypes.default.node,
 
   /**
-   *  The children JSX
+   * The initial theme for the website. If undefined, fallbacks on system preference.
    */
-  children: _propTypes.default.node,
+  initialTheme: _propTypes.default.string,
 
   /**
-   *  The title of the footer section
+   * A dictionnary containing settings and preferences to be used application-wide
    */
-  title: _propTypes.default.node,
+  config: _propTypes.default.shape({
+    APP: _propTypes.default.shape({
+      NAME: _propTypes.default.string.isRequired,
+      CANONICAL: _propTypes.default.string.isRequired,
+      SUPPORT_EMAIL: _propTypes.default.string,
+      TITLE_SUFFIX: _propTypes.default.string
+    }),
+    SOCIAL: _propTypes.default.shape({
+      FACEBOOK: _propTypes.default.string,
+      INSTAGRAM: _propTypes.default.string,
+      YOUTUBE: _propTypes.default.string
+    }),
+    CONSTANTS: _propTypes.default.shape({})
+  }).isRequired,
 
   /**
-   *  How many fractional units should the column width be, on desktop
+   * Application context initial state
    */
-  span: _propTypes.default.number
+  initialState: _propTypes.default.objectOf(_propTypes.default.string)
 };
-Section.defaultProps = {
-  span: 1
+AppContextProvider.defaultProps = {
+  initialState: {}
 };
-var _default = Section;
+var _default = AppContextProvider;
 exports.default = _default;

package/dist/cjs/{c/BlogContext → a/AppContext}/index.js

@@ -3,22 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "BlogContext", {
+Object.defineProperty(exports, "AppContext", {
   enumerable: true,
   get: function get() {
     return _Context.default;
   }
 });
-Object.defineProperty(exports, "BlogContextProvider", {
+Object.defineProperty(exports, "AppContextProvider", {
   enumerable: true,
   get: function get() {
     return _ContextProvider.default;
   }
 });
-Object.defineProperty(exports, "useBlog", {
+Object.defineProperty(exports, "useApp", {
   enumerable: true,
   get: function get() {
-    return _useBlog.default;
+    return _useApp.default;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function get() {
+    return _useTheme.default;
   }
 });
 
@@ -26,6 +32,8 @@ var _Context = _interopRequireDefault(require("./Context"));
 
 var _ContextProvider = _interopRequireDefault(require("./ContextProvider"));
 
-var _useBlog = _interopRequireDefault(require("./useBlog"));
+var _useApp = _interopRequireDefault(require("./useApp"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/AppContext/useTheme.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _default = function _default(initialTheme) {
+  var storageKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'theme';
+  var isClient = typeof window === 'object';
+  var [preferredTheme, setPreferredTheme] = (0, _react.useState)(initialTheme);
+  var [userTheme, setUserTheme] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    var storage = window.localStorage;
+
+    if (isClient) {
+      var storedTheme = window.localStorage.getItem(storageKey); // console.log(storedTheme, storedTheme != userTheme)
+
+      if (storedTheme && storedTheme !== userTheme) {
+        // console.warn('Theme load')
+        setPreferredTheme(storedTheme);
+        setUserTheme(storedTheme);
+      } else if (preferredTheme && preferredTheme.length && preferredTheme !== 'system') {
+        setUserTheme(preferredTheme);
+        storage.setItem(storageKey, preferredTheme); // console.warn('theme change', preferredTheme)
+      } else {
+        setUserTheme(window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');
+        storage.removeItem(storageKey); // console.warn('theme reset')
+      }
+    } else {
+      setUserTheme('light');
+    }
+  }, [preferredTheme, isClient]);
+  var isTheme = (0, _react.useCallback)(theme => userTheme === theme || undefined, [userTheme]);
+  return {
+    userTheme,
+    preferredTheme,
+    setPreferredTheme,
+    isTheme
+  };
+};
+
+exports.default = _default;

package/dist/cjs/a/index.js

@@ -21,28 +21,28 @@ Object.defineProperty(exports, "IconList", {
     return _IconList.IconList;
   }
 });
-Object.defineProperty(exports, "SiteContext", {
+Object.defineProperty(exports, "AppContext", {
   enumerable: true,
   get: function get() {
-    return _SiteContext.SiteContext;
+    return _AppContext.AppContext;
   }
 });
-Object.defineProperty(exports, "SiteContextProvider", {
+Object.defineProperty(exports, "AppContextProvider", {
   enumerable: true,
   get: function get() {
-    return _SiteContext.SiteContextProvider;
+    return _AppContext.AppContextProvider;
   }
 });
-Object.defineProperty(exports, "useSite", {
+Object.defineProperty(exports, "useApp", {
   enumerable: true,
   get: function get() {
-    return _SiteContext.useSite;
+    return _AppContext.useApp;
   }
 });
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function get() {
-    return _SiteContext.useTheme;
+    return _AppContext.useTheme;
   }
 });
 Object.defineProperty(exports, "ProgressBar", {
@@ -184,7 +184,7 @@ var _DashboardNavbar = require("./DashboardNavbar");
 
 var _IconList = require("./IconList");
 
-var _SiteContext = require("./SiteContext");
+var _AppContext = require("./AppContext");
 
 var _ProgressBar = require("./ProgressBar");
 

package/dist/cjs/b/Page/common/PageHelmet/PageHelmet.js

@@ -132,7 +132,7 @@ var PageHelmet = _ref => {
   var props = _extends({}, _ref);
 
   // const intl = useIntl()
-  var context = (0, _a.useSite)();
+  var context = (0, _a.useApp)();
   var HelmetContent = (0, React.useMemo)(() => helmetMap.reduce(
   /* eslint-disable no-unused-vars -- TODO add test or ssr mode */
   (a, _ref2) => {

package/dist/cjs/b/SocialMediaButton/SocialMediaButton.js

@@ -51,11 +51,11 @@ var defaultsMap = {
 /**
  * This is the component description.
  * This component takes `y` as the default color and `x` as the hover color.
- * This components needs to be wrapped within a `SiteContextProvider`.
+ * This components needs to be wrapped within a `AppContextProvider`.
  */
 
 var SocialMediaButton = _ref => {
-  var _siteContext$SOCIAL;
+  var _applicationContext$S;
 
   var {
     id,
@@ -69,12 +69,12 @@ var SocialMediaButton = _ref => {
   } = _ref,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
-  var siteContext = (0, _a.useSite)();
+  var applicationContext = (0, _a.useApp)();
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   var content = type && defaultsMap[type];
-  var href = link || (siteContext === null || siteContext === void 0 ? void 0 : (_siteContext$SOCIAL = siteContext.SOCIAL) === null || _siteContext$SOCIAL === void 0 ? void 0 : _siteContext$SOCIAL[content.link]);
+  var href = link || (applicationContext === null || applicationContext === void 0 ? void 0 : (_applicationContext$S = applicationContext.SOCIAL) === null || _applicationContext$S === void 0 ? void 0 : _applicationContext$S[content.link]);
   return /*#__PURE__*/React.createElement("a", {
     href: href,
     target: "_blank",

package/dist/cjs/b/ThemeSelector/ThemeSelector.js

@@ -38,7 +38,7 @@ var ThemeSelector = _ref => {
   var {
     userTheme,
     setPreferredTheme
-  } = (0, _a.useSite)();
+  } = (0, _a.useApp)();
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);

package/dist/es/a/AppContext/ContextProvider.js

@@ -0,0 +1,78 @@
+/* @pareto-engineering/generator-front 0.2.3 */
+import * as React from 'react';
+import { useReducer } from 'react';
+import PropTypes from 'prop-types';
+import useTheme from "./useTheme"; // Package-level Imports
+
+import Context from "./Context"; // Component-level imports
+// Helper Definitions
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'UPDATE_STATE':
+      return { ...state,
+        ...action.payload
+      };
+
+    default:
+      return state;
+  }
+};
+
+const AppContextProvider = ({
+  children,
+  initialTheme,
+  config,
+  initialState // ...otherProps
+
+}) => {
+  const theme = useTheme(initialTheme);
+  const [state, dispatch] = useReducer(reducer, initialState);
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: {
+      state,
+      dispatch,
+      ...config,
+      ...theme
+    }
+  }, children);
+};
+
+AppContextProvider.propTypes = {
+  /**
+   *  The children JSX
+   */
+  children: PropTypes.node,
+
+  /**
+   * The initial theme for the website. If undefined, fallbacks on system preference.
+   */
+  initialTheme: PropTypes.string,
+
+  /**
+   * A dictionnary containing settings and preferences to be used application-wide
+   */
+  config: PropTypes.shape({
+    APP: PropTypes.shape({
+      NAME: PropTypes.string.isRequired,
+      CANONICAL: PropTypes.string.isRequired,
+      SUPPORT_EMAIL: PropTypes.string,
+      TITLE_SUFFIX: PropTypes.string
+    }),
+    SOCIAL: PropTypes.shape({
+      FACEBOOK: PropTypes.string,
+      INSTAGRAM: PropTypes.string,
+      YOUTUBE: PropTypes.string
+    }),
+    CONSTANTS: PropTypes.shape({})
+  }).isRequired,
+
+  /**
+   * Application context initial state
+   */
+  initialState: PropTypes.objectOf(PropTypes.string)
+};
+AppContextProvider.defaultProps = {
+  initialState: {}
+};
+export default AppContextProvider;

package/dist/es/a/AppContext/index.js

@@ -0,0 +1,5 @@
+/* @pareto-engineering/generator-front 0.2.3 */
+export { default as AppContext } from "./Context";
+export { default as AppContextProvider } from "./ContextProvider";
+export { default as useApp } from "./useApp";
+export { default as useTheme } from "./useTheme";

package/dist/es/a/AppContext/useTheme.js

@@ -0,0 +1,34 @@
+import { useCallback, useState, useEffect } from 'react';
+export default ((initialTheme, storageKey = 'theme') => {
+  const isClient = typeof window === 'object';
+  const [preferredTheme, setPreferredTheme] = useState(initialTheme);
+  const [userTheme, setUserTheme] = useState();
+  useEffect(() => {
+    const storage = window.localStorage;
+
+    if (isClient) {
+      const storedTheme = window.localStorage.getItem(storageKey); // console.log(storedTheme, storedTheme != userTheme)
+
+      if (storedTheme && storedTheme !== userTheme) {
+        // console.warn('Theme load')
+        setPreferredTheme(storedTheme);
+        setUserTheme(storedTheme);
+      } else if (preferredTheme && preferredTheme.length && preferredTheme !== 'system') {
+        setUserTheme(preferredTheme);
+        storage.setItem(storageKey, preferredTheme); // console.warn('theme change', preferredTheme)
+      } else {
+        setUserTheme(window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');
+        storage.removeItem(storageKey); // console.warn('theme reset')
+      }
+    } else {
+      setUserTheme('light');
+    }
+  }, [preferredTheme, isClient]);
+  const isTheme = useCallback(theme => userTheme === theme || undefined, [userTheme]);
+  return {
+    userTheme,
+    preferredTheme,
+    setPreferredTheme,
+    isTheme
+  };
+});

package/dist/es/a/index.js

@@ -1,7 +1,7 @@
 export { SVG } from "./SVG";
 export { DashboardNavbar } from "./DashboardNavbar";
 export { IconList } from "./IconList";
-export { SiteContext, SiteContextProvider, useSite, useTheme } from "./SiteContext";
+export { AppContext, AppContextProvider, useApp, useTheme } from "./AppContext";
 export { ProgressBar } from "./ProgressBar";
 export { TeamInfo } from "./TeamInfo";
 export { AnimatedCounter } from "./AnimatedCounter";

package/dist/es/b/Page/common/PageHelmet/PageHelmet.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
-import { useSite } from "../../../../a";
+import { useApp } from "../../../../a";
 const helmetMap = [{
   variables: ['robots'],
   render: v => /*#__PURE__*/React.createElement("meta", {
@@ -117,7 +117,7 @@ const helmetMap = [{
 const PageHelmet = ({ ...props
 }) => {
   // const intl = useIntl()
-  const context = useSite();
+  const context = useApp();
   const HelmetContent = useMemo(() => helmetMap.reduce(
   /* eslint-disable no-unused-vars -- TODO add test or ssr mode */
   (a, {

package/dist/es/b/SocialMediaButton/SocialMediaButton.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem';
-import { useSite } from "../../a"; // Local Definitions
+import { useApp } from "../../a"; // Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'social-media-button';
@@ -30,7 +30,7 @@ const defaultsMap = {
 /**
  * This is the component description.
  * This component takes `y` as the default color and `x` as the hover color.
- * This components needs to be wrapped within a `SiteContextProvider`.
+ * This components needs to be wrapped within a `AppContextProvider`.
  */
 
 const SocialMediaButton = ({
@@ -44,14 +44,14 @@ const SocialMediaButton = ({
   isTransparent,
   ...otherProps
 }) => {
-  var _siteContext$SOCIAL;
+  var _applicationContext$S;
 
-  const siteContext = useSite();
+  const applicationContext = useApp();
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
   const content = type && defaultsMap[type];
-  const href = link || (siteContext === null || siteContext === void 0 ? void 0 : (_siteContext$SOCIAL = siteContext.SOCIAL) === null || _siteContext$SOCIAL === void 0 ? void 0 : _siteContext$SOCIAL[content.link]);
+  const href = link || (applicationContext === null || applicationContext === void 0 ? void 0 : (_applicationContext$S = applicationContext.SOCIAL) === null || _applicationContext$S === void 0 ? void 0 : _applicationContext$S[content.link]);
   return /*#__PURE__*/React.createElement("a", {
     href: href,
     target: "_blank",

package/dist/es/b/ThemeSelector/ThemeSelector.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useLayoutEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem';
-import { useSite } from "../../a"; // Local Definitions
+import { useApp } from "../../a"; // Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'theme-selector';
@@ -22,7 +22,7 @@ const ThemeSelector = ({
   const {
     userTheme,
     setPreferredTheme
-  } = useSite();
+  } = useApp();
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.52",
+  "version": "2.0.0-alpha.53",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

package/src/__snapshots__/Storyshots.test.js.snap

@@ -63,6 +63,8 @@ exports[`Storyshots a/AnimatedCounter Before And After 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/AppContext Base 1`] = `"Sample AppContext"`;
+
 exports[`Storyshots a/BackgroundGradient Base 1`] = `
 <div
   className="y-background4"
@@ -2436,8 +2438,6 @@ exports[`Storyshots a/Shapes Triangle 1`] = `
 </div>
 `;
 
-exports[`Storyshots a/SiteContext Base 1`] = `"Sample SiteContext"`;
-
 exports[`Storyshots a/SnapScroller Base 1`] = `
 <div
   className="base snap-scroller u1 pv-u"

package/src/stories/a/{SiteContext.stories.jsx → AppContext.stories.jsx}

@@ -1,13 +1,13 @@
 /* @pareto-engineering/generator-front 1.0.0 */
 import * as React from 'react'
 
-import { SiteContextProvider } from 'ui'
+import { AppContextProvider } from 'ui'
 
 export default {
-  title        :'a/SiteContext',
-  component    :SiteContextProvider,
+  title        :'a/AppContext',
+  component    :AppContextProvider,
   subcomponents:{
-    // Item:SiteContext.Item
+    // Item:AppContext.Item
   },
   decorators:[
     // storyfn => <div className="">{ storyfn() }</div>,
@@ -18,9 +18,9 @@ export default {
 }
 
 export const Base = () => (
-  <SiteContextProvider
+  <AppContextProvider
     config={{
-      SITE:{
+      APP:{
         NAME         :'Pareto',
         CANONICAL    :'https://hellopareto.com',
         SUPPORT_EMAIL:'support@hellopareto.com',
@@ -37,6 +37,6 @@ export const Base = () => (
     }}
 
   >
-    Sample SiteContext
-  </SiteContextProvider>
+    Sample AppContext
+  </AppContextProvider>
 )

package/src/stories/b/SocialMediaButton.stories.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { SiteContextProvider, SocialMediaButton } from 'ui'
+import { AppContextProvider, SocialMediaButton } from 'ui'
 
 export default {
   title        :'b/SocialMediaButton',
@@ -18,7 +18,7 @@ export default {
 }
 
 export const Base = () => (
-  <SiteContextProvider
+  <AppContextProvider
     config={{
       SITE:{
         NAME         :'Pareto',
@@ -42,13 +42,13 @@ export const Base = () => (
     <SocialMediaButton type="twitter" />
     <SocialMediaButton type="instagram" />
     <SocialMediaButton type="linkedin" />
-  </SiteContextProvider>
+  </AppContextProvider>
 )
 
 export const Transparent = () => (
-  <SiteContextProvider
+  <AppContextProvider
     config={{
-      SITE:{
+      APP:{
         NAME         :'Pareto',
         CANONICAL    :'https://hellopareto.com',
         SUPPORT_EMAIL:'support@hellopareto.com',
@@ -69,5 +69,5 @@ export const Transparent = () => (
     <SocialMediaButton type="twitter" isTransparent />
     <SocialMediaButton type="instagram" isTransparent />
     <SocialMediaButton type="linkedin" isTransparent />
-  </SiteContextProvider>
+  </AppContextProvider>
 )