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

package/dist/es/g/ExpandableLexicalPreview/ExpandableLexicalPreview.js

@@ -8,10 +8,11 @@ import styleNames from '@pareto-engineering/bem/exports';
 // Local Definitions
 import { EditorInput } from "../../f";
 import { Button } from "../../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.
  */
@@ -23,13 +24,15 @@ 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 /*#__PURE__*/React.createElement(Formik, {
     initialValues: {
@@ -37,26 +40,42 @@ const ExpandableLexicalPreview = ({
     }
   }, /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${color}`, isExpanded && 'collapsed'].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`, isCollapsed && 'collapsed'].filter(e => e).join(' '),
     style: style
-  }, typeof title === 'string' ? /*#__PURE__*/React.createElement("p", {
+  }, typeof header === 'string' ? /*#__PURE__*/React.createElement("p", {
     className: "title h2"
-  }, title) : title, isExpanded ? /*#__PURE__*/React.createElement(Button, {
+  }, header) : header, isCollapsed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
     onClick: handleButtonClick,
     color: "background-far",
     isCompact: true
   }, /*#__PURE__*/React.createElement("span", {
     className: "ai-icon c-x x-paragraph"
-  }, "C")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorInput, {
+  }, "C")), /*#__PURE__*/React.createElement(NewWindowPortal, {
+    pageTitle: pageTitle,
+    onBlock: () => {
+      onBlock?.();
+      setIsCollapsed(false);
+    },
+    onOpen: () => {
+      onOpen?.();
+      setIsCollapsed(true);
+    }
+  }, /*#__PURE__*/React.createElement(EditorInput, {
     name: name,
-    setEditorState: setEditorState,
     resize: resize,
     disabled: true
-  }), /*#__PURE__*/React.createElement(ExpandButton, {
-    title: title,
-    onResolve: handleButtonClick,
-    editorState: editorState
-  }))));
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorInput, {
+    name: name,
+    resize: resize,
+    disabled: true,
+    id: "the-bad-ass-input"
+  }), /*#__PURE__*/React.createElement(Button, {
+    id: id,
+    className: "expand-button ai-icon",
+    color: "background-far",
+    isCompact: true,
+    onClick: handleButtonClick
+  }, "D"))));
 };
 ExpandableLexicalPreview.propTypes = {
   /**
@@ -84,13 +103,21 @@ 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
+  name: PropTypes.string.isRequired,
+  /**
+   * The function to run when a new window portal can be opened
+   */
+  onBlock: PropTypes.func.isRequired
 };
 ExpandableLexicalPreview.defaultProps = {
   color: 'paragraph',

package/dist/es/g/ExpandableLexicalPreview/common/NewWindowPortal/NewWindowPortal.js

@@ -0,0 +1,70 @@
+/* @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 "../../../../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 /*#__PURE__*/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/dist/es/g/ExpandableLexicalPreview/common/NewWindowPortal/index.js

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

package/dist/es/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/dist/es/g/ExpandableLexicalPreview/common/index.js

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

package/dist/es/g/index.js

@@ -1 +1,2 @@
-export { ExpandableLexicalPreview } from "./ExpandableLexicalPreview";
+export { ExpandableLexicalPreview } from "./ExpandableLexicalPreview";
+export { DragAndDrop } from "./DragAndDrop";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.79",
+  "version": "4.0.0-alpha.82",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -59,10 +59,10 @@
     "@lexical/selection": "0.12.2",
     "@lexical/table": "0.12.2",
     "@lexical/utils": "0.12.2",
-    "@pareto-engineering/assets": "^4.0.0-alpha.78",
+    "@pareto-engineering/assets": "^4.0.0-alpha.82",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
     "@pareto-engineering/styles": "^4.0.0-alpha.73",
-    "@pareto-engineering/utils": "^4.0.0-alpha.79",
+    "@pareto-engineering/utils": "^4.0.0-alpha.81",
     "codemirror": "^6.0.1",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
@@ -82,5 +82,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "593a12393a1966a555d50ede309f2acfee44f48d"
+  "gitHead": "34526163c76e2018e2e723afd555f85971e50e3a"
 }

