@pareto-engineering/design-system 4.0.0-alpha.60 → 4.0.0-alpha.62

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/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 (

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useState, useInsertionEffect } from 'react'
+import { useState } from 'react'
 
 import { useField } from 'formik'
 
@@ -9,6 +9,8 @@ import { useRelayEnvironment, fetchQuery } from 'react-relay'
 
 import PropTypes from 'prop-types'
 
+import './styles.scss'
+
 // Local Definitions
 
 import { Combobox, MultipleCombobox } from './common'
@@ -44,10 +46,6 @@ const QueryCombobox = ({
   promptCreateNewOption,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [, meta, helpers] = useField({ name, validate })
 
   const { setValue, setError } = helpers

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useState, useInsertionEffect, memo } from 'react'
+import { useState, memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -12,6 +12,8 @@ import styleNames from '@pareto-engineering/bem/exports'
 import { Rating } from './common'
 import { FormLabel, InputWrapper } from '../../common'
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'ratings-input'
@@ -39,10 +41,6 @@ const RatingsInput = ({
   desktopInputSpan,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [hover, setHover] = useState(null)
 
   return (

package/src/ui/f/fields/SelectInput/SelectInput.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 { useField } from 'formik'
 
@@ -13,6 +13,8 @@ import { LoadingCircle } from 'ui/a'
 
 import { FormLabel, FormDescription, InputWrapper } from '../../common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -43,10 +45,6 @@ const SelectInput = ({
   desktopInputSpan,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [field] = useField({ name, validate })
 
   return (

package/src/ui/f/fields/TextInput/TextInput.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'
 
@@ -11,6 +11,8 @@ import { useField } from 'formik'
 
 import { FormLabel, FormDescription, InputWrapper } from '../../common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -42,10 +44,6 @@ const TextInput = ({
   symbol,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [field] = useField({ name, validate })
   const symbolStyle = symbol
     ? { '--symbol': symbol }

package/src/ui/f/fields/TextareaInput/TextareaInput.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 { useField } from 'formik'
 
 import { FormLabel, FormDescription, InputWrapper } from '../../common'
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'text-area-input'
@@ -42,10 +44,6 @@ const TextareaInput = ({
   desktopInputSpan,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [field] = useField({ name, validate })
 
   return (

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -3135,7 +3135,7 @@ exports[`Storyshots a/TextSteps Base 1`] = `
   className="grid span-8 md-span-14"
 >
   <div
-    className="base steps grid"
+    className="base text-steps grid"
   >
     <div
       className=" number h3 start-1 span-2 md-start-1 md-span-2"

package/dist/cjs/b/Title/styles.scss

@@ -1,16 +0,0 @@
-/* @pareto-engineering/generator-front 0.3.1 */
-
-@use "@pareto-engineering/bem";
-
-/*
-.#{bem.$base}.title{
-  .#{bem.$element-heading} {
-
-  }
-  .#{bem.$element-subtitle} {
-
-  }
-
-} */
-
-

package/dist/es/b/Title/styles.scss

@@ -1,16 +0,0 @@
-/* @pareto-engineering/generator-front 0.3.1 */
-
-@use "@pareto-engineering/bem";
-
-/*
-.#{bem.$base}.title{
-  .#{bem.$element-heading} {
-
-  }
-  .#{bem.$element-subtitle} {
-
-  }
-
-} */
-
-

package/src/ui/b/Title/styles.scss

@@ -1,16 +0,0 @@
-/* @pareto-engineering/generator-front 0.3.1 */
-
-@use "@pareto-engineering/bem";
-
-/*
-.#{bem.$base}.title{
-  .#{bem.$element-heading} {
-
-  }
-  .#{bem.$element-subtitle} {
-
-  }
-
-} */
-
-