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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.62",
+  "version": "4.0.0-alpha.63",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@lexical/react": "^0.11.3",
-    "@pareto-engineering/assets": "^4.0.0-alpha.61",
+    "@pareto-engineering/assets": "^4.0.0-alpha.63",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
     "@pareto-engineering/styles": "^4.0.0-alpha.57",
     "@pareto-engineering/utils": "^4.0.0-alpha.46",
@@ -71,5 +71,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "a400b51ffb829abc0b0ee1bc447c69e7b0723a41"
+  "gitHead": "d150baeb18c0f279e529ba46a7248fdb16180853"
 }

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

@@ -0,0 +1,102 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useEffect } from 'react'
+
+import { Formik, Form, useField } from 'formik'
+
+import { CheckboxV2, FormDebugger } from 'ui'
+
+export default {
+  title        :'f/fields/V2/CheckboxV2',
+  component    :CheckboxV2,
+  subcomponents:{
+    // Item:CheckboxV2.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => (
+      <Formik
+        initialValues={{}}
+      >
+        <Form>
+
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    label       :{ control: 'text' },
+    labelColor  :{ control: 'text' },
+    description :{ control: 'text' },
+    defaultValue:{ control: 'boolean' },
+    disabled    :{ control: 'boolean' },
+    optional    :{ control: 'boolean' },
+  },
+}
+
+// eslint-disable-next-line react/prop-types
+const Template = ({ defaultValue, ...args }) => {
+  const Content = () => {
+    const { name } = args
+    const [, , helpers] = useField(name)
+    const { setValue } = helpers
+
+    useEffect(() => {
+      if (defaultValue) {
+        setValue(defaultValue)
+      }
+    }, [defaultValue])
+
+    return (
+      <div
+        style={{
+          display      :'flex',
+          flexDirection:'column',
+          gap          :'1rem',
+        }}
+      >
+        <CheckboxV2 {...args} />
+        <FormDebugger />
+      </div>
+    )
+  }
+
+  return <Content />
+}
+
+export const Base = Template.bind({})
+Base.args = {
+  name:'urgent',
+}
+
+export const WithLabel = Template.bind({})
+WithLabel.args = {
+  ...Base.args,
+  label:'Urgent',
+}
+
+export const WithDescription = Template.bind({})
+WithDescription.args = {
+  ...Base.args,
+  description:'Click on the checkboxV2',
+}
+
+export const WithDefaultFormikValue = Template.bind({})
+WithDefaultFormikValue.args = {
+  ...Base.args,
+  defaultValue:true,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...Base.args,
+  disabled:true,
+}
+
+export const Optional = Template.bind({})
+Optional.args = {
+  ...WithLabel.args,
+  optional:true,
+}

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

@@ -0,0 +1,139 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { useEffect } from 'react'
+import { ChoicesInputV2, FormDebugger } from 'ui'
+import { Formik, Form, useField } from 'formik'
+
+export default {
+  title        :'f/fields/V2/ChoicesInputV2',
+  component    :ChoicesInputV2,
+  subcomponents:{
+    // Item:ChoicesInputV2.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{}}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    color     :{ control: 'color' },
+    labelColor:{ control: 'color' },
+    multiple  :{ control: 'boolean' },
+    disabled  :{ control: 'boolean' },
+    optional  :{ control: 'boolean' },
+  },
+}
+
+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
+
+    useEffect(() => {
+      if (defaultValue) {
+        setValue(defaultValue)
+      }
+    }, [defaultValue])
+
+    return (
+      <div
+        style={{
+          display      :'flex',
+          flexDirection:'column',
+          gap          :'1rem',
+        }}
+      >
+        <ChoicesInputV2 {...args} />
+        <FormDebugger />
+      </div>
+    )
+  }
+  return <Content />
+}
+
+export const Base = Template.bind({})
+Base.args = {
+  id     :'colors',
+  options:optionsMap,
+  name   :'color',
+}
+
+export const WithDefaultFormikValue = Template.bind({})
+WithDefaultFormikValue.args = {
+  ...Base.args,
+  defaultValue:'red',
+}
+
+export const Multiple = Template.bind({})
+Multiple.args = {
+  ...Base.args,
+  multiple:true,
+}
+
+export const MultipleWithDefaultFormikValue = Template.bind({})
+MultipleWithDefaultFormikValue.args = {
+  ...Base.args,
+  multiple    :true,
+  defaultValue:['brown', 'violet'],
+}
+
+export const ChoicesWithLabel = Template.bind({})
+ChoicesWithLabel.args = {
+  ...Base.args,
+  label:'Select color',
+}
+
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  label   :'Select color',
+  optional:true,
+}
+
+export const DisabledChoicesInput = Template.bind({})
+DisabledChoicesInput.args = {
+  ...ChoicesWithLabel.args,
+  disabled:true,
+}

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

