@pareto-engineering/design-system 0.0.1-alpha.9 → 0.0.8-testing-id.0

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

@@ -0,0 +1,451 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Formik, Form } from 'formik'
+
+import {
+  FormInput,
+  TextInput,
+  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,
+  subcomponents:{
+    // Item:FormInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ firstName: 'Test' }}
+      >
+        <Form>
+
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
+  ],
+  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 :'checkbox',
+      name :'urgent',
+      label:'Urgent',
+    },
+    {
+      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 />
+
+    </>
+  )
+}
+
+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
+      {...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,27 @@
+/* @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' },
+  },
+}
+
+const Template = (args) => <Label {...args}>Sample Label</Label>
+
+export const Base = Template.bind()
+
+export const Optional = Template.bind({})
+Optional.args = {
+  optional:true,
+}