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

package/src/ui/f/fields/TextInput/TextInput.jsx

@@ -0,0 +1,180 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect, memo } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+import { useField } from 'formik'
+
+import { FormLabel, FormDescription } from '../../common'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'text-input'
+
+/**
+ * This is the component description.
+ */
+const TextInput = ({
+  id,
+  className:userClassName,
+  style,
+  type,
+  name,
+  label,
+  color,
+  labelColor,
+  validate,
+  oneInputLabel,
+  description,
+  disabled,
+  placeholder,
+  optional,
+  autoComplete,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [field] = useField({ name, validate })
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `y-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      <FormLabel
+        className={[oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v']
+          .filter((e) => e)
+          .join(' ')}
+        name={name}
+        color={labelColor}
+        optional={optional}
+      >
+        { label }
+      </FormLabel>
+      <input
+        id={name}
+        className="input"
+        type={type}
+        disabled={disabled}
+        placeholder={placeholder}
+        autoComplete={autoComplete}
+        {...field}
+      />
+
+      <FormDescription className="v50 mt-v s-1" description={description} name={name} />
+
+    </div>
+  )
+}
+
+TextInput.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 input name (html - and Formik state)
+   */
+  name:PropTypes.string.isRequired,
+
+  /**
+   * The input label
+   */
+  label:PropTypes.string.isRequired,
+
+  /**
+   * The input label color
+   */
+  labelColor:PropTypes.string,
+
+  /**
+   * The type of the input (html)
+   */
+  type:PropTypes.oneOf([
+    'text',
+    'email',
+    'password',
+    'number',
+    'date',
+    'time',
+    'datetime',
+    'month',
+    'tel',
+    'hidden',
+    'url',
+  ]),
+
+  /**
+   * The input field validator function
+   */
+  validate     :PropTypes.func,
+  /**
+   * If the slide will only have one input
+   */
+  oneInputLabel:PropTypes.bool,
+  /**
+   * Input description
+   */
+  description  :PropTypes.string,
+  /**
+   * Whether the text input should be disabled
+   */
+  disabled     :PropTypes.bool,
+
+  /**
+   * The placeholder text for the input
+   */
+  placeholder:PropTypes.string,
+
+  /**
+   * The text input color
+   */
+  color:PropTypes.string,
+
+  /**
+ * Whether the input is optional or not
+ */
+  optional:PropTypes.bool,
+
+  /**
+   * The autoComplete value that the browser should watch for the input
+   * `https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete`
+   */
+  autoComplete:PropTypes.string,
+}
+
+TextInput.defaultProps = {
+  type    :'text',
+  color   :'background2',
+  disabled:false,
+}
+
+export default memo(TextInput)

package/src/ui/f/fields/TextInput/index.js

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

package/src/ui/f/fields/TextInput/styles.scss

@@ -0,0 +1,35 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "../../../form.scss";
+
+$default-padding: 0.75em 0.75em 0.55em;
+
+.#{bem.$base}.text-input {
+  display: flex;
+  flex-direction: column;
+
+  .input {
+    border: var(--theme-border-style) var(--dark-y);
+    background: var(--light-y);
+    color: var(--on-y);
+    padding: $default-padding;
+
+    &::placeholder{
+      color: var(--metadata);
+    }
+
+    &:not(:disabled):hover{
+      border: var(--theme-border-style) var(--light-background4);
+    }
+
+    &:disabled {
+      background-color: var(--dark-y);
+    }
+
+    &:focus {
+      background: var(--light-background4);
+    }
+  }
+}
+

package/src/ui/f/fields/TextareaInput/TextareaInput.jsx

@@ -0,0 +1,187 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect, memo } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+import { useField } from 'formik'
+
+// Local Definitions
+
+import { FormLabel, FormDescription } from '../../common'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'text-area-input'
+
+/**
+ * This is the component description.
+ */
+const TextareaInput = ({
+  id,
+  className:userClassName,
+  style,
+  name,
+  label,
+  validate,
+  labelAsDescription,
+  textAreaId,
+  rows,
+  optional,
+  textAreaColor,
+  labelColor,
+  description,
+  disabled,
+  placeholder,
+  autoComplete,
+  resize,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [field] = useField({ name, validate })
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        `y-${textAreaColor}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      <FormLabel
+        className={[labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v']
+          .filter((e) => e)
+          .join(' ')}
+        name={name}
+        color={labelColor}
+        optional={optional}
+      >
+        { label }
+      </FormLabel>
+      <textarea
+        id={textAreaId}
+        className="textarea"
+        {...field}
+        style={{ resize }}
+        placeholder={placeholder}
+        rows={rows}
+        disabled={disabled}
+        autoComplete={autoComplete}
+      >
+        {/* It was a dark and stormy night... */}
+      </textarea>
+
+      <FormDescription className="v50 mt-v s-1" description={description} name={name} />
+    </div>
+  )
+}
+
+TextareaInput.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 input name (html - and Formik state)
+   */
+  name:PropTypes.string.isRequired,
+
+  /**
+   * The input label
+   */
+  label:PropTypes.string.isRequired,
+
+  /**
+   * The input value validator function
+   */
+  validate          :PropTypes.func,
+  /**
+   * If the text area depends on it's label's text as the default description
+   */
+  labelAsDescription:PropTypes.bool,
+
+  /**
+   * The textarea id
+  */
+  textAreaId:PropTypes.string,
+
+  /**
+   * The number of rows int the text area
+   */
+  rows:PropTypes.number,
+
+  /**
+   * Text area base color
+   */
+  textAreaColor:PropTypes.string,
+
+  /**
+   * Label base color
+   */
+  labelColor:PropTypes.string,
+
+  /**
+   * Text area description
+   */
+  description:PropTypes.string,
+
+  /**
+   * Whether the text area should be disabled
+   */
+  disabled:PropTypes.bool,
+
+  /**
+   * The textarea placeholder text
+   */
+  placeholder:PropTypes.string,
+
+  /**
+   * The autoComplete value that the browser should watch for the input
+   */
+  autoComplete:PropTypes.string,
+
+  /**
+   * Whether to disable or allow only a certain method of resizing the area
+   * Textarea docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
+   */
+  resize:PropTypes.string,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional:PropTypes.bool,
+}
+
+TextareaInput.defaultProps = {
+  rows         :3,
+  textAreaColor:'background2',
+  disabled     :false,
+  resize       :'vertical',
+}
+
+export default memo(TextareaInput)

