npm - @pareto-engineering/design-system - Versions diffs - 4.0.0-alpha.78 → 4.0.0-alpha.81 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/dist/cjs/b/ExpandableLexicalPreview/common/ExpandButton/ExpandButton.js DELETED Viewed

@@ -1,112 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _html = require("@lexical/html");
-var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-var _Button = require("../../../Button");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* @pareto-engineering/generator-front 1.0.12 */
-/* eslint-disable import/no-extraneous-dependencies -- required here */
-// Local Definitions
-const baseClassName = _exports.default.base;
-const componentClassName = 'expand-button';
-/**
- * This is the component description.
- */
-const ExpandButton = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    onResolve,
-    title
-    // ...otherProps
-  } = _ref;
-  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
-  return /*#__PURE__*/React.createElement(_Button.Button, {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, 'ai-icon'].filter(e => e).join(' '),
-    style: style,
-    color: "background-far",
-    isCompact: true,
-    onClick: () => {
-      editor.getEditorState().read(() => {
-        const rawHtml = (0, _html.$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");
-};
-ExpandButton.propTypes = {
-  /**
-     * The HTML id for this element
-     */
-  id: _propTypes.default.string,
-  /**
-     * The HTML class names for this element
-     */
-  className: _propTypes.default.string,
-  /**
-     * The React-written, css properties for this element.
-     */
-  style: _propTypes.default.objectOf(_propTypes.default.string)
-};
-ExpandButton.defaultProps = {
-  // color: 'paragraph',
-  // resize: 'vertical',
-};
-var _default = exports.default = ExpandButton;

package/dist/cjs/b/ExpandableLexicalPreview/common/ExpandButton/index.js DELETED Viewed

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ExpandButton", {
-  enumerable: true,
-  get: function () {
-    return _ExpandButton.default;
-  }
-});
-var _ExpandButton = _interopRequireDefault(require("./ExpandButton"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/b/ExpandableLexicalPreview/common/index.js DELETED Viewed

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ExpandButton", {
-  enumerable: true,
-  get: function () {
-    return _ExpandButton.ExpandButton;
-  }
-});
-var _ExpandButton = require("./ExpandButton");

package/dist/cjs/b/ExpandableLexicalPreview/styles.scss DELETED Viewed

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

package/dist/es/a/LexicalPreview/LexicalPreview.js DELETED Viewed

@@ -1,80 +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 /*#__PURE__*/React.createElement(LexicalComposer, {
-    initialConfig: initialConfig
-  }, /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement(RichTextPlugin, {
-    contentEditable: /*#__PURE__*/React.createElement(ContentEditable, {
-      id: id,
-      className: "content-editable"
-    })
-  })));
-};
-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/dist/es/a/LexicalPreview/index.js DELETED Viewed

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

package/dist/es/a/LexicalPreview/styles.scss DELETED Viewed

@@ -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/dist/es/b/ExpandableLexicalPreview/ExpandableLexicalPreview.js DELETED Viewed

@@ -1,115 +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(() => /*#__PURE__*/React.createElement("div", {
-    className: "lexical-content"
-  }, /*#__PURE__*/React.createElement(RichTextPlugin, {
-    contentEditable: /*#__PURE__*/React.createElement(ContentEditable, {
-      id: id,
-      className: "content-editable"
-    })
-  }), /*#__PURE__*/React.createElement(ExpandButton, {
-    title: title,
-    onResolve: handleButtonClick
-  })), [id]);
-  return /*#__PURE__*/React.createElement(LexicalComposer, {
-    initialConfig: initialConfig
-  }, /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${color}`, isExpanded && 'collapsed'].filter(e => e).join(' '),
-    style: {
-      '--resize': resize,
-      ...style
-    }
-  }, typeof title === 'string' ? /*#__PURE__*/React.createElement("p", {
-    className: "title h2"
-  }, title) : title, isExpanded && /*#__PURE__*/React.createElement(Button, {
-    onClick: handleButtonClick,
-    color: "background-far",
-    isCompact: true
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "ai-icon c-x x-paragraph"
-  }, "C")), !isExpanded && Content));
-};
-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/dist/es/b/ExpandableLexicalPreview/common/ExpandButton/ExpandButton.js DELETED Viewed

@@ -1,102 +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 /*#__PURE__*/React.createElement(Button, {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, 'ai-icon'].filter(e => e).join(' '),
-    style: style,
-    color: "background-far",
-    isCompact: true,
-    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");
-};
-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/dist/es/b/ExpandableLexicalPreview/common/ExpandButton/index.js DELETED Viewed

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

package/dist/es/b/ExpandableLexicalPreview/common/index.js DELETED Viewed

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

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

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

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

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