@pareto-engineering/design-system 4.0.0-alpha.70 → 4.0.0-alpha.72

package/dist/es/b/ExpandableLexicalPreview/styles.scss

@@ -0,0 +1,84 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable max-nesting-depth -- required */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+.#{bem.$base}.expandable-lexical-preview {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  width: 100%;
+
+  &.collapsed {
+    flex-direction: row;
+  }
+
+  > .title {
+    margin: 0;
+  }
+
+
+  > .#{bem.$base}.button {
+    align-items: center;
+    border: 1px solid var(--outline-inputs);
+    display: flex;
+  }
+
+  > .lexical-content {
+    position: relative;
+
+    > .content-editable {
+      background: var(--background-inputs);
+      border: 1px solid var(--outline-inputs);
+      border-radius: var(--theme-default-border-radius);
+      color: var(--y);
+      overflow: auto;
+      padding: var(--gap);
+      resize: var(--resize);
+
+      li:has(ol, ul) {
+        list-style-type: none;
+      }
+
+      p,
+      span,
+      strong,
+      em,
+      li {
+        &.underlined {
+          text-decoration: underline;
+
+          &.strikethrough {
+            text-decoration: underline line-through;
+          }
+        }
+
+        &.strikethrough {
+          text-decoration: line-through;
+        }
+
+        &.italic {
+          font-style: italic;
+        }
+      }
+
+      :first-child {
+        margin-top: 0;
+      }
+
+      &::placeholder {
+        color: var(--metadata);
+      }
+    }
+
+    > .#{bem.$base}.expand-button {
+      border: 1px solid var(--outline-inputs);
+      position: absolute;
+      right: 1em;
+      top: 1em;
+    }
+  }
+}

package/dist/es/b/index.js

@@ -4,4 +4,5 @@ export { Page } from "./Page";
 export { SocialMediaButton } from "./SocialMediaButton";
 export { ThemeSelector } from "./ThemeSelector";
 export { Title } from "./Title";
-export { Card } from "./Card";
+export { Card } from "./Card";
+export { ExpandableLexicalPreview } from "./ExpandableLexicalPreview";

package/dist/es/c/index.js

@@ -1,4 +1,3 @@
-export { ContentSlides, useContentSlides } from "./ContentSlides";
 export { Shortener } from "./Shortener";
 export { SocialMediaShareButton } from "./SocialMediaShareButton";
 export { Modal } from "./Modal";

package/dist/es/f/fields/EditorInput/EditorInput.js

@@ -19,7 +19,7 @@ import styleNames from '@pareto-engineering/bem/exports';
 // Local Definitions
 
 import { FormLabel, FormDescription } from "../../common";
-import { Toolbar, TreeViewPlugin } from "./common";
+import { Toolbar, TreeViewPlugin, StopPropagationPlugin } from "./common";
 import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'editor-input';
