@pareto-engineering/design-system 2.0.0-alpha.51 → 2.0.0-alpha.54

package/src/stories/f/SelectInput.stories.jsx

@@ -26,87 +26,47 @@ export default {
   },
 }
 
-export const Base = () => (
+const Template = (args) => (
   <>
-    <SelectInput
-      name="workType"
-      label="Work Type"
-      options={[{ value: '', label: 'Select an option', disabled: true }, 'Work', 'Managing', 'Training']}
-    />
+    <SelectInput {...args} />
     <FormDebugger />
   </>
 )
 
-export const RequiredSelect = () => {
-  const requiredInput = (inputValue) => {
-    let error = ''
-
-    if (!inputValue || !inputValue?.length === 0) {
-      error = 'This information is required'
-    }
-    return error
-  }
+export const Base = Template.bind({})
+Base.args = {
+  name   :'workType',
+  label  :'Work Type',
+  options:[
+    { value: '', label: 'Select an option', disabled: true },
+    { value: 'Work', label: 'Work' },
+    { value: 'Managing', label: 'Managing' },
+    { value: 'Training', label: 'Training' },
+  ],
+}
 
-  return (
-    <>
-      <SelectInput
-        validate={requiredInput}
-        name="activity"
-        label="Activity Type"
-        options={[
-          { value: '', label: 'Select an option', disabled: true },
-          { value: 'review', label: 'Review' },
-          { value: 'Approve', label: 'Approve' },
-        ]}
-      />
-      <FormDebugger />
-    </>
-  )
+export const StringAndObjects = Template.bind({})
+StringAndObjects.args = {
+  ...Base.args,
+  options:[...Base.args.options, 'Option1', 'Option2', 'Option3'],
 }
 
-export const Objects = () => (
-  <>
-    <SelectInput
-      name="workType"
-      label="Work Type"
-      options={[
-        { value: '', label: 'Select an option', disabled: true },
-        { value: '20th Aug 2020 to 19th Sept, 2020', label: '20th Aug 2020 to 19th Sept, 2020' },
-        { value: '20th Sept 2020 to 19th Oct, 2020', label: '20th Sept 2020 to 19th Oct, 2020' },
-      ]}
-    />
-    <FormDebugger />
-  </>
-)
+const requiredInput = (inputValue) => {
+  let error = ''
 
-export const StringAndObjects = () => (
-  <>
-    <SelectInput
-      name="workType"
-      label="Work Type"
-      options={[
-        { value: '', label: 'Select an option', disabled: true },
-        'Work', 'Managing', 'Training',
-        { value: '20th Aug 2020 to 19th Sept, 2020', label: '20th Aug 2020 to 19th Sept, 2020' },
-        { value: '20th Sept 2020 to 19th Oct, 2020', label: '20th Sept 2020 to 19th Oct, 2020' },
-      ]}
-    />
-    <FormDebugger />
-  </>
-)
-export const DisabledSelectInput = () => (
-  <>
-    <SelectInput
-      name="workType"
-      label="Work Type"
-      options={[
-        { value: '', label: 'Select an option', disabled: true },
-        'Work', 'Managing', 'Training',
-        { value: '20th Aug 2020 to 19th Sept, 2020', label: '20th Aug 2020 to 19th Sept, 2020' },
-        { value: '20th Sept 2020 to 19th Oct, 2020', label: '20th Sept 2020 to 19th Oct, 2020' },
-      ]}
-      disabled
-    />
-    <FormDebugger />
-  </>
-)
+  if (!inputValue || !inputValue?.length === 0) {
+    error = 'This information is required'
+  }
+  return error
+}
+export const Required = Template.bind({})
+Required.args = {
+  ...Base.args,
+  validate:requiredInput,
+}
+
+export const DisabledSelectInput = Template.bind({})
+DisabledSelectInput.args = {
+  ...Base.args,
+  disabled:true,
+}

package/src/stories/f/TextInput.stories.jsx

@@ -30,61 +30,64 @@ export default {
   },
 }
 
-export const Base = () => {
-  const validate = (value) => {
-    let errorMessage = ''
-    const isValid = value.length > 3
+// eslint-disable-next-line react/prop-types
+const Template = (args) => (
+  <div className=" u2 pb-u">
+    <TextInput {...args} />
+    <FormDebugger />
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  name :'firstName',
+  label:"What's your first name ?",
+}
+
+const validate = (value) => {
+  let errorMessage = ''
+  const isValid = value.length > 3
 
-    if (!isValid) {
-      errorMessage = 'Value should be greater than 3 characters'
-    }
-    return errorMessage
+  if (!isValid) {
+    errorMessage = 'Value should be greater than 3 characters'
   }
-  return (
-    <div className=" u2 pb-u">
-      <TextInput
-        name="firstName"
-        label="What's your first name ?"
-        validate={validate}
-      />
-      <FormDebugger />
-    </div>
-  )
+  return errorMessage
 }
 
-export const Placeholder = () => (
-  <div className="u2 pb-u">
-    <TextInput
-      name="firstName"
-      label="What's your first name ?"
-      placeholder="First Name"
-    />
-    <FormDebugger />
-  </div>
-)
+export const WithValidation = Template.bind({})
+WithValidation.args = {
+  ...Base.args,
+  validate,
+}
 
-export const Disabled = () => (
-  <div className="u2 pb-u">
-    <TextInput
-      name="firstName"
-      label="What's your first name ?"
-      disabled
-    />
-  </div>
-)
+export const WithPlaceholder = Template.bind({})
+WithPlaceholder.args = {
+  ...Base.args,
+  placeholder:'First Name',
+}
 
-export const DateTime = () => (
-  <div>
-    <TextInput
-      name="date"
-      label="Select date"
-      type="date"
-    />
-    <TextInput
-      name="time"
-      label="Select time"
-      type="time"
-    />
-    <FormDebugger />
-  </div>
-)
+export const WithAutoCompleteOff = Template.bind({})
+WithAutoCompleteOff.args = {
+  ...Base.args,
+  autoComplete:'off',
+}
+
+export const WithDisabled = Template.bind({})
+WithDisabled.args = {
+  ...Base.args,
+  disabled:true,
+}
+
+export const Date = Template.bind({})
+Date.args = {
+  type :'date',
+  name :'date',
+  label:'Select date',
+}
+
+export const Time = Template.bind({})
+Time.args = {
+  type :'time',
+  name :'time',
+  label:'Select time',
+}

package/src/stories/f/TextareaInput.stories.jsx

@@ -28,58 +28,43 @@ export default {
   },
 }
 
-export const Base = () => (
-  <div>
-    <TextareaInput
-      name="feedback"
-      label="What can we improve on?"
-    />
+const Template = (args) => (
+  <>
+    <TextareaInput {...args} />
     <FormDebugger />
-  </div>
+  </>
 )
 
-export const Placeholder = () => (
-  <div>
-    <TextareaInput
-      name="feedback"
-      label="What can we improve on?"
-      placeholder="Type your feedback here..."
-    />
-    <FormDebugger />
-  </div>
-)
+export const Base = Template.bind({})
+Base.args = {
+  name :'feedback',
+  label:'What can we improve on?',
+}
+
+export const Placeholder = Template.bind({})
+Placeholder.args = {
+  ...Base.args,
+  placeholder:'Type your feedback here...',
+}
 
-export const Validation = () => {
-  const validate = (value) => {
-    let errorMessage = ''
-    const isValid = value.length > 3
+const validate = (value) => {
+  let errorMessage = ''
+  const isValid = value.length > 3
 
-    if (!isValid) {
-      errorMessage = 'Value should be greater than 3 characters'
-    }
-    return errorMessage
+  if (!isValid) {
+    errorMessage = 'Value should be greater than 3 characters'
   }
+  return errorMessage
+}
 
-  return (
-    <div>
-      <TextareaInput
-        name="feedback"
-        label="What can we improve on?"
-        placeholder="Type your feedback here..."
-        validate={validate}
-      />
-      <FormDebugger />
-    </div>
-  )
+export const Validation = Template.bind({})
+Validation.args = {
+  ...Base.args,
+  validate,
 }
 
-export const Disabled = () => (
-  <div>
-    <TextareaInput
-      name="feedback"
-      label="What can we improve on?"
-      disabled
-    />
-    <FormDebugger />
-  </div>
-)
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...Base.args,
+  disabled:true,
+}

package/src/ui/a/{SiteContext → AppContext}/ContextProvider.jsx

@@ -24,7 +24,7 @@ const reducer = (state, action) => {
   }
 }
 
-const SiteContextProvider = ({
+const AppContextProvider = ({
   children,
   initialTheme,
   config,
@@ -48,7 +48,7 @@ const SiteContextProvider = ({
   )
 }
 
-SiteContextProvider.propTypes = {
+AppContextProvider.propTypes = {
   /**
    *  The children JSX
    */
@@ -60,10 +60,10 @@ SiteContextProvider.propTypes = {
   initialTheme:PropTypes.string,
 
   /**
-   * A dictionnary containing settings and preferences to be used site-wide
+   * A dictionnary containing settings and preferences to be used application-wide
    */
   config:PropTypes.shape({
-    SITE:PropTypes.shape({
+    APP:PropTypes.shape({
       NAME         :PropTypes.string.isRequired,
       CANONICAL    :PropTypes.string.isRequired,
       SUPPORT_EMAIL:PropTypes.string,
@@ -74,16 +74,17 @@ SiteContextProvider.propTypes = {
       INSTAGRAM:PropTypes.string,
       YOUTUBE  :PropTypes.string,
     }),
+    CONSTANTS:PropTypes.shape({}),
   }).isRequired,
 
   /**
-   * Site context initial state
+   * Application context initial state
    */
   initialState:PropTypes.objectOf(PropTypes.string),
 }
 
-SiteContextProvider.defaultProps = {
+AppContextProvider.defaultProps = {
   initialState:{},
 }
 
-export default SiteContextProvider
+export default AppContextProvider

package/src/ui/a/AppContext/index.js

@@ -0,0 +1,5 @@
+/* @pareto-engineering/generator-front 0.2.3 */
+export { default as AppContext } from './Context'
+export { default as AppContextProvider } from './ContextProvider'
+export { default as useApp } from './useApp'
+export { default as useTheme } from './useTheme'

package/src/ui/a/index.js

@@ -2,11 +2,11 @@ export { SVG } from './SVG'
 export { DashboardNavbar } from './DashboardNavbar'
 export { IconList } from './IconList'
 export {
-  SiteContext,
-  SiteContextProvider,
-  useSite,
+  AppContext,
+  AppContextProvider,
+  useApp,
   useTheme,
-} from './SiteContext'
+} from './AppContext'
 export { ProgressBar } from './ProgressBar'
 export { TeamInfo } from './TeamInfo'
 export { AnimatedCounter } from './AnimatedCounter'

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

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
-import { useSite } from 'ui/a'
+import { useApp } from 'ui/a'
 
 const helmetMap = [
   {
@@ -163,7 +163,7 @@ const PageHelmet = ({
   ...props
 }) => {
   // const intl = useIntl()
-  const context = useSite()
+  const context = useApp()
 
   const HelmetContent = useMemo(() => helmetMap.reduce(
     /* eslint-disable no-unused-vars -- TODO add test or ssr mode */

package/src/ui/b/SocialMediaButton/SocialMediaButton.jsx

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem'
 
-import { useSite } from 'ui/a'
+import { useApp } from 'ui/a'
 
 // Local Definitions
 
@@ -37,7 +37,7 @@ const defaultsMap = {
 /**
  * This is the component description.
  * This component takes `y` as the default color and `x` as the hover color.
- * This components needs to be wrapped within a `SiteContextProvider`.
+ * This components needs to be wrapped within a `AppContextProvider`.
  */
 const SocialMediaButton = ({
   id,
@@ -50,14 +50,14 @@ const SocialMediaButton = ({
   isTransparent,
   ...otherProps
 }) => {
-  const siteContext = useSite()
+  const applicationContext = useApp()
 
   useLayoutEffect(() => {
     import('./styles.scss')
   }, [])
 
   const content = type && defaultsMap[type]
-  const href = link || siteContext?.SOCIAL?.[content.link]
+  const href = link || applicationContext?.SOCIAL?.[content.link]
 
   return (
     <a href={href} target="_blank" rel="noreferrer">

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

@@ -4,7 +4,7 @@ import { useLayoutEffect, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styleNames from '@pareto-engineering/bem'
 
-import { useSite } from 'ui/a'
+import { useApp } from 'ui/a'
 
 // Local Definitions
 
@@ -27,7 +27,7 @@ const ThemeSelector = ({
   const {
     userTheme,
     setPreferredTheme,
-  } = useSite()
+  } = useApp()
 
   useLayoutEffect(() => {
     import('./styles.scss')

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

@@ -3,6 +3,8 @@ import * as React from 'react'
 
 import { useLayoutEffect } from 'react'
 
+import { useField } from 'formik'
+
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem'
@@ -20,8 +22,8 @@ const Description = ({
   id,
   className:userClassName,
   style,
-  children,
-  isError,
+  description,
+  name,
   color,
   // ...otherProps
 }) => {
@@ -29,25 +31,27 @@ const Description = ({
     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>
-  )
+  const [field, meta] = useField(name)
+
+  if (description || ((meta.touched || field.value) && meta.error)) {
+    return (
+      <div
+        id={id}
+        className={[
+          baseClassName,
+          componentClassName,
+          userClassName,
+          meta.error ? 'x-error' : `x-${color}`,
+        ]
+          .filter((e) => e)
+          .join(' ')}
+        style={style}
+      >
+        { meta.error || description}
+      </div>
+    )
+  }
+  return null
 }
 
 Description.propTypes = {
@@ -67,22 +71,23 @@ Description.propTypes = {
   style:PropTypes.objectOf(PropTypes.string),
 
   /**
-   *  The children JSX
+   * The base color for the description
    */
-  children:PropTypes.node,
+  color:PropTypes.string,
+
   /**
-   * The base color for the description
+   * Input description - extra description to guide a use in filling the input
    */
-  color   :PropTypes.string,
+  description:PropTypes.string,
+
   /**
-   * isError
+   * The input name (html - and Formik state)
    */
-  isError :PropTypes.bool,
+  name:PropTypes.string.isRequired,
 }
 
 Description.defaultProps = {
-  isError:false,
-  color  :'metadata',
+  color:'metadata',
 }
 
 export default Description

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

@@ -43,7 +43,7 @@ const QueryCombobox = ({
 
   const { setValue, setError } = helpers
 
-  const { error, value } = meta
+  const { value } = meta
 
   const environment = useRelayEnvironment()
 
@@ -101,7 +101,6 @@ const QueryCombobox = ({
     label,
     description,
     setValue,
-    error,
     value,
     color,
     isFetching,

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

@@ -33,7 +33,6 @@ const Combobox = ({
   options:items,
   getOptions,
   setValue,
-  error,
   description,
   value,
   color,
@@ -121,11 +120,7 @@ const Combobox = ({
         />
       </Popover>
 
-      {(description || error) && (
-      <FormDescription isError={!!error}>
-        { error || description }
-      </FormDescription>
-      )}
+      <FormDescription className="v50 mt-v s-1" description={description} name={name} />
     </div>
   )
 }
@@ -181,11 +176,6 @@ Combobox.propTypes = {
    */
   description:PropTypes.string,
 
-  /**
-   * The error object
-   */
-  error:PropTypes.objectOf(PropTypes.string),
-
   /**
    * The value of the custom select input
    */

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

@@ -46,7 +46,6 @@ const MultipleCombobox = ({
   options:items,
   getOptions,
   setValue,
-  error,
   description,
   value,
   color,
@@ -213,11 +212,7 @@ const MultipleCombobox = ({
         />
       </Popover>
 
-      {(description || error) && (
-      <FormDescription isError={!!error}>
-        { error || description }
-      </FormDescription>
-      )}
+      <FormDescription className="v50 mt-v s-1" description={description} name={name} />
 
     </div>
   )
@@ -274,11 +269,6 @@ MultipleCombobox.propTypes = {
    */
   description:PropTypes.string,
 
-  /**
-   * The error object
-   */
-  error:PropTypes.objectOf(PropTypes.string),
-
   /**
    * The value of the custom select input
    */