@pareto-engineering/design-system 0.0.1-alpha.67 → 0.0.1-alpha.70

package/src/stories/a/Timestamp.stories.jsx

@@ -0,0 +1,102 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Timestamp } from 'ui'
+
+import { subDays } from 'date-fns'
+
+export default {
+  title        :'a/Timestamp',
+  component    :Timestamp,
+  subcomponents:{
+    // Item:Timestamp.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+const date = Date.UTC(2021, 9, 15)
+// const timezoneCorrectedDate = addMinutes(date, date.getTimezoneOffset())
+
+export const Base = () => (
+  <>
+    <Timestamp time={date} />
+  </>
+)
+
+export const DateFormat = () => (
+  <Timestamp
+    time={date}
+    enabledFormats={['date']}
+    dateFormat={'yyyy-MM-dd\' at \'HH:mm'}
+  />
+)
+
+export const DistanceFormat = () => (
+  <Timestamp
+    time={subDays(date, 3)}
+    enabledFormats={['distance', 'date']}
+  />
+)
+
+export const RelativeFormat = () => (
+  <>
+    Click to see relative format.
+    Relative format has not been enabled by default because of chromatic snapshots.
+    <Timestamp
+      time={subDays(date, 5)}
+      enabledFormats={['date', 'relative']}
+    />
+  </>
+)
+
+export const Prefix = () => (
+  <Timestamp
+    time={date}
+    prefix={(
+      <strong>
+        Updated :
+      </strong>
+    )}
+  />
+)
+
+// export const DistanceFormatMaxDays = () => (
+//   <>
+//     This should appear as distance
+//     <Timestamp
+//       time={subDays(Date.now(), 3)}
+//       enabledFormats={['distance', 'date']}
+//       distanceMaxDays={4}
+//     />
+//     <br />
+
+//     But this should appear as date
+//     <Timestamp
+//       time={subDays(Date.now(), 5)}
+//       enabledFormats={['distance', 'date']}
+//       distanceMaxDays={4}
+//     />
+//   </>
+// )
+
+// export const RelativeFormatMaxDays = () => (
+//   <>
+//     This should appear as distance
+//     <Timestamp
+//       time={subDays(Date.now(), 3)}
+//       enabledFormats={['relative', 'date']}
+//       relativeMaxDays={4}
+//     />
+//     But this should appear as date
+//     <Timestamp
+//       time={subDays(Date.now(), 5)}
+//       enabledFormats={['relative', 'date']}
+//       relativeMaxDays={4}
+//     />
+//   </>
+// )

package/src/stories/f/ChoicesInput.stories.jsx

@@ -27,7 +27,7 @@ export default {
 }
 
 export const Base = () => {
-  const choicesMap = [
+  const optionsMap = [
     {
       value:'red',
       label:'Color Red',
@@ -45,14 +45,14 @@ export const Base = () => {
   return (
 
     <>
-      <ChoicesInput id="colors" choices={choicesMap} name="color" />
+      <ChoicesInput id="colors" options={optionsMap} name="color" />
       <FormDebugger />
     </>
   )
 }
 
 export const Multiple = () => {
-  const choicesMap = [
+  const optionsMap = [
     {
       value:'red',
       label:'Color Red',
@@ -69,14 +69,14 @@ export const Multiple = () => {
 
   return (
     <>
-      <ChoicesInput id="colors" choices={choicesMap} name="color" multiple />
+      <ChoicesInput id="colors" options={optionsMap} name="color" multiple />
       <FormDebugger />
     </>
   )
 }
 
 export const MultipleWithGrid = () => {
-  const choicesMap = [
+  const optionsMap = [
     {
       value:'red',
       label:'Color Red',
@@ -113,7 +113,55 @@ export const MultipleWithGrid = () => {
 
   return (
     <>
-      <ChoicesInput id="colors" choices={choicesMap} name="color" multiple gridColumnsDesktop={2} />
+      <ChoicesInput id="colors" options={optionsMap} name="color" multiple gridColumnsDesktop={2} />
+      <FormDebugger />
+    </>
+  )
+}
+
+export const ChoicesWithLabel = () => {
+  const optionsMap = [
+    {
+      value:'triangle',
+      label:'Triangle',
+    },
+    {
+      value:'square',
+      label:'Square',
+    },
+    {
+      value:'rectangle',
+      label:'Rectangle',
+    },
+  ]
+
+  return (
+    <>
+      <ChoicesInput id="shapes" options={optionsMap} name="shape" label="Geometric Shapes" />
+      <FormDebugger />
+    </>
+  )
+}
+
+export const DisabledChoicesInput = () => {
+  const optionsMap = [
+    {
+      value:'triangle',
+      label:'Triangle',
+    },
+    {
+      value:'square',
+      label:'Square',
+    },
+    {
+      value:'rectangle',
+      label:'Rectangle',
+    },
+  ]
+
+  return (
+    <>
+      <ChoicesInput id="shapes" options={optionsMap} name="shape" label="Geometric Shapes" disabled />
       <FormDebugger />
     </>
   )

package/src/stories/f/FormInput.stories.jsx

@@ -0,0 +1,187 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Formik, Form } from 'formik'
+
+import {
+  FormInput,
+  TextInput,
+  FormDebugger,
+} from 'ui'
+
+export default {
+  title        :'f/FormInput',
+  component    :FormInput,
+  subcomponents:{
+    // Item:FormInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ firstName: 'Test' }}
+      >
+        <Form>
+
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const inputMap = [
+    {
+      type :'text',
+      name :'firstName',
+      label:"What's your first name ?",
+    },
+    {
+      type :'text',
+      name :'lastName',
+      label:"What's your last name ?",
+    },
+    {
+      type :'textarea',
+      name :'description',
+      label:'Describe yourself in a few sentences',
+    },
+    {
+      type   :'choices',
+      name   :'colors',
+      label  :'What are your favourite colors ?',
+      options:[
+        {
+          value:'red',
+          label:'Color Red',
+        },
+        {
+          value:'blue',
+          label:'Color Blue',
+        },
+        {
+          value:'green',
+          label:'Color Green',
+        },
+      ],
+    },
+    {
+      type   :'select',
+      name   :'food',
+      label  :'What do you want for dinner ?',
+      options:[
+        {
+          value:'italian',
+          label:'A nice pizza',
+        },
+        {
+          value:'turkish',
+          label:'A delicious kebab',
+        },
+        {
+          value:'french',
+          label:'A three course delicate french meal',
+        },
+      ],
+    },
+
+  ]
+  return (
+    <>
+      {
+        inputMap.map((input) => <FormInput {...input} key={input.name} />)
+        }
+      <FormDebugger />
+
+    </>
+  )
+}
+
+export const ExtensibleFormInput = () => {
+  const ExtendedTextInput = (props) => (
+    <TextInput
+      {...props}
+      name="extended"
+      label="Extended type input"
+    />
+  )
+
+  const extraTypes = { extendedTypeInput: ExtendedTextInput }
+
+  return (
+    <>
+      <FormInput extraTypes={extraTypes} type="extendedTypeInput" />
+      <FormDebugger />
+    </>
+  )
+}
+
+export const DisabledFormInput = () => {
+  const inputMap = [
+    {
+      type :'text',
+      name :'firstName',
+      label:"What's your first name ?",
+    },
+    {
+      type :'text',
+      name :'lastName',
+      label:"What's your last name ?",
+    },
+    {
+      type :'textarea',
+      name :'description',
+      label:'Describe yourself in a few sentences',
+    },
+    {
+      type   :'choices',
+      name   :'colors',
+      label  :'What are your favourite colors ?',
+      options:[
+        {
+          value:'red',
+          label:'Color Red',
+        },
+        {
+          value:'blue',
+          label:'Color Blue',
+        },
+        {
+          value:'green',
+          label:'Color Green',
+        },
+      ],
+    },
+    {
+      type   :'select',
+      name   :'food',
+      label  :'What do you want for dinner ?',
+      options:[
+        {
+          value:'italian',
+          label:'A nice pizza',
+        },
+        {
+          value:'turkish',
+          label:'A delicious kebab',
+        },
+        {
+          value:'french',
+          label:'A three course delicate french meal',
+        },
+      ],
+    },
+
+  ]
+  return (
+    <>
+      {
+        inputMap.map((input) => <FormInput disabled {...input} key={input.name} />)
+        }
+      <FormDebugger />
+
+    </>
+  )
+}

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

@@ -65,3 +65,17 @@ export const StringAndObjects = () => (
     <FormDebugger />
   </>
 )
+export const DisabledSelectInput = () => (
+  <>
+    <SelectInput
+      name="workType"
+      label="Work Type"
+      options={['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 />
+  </>
+)

package/src/stories/f/{TaskRecommendation.stories.jsx → TaskRecommendationInput.stories.jsx}

@@ -1,11 +1,11 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 import { Formik, Form } from 'formik'
-import { TaskRecommendation } from 'ui'
+import { TaskRecommendationInput } from 'ui'
 
 export default {
-  title        :'f/fields/TaskRecommendation',
-  component    :TaskRecommendation,
+  title        :'f/fields/TaskRecommendationInput',
+  component    :TaskRecommendationInput,
   subcomponents:{
     // Item:TaskRecommendation.Item
   },
@@ -27,7 +27,7 @@ export default {
 
 export const Base = () => (
   <div className="y-background b-y v2 p-v" style={{ height: '100%' }}>
-    <TaskRecommendation
+    <TaskRecommendationInput
       name="taskRecommendations"
       value="businessTypes"
       oneLiner="Build a list of contacts at businesses based on my criteria for potential customers"

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

@@ -51,3 +51,13 @@ export const Base = () => {
     </>
   )
 }
+
+export const DisabledTextInput = () => (
+  <div className="y-background b-y u2 pb-u">
+    <TextInput
+      name="firstName"
+      label="What's your first name ?"
+      disabled
+    />
+  </div>
+)

package/src/stories/f/{TextArea.stories.jsx → TextareaInput.stories.jsx}

@@ -3,13 +3,13 @@ import * as React from 'react'
 
 import { Formik, Form } from 'formik'
 
-import { TextArea, FormDebugger } from 'ui'
+import { TextareaInput, FormDebugger } from 'ui'
 
 export default {
-  title        :'f/fields/TextArea',
-  component    :TextArea,
+  title        :'f/fields/TextareaInput',
+  component    :TextareaInput,
   subcomponents:{
-    // Item:TextArea.Item
+    // Item:TextareaInput.Item
   },
   decorators:[
     (storyfn) => (
@@ -30,10 +30,20 @@ export default {
 
 export const Base = () => (
   <div className="y-background b-y">
-    <TextArea
+    <TextareaInput
       name="feedBack"
       label="What can we improve on?"
     />
     <FormDebugger />
   </div>
 )
+export const DisabledTextareaInput = () => (
+  <div className="y-background b-y">
+    <TextareaInput
+      name="feedBack"
+      label="What can we improve on?"
+      disabled
+    />
+    <FormDebugger />
+  </div>
+)

package/src/ui/a/Timestamp/Timestamp.jsx

@@ -0,0 +1,168 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import {
+  useLayoutEffect, useMemo, useCallback, useState,
+} from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+import {
+  format, differenceInDays, formatDistance, formatRelative,
+} from 'date-fns'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'timestamp'
+
+/**
+ * This is the component description.
+ */
+const Timestamp = ({
+  id,
+  className:userClassName,
+  style,
+  time,
+  prefix,
+  enabledFormats,
+  distanceMaxDays,
+  relativeMaxDays,
+  dateFormat,
+  locale,
+  // ...otherProps
+  as:Element,
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [currentDisplay, setCurrentDisplay] = useState(enabledFormats[0])
+
+  const formatMap = useMemo(() => ({
+    unix    :(unix) => Number(unix),
+    date    :(unix) => format(new Date(unix), dateFormat),
+    distance:(unix) => ((!distanceMaxDays
+      || (differenceInDays(Date.now(), new Date(unix)) < distanceMaxDays))
+      ? formatDistance(new Date(unix), new Date(), { addSuffix: true, locale })
+      : format(new Date(unix), dateFormat)),
+    relative:(unix) => ((!relativeMaxDays
+      || (differenceInDays(Date.now(), new Date(unix)) < relativeMaxDays))
+      ? formatRelative(new Date(unix), new Date(), { locale })
+      : format(new Date(unix), dateFormat)),
+  }), [])
+
+  const onClick = useCallback((e) => {
+    e.persist()
+    // eslint-disable-next-line no-shadow
+    const currentIndex = enabledFormats.findIndex((e) => e === currentDisplay)
+    const nextIndex = (currentIndex + 1) % enabledFormats.length
+    setCurrentDisplay(enabledFormats[nextIndex])
+  }, [currentDisplay])
+
+  if (!Number(time)) return null
+
+  return (
+    <Element
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+      onClick={(enabledFormats.length > 1) ? onClick : undefined}
+    >
+      { prefix && prefix }
+      { prefix && ' ' }
+      { formatMap[currentDisplay](Number(time)) }
+    </Element>
+  )
+}
+
+Timestamp.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
+   */
+  prefix:PropTypes.node,
+
+  /**
+    * Which html tag to use
+    */
+  as:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+
+  /**
+    * Formats
+    */
+  enabledFormats:PropTypes.arrayOf(
+    PropTypes.oneOf([
+      'unix',
+      'date',
+      'distance',
+      'relative',
+    ]),
+  ),
+
+  /**
+   * How many days to display distance before reverting to unix display
+   */
+  distanceMaxDays:PropTypes.number,
+
+  /**
+   * How many days to display distance before reverting to unix display
+   */
+  relativeMaxDays:PropTypes.number,
+
+  /**
+    * Unix Format Read https://date-fns.org/v2.16.1/docs/format for options
+    */
+  dateFormat:PropTypes.string,
+
+  /**
+    * The time to display
+    */
+  time:PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.number,
+  ]).isRequired,
+
+  /**
+    * A Date-DNS locale object. Will default to english.
+    */
+  locale:PropTypes.instanceOf(Object),
+}
+
+Timestamp.defaultProps = {
+  // someProp:false
+  as            :'p',
+  dateFormat    :'yyyy-MM-dd\'T\'HH:mm:ss.SSSxxx',
+  enabledFormats:['unix', 'date'],
+}
+
+export default Timestamp

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

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

package/src/ui/a/Timestamp/styles.scss

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

package/src/ui/a/index.js

@@ -22,3 +22,4 @@ export { CustomerStat } from './CustomerStat'
 export { Quote } from './Quote'
 export { ContentCard } from './ContentCard'
 export { DotInfo } from './DotInfo'
+export { Timestamp } from './Timestamp'