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

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/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/f/fields/SelectInput/common/Multiple/Multiple.jsx

@@ -176,20 +176,22 @@ const Multiple = ({
       {...getComboboxProps()}
       // {...otherProps}
     >
-      <FormLabel
-        className={[
-          baseClassName,
-          componentClassName,
-        ]
-          .filter((e) => e)
-          .join(' ')}
-        {...getLabelProps()}
-        name={name}
-        optional={optional}
-        color={labelColor}
-      >
-        {label}
-      </FormLabel>
+      {label && (
+        <FormLabel
+          className={[
+            baseClassName,
+            componentClassName,
+          ]
+            .filter((e) => e)
+            .join(' ')}
+          {...getLabelProps()}
+          name={name}
+          optional={optional}
+          color={labelColor}
+        >
+          {label}
+        </FormLabel>
+      )}
 
       {selectedItems?.length > 0 && (
         <div className="selected-items">

package/src/ui/f/fields/SelectInput/common/Single/Single.jsx

@@ -65,13 +65,15 @@ const Single = ({
         .join(' ')}
       style={style}
     >
-      <FormLabel
-        name={name}
-        color={labelColor}
-        optional={optional}
-      >
-        {label}
-      </FormLabel>
+      {label && (
+        <FormLabel
+          name={name}
+          color={labelColor}
+          optional={optional}
+        >
+          {label}
+        </FormLabel>
+      )}
       <div className={`select-wrapper${disabled ? ' disabled' : ''}`}>
         <select
           className={`input y-${color}`}

package/src/ui/f/fields/TextInput/TextInput.jsx

@@ -64,14 +64,15 @@ const TextInput = ({
         ...style,
       }}
     >
-      <FormLabel
-        name={name}
-        color={labelColor}
-        optional={optional}
-        // {...otherProps}
-      >
-        {label}
-      </FormLabel>
+      {label && (
+        <FormLabel
+          name={name}
+          color={labelColor}
+          optional={optional}
+        >
+          {label}
+        </FormLabel>
+      )}
       <InputWrapper {...inputWrapperProps}>
         <input
           id={name}

package/src/ui/f/fields/TextareaInput/TextareaInput.jsx

@@ -55,15 +55,15 @@ const TextareaInput = ({
         .join(' ')}
       style={style}
     >
-      <FormLabel
-        name={name}
-        color={labelColor}
-        optional={optional}
-      // {...otherProps}
-      >
-        {label}
-      </FormLabel>
-
+      {label && (
+        <FormLabel
+          name={name}
+          color={labelColor}
+          optional={optional}
+        >
+          {label}
+        </FormLabel>
+      )}
       <textarea
         id={name}
         className="textarea"

package/src/ui/g/DragAndDrop/DragAndDrop.jsx

@@ -0,0 +1,118 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import { DraggableItem } from './common'
+
+// Local Definitions
+
+import './styles.scss'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'drag-and-drop'
+
+/**
+ * This is the component description.
+ */
+const DragAndDrop = ({
+  id,
+  className:userClassName,
+  style,
+  as:Wrapper,
+  onOrderChange,
+  items,
+  // ...otherProps
+}) => {
+  const [draggableItems, setDraggableItems] = useState(items)
+
+  const handleDrop = (e, dragOverItemIndex) => {
+    e.preventDefault()
+    const dragItemIndex = e.dataTransfer.getData('text')
+    const orderedItems = [...draggableItems]
+    const [reorderedItem] = orderedItems.splice(dragItemIndex, 1)
+    orderedItems.splice(dragOverItemIndex, 0, reorderedItem)
+    setDraggableItems(orderedItems)
+    onOrderChange?.(orderedItems)
+  }
+
+  return (
+    <Wrapper
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      {draggableItems.map(({
+        identifier, disabled, Content, ...rest
+      }, index) => (
+        <DraggableItem
+          draggable
+          onDrop={(e) => handleDrop(e, index)}
+          index={index}
+          key={identifier}
+          {...rest}
+        >
+          {Content}
+        </DraggableItem>
+      ))}
+    </Wrapper>
+  )
+}
+
+DragAndDrop.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),
+
+  /**
+   * The html element to use to display this component.
+   */
+  as:PropTypes.string,
+
+  /**
+   * The node list of items to be dragged around
+   */
+  items:PropTypes.arrayOf(PropTypes.shape({
+    Content   :PropTypes.node.isRequired,
+    identifier:PropTypes.string.isRequired,
+    as        :PropTypes.string,
+  })).isRequired,
+
+  /*
+  * A function to be called when the draggable items are re-ordered
+  */
+  onOrderChange:PropTypes.func,
+}
+
+DragAndDrop.defaultProps = {
+  as:'ul',
+}
+
+DragAndDrop.DraggableItem = DraggableItem
+
+export default DragAndDrop

package/src/ui/g/DragAndDrop/common/DraggableItem/DraggableItem.jsx

@@ -0,0 +1,98 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'draggable-item'
+
+/**
+ * This is the component description.
+ */
+const DraggableItem = ({
+  id,
+  className:userClassName,
+  style,
+  as:Wrapper,
+  children,
+  index,
+  ...otherProps
+}) => {
+  const [isDragging, setIsDragging] = useState(false)
+
+  const handleDragStart = (e) => {
+    setIsDragging(true)
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', index)
+  }
+
+  const handleDragEnd = () => {
+    setIsDragging(false)
+  }
+
+  const handleDragOver = (e) => {
+    e.preventDefault()
+  }
+
+  return (
+    <Wrapper
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        isDragging && 'dragging',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      onDragStart={(e) => handleDragStart(e)}
+      onDragOver={(e) => handleDragOver(e)}
+      onDragEnd={(e) => handleDragEnd(e)}
+      {...otherProps}
+    >
+      {children}
+    </Wrapper>
+  )
+}
+DraggableItem.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),
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   * The html element to use to display this component.
+   */
+  as:PropTypes.string,
+}
+
+DraggableItem.defaultProps = {
+  as:'li',
+}
+
+export default DraggableItem

package/src/ui/g/DragAndDrop/common/DraggableItem/index.js

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

package/src/ui/g/DragAndDrop/common/DraggableItem/styles.scss

@@ -0,0 +1,12 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.draggable-item {
+  cursor: move;
+  list-style: none;
+
+  &.dragging {
+    opacity: .5;
+  }
+}

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

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

package/src/ui/g/DragAndDrop/index.js

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

package/src/ui/g/DragAndDrop/styles.scss

@@ -0,0 +1,8 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.drag-and-drop {
+  margin: 0;
+  padding: 0;
+}

package/src/ui/g/index.js

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