@pareto-engineering/design-system 4.0.0-alpha.59 → 4.0.0-alpha.61

package/src/stories/f/QueryCombobox.stories.jsx

@@ -180,6 +180,17 @@ Optional.args = {
   optional:true,
 }
 
+export const WithPlaceholder = ResolvedTemplate.bind({})
+WithPlaceholder.args = {
+  placeholder:'Search for a team',
+}
+
+export const WithPromptToCreateNewOption = ResolvedTemplate.bind({})
+WithPromptToCreateNewOption.args = {
+  placeholder          :'Search for a team',
+  promptCreateNewOption:true,
+}
+
 export const SingleSelect = ResolvedTemplate.bind({})
 SingleSelect.args = {
   multiple:false,
@@ -202,6 +213,13 @@ MultipleSelect.args = {
   defaultFormikState:{ teams: [] },
 }
 
+export const MultipleSelectWithPromptForNewOptions = ResolvedTemplate.bind({})
+MultipleSelectWithPromptForNewOptions.args = {
+  multiple             :true,
+  promptCreateNewOption:true,
+  defaultFormikState   :{ teams: [] },
+}
+
 export const MultipleSelectWithDefaultFormikState = ResolvedTemplate.bind({})
 MultipleSelectWithDefaultFormikState.args = {
   multiple          :true,

package/src/ui/a/AnimatedBlobs/AnimatedBlobs.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
@@ -25,35 +25,29 @@ const AnimatedBlobs = ({
   width,
   opacity,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        ...style,
-        '--blob-color':`var(--${color})`,
-        '--height'    :height,
-        '--opacity'   :opacity,
-        '--width'     :width,
-      }}
-    >
-      <div className="shape-blob" />
-      <div className="shape-blob one" />
-      <div className="shape-blob two" />
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      ...style,
+      '--blob-color':`var(--${color})`,
+      '--height'    :height,
+      '--opacity'   :opacity,
+      '--width'     :width,
+    }}
+  >
+    <div className="shape-blob" />
+    <div className="shape-blob one" />
+    <div className="shape-blob two" />
+  </div>
+)
 
 AnimatedBlobs.propTypes = {
   /**

package/src/ui/a/AnimatedGradient/AnimatedGradient.jsx

@@ -3,7 +3,6 @@ import * as React from 'react'
 
 import {
   useEffect,
-  useInsertionEffect,
 } from 'react'
 
 import PropTypes from 'prop-types'
@@ -14,6 +13,8 @@ import { useApp } from 'ui/a'
 
 import { Gradient } from './webGIRenderer'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -27,10 +28,6 @@ const AnimatedGradient = ({
   className: userClassName,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const { userTheme } = useApp()
 
   const isClient = typeof window !== 'undefined'

package/src/ui/a/BlurOverlay/BlurOverlay.jsx

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.1.1-alpha.1 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'blur-overlay'
@@ -17,28 +17,22 @@ const BlurOverlay = ({
   style,
   children,
   blur,
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        blur && styleNames.modifierActive,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      { children }
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      blur && styleNames.modifierActive,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    { children }
+  </div>
+)
 
 BlurOverlay.propTypes = {
   /**

package/src/ui/a/ContentTree/ContentTree.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
 import { Tree, useContentTree } from './common'
 
@@ -26,10 +26,6 @@ const ContentTree = ({
   color,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const contentTree = useContentTree(target, selectors)
 
   return (

package/src/ui/a/Conversation/Conversation.jsx

@@ -1,14 +1,14 @@
 /* @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 { Card } from 'ui'
 
+import './styles.scss'
+
 // Local Definitions
 
 import { Message } from './common'
@@ -31,37 +31,31 @@ const Conversation = ({
   children,
   backgroundColor,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <ConversationContext.Provider
-      value={{
-        ourColor,
-        theirColor,
-      }}
+}) => (
+  <ConversationContext.Provider
+    value={{
+      ourColor,
+      theirColor,
+    }}
+  >
+    <Card
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `y-${backgroundColor}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
     >
-      <Card
-        id={id}
-        className={[
-          baseClassName,
-          componentClassName,
-          userClassName,
-          `y-${backgroundColor}`,
-        ]
-          .filter((e) => e)
-          .join(' ')}
-        style={style}
-      >
-        <Card.Section>
-          {children}
-        </Card.Section>
-      </Card>
-    </ConversationContext.Provider>
-  )
-}
+      <Card.Section>
+        {children}
+      </Card.Section>
+    </Card>
+  </ConversationContext.Provider>
+)
 
 Conversation.propTypes = {
   /**

package/src/ui/a/DotInfo/DotInfo.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
@@ -26,33 +26,27 @@ const DotInfo = ({
   colorFalse,
   colorEmpty,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-        booleanValue === false && `x-${colorFalse}`,
-        booleanValue === true && `x-${colorTrue}`,
-        [null, undefined].includes(booleanValue) && `empty x-${colorEmpty}`,
-
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        '--height':height,
-        ...style,
-      }}
-    />
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+
+      baseClassName,
+      booleanValue === false && `x-${colorFalse}`,
+      booleanValue === true && `x-${colorTrue}`,
+      [null, undefined].includes(booleanValue) && `empty x-${colorEmpty}`,
+
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      '--height':height,
+      ...style,
+    }}
+  />
+)
 
 DotInfo.propTypes = {
   /**

package/src/ui/a/Figure/Figure.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
@@ -23,31 +23,25 @@ const Figure = ({
   src,
   alt,
   caption,
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      <figure>
-        <img src={src} alt={alt} />
-        <figcaption>{caption || alt}</figcaption>
-      </figure>
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    // {...otherProps}
+  >
+    <figure>
+      <img src={src} alt={alt} />
+      <figcaption>{caption || alt}</figcaption>
+    </figure>
+  </div>
+)
 
 Figure.propTypes = {
   /**

package/src/ui/a/HamburgerButton/HamburgerButton.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
@@ -26,37 +26,31 @@ const HamburgerButton = ({
   ariaLabel,
   color,
   ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <button
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${color}`,
-        'hamburger',
-        `hamburger--${hamburgerType}`,
-        isOpen && 'is-active',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      type="button"
-      aria-label={ariaLabel}
-      aria-controls="navigation"
-      {...otherProps}
-    >
-      <span className="hamburger-box">
-        <span className="hamburger-inner" />
-      </span>
-    </button>
-  )
-}
+}) => (
+  <button
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      `x-${color}`,
+      'hamburger',
+      `hamburger--${hamburgerType}`,
+      isOpen && 'is-active',
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    type="button"
+    aria-label={ariaLabel}
+    aria-controls="navigation"
+    {...otherProps}
+  >
+    <span className="hamburger-box">
+      <span className="hamburger-inner" />
+    </span>
+  </button>
+)
 
 HamburgerButton.propTypes = {
   /**

package/src/ui/a/IconList/IconList.jsx

@@ -1,14 +1,14 @@
 /* @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 { Item } from './common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -27,32 +27,26 @@ const IconList = ({
   icon,
   iconHover,
   ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <ul
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        ...style,
-        '--list-icon'      :icon && `"${icon}"`,
-        '--list-icon-hover':iconHover && `"${iconHover}"`,
-      }}
-      {...otherProps}
-    >
-      {children}
-    </ul>
-  )
-}
+}) => (
+  <ul
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      ...style,
+      '--list-icon'      :icon && `"${icon}"`,
+      '--list-icon-hover':iconHover && `"${iconHover}"`,
+    }}
+    {...otherProps}
+  >
+    {children}
+  </ul>
+)
 
 IconList.propTypes = {
   /**

package/src/ui/a/Label/Label.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
@@ -26,31 +26,25 @@ const Label = ({
   isGhost,
   as:Wrapper,
   ...props
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <Wrapper
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${color}`,
-        isCompact && styleNames.modifierCompact,
-        isGhost && styleNames.modifierGhost,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      {...props}
-    >
-      {children}
-    </Wrapper>
-  )
-}
+}) => (
+  <Wrapper
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      `x-${color}`,
+      isCompact && styleNames.modifierCompact,
+      isGhost && styleNames.modifierGhost,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    {...props}
+  >
+    {children}
+  </Wrapper>
+)
 
 Label.propTypes = {
   /**