@@ -41,7 +41,8 @@ const EditorInput = ({
   labelColor,
   description,
   disabled,
-  showDebugger
+  showDebugger,
+  stopPropagationKeys
   // ...otherProps
 }) => {
   const formik = useFormikContext();
@@ -120,7 +121,9 @@ const EditorInput = ({
     })
   }), /*#__PURE__*/React.createElement(OnChangePlugin, {
     onChange: onChange
-  }), /*#__PURE__*/React.createElement(LinkPlugin, null), /*#__PURE__*/React.createElement(ListPlugin, null), /*#__PURE__*/React.createElement(TabIndentationPlugin, null), /*#__PURE__*/React.createElement(HistoryPlugin, null), /*#__PURE__*/React.createElement(FormDescription, {
+  }), /*#__PURE__*/React.createElement(LinkPlugin, null), /*#__PURE__*/React.createElement(ListPlugin, null), /*#__PURE__*/React.createElement(TabIndentationPlugin, null), /*#__PURE__*/React.createElement(HistoryPlugin, null), stopPropagationKeys && /*#__PURE__*/React.createElement(StopPropagationPlugin, {
+    stopPropagationKeys: stopPropagationKeys
+  }), /*#__PURE__*/React.createElement(FormDescription, {
     className: "s-1",
     description: description,
     name: name
@@ -179,7 +182,15 @@ EditorInput.propTypes = {
   /**
    * The resize property of the text area
    */
-  resize: PropTypes.oneOf(['none', 'both', 'horizontal', 'vertical'])
+  resize: PropTypes.oneOf(['none', 'both', 'horizontal', 'vertical']),
+  /**
+   * Whether to show the debugger or not
+   */
+  showDebugger: PropTypes.bool,
+  /**
+   * Map to stop propagation of the given keys
+   */
+  stopPropagationKeys: PropTypes.arrayOf(PropTypes.string)
 };
 EditorInput.defaultProps = {
   rows: 10,

package/dist/es/f/fields/EditorInput/common/StopPropagationPlugin.js

@@ -0,0 +1,23 @@
+import { useInsertionEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+const StopPropagationPlugin = ({
+  stopPropagationKeys
+}) => {
+  const [editor] = useLexicalComposerContext();
+  useInsertionEffect(() => {
+    const onKeyDown = e => {
+      if (stopPropagationKeys?.includes(e.key)) {
+        e.stopPropagation();
+      }
+    };
+    return editor.registerRootListener((rootElement, prevRootElement) => {
+      if (prevRootElement !== null) {
+        prevRootElement.removeEventListener('keydown', onKeyDown);
+      }
+      if (rootElement !== null) {
+        rootElement.addEventListener('keydown', onKeyDown);
+      }
+    });
+  }, [editor]);
+};
+export default StopPropagationPlugin;

package/dist/es/f/fields/EditorInput/common/index.js

@@ -1,2 +1,3 @@
 export { default as Toolbar } from "./Toolbar";
-export { default as TreeViewPlugin } from "./TreeViewPlugin";
+export { default as TreeViewPlugin } from "./TreeViewPlugin";
+export { default as StopPropagationPlugin } from "./StopPropagationPlugin";

package/dist/es/index.js

@@ -1,4 +1,3 @@
-export * from "./r"; // Router Extensions
 export * from "./a";
 export * from "./b";
 export * from "./c";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.70",
+  "version": "4.0.0-alpha.72",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -52,10 +52,10 @@
   "dependencies": {
     "@codemirror/lang-xml": "^6.0.2",
     "@lexical/react": "^0.11.3",
-    "@pareto-engineering/assets": "^4.0.0-alpha.70",
+    "@pareto-engineering/assets": "^4.0.0-alpha.72",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
-    "@pareto-engineering/styles": "^4.0.0-alpha.70",
-    "@pareto-engineering/utils": "^4.0.0-alpha.46",
+    "@pareto-engineering/styles": "^4.0.0-alpha.72",
+    "@pareto-engineering/utils": "^4.0.0-alpha.72",
     "codemirror": "^6.0.1",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
@@ -73,5 +73,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "dd5504b9e521370b6151a796a429c268ab123be1"
+  "gitHead": "68d099be75ce95a8ff22f53015d1a722af04e8b5"
 }

package/src/stories/a/LexicalPreview.stories.jsx

@@ -0,0 +1,28 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { LexicalPreview } from 'ui'
+
+export default {
+  title        :'a/LexicalPreview',
+  component    :LexicalPreview,
+  subcomponents:{
+    // Item:TextareaInput.Item
+  },
+  decorators:[],
+  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) => (
+  <LexicalPreview {...args} />
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  nodes,
+}

package/src/stories/a/ProgressBar.stories.jsx

@@ -48,7 +48,7 @@ export const Base = () => {
 export const Color = Template.bind({})
 Color.args = {
   progress:70,
-  color   :'main1',
+  color   :'main',
 }
 
 export const Height = Template.bind({})

package/src/stories/b/ExpandableLexicalPreview.stories.jsx

@@ -0,0 +1,29 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { ExpandableLexicalPreview } from 'ui'
+
+export default {
+  title        :'b/ExpandableLexicalPreview',
+  component    :ExpandableLexicalPreview,
+  subcomponents:{
+    // Item:TextareaInput.Item
+  },
+  decorators:[],
+  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,
+  title:'Task Instructions',
+}

package/src/stories/colors.js

@@ -12,6 +12,10 @@ const MODALS = [
   'purple',
   'yellow',
   'seagreen',
+  'deepblue',
+  'light-blue',
+  'light-purple',
+  'light-seagreen',
 ]
 
 const UI = [

package/src/ui/a/LexicalPreview/LexicalPreview.jsx

@@ -0,0 +1,109 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+/* eslint-disable import/no-extraneous-dependencies -- required here */
+import * as React from 'react'
+import { LexicalComposer } from '@lexical/react/LexicalComposer'
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
+import { ContentEditable } from '@lexical/react/LexicalContentEditable'
+import { AutoLinkNode, LinkNode } from '@lexical/link'
+import { ListItemNode, ListNode } from '@lexical/list'
+
+import PropTypes from 'prop-types'
+import styleNames from '@pareto-engineering/bem/exports'
+import './styles.scss'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+const componentClassName = 'lexical-preview'
+
+/**
+ * This is the component description.
+ */
+const LexicalPreview = ({
+  id,
+  className:userClassName,
+  style,
+  nodes,
+  color,
+  // ...otherProps
+}) => {
+  const initialConfig = {
+    nameSpace  :id,
+    editable   :false,
+    editorState:nodes,
+    theme      :{
+      text:{
+        italic       :'italic',
+        strikethrough:'strikethrough',
+        underline    :'underlined',
+      },
+    },
+    nodes:[
+      AutoLinkNode,
+      LinkNode,
+      ListNode,
+      ListItemNode,
+    ],
+  }
+
+  return (
+    <LexicalComposer
+      initialConfig={initialConfig}
+    >
+      <div
+        id={id}
+        className={[
+          baseClassName,
+          componentClassName,
+          userClassName,
+          `y-${color}`,
+        ]
+          .filter((e) => e)
+          .join(' ')}
+        style={style}
+      >
+        <RichTextPlugin
+          contentEditable={(
+            <ContentEditable
+              id={id}
+              className="content-editable"
+            />
+          )}
+        />
+      </div>
+    </LexicalComposer>
+  )
+}
+
+LexicalPreview.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),
+
+  /**
+   * Color of the text
+   */
+  color:PropTypes.string,
+
+  /**
+   * The nodes to render in the form of a json string
+   */
+  nodes:PropTypes.string,
+}
+
+LexicalPreview.defaultProps = {
+  color:'paragraph',
+}
+
+export default LexicalPreview

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

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

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

@@ -0,0 +1,46 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+.#{bem.$base}.lexical-preview {
+  > .content-editable {
+    color: var(--y);
+    overflow: auto;
+
+    li:has(ol, ul) {
+      list-style-type: none;
+    }
+
+    p,
+    span,
+    strong,
+    em,
+    li {
+      &.underlined {
+        text-decoration: underline;
+
+        &.strikethrough {
+          text-decoration: underline line-through;
+        }
+      }
+
+      &.strikethrough {
+        text-decoration: line-through;
+      }
+
+      &.italic {
+        font-style: italic;
+      }
+    }
+
+    :first-child {
+      margin-top: 0;
+    }
+
+    &::placeholder {
+      color: var(--metadata);
+    }
+  }
+}

package/src/ui/a/People/common/Person/Person.jsx

@@ -23,28 +23,40 @@ const Person = ({
   role,
   color,
   // ...otherProps
-}) => (
-  <div
-    id={id}
-    className={[
+}) => {
+  const handleImageSrcError = (e) => {
+    e.target.onerror = null
+    e.target.src = '/default-avatar.svg'
+  }
 
-      baseClassName,
+  return (
+    <div
+      id={id}
+      className={[
 
-      componentClassName,
-      userClassName,
-      `y-${color}`,
-    ]
-      .filter((e) => e)
-      .join(' ')}
-    style={style}
-  >
-    <img className="image v50 mr-v" src={image} alt={`${name}, ${role}`} />
-    <div className="details">
-      {name && <p className="name">{name}</p>}
-      { role && <p className="role">{role}</p>}
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        `y-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <img
+        className="image v50 mr-v"
+        src={image || '/default-avatar.svg'}
+        alt={`${name}, ${role}`}
+        onError={handleImageSrcError}
+      />
+      <div className="details">
+        {name && <p className="name">{name}</p>}
+        { role && <p className="role">{role}</p>}
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 Person.propTypes = {
   /**

package/src/ui/a/ProgressBar/ProgressBar.jsx

@@ -24,6 +24,7 @@ const ProgressBar = ({
   color,
   progress,
   height,
+  rounded,
   // ...otherProps
 }) => (
   <div
@@ -36,6 +37,7 @@ const ProgressBar = ({
       attached && styleNames.modifierAttached,
       color && `x-${color}`,
       userClassName,
+      rounded && 'rounded',
     ]
       .filter((e) => e)
       .join(' ')}

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

@@ -5,9 +5,11 @@
 $default-height:var(--height, 1em);
 $default-border:none;//2px solid var(--grid);
 $default-transition-duration:.5s;
-$default-color:var(--x, var(--main1));
+$default-color:var(--x, var(--main));
+$default-border-radius:var(--theme-border-radius, 1.875rem);
 
 .#{bem.$base}.progress-bar {
+  background-color: var(--progress-bar-background-color);
   border: $default-border;
   height: $default-height;
   position: relative;
@@ -28,6 +30,14 @@ $default-color:var(--x, var(--main1));
     z-index: 1;
   }
 
+  &.rounded {
+    border-radius: $default-border-radius;
+
+    &::after {
+      border-radius: $default-border-radius;
+    }
+  }
+
   &.#{bem.$modifier-attached} {
     border: unset;
     border-bottom: $default-border;

package/src/ui/a/XMLEditor/XMLEditor.jsx

@@ -22,11 +22,10 @@ import {
 
 import {
   defaultKeymap,
-  indentWithTab,
 } from '@codemirror/commands'
 
 import {
-  // indentOnInput,
+  indentOnInput,
   bracketMatching,
   foldGutter,
 } from '@codemirror/language'
@@ -57,6 +56,7 @@ const XMLEditor = ({
   gutterWidth,
   config,
   onChange,
+  stopPropagationKeys,
 }) => {
   const editorRef = useRef()
 
@@ -64,9 +64,8 @@ const XMLEditor = ({
     const startState = EditorState.create({
       doc       :config,
       extensions:[
-        keymap.of([defaultKeymap, indentWithTab]),
-        // TOFIX: Indent with tab prevents indentOnInout from working.
-        // indentOnInput(),
+        keymap.of(defaultKeymap),
+        indentOnInput(),
         lineNumbers(),
         bracketMatching(),
         foldGutter(),
@@ -84,6 +83,13 @@ const XMLEditor = ({
           onChange(view)
           // view.state.doc.toString() to receive the current content in the editor.
         }),
+        EditorView.domEventHandlers({
+          keydown(e) {
+            if (stopPropagationKeys?.includes(e.key)) {
+              e.stopPropagation()
+            }
+          },
+        }),
       ],
     })
 
@@ -157,6 +163,11 @@ XMLEditor.propTypes = {
    * The width of the gutter.
    */
   gutterWidth:PropTypes.string,
+
+  /**
+   * The keys to stop propagation on.
+   */
+  stopPropagationKeys:PropTypes.arrayOf(PropTypes.string),
 }
 
 XMLEditor.defaultProps = {

package/src/ui/a/index.js

@@ -26,3 +26,4 @@ export { TextSteps } from './TextSteps'
 export { Removable } from './Removable'
 export { ToggleSwitch } from './ToggleSwitch'
 export { XMLEditor } from './XMLEditor'
+export { LexicalPreview } from './LexicalPreview'