package/src/stories/a/Tooltip.stories.jsx

@@ -16,11 +16,14 @@ export default {
   },
 }
 
-const ariaDescribedby = 'test-tooltip'
-
 export const Base = {
   args:{
     children:(
+      <Button>
+        Hover on me!
+      </Button>
+    ),
+    content:(
       <div>
         <ul>
           <li>This is the tooltips content</li>
@@ -29,7 +32,7 @@ export const Base = {
         </ul>
       </div>
     ),
-    id:ariaDescribedby,
+    description:'test-tooltip',
   },
   render:(args) => (
     <div
@@ -42,15 +45,7 @@ export const Base = {
         alignItems   :'center',
       }}
     >
-      <div aria-describedby={ariaDescribedby}>
-        <Button>
-          Hover on me!
-        </Button>
-        <Tooltip {...args} />
-      </div>
-      <p>
-        With some more content around
-      </p>
+      <Tooltip {...args} />
     </div>
   ),
 }

package/src/stories/g/DragAndDrop.stories.jsx

@@ -0,0 +1,114 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useRef } from 'react'
+
+import { TextInput, DragAndDrop, FormDebugger } from 'ui'
+
+import { Formik, Form } from 'formik'
+
+export default {
+  title        :'g/DragAndDrop',
+  component    :DragAndDrop,
+  subcomponents:{
+    // Item:DragAndDrop.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+const DummyContent = ({ children }) => (
+  <div
+    style={{
+      padding        :'1rem',
+      backgroundColor:'white',
+      border         :'1px solid black',
+    }}
+  >
+    {children}
+  </div>
+)
+
+export const Base = {
+  args:{
+    items:Array(8).fill().map((_, index) => ({
+      disabled:index === 0,
+      Content :(
+        <DummyContent>
+          Item
+          {index + 1}
+        </DummyContent>
+      ),
+      key:`Item ${index + 1}`,
+    })),
+  },
+}
+
+const DummyContentWithInput = ({ index }) => (
+  <div
+    style={{
+      display   :'flex',
+      alignItems:'center',
+      width     :'100%',
+      gap       :'var(--gap)',
+    }}
+  >
+    <span className="ai-icon">H</span>
+    <div
+      style={{
+        borderBottom:'1px solid var(--ui-lines)',
+        padding     :'calc(var(--theme-default-padding) / 2)',
+        display     :'flex',
+        alignItems  :'center',
+        width       :'100%',
+        gap         :'var(--gap)',
+      }}
+    >
+      <p
+        style={{
+          margin:'0',
+        }}
+      >
+        Input
+        {index + 1}
+      </p>
+      <TextInput name={`input-${index + 1}`} />
+    </div>
+  </div>
+)
+
+export const WithFormikInputs = {
+  render:({ items }) => {
+    const formikRef = useRef()
+
+    const handleReorder = (orderedItems) => {
+      const { values, setFieldValue } = formikRef.current || {}
+      const orderedInputValues = orderedItems.map(({ identifier }) => values?.[identifier])
+
+      setFieldValue('items', orderedInputValues)
+    }
+    return (
+      <Formik
+        initialValues={{ items: [] }}
+        innerRef={formikRef}
+      >
+        <Form>
+          <DragAndDrop onOrderChange={handleReorder} items={items} />
+          <FormDebugger />
+        </Form>
+      </Formik>
+    )
+  },
+  args:{
+    items:Array(8).fill().map((_, index) => ({
+      Content:(
+        <DummyContentWithInput index={index} />
+      ),
+      identifier:`input-${index + 1}`,
+    })),
+  },
+}

package/src/stories/g/ExpandableLexicalPreview.stories.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { ExpandableLexicalPreview } from 'ui'
+import { ExpandableLexicalPreview, AppContextProvider } from 'ui'
 
 export default {
   title        :'g/ExpandableLexicalPreview',
@@ -9,8 +9,14 @@ export default {
   subcomponents:{
     // Item:TextareaInput.Item
   },
-  decorators:[],
-  argTypes  :{
+  decorators:[
+    (storyfn) => (
+      <AppContextProvider>
+        { storyfn() }
+      </AppContextProvider>
+    ),
+  ],
+  argTypes:{
     color:{ control: 'text' },
   },
 }
@@ -25,6 +31,7 @@ const Template = (args) => (
 export const Base = Template.bind({})
 Base.args = {
   nodes,
-  name :'taskDescription',
-  title:'Task Instructions',
+  name     :'taskDescription',
+  pageTitle:'Task Instructions',
+  header   :'Task Instructions',
 }

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

@@ -20,9 +20,9 @@ $default-font-size: calc(1em * var(--s-1));
   color: var(--on-x, var(--on-#{$default-color}));
   display: inline-flex;
   font-size: $default-font-size;
+  gap: calc(var(--gap) / 2);
   padding: $default-padding;
   white-space: nowrap;
-
   &.#{bem.$modifier-compact} {
     padding: $compact-padding;
   }

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

@@ -11,7 +11,7 @@ $default-padding:var(--u);
 $default-horizontal-margin: .5em;
 
 $default-grid-gap: 1em;
-$default-margin: 1.5rem;
+$default-margin: 1em;
 $default-image-margin: var(--default-image-margin, #{$default-margin});
 $default-color: var(--default-color, var(--paragraph));
 

package/src/ui/a/Tooltip/Tooltip.jsx

@@ -22,6 +22,8 @@ const Tooltip = ({
   style,
   position,
   color,
+  description,
+  content,
   children,
   // ...otherProps
 }) => (
@@ -31,15 +33,26 @@ const Tooltip = ({
       baseClassName,
       componentClassName,
       userClassName,
-      position,
       `x-${color}`,
     ]
       .filter((e) => e)
       .join(' ')}
     style={style}
-    role="tooltip"
+
   >
-    {children}
+    <div
+      className="tooltip-trigger-wrapper"
+      aria-describedby={description}
+    >
+      {children}
+    </div>
+    <div
+      className={`tooltip-content ${position}`}
+      role="tooltip"
+      id={description}
+    >
+      {content}
+    </div>
   </div>
 )
 
@@ -60,10 +73,20 @@ Tooltip.propTypes = {
   style:PropTypes.objectOf(PropTypes.string),
 
   /**
-   *  The children JSX
+   *  The children JSX where the tooltip will be applied
    */
   children:PropTypes.node.isRequired,
 
+  /**
+   *  The content JSX that renders the tooltip content
+   */
+  content:PropTypes.node.isRequired,
+
+  /**
+   *  The text description  to identify the element that describes the tooltip
+   */
+  description:PropTypes.string.isRequired,
+
   /**
    * The position of the tooltip with respect to the trigger element
    */

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

@@ -7,50 +7,55 @@ $default-inline-padding: var(--theme-default-padding);
 $default-width: var(--tooltip-width, 20rem);
 
 .#{bem.$base}.tooltip {
-  background: var(--x);
-  border: var(--theme-default-border-style) var(--ui-lines);
-  border-radius: calc(var(--theme-default-border-radius) / 2);
-  opacity: 0;
-  overflow: hidden;
-  padding: $default-block-padding $default-inline-padding;
-  position: absolute;
-  transform: translateX(var(--horizontal, 0)) translateY(var(--vertical, 0));
-  transition: opacity .2s ease, transform .2s ease;
-  visibility: hidden;
-  width: $default-width;
-  z-index: 10;
-
-  :has(> &) {
-    position: relative;
-
-    &:is(:hover, :focus-visible, :active) > .#{bem.$base}.tooltip {
-      opacity: 1;
-      transition-delay: 200ms;
-      visibility: visible;
+  display: inline-block;
+  position: relative;
+
+  > .tooltip-content {
+    background: var(--x);
+    border: var(--theme-default-border-style) var(--ui-lines);
+    border-radius: calc(var(--theme-default-border-radius) / 2);
+    opacity: 0;
+    overflow: hidden;
+    padding: $default-block-padding $default-inline-padding;
+    position: absolute;
+    transform: translateX(var(--horizontal, 0)) translateY(var(--vertical, 0));
+    transition: opacity .2s ease, transform .2s ease;
+    visibility: hidden;
+    width: $default-width;
+    z-index: 10;
+
+    &.top {
+      --horizontal: -50%;
+      bottom: calc(100% + $default-block-padding);
+      left: 50%;
     }
-  }
 
-  &.top {
-    --horizontal: -50%;
-    bottom: calc(100% + $default-block-padding);
-    left: 50%;
-  }
+    &.right {
+      --vertical: 50%;
+      bottom: 50%;
+      left: calc(100% + $default-inline-padding);
+    }
 
-  &.right {
-    --vertical: 50%;
-    bottom: 50%;
-    left: calc(100% + $default-inline-padding);
-  }
+    &.bottom {
+      --horizontal: -50%;
+      left: 50%;
+      top: calc(100% + $default-block-padding);
+    }
 
-  &.bottom {
-    --horizontal: -50%;
-    left: 50%;
-    top: calc(100% + $default-block-padding);
+    &.left {
+      --vertical: 50%;
+      bottom: 50%;
+      right: calc(100% + $default-inline-padding);
+    }
   }
 
-  &.left {
-    --vertical: 50%;
-    bottom: 50%;
-    right: calc(100% + $default-inline-padding);
+  > .tooltip-trigger-wrapper {
+    cursor: pointer;
+
+    &:is(:hover, :focus-visible, :active) + .tooltip-content {
+      opacity: 1;
+      transition-delay: 200ms;
+      visibility: visible;
+    }
   }
 }

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

@@ -28,11 +28,11 @@ const ColorPicker = ({
   className:userClassName,
   style,
   icon,
-  color,
+  defaultColorHex,
   onChange,
   // ...otherProps
 }) => {
-  const [colorValue, setColor] = useColor(color)
+  const [colorValue, setColor] = useColor(defaultColorHex)
 
   const parentRef = useRef(null)
 
@@ -101,10 +101,15 @@ ColorPicker.propTypes = {
    * The React-written, css properties for this element.
    */
   style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The required default hex value for the color picker
+   */
+  defaultColorHex:PropTypes.string,
 }
 
 ColorPicker.defaultProps = {
-  // someProp:false
+  defaultColorHex:'#ffffff',
 }
 
 export default ColorPicker

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

@@ -98,8 +98,6 @@ const ToolbarPlugin = ({
   const [activeEditor, setActiveEditor] = useState(editor)
   const [blockType, setBlockType] = useState('paragraph')
   const [rootType, setRootType] = useState('root')
-  const [fontColor, setFontColor] = useState('#000000')
-  const [bgColor, setBgColor] = useState('#ffffff')
   const [fontSize, setFontSize] = useState('15px')
   const [isEditable, setIsEditable] = useState(() => editor.isEditable())
   const [isBold, setIsBold] = useState(false)
@@ -180,16 +178,6 @@ const ToolbarPlugin = ({
       setFontSize(
         $getSelectionStyleValueForProperty(selection, 'font-size', '15px'),
       )
-      setFontColor(
-        $getSelectionStyleValueForProperty(selection, 'color', '#000'),
-      )
-      setBgColor(
-        $getSelectionStyleValueForProperty(
-          selection,
-          'background-color',
-          '#fff',
-        ),
-      )
     }
   }, [activeEditor])
 
@@ -354,12 +342,10 @@ const ToolbarPlugin = ({
       <div className="group">
         <ColorPicker
           icon="'"
-          color={fontColor}
           onChange={onFontColorSelect}
         />
         <ColorPicker
           icon="#"
-          color={bgColor}
           onChange={onBgColorSelect}
         />
       </div>