package/src/ui/f/fields/TextareaInput/index.js

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

package/src/ui/f/fields/TextareaInput/styles.scss

@@ -0,0 +1,32 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-padding: .5em;
+
+.#{bem.$base}.text-area-input{
+  display: flex;
+  flex-direction: column;
+
+  .textarea {
+    border: var(--theme-border-style) var(--dark-y);
+    background: var(--light-y);
+    color: var(--on-y);
+    padding: $default-padding;
+
+    &::placeholder{
+      color: var(--metadata);
+    }
+
+    &:not(:disabled):hover{
+      border: var(--theme-border-style) var(--light-background4);
+    }
+
+     &:disabled {
+      background-color: var(--dark-y);
+    }
+
+    &:focus {
+      background: var(--light-background4);
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+export { TextInput } from './TextInput'
+export { SelectInput } from './SelectInput'
+export { ChoicesInput } from './ChoicesInput'
+export { TextareaInput } from './TextareaInput'
+export { RatingsInput } from './RatingsInput'
+export { QueryCombobox } from './QueryCombobox'
+export { QuerySelect } from './QuerySelect'
+export { Checkbox } from './Checkbox'

package/src/ui/f/index.js

@@ -0,0 +1,3 @@
+export * from './common'
+export * from './fields'
+export { FormInput } from './FormInput'

package/src/ui/form-reset.scss

@@ -0,0 +1,86 @@
+form {
+  border: 0;
+  font-family: inherit;
+  font-size: 100%;
+  font-style: inherit;
+  font-weight: inherit;
+  margin: 0;
+  outline: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+input,
+button,
+textarea,
+label,
+select {
+  // background-color: inherit;
+  border: 0;
+  display: inline-block;
+  font: inherit;
+  font-size: 100%;
+  margin: 0;
+  outline: none;
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+
+/**
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  appearance: button;
+}
+
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/* Remove outline on focus */
+:focus {
+  outline: 0;
+}

package/src/ui/form.scss

@@ -0,0 +1,34 @@
+@use "form-reset.scss";
+
+$form-input-border-bottom: 1px solid var(--dark-background1);
+$form-input-on-focus-border-bottom: 1px solid var(--light-main1);
+$form-input-on-error-border-bottom: 1px solid var(--error);
+$label-input-heigth-width: 100%;
+
+:root {
+  --form-input-border-bottom: #{$form-input-border-bottom};
+  --form-input-on-focus-border-bottom: #{$form-input-on-focus-border-bottom};
+  --form-input-on-error-border-bottom: #{$form-input-on-error-border-bottom};
+}
+
+@mixin radio-checkbox-input-selected {
+  border: var(--form-input-on-focus-border-bottom);
+  position: relative;
+}
+
+
+@mixin radio-checkbox-input-not-selected {
+  border: var(--form-input-border-bottom);
+  position: relative;
+}
+
+
+@mixin radio-checkbox-input {
+  appearance: none;
+  cursor: pointer;
+  height: $label-input-heigth-width;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: $label-input-heigth-width;
+}

package/src/ui/index.js

@@ -2,3 +2,7 @@ export * from './r' // Router Extensions
 export * from './a'
 export * from './b'
 export * from './c'
+export * from './d'
+export * from './f'
+export * from './utils'
+export * from './test'

package/src/ui/test/QueryLoader/QueryLoader.jsx

@@ -0,0 +1,41 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useEffect, Suspense } from 'react'
+
+import { useQueryLoader } from 'react-relay'
+
+// Local Definitions
+
+import { PreloadedTestData } from './common'
+
+const testQuery = graphql`
+  query QueryLoaderHelloQuery {
+    hello
+  }
+`
+
+/**
+ * This is the component description.
+ */
+const QueryLoader = () => {
+  const [queryReference, loadQuery] = useQueryLoader(testQuery)
+
+  useEffect(() => {
+    loadQuery({})
+  }, [])
+
+  return (
+    <Suspense fallback="loading">
+      {queryReference ? (
+        <PreloadedTestData queryReference={queryReference} query={testQuery} />
+      ) : null}
+    </Suspense>
+  )
+}
+
+QueryLoader.defaultProps = {
+  // someProp:false
+}
+
+export default QueryLoader

package/src/ui/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js

@@ -0,0 +1,68 @@
+/**
+ * @flow
+ */
+
+/* eslint-disable */
+
+'use strict';
+
+/*::
+import type { ConcreteRequest } from 'relay-runtime';
+export type QueryLoaderHelloQueryVariables = {||};
+export type QueryLoaderHelloQueryResponse = {|
+  +hello: ?string
+|};
+export type QueryLoaderHelloQuery = {|
+  variables: QueryLoaderHelloQueryVariables,
+  response: QueryLoaderHelloQueryResponse,
+|};
+*/
+
+
+/*
+query QueryLoaderHelloQuery {
+  hello
+}
+*/
+
+const node/*: ConcreteRequest*/ = (function(){
+var v0 = [
+  {
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "hello",
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "QueryLoaderHelloQuery",
+    "selections": (v0/*: any*/),
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "QueryLoaderHelloQuery",
+    "selections": (v0/*: any*/)
+  },
+  "params": {
+    "cacheID": "463f9ee8a82dd6ec8dedeb28649cce74",
+    "id": null,
+    "metadata": {},
+    "name": "QueryLoaderHelloQuery",
+    "operationKind": "query",
+    "text": "query QueryLoaderHelloQuery {\n  hello\n}\n"
+  }
+};
+})();
+// prettier-ignore
+(node/*: any*/).hash = 'b92d001ab0208bd484a99f77c274d5ef';
+
+module.exports = node;