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

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

@@ -0,0 +1,184 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { EditorView } from '@codemirror/view'
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { tags } from '@lezer/highlight'
+
+// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
+const chalky = '#e5c07b'
+const coral = '#e06c75'
+const cyan = '#56b6c2'
+const invalid = '#ffffff'
+const ivory = '#abb2bf'
+const stone = '#7d8799' // Brightened compared to original to increase contrast
+const malibu = '#61afef'
+const sage = '#98c379'
+const whiskey = '#d19a66'
+const violet = '#c678dd'
+const darkBackground = '#21252b'
+const highlightBackground = '#2c313a'
+const background = '#282c34'
+const tooltipBackground = '#353a42'
+const selection = '#3E4451'
+const cursor = '#528bff'
+/**
+The colors used in the theme, as CSS color strings.
+*/
+// const color = {
+//     chalky,
+//     coral,
+//     cyan,
+//     invalid,
+//     ivory,
+//     stone,
+//     malibu,
+//     sage,
+//     whiskey,
+//     violet,
+//     darkBackground,
+//     highlightBackground,
+//     background,
+//     tooltipBackground,
+//     selection,
+//     cursor
+// };
+/**
+The editor theme styles for One Dark.
+*/
+const oneDarkTheme = /* @__PURE__ */EditorView.theme({
+  '&':{
+    color          :ivory,
+    backgroundColor:background,
+  },
+  '.cm-content':{
+    caretColor:cursor,
+  },
+  '.cm-cursor, .cm-dropCursor'                                                                                                :{ borderLeftColor: cursor },
+  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':{ backgroundColor: selection },
+  '.cm-panels'                                                                                                                :{ backgroundColor: darkBackground, color: ivory },
+  '.cm-panels.cm-panels-top'                                                                                                  :{ borderBottom: '2px solid black' },
+  '.cm-panels.cm-panels-bottom'                                                                                               :{ borderTop: '2px solid black' },
+  '.cm-searchMatch'                                                                                                           :{
+    backgroundColor:'#72a1ff59',
+    outline        :'1px solid #457dff',
+  },
+  '.cm-searchMatch.cm-searchMatch-selected':{
+    backgroundColor:'#6199ff2f',
+  },
+  '.cm-activeLine'                                                       :{ backgroundColor: '#6699ff0b' },
+  '.cm-selectionMatch'                                                   :{ backgroundColor: '#aafe661a' },
+  '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket':{
+    backgroundColor:'#bad0f847',
+  },
+  '.cm-gutters':{
+    backgroundColor:background,
+    color          :stone,
+    border         :'none',
+  },
+  '.cm-activeLineGutter':{
+    backgroundColor:highlightBackground,
+  },
+  '.cm-foldPlaceholder':{
+    backgroundColor:'transparent',
+    border         :'none',
+    color          :'#ddd',
+  },
+  '.cm-tooltip':{
+    border         :'none',
+    backgroundColor:tooltipBackground,
+  },
+  '.cm-tooltip .cm-tooltip-arrow:before':{
+    borderTopColor   :'transparent',
+    borderBottomColor:'transparent',
+  },
+  '.cm-tooltip .cm-tooltip-arrow:after':{
+    borderTopColor   :tooltipBackground,
+    borderBottomColor:tooltipBackground,
+  },
+  '.cm-tooltip-autocomplete':{
+    '& > ul > li[aria-selected]':{
+      backgroundColor:highlightBackground,
+      color          :ivory,
+    },
+  },
+}, { dark: true })
+/**
+The highlighting style for code in the One Dark theme.
+*/
+const oneDarkHighlightStyle = /* @__PURE__ */HighlightStyle.define([
+  {
+    tag  :tags.keyword,
+    color:violet,
+  },
+  {
+    tag  :[tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
+    color:coral,
+  },
+  {
+    tag  :[/* @__PURE__ */tags.function(tags.variableName), tags.labelName],
+    color:malibu,
+  },
+  {
+    tag:[tags.color, /* @__PURE__ */tags.constant(tags.name), /* @__PURE__ */tags.standard(
+      tags.name)],
+    color:whiskey,
+  },
+  {
+    tag  :[/* @__PURE__ */tags.definition(tags.name), tags.separator],
+    color:ivory,
+  },
+  {
+    tag:[tags.typeName, tags.className, tags.number, tags.changed,
+      tags.annotation, tags.modifier, tags.self, tags.namespace],
+    color:chalky,
+  },
+  {
+    tag:[tags.operator, tags.operatorKeyword, tags.url,
+      tags.escape, tags.regexp, tags.link, /* @__PURE__ */tags.special(tags.string)],
+    color:cyan,
+  },
+  {
+    tag  :[tags.meta, tags.comment],
+    color:stone,
+  },
+  {
+    tag       :tags.strong,
+    fontWeight:'bold',
+  },
+  {
+    tag      :tags.emphasis,
+    fontStyle:'italic',
+  },
+  {
+    tag           :tags.strikethrough,
+    textDecoration:'line-through',
+  },
+  {
+    tag           :tags.link,
+    color         :stone,
+    textDecoration:'underline',
+  },
+  {
+    tag       :tags.heading,
+    fontWeight:'bold',
+    color     :coral,
+  },
+  {
+    tag  :[tags.atom, tags.bool, /* @__PURE__ */tags.special(tags.variableName)],
+    color:whiskey,
+  },
+  {
+    tag  :[tags.processingInstruction, tags.string, tags.inserted],
+    color:sage,
+  },
+  {
+    tag  :tags.invalid,
+    color:invalid,
+  },
+])
+/**
+Extension to enable the One Dark theme (both the editor theme and
+the highlight style).
+*/
+const oneDark = [oneDarkTheme, /* @__PURE__ */syntaxHighlighting(oneDarkHighlightStyle)]
+
+export default oneDark

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

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

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

@@ -0,0 +1,17 @@
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.code-editor {
+  border-radius: 1em;
+  height: var(--height);
+  overflow: auto;
+
+  > .cm-editor {
+    height: 100%;
+
+    .cm-gutters {
+      display: flex;
+      justify-content: flex-end;
+      width: var(--gutter-width);
+    }
+  }
+}

package/src/ui/a/index.js

@@ -25,3 +25,5 @@ export { AnimatedGradient } from './AnimatedGradient'
 export { TextSteps } from './TextSteps'
 export { Removable } from './Removable'
 export { ToggleSwitch } from './ToggleSwitch'
+export { XMLEditor } from './XMLEditor'
+export { LexicalPreview } from './LexicalPreview'

package/src/ui/b/ExpandableLexicalPreview/ExpandableLexicalPreview.jsx

@@ -0,0 +1,157 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+/* eslint-disable import/no-extraneous-dependencies -- required here */
+import * as React from 'react'
+import { useState, useMemo } 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 { Button } from '@pareto-engineering/design-system'
+import './styles.scss'
+import { ExpandButton } from './common'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+const componentClassName = 'expandable-lexical-preview'
+
+/**
+ * This is the component description.
+ */
+const ExpandableLexicalPreview = ({
+  id,
+  className:userClassName,
+  style,
+  nodes,
+  color,
+  resize,
+  title,
+  // ...otherProps
+}) => {
+  const initialConfig = {
+    nameSpace  :id,
+    editable   :false,
+    editorState:nodes,
+    theme      :{
+      text:{
+        italic       :'italic',
+        strikethrough:'strikethrough',
+        underline    :'underlined',
+      },
+    },
+    nodes:[
+      AutoLinkNode,
+      LinkNode,
+      ListNode,
+      ListItemNode,
+    ],
+  }
+
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const handleButtonClick = () => {
+    setIsExpanded(!isExpanded)
+  }
+
+  const Content = useMemo(() => (
+    <div className="lexical-content">
+      <RichTextPlugin
+        contentEditable={(
+          <ContentEditable
+            id={id}
+            className="content-editable"
+          />
+        )}
+      />
+      <ExpandButton
+        title={title}
+        onResolve={handleButtonClick}
+      />
+    </div>
+  ), [id])
+
+  return (
+    <LexicalComposer
+      initialConfig={initialConfig}
+    >
+      <div
+        id={id}
+        className={[
+          baseClassName,
+          componentClassName,
+          userClassName,
+          `y-${color}`,
+          isExpanded && 'collapsed',
+        ]
+          .filter((e) => e)
+          .join(' ')}
+        style={{
+          '--resize':resize,
+          ...style,
+        }}
+      >
+        {typeof title === 'string' ? <p className="title h2">{title}</p> : title}
+        {isExpanded && (
+          <Button
+            onClick={handleButtonClick}
+            color="background-far"
+            isCompact
+          >
+            <span className="ai-icon c-x x-paragraph">
+              C
+            </span>
+          </Button>
+        )}
+        {!isExpanded && Content}
+      </div>
+    </LexicalComposer>
+  )
+}
+
+ExpandableLexicalPreview.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,
+
+  /**
+   * The resize property of the textarea
+   */
+  resize:PropTypes.string,
+
+  /**
+   * The title for the preview.
+   */
+  title:PropTypes.string,
+}
+
+ExpandableLexicalPreview.defaultProps = {
+  color :'paragraph',
+  resize:'vertical',
+}
+
+export default ExpandableLexicalPreview

