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

package/src/stories/f/v2/__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/v2/__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/ui/f/FormInput/FormInput.jsx

@@ -6,17 +6,28 @@ import { memo } from 'react'
 import PropTypes from 'prop-types'
 
 import {
-  TextInput,
-  TextareaInput,
-  ChoicesInput,
-  SelectInput,
-  QueryCombobox,
-  QuerySelect,
-  RatingsInput,
-  Checkbox,
-  QueryChoices,
-  LinkInput,
-  EditorInput,
+  TextInput as TextInputV1,
+  TextareaInput as TextareaInputV1,
+  ChoicesInput as ChoicesInputV1,
+  SelectInput as SelectInputV1,
+  QueryCombobox as QueryComboboxV1,
+  QuerySelect as QuerySelectV1,
+  RatingsInput as RatingsInputV1,
+  Checkbox as CheckboxV1,
+  QueryChoices as QueryChoicesV1,
+  LinkInput as LinkInputV1,
+  EditorInput as EditorInputV1,
+  TextInputV2,
+  TextareaInputV2,
+  ChoicesInputV2,
+  SelectInputV2,
+  QueryComboboxV2,
+  QuerySelectV2,
+  RatingsInputV2,
+  CheckboxV2,
+  QueryChoicesV2,
+  LinkInputV2,
+  EditorInputV2,
 } from '../fields'
 
 import './styles.scss'
@@ -35,6 +46,7 @@ const FormInput = ({
   type,
   extraTypes,
   disabled,
+  isVersionTwo,
   ...otherProps
 }) => {
   const newClassName = [
@@ -42,6 +54,32 @@ const FormInput = ({
     componentClassName,
   ].filter(Boolean).join(' ')
 
+  let TextInput = TextInputV1
+  let TextareaInput = TextareaInputV1
+  let ChoicesInput = ChoicesInputV1
+  let SelectInput = SelectInputV1
+  let QueryCombobox = QueryComboboxV1
+  let QuerySelect = QuerySelectV1
+  let RatingsInput = RatingsInputV1
+  let Checkbox = CheckboxV1
+  let QueryChoices = QueryChoicesV1
+  let LinkInput = LinkInputV1
+  let EditorInput = EditorInputV1
+
+  if (isVersionTwo) {
+    TextInput = TextInputV2
+    TextareaInput = TextareaInputV2
+    ChoicesInput = ChoicesInputV2
+    SelectInput = SelectInputV2
+    QueryCombobox = QueryComboboxV2
+    QuerySelect = QuerySelectV2
+    RatingsInput = RatingsInputV2
+    Checkbox = CheckboxV2
+    QueryChoices = QueryChoicesV2
+    LinkInput = LinkInputV2
+    EditorInput = EditorInputV2
+  }
+
   if (type === 'textarea') {
     return (
       <TextareaInput
@@ -196,10 +234,17 @@ FormInput.propTypes = {
    * Whether the Form input input should be disabled
    */
   disabled  :PropTypes.bool,
+
+  /**
+   * Whethe the Form input is version 2
+   */
+  isVersionTwo:PropTypes.bool,
+
 }
 
 FormInput.defaultProps = {
-  disabled:false,
+  disabled    :false,
+  isVersionTwo:false,
 }
 
 export default memo(FormInput)

package/src/ui/f/common/V2/Description/Description.jsx

@@ -0,0 +1,94 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useInsertionEffect } from 'react'
+
+import { useField } from 'formik'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'description'
+
+/**
+ * This is the component description.
+ */
+const Description = ({
+  id,
+  className:userClassName,
+  style,
+  description,
+  name,
+  color,
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [, meta] = useField(name)
+  const hasError = meta.touched && meta.error
+
+  if (hasError || description) {
+    return (
+      <div
+        id={id}
+        className={[
+          baseClassName,
+          componentClassName,
+          userClassName,
+          hasError ? 'x-error' : `x-${color}`,
+        ]
+          .filter((e) => e)
+          .join(' ')}
+        style={style}
+      >
+        { hasError ? meta.error : description}
+      </div>
+    )
+  }
+  return null
+}
+
+Description.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The base color for the description
+   */
+  color:PropTypes.string,
+
+  /**
+   * Input description - extra description to guide a use in filling the input
+   */
+  description:PropTypes.string,
+
+  /**
+   * The input name (html - and Formik state)
+   */
+  name:PropTypes.string.isRequired,
+}
+
+Description.defaultProps = {
+  color:'metadata',
+}
+
+export default Description

package/src/ui/f/common/V2/Description/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Description } from './Description'

package/src/ui/f/common/V2/Description/styles.scss

@@ -0,0 +1,10 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+
+.#{bem.$base}.description {
+  color: var(--x);
+}
+
+

package/src/ui/f/common/V2/Label/Label.jsx

@@ -0,0 +1,102 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useInsertionEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'form-label'
+
+/**
+ * This is the component description.
+ */
+const Label = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  name,
+  color,
+  optional,
+  as:Wrapper,
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <Wrapper
+      htmlFor={Wrapper === 'label' ? name : undefined}
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `x-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      {children}
+      {optional && ' (Optional)'}
+    </Wrapper>
+  )
+}
+
+Label.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   *  The name of the input label
+   */
+  name:PropTypes.string,
+
+  /**
+   *  The html tag that acts as an input label
+   */
+  as   :PropTypes.node,
+  /**
+   *  The default color of the label
+   */
+  color:PropTypes.string,
+
+  /**
+   * Whether the input should have an optional tag
+   */
+  optional:PropTypes.bool,
+}
+
+Label.defaultProps = {
+  as      :'label',
+  color   :'paragraph',
+  optional:false,
+}
+
+export default Label

package/src/ui/f/common/V2/Label/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Label } from './Label'

package/src/ui/f/common/V2/Label/styles.scss

@@ -0,0 +1,9 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+.#{bem.$base}.form-label {
+  color: var(--x);
+}

package/src/ui/f/common/V2/index.js

@@ -0,0 +1,2 @@
+export { Label as FormLabelV2 } from './Label'
+export { Description as FormDescriptionV2 } from './Description'

package/src/ui/f/common/index.js

@@ -3,3 +3,4 @@ export { Description as FormDescription } from './Description'
 export { Debugger as FormDebugger } from './Debugger'
 export { InputWrapper } from './InputWrapper'
 export * from './utils'
+export * from './V2'