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

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/Label.stories.jsx

@@ -0,0 +1,22 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { FormLabel as Label } from 'ui'
+
+export default {
+  title        :'f/common/Label',
+  component    :Label,
+  subcomponents:{
+    // Item:Label.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <Label>Sample Label</Label>
+)

package/src/stories/f/RadioInput.stories.jsx

@@ -0,0 +1,37 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Formik, Form } from 'formik'
+
+import { RadioInput, FormDebugger } from 'ui'
+
+export default {
+  title        :'f/fields/RadioInput',
+  component    :RadioInput,
+  subcomponents:{
+    // Item:RadioInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ companySize: '' }}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <>
+    <RadioInput value="1-3" name="companySize">1-3</RadioInput>
+    <RadioInput value="4-7" name="companySize">4-7</RadioInput>
+    <RadioInput value="8-10" name="companySize">8-10</RadioInput>
+    <RadioInput value="11-20" name="companySize">11-20</RadioInput>
+    <FormDebugger />
+  </>
+)

package/src/stories/f/RatingsInput.stories.jsx

@@ -0,0 +1,56 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Formik, Form } from 'formik'
+
+import { RatingsInput, FormDebugger } from 'ui'
+
+export default {
+  title        :'f/fields/RatingsInput',
+  component    :RatingsInput,
+  subcomponents:{
+    // Item:RatingsInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ ratings: '' }}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <>
+    <RatingsInput ratingCount={5} name="ratings" />
+    <FormDebugger />
+  </>
+)
+
+export const Numbers = () => (
+  <>
+    <RatingsInput ratingCount={10} name="ratings" showRatingValue />
+    <FormDebugger />
+  </>
+)
+
+export const Labels = () => (
+  <>
+    <RatingsInput
+      labelMax="very satisfied."
+      labelMin="not satisfied."
+      ratingCount={10}
+      name="ratings"
+      showRatingValue
+      displayRatingsLabel
+    />
+    <FormDebugger />
+  </>
+)

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

@@ -0,0 +1,81 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Formik, Form } from 'formik'
+
+import { SelectInput, FormDebugger } from 'ui'
+
+export default {
+  title        :'f/fields/SelectInput',
+  component    :SelectInput,
+  subcomponents:{
+    // Item:SelectInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ workType: 'Work' }}
+      >
+        <Form>
+
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <>
+    <SelectInput
+      name="workType"
+      label="Work Type"
+      options={['Work', 'Managing', 'Training']}
+    />
+    <FormDebugger />
+  </>
+)
+
+export const Objects = () => (
+  <>
+    <SelectInput
+      name="workType"
+      label="Work Type"
+      options={[
+        { 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 StringAndObjects = () => (
+  <>
+    <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' },
+      ]}
+    />
+    <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/TaskRecommendationInput.stories.jsx

@@ -0,0 +1,38 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Formik, Form } from 'formik'
+import { TaskRecommendationInput } from 'ui'
+
+export default {
+  title        :'f/fields/TaskRecommendationInput',
+  component    :TaskRecommendationInput,
+  subcomponents:{
+    // Item:TaskRecommendation.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ taskRecommendations: [] }}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <div className="y-background b-y v2 p-v" style={{ height: '100%' }}>
+    <TaskRecommendationInput
+      name="taskRecommendations"
+      value="businessTypes"
+      oneLiner="Build a list of contacts at businesses based on my criteria for potential customers"
+      label="Find potential business customers"
+      image="/Fundraising.svg"
+    />
+  </div>
+)

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

@@ -0,0 +1,79 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Formik, Form } from 'formik'
+
+import {
+  TextInput,
+  FormDebugger,
+} from 'ui'
+
+export default {
+  title        :'f/fields/TextInput',
+  component    :TextInput,
+  subcomponents:{
+    // Item:TextInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ firstName: '', date: '', time: '' }}
+      >
+        <Form>
+
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const validate = (value) => {
+    let errorMessage = ''
+    const isValid = value.length > 3
+
+    if (!isValid) {
+      errorMessage = 'Value should be greater than 3 characters'
+    }
+    return errorMessage
+  }
+  return (
+    <>
+      <TextInput
+        name="firstName"
+        label="What's your first name ?"
+        validate={validate}
+      />
+      <FormDebugger />
+    </>
+  )
+}
+
+export const DisabledTextInput = () => (
+  <div className="y-background b-y u2 pb-u">
+    <TextInput
+      name="firstName"
+      label="What's your first name ?"
+      disabled
+    />
+  </div>
+)
+
+export const DateTime = () => (
+  <div className="y-background b-y">
+    <TextInput
+      name="date"
+      label="Select date"
+      type="date"
+    />
+    <TextInput
+      name="time"
+      label="Select time"
+      type="time"
+    />
+    <FormDebugger />
+  </div>
+)

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

@@ -0,0 +1,49 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Formik, Form } from 'formik'
+
+import { TextareaInput, FormDebugger } from 'ui'
+
+export default {
+  title        :'f/fields/TextareaInput',
+  component    :TextareaInput,
+  subcomponents:{
+    // Item:TextareaInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ feedBack: '' }}
+      >
+        <Form>
+
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <div className="y-background b-y">
+    <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/stories/utils/Router.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { HashRouter as Router } from 'react-router-dom'
+// import { createBrowserHistory } from 'history'
+
+// const history = createBrowserHistory()
+
+const TestRouter = (props) => (
+  <Router
+    // history={history}
+    {...props}
+  />
+)
+
+/*
+export {
+  TestRouter as Router,
+  history,
+} */
+
+export default TestRouter

package/src/ui/a/AnimatedCounter/AnimatedCounter.jsx

@@ -0,0 +1,124 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect } from 'react'
+
+import CountUp from 'react-countup'
+
+import VisibilitySensor from 'react-visibility-sensor'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'animated-counter'
+
+/**
+ * This is the component description
+ */
+const AnimatedCounter = ({
+  id,
+  className:userClassName,
+  style,
+  color,
+  number,
+  unit,
+  description,
+  descriptionPosition,
+  unitPosition,
+  delay,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `x-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      {descriptionPosition === 'top' && <p className="info top-description uc s-1 md-s0">{description}</p>}
+      <div className="count s3">
+        {unitPosition === 'before' && <span>{unit}</span>}
+        <CountUp end={number} delay={delay} redraw>
+          {({ countUpRef, start }) => (
+            <VisibilitySensor onChange={start} delayedCall>
+              <span ref={countUpRef} />
+            </VisibilitySensor>
+          )}
+        </CountUp>
+        {unitPosition === 'after' && <span>{unit}</span>}
+      </div>
+      {descriptionPosition === 'bottom' && <p className="info uc s-1 md-s0 v50 mt-v">{description}</p>}
+    </div>
+  )
+}
+
+AnimatedCounter.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 count color
+   */
+  color:PropTypes.string,
+
+  /**
+   *  The review count value
+   */
+  number             :PropTypes.number,
+  /**
+   *  The review count unit
+   */
+  unit               :PropTypes.string,
+  /**
+   *  The review description
+   */
+  description        :PropTypes.string,
+  /**
+   *  react counter delay
+   */
+  delay              :PropTypes.number,
+  /**
+   *  If the animated counter description should be at the top
+   */
+  descriptionPosition:PropTypes.oneOf(['top', 'bottom']),
+  /**
+   * If the unit should be before or after the animated numbers
+   */
+  unitPosition       :PropTypes.string,
+}
+
+AnimatedCounter.defaultProps = {
+  color              :'main1',
+  descriptionPosition:'bottom',
+  unitPosition       :'after',
+}
+
+export default AnimatedCounter

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

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