@pareto-engineering/design-system 2.0.0-alpha.6 → 2.0.0-alpha.61

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

@@ -14,7 +14,7 @@ export default {
   decorators:[
     (storyfn) => (
       <Formik
-        initialValues={{ feedBack: '' }}
+        initialValues={{ feedback: '' }}
       >
         <Form>
 
@@ -24,26 +24,70 @@ export default {
     ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    name              :{ control: 'text' },
+    label             :{ control: 'text' },
+    placeholder       :{ control: 'text' },
+    disabled          :{ control: 'boolean' },
+    labelAsDescription:{ control: 'boolean' },
   },
 }
 
-export const Base = () => (
-  <div className="y-background1 b-dark-y">
-    <TextareaInput
-      name="feedBack"
-      label="What can we improve on?"
-    />
+const Template = (args) => (
+  <>
+    <TextareaInput {...args} />
     <FormDebugger />
-  </div>
-)
-export const DisabledTextareaInput = () => (
-  <div className="y-background1 b-dark-y">
-    <TextareaInput
-      name="feedBack"
-      label="What can we improve on?"
-      disabled
-    />
-    <FormDebugger />
-  </div>
+  </>
 )
+
+export const Base = Template.bind({})
+Base.args = {
+  name :'feedback',
+  label:'What can we improve on?',
+}
+
+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/__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/__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;

package/src/stories/f/__generated__/QueryComboboxAllTeamsQuery.graphql.js

@@ -0,0 +1,139 @@
+/**
+ * @flow
+ */
+
+/* eslint-disable */
+
+'use strict';
+
+/*::
+import type { ConcreteRequest } from 'relay-runtime';
+export type QueryComboboxAllTeamsQueryVariables = {|
+  name_Icontains?: ?string
+|};
+export type QueryComboboxAllTeamsQueryResponse = {|
+  +allTeams: ?{|
+    +edges: $ReadOnlyArray<?{|
+      +node: ?{|
+        +id: string,
+        +name: string,
+      |}
+    |}>
+  |}
+|};
+export type QueryComboboxAllTeamsQuery = {|
+  variables: QueryComboboxAllTeamsQueryVariables,
+  response: QueryComboboxAllTeamsQueryResponse,
+|};
+*/
+
+
+/*
+query QueryComboboxAllTeamsQuery(
+  $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": "QueryComboboxAllTeamsQuery",
+    "selections": (v1/*: any*/),
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "QueryComboboxAllTeamsQuery",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "a507170c1616920d93ea7ceb061097d1",
+    "id": null,
+    "metadata": {},
+    "name": "QueryComboboxAllTeamsQuery",
+    "operationKind": "query",
+    "text": "query QueryComboboxAllTeamsQuery(\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 = '243f007a2e8d0c359ad2976f1c68a472';
+
+module.exports = node;

package/src/stories/f/__generated__/QuerySelectAllTaskStatusesQuery.graphql.js

@@ -0,0 +1,122 @@
+/**
+ * @flow
+ */
+
+/* eslint-disable */
+
+'use strict';
+
+/*::
+import type { ConcreteRequest } from 'relay-runtime';
+export type QuerySelectAllTaskStatusesQueryVariables = {||};
+export type QuerySelectAllTaskStatusesQueryResponse = {|
+  +allTaskStatuses: ?{|
+    +edges: $ReadOnlyArray<?{|
+      +node: ?{|
+        +id: string,
+        +status: string,
+      |}
+    |}>
+  |}
+|};
+export type QuerySelectAllTaskStatusesQuery = {|
+  variables: QuerySelectAllTaskStatusesQueryVariables,
+  response: QuerySelectAllTaskStatusesQueryResponse,
+|};
+*/
+
+
+/*
+query QuerySelectAllTaskStatusesQuery {
+  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": "QuerySelectAllTaskStatusesQuery",
+    "selections": (v0/*: any*/),
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "QuerySelectAllTaskStatusesQuery",
+    "selections": (v0/*: any*/)
+  },
+  "params": {
+    "cacheID": "bd929dd60893f2a67f23d8cd2fb003de",
+    "id": null,
+    "metadata": {},
+    "name": "QuerySelectAllTaskStatusesQuery",
+    "operationKind": "query",
+    "text": "query QuerySelectAllTaskStatusesQuery {\n  allTaskStatuses {\n    edges {\n      node {\n        id\n        status\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+// prettier-ignore
+(node/*: any*/).hash = '31d9d1e820e814f7cee8ef7b273074ab';
+
+module.exports = node;

package/src/stories/test/QueryLoader.stories.jsx

@@ -0,0 +1,36 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { QueryLoader } from 'ui'
+
+import {
+  RelayEnvironmentProvider,
+  mockRelayOperation,
+} from '../utils/relay'
+
+export default {
+  title        :'test/QueryLoader',
+  component    :QueryLoader,
+  subcomponents:{
+    // Item:QueryLoader.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  mockRelayOperation()
+
+  return (
+    <QueryLoader />
+  )
+}

package/src/stories/utils/generateNodeId.js

@@ -0,0 +1,12 @@
+/* eslint-disable no-bitwise */
+/* eslint-disable no-mixed-operators */
+const uuidv4 = () => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11)
+  .replace(
+    /[018]/g,
+    (c) => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4)
+      .toString(16),
+  )
+
+const generateNodeId = (objectNode) => btoa(`${objectNode}:${uuidv4()}`)
+
+export default generateNodeId

