@pareto-engineering/design-system 4.0.0-alpha.78 → 4.0.0-alpha.81

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

@@ -1,109 +0,0 @@
-/* @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

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

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

@@ -1,46 +0,0 @@
-/* @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/b/ExpandableLexicalPreview/ExpandableLexicalPreview.jsx

@@ -1,157 +0,0 @@
-/* @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 '../Button'
-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

@@ -1,123 +0,0 @@
-/* @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 '../../../Button'
-
-// 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

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

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

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

package/src/ui/b/ExpandableLexicalPreview/styles.scss

@@ -1,84 +0,0 @@
-/* @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;
-    }
-  }
-}