package/src/ui/b/ExpandableLexicalPreview/common/ExpandButton/ExpandButton.jsx

@@ -0,0 +1,123 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+/* eslint-disable import/no-extraneous-dependencies -- required here */
+import * as React from 'react'
+import { $generateHtmlFromNodes } from '@lexical/html'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+
+import PropTypes from 'prop-types'
+import styleNames from '@pareto-engineering/bem/exports'
+import { Button } from '@pareto-engineering/design-system'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+const componentClassName = 'expand-button'
+
+/**
+ * This is the component description.
+ */
+const ExpandButton = ({
+  id,
+  className: userClassName,
+  style,
+  onResolve,
+  title,
+  // ...otherProps
+}) => {
+  const [editor] = useLexicalComposerContext()
+
+  return (
+    <Button
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        'ai-icon',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      color="background-far"
+      isCompact
+      onClick={() => {
+        editor.getEditorState().read(() => {
+          const rawHtml = $generateHtmlFromNodes(editor)
+          const preview = window.open('', '_blank', 'width=600,height=600')
+          preview.document.write(
+            `<html>
+            <title>${title || 'Preview'}</title>
+            <style>
+              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: #abadb3;
+              }
+            </style>
+            <body>
+            <style></style>
+            ${rawHtml}
+            <button onclick="window.close()">Close Preview</button>
+            </body></html>`,
+          )
+        })
+        onResolve()
+      }}
+    >
+      D
+    </Button>
+
+  )
+}
+
+ExpandButton.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),
+}
+
+ExpandButton.defaultProps = {
+  // color: 'paragraph',
+  // resize: 'vertical',
+}
+
+export default ExpandButton

