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

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

@@ -1,301 +0,0 @@
-/* @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

@@ -1,150 +0,0 @@
-/* @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

@@ -1,77 +0,0 @@
-/* @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

@@ -1,95 +0,0 @@
-/* @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',
-}