@evershop/evershop 1.0.0-beta

package/src/lib/components/form/Button.scss

@@ -0,0 +1,67 @@
+.button {
+    display: inline-block;
+    position: relative;
+    border: 1px solid rgba(186, 191, 195, 1);
+    border-radius: 3px;
+    padding: 0.7rem 1.6rem;
+    font-weight: 600;
+    color: inherit;
+    background-color: white;
+    border-top-color: rgba(201, 204, 207, 1);
+    border-bottom-color: rgba(186, 191, 196, 1);
+    &:hover {
+        text-decoration: none;
+        background-color: rgba(201, 204, 207, 0.05);
+    }
+    &.primary {
+        background-color: var(--primary);
+        border: 0;
+        color: white;
+        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
+        &:hover {
+            background-color: #006e52;
+        }
+    }
+    &.critical {
+        background-color: var(--critical);
+        border: 0;
+        color: white;
+        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
+        &:hover {
+            background-color: #bc2200;
+        }
+    }
+    &.outline.interactive {
+        border-color: var(--interactive);
+        color: var(--interactive);
+        &:hover {
+            background-color: #e6eef9;
+        }
+    }
+    &.outline.critical {
+        background-color: transparent;
+        box-shadow: none;
+        border: 1px solid;
+        border-color: var(--critical);
+        color: var(--critical);
+        &:hover {
+            background-color: #fff4f4;
+        }
+    }
+    &.loading {
+        background-color: var(--divider);
+        &:hover {
+            background-color: var(--divider);
+        }
+        span {
+            opacity: 0;
+        }
+        svg {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin-top: -1rem;
+            margin-left: -1rem;
+        }
+    }
+}

package/src/lib/components/form/Field.js

