@pareto-engineering/design-system 4.0.0-alpha.9 → 4.0.0

package/src/ui/a/Tip/Tip.jsx

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -21,32 +21,31 @@ const Tip = ({
   className:userClassName,
   style,
   children,
+  icon,
   as:Wrapper,
   color,
+  backgroundColor,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <Wrapper
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${color}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      {children}
-    </Wrapper>
-  )
-}
+}) => (
+  <Wrapper
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      `x-${backgroundColor}`,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    // {...otherProps}
+  >
+    <span className={`x-${color} c-x icon`}>
+      {icon}
+    </span>
+    {children}
+  </Wrapper>
+)
 
 Tip.propTypes = {
   /**
@@ -70,10 +69,20 @@ Tip.propTypes = {
   children:PropTypes.node.isRequired,
 
   /**
-   * The color of the bar
+   * The icon
+   */
+  icon:PropTypes.string,
+
+  /**
+   * The color of the icon
    */
   color:PropTypes.string,
 
+  /**
+   * The background color
+   */
+  backgroundColor:PropTypes.string,
+
   /**
    * The wrapper html type
    */
@@ -81,8 +90,10 @@ Tip.propTypes = {
 }
 
 Tip.defaultProps = {
-  as   :'p',
-  color:'main',
+  as             :'p',
+  icon           :')',
+  color          :'interactive',
+  backgroundColor:'background-near',
 }
 
 export default Tip

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

@@ -4,19 +4,13 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
-$default-bar-width: 2px;
-$default-padding: 1em;
+$default-padding: calc(var(--gap) * 2);
 
 .#{bem.$base}.tip {
-  padding-left: $default-padding;
-  position: relative;
-
-  &::before {
-    background: var(--x);
-    content: "";
-    height: 100%;
-    left: 0;
-    position: absolute;
-    width: $default-bar-width;
-  }
+  align-items: center;
+  background: var(--x);
+  border-radius: var(--theme-default-border-radius);
+  display: flex;
+  gap: var(--gap);
+  padding: $default-padding;
 }

package/src/ui/a/ToggleSwitch/ToggleSwitch.jsx

@@ -0,0 +1,93 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React 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 = 'toggle-switch'
+
+/**
+ * This is the component description.
+ */
+const ToggleSwitch = ({
+  id,
+  className:userClassName,
+  style,
+  handleOnChange,
+  checked,
+  size,
+  // ...otherProps
+}) => (
+  <button
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      '--size':size,
+      ...style,
+    }}
+    type="button"
+    // {...otherProps}
+  >
+    <input
+      type="checkbox"
+      id="switch"
+      checked={checked}
+      onChange={handleOnChange}
+    />
+    {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+    <label htmlFor="switch" />
+  </button>
+)
+
+ToggleSwitch.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 onClick handler for this element
+   */
+  handleOnChange:PropTypes.func,
+
+  /**
+   * The checked state of this element
+   */
+  checked:PropTypes.bool,
+
+  /**
+   * The size of this element
+   */
+  size:PropTypes.string,
+}
+
+ToggleSwitch.defaultProps = {
+  // someProp:false,
+}
+
+export default ToggleSwitch

package/src/ui/a/ToggleSwitch/index.js

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

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

@@ -0,0 +1,51 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-border-radius: var(--theme-default-border-radius);
+$default-size: var(--size, 1.2em);
+$default-slider-color: var(--slider-color, var(--background-far));
+$default-slider-border-color: var(--slider-border-color, var(--ui-lines));
+$default-background-color: var(--slider-background-color, var(--interactive));
+
+.#{bem.$base}.toggle-switch {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+
+  >input {
+    height: 0;
+    visibility: hidden;
+    width: 0;
+  }
+
+  >label {
+    background: $default-background-color;
+    border-radius: $default-border-radius;
+    cursor: pointer;
+    display: block;
+    height: $default-size;
+    position: relative;
+    width: calc($default-size * 2);
+
+    &::after {
+      background: $default-slider-color;
+      border: 1px solid $default-slider-border-color;
+      border-radius: $default-border-radius;
+      content: "";
+      height: $default-size;
+      left: 0;
+      position: absolute;
+      top: 0;
+      transition: .3s;
+      width: $default-size;
+    }
+  }
+
+  >input:checked + label::after {
+    left: $default-size;
+  }
+}
+
+

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

@@ -0,0 +1,106 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React 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 = 'tooltip'
+
+/**
+ * This is the component description.
+ */
+const Tooltip = ({
+  id,
+  className:userClassName,
+  style,
+  position,
+  color,
+  description,
+  content,
+  children,
+  // ...otherProps
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      `x-${color}`,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+
+  >
+    <div
+      className="tooltip-trigger-wrapper"
+      aria-describedby={description}
+    >
+      {children}
+    </div>
+    <div
+      className={`tooltip-content ${position}`}
+      role="tooltip"
+      id={description}
+    >
+      {content}
+    </div>
+  </div>
+)
+
+Tooltip.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string.isRequired,
+
+  /**
+   * 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 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
+   */
+  position:PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+
+  /**
+   * The base color of the tooltip
+   */
+  color:PropTypes.string,
+}
+
+Tooltip.defaultProps = {
+  position:'bottom',
+  color   :'background-cards',
+}
+
+export default Tooltip