package/src/ui/b/ExpandableLexicalPreview/common/ExpandButton/index.js

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

package/src/ui/b/ExpandableLexicalPreview/common/index.js

@@ -0,0 +1 @@
+export { ExpandButton } from './ExpandButton'

package/src/ui/b/ExpandableLexicalPreview/index.js

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

package/src/ui/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/src/ui/b/index.js

@@ -5,3 +5,4 @@ export { SocialMediaButton } from './SocialMediaButton'
 export { ThemeSelector } from './ThemeSelector'
 export { Title } from './Title'
 export { Card } from './Card'
+export { ExpandableLexicalPreview } from './ExpandableLexicalPreview'

package/src/ui/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/src/ui/f/fields/EditorInput/EditorInput.jsx

@@ -20,7 +20,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'
 
@@ -45,6 +45,7 @@ const EditorInput = ({
   description,
   disabled,
   showDebugger,
+  stopPropagationKeys,
   // ...otherProps
 }) => {
   const formik = useFormikContext()
@@ -158,8 +159,11 @@ const EditorInput = ({
         <ListPlugin />
         <TabIndentationPlugin />
         <HistoryPlugin />
+        { stopPropagationKeys && (
+          <StopPropagationPlugin stopPropagationKeys={stopPropagationKeys} />
+        )}
         <FormDescription className="s-1" description={description} name={name} />
-        { showDebugger && <TreeViewPlugin />}
+        { showDebugger && <TreeViewPlugin /> }
       </div>
     </LexicalComposer>
   )
@@ -230,6 +234,16 @@ EditorInput.propTypes = {
    * The resize property of the text area
    */
   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 = {

package/src/ui/f/fields/EditorInput/common/StopPropagationPlugin.jsx

@@ -0,0 +1,29 @@
+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/src/ui/f/fields/EditorInput/common/index.jsx

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