@pareto-engineering/design-system 1.0.3 → 2.0.0-alpha.5

package/src/stories/f/Description.stories.jsx

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

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-background1 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 (
+    <div className="y-background1 b-dark-y u2 pb-u">
+      <TextInput
+        name="firstName"
+        label="What's your first name ?"
+        validate={validate}
+      />
+      <FormDebugger />
+    </div>
+  )
+}
+
+export const DisabledTextInput = () => (
+  <div className="y-background1 b-dark-y u2 pb-u">
+    <TextInput
+      name="firstName"
+      label="What's your first name ?"
+      disabled
+    />
+  </div>
+)
+
+export const DateTime = () => (
+  <div className="y-background1 b-dark-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-background1 b-dark-y">
+    <TextareaInput
+      name="feedBack"
+      label="What can we improve on?"
+    />
+    <FormDebugger />
+  </div>
+)
+export const DisabledTextareaInput = () => (
+  <div className="y-background1 b-dark-y">
+    <TextareaInput
+      name="feedBack"
+      label="What can we improve on?"
+      disabled
+    />
+    <FormDebugger />
+  </div>
+)

package/src/stories/r/PrivateRoute.stories.jsx

@@ -0,0 +1,16 @@
+/* @pareto-engineering/generator-front 0.2.2 */
+// import * as React from 'react'
+
+import { PrivateRoute } from 'ui'
+
+export default {
+  title     :'r/common/PrivateRoute',
+  component :PrivateRoute,
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+}
+
+export const Base = () => (
+  'This component does not need a visual test.'
+)

package/src/stories/r/SwitchRouteMap.stories.jsx

@@ -0,0 +1,14 @@
+/* @pareto-engineering/generator-front 0.2.2 */
+// import * as React from 'react'
+
+import { SwitchRouteMap } from 'ui'
+
+export default {
+  title     :'r/SwitchRouteMap',
+  component :SwitchRouteMap,
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+}
+
+export const Base = () => 'This component does not need a visual test.'

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