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

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',
+}

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

@@ -0,0 +1,120 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Formik, Form } from 'formik'
+
+import {
+  TextInputV2,
+  FormDebugger,
+} from 'ui'
+
+export default {
+  title        :'f/fields/V2/TextInput',
+  component    :TextInputV2,
+  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' },
+    type        :{ control: 'text' },
+    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',
+    }}
+  >
+    <TextInputV2 {...args} />
+    <FormDebugger />
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  name :'email',
+  label:'How can we reach you ?',
+}
+
+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 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',
+}
+
+export const HasSymbol = Template.bind({})
+HasSymbol.args = {
+  ...Base.args,
+  symbol:"'$'",
+}

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

@@ -0,0 +1,107 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Formik, Form } from 'formik'
+
+import { TextareaInputV2, FormDebugger } from 'ui'
+
+export default {
+  title        :'f/fields/V2/TextareaInputV2',
+  component    :TextareaInputV2,
+  subcomponents:{
+    // Item:TextareaInputV2.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ feedback: '' }}
+      >
+        <Form>
+
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+    name              :{ control: 'text' },
+    label             :{ control: 'text' },
+    labelColor        :{ control: 'text' },
+    placeholder       :{ control: 'text' },
+    disabled          :{ control: 'boolean' },
+    labelAsDescription:{ control: 'boolean' },
+    optional          :{ control: 'boolean' },
+  },
+}
+
+const Template = (args) => (
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
+    <TextareaInputV2 {...args} />
+    <FormDebugger />
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  name :'feedback',
+  label:'What can we improve on?',
+}
+
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  optional:true,
+}
+
+export const Placeholder = Template.bind({})
+Placeholder.args = {
+  ...Base.args,
+  placeholder:'Type your feedback here...',
+}
+
+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,
+}
+
+export const VerticalResize = Template.bind({})
+VerticalResize.args = {
+  ...Base.args,
+  resize:'vertical',
+}
+
+export const HorizontalResize = Template.bind({})
+HorizontalResize.args = {
+  ...Base.args,
+  resize:'horizontal',
+}
+
+export const DisableResize = Template.bind({})
+DisableResize.args = {
+  ...Base.args,
+  resize:'none',
+}

package/src/stories/f/v2/__generated__/FormInputAllTaskStatusesQuery.graphql.js

@@ -0,0 +1,122 @@
+/**
+ * @flow
+ */
+
+/* eslint-disable */
+
+'use strict';
+
+/*::
+import type { ConcreteRequest } from 'relay-runtime';
+export type FormInputAllTaskStatusesQueryVariables = {||};
+export type FormInputAllTaskStatusesQueryResponse = {|
+  +allTaskStatuses: ?{|
+    +edges: $ReadOnlyArray<?{|
+      +node: ?{|
+        +id: string,
+        +status: string,
+      |}
+    |}>
+  |}
+|};
+export type FormInputAllTaskStatusesQuery = {|
+  variables: FormInputAllTaskStatusesQueryVariables,
+  response: FormInputAllTaskStatusesQueryResponse,
+|};
+*/
+
+
+/*
+query FormInputAllTaskStatusesQuery {
+  allTaskStatuses {
+    edges {
+      node {
+        id
+        status
+      }
+    }
+  }
+}
+*/
+
+const node/*: ConcreteRequest*/ = (function(){
+var v0 = [
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "TaskStatusNodeConnection",
+    "kind": "LinkedField",
+    "name": "allTaskStatuses",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "TaskStatusNodeEdge",
+        "kind": "LinkedField",
+        "name": "edges",
+        "plural": true,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "TaskStatusNode",
+            "kind": "LinkedField",
+            "name": "node",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "id",
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "status",
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "FormInputAllTaskStatusesQuery",
+    "selections": (v0/*: any*/),
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "FormInputAllTaskStatusesQuery",
+    "selections": (v0/*: any*/)
+  },
+  "params": {
+    "cacheID": "54ce3d351c6ef9fa16c73a954fc5cfea",
+    "id": null,
+    "metadata": {},
+    "name": "FormInputAllTaskStatusesQuery",
+    "operationKind": "query",
+    "text": "query FormInputAllTaskStatusesQuery {\n  allTaskStatuses {\n    edges {\n      node {\n        id\n        status\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+// prettier-ignore
+(node/*: any*/).hash = 'a86a4a669c61db10cd2bd9b72b3eeb12';
+
+module.exports = node;

package/src/stories/f/v2/__generated__/FormInputAllTeamsQuery.graphql.js

@@ -0,0 +1,139 @@
+/**
+ * @flow
+ */
+
+/* eslint-disable */
+
+'use strict';
+
+/*::
+import type { ConcreteRequest } from 'relay-runtime';
+export type FormInputAllTeamsQueryVariables = {|
+  name_Icontains?: ?string
+|};
+export type FormInputAllTeamsQueryResponse = {|
+  +allTeams: ?{|
+    +edges: $ReadOnlyArray<?{|
+      +node: ?{|
+        +id: string,
+        +name: string,
+      |}
+    |}>
+  |}
+|};
+export type FormInputAllTeamsQuery = {|
+  variables: FormInputAllTeamsQueryVariables,
+  response: FormInputAllTeamsQueryResponse,
+|};
+*/
+
+
+/*
+query FormInputAllTeamsQuery(
+  $name_Icontains: String
+) {
+  allTeams(name_Icontains: $name_Icontains) {
+    edges {
+      node {
+        id
+        name
+      }
+    }
+  }
+}
+*/
+
+const node/*: ConcreteRequest*/ = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "name_Icontains"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "name_Icontains",
+        "variableName": "name_Icontains"
+      }
+    ],
+    "concreteType": "TeamNodeConnection",
+    "kind": "LinkedField",
+    "name": "allTeams",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "TeamNodeEdge",
+        "kind": "LinkedField",
+        "name": "edges",
+        "plural": true,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "TeamNode",
+            "kind": "LinkedField",
+            "name": "node",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "id",
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "name",
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "FormInputAllTeamsQuery",
+    "selections": (v1/*: any*/),
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "FormInputAllTeamsQuery",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "dc9287c6d087d0f0e1be2e8ef405cb1f",
+    "id": null,
+    "metadata": {},
+    "name": "FormInputAllTeamsQuery",
+    "operationKind": "query",
+    "text": "query FormInputAllTeamsQuery(\n  $name_Icontains: String\n) {\n  allTeams(name_Icontains: $name_Icontains) {\n    edges {\n      node {\n        id\n        name\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+// prettier-ignore
+(node/*: any*/).hash = 'c76b6f84436895e8a6d0725bdd41cfe0';
+
+module.exports = node;