package/src/ui/a/Tooltip/index.js

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

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

@@ -0,0 +1,61 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-block-padding: calc(var(--theme-default-padding) / 2);
+$default-inline-padding: var(--theme-default-padding);
+$default-width: var(--tooltip-width, 20rem);
+
+.#{bem.$base}.tooltip {
+  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%;
+    }
+
+    &.right {
+      --vertical: 50%;
+      bottom: 50%;
+      left: calc(100% + $default-inline-padding);
+    }
+
+    &.bottom {
+      --horizontal: -50%;
+      left: 50%;
+      top: calc(100% + $default-block-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/a/XMLEditor/XMLEditor.jsx

@@ -0,0 +1,200 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import * as React from 'react'
+
+import { useEffect, useRef } from 'react'
+
+import PropTypes from 'prop-types'
+
+import { EditorState } from '@codemirror/state'
+
+import {
+  EditorView,
+  keymap,
+  lineNumbers,
+  drawSelection,
+  dropCursor,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  highlightSpecialChars,
+  crosshairCursor,
+  rectangularSelection,
+} from '@codemirror/view'
+
+import {
+  defaultKeymap,
+  indentWithTab,
+} from '@codemirror/commands'
+
+import {
+  indentOnInput,
+  bracketMatching,
+  foldGutter,
+} from '@codemirror/language'
+
+import { xml } from '@codemirror/lang-xml'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import { theme } from './common'
+
+import './styles.scss'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'code-editor'
+
+/**
+ * codemirror documentation:
+ * https://codemirror.net/
+ */
+
+const XMLEditor = ({
+  id,
+  className: userClassName,
+  style,
+  readOnly,
+  height,
+  gutterWidth,
+  config,
+  onChange,
+  onBlur,
+  stopAllPropagation,
+  stopPropagationKeys,
+}) => {
+  const editorRef = useRef()
+
+  useEffect(() => {
+    const startState = EditorState.create({
+      doc       :config,
+      extensions:[
+        keymap.of([defaultKeymap, indentWithTab]),
+        indentOnInput(),
+        lineNumbers(),
+        bracketMatching(),
+        foldGutter(),
+        drawSelection(),
+        highlightActiveLine(),
+        highlightActiveLineGutter(),
+        highlightSpecialChars(),
+        dropCursor(),
+        rectangularSelection(),
+        crosshairCursor(),
+        xml(),
+        theme,
+        EditorState.readOnly.of(readOnly),
+        EditorView.updateListener.of((view) => {
+          onChange(view)
+          // view.state.doc.toString() to receive the current content in the editor.
+        }),
+        EditorView.focusChangeEffect.of((state, focused) => {
+          if (!focused) {
+            onBlur?.(state)
+          }
+        }),
+        EditorView.domEventHandlers({
+          keydown(e) {
+            if (stopPropagationKeys?.includes(e.key) || stopAllPropagation) {
+              e.stopPropagation()
+            }
+          },
+        }),
+      ],
+    })
+
+    const view = new EditorView({
+      state :startState,
+      parent:editorRef.current,
+    })
+
+    return () => {
+      view.destroy()
+    }
+  }, [editorRef])
+
+  return (
+    <div
+      id={id}
+      ref={editorRef}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={{
+        '--height'      :height,
+        '--gutter-width':gutterWidth,
+        ...style,
+      }}
+    />
+  )
+}
+
+XMLEditor.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),
+
+  /**
+     *  Whether or not the content is read only.
+     */
+  readOnly:PropTypes.bool,
+
+  /**
+   * The initial labeling configuration.
+   */
+  config:PropTypes.string,
+
+  /**
+   * The height of the editor.
+   */
+  height:PropTypes.string,
+
+  /**
+   * The callback for when the labeling configuration changes.
+   */
+  onChange:PropTypes.func,
+
+  /**
+   * The width of the gutter.
+   */
+  gutterWidth:PropTypes.string,
+
+  /**
+   * The keys to stop propagation on.
+   */
+  stopPropagationKeys:PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * The callback for when the editor loses focus.
+   */
+  onBlur:PropTypes.func,
+
+  /**
+   * Whether to stop all propagation of keys to keep focus on the editor.
+   */
+  stopAllPropagation:PropTypes.bool,
+}
+
+XMLEditor.defaultProps = {
+  config:`<View>
+  <!--Edit this config to customize the labeling interface.-->
+</View>
+  `,
+  height     :'20em',
+  gutterWidth:'3em',
+}
+
+export default XMLEditor

package/src/ui/a/XMLEditor/common/index.js

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