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

package/src/stories/f/QueryCombobox.stories.jsx

@@ -0,0 +1,273 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Formik, Form, useField } from 'formik'
+
+import { Button, FormDebugger, QueryCombobox } from 'ui'
+
+import { fruits } from '../utils/testData'
+
+import generateNodeId from '../utils/generateNodeId'
+
+import {
+  RelayEnvironmentProvider,
+  mockRelayOperation,
+  // environment,
+} from '../utils/relay'
+
+export default {
+  title        :'f/fields/QueryCombobox',
+  component    :QueryCombobox,
+  subcomponents:{
+    // Item:QueryCombobox.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+    multiple:{ control: 'boolean' },
+    disabled:{ control: 'boolean' },
+  },
+}
+
+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 QueryComboboxAllTeamsQuery($name_Icontains: String) {
+    allTeams(name_Icontains: $name_Icontains) {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+`
+
+// eslint-disable-next-line react/prop-types
+const ResolvedTemplate = ({ defaultFormikState, ...otherProps }) => {
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+
+  const { multiple } = otherProps
+
+  const Content = () => {
+    const name = multiple ? 'teams' : 'team'
+
+    const [, meta, helpers] = useField(name)
+
+    const { value } = meta
+
+    const { setValue } = helpers
+
+    const updateFormikState = () => {
+      if (multiple) {
+        setValue([
+          ...(value || []),
+          {
+            value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNk',
+            label:'Matomoko',
+          },
+          {
+            value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNp',
+            label:'Chungwa',
+          },
+        ])
+      } else {
+        setValue({
+          value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNk',
+          label:'Kafagoho',
+        })
+      }
+    }
+
+    return (
+      <>
+        <QueryCombobox
+          label="Search for a team"
+          optionsKeyMap={{
+            value   :'id',
+            getLabel:(node) => node.name,
+          }}
+          query={{
+            graphql :FETCH_TEAMS_QUERY,
+            accessor:'allTeams',
+          }}
+          name={name}
+          searchVariable="name_Icontains"
+          {...otherProps}
+        />
+        <div
+          style={{
+            display      :'flex',
+            alignItems   :'flex-end',
+            flexDirection:'column',
+          }}
+        >
+          <FormDebugger />
+          <Button
+            onClick={updateFormikState}
+          >
+            {multiple ? 'Add formik values' : 'Replace formik value'}
+          </Button>
+        </div>
+      </>
+    )
+  }
+
+  let initialValues = defaultFormikState
+
+  if (!defaultFormikState && multiple) {
+    initialValues = []
+  } else if (!defaultFormikState && !multiple) {
+    initialValues = {}
+  }
+
+  return (
+    <Formik
+      initialValues={initialValues}
+    >
+      <Form>
+        <Content />
+      </Form>
+    </Formik>
+  )
+}
+
+export const SingleSelect = ResolvedTemplate.bind({})
+SingleSelect.args = {
+  multiple:false,
+}
+
+export const SingleSelectWithDefaultFormikState = ResolvedTemplate.bind({})
+SingleSelectWithDefaultFormikState.args = {
+  multiple          :false,
+  defaultFormikState:{
+    team:{
+      value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+      label:'Apple',
+    },
+  },
+}
+
+export const MultipleSelect = ResolvedTemplate.bind({})
+MultipleSelect.args = {
+  multiple          :true,
+  defaultFormikState:{ teams: [] },
+}
+
+export const MultipleSelectWithDefaultFormikState = ResolvedTemplate.bind({})
+MultipleSelectWithDefaultFormikState.args = {
+  multiple          :true,
+  defaultFormikState:{
+    teams:[
+      {
+        value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+        label:'Apple',
+      },
+      {
+        value:'VGVhbU5vZGU6MDA0N2U4MzktODY0Zi00N2U5LTg3ZjgtZGUwMmM2Yzg1YWJm',
+        label:'Pear',
+      },
+    ],
+  },
+}
+
+// eslint-disable-next-line react/prop-types
+// const RejectedTemplate = ({ multiple }) => {
+//   const Content = () => {
+//     environment.mock.queuePendingOperation(
+//       FETCH_TEAMS_QUERY,
+//       { name_Icontains: 'a' },
+//     )
+
+//     environment.mock.rejectMostRecentOperation('An error has occured while fetching the teams')
+
+//     const name = multiple ? 'teams' : 'team'
+
+//     const [, meta, helpers] = useField(name)
+
+//     const { setValue, setError } = helpers
+
+//     const { error } = meta
+
+//     return (
+//       <>
+//         <QueryCombobox
+//           query={FETCH_TEAMS_QUERY}
+//           label="Search for a team"
+//           optionsKeyMap={{
+//             value:'id',
+//             label:'name',
+//           }}
+//           error={error}
+//           setValue={setValue}
+//           setError={setError}
+//           name={name}
+//           multiple={multiple}
+//           graphQlNode="allTeams"
+//           searchVariable="name_Icontains"
+//         />
+//         <FormDebugger />
+//       </>
+//     )
+//   }
+
+//   return (
+//     <Formik
+//       initialValues={{ team: '' }}
+//     >
+//       <Form>
+//         <Content />
+//       </Form>
+//     </Formik>
+//   )
+// }
+
+// export const SingleSelectWithError = RejectedTemplate.bind({})
+// SingleSelectWithError.args = {
+//   multiple:false,
+// }
+
+// export const MultipleSelectWithError = RejectedTemplate.bind({})
+// MultipleSelectWithError.args = {
+//   multiple:true,
+// }

package/src/stories/f/QuerySelect.stories.jsx

@@ -0,0 +1,135 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { QuerySelect, FormDebugger } from 'ui'
+
+import { Formik, Form } from 'formik'
+
+import generateNodeId from '../utils/generateNodeId'
+
+import {
+  RelayEnvironmentProvider,
+  mockRelayOperation,
+  environment,
+} from '../utils/relay'
+
+export default {
+  title        :'f/fields/QuerySelect',
+  component    :QuerySelect,
+  subcomponents:{
+    // Item:QuerySelect.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+    isLoading:{ control: 'boolean' },
+  },
+}
+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 QuerySelectAllTaskStatusesQuery {
+    allTaskStatuses {
+      edges {
+        node {
+          id
+          status
+        }
+      }
+    }
+  }
+`
+
+// eslint-disable-next-line react/prop-types
+const Template = ({ isLoading, defaultFormikState }) => {
+  if (isLoading) {
+    setTimeout(() => {
+      mockRelayOperation(allTaskStatusesMockData)
+      environment.mock.queuePendingOperation(
+        FETCH_ALL_TASK_STATUSES,
+      )
+    }, 500)
+  } else {
+    mockRelayOperation(allTaskStatusesMockData)
+    environment.mock.queuePendingOperation(
+      FETCH_ALL_TASK_STATUSES,
+    )
+  }
+
+  const Content = () => (
+    <>
+      <QuerySelect
+        name="status"
+        label="Select Task Status"
+        query={{
+          graphql :FETCH_ALL_TASK_STATUSES,
+          accessor:'allTaskStatuses',
+        }}
+        optionsKeyMap={{
+          value   :'id',
+          getLabel:(node) => node.status,
+        }}
+      />
+      <FormDebugger />
+    </>
+  )
+
+  const initialValues = defaultFormikState ?? { status: '' }
+
+  return (
+    <Formik
+      initialValues={initialValues}
+    >
+      <Form>
+        <Content />
+      </Form>
+    </Formik>
+  )
+}
+
+export const Base = Template.bind({})
+export const WithDefaultValue = Template.bind({})
+WithDefaultValue.args = {
+  defaultFormikState:{
+    status:'VGFza1N0YXR1c05vZGU6NGRiYjNlMmItMGIxYy00ZjIxLTk0MmUtZTNjZGQwMjdiNjU3',
+  },
+}
+export const LoadingOptions = Template.bind({})
+LoadingOptions.args = {
+  isLoading:true,
+}

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

@@ -23,34 +23,41 @@ export default {
     ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    ratingCount        :{ control: 'number' },
+    name               :{ control: 'text' },
+    label              :{ control: 'text' },
+    showRatingValue    :{ control: 'boolean' },
+    displayRatingsLabel:{ control: 'boolean' },
+    labelMax           :{ control: 'text' },
+    labelMin           :{ control: 'text' },
   },
 }
 
-export const Base = () => (
+const Template = (args) => (
   <>
-    <RatingsInput ratingCount={5} name="ratings" />
+    <RatingsInput {...args} />
     <FormDebugger />
   </>
 )
 
-export const Numbers = () => (
-  <>
-    <RatingsInput ratingCount={10} name="ratings" showRatingValue />
-    <FormDebugger />
-  </>
-)
+export const Base = Template.bind({})
+Base.args = {
+  ratingCount:5,
+  name       :'ratings',
+  label      :'Your Rating',
+}
 
-export const Labels = () => (
-  <>
-    <RatingsInput
-      labelMax="very satisfied."
-      labelMin="not satisfied."
-      ratingCount={10}
-      name="ratings"
-      showRatingValue
-      displayRatingsLabel
-    />
-    <FormDebugger />
-  </>
-)
+export const Numbers = Template.bind({})
+Numbers.args = {
+  ...Base.args,
+  showRatingValue:true,
+}
+
+export const Labels = Template.bind({})
+Labels.args = {
+  ...Numbers.args,
+  labelMax           :'very satisfied.',
+  labelMin           :'not satisfied.',
+  displayRatingsLabel:true,
+}

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

@@ -13,69 +13,61 @@ export default {
   decorators:[
     (storyfn) => (
       <Formik
-        initialValues={{ workType: 'Work' }}
+        initialValues={{ workType: '' }}
       >
         <Form>
-
           { storyfn() }
         </Form>
       </Formik>
     ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    disabled:{ control: 'boolean' },
   },
 }
 
-export const Base = () => (
+const Template = (args) => (
   <>
-    <SelectInput
-      name="workType"
-      label="Work Type"
-      options={['Work', 'Managing', 'Training']}
-    />
+    <SelectInput {...args} />
     <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 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' },
+  ],
+}
 
-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 />
-  </>
-)
+export const StringAndObjects = Template.bind({})
+StringAndObjects.args = {
+  ...Base.args,
+  options:[...Base.args.options, 'Option1', 'Option2', 'Option3'],
+}
+
+const requiredInput = (inputValue) => {
+  let error = ''
+
+  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

@@ -26,54 +26,74 @@ export default {
     ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    placeholder :{ control: 'text' },
+    autoComplete:{ control: 'select', options: ['off', 'on'] },
+    disabled    :{ control: 'boolean' },
+    type        :{ control: 'text' },
+    name        :{ control: 'text' },
+    label       :{ control: 'text' },
   },
 }
 
-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="y-background1 b-dark-y u2 pb-u">
-      <TextInput
-        name="firstName"
-        label="What's your first name ?"
-        validate={validate}
-      />
-      <FormDebugger />
-    </div>
-  )
+  return errorMessage
 }
 
-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 WithValidation = Template.bind({})
+WithValidation.args = {
+  ...Base.args,
+  validate,
+}
 
-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>
-)
+export const WithPlaceholder = Template.bind({})
+WithPlaceholder.args = {
+  ...Base.args,
+  placeholder:'First Name',
+}
+
+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',
+}