@pareto-engineering/design-system 3.0.0-alpha.29 → 4.0.0-alpha.11

package/.storybook/main.js

@@ -1,70 +1,32 @@
-const path=require('path')
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+import webpackFinal from './webpackFinal'
 
-const localImages = path.resolve(__dirname,"../src/assets/images")
-const imagesFromAssetsPackage = path.resolve(__dirname,"../../../node_modules/@pareto-engineering/assets/images")
-const fonts = path.resolve(__dirname,"../../../node_modules/@pareto-engineering/assets/fonts")
-
-module.exports = {
-   webpackFinal: async (config, { configType }) => {
-    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
-    // You can change the configuration based on that.
-    // 'PRODUCTION' is used when building the static version of storybook.
-
-    // Make whatever fine-grained changes you need
-    config.resolve.roots = [fonts, localImages, imagesFromAssetsPackage]
-    config.module.rules.push({
-      test: /\.scss$/,
-      use: [
-        'style-loader',
-        {
-          loader: 'css-loader',
-          options: {
-            //modules:{
-            //  mode:'global',
-            //},
-            //localIdentName:"[name]__hello_[local]__[hash:base64:5]"
-          },
-        },
-        {
-          loader:'sass-loader',
-          options: {
-            sassOptions: {
-              includePaths: [
-                //path.resolve(__dirname, '../node_modules'), // Already default
-                path.resolve(__dirname, '../src')
-              ]
-            }
-          }
-        }
-    ],
-      include: path.resolve(__dirname, '../..')
-    });
-
-    // Return the altered config
-    return config;
-  },
-
-  "stories": [
-    "../src/stories/**/*.stories.mdx",
-    "../src/stories/**/*.stories.@(js|jsx|ts|tsx)"
+const config = {
+  webpackFinal,
+  staticDirs:[
+    '../../../node_modules/@pareto-engineering/assets/images',
+    '../../../node_modules/@pareto-engineering/assets/fonts',
+  ],
+  stories:[
+    '../src/stories/**/*.mdx',
+    '../src/stories/**/*.stories.@(js|jsx|ts|tsx)',
   ],
-  "addons": [
-    "@storybook/addon-links",
-     {
-      name: '@storybook/addon-essentials',
-      options: {
-        backgrounds: false,
-      }
-    },
-    'storybook-addon-themes'
+  addons:[
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    //'@storybook/addon-interactions',
+    //'storybook-addon-themes',
   ],
-  core: {
-    builder: 'webpack5',
+  framework:{
+    name   :'@storybook/react-webpack5',
+    options:{},
   },
-  reactOptions: {
-    fastRefresh: true,
+  docs:{
+    autodocs:true,
+    //autodocs:'tag',
   },
-  features: {
-    previewMdx2: true
+  core:{
+    disableTelemetry:true, // 👈 Disables telemetry
   },
 }
+export default config

package/.storybook/preview.js

@@ -1,11 +1,28 @@
-import '../src/local.scss'
-import '@pareto-engineering/styles/dist/main.min.css'
+/** @type { import('@storybook/react').Preview } */
+// import '../src/local.scss'
+// import '@pareto-engineering/styles'
+// Same as
+import '@pareto-engineering/styles/dist/main.css'
 
-export const parameters = {
-  layout:'fullscreen',
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  themes: [
-    { name: 'Colorscheme Light', class: 'ui-light', color: '#EFEFEF', default: true },
-    { name: 'Colorscheme Dark', class: 'ui-dark', color: '#121212' }
-  ],
+const preview = {
+  parameters:{
+    backgrounds:{
+      default:'light',
+    },
+    actions :{ argTypesRegex: '^on[A-Z].*' },
+    controls:{
+      matchers:{
+        color:/(background|color)$/i,
+        date :/Date$/,
+      },
+    },
+    themes:[
+      {
+        name:'Light', class:'ui-light', color:'#EFEFEF', default:true,
+      },
+      { name: 'Dark', class: 'ui-dark', color: '#121212' },
+    ],
+  },
 }
+
+export default preview

package/.storybook/webpackFinal.js

@@ -0,0 +1,68 @@
+import path from 'path'
+
+/* We want to stop webpack from loading the fonts (.woff, etc)
+ * This fonts are embedded in the imported css file, but it makes no sense
+ * that webpack processes them. Instead, we will simply provide the right 
+ * static path to storybook to have them loaded by the client.
+ */
+const patchCssLoader = (rules) => {
+  // We find the css rule
+  const cssRule = rules.find(rule => {
+    return rule.test?.test('.css')
+  })
+  //  console.log(cssRule)
+
+  // We find the `css-loader` configuration object
+  const cssLoaderConfig = cssRule.use.find(({ loader }) => {
+    return loader?.includes('css-loader')
+  })
+  // console.log(cssLoaderConfig)
+
+  // We patch it for it not to load external resources
+  cssLoaderConfig.options.url = false
+  console.log('info => Patched CSS loader with { url:false }')
+}
+
+export default async (config, { configType }) => {
+  // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+  // You can change the configuration based on that.
+  // 'PRODUCTION' is used when building the static version of storybook.
+
+  // Make whatever fine-grained changes you need
+  config.resolve.roots = [
+    path.resolve(__dirname, '../../../node_modules/@pareto-engineering/assets/fonts'),
+    path.resolve(__dirname, '../../../node_modules/@pareto-engineering/assets/images')
+  ]
+  //config.resolve.alias.react = path.resolve(__dirname, '../node_modules/react')
+  // patchCssLoader(config.module.rules)
+  config.module.rules.push({
+    test:/\.scss$/,
+    use :[
+      'style-loader',
+      {
+        loader :'css-loader',
+        options:{
+          url    :false,
+          modules:{
+            // We only activate CSS modules for the file containing the BEM rules
+            auto:(resourcePath) => resourcePath.includes('bem/exports.scss'),
+          },
+        },
+      },
+      {
+        loader :'sass-loader',
+        options:{
+          sassOptions:{
+            includePaths:[
+              // path.resolve(__dirname, '../node_modules'), // Already default
+              path.resolve(__dirname, '../src'),
+            ],
+          },
+        },
+      },
+    ],
+    include:path.resolve(__dirname, '../..'),
+  })
+
+  return config
+}

package/babel.config.js

@@ -2,21 +2,32 @@
 //
 
 module.exports = function (api) {
-  // api.cache(false)
   // var isProd = api.cache(() => process.env.NODE_ENV === 'production')
-  const isCjs = api.cache(() => process.env.COMPILE_ENV === 'cjs')
-  const isEs = api.cache(() => process.env.COMPILE_ENV === 'es')
-  const isTest = api.env('test')
+  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 = isTest
-    ? { node: '12' }
-    : isCjs
-      ? { esmodules: true }
-      : undefined
+  // 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']
+  }
 
-  // { browsers: '>0.35%, not ie' }
+  // If we are simply running the storybook
+  else {
+    targets = { chrome: '100' }
+    moduleResolverRoots = ['./src', './']
+  }
 
   const presets = [
     [
@@ -24,53 +35,19 @@ module.exports = function (api) {
       {
         modules,
         targets,
-        //        debug:true,
+        // debug:true,
       },
     ],
     '@babel/preset-react',
   ]
+
   const plugins = [
     'relay',
     ['module-resolver', {
-      root:['./src'],
-    }],
-    ['@babel/plugin-proposal-private-property-in-object', { loose: true }], // This is to silence a warning after upgrading storybook to 6.2.9
-    ['@babel/plugin-proposal-class-properties', { loose: true }],
-    ['@babel/plugin-proposal-private-methods', { loose: true }],
-
-    // ['@babel/plugin-proposal-class-properties', { 'loose': true }],
-    /* ['babel-plugin-inline-import', {
-      'extensions':[
-        '.html',
-        '.graphql',
-        '.gql'
-      ]}], */
-    /*
-    ['transform-react-remove-prop-types', {
-      'mode':'wrap',
+      root:moduleResolverRoots,
     }],
-    */
-    // ['add-module-exports'],
-
   ]
 
-  /* We comment out this part because it's probably better to remove the proptypes in the final react app instead of in the compilation process
-  if(isEs || isCjs) { plugins.push(
-    [
-      'transform-react-remove-prop-types',
-      {
-        removeImport:true
-      },
-    ],
-  )}
-	*/
-
-  /* const env = { //UNUSED (??)
-    'production': {
-      'plugins': ['transform-react-remove-prop-types']
-    }
-	} */
-
   return {
     presets,
     plugins,

package/dist/cjs/a/{AnimatedCounter/AnimatedCounter.js → AnimatedBlobs/AnimatedBlobs.js}

@@ -5,69 +5,55 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _reactCountup = _interopRequireDefault(require("react-countup"));
-var _reactVisibilitySensor = _interopRequireDefault(require("react-visibility-sensor"));
 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 _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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; }
 // Local Definitions
 
-var baseClassName = _exports.default.base;
-var componentClassName = 'animated-counter';
+const baseClassName = _exports.default.base;
+const componentClassName = 'animated-blobs';
 
 /**
- * This is the component description
+ * This is the component description.
  */
-var AnimatedCounter = _ref => {
-  var {
+const AnimatedBlobs = _ref => {
+  let {
     id,
     className: userClassName,
-    style,
     color,
-    number,
-    before,
-    after,
-    delay
+    style,
+    height,
+    width,
+    opacity
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
-  var countDecimals = (0, React.useCallback)(value => {
-    if (value % 1 !== 0) return value.toString().split('.')[1].length;
-    return 0;
-  }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(color)].filter(e => e).join(' '),
-    style: style
-    // {...otherProps}
+    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: "count s3"
-  }, before && /*#__PURE__*/React.createElement("span", null, before), /*#__PURE__*/React.createElement(_reactCountup.default, {
-    end: number,
-    delay: delay,
-    decimals: countDecimals(number),
-    redraw: true
-  }, _ref2 => {
-    var {
-      countUpRef,
-      start
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(_reactVisibilitySensor.default, {
-      onChange: start,
-      delayedCall: true
-    }, /*#__PURE__*/React.createElement("span", {
-      ref: countUpRef
-    }));
-  }), after && /*#__PURE__*/React.createElement("span", null, after)));
+    className: "shape-blob"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "shape-blob one"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "shape-blob two"
+  }));
 };
-AnimatedCounter.propTypes = {
+AnimatedBlobs.propTypes = {
   /**
-   * The HTML id for this element.
-   */
+  * The HTML id for this element
+  */
   id: _propTypes.default.string,
   /**
    * The HTML class names for this element
@@ -78,28 +64,27 @@ AnimatedCounter.propTypes = {
    */
   style: _propTypes.default.objectOf(_propTypes.default.string),
   /**
-   * The count color
+   * The color of the blobs
    */
   color: _propTypes.default.string,
   /**
-   *  The review count value
-   */
-  number: _propTypes.default.number,
-  /**
-   *  The unit before the number
+   * The height of the blobs
    */
-  before: _propTypes.default.string,
+  height: _propTypes.default.string,
   /**
-   *  The unit after the number
+   * The width of the blobs
    */
-  after: _propTypes.default.string,
+  width: _propTypes.default.string,
   /**
-   *  react counter delay
+   * The opacity of the blobs
    */
-  delay: _propTypes.default.number
+  opacity: _propTypes.default.string
 };
-AnimatedCounter.defaultProps = {
-  color: 'main1'
+AnimatedBlobs.defaultProps = {
+  color: 'background-mesh',
+  height: '200px',
+  width: '200px',
+  opacity: '0.7'
 };
-var _default = AnimatedCounter;
+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,56 @@
+"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 _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; }
+// 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 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');
+    }
+  }, []);
+  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:'black',
+};
+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(--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%;
+}