package/src/stories/utils/lorem.js

@@ -0,0 +1,15 @@
+export default `Lorem ipsum dolor sit amet consectetur adipisicing elit. Est cupiditate temporibus quos officia, incidunt nesciunt dolorum eligendi, aspernatur voluptates sequi natus tempora autem molestias, illo reprehenderit mollitia. Voluptas, quaerat sequi?
+       Magnam excepturi impedit odit consectetur quaerat, provident, quod facere, ipsa distinctio quae expedita! Doloribus adipisci harum dicta nulla commodi cum incidunt dignissimos? Id accusantium quos ullam placeat necessitatibus. Mollitia, debitis?
+       Repudiandae odio alias odit vel voluptatibus officiis, quod praesentium adipisci, in optio voluptate magnam? Ab saepe maxime, corrupti dolore natus quis accusantium hic iste ullam harum repellat sint commodi cum?
+       Vero et accusamus voluptatibus exercitationem, perspiciatis nisi tempora, autem consectetur deserunt ex fugiat cum iure sed dolore, perferendis eos quia voluptate. Ratione autem minus quas iure dicta doloribus ad nulla!
+       Saepe, ipsum nisi impedit similique vel eligendi ex quidem ea rem officiis praesentium dolores ipsa sit cumque eaque distinctio soluta qui dolore veniam accusamus facilis voluptas minus. Animi, sequi necessitatibus?
+       Explicabo in nisi, id rerum omnis doloribus error! Delectus quasi consequuntur, adipisci tempore eaque, ad ipsa porro consectetur natus architecto iure aut aliquid tenetur totam unde illum saepe, ipsum deserunt!
+       Dicta assumenda odit eius tempora illo veniam ea ab enim? Maxime suscipit quae quas sunt eveniet tempora nesciunt, itaque aliquam deserunt culpa eius enim asperiores eum beatae dolore modi sit.
+       Exercitationem aliquid dicta dolorum sequi odit beatae vitae velit architecto, atque ratione quaerat distinctio eaque voluptatibus voluptate nihil, quibusdam porro, eveniet nostrum voluptas. Sed ex facere, illum dolorum soluta blanditiis.
+       Est possimus reprehenderit fugit asperiores dolores deserunt officia quo, sed dignissimos at inventore nulla officiis quaerat? Quia quam consequuntur aliquid! Laborum suscipit voluptate quod et officia dicta voluptatum odio impedit.
+       Voluptate blanditiis nobis cum non sunt nisi, magni dignissimos qui repellat facilis labore, commodi eveniet totam velit voluptatibus ipsa omnis delectus quod incidunt veniam. Quibusdam amet voluptatum eos reiciendis ullam!
+       Eaque quas laudantium repudiandae quidem similique totam delectus fugit, iusto a vero molestias placeat nisi aspernatur corporis blanditiis excepturi. Illo inventore consectetur ullam magnam labore minus a ex laboriosam iusto.
+       Mollitia deserunt modi neque asperiores temporibus cum quae numquam quidem! Quisquam sequi nisi sed accusamus velit consectetur omnis iusto. Laudantium omnis sunt eius laborum quia iusto minima excepturi officiis veniam.
+       Laboriosam laborum praesentium sunt molestias. Consectetur, fugit laudantium. Facilis odit illum deserunt beatae at alias. Quaerat, quam facere quis, iure autem veniam maiores impedit ea rerum, totam officiis eveniet eum.
+       Maxime, nostrum? Adipisci provident eius cupiditate necessitatibus similique debitis sed amet, suscipit doloribus dicta? Numquam optio mollitia facere eligendi, culpa quibusdam accusamus rerum minus iure, sequi, necessitatibus sunt quas ratione?
+       Delectus, sit architecto ab labore temporibus sunt reiciendis nihil. Ea quaerat numquam molestiae, nostrum, similique adipisci molestias esse beatae incidunt vero ex tempora! Recusandae temporibus, vero saepe fugiat voluptatem asperior`

package/src/stories/utils/relay/EnvironmentProvider.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { RelayEnvironmentProvider } from 'react-relay/hooks'
+
+import environment from './environment'
+
+const RelayEnvProvider = (props) => (
+  <RelayEnvironmentProvider
+    environment={environment}
+    // history={history}
+    {...props}
+  />
+)
+
+export default RelayEnvProvider