@@ -0,0 +1,81 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Formik, Form } from 'formik'
+
+import { EditorInputV2, FormDebugger } from 'ui'
+
+export default {
+  title        :'f/fields/V2/EditorInputV2',
+  component    :EditorInputV2,
+  subcomponents:{
+    // Item:TextareaInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ instructions: '' }}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    name              :{ control: 'text' },
+    label             :{ control: 'text' },
+    labelColor        :{ control: 'text' },
+    disabled          :{ control: 'boolean' },
+    labelAsDescription:{ control: 'boolean' },
+    optional          :{ control: 'boolean' },
+    showDebugger      :{ control: 'boolean' },
+  },
+}
+
+const Template = (args) => (
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
+    <EditorInputV2 {...args} />
+    <FormDebugger />
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  name :'instructions',
+  label:'Project Instructions',
+}
+
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  optional:true,
+}
+
+// const validate = (value) => {
+//   let errorMessage = ''
+//   const isValid = value.length > 3
+
+//   if (!isValid) {
+//     errorMessage = 'Value should be greater than 3 characters'
+//   }
+//   return errorMessage
+// }
+
+// export const Validation = Template.bind({})
+// Validation.args = {
+//   ...Base.args,
+//   validate,
+// }
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...Base.args,
+  disabled:true,
+}

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

@@ -0,0 +1,93 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Formik, Form } from 'formik'
+
+import {
+  LinkInputV2,
+  FormDebugger,
+} from 'ui'
+
+export default {
+  title        :'f/fields/V2/LinkInputV2',
+  component    :LinkInputV2,
+  subcomponents:{
+    // Item:TextInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ email: '', name: '', company: '' }}
+      >
+        <Form>
+
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+    placeholder :{ control: 'text' },
+    autoComplete:{ control: 'select', options: ['off', 'on'] },
+    disabled    :{ control: 'boolean' },
+    name        :{ control: 'text' },
+    label       :{ control: 'text' },
+    labelColor  :{ control: 'text' },
+    optional    :{ control: 'boolean' },
+    symbol      :{ control: 'text' },
+  },
+}
+
+// eslint-disable-next-line react/prop-types
+const Template = (args) => (
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
+    <LinkInputV2 {...args} />
+    <FormDebugger />
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  name :'link',
+  label:'Spreadsheet Link',
+}
+
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  optional:true,
+}
+
+const validate = (value) => {
+  let errorMessage = ''
+  const isValid = value.length > 3
+
+  if (!isValid) {
+    errorMessage = 'Value should be greater than 3 characters'
+  }
+  return errorMessage
+}
+
+export const WithValidation = Template.bind({})
+WithValidation.args = {
+  ...Base.args,
+  validate,
+}
+
+export const WithPlaceholder = Template.bind({})
+WithPlaceholder.args = {
+  ...Base.args,
+  placeholder:'Email address',
+}
+
+export const WithDisabled = Template.bind({})
+WithDisabled.args = {
+  ...Base.args,
+  disabled:true,
+}

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

@@ -0,0 +1,144 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { QueryChoicesV2, FormDebugger } from 'ui'
+
+import { Formik, Form } from 'formik'
+
+import {
+  RelayEnvironmentProvider,
+  mockRelayOperation,
+  environment,
+} from '../../utils/relay'
+
+import generateNodeId from '../../utils/generateNodeId'
+
+export default {
+  title        :'f/fields/V2/QueryChoicesV2',
+  component    :QueryChoicesV2,
+  subcomponents:{
+    // Item:QueryChoicesV2.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
+  ],
+  argTypes:{
+    color     :{ control: 'color' },
+    labelColor:{ control: 'color' },
+    multiple  :{ control: 'boolean' },
+    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 QueryChoicesAllTaskStatusesQuery {
+    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',
+      }}
+    >
+      <QueryChoicesV2
+        name="status"
+        label="Select 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 Optional = Template.bind({})
+Optional.args = {
+  optional:true,
+}