@pareto-engineering/design-system 2.0.0-alpha.6 → 2.0.0-alpha.60

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

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
-
+import { useEffect } from 'react'
 import { ChoicesInput, FormDebugger } from 'ui'
-import { Formik, Form } from 'formik'
+import { Formik, Form, useField } from 'formik'
 
 export default {
   title        :'f/fields/ChoicesInput',
@@ -22,147 +22,109 @@ export default {
     ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    multiple          :{ control: 'boolean' },
+    gridColumnsDesktop:{ control: 'number' },
+    disabled          :{ control: 'boolean' },
   },
 }
 
-export const Base = () => {
-  const optionsMap = [
-    {
-      value:'red',
-      label:'Color Red',
-    },
-    {
-      value:'blue',
-      label:'Color Blue',
-    },
-    {
-      value:'green',
-      label:'Color Green',
-    },
-  ]
+const optionsMap = [
+  {
+    value:'red',
+    label:'Color Red',
+  },
+  {
+    value:'blue',
+    label:'Color Blue',
+  },
+  {
+    value:'green',
+    label:'Color Green',
+  },
+  {
+    value:'yellow',
+    label:'Color Yellow',
+  },
+  {
+    value:'oarnge',
+    label:'Color Orange',
+  },
+  {
+    value:'violet',
+    label:'Color Violet',
+  },
+  {
+    value:'brown',
+    label:'Color Brown',
+  },
+  {
+    value:'black',
+    label:'Color Black',
+  },
+]
+
+// eslint-disable-next-line react/prop-types
+const Template = ({ defaultValue, ...args }) => {
+  const Content = () => {
+    const [, , helpers] = useField(args.name)
+    const { setValue } = helpers
 
-  return (
+    useEffect(() => {
+      setValue(defaultValue)
+    }, [])
 
-    <>
-      <ChoicesInput id="colors" options={optionsMap} name="color" />
-      <FormDebugger />
-    </>
-  )
+    return (
+      <>
+        <ChoicesInput {...args} />
+        <FormDebugger />
+      </>
+    )
+  }
+  return <Content />
 }
 
-export const Multiple = () => {
-  const optionsMap = [
-    {
-      value:'red',
-      label:'Color Red',
-    },
-    {
-      value:'blue',
-      label:'Color Blue',
-    },
-    {
-      value:'green',
-      label:'Color Green',
-    },
-  ]
-
-  return (
-    <>
-      <ChoicesInput id="colors" options={optionsMap} name="color" multiple />
-      <FormDebugger />
-    </>
-  )
+export const Base = Template.bind({})
+Base.args = {
+  id     :'colors',
+  options:optionsMap,
+  name   :'color',
 }
 
-export const MultipleWithGrid = () => {
-  const optionsMap = [
-    {
-      value:'red',
-      label:'Color Red',
-    },
-    {
-      value:'blue',
-      label:'Color Blue',
-    },
-    {
-      value:'green',
-      label:'Color Green',
-    },
-    {
-      value:'yellow',
-      label:'Color Yellow',
-    },
-    {
-      value:'oarnge',
-      label:'Color Orange',
-    },
-    {
-      value:'violet',
-      label:'Color Violet',
-    },
-    {
-      value:'brown',
-      label:'Color Brown',
-    },
-    {
-      value:'black',
-      label:'Color Black',
-    },
-  ]
+export const WithDefaultFormikValue = Template.bind({})
+WithDefaultFormikValue.args = {
+  ...Base.args,
+  defaultValue:'red',
+}
 
-  return (
-    <>
-      <ChoicesInput id="colors" options={optionsMap} name="color" multiple gridColumnsDesktop={2} />
-      <FormDebugger />
-    </>
-  )
+export const Multiple = Template.bind({})
+Multiple.args = {
+  ...Base.args,
+  multiple:true,
 }
 
-export const ChoicesWithLabel = () => {
-  const optionsMap = [
-    {
-      value:'triangle',
-      label:'Triangle',
-    },
-    {
-      value:'square',
-      label:'Square',
-    },
-    {
-      value:'rectangle',
-      label:'Rectangle',
-    },
-  ]
+export const MultipleWithDefaultFormikValue = Template.bind({})
+MultipleWithDefaultFormikValue.args = {
+  ...Base.args,
+  multiple    :true,
+  defaultValue:['brown', 'violet'],
+}
 
-  return (
-    <>
-      <ChoicesInput id="shapes" options={optionsMap} name="shape" label="Geometric Shapes" />
-      <FormDebugger />
-    </>
-  )
+export const MultipleWithGrid = Template.bind({})
+MultipleWithGrid.args = {
+  ...Base.args,
+  multiple          :true,
+  gridColumnsDesktop:2,
 }
 
-export const DisabledChoicesInput = () => {
-  const optionsMap = [
-    {
-      value:'triangle',
-      label:'Triangle',
-    },
-    {
-      value:'square',
-      label:'Square',
-    },
-    {
-      value:'rectangle',
-      label:'Rectangle',
-    },
-  ]
+export const ChoicesWithLabel = Template.bind({})
+ChoicesWithLabel.args = {
+  ...Base.args,
+  label:'Select color',
+}
 
-  return (
-    <>
-      <ChoicesInput id="shapes" options={optionsMap} name="shape" label="Geometric Shapes" disabled />
-      <FormDebugger />
-    </>
-  )
+export const DisabledChoicesInput = Template.bind({})
+DisabledChoicesInput.args = {
+  ...ChoicesWithLabel.args,
+  disabled:true,
 }

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

@@ -3,6 +3,8 @@ import * as React from 'react'
 
 import { FormDescription as Description } from 'ui'
 
+import { Formik, Form } from 'formik'
+
 export default {
   title        :'f/common/Description',
   component    :Description,
@@ -10,13 +12,29 @@ export default {
     // Item:Description.Item
   },
   decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => (
+      <Formik
+        initialValues={{ email: '' }}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    description:{ control: 'text' },
+    name       :{ control: 'text' },
   },
 }
 
-export const Base = () => (
-  <Description>Sample Description</Description>
+const Template = (args) => (
+  <Description {...args} />
 )
+
+export const Base = Template.bind({})
+Base.args = {
+  description:'Sample Description',
+  name       :'email',
+}

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

@@ -8,6 +8,15 @@ import {
   FormDebugger,
 } from 'ui'
 
+import { fruits } from '../utils/testData'
+
+import {
+  RelayEnvironmentProvider,
+  mockRelayOperation,
+} from '../utils/relay'
+
+import generateNodeId from '../utils/generateNodeId'
+
 export default {
   title        :'f/FormInput',
   component    :FormInput,
@@ -25,6 +34,11 @@ export default {
         </Form>
       </Formik>
     ),
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
   ],
   argTypes:{
     backgroundColor:{ control: 'color' },
@@ -99,6 +113,251 @@ export const Base = () => {
   )
 }
 
+const allTeamsMockData = {
+  PageInfo() {
+    return {
+      hasNextPage    :true,
+      hasPreviousPage:true,
+    }
+  },
+  TeamNodeConnection:(args) => {
+    const edges = fruits.map((fruit) => ({
+      node:{
+        id  :generateNodeId('TeamNode'),
+        name:fruit,
+      },
+    }))
+
+    // eslint-disable-next-line camelcase
+    const { name_Icontains } = args?.args || {}
+
+    return ({
+      pageInfo:{
+        hasNextPage    :true,
+        hasPreviousPage:true,
+      },
+      // eslint-disable-next-line camelcase
+      edges:name_Icontains?.trim()
+        ? edges.filter(({ node }) => node.name
+          .toLowerCase()
+          .includes(name_Icontains.toLowerCase()))
+        : [],
+    })
+  },
+}
+
+const FETCH_TEAMS_QUERY = graphql`
+  query FormInputAllTeamsQuery($name_Icontains: String) {
+    allTeams(name_Icontains: $name_Icontains) {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+`
+
+export const WithQueryCombobox = () => {
+  const inputMap = [
+    {
+      type :'text',
+      name :'firstName',
+      label:"What's your first name ?",
+    },
+    {
+      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 :'query-combobox',
+      name :'team',
+      query:{
+        graphql :FETCH_TEAMS_QUERY,
+        accessor:'allTeams',
+      },
+      label        :'Search for a team',
+      optionsKeyMap:{
+        value   :'id',
+        getLabel:(node) => node.name,
+      },
+      searchVariable:'name_Icontains',
+    },
+    {
+      type :'query-combobox',
+      name :'teams',
+      query:{
+        graphql :FETCH_TEAMS_QUERY,
+        accessor:'allTeams',
+      },
+      label        :'Search for teams',
+      optionsKeyMap:{
+        value   :'id',
+        getLabel:(node) => node.name,
+      },
+      searchVariable:'name_Icontains',
+      multiple      :true,
+    },
+  ]
+
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+
+  return (
+    <>
+      {
+        inputMap.map((input) => <FormInput {...input} key={input.name} />)
+        }
+      <FormDebugger />
+
+    </>
+  )
+}
+
+const statuses = [
+  'Backlog',
+  'In Review',
+  'In Progress',
+  'Requested',
+  'Blocked',
+  'Completed',
+]
+const allTaskStatusesMockData = {
+  PageInfo() {
+    return {
+      hasNextPage    :true,
+      hasPreviousPage:true,
+    }
+  },
+  TaskStatusNodeConnection:() => ({
+    pageInfo:{
+      hasNextPage    :true,
+      hasPreviousPage:true,
+    },
+
+    edges:statuses.map((status) => ({
+      node:{
+        id:generateNodeId('TaskStatusNode'),
+        status,
+      },
+    })),
+  }),
+}
+
+const FETCH_ALL_TASK_STATUSES = graphql`
+  query FormInputAllTaskStatusesQuery {
+    allTaskStatuses {
+      edges {
+        node {
+          id
+          status
+        }
+      }
+    }
+  }
+`
+
+export const WithPrefetchedQuerySelect = () => {
+  mockRelayOperation(allTaskStatusesMockData)
+
+  const inputMap = [
+    {
+      type :'text',
+      name :'firstName',
+      label:"What's your first name ?",
+    },
+    {
+      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 :'query-select',
+      name :'status',
+      query:{
+        graphql :FETCH_ALL_TASK_STATUSES,
+        accessor:'allTaskStatuses',
+      },
+      label        :'Select Task Status',
+      optionsKeyMap:{
+        value   :'id',
+        getLabel:(node) => node.status,
+      },
+    },
+  ]
+
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+
+  return (
+    <>
+      {
+        inputMap.map((input) => <FormInput {...input} key={input.name} />)
+        }
+      <FormDebugger />
+
+    </>
+  )
+}
+
+export const WithRatingsInput = () => {
+  const inputMap = [
+    {
+      type :'text',
+      name :'firstName',
+      label:"What's your first name ?",
+    },
+    {
+      type       :'rating',
+      ratingCount:5,
+      name       :'ratings',
+      label      :'Your Rating',
+    },
+  ]
+
+  return (
+    <>
+      {
+        inputMap.map((input) => <FormInput {...input} key={input.name} />)
+        }
+      <FormDebugger />
+
+    </>
+  )
+}
+
 export const ExtensibleFormInput = () => {
   const ExtendedTextInput = (props) => (
     <TextInput