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

package/src/ui/c/ContentSlides/ContentSlides.jsx

@@ -18,6 +18,8 @@ import {
   Navigator,
 } from './common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -64,10 +66,6 @@ const ContentSlides = ({
   isDebug,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const history = useHistory()
 
   const [state, dispatch] = useReducer(reducer, {

package/src/ui/c/Modal/Modal.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 { ModalHeader } from './common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -27,35 +27,29 @@ const Modal = ({
   color,
   close,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      <ModalHeader
-        title={title}
-        close={close}
-        color={color}
-      />
-      <div className="modal-body">
-        {children}
-      </div>
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    // {...otherProps}
+  >
+    <ModalHeader
+      title={title}
+      close={close}
+      color={color}
+    />
+    <div className="modal-body">
+      {children}
     </div>
-  )
-}
+  </div>
+)
 
 Modal.propTypes = {
   /**

package/src/ui/c/Shortener/Shortener.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect, useState } from 'react'
+import { useState } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -10,6 +10,8 @@ import styleNames from '@pareto-engineering/bem/exports'
 // Local Definitions
 import { Button } from 'ui/b'
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'shortener'
@@ -31,10 +33,6 @@ const Shortener = ({
 
   countLetters,
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [displayFull, setDisplayFull] = useState(false)
 
   const text = children || ''

package/src/ui/c/SocialMediaShareButton/SocialMediaShareButton.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,10 +25,6 @@ const SocialMediaShareButton = ({
   type,
   color,
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const isServer = typeof window === 'undefined'
 
   const link = isServer ? '' : window.location.href

package/src/ui/f/FormInput/FormInput.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { memo, useInsertionEffect } from 'react'
+import { memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -19,6 +19,8 @@ import {
   EditorInput,
 } from '../fields'
 
+import './styles.scss'
+
 // Local Definitions
 
 // const baseClassName = styleNames.base
@@ -35,10 +37,6 @@ const FormInput = ({
   disabled,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const newClassName = [
     className,
     componentClassName,

package/src/ui/f/common/Debugger/Debugger.jsx

@@ -1,12 +1,14 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
-import { useState, useInsertionEffect, useContext } from 'react'
+import { useState, useContext } from 'react'
 
 import PropTypes from 'prop-types'
 
 import { Button } from 'ui/b'
 import { FormikContext } from 'formik'
 
+import './styles.scss'
+
 // Local Definitions
 
 const componentClassName = 'debugger'
@@ -21,10 +23,6 @@ const Debugger = ({
   initialIsOpen,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [isOpen, setIsOpen] = useState(initialIsOpen)
 
   const toggleDebugger = () => setIsOpen(!isOpen)

package/src/ui/f/common/Description/Description.jsx

@@ -1,14 +1,14 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import { useField } from 'formik'
 
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -27,10 +27,6 @@ const Description = ({
   color,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [, meta] = useField(name)
   const hasError = meta.touched && meta.error
 

package/src/ui/f/common/InputWrapper/InputWrapper.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
@@ -24,31 +24,25 @@ const InputWrapper = ({
   columnSpan,
   desktopColumnSpan,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        ...style,
-        '--column-span'   :columnSpan || 'var(--columns)',
-        '--column-span-md':desktopColumnSpan || 'var(--columns)',
-      }}
-    >
-      {children}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      ...style,
+      '--column-span'   :columnSpan || 'var(--columns)',
+      '--column-span-md':desktopColumnSpan || 'var(--columns)',
+    }}
+  >
+    {children}
+  </div>
+)
 
 InputWrapper.propTypes = {
   /**

package/src/ui/f/common/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
@@ -28,35 +28,29 @@ const Label = ({
   columnSpan,
   desktopColumnSpan,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <Wrapper
-      htmlFor={Wrapper === 'label' ? name : undefined}
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${color}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        ...style,
-        '--column-span'   :columnSpan || 'var(--columns)',
-        '--column-span-md':desktopColumnSpan || 'var(--columns)',
-      }}
-      // {...otherProps}
-    >
-      {children}
-      {optional && ' (Optional)'}
-    </Wrapper>
-  )
-}
+}) => (
+  <Wrapper
+    htmlFor={Wrapper === 'label' ? name : undefined}
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      `x-${color}`,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      ...style,
+      '--column-span'   :columnSpan || 'var(--columns)',
+      '--column-span-md':desktopColumnSpan || 'var(--columns)',
+    }}
+    // {...otherProps}
+  >
+    {children}
+    {optional && ' (Optional)'}
+  </Wrapper>
+)
 
 Label.propTypes = {
   /**

package/src/ui/f/common/index.js

@@ -2,3 +2,4 @@ export { Label as FormLabel } from './Label'
 export { Description as FormDescription } from './Description'
 export { Debugger as FormDebugger } from './Debugger'
 export { InputWrapper } from './InputWrapper'
+export * from './utils'

package/src/ui/f/common/utils/index.js

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

package/src/ui/f/common/utils/lookUpInputValueFromFetchedOptions.js

@@ -0,0 +1,23 @@
+import Fuse from 'fuse.js'
+
+const fuseOptions = {
+  findAllMatches:true,
+  keys          :['label'],
+}
+
+export const lookUpInputValueFromFetchedOptions = ({
+  items, inputValue, setOptions, minLength,
+}) => {
+  const fuseSearch = new Fuse(items, fuseOptions)
+  const result = fuseSearch.search(inputValue)
+
+  if (result.length === 0 && inputValue.length > minLength) {
+    setOptions((prevItems) => [
+      ...prevItems,
+      {
+        label:`${inputValue} (Create new)`,
+        value:inputValue,
+      },
+    ])
+  }
+}

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

@@ -1,8 +1,6 @@
 /* @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'
@@ -11,6 +9,8 @@ import { useField } from 'formik'
 
 import { FormLabel, FormDescription, InputWrapper } from '../../common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -36,10 +36,6 @@ const Checkbox = ({
   desktopInputSpan,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [field] = useField({ name, type: 'checkbox' })
 
   return (

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect, memo } from 'react'
+import { memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -13,6 +13,8 @@ import { Choice } from './common'
 
 import { FormDescription, FormLabel, InputWrapper } from '../../common'
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'choices-input'
@@ -40,58 +42,52 @@ const ChoicesInput = ({
   inputSpan,
   desktopInputSpan,
   ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <>
-      {label && (
-        <FormLabel
-          name={name}
-          color={labelColor}
-          optional={optional}
-          columnSpan={labelSpan}
-          desktopColumnSpan={desktopLabelSpan}
-        // {...otherProps}
-        >
-          {label}
-        </FormLabel>
-      )}
-      <InputWrapper
-        id={id}
-        className={[
-          baseClassName,
-          componentClassName,
-          userClassName,
-        ]
-          .filter((e) => e)
-          .join(' ')}
-        style={style}
-        columnSpan={inputSpan}
-        desktopColumnSpan={desktopInputSpan}
+}) => (
+  <>
+    {label && (
+      <FormLabel
+        name={name}
+        color={labelColor}
+        optional={optional}
+        columnSpan={labelSpan}
+        desktopColumnSpan={desktopLabelSpan}
+      // {...otherProps}
       >
-        <div className={['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')}>
-          { options.map((choice) => (
-            <Choice
-              className={`x-${color}`}
-              key={choice.value}
-              name={name}
-              id={`${name}-${choice.value}`}
-              multiple={multiple}
-              validate={validate}
-              disabled={disabled}
-              {...otherProps}
-              {...choice}
-            />
-          ))}
-        </div>
-        <FormDescription className="s-1" description={description} name={name} />
-      </InputWrapper>
-    </>
-  )
-}
+        {label}
+      </FormLabel>
+    )}
+    <InputWrapper
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      columnSpan={inputSpan}
+      desktopColumnSpan={desktopInputSpan}
+    >
+      <div className={['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')}>
+        { options.map((choice) => (
+          <Choice
+            className={`x-${color}`}
+            key={choice.value}
+            name={name}
+            id={`${name}-${choice.value}`}
+            multiple={multiple}
+            validate={validate}
+            disabled={disabled}
+            {...otherProps}
+            {...choice}
+          />
+        ))}
+      </div>
+      <FormDescription className="s-1" description={description} name={name} />
+    </InputWrapper>
+  </>
+)
 
 ChoicesInput.propTypes = {
   /**

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react'
-import { useInsertionEffect, memo } from 'react'
+import { memo } from 'react'
 import { useFormikContext } from 'formik'
 import { LexicalComposer } from '@lexical/react/LexicalComposer'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
@@ -16,6 +16,7 @@ import { ListItemNode, ListNode } from '@lexical/list'
 
 import PropTypes from 'prop-types'
 import styleNames from '@pareto-engineering/bem/exports'
+import './styles.scss'
 
 // Local Definitions
 
@@ -49,10 +50,6 @@ const EditorInput = ({
   showDebugger,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const formik = useFormikContext()
 
   const setInitialValue = () => {

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect, memo } from 'react'
+import { memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -10,6 +10,7 @@ import styleNames from '@pareto-engineering/bem/exports'
 import { useField } from 'formik'
 
 import { FormLabel, FormDescription, InputWrapper } from '../../common'
+import './styles.scss'
 
 // Local Definitions
 
@@ -40,10 +41,6 @@ const LinkInput = ({
   desktopInputSpan,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [field] = useField({ name, validate })
 
   return (