@pareto-engineering/design-system 4.0.0-alpha.3 → 4.0.0-alpha.34

package/babel.config.js

@@ -6,11 +6,28 @@ module.exports = function (api) {
   const isCjs = api.cache(() => process.env.TARGET === 'cjs')
   const isEs = api.cache(() => process.env.TARGET === 'es')
 
-  const modules = isEs ? false : 'commonjs'
+  let modules; let targets; let
+    moduleResolverRoots
 
-  const targets = isCjs
-    ? { esmodules: true }
-    : { chrome: '111' }
+  // If we are compiling for common JS
+  if (isCjs) {
+    modules = 'commonjs'
+    targets = 'defaults'
+    moduleResolverRoots = ['./src']
+  }
+
+  // If we are compiling for ES
+  else if (isEs) {
+    modules = false
+    targets = { chrome: '111' }
+    moduleResolverRoots = ['./src']
+  }
+
+  // If we are simply running the storybook
+  else {
+    targets = { chrome: '100' }
+    moduleResolverRoots = ['./src', './']
+  }
 
   const presets = [
     [
@@ -18,27 +35,18 @@ module.exports = function (api) {
       {
         modules,
         targets,
-        debug:true,
+        // debug:true,
       },
     ],
     '@babel/preset-react',
   ]
+
   const plugins = [
     'relay',
     ['module-resolver', {
-      root:['./src'],
+      root:moduleResolverRoots,
     }],
-
   ]
-  if (isEs) {
-    plugins.push(
-      // This plugins disables the transform of the rest operator using a polyfill.
-      // https://github.com/babel/babel-loader/issues/636
-      // '@babel/plugin-syntax-object-rest-spread',
-    )
-  }
-
-  console.log(plugins)
 
   return {
     presets,

package/dist/cjs/a/AnimatedBlobs/AnimatedBlobs.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+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; } /* @pareto-engineering/generator-front 1.0.12 */
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'animated-blobs';
+
+/**
+ * This is the component description.
+ */
+const AnimatedBlobs = _ref => {
+  let {
+    id,
+    className: userClassName,
+    color,
+    style,
+    height,
+    width,
+    opacity
+    // ...otherProps
+  } = _ref;
+  (0, React.useInsertionEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./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"
+  }));
+};
+AnimatedBlobs.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),
+  /**
+   * The color of the blobs
+   */
+  color: _propTypes.default.string,
+  /**
+   * The height of the blobs
+   */
+  height: _propTypes.default.string,
+  /**
+   * The width of the blobs
+   */
+  width: _propTypes.default.string,
+  /**
+   * The opacity of the blobs
+   */
+  opacity: _propTypes.default.string
+};
+AnimatedBlobs.defaultProps = {
+  color: 'background-mesh',
+  height: '200px',
+  width: '200px',
+  opacity: '0.7'
+};
+var _default = AnimatedBlobs;
+exports.default = _default;

package/dist/cjs/a/AnimatedBlobs/index.js

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

package/dist/cjs/a/AnimatedBlobs/styles.scss

@@ -0,0 +1,87 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+@keyframes transform {
+  0%,
+  100% {
+    border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%;
+  }
+
+  20% {
+    border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%;
+  }
+
+  40% {
+    border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%;
+  }
+
+  60% {
+    border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%;
+  }
+
+  80% {
+    border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%;
+  }
+}
+@keyframes movement_one {
+  0%,
+  100% {
+    transform: none;
+  }
+
+  50% {
+    transform: translate(50%, 20%) rotateY(10deg) scale(1.2);
+  }
+}
+@keyframes movement_two {
+  0%,
+  500% {
+    transform: none;
+  }
+
+  50% {
+    transform: translate(50%, 20%) rotate(-200deg) scale(1.2);
+  }
+}
+
+.#{bem.$base}.animated-blobs {
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+
+  > .shape-blob {
+    animation:
+      transform 20s ease-in-out infinite both alternate,
+      movement_one 40s ease-in-out infinite both;
+    background: var(--blob-color);
+    border-radius: 30% 50% 20% 40%;
+    height: var(--height);
+    left: 70%;
+    opacity: var(--opacity);
+    position: absolute;
+    top: 50%;
+    width: var(--width);
+  }
+
+  > .shape-blob.one {
+    animation: transform 30s ease-in-out infinite both alternate,
+      movement_two 60s ease-in-out infinite both;
+    height: calc(var(--height) * 2.5);
+    left: -200px;
+    top: -150px;
+    transform: rotate(-180deg);
+    width: calc(var(--width) * 2.5);
+  }
+
+  > .shape-blob.two {
+    animation: transform 30s ease-in-out infinite both alternate,
+      movement_two 60s ease-in-out infinite both;
+    height: calc(var(--height) * 1.75);
+    left: 500px;
+    top: -150px;
+    transform: rotate(-180deg);
+    width: calc(var(--width) * 1.75);
+  }
+}

package/dist/cjs/a/AnimatedGradient/AnimatedGradient.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _ = require("./..");
+var _webGIRenderer = require("./webGIRenderer");
+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; } /* @pareto-engineering/generator-front 1.0.12 */
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'animated-gradient';
+
+/**
+ * This is the component description.
+ */
+const AnimatedGradient = _ref => {
+  let {
+    className: userClassName
+    // ...otherProps
+  } = _ref;
+  (0, React.useInsertionEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  const {
+    userTheme
+  } = (0, _.useApp)();
+  const isClient = typeof window !== 'undefined';
+  (0, React.useEffect)(() => {
+    // Only initialize the Gradient if we're in the browser
+    if (isClient) {
+      const gradient = new _webGIRenderer.Gradient();
+      gradient.initGradient('#gradient-canvas');
+    }
+  }, [userTheme]);
+  return /*#__PURE__*/React.createElement("canvas", {
+    id: "gradient-canvas",
+    "data-transition-in": true,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
+    // {...otherProps}
+  });
+};
+
+AnimatedGradient.propTypes = {
+  /**
+  * The HTML class names for this element
+  */
+  className: _propTypes.default.string
+};
+AnimatedGradient.defaultProps = {
+  // primaryColor:'heading',
+};
+var _default = AnimatedGradient;
+exports.default = _default;

package/dist/cjs/a/AnimatedGradient/index.js

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

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

@@ -0,0 +1,14 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.animated-gradient {
+  --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);
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+}