@pareto-engineering/design-system 0.0.1-alpha.8 → 2.0.0-alpha.2

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

@@ -0,0 +1,142 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect, useState } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+import { Button } from 'ui/b'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'shortener'
+
+/**
+ * This is the component description.
+ */
+const Shortener = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  // ...otherProps
+
+  as:Element,
+
+  limit,
+  separator,
+
+  countLetters,
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [displayFull, setDisplayFull] = useState(false)
+
+  const text = children || ''
+
+  const excerpt = countLetters
+    ? text.slice(0, limit)
+    : text.split(separator).slice(0, limit).join(separator)
+  const doShorten = countLetters
+    ? text.length > limit
+    : text.split(separator).length > limit
+
+  return (
+    <Element
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      { (text && !displayFull && doShorten)
+        ? (
+          <>
+            { excerpt }
+            { '... ' }
+            <Button
+              isSimple
+              className="s-2"
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                setDisplayFull(true)
+              }}
+            >
+              Show
+            </Button>
+          </>
+        )
+        : text}
+    </Element>
+  )
+}
+
+Shortener.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 children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   * Which html tag to use
+   */
+  as:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  // as: PropTypes.string,
+
+  /**
+   * How many separated elements to accept before the read more.
+   * This may mean how many words, or how many letters if `countLetters=true`
+   */
+  limit:PropTypes.number,
+
+  /**
+   * Which separator to use to count words. This is only used in if `countLetters=false`.
+   */
+  separator:PropTypes.string,
+
+  /**
+   * Whether to count letters instead of using a split
+   */
+  countLetters:PropTypes.bool,
+}
+
+Shortener.defaultProps = {
+  // someProp:false
+  as          :'span',
+  separator   :' ',
+  limit       :20,
+  countLetters:false,
+}
+
+export default Shortener

package/src/ui/c/Shortener/index.js

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

package/src/ui/c/Shortener/styles.scss

@@ -0,0 +1,7 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+// .#{bem.$base}.shortener {
+
+// }

package/src/ui/c/index.js

@@ -1 +1,3 @@
-export { TeamGallery } from './TeamGallery'
+export { Hero } from './Hero'
+export { ContentSlides, useContentSlides } from './ContentSlides'
+export { Shortener } from './Shortener'

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

@@ -0,0 +1,122 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { memo } from 'react'
+
+import PropTypes from 'prop-types'
+
+import {
+  TextInput,
+  TextareaInput,
+  ChoicesInput,
+  SelectInput,
+} from '../fields'
+
+// Local Definitions
+
+// const baseClassName = styleNames.base
+
+const componentClassName = 'form-input'
+
+/**
+ * This is the component description.
+ */
+const FormInput = ({
+  className,
+  type,
+  extraTypes,
+  disabled,
+  ...otherProps
+}) => {
+  const newClassName = [
+    className,
+    componentClassName,
+  ].filter(Boolean).join(' ')
+
+  if (type === 'textarea') {
+    return (
+      <TextareaInput
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+  if (type === 'choices') {
+    return (
+      <ChoicesInput
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+  if (type === 'select') {
+    return (
+      <SelectInput
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+  if (extraTypes?.[type]) {
+    const Component = extraTypes[type]
+    return (
+      <Component
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+  return (
+    <TextInput
+      className={newClassName}
+      disabled={disabled}
+      type={type}
+      {...otherProps}
+    />
+  )
+}
+
+FormInput.propTypes = {
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  type:PropTypes.oneOf([
+    'text',
+    'email',
+    'password',
+    'number',
+    'date',
+    'datetime',
+    'month',
+    'tel',
+    'hidden',
+    'select',
+    'choices',
+    'textarea',
+    // to be removed
+    'extendedTypeInput',
+  ]),
+  /**
+   * The object with external Input types that would make the form input extensible
+   */
+  extraTypes:PropTypes.objectOf(PropTypes.func),
+  /**
+   * Whether the Form input input should be disabled
+   */
+  disabled  :PropTypes.bool,
+}
+
+FormInput.defaultProps = {
+  disabled:false,
+}
+
+export default memo(FormInput)

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

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

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

@@ -0,0 +1,85 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { useState, useLayoutEffect, useContext } from 'react'
+
+import PropTypes from 'prop-types'
+
+import { Button } from 'ui/b'
+import { FormikContext } from 'formik'
+
+// Local Definitions
+
+const componentClassName = 'debugger'
+
+/**
+ * This is the component description.
+ */
+const Debugger = ({
+  id,
+  className:userClassName,
+  style,
+  initialIsOpen,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [isOpen, setIsOpen] = useState(initialIsOpen)
+
+  const toggleDebugger = () => setIsOpen(!isOpen)
+  const formikContext = useContext(FormikContext)
+
+  return (
+    <div
+      id={id}
+      className={[
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <Button onClick={toggleDebugger} color="main1">
+        { isOpen
+          ? 'Close FormDebugger'
+          : 'Open FormDebugger'}
+      </Button>
+      { isOpen
+      && (
+      <pre className="debuger-content">
+        { JSON.stringify(formikContext, null, 2) }
+      </pre>
+      )}
+    </div>
+  )
+}
+
+Debugger.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),
+  /**
+   * state to control the opening and closing of the debugger
+   */
+  initialIsOpen:PropTypes.bool,
+}
+
+Debugger.defaultProps = {
+  initialIsOpen:false,
+}
+
+export default Debugger

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

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

package/src/ui/f/common/Debugger/styles.scss

@@ -0,0 +1,12 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.debuger {
+  .debuger-content {
+    font-size: calc(var(--s-1) * 1em);
+    white-space: pre;
+  }
+}
+
+

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

@@ -0,0 +1,88 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'description'
+
+/**
+ * This is the component description.
+ */
+const Description = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  isError,
+  color,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        isError ? 'x-error' : `x-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      {children}
+    </div>
+  )
+}
+
+Description.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 children JSX
+   */
+  children:PropTypes.node,
+  /**
+   * The base color for the description
+   */
+  color   :PropTypes.string,
+  /**
+   * isError
+   */
+  isError :PropTypes.bool,
+}
+
+Description.defaultProps = {
+  isError:false,
+  color  :'metadata',
+}
+
+export default Description

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

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

package/src/ui/f/common/Description/styles.scss

@@ -0,0 +1,10 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+
+.#{bem.$base}.description {
+  color: var(--x);
+}
+
+

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

@@ -0,0 +1,96 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'label'
+
+/**
+ * This is the component description.
+ */
+const Label = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  name,
+  color,
+  as:Wrapper,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <Wrapper
+      htmlFor={Wrapper === 'label' ? name : undefined}
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `x-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      {children}
+    </Wrapper>
+  )
+}
+
+Label.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 children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   *  The name of the input label
+   */
+  name:PropTypes.string,
+
+  /**
+   *  The html tag that acts as an input label
+   */
+  as   :PropTypes.node,
+  /**
+   *  The default color of the label
+   */
+  color:PropTypes.string,
+
+}
+
+Label.defaultProps = {
+  // someProp:false
+  as   :'label',
+  color:'main1',
+}
+
+export default Label

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

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

package/src/ui/f/common/Label/styles.scss

@@ -0,0 +1,11 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "../../../form.scss";
+
+
+.#{bem.$base}.label {
+ color: var(--x);
+}
+
+

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

@@ -0,0 +1,3 @@
+export { Label as FormLabel } from './Label'
+export { Description as FormDescription } from './Description'
+export { Debugger as FormDebugger } from './Debugger'