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

package/src/stories/g/FormBuilder.stories.jsx

@@ -0,0 +1,97 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react'
+
+import { useState } from 'react'
+
+import { FormBuilder, Button } from 'ui'
+
+export default {
+  title        :'g/FormBuilder',
+  component    :FormBuilder,
+  subcomponents:{
+    // Item:FormBuilder.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Builder = {
+  args:{
+    mode:'build',
+  },
+  render:(args) => {
+    const [values, setValues] = useState({})
+
+    const handleSampleSaveOnNext = (argsValues) => {
+      setValues(argsValues)
+    }
+
+    return (
+      <>
+        <FormBuilder {...args} onBuilderFormSave={handleSampleSaveOnNext} formBuilderId="some-sample-form-id" />
+        <Button form="some-sample-form-id" type="submit">
+          Sample Next Button in a Work flow
+        </Button>
+        <pre>{JSON.stringify(values, null, 2)}</pre>
+      </>
+    )
+  },
+}
+const sampleFormData = {
+  sections:[
+    {
+      title      :'titlel',
+      description:'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"background-color: #a37575;","text":"asdvczvcsdvjksadvkl sdvasdvn mdvaskldvnsdavkjc,mndsvb asdvsdvsadv","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}',
+      key        :'section-title',
+      inputs     :[
+        {
+          name    :'section_0_input_0',
+          label   :'Names',
+          type    :'multiple',
+          required:false,
+          options :[
+            {
+              key        :'sections-0-inputs-0-options--1',
+              value      :'James',
+              label      :'James',
+              nextSection:'',
+            },
+            {
+              key        :'sections-0-inputs-0-options-0',
+              value      :'Coigo',
+              label      :'Coigo',
+              nextSection:'',
+            },
+            {
+              key        :'sections-0-inputs-0-options-1',
+              value      :'Nyanjui',
+              label      :'Nyanjui',
+              nextSection:'',
+            },
+            {
+              key        :'sections-0-inputs-0-options-2',
+              value      :'Masalia',
+              label      :'Masalia',
+              nextSection:'',
+            },
+          ],
+          conditionalLogic:null,
+          description     :'',
+        },
+      ],
+      navigation:{
+        nextSection:'next',
+      },
+    },
+  ],
+}
+export const Renderer = {
+  args:{
+    mode    :'render',
+    formData:sampleFormData,
+  },
+}

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

@@ -1,12 +1,12 @@
 /* @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
 
 const baseClassName = styleNames.base
@@ -25,35 +25,29 @@ const AnimatedBlobs = ({
   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>
-  )
-}
+}) => (
+  <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 = {
   /**

package/src/ui/a/AnimatedGradient/AnimatedGradient.jsx

@@ -3,15 +3,18 @@ import * as React from 'react'
 
 import {
   useEffect,
-  useInsertionEffect,
 } from 'react'
 
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import { useApp } from 'ui/a'
+
 import { Gradient } from './webGIRenderer'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -25,9 +28,7 @@ const AnimatedGradient = ({
   className: userClassName,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
+  const { userTheme } = useApp()
 
   const isClient = typeof window !== 'undefined'
 
@@ -37,7 +38,7 @@ const AnimatedGradient = ({
       const gradient = new Gradient()
       gradient.initGradient('#gradient-canvas')
     }
-  }, [])
+  }, [userTheme])
 
   return (
     <canvas
@@ -63,7 +64,7 @@ AnimatedGradient.propTypes = {
 }
 
 AnimatedGradient.defaultProps = {
-  // primaryColor:'black',
+  // primaryColor:'heading',
 }
 
 export default AnimatedGradient

package/src/ui/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/src/ui/a/AppContext/useTheme.js

@@ -14,9 +14,7 @@ export default (
     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') {
@@ -25,11 +23,9 @@ export default (
           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')

package/src/ui/a/BlurOverlay/BlurOverlay.jsx

@@ -0,0 +1,69 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'blur-overlay'
+
+const BlurOverlay = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  blur,
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      blur && styleNames.modifierActive,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    { children }
+  </div>
+)
+
+BlurOverlay.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 children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   *  Boolean to toggle blur effect
+   */
+  blur:PropTypes.bool,
+}
+
+BlurOverlay.defaultProps = {
+  blur:true,
+  // someProp:false
+}
+
+export default BlurOverlay

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

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as BlurOverlay } from './BlurOverlay'

package/src/ui/a/BlurOverlay/styles.scss

@@ -0,0 +1,33 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.blur-overlay {
+  background: inherit;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 3;
+  &.#{bem.$modifier-active} {
+    animation: blurAnimation .3s ease-in-out;
+    backdrop-filter: blur(5px);
+    background: var(--blur-overlay-background, inherit);
+    height: 100%;
+    z-index: var(--blur-overlay-z-index, 3);
+  }
+}
+
+@keyframes blurAnimation {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  1% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}

package/src/ui/a/ContentTree/ContentTree.jsx

