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

package/src/ui/a/AnimatedBlobs/AnimatedBlobs.jsx

@@ -0,0 +1,102 @@
+/* @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'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'animated-blobs'
+
+/**
+ * This is the component description.
+ */
+const AnimatedBlobs = ({
+  id,
+  className: userClassName,
+  color,
+  style,
+  height,
+  width,
+  opacity,
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={{
+        ...style,
+        '--blob-color':`var(--${color})`,
+        '--height'    :height,
+        '--opacity'   :opacity,
+        '--width'     :width,
+      }}
+    >
+      <div className="shape-blob" />
+      <div className="shape-blob one" />
+      <div className="shape-blob two" />
+    </div>
+  )
+}
+
+AnimatedBlobs.propTypes = {
+  /**
+ * The HTML id for this element
+ */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The color of the blobs
+   */
+  color:PropTypes.string,
+
+  /**
+   * The height of the blobs
+   */
+  height:PropTypes.string,
+
+  /**
+   * The width of the blobs
+   */
+  width:PropTypes.string,
+
+  /**
+   * The opacity of the blobs
+   */
+  opacity:PropTypes.string,
+}
+
+AnimatedBlobs.defaultProps = {
+  color  :'background-mesh',
+  height :'200px',
+  width  :'200px',
+  opacity:'0.7',
+}
+
+export default AnimatedBlobs

package/src/ui/a/AnimatedBlobs/index.js

@@ -0,0 +1 @@
+export { default as AnimatedBlobs } from './AnimatedBlobs'

package/src/ui/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/src/ui/a/AnimatedGradient/AnimatedGradient.jsx

@@ -0,0 +1,69 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import {
+  useEffect,
+  useInsertionEffect,
+} from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import { Gradient } from './webGIRenderer'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'animated-gradient'
+
+/**
+ * This is the component description.
+ */
+const AnimatedGradient = ({
+  className: userClassName,
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const isClient = typeof window !== 'undefined'
+
+  useEffect(() => {
+    // Only initialize the Gradient if we're in the browser
+    if (isClient) {
+      const gradient = new Gradient()
+      gradient.initGradient('#gradient-canvas')
+    }
+  }, [])
+
+  return (
+    <canvas
+      id="gradient-canvas"
+      data-transition-in
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+        // {...otherProps}
+    />
+  )
+}
+
+AnimatedGradient.propTypes = {
+  /**
+  * The HTML class names for this element
+  */
+  className:PropTypes.string,
+}
+
+AnimatedGradient.defaultProps = {
+  // primaryColor:'black',
+}
+
+export default AnimatedGradient

package/src/ui/a/AnimatedGradient/index.js

@@ -0,0 +1 @@
+export { default as AnimatedGradient } from './AnimatedGradient'

package/src/ui/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%;
+}