@@ -0,0 +1,118 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import PropTypes from 'prop-types';
+import React from 'react';
+import PubSub from 'pubsub-js';
+import { Checkbox } from './fields/Checkbox';
+import { Date } from './fields/Date';
+import { DateTime } from './fields/DateTime';
+import { Hidden } from './fields/Hidden';
+import { Input } from './fields/Input';
+import { MultiSelect } from './fields/MultiSelect';
+import { Radio } from './fields/Radio';
+import { Select } from './fields/Select';
+import { TextArea } from './fields/Textarea';
+import { Toggle } from './fields/Toggle';
+import { useFormContext } from './Form';
+import { FORM_FIELD_UPDATED } from '../../util/events';
+import './Field.scss';
+import { Password } from './fields/Password';
+
+export function Field(props) {
+  const {
+    name,
+    value,
+    validationRules,
+    onChange,
+    type
+  } = props;
+  const context = useFormContext();
+  const [fieldValue, setFieldValue] = React.useState('');
+  const field = context.fields.find((f) => f.name === name);
+
+  React.useEffect(() => {
+    context.addField(name, value, validationRules || []);
+
+    return () => {
+      context.removeField(name);
+    };
+  }, []);
+
+  React.useEffect(() => {
+    setFieldValue(value);
+    context.updateField(name, value, validationRules);
+  }, [value]);
+
+  React.useEffect(() => {
+    if (field) setFieldValue(field.value);
+  }, [field]);
+
+  React.useEffect(() => {
+    PubSub.publishSync(FORM_FIELD_UPDATED, { name: name, value: fieldValue });
+  }, [fieldValue]);
+
+  const onChangeFunc = (newValue) => {
+    let fieldVal;
+    if (typeof newValue === 'object' && newValue !== null && newValue.target) {
+      fieldVal = newValue.target.value;
+    } else {
+      fieldVal = newValue;
+    }
+    setFieldValue(fieldVal);
+    context.updateField(name, fieldVal, validationRules);
+
+    if (onChange) {
+      onChange.call(window, newValue, props);
+    }
+  };
+
+  const F = (() => {
+    switch (type) {
+      case 'text':
+        return Input;
+      case 'select':
+        return Select;
+      case 'multiselect':
+        return MultiSelect;
+      case 'checkbox':
+        return Checkbox;
+      case 'radio':
+        return Radio;
+      case 'toggle':
+        return Toggle;
+      case 'date':
+        return Date;
+      case 'datetime':
+        return DateTime;
+      case 'textarea':
+        return TextArea;
+      case 'password':
+        return Password;
+      case 'hidden':
+        return Hidden;
+      default:
+        return Input;
+    }
+  })();
+  return (
+    <F
+      {...props}
+      onChange={onChangeFunc}
+      value={fieldValue}
+      error={field ? field.error : undefined}
+    />
+  );
+}
+
+Field.propTypes = {
+  name: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  validationRules: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+Field.defaultProps = {
+  onChange: undefined,
+  validationRules: [],
+  value: ''
+};

package/src/lib/components/form/Field.scss

@@ -0,0 +1,196 @@
+html {
+    input[type="text"],
+        input[type="email"],
+        input[type="password"],
+        input[type="tel"],
+        select,
+        textarea {
+            background: none;
+            padding: 0.5rem 1.2rem;
+            display: block;
+            flex: 1 1;
+    
+            &:focus {
+                outline: none;
+    
+                &+.field-border:after {
+                    box-shadow: 0 0 0 2px #458fff;
+                }
+            }
+    
+            display: block;
+            width: 100%;
+            position: relative;
+            z-index: 10;
+            border: 1px solid transparent;
+            margin: 1px;
+            border-radius: 4px;
+        }
+}
+select {
+    -webkit-appearance: none;
+    appearance: none;
+    & ~ .field-suffix {
+        margin-left: -1.85rem;
+    }
+}
+input[type="radio"] {
+    width: 0;
+    height: 0;
+    -webkit-appearance: none;
+    appearance: none;
+    & + .radio-checked,
+    + .radio-unchecked {
+        border: 2px solid var(--formFieldBorder);
+        border-radius: 100%;
+        width: 1.9rem;
+        height: 1.9rem;
+        display: inline-flex;
+        box-sizing: border-box;
+        justify-content: center;
+        transition: border-color 1s;
+    }
+    &:checked {
+        & + .radio-checked {
+            border-color: var(--interactive);
+            span {
+                align-self: center;
+                background-color: var(--interactive);
+                display: inline-block;
+                border-radius: 100%;
+                width: 1.1rem;
+                height: 1.1rem;
+            }
+        }
+    }
+}
+input[type="checkbox"] {
+    width: 0;
+    height: 0;
+    -webkit-appearance: none;
+    appearance: none;
+    & + .checkbox-checked,
+    + .checkbox-unchecked {
+        border: 2px solid var(--formFieldBorder);
+        border-radius: 4px;
+        width: 1.8rem;
+        height: 1.8rem;
+        display: inline-flex;
+        box-sizing: border-box;
+        justify-content: center;
+        -webkit-transition: background-color 1000ms ease-in;
+        -ms-transition: background-color 1000ms ease-in;
+        transition: background-color 1000ms ease-in;
+    }
+    &:checked {
+        & + .checkbox-checked {
+            border: 0;
+            background-color: var(--interactive);
+            svg {
+                fill: white;
+                color: white;
+            }
+        }
+    }
+}
+.radio-field {
+    > div {
+        padding: 0.15rem 0;
+    }
+}
+.field-wrapper {
+    background-color: white;
+    position: relative;
+    label {
+        cursor: pointer;
+    }
+    &.radio-field {
+        background-color: transparent;
+    }
+    .field-border {
+        border: 1px solid var(--formFieldBorder);
+        border-top-color: var(--formFieldBorderShadow);
+        border-radius: 4px;
+        position: absolute;
+        z-index: 9;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        &:after {
+            transition: box-shadow 0.1s;
+            position: absolute;
+            z-index: 9;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            content: "";
+            border-radius: 4px;
+        }
+    }
+}
+.field-instruction {
+    color: var(--textSubdued);
+}
+.form-field-container {
+    margin-top: 2rem;
+    &:first-child {
+        margin-top: 0;
+    }
+    label {
+        margin-bottom: 0.3rem;
+        display: inline-flex;
+        align-items: center;
+    }
+}
+
+.field-error {
+    margin-top: 0.25rem;
+    svg {
+        width: 22px;
+        height: 22px;
+        fill: var(--critical);
+        color: var(--critical);
+        align-self: center;
+        margin-right: 0.4rem;
+    }
+    span {
+        align-self: center;
+        line-height: 1;
+    }
+}
+.form-field-container.has-error {
+    .field-border {
+        border-color: var(--critical);
+        background-color: #fff4f4;
+    }
+}
+.field-prefix,
+.field-suffix {
+    position: relative;
+    z-index: 10;
+    padding: 0 1.25rem;
+    align-self: center;
+    display: inline-flex;
+}
+
+.dropdown .field-prefix,
+.dropdown .field-suffix {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    align-self: center;
+    align-items: center;
+    display: inline-flex;
+}
+
+.dropdown .field-prefix {
+    left: 0;
+    padding-left: 0 0 0 1rem;
+}
+
+.dropdown .field-suffix {
+    right: 0;
+    padding-right:0 1rem 0 0;
+}

package/src/lib/components/form/Form.js

@@ -0,0 +1,197 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import PubSub from 'pubsub-js';
+import { validator } from './validator';
+import { get } from '../../util/get';
+import { FORM_SUBMIT, FORM_VALIDATED } from '../../util/events';
+import Button from './Button';
+import { serializeForm } from '../../util/formToJson';
+
+export const FormContext = React.createContext();
+export const FormDispatch = React.createContext();
+
+export function Form(props) {
+  const {
+    id,
+    action,
+    method,
+    isJSON,
+    onStart,
+    onComplete,
+    onError,
+    onSuccess,
+    onValidationError,
+    children,
+    submitBtn = true,
+    btnText
+  } = props;
+
+  const [fields, setFields] = React.useState([]);
+  const formRef = React.useRef();
+  const [loading, setLoading] = useState(false);
+
+  const addField = (name, value, validationRules = []) => {
+    setFields((previous) => previous.concat({ name, value, validationRules }));
+  };
+
+  const updateField = (name, value, validationRules = []) => {
+    setFields((previous) => previous.map((f) => {
+      if (f.name === name) return { name, value, validationRules };
+      else return f;
+    }));
+  };
+
+  const removeField = (name) => {
+    setFields((previous) => previous.filter((f) => f.name !== name));
+  };
+
+  const validate = () => {
+    const errors = {};
+    fields.forEach((f) => {
+      f.validationRules.forEach((r) => {
+        const rule = validator.getRule(r);
+        if (rule === undefined) return;
+        if (!rule.handler.call(fields, f.value)) {
+          errors[f.name] = rule.errorMessage;
+        }
+      });
+    });
+
+    if (Object.keys(errors).length === 0) {
+      setFields(
+        fields.map((f) => ({ ...f, error: undefined }))
+      );
+    } else {
+      setFields(
+        fields.map((f) => {
+          if (!errors[f.name]) return { ...f, error: undefined };
+          return { ...f, error: errors[f.name] };
+        })
+      );
+    }
+
+    return errors;
+  };
+
+  const submit = async (e) => {
+    e.preventDefault();
+    try {
+      PubSub.publishSync(FORM_SUBMIT, { props });
+      const errors = validate();
+      PubSub.publishSync(FORM_VALIDATED, { formId: id, errors });
+      if (Object.keys(errors).length === 0) {
+        const formData = new FormData(document.getElementById(id));
+        setLoading(true);
+        if (onStart) await onStart();
+        const response = await fetch( // TODO: Replace by Axios
+          action,
+          {
+            method,
+            body: isJSON === true ? JSON.stringify(serializeForm(formData.entries())) : formData,
+            headers: Object.assign({
+              'X-Requested-With': 'XMLHttpRequest'
+            },
+              isJSON === true ? { 'Content-Type': 'application/json' } : {}
+            )
+          }
+        );
+
+        if (!response.headers.get('content-type') || !response.headers.get('content-type').includes('application/json')) {
+          throw new TypeError('Something wrong. Please try again');
+        }
+
+        const responseJson = await response.json();
+        if (get(responseJson, 'data.redirectUrl') !== undefined) {
+          window.location.href = responseJson.data.redirectUrl;
+          return true;
+        }
+
+        if (onSuccess) {
+          await onSuccess(responseJson);
+        }
+      } else {
+        if (onValidationError) {
+          await onValidationError();
+        }
+        // Get the first field with error
+        const firstFieldWithError = Object.keys(errors)[0];
+        // Get the first element with the name of the field with error
+        const firstElementWithError = document.getElementsByName(firstFieldWithError)[0];
+        // Focus on the first element with error
+        firstElementWithError.focus();
+      }
+    } catch (error) {
+      if (onError) {
+        await onError(error);
+      }
+      throw error
+    } finally {
+      setLoading(false);
+      if (onComplete) {
+        await onComplete();
+      }
+    }
+    return true;
+  };
+
+  return (
+    <FormContext.Provider
+      value={{
+        fields, addField, updateField, removeField, ...props
+      }}
+    >
+      <FormDispatch.Provider value={{ submit }}>
+        <form
+          ref={formRef}
+          id={id}
+          action={action}
+          method={method}
+          onSubmit={(e) => submit(e)}
+        >
+          {children}
+          {submitBtn === true && (
+            <div className="form-submit-button flex border-t border-divider mt-1 pt-1">
+              <Button
+                title={(btnText || 'Save')}
+                onAction={
+                  () => { document.getElementById(id).dispatchEvent(new Event('submit', { cancelable: true, bubbles: true })); }
+                }
+                isLoading={loading}
+              />
+            </div>
+          )}
+        </form>
+      </FormDispatch.Provider>
+    </FormContext.Provider>
+  );
+}
+
+Form.propTypes = {
+  action: PropTypes.string.isRequired,
+  btnText: PropTypes.string,
+  children: PropTypes.oneOfType(
+    [PropTypes.arrayOf(PropTypes.node), PropTypes.node]
+  ).isRequired,
+  id: PropTypes.string.isRequired,
+  method: PropTypes.string.isRequired,
+  onComplete: PropTypes.func,
+  onError: PropTypes.func,
+  onStart: PropTypes.func,
+  onSuccess: PropTypes.func,
+  onValidationError: PropTypes.func,
+  submitBtn: PropTypes.bool
+};
+
+Form.defaultProps = {
+  btnText: undefined,
+  onComplete: undefined,
+  onError: undefined,
+  onStart: undefined,
+  onSuccess: undefined,
+  onValidationError: undefined,
+  submitBtn: true
+};
+
+export const useFormContext = () => React.useContext(FormContext);
+export const useFormDispatch = () => React.useContext(FormDispatch);

package/src/lib/components/form/fields/Checkbox.js

@@ -0,0 +1,75 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Error from './Error';
+import './../Field.scss';
+
+function CheckedIcon() {
+  return (
+    <span className="checkbox-checked">
+      <svg viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0" /></svg>
+    </span>
+  );
+}
+
+function UnCheckedIcon() {
+  return <span className="checkbox-unchecked" />;
+}
+
+function Checkbox({
+  name, label, onChange, error, instruction, isChecked = false
+}) {
+  const [_isChecked, setChecked] = React.useState(isChecked);
+
+  const onChangeFunc = (e) => {
+    setChecked(e.target.checked);
+    if (onChange) onChange.call(window, e);
+  };
+
+  React.useEffect(() => {
+    setChecked(!!isChecked);
+  }, [isChecked]);
+
+  return (
+    <div className={`form-field-container ${error ? 'has-error' : null}`}>
+      <div className="field-wrapper radio-field">
+        <label htmlFor={name}>
+          <input
+            type="checkbox"
+            name={name}
+            id={name}
+            value={_isChecked ? 1 : 0}
+            checked={_isChecked}
+            onChange={onChangeFunc}
+          />
+          {_isChecked === true && <CheckedIcon />}
+          {_isChecked === false && <UnCheckedIcon />}
+          <span className="pl-05">{label}</span>
+        </label>
+      </div>
+      {instruction
+        && <div className="field-instruction mt-sm">{instruction}</div>}
+      <Error error={error} />
+    </div>
+  );
+}
+
+Checkbox.propTypes = {
+  error: PropTypes.string,
+  instruction: PropTypes.string,
+  isChecked: PropTypes.bool,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+Checkbox.defaultProps = {
+  error: undefined,
+  instruction: '',
+  isChecked: false,
+  label: '',
+  name: undefined,
+  value: undefined
+};
+
+export { Checkbox };

package/src/lib/components/form/fields/Checkbox.scss

@@ -0,0 +1 @@
+@import "../Field.scss";