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

package/src/stories/g/DragAndDrop.stories.jsx

@@ -0,0 +1,114 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useRef } from 'react'
+
+import { TextInput, DragAndDrop, FormDebugger } from 'ui'
+
+import { Formik, Form } from 'formik'
+
+export default {
+  title        :'g/DragAndDrop',
+  component    :DragAndDrop,
+  subcomponents:{
+    // Item:DragAndDrop.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+const DummyContent = ({ children }) => (
+  <div
+    style={{
+      padding        :'1rem',
+      backgroundColor:'white',
+      border         :'1px solid black',
+    }}
+  >
+    {children}
+  </div>
+)
+
+export const Base = {
+  args:{
+    items:Array(8).fill().map((_, index) => ({
+      disabled:index === 0,
+      Content :(
+        <DummyContent>
+          Item
+          {index + 1}
+        </DummyContent>
+      ),
+      key:`Item ${index + 1}`,
+    })),
+  },
+}
+
+const DummyContentWithInput = ({ index }) => (
+  <div
+    style={{
+      display   :'flex',
+      alignItems:'center',
+      width     :'100%',
+      gap       :'var(--gap)',
+    }}
+  >
+    <span className="ai-icon">H</span>
+    <div
+      style={{
+        borderBottom:'1px solid var(--ui-lines)',
+        padding     :'calc(var(--theme-default-padding) / 2)',
+        display     :'flex',
+        alignItems  :'center',
+        width       :'100%',
+        gap         :'var(--gap)',
+      }}
+    >
+      <p
+        style={{
+          margin:'0',
+        }}
+      >
+        Input
+        {index + 1}
+      </p>
+      <TextInput name={`input-${index + 1}`} />
+    </div>
+  </div>
+)
+
+export const WithFormikInputs = {
+  render:({ items }) => {
+    const formikRef = useRef()
+
+    const handleReorder = (orderedItems) => {
+      const { values, setFieldValue } = formikRef.current || {}
+      const orderedInputValues = orderedItems.map(({ identifier }) => values?.[identifier])
+
+      setFieldValue('items', orderedInputValues)
+    }
+    return (
+      <Formik
+        initialValues={{ items: [] }}
+        innerRef={formikRef}
+      >
+        <Form>
+          <DragAndDrop onOrderChange={handleReorder} items={items} />
+          <FormDebugger />
+        </Form>
+      </Formik>
+    )
+  },
+  args:{
+    items:Array(8).fill().map((_, index) => ({
+      Content:(
+        <DummyContentWithInput index={index} />
+      ),
+      identifier:`input-${index + 1}`,
+    })),
+  },
+}

package/src/stories/g/ExpandableLexicalPreview.stories.jsx

@@ -0,0 +1,37 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { ExpandableLexicalPreview, AppContextProvider } from 'ui'
+
+export default {
+  title        :'g/ExpandableLexicalPreview',
+  component    :ExpandableLexicalPreview,
+  subcomponents:{
+    // Item:TextareaInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <AppContextProvider>
+        { storyfn() }
+      </AppContextProvider>
+    ),
+  ],
+  argTypes:{
+    color:{ control: 'text' },
+  },
+}
+
+// eslint-disable-next-line no-useless-escape
+const nodes = '{\"root\":{\"children\":[{\"children\":[{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is bold.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":2,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is italic.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":8,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is underlined.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":3},{\"children\":[{\"children\":[{\"children\":[{\"detail\":0,\"format\":4,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is struck.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":1,\"type\":\"listitem\",\"version\":1,\"value\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":4}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}'
+
+const Template = (args) => (
+  <ExpandableLexicalPreview {...args} />
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  nodes,
+  name     :'taskDescription',
+  pageTitle:'Task Instructions',
+  header   :'Task Instructions',
+}

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;
     }
   }
 }
-
-