@pareto-engineering/design-system 4.0.0-alpha.9 → 4.0.0

package/dist/cjs/g/ExpandableLexicalPreview/ExpandableLexicalPreview.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _formik = require("formik");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _f = require("../../f");
+var _b = require("../../b");
+var _common = require("./common");
+require("./styles.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* @pareto-engineering/generator-front 1.0.12 */
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'expandable-lexical-preview';
+
+/**
+ * This is the component description.
+ */
+const ExpandableLexicalPreview = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    nodes,
+    name,
+    color,
+    resize,
+    pageTitle,
+    onBlock,
+    onOpen,
+    header
+    // ...otherProps
+  } = _ref;
+  const [isCollapsed, setIsCollapsed] = (0, _react.useState)(false);
+  const handleButtonClick = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+  return /*#__PURE__*/React.createElement(_formik.Formik, {
+    initialValues: {
+      [name]: nodes
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`, isCollapsed && 'collapsed'].filter(e => e).join(' '),
+    style: style
+  }, typeof header === 'string' ? /*#__PURE__*/React.createElement("p", {
+    className: "title h2"
+  }, header) : header, isCollapsed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_b.Button, {
+    onClick: handleButtonClick,
+    color: "background-far",
+    isCompact: true
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ai-icon c-x x-paragraph"
+  }, "C")), /*#__PURE__*/React.createElement(_common.NewWindowPortal, {
+    pageTitle: pageTitle,
+    onBlock: () => {
+      onBlock?.();
+      setIsCollapsed(false);
+    },
+    onOpen: () => {
+      onOpen?.();
+      setIsCollapsed(true);
+    }
+  }, /*#__PURE__*/React.createElement(_f.EditorInput, {
+    name: name,
+    resize: resize,
+    disabled: true
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_f.EditorInput, {
+    name: name,
+    resize: resize,
+    disabled: true,
+    id: "the-bad-ass-input"
+  }), /*#__PURE__*/React.createElement(_b.Button, {
+    id: id,
+    className: "expand-button ai-icon",
+    color: "background-far",
+    isCompact: true,
+    onClick: handleButtonClick
+  }, "D"))));
+};
+ExpandableLexicalPreview.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * Color of the text
+   */
+  color: _propTypes.default.string,
+  /**
+   * The nodes to render in the form of a json string
+   */
+  nodes: _propTypes.default.string,
+  /**
+   * The resize property of the textarea
+   */
+  resize: _propTypes.default.string,
+  /**
+   * The header for the preview component.
+   */
+  header: _propTypes.default.node,
+  /**
+   * The page title for the expanded preview.
+   */
+  pageTitle: _propTypes.default.string,
+  /**
+   * The name used to acces the nodes
+   */
+  name: _propTypes.default.string.isRequired,
+  /**
+   * The function to run when a new window portal can be opened
+   */
+  onBlock: _propTypes.default.func.isRequired
+};
+ExpandableLexicalPreview.defaultProps = {
+  color: 'paragraph',
+  resize: 'vertical'
+};
+var _default = exports.default = ExpandableLexicalPreview;

package/dist/cjs/g/ExpandableLexicalPreview/common/NewWindowPortal/NewWindowPortal.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactDom = require("react-dom");
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _a = require("../../../../a");
+require("./styles.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* @pareto-engineering/generator-front 1.0.12 */
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const copyStyles = (sourceDocument, targetDocument) => {
+  Array.from(sourceDocument.querySelectorAll('link[rel="stylesheet"], style')).forEach(link => {
+    targetDocument.head.appendChild(link.cloneNode(true));
+  });
+};
+/**
+ * This is the component description.
+ */
+const NewWindowPortal = _ref => {
+  let {
+    children,
+    pageTitle,
+    onBlock,
+    onOpen
+  } = _ref;
+  const [newWindow, setNewWindow] = (0, _react.useState)(null);
+  const container = (0, _react.useMemo)(() => document.createElement('div'), []);
+  const {
+    userTheme = 'light'
+  } = (0, _a.useTheme)();
+  (0, _react.useEffect)(() => {
+    if (!container) return;
+    container.classList.add(baseClassName, 'new-window-portal', `ui-${userTheme}`);
+    const newExternalWindow = window.open('', pageTitle, 'width="100%",height="100%"');
+    if (newExternalWindow) {
+      newExternalWindow.document.title = pageTitle;
+      newExternalWindow.document.body.appendChild(container);
+      setNewWindow(newExternalWindow);
+      onOpen();
+    } else {
+      console.warn('A new window / tab could not be opened. Check your settings and/or extensions, maybe it was blocked.');
+      onBlock();
+    }
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      container.classList.remove(...container.classList);
+      newExternalWindow?.close();
+    };
+  }, [container, pageTitle, userTheme]);
+  (0, _react.useEffect)(() => {
+    if (newWindow) {
+      copyStyles(document, newWindow.document);
+    }
+  }, [newWindow]);
+  return /*#__PURE__*/(0, _reactDom.createPortal)(children, container);
+};
+NewWindowPortal.propTypes = {
+  /**
+   *  The children JSX
+   */
+  children: _propTypes.default.node,
+  /**
+   * The new window page title
+   */
+  pageTitle: _propTypes.default.string.isRequired
+};
+NewWindowPortal.defaultProps = {
+  // someProp:false
+};
+var _default = exports.default = NewWindowPortal;

package/dist/cjs/g/ExpandableLexicalPreview/common/NewWindowPortal/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NewWindowPortal", {
+  enumerable: true,
+  get: function () {
+    return _NewWindowPortal.default;
+  }
+});
+var _NewWindowPortal = _interopRequireDefault(require("./NewWindowPortal"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/g/ExpandableLexicalPreview/common/NewWindowPortal/styles.scss

@@ -0,0 +1,9 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.new-window-portal {
+  background-color: var(--background-far);
+  height: 100%;
+  width: 100%;
+}

package/dist/cjs/g/ExpandableLexicalPreview/common/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NewWindowPortal", {
+  enumerable: true,
+  get: function () {
+    return _NewWindowPortal.NewWindowPortal;
+  }
+});
+var _NewWindowPortal = require("./NewWindowPortal");

package/dist/cjs/g/ExpandableLexicalPreview/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ExpandableLexicalPreview", {
+  enumerable: true,
+  get: function () {
+    return _ExpandableLexicalPreview.default;
+  }
+});
+var _ExpandableLexicalPreview = _interopRequireDefault(require("./ExpandableLexicalPreview"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/g/ExpandableLexicalPreview/styles.scss

@@ -0,0 +1,34 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.expandable-lexical-preview {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  position: relative;
+  width: 100%;
+
+
+  &.collapsed {
+    flex-direction: row;
+  }
+
+  > .title {
+    margin: 0;
+  }
+
+  > .#{bem.$base}.button {
+    align-items: center;
+    border: 1px solid var(--outline-inputs);
+    display: flex;
+  }
+
+  > .#{bem.$base}.expand-button {
+    border: 1px solid var(--outline-inputs);
+    position: absolute;
+    right: 1em;
+    top: 5.5rem;
+  }
+}

package/dist/cjs/g/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DragAndDrop", {
+  enumerable: true,
+  get: function () {
+    return _DragAndDrop.DragAndDrop;
+  }
+});
+Object.defineProperty(exports, "ExpandableLexicalPreview", {
+  enumerable: true,
+  get: function () {
+    return _ExpandableLexicalPreview.ExpandableLexicalPreview;
+  }
+});
+var _ExpandableLexicalPreview = require("./ExpandableLexicalPreview");
+var _DragAndDrop = require("./DragAndDrop");

package/dist/cjs/index.js

@@ -3,17 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _r = require("./r");
-Object.keys(_r).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _r[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _r[key];
-    }
-  });
-});
 var _a = require("./a");
 Object.keys(_a).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -69,6 +58,17 @@ Object.keys(_f).forEach(function (key) {
     }
   });
 });
+var _g = require("./g");
+Object.keys(_g).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _g[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _g[key];
+    }
+  });
+});
 var _utils = require("./utils");
 Object.keys(_utils).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/test/QueryLoader/QueryLoader.js

@@ -4,12 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _reactRelay = require("react-relay");
 var _common = require("./common");
 var _QueryLoaderHelloQuery;
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
+/* @pareto-engineering/generator-front 1.0.12 */
+// Local Definitions
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const testQuery = _QueryLoaderHelloQuery !== void 0 ? _QueryLoaderHelloQuery : (_QueryLoaderHelloQuery = require("./__generated__/QueryLoaderHelloQuery.graphql"), _QueryLoaderHelloQuery.hash && _QueryLoaderHelloQuery.hash !== "b92d001ab0208bd484a99f77c274d5ef" && console.error("The definition of 'QueryLoaderHelloQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _QueryLoaderHelloQuery);
 
 /**
@@ -17,10 +20,10 @@ const testQuery = _QueryLoaderHelloQuery !== void 0 ? _QueryLoaderHelloQuery : (
  */
 const QueryLoader = () => {
   const [queryReference, loadQuery] = (0, _reactRelay.useQueryLoader)(testQuery);
-  (0, React.useEffect)(() => {
+  (0, _react.useEffect)(() => {
     loadQuery({});
   }, []);
-  return /*#__PURE__*/React.createElement(React.Suspense, {
+  return /*#__PURE__*/React.createElement(_react.Suspense, {
     fallback: "loading"
   }, queryReference ? /*#__PURE__*/React.createElement(_common.PreloadedTestData, {
     queryReference: queryReference,
@@ -30,5 +33,4 @@ const QueryLoader = () => {
 QueryLoader.defaultProps = {
   // someProp:false
 };
-var _default = QueryLoader;
-exports.default = _default;
+var _default = exports.default = QueryLoader;

package/dist/cjs/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js

@@ -48,7 +48,6 @@ const node /*: ConcreteRequest*/ = function () {
       "name": "QueryLoaderHelloQuery",
       "selections": v0 /*: any*/
     },
-
     "params": {
       "cacheID": "463f9ee8a82dd6ec8dedeb28649cce74",
       "id": null,

package/dist/cjs/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.js

@@ -8,8 +8,8 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRelay = require("react-relay");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* @pareto-engineering/generator-front 1.0.12 */
 
 /**
@@ -37,5 +37,4 @@ PreloadedTestData.propTypes = {
 PreloadedTestData.defaultProps = {
   // someProp:false
 };
-var _default = PreloadedTestData;
-exports.default = _default;
+var _default = exports.default = PreloadedTestData;

package/dist/cjs/utils/hooks/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "useDynamicPosition", {
     return _useDynamicPosition.default;
   }
 });
+Object.defineProperty(exports, "useOutsideClick", {
+  enumerable: true,
+  get: function () {
+    return _useOutsideClick.default;
+  }
+});
 Object.defineProperty(exports, "useWindowSize", {
   enumerable: true,
   get: function () {
@@ -17,4 +23,5 @@ Object.defineProperty(exports, "useWindowSize", {
 });
 var _useWindowSize = _interopRequireDefault(require("./useWindowSize"));
 var _useDynamicPosition = _interopRequireDefault(require("./useDynamicPosition"));
+var _useOutsideClick = _interopRequireDefault(require("./useOutsideClick"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/utils/hooks/useDynamicPosition.js

@@ -88,5 +88,4 @@ const useDynamicPosition = _ref => {
     secondaryPosition
   };
 };
-var _default = useDynamicPosition;
-exports.default = _default;
+var _default = exports.default = useDynamicPosition;

package/dist/cjs/utils/hooks/useOutsideClick.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const useOutsideClick = (ref, callback) => {
+  // const ref = useRef(null)
+
+  (0, _react.useEffect)(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [callback]);
+};
+var _default = exports.default = useOutsideClick;

package/dist/cjs/utils/hooks/useWindowSize.js

@@ -27,5 +27,4 @@ const useWindowSize = function () {
   }, [getSize, handle, isClient]);
   return windowSize;
 };
-var _default = useWindowSize;
-exports.default = _default;
+var _default = exports.default = useWindowSize;

package/dist/cjs/utils/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "useDynamicPosition", {
     return _hooks.useDynamicPosition;
   }
 });
+Object.defineProperty(exports, "useOutsideClick", {
+  enumerable: true,
+  get: function () {
+    return _hooks.useOutsideClick;
+  }
+});
 Object.defineProperty(exports, "useWindowSize", {
   enumerable: true,
   get: function () {

package/dist/es/a/AnimatedBlobs/AnimatedBlobs.js

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -21,28 +21,23 @@ const AnimatedBlobs = ({
   width,
   opacity
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: {
-      ...style,
-      '--blob-color': `var(--${color})`,
-      '--height': height,
-      '--opacity': opacity,
-      '--width': width
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "shape-blob"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "shape-blob one"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "shape-blob two"
-  }));
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: {
+    ...style,
+    '--blob-color': `var(--${color})`,
+    '--height': height,
+    '--opacity': opacity,
+    '--width': width
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  className: "shape-blob"
+}), /*#__PURE__*/React.createElement("div", {
+  className: "shape-blob one"
+}), /*#__PURE__*/React.createElement("div", {
+  className: "shape-blob two"
+}));
 AnimatedBlobs.propTypes = {
   /**
   * The HTML id for this element

package/dist/es/a/AnimatedGradient/AnimatedGradient.js

@@ -1,9 +1,11 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useEffect, useInsertionEffect } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import { useApp } from "./..";
 import { Gradient } from "./webGIRenderer";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -17,9 +19,9 @@ const AnimatedGradient = ({
   className: userClassName
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
+  const {
+    userTheme
+  } = useApp();
   const isClient = typeof window !== 'undefined';
   useEffect(() => {
     // Only initialize the Gradient if we're in the browser
@@ -27,7 +29,7 @@ const AnimatedGradient = ({
       const gradient = new Gradient();
       gradient.initGradient('#gradient-canvas');
     }
-  }, []);
+  }, [userTheme]);
   return /*#__PURE__*/React.createElement("canvas", {
     id: "gradient-canvas",
     "data-transition-in": true,
@@ -35,7 +37,6 @@ const AnimatedGradient = ({
     // {...otherProps}
   });
 };
-
 AnimatedGradient.propTypes = {
   /**
   * The HTML class names for this element
@@ -43,6 +44,6 @@ AnimatedGradient.propTypes = {
   className: PropTypes.string
 };
 AnimatedGradient.defaultProps = {
-  // primaryColor:'black',
+  // primaryColor:'heading',
 };
 export default AnimatedGradient;

package/dist/es/a/AnimatedGradient/styles.scss

@@ -3,10 +3,11 @@
 @use "@pareto-engineering/bem";
 
 .#{bem.$base}.animated-gradient {
-  --gradient-color-1: var(--background-mesh);
+  --gradient-color-1: var(--hard-background-mesh);
   --gradient-color-2: var(--soft-background-mesh);
   --gradient-color-3: var(--background-mesh);
   --gradient-color-4: var(--soft-background-mesh);
+  background-color: var(--background-mesh);
   height: 100%;
   left: 0;
   top: 0;

package/dist/es/a/AnimatedGradient/webGIRenderer.js

@@ -319,7 +319,6 @@ class Gradient {
                     window.addEventListener("scroll", this.handleScroll), window.addEventListener("mousedown", this.handleMouseDown), window.addEventListener("mouseup", this.handleMouseUp), window.addEventListener("keydown", this.handleKeyDown), this.isIntersecting = !0, this.addIsLoadedClass(), this.play()
                 }) */);
   }
-
   disconnect() {
     this.scrollObserver && (window.removeEventListener('scroll', this.handleScroll), window.removeEventListener('mousedown', this.handleMouseDown), window.removeEventListener('mouseup', this.handleMouseUp), window.removeEventListener('keydown', this.handleKeyDown), this.scrollObserver.disconnect()), window.removeEventListener('resize', this.resize);
   }

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

@@ -7,19 +7,15 @@ export default ((initialTheme, storageKey = 'theme') => {
     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');