@@ -1,12 +1,12 @@
 /* @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
 import { Tree, useContentTree } from './common'
 
@@ -23,21 +23,16 @@ const ContentTree = ({
   style,
   target,
   selectors,
+  color,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const contentTree = useContentTree(target, selectors)
 
   return (
     <div
       id={id}
       className={[
-
         baseClassName,
-
         componentClassName,
         userClassName,
       ]
@@ -46,7 +41,7 @@ const ContentTree = ({
       style={style}
       // {...otherProps}
     >
-      <Tree tree={contentTree} />
+      <Tree color={color} tree={contentTree} />
     </div>
   )
 }
@@ -79,6 +74,11 @@ ContentTree.propTypes = {
     PropTypes.func,
     PropTypes.shape({ current: PropTypes.node }),
   ]),
+
+  /**
+   * The color for the tree.
+   */
+  color:PropTypes.string,
 }
 
 ContentTree.defaultProps = {

package/src/ui/a/ContentTree/common/Tree/Tree.jsx

@@ -7,6 +7,8 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import { Card } from 'ui'
+
 // Local Definitions
 
 import useFirstVisibleNode from '../useFirstVisibleNode'
@@ -24,6 +26,7 @@ const Tree = ({
   style,
   tree,
   displayDepth,
+  color,
   // ...otherProps
 }) => {
   // The nodeIds to be used to get the first visible node
@@ -80,23 +83,26 @@ const Tree = ({
     [tree],
   )
 
-  return (
-    <ul
+  return ContentTree.length ? (
+    <Card
       id={id}
       className={[
-
         baseClassName,
-
         componentClassName,
         userClassName,
+        color && `x-${color}`,
       ]
         .filter((e) => e)
         .join(' ')}
       style={style}
     >
-      {ContentTree}
-    </ul>
-  )
+      <Card.Section>
+        <ul>
+          {ContentTree}
+        </ul>
+      </Card.Section>
+    </Card>
+  ) : null
 }
 Tree.propTypes = {
   /**
@@ -129,9 +135,15 @@ Tree.propTypes = {
    * The levels of the tree to display.
    */
   displayDepth:PropTypes.number,
+
+  /**
+   * The color of the tree.
+   */
+  color:PropTypes.string,
 }
 
 Tree.defaultProps = {
+  color       :'interactive',
   displayDepth:4,
 }
 

package/src/ui/a/ContentTree/styles.scss

@@ -1,23 +1,48 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable selector-max-compound-selectors -- exception */
 
 @use "@pareto-engineering/bem";
 
+$default-dot-size: .5em;
 $default-margin: 1em;
 $default-padding: 1em;
 
 .#{bem.$base}.content-tree {
-  ul {
-    list-style: none;
-  }
-
-  .#{bem.$base}.tree {
-    padding: 0;
+  > .#{bem.$base}.tree {
     position: sticky;
-    top: 0;
+    top: var(--theme-default-header-height-offset);
+
+    ul {
+      list-style: none;
+      padding: 0;
+
+      &:first-child > li > p {
+        margin-top: 0;
+      }
+
+      &:last-child > li > p {
+        margin-bottom: 0;
+      }
+
+      > li > p > a {
+        color: var(--paragraph);
+        text-decoration: none;
+      }
+    }
 
     .#{bem.$modifier-active} {
-      color: var(--main2);
-      transition: color .2s;
+      font-weight: 700;
+
+      &::before {
+        background: var(--x);
+        border-radius: 50%;
+        content: "";
+        display: inline-block;
+        height: $default-dot-size;
+        margin-right: $default-margin;
+        text-align: center;
+        width: $default-dot-size;
+      }
     }
 
     li:not(:last-child) {
@@ -29,5 +54,3 @@ $default-padding: 1em;
     }
   }
 }
-
-

package/src/ui/a/Conversation/Conversation.jsx

@@ -1,12 +1,14 @@
 /* @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 { Card } from 'ui'
+
+import './styles.scss'
+
 // Local Definitions
 
 import { Message } from './common'
@@ -24,43 +26,36 @@ const Conversation = ({
   id,
   className:userClassName,
   style,
-  backgroundColor,
   ourColor,
   theirColor,
   children,
-  hasTriangle,
+  backgroundColor,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <ConversationContext.Provider
-      value={{
-        ourColor,
-        theirColor,
-      }}
+}) => (
+  <ConversationContext.Provider
+    value={{
+      ourColor,
+      theirColor,
+    }}
+  >
+    <Card
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `y-${backgroundColor}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
     >
-      <div
-        id={id}
-        className={[
-          baseClassName,
-          componentClassName,
-          userClassName,
-          hasTriangle && 'has-triangle',
-          `y-${backgroundColor}`,
-          'u1',
-        ]
-          .filter((e) => e)
-          .join(' ')}
-        style={style}
-      >
+      <Card.Section>
         {children}
-      </div>
-    </ConversationContext.Provider>
-  )
-}
+      </Card.Section>
+    </Card>
+  </ConversationContext.Provider>
+)
 
 Conversation.propTypes = {
   /**
@@ -88,26 +83,21 @@ Conversation.propTypes = {
    */
   theirColor:PropTypes.string,
 
-  /**
-   * The component background color
-   */
-  backgroundColor:PropTypes.string,
   /**
    *  The children JSX
    */
-  children       :PropTypes.node,
+  children:PropTypes.node,
 
   /**
-   * whether to add triangle to bubble chats
+   * The background color
    */
-  hasTriangle:PropTypes.bool,
+  backgroundColor:PropTypes.string,
 }
 
 Conversation.defaultProps = {
-  backgroundColor:'background2',
-  ourColor       :'background1',
-  theirColor     :'background1',
-  hasTriangle    :false,
+  ourColor       :'main',
+  theirColor     :'main2',
+  backgroundColor:'background-near',
 }
 
 Conversation.Message = Message