@pareto-engineering/design-system 1.0.2 → 2.0.0-alpha.4

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'

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

@@ -0,0 +1,107 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect, memo } from 'react'
+
+import { useField } from 'formik'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+import { FormLabel, FormDescription } from '../../common'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'checkbox-input'
+
+/**
+ * This is the component description.
+ */
+const CheckboxInput = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  value,
+  name,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [field, meta] = useField(name)
+
+  const isOptionSelected = !!(field.value?.length > 0 && field.value.includes(value))
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      <div
+        className={`${isOptionSelected ? 'selected' : 'not-selected'} input-content uc v1 pv-v`}
+      >
+        <FormLabel name={name}>
+          <input {...field} id={name} value={value} className="input" type="checkbox" />
+          <span>
+            {children}
+          </span>
+        </FormLabel>
+      </div>
+      {meta.error && meta.touched && <FormDescription error>{meta.error}</FormDescription>}
+
+    </div>
+  )
+}
+
+CheckboxInput.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The input name (html - and Formik state)
+   */
+  name:PropTypes.string.isRequired,
+
+  /**
+   * The input value
+   */
+  value:PropTypes.string.isRequired,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+}
+
+CheckboxInput.defaultProps = {
+  // someProp:false
+}
+
+export default memo(CheckboxInput)

package/src/ui/f/fields/CheckboxInput/index.js

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

package/src/ui/f/fields/CheckboxInput/styles.scss

@@ -0,0 +1,28 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "../../../form.scss";
+
+
+.#{bem.$base}.checkbox-input {
+  height: 100%;
+
+  .input-content {
+    border-radius: var(--theme-border-radius);
+    height: 100%;
+  }
+
+  .input {
+    @include form.radio-checkbox-input;
+  }
+
+
+  .not-selected {
+    @include form.radio-checkbox-input-not-selected;
+  }
+
+
+  .selected {
+    @include form.radio-checkbox-input-selected;
+  }
+}