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

package/src/ui/g/ExpandableLexicalPreview/ExpandableLexicalPreview.jsx

@@ -14,13 +14,14 @@ import { EditorInput } from 'ui/f'
 
 import { Button } from 'ui/b'
 
-import { ExpandButton } from './common'
+import { NewWindowPortal } from './common'
 
 import './styles.scss'
 
 const baseClassName = styleNames.base
 
 const componentClassName = 'expandable-lexical-preview'
+
 /**
  * This is the component description.
  */
@@ -32,14 +33,16 @@ const ExpandableLexicalPreview = ({
   name,
   color,
   resize,
-  title,
+  pageTitle,
+  onBlock,
+  onOpen,
+  header,
   // ...otherProps
 }) => {
-  const [editorState, setEditorState] = useState()
-  const [isExpanded, setIsExpanded] = useState(false)
+  const [isCollapsed, setIsCollapsed] = useState(false)
 
   const handleButtonClick = () => {
-    setIsExpanded(!isExpanded)
+    setIsCollapsed(!isCollapsed)
   }
 
   return (
@@ -57,36 +60,59 @@ const ExpandableLexicalPreview = ({
           componentClassName,
           userClassName,
           `y-${color}`,
-          isExpanded && 'collapsed',
+          isCollapsed && 'collapsed',
         ]
           .filter((e) => e)
           .join(' ')}
         style={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>
+        {typeof header === 'string' ? <p className="title h2">{header}</p> : header}
+        {isCollapsed ? (
+          <>
+            <Button
+              onClick={handleButtonClick}
+              color="background-far"
+              isCompact
+            >
+              <span className="ai-icon c-x x-paragraph">
+                C
+              </span>
+            </Button>
+            <NewWindowPortal
+              pageTitle={pageTitle}
+              onBlock={() => {
+                onBlock?.()
+                setIsCollapsed(false)
+              }}
+              onOpen={() => {
+                onOpen?.()
+                setIsCollapsed(true)
+              }}
+            >
+              <EditorInput
+                name={name}
+                resize={resize}
+                disabled
+              />
+            </NewWindowPortal>
+          </>
         ) : (
           <>
             <EditorInput
               name={name}
-              setEditorState={setEditorState}
               resize={resize}
               disabled
+              id="the-bad-ass-input"
             />
-            <ExpandButton
-              title={title}
-              onResolve={handleButtonClick}
-              editorState={editorState}
-            />
+            <Button
+              id={id}
+              className="expand-button ai-icon"
+              color="background-far"
+              isCompact
+              onClick={handleButtonClick}
+            >
+              D
+            </Button>
           </>
         )}
       </div>
@@ -126,14 +152,24 @@ ExpandableLexicalPreview.propTypes = {
   resize:PropTypes.string,
 
   /**
-   * The title for the preview.
+   * The header for the preview component.
+   */
+  header:PropTypes.node,
+
+  /**
+   * The page title for the expanded preview.
    */
-  title:PropTypes.string,
+  pageTitle:PropTypes.string,
 
   /**
    * The name used to acces the nodes
    */
   name:PropTypes.string.isRequired,
+
+  /**
+   * The function to run when a new window portal can be opened
+   */
+  onBlock:PropTypes.func.isRequired,
 }
 
 ExpandableLexicalPreview.defaultProps = {

package/src/ui/g/ExpandableLexicalPreview/common/NewWindowPortal/NewWindowPortal.jsx

@@ -0,0 +1,80 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import { createPortal } from 'react-dom'
+
+import { useState, useEffect, useMemo } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+// Local Definitions
+import { useTheme } from 'ui/a'
+
+import './styles.scss'
+
+const baseClassName = styleNames.base
+
+const copyStyles = (sourceDocument, targetDocument) => {
+  Array.from(sourceDocument.querySelectorAll('link[rel="stylesheet"], style'))
+    .forEach((link) => {
+      targetDocument.head.appendChild(link.cloneNode(true))
+    })
+}
+/**
+ * This is the component description.
+ */
+const NewWindowPortal = ({
+  children, pageTitle, onBlock, onOpen,
+}) => {
+  const [newWindow, setNewWindow] = useState(null)
+  const container = useMemo(() => document.createElement('div'), [])
+  const { userTheme = 'light' } = useTheme()
+
+  useEffect(() => {
+    if (!container) return
+
+    container.classList.add(baseClassName, 'new-window-portal', `ui-${userTheme}`)
+    const newExternalWindow = window.open('', pageTitle, 'width="100%",height="100%"')
+
+    if (newExternalWindow) {
+      newExternalWindow.document.title = pageTitle
+      newExternalWindow.document.body.appendChild(container)
+      setNewWindow(newExternalWindow)
+      onOpen()
+    } else {
+      console.warn('A new window / tab could not be opened. Check your settings and/or extensions, maybe it was blocked.')
+      onBlock()
+    }
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      container.classList.remove(...container.classList)
+      newExternalWindow?.close()
+    }
+  }, [container, pageTitle, userTheme])
+
+  useEffect(() => {
+    if (newWindow) {
+      copyStyles(document, newWindow.document)
+    }
+  }, [newWindow])
+
+  return createPortal(children, container)
+}
+NewWindowPortal.propTypes = {
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   * The new window page title
+   */
+  pageTitle:PropTypes.string.isRequired,
+}
+
+NewWindowPortal.defaultProps = {
+  // someProp:false
+}
+
+export default NewWindowPortal

package/src/ui/g/ExpandableLexicalPreview/common/NewWindowPortal/index.js

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

package/src/ui/g/ExpandableLexicalPreview/common/NewWindowPortal/styles.scss

@@ -0,0 +1,9 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.new-window-portal {
+  background-color: var(--background-far);
+  height: 100%;
+  width: 100%;
+}

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

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

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -11640,16 +11640,21 @@ exports[`Storyshots a/Tooltip Base 1`] = `
   }
 >
   <div
-    aria-describedby="test-tooltip"
+    className="base tooltip x-background-cards"
   >
-    <button
-      className="base button x-main"
-      type="button"
+    <div
+      aria-describedby="test-tooltip"
+      className="tooltip-trigger-wrapper"
     >
-      Hover on me!
-    </button>
+      <button
+        className="base button x-main"
+        type="button"
+      >
+        Hover on me!
+      </button>
+    </div>
     <div
-      className="base tooltip bottom x-background-cards"
+      className="tooltip-content bottom"
       id="test-tooltip"
       role="tooltip"
     >
@@ -11668,9 +11673,6 @@ exports[`Storyshots a/Tooltip Base 1`] = `
       </div>
     </div>
   </div>
-  <p>
-    With some more content around
-  </p>
 </div>
 `;
 
@@ -11688,16 +11690,21 @@ exports[`Storyshots a/Tooltip Left 1`] = `
   }
 >
   <div
-    aria-describedby="test-tooltip"
+    className="base tooltip x-background-cards"
   >
-    <button
-      className="base button x-main"
-      type="button"
+    <div
+      aria-describedby="test-tooltip"
+      className="tooltip-trigger-wrapper"
     >
-      Hover on me!
-    </button>
+      <button
+        className="base button x-main"
+        type="button"
+      >
+        Hover on me!
+      </button>
+    </div>
     <div
-      className="base tooltip left x-background-cards"
+      className="tooltip-content left"
       id="test-tooltip"
       role="tooltip"
     >
@@ -11716,9 +11723,6 @@ exports[`Storyshots a/Tooltip Left 1`] = `
       </div>
     </div>
   </div>
-  <p>
-    With some more content around
-  </p>
 </div>
 `;
 
@@ -11736,16 +11740,21 @@ exports[`Storyshots a/Tooltip Right 1`] = `
   }
 >
   <div
-    aria-describedby="test-tooltip"
+    className="base tooltip x-background-cards"
   >
-    <button
-      className="base button x-main"
-      type="button"
+    <div
+      aria-describedby="test-tooltip"
+      className="tooltip-trigger-wrapper"
     >
-      Hover on me!
-    </button>
+      <button
+        className="base button x-main"
+        type="button"
+      >
+        Hover on me!
+      </button>
+    </div>
     <div
-      className="base tooltip right x-background-cards"
+      className="tooltip-content right"
       id="test-tooltip"
       role="tooltip"
     >
@@ -11764,9 +11773,6 @@ exports[`Storyshots a/Tooltip Right 1`] = `
       </div>
     </div>
   </div>
-  <p>
-    With some more content around
-  </p>
 </div>
 `;
 
@@ -11784,16 +11790,21 @@ exports[`Storyshots a/Tooltip Top 1`] = `
   }
 >
   <div
-    aria-describedby="test-tooltip"
+    className="base tooltip x-background-cards"
   >
-    <button
-      className="base button x-main"
-      type="button"
+    <div
+      aria-describedby="test-tooltip"
+      className="tooltip-trigger-wrapper"
     >
-      Hover on me!
-    </button>
+      <button
+        className="base button x-main"
+        type="button"
+      >
+        Hover on me!
+      </button>
+    </div>
     <div
-      className="base tooltip top x-background-cards"
+      className="tooltip-content top"
       id="test-tooltip"
       role="tooltip"
     >
@@ -11812,9 +11823,6 @@ exports[`Storyshots a/Tooltip Top 1`] = `
       </div>
     </div>
   </div>
-  <p>
-    With some more content around
-  </p>
 </div>
 `;
 
@@ -26695,9 +26703,9 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
                       className="rcp-saturation-cursor"
                       style={
                         {
-                          "backgroundColor": "rgb(0 0 0)",
+                          "backgroundColor": "rgb(255 255 255)",
                           "left": 0,
-                          "top": 200,
+                          "top": 0,
                         }
                       }
                     />
@@ -26735,7 +26743,7 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
                         className="rcp-alpha"
                         style={
                           {
-                            "background": "linear-gradient(to right, rgb(0 0 0 / 0), rgb(0 0 0 / 1)) top left / auto auto,
+                            "background": "linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 255 255 / 1)) top left / auto auto,
                       conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px
                       repeat",
                           }
@@ -26745,7 +26753,7 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
                           className="rcp-alpha-cursor"
                           style={
                             {
-                              "background": "linear-gradient(to right, rgb(0 0 0 / 1), rgb(0 0 0 / 1)) top left / auto auto,
+                              "background": "linear-gradient(to right, rgb(255 255 255 / 1), rgb(255 255 255 / 1)) top left / auto auto,
                         conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) -5px 2px / 12px 12px
                         repeat",
                               "left": 1,
@@ -27173,9 +27181,9 @@ exports[`Storyshots f/fields/EditorInput Optional 1`] = `
                       className="rcp-saturation-cursor"
                       style={
                         {
-                          "backgroundColor": "rgb(0 0 0)",
+                          "backgroundColor": "rgb(255 255 255)",
                           "left": 0,
-                          "top": 200,
+                          "top": 0,
                         }
                       }
                     />
@@ -27213,7 +27221,7 @@ exports[`Storyshots f/fields/EditorInput Optional 1`] = `
                         className="rcp-alpha"
                         style={
                           {
-                            "background": "linear-gradient(to right, rgb(0 0 0 / 0), rgb(0 0 0 / 1)) top left / auto auto,
+                            "background": "linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 255 255 / 1)) top left / auto auto,
                       conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px
                       repeat",
                           }
@@ -27223,7 +27231,7 @@ exports[`Storyshots f/fields/EditorInput Optional 1`] = `
                           className="rcp-alpha-cursor"
                           style={
                             {
-                              "background": "linear-gradient(to right, rgb(0 0 0 / 1), rgb(0 0 0 / 1)) top left / auto auto,
+                              "background": "linear-gradient(to right, rgb(255 255 255 / 1), rgb(255 255 255 / 1)) top left / auto auto,
                         conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) -5px 2px / 12px 12px
                         repeat",
                               "left": 1,
@@ -31252,6 +31260,7 @@ exports[`Storyshots g/ExpandableLexicalPreview Base 1`] = `
   </p>
   <div
     className="base editor-input y-paragraph disabled"
+    id="the-bad-ass-input"
     style={
       {
         "--resize": "vertical",
@@ -31274,7 +31283,7 @@ exports[`Storyshots g/ExpandableLexicalPreview Base 1`] = `
     />
   </div>
   <button
-    className="base button base expand-button ai-icon x-background-far modifierCompact"
+    className="base button expand-button ai-icon x-background-far modifierCompact"
     onClick={[Function]}
     type="button"
   >

package/dist/cjs/g/ExpandableLexicalPreview/common/ExpandButton/ExpandButton.js

@@ -1,111 +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 _propTypes = _interopRequireDefault(require("prop-types"));
-var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-var _b = require("../../../../b");
-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,
-    editorState
-    // ...otherProps
-  } = _ref;
-  return /*#__PURE__*/React.createElement(_b.Button, {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, 'ai-icon'].filter(e => e).join(' '),
-    style: style,
-    color: "background-far",
-    isCompact: true,
-    onClick: () => {
-      editorState.getEditorState().read(() => {
-        const rawHtml = (0, _html.$generateHtmlFromNodes)(editorState);
-        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/g/ExpandableLexicalPreview/common/ExpandButton/index.js

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