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

package/src/ui/b/Card/Card.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 { ProgressBar } from 'ui'
 
 import { Group, Section } from './common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -27,35 +27,29 @@ const Card = ({
   children,
   progress,
   progressBarColor,
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      {progress && (
-        <ProgressBar
-          attached
-          color={progressBarColor}
-          progress={progress}
-          height=".5em"
-        />
-      )}
-      {children}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    {progress && (
+      <ProgressBar
+        attached
+        color={progressBarColor}
+        progress={progress}
+        height=".5em"
+      />
+    )}
+    {children}
+  </div>
+)
 
 Card.propTypes = {
   /**

package/src/ui/b/Card/common/Group/Group.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 { SnapScroller } from 'ui'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -24,9 +24,6 @@ const Group = ({
   desktopType,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
   const Wrapper = type === 'snap-scroller' ? SnapScroller : 'div'
   const wrapperProps = (type === 'snap-scroller' && desktopType !== 'snap-scroller') ? { noScrollOnDesktop: true } : {}
 

package/src/ui/b/Logo/Logo.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useMemo, useInsertionEffect } from 'react'
+import { useMemo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -9,6 +9,8 @@ import styleNames from '@pareto-engineering/bem/exports'
 
 import { SVG } from 'ui/a'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -64,10 +66,6 @@ const Logo = ({
   square,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const contentMap = square ? contentMapSquare : contentMapWithName
   const svgConfig = useMemo(() => contentMap[variant], [variant])
 

package/src/ui/b/Page/Page.jsx

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.0 */
 import * as React from 'react'
-import { useInsertionEffect, useEffect } from 'react'
+import { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import styleNames from '@pareto-engineering/bem/exports'
 import { useApp } from 'ui/a'
@@ -8,8 +8,7 @@ import { useApp } from 'ui/a'
 // Imports from the component folder
 import { PageHelmet, Section } from './common'
 import Context from './Context'
-
-// import('./styles.scss')
+import './styles.scss'
 
 // Local Definitions
 const baseClassName = styleNames.base
@@ -30,10 +29,6 @@ const Page = ({
   Background,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const { userTheme } = useApp()
 
   useEffect(() => {

package/src/ui/b/SocialMediaButton/SocialMediaButton.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 { useApp } from 'ui/a'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -55,11 +55,6 @@ const SocialMediaButton = ({
   ...otherProps
 }) => {
   const applicationContext = useApp()
-
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const content = type && defaultsMap[type]
   const href = link || applicationContext?.SOCIAL?.[content?.link]
 

package/src/ui/b/ThemeSelector/ThemeSelector.jsx

@@ -1,11 +1,13 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
-import { useInsertionEffect, useCallback } from 'react'
+import { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styleNames from '@pareto-engineering/bem/exports'
 
 import { useApp, ToggleSwitch } from 'ui/a'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -26,10 +28,6 @@ const ThemeSelector = ({
     setPreferredTheme,
   } = useApp()
 
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const loopThemes = useCallback(() => {
     const current = themes.indexOf(userTheme)
     setPreferredTheme(themes[(current + 1) % themes.length])

package/src/ui/b/Title/Title.jsx

@@ -1,14 +1,10 @@
 /* @pareto-engineering/generator-front 0.3.1 */
 import * as React from 'react'
-import { useInsertionEffect } from 'react'
 import PropTypes from 'prop-types'
 
 // Package-level Imports
 import styleNames from '@pareto-engineering/bem/exports'
 
-// Component-level imports
-// import('./styles.scss')
-
 // Helper Definition
 const baseClassName = styleNames.base
 const componentClassName = 'title'
@@ -29,53 +25,47 @@ const Title = ({
   subtitleStyle,
   subtitleProps,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    <HeadingWrapper
       className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
+        headingClassName,
+        styleNames.heading,
       ]
         .filter((e) => e)
         .join(' ')}
-      style={style}
+      style={headingStyle}
+      {...headingProps}
     >
-      <HeadingWrapper
-        className={[
-          headingClassName,
-          styleNames.heading,
-        ]
-          .filter((e) => e)
-          .join(' ')}
-        style={headingStyle}
-        {...headingProps}
-      >
-        { heading }
-      </HeadingWrapper>
-      { subtitle
-    && (
-    <SubtitleWrapper
-      className={[
-        subtitleClassName,
-        styleNames.subtitle,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={subtitleStyle}
-      {...subtitleProps}
-    >
-      { subtitle }
-    </SubtitleWrapper>
-    )}
-    </div>
-  )
-}
+      { heading }
+    </HeadingWrapper>
+    { subtitle
+  && (
+  <SubtitleWrapper
+    className={[
+      subtitleClassName,
+      styleNames.subtitle,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={subtitleStyle}
+    {...subtitleProps}
+  >
+    { subtitle }
+  </SubtitleWrapper>
+  )}
+  </div>
+)
 
 Title.propTypes = {
   /**

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 = {
   /**