@pareto-engineering/design-system 4.0.0-alpha.62 → 4.0.0-alpha.63

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

@@ -0,0 +1,301 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Formik, Form, useField } from 'formik'
+
+import { Button, FormDebugger, QueryComboboxV2 } from 'ui'
+
+import { fruits } from '../../utils/testData'
+
+import generateNodeId from '../../utils/generateNodeId'
+
+import {
+  RelayEnvironmentProvider,
+  mockRelayOperation,
+  // environment,
+} from '../../utils/relay'
+
+export default {
+  title        :'f/fields/V2/QueryComboboxV2',
+  component    :QueryComboboxV2,
+  subcomponents:{
+    // Item:QueryComboboxV2.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
+  ],
+  argTypes:{
+    disabled  :{ control: 'boolean' },
+    type      :{ control: 'text' },
+    name      :{ control: 'text' },
+    color     :{ control: 'text' },
+    label     :{ control: 'text' },
+    labelColor:{ control: 'text' },
+    multiple  :{ control: 'boolean' },
+    optional  :{ 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 (
+      <div
+        style={{
+          display      :'flex',
+          flexDirection:'column',
+          gap          :'1rem',
+        }}
+      >
+        <QueryComboboxV2
+          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>
+          <FormDebugger />
+          <Button
+            onClick={updateFormikState}
+          >
+            {multiple ? 'Add formik values' : 'Replace formik value'}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  let initialValues = defaultFormikState
+
+  if (!defaultFormikState && multiple) {
+    initialValues = []
+  } else if (!defaultFormikState && !multiple) {
+    initialValues = {}
+  }
+
+  return (
+    <Formik
+      initialValues={initialValues}
+    >
+      <Form>
+        <Content />
+      </Form>
+    </Formik>
+  )
+}
+
+export const Optional = ResolvedTemplate.bind({})
+Optional.args = {
+  optional:true,
+}
+
+export const WithPlaceholder = ResolvedTemplate.bind({})
+WithPlaceholder.args = {
+  placeholder:'Search for a team',
+}
+
+export const WithPromptToCreateNewOption = ResolvedTemplate.bind({})
+WithPromptToCreateNewOption.args = {
+  placeholder          :'Search for a team',
+  promptCreateNewOption:true,
+}
+
+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 MultipleSelectWithPromptForNewOptions = ResolvedTemplate.bind({})
+MultipleSelectWithPromptForNewOptions.args = {
+  multiple             :true,
+  promptCreateNewOption: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/v2/QuerySelect.stories.jsx

@@ -0,0 +1,150 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { QuerySelectV2, 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/V2/QuerySelectV2',
+  component    :QuerySelectV2,
+  subcomponents:{
+    // Item:QuerySelectV2.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
+  ],
+  argTypes:{
+    color     :{ control: 'text' },
+    label     :{ control: 'text' },
+    labelColor:{ control: 'text' },
+    isLoading :{ control: 'boolean' },
+    optional  :{ 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, ...args }) => {
+  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 = () => (
+    <div
+      style={{
+        display      :'flex',
+        flexDirection:'column',
+        gap          :'1rem',
+      }}
+    >
+      <QuerySelectV2
+        name="status"
+        label="Select Task Status"
+        query={{
+          graphql :FETCH_ALL_TASK_STATUSES,
+          accessor:'allTaskStatuses',
+        }}
+        optionsKeyMap={{
+          value   :'id',
+          getLabel:(node) => node.status,
+        }}
+        {...args}
+      />
+      <FormDebugger />
+    </div>
+  )
+
+  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,
+}
+
+export const Optional = Template.bind({})
+Optional.args = {
+  optional:true,
+}

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

@@ -0,0 +1,77 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Formik, Form } from 'formik'
+
+import { RatingsInputV2, FormDebugger } from 'ui'
+
+export default {
+  title        :'f/fields/V2/RatingsInputV2',
+  component    :RatingsInputV2,
+  subcomponents:{
+    // Item:RatingsInputV2.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ ratings: '' }}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+    ratingCount        :{ control: 'number' },
+    name               :{ control: 'text' },
+    label              :{ control: 'text' },
+    labelColor         :{ control: 'text' },
+    showRatingValue    :{ control: 'boolean' },
+    displayRatingsLabel:{ control: 'boolean' },
+    labelMax           :{ control: 'text' },
+    labelMin           :{ control: 'text' },
+    optional           :{ control: 'boolean' },
+  },
+}
+
+const Template = (args) => (
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
+    <RatingsInputV2 {...args} />
+    <FormDebugger />
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  ratingCount:5,
+  name       :'ratings',
+  label      :'Your Rating',
+}
+
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  optional:true,
+}
+
+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/v2/SelectInput.stories.jsx

@@ -0,0 +1,95 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Formik, Form } from 'formik'
+
+import { SelectInputV2, FormDebugger } from 'ui'
+
+export default {
+  title        :'f/fields/V2/SelectInputV2',
+  component    :SelectInputV2,
+  subcomponents:{
+    // Item:SelectInputV2.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ workType: '' }}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    color     :{ control: 'text' },
+    label     :{ control: 'text' },
+    labelColor:{ control: 'text' },
+    disabled  :{ control: 'boolean' },
+    optional  :{ control: 'boolean' },
+  },
+}
+
+const Template = (args) => (
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
+    <SelectInputV2 {...args} />
+    <FormDebugger />
+  </div>
+)
+
+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 Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  optional:true,
+}
+
+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,
+}
+
+export const DisabledWithDescriptionSelectInput = Template.bind({})
+DisabledWithDescriptionSelectInput.args = {
+  ...Base.args,
+  disabled   :true,
+  description:'This is a description',
+}