@evershop/evershop 1.0.0-beta

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

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export function Hidden({ name, value }) {
+  return (
+    <input
+      type="text"
+      id={name}
+      name={name}
+      value={value}
+      readOnly
+      style={{ display: 'none' }}
+    />
+  );
+}
+
+Hidden.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+Hidden.defaultProps = {
+  value: undefined
+};

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

@@ -0,0 +1,80 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import PropTypes from 'prop-types';
+import React from 'react';
+import Error from './Error';
+import './../Field.scss';
+
+const inputProps = function buidProps(props) {
+  const obj = {};
+  [
+    'autocomplete',
+    'autofocus',
+    'dirname',
+    'disabled',
+    'form',
+    'maxlength',
+    'minlength',
+    'name',
+    'pattern',
+    'placeholder',
+    'readonly',
+    'onChange',
+    'onFocus',
+    'onBlur',
+    'onKeyPress',
+    'onKeyDown',
+    'onKeyUp',
+    'value'
+  ].forEach((a) => {
+    if (props[a]) obj[a] = props[a];
+    obj.defaultValue = props.value;
+  });
+
+  return obj;
+};
+
+const Input = React.forwardRef((props, ref) => {
+  const {
+    label, name, instruction, prefix, suffix, error
+  } = props;
+  return (
+    <div className={`form-field-container ${error ? 'has-error' : null}`}>
+      {label && <label htmlFor={name}>{label}</label>}
+      <div className="field-wrapper flex flex-grow">
+        {prefix && <div className="field-prefix align-middle">{prefix}</div>}
+        <input
+          type="text"
+          {...inputProps(props)}
+          ref={ref}
+        />
+        <div className="field-border" />
+        {suffix && <div className="field-suffix">{suffix}</div>}
+      </div>
+      {instruction
+        && <div className="field-instruction mt-sm">{instruction}</div>}
+      <Error error={error} />
+    </div>
+  );
+});
+
+Input.propTypes = {
+  error: PropTypes.string,
+  instruction: PropTypes.string,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  prefix: PropTypes.node,
+  suffix: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+Input.defaultProps = {
+  error: undefined,
+  instruction: undefined,
+  label: undefined,
+  prefix: undefined,
+  suffix: undefined,
+  name: undefined,
+  value: undefined
+};
+
+export { Input };

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

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

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

@@ -0,0 +1,67 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Error from './Error';
+import './../Field.scss';
+
+const MultiSelect = React.forwardRef((props, ref) => {
+  const {
+    name, placeholder, value, label, onChange, error, instruction, options
+  } = props;
+  return (
+    <div className={`form-field-container dropdown ${error ? 'has-error' : null}`}>
+      {label && <label htmlFor={name}>{label}</label>}
+      <div className="field-wrapper flex flex-grow items-baseline">
+        <select
+          className="form-field"
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          defaultValue={value}
+          onChange={(e) => { if (onChange) onChange.call(window, e); }}
+          ref={ref}
+          multiple={true}
+        >
+          <option value="" disabled>Please select</option>
+          {options && options.map(
+            // eslint-disable-next-line react/no-array-index-key
+            (option, key) => <option key={key} value={option.value}>{option.text}</option>
+          )}
+        </select>
+        <div className="field-border" />
+        <div className="field-suffix"><svg viewBox="0 0 20 20" width="1rem" height="1.25rem" focusable="false" aria-hidden="true"><path d="m10 16-4-4h8l-4 4zm0-12 4 4H6l4-4z" /></svg></div>
+      </div>
+      {
+        instruction
+        && <div className="field-instruction mt-sm">{instruction}</div>
+      }
+      <Error error={error} />
+    </div>
+  );
+});
+
+MultiSelect.propTypes = {
+  error: PropTypes.string,
+  instruction: PropTypes.string,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.string
+  })),
+  placeholder: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+MultiSelect.defaultProps = {
+  error: undefined,
+  instruction: undefined,
+  label: undefined,
+  onChange: undefined,
+  options: [],
+  placeholder: undefined,
+  name: undefined,
+  value: undefined
+};
+
+export { MultiSelect };

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

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

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

@@ -0,0 +1,79 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import PropTypes from 'prop-types';
+import React from 'react';
+import Error from './Error';
+import './../Field.scss';
+
+const inputProps = function buidProps(props) {
+  const obj = {};
+  [
+    'autocomplete',
+    'autofocus',
+    'dirname',
+    'disabled',
+    'form',
+    'maxlength',
+    'minlength',
+    'name',
+    'pattern',
+    'placeholder',
+    'readonly',
+    'onChange',
+    'onFocus',
+    'onBlur',
+    'onKeyPress',
+    'onKeyDown',
+    'onKeyUp'
+  ].forEach((a) => {
+    if (props[a]) obj[a] = props[a];
+    obj.defaultValue = props.value;
+  });
+
+  return obj;
+};
+
+const Password = React.forwardRef((props, ref) => {
+  const {
+    label, name, instruction, prefix, suffix, error
+  } = props;
+  return (
+    <div className={`form-field-container ${error ? 'has-error' : null}`}>
+      {label && <label htmlFor={name}>{label}</label>}
+      <div className="field-wrapper flex flex-grow">
+        {prefix && <div className="field-prefix align-middle">{prefix}</div>}
+        <input
+          type="password"
+          {...inputProps(props)}
+          ref={ref}
+        />
+        <div className="field-border" />
+        {suffix && <div className="field-suffix">{suffix}</div>}
+      </div>
+      {instruction
+        && <div className="field-instruction mt-sm">{instruction}</div>}
+      <Error error={error} />
+    </div>
+  );
+});
+
+Password.propTypes = {
+  error: PropTypes.string,
+  instruction: PropTypes.string,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  prefix: PropTypes.node,
+  suffix: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+Password.defaultProps = {
+  error: undefined,
+  instruction: undefined,
+  label: undefined,
+  prefix: undefined,
+  suffix: undefined,
+  name: undefined,
+  value: undefined
+};
+
+export { Password };

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

@@ -0,0 +1,79 @@
+/* eslint-disable eqeqeq */
+import PropTypes from 'prop-types';
+import React from 'react';
+import Error from './Error';
+import './../Field.scss';
+
+function CheckedIcon() {
+  return <span className="radio-checked"><span /></span>;
+}
+
+function UnCheckedIcon() {
+  return <span className="radio-unchecked" />;
+}
+
+function Radio({
+  name, value, label, onChange, error, instruction, options
+}) {
+  const [_value, setValue] = React.useState(value || '');
+  const onChangeFunc = (e) => {
+    setValue(e.target.value);
+    if (onChange) onChange.call(window, e.target.value);
+  };
+
+  React.useEffect(() => {
+    setValue(value);
+  }, [value]);
+
+  return (
+    <div className={`form-field-container ${error ? 'has-error' : null}`}>
+      {label && <label htmlFor={name}>{label}</label>}
+      <div className="field-wrapper radio-field">
+        {
+          options.map((o, i) => (
+            <div key={o.value}>
+              <label htmlFor={name + i} className="flex">
+                <input
+                  type="radio"
+                  name={name}
+                  id={name + i}
+                  value={o.value}
+                  checked={_value == o.value}
+                  onChange={onChangeFunc}
+                />
+                {_value == o.value && <CheckedIcon />}
+                {_value != o.value && <UnCheckedIcon />}
+                <span className="pl-1">{o.text}</span>
+              </label>
+            </div>
+          ))
+        }
+      </div>
+      {instruction
+        && <div className="field-instruction mt-sm">{instruction}</div>}
+      <Error error={error} />
+    </div>
+  );
+}
+
+Radio.propTypes = {
+  error: PropTypes.string,
+  instruction: PropTypes.string,
+  label: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.string
+  })).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+};
+
+Radio.defaultProps = {
+  error: undefined,
+  instruction: undefined,
+  label: undefined,
+  onChange: undefined
+};
+
+export { Radio };

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

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

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

@@ -0,0 +1,79 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Error from './Error';
+import './../Field.scss';
+
+const Select = React.forwardRef((props, ref) => {
+  const {
+    name, placeholder, value, label, onChange, error, instruction, options
+  } = props;
+  const [_value, setValue] = React.useState(value || '');
+
+  React.useEffect(() => {
+    setValue(value);
+  }, [value]);
+
+  return (
+    <div className={`form-field-container dropdown ${error ? 'has-error' : null}`}>
+      {label && <label htmlFor={name}>{label}</label>}
+      <div className="field-wrapper flex flex-grow items-baseline">
+        <select
+          className="form-field"
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          value={_value}
+          onChange={(e) => {
+            if (onChange) {
+              onChange.call(window, e)
+            } else {
+              setValue(e.target.value);
+            }
+          }
+          }
+          ref={ref}
+        >
+          <option value="" disabled>Please select</option>
+          {options && options.map(
+            // eslint-disable-next-line react/no-array-index-key
+            (option, key) => <option key={key} value={option.value}>{option.text}</option>
+          )}
+        </select>
+        <div className="field-border" />
+        <div className="field-suffix"><svg viewBox="0 0 20 20" width="1rem" height="1.25rem" focusable="false" aria-hidden="true"><path d="m10 16-4-4h8l-4 4zm0-12 4 4H6l4-4z" /></svg></div>
+      </div>
+      {
+        instruction
+        && <div className="field-instruction mt-sm">{instruction}</div>
+      }
+      <Error error={error} />
+    </div>
+  );
+});
+
+Select.propTypes = {
+  error: PropTypes.string,
+  instruction: PropTypes.string,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.string
+  })),
+  placeholder: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+Select.defaultProps = {
+  error: undefined,
+  instruction: undefined,
+  label: undefined,
+  onChange: undefined,
+  options: [],
+  placeholder: undefined,
+  name: undefined,
+  value: undefined
+};
+
+export { Select };

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

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

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

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Error from './Error';
+import './../Field.scss';
+
+function TextArea({
+  name, value, label, onChange, error, instruction, placeholder
+}) {
+  const [_value, setValue] = React.useState(value || '');
+
+  React.useEffect(() => {
+    setValue(value || '');
+  }, [value]);
+
+  const onChangeFunc = (e) => {
+    setValue(e.target.value);
+    if (onChange) onChange.call(window, e.target.value);
+  };
+
+  return (
+    <div className={`form-field-container ${error ? 'has-error' : null}`}>
+      {label && <label htmlFor={name}>{label}</label>}
+      <div className="field-wrapper flex flex-grow">
+        <textarea
+          type="text"
+          className="form-field"
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          value={_value}
+          onChange={onChangeFunc}
+        />
+        <div className="field-border" />
+      </div>
+      {instruction
+        && <div className="field-instruction mt-sm">{instruction}</div>}
+      <Error error={error} />
+    </div>
+  );
+}
+
+TextArea.propTypes = {
+  error: PropTypes.string,
+  instruction: PropTypes.string,
+  label: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  value: PropTypes.string
+};
+
+TextArea.defaultProps = {
+  error: undefined,
+  instruction: undefined,
+  label: undefined,
+  onChange: undefined,
+  value: undefined
+};
+
+export { TextArea };

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

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

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

@@ -0,0 +1,70 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import PropTypes from 'prop-types';
+import React from 'react';
+import Error from './Error';
+import './Toggle.scss';
+
+function Enabled({ onClick }) {
+  return <a href="#" className="toggle enabled" onClick={(e) => { e.preventDefault(); onClick(); }}><span /></a>;
+}
+
+Enabled.propTypes = {
+  onClick: PropTypes.func.isRequired
+};
+
+function Disabled({ onClick }) {
+  return <a href="#" className="toggle disabled" onClick={(e) => { e.preventDefault(); onClick(); }}><span /></a>;
+}
+
+Disabled.propTypes = {
+  onClick: PropTypes.func.isRequired
+};
+
+function Toggle({
+  name, value, label, onChange, error, instruction
+}) {
+  const [_value, setValue] = React.useState(parseInt(value, 10) === 1 ? 1 : 0);
+
+  React.useEffect(() => {
+    setValue(parseInt(value, 10) === 1 ? 1 : 0);
+  }, [value]);
+
+  const onChangeFunc = () => {
+    const newVal = _value === 1 ? 0 : 1;
+    setValue(newVal);
+
+    if (onChange) onChange.call(window, newVal);
+  };
+
+  return (
+    <div className={`form-field-container ${error ? 'has-error' : null}`}>
+      {label && <label htmlFor={name}>{label}</label>}
+      <input type="hidden" value={_value} name={name} />
+      <div className="field-wrapper flex flex-grow">
+        {parseInt(_value, 10) === 1 && <Enabled onClick={() => onChangeFunc()} />}
+        {parseInt(_value, 10) === 0 && <Disabled onClick={() => onChangeFunc()} />}
+      </div>
+      {instruction
+        && <div className="field-instruction mt-sm">{instruction}</div>}
+      <Error error={error} />
+    </div>
+  );
+}
+
+Toggle.propTypes = {
+  error: PropTypes.string,
+  instruction: PropTypes.string,
+  label: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+};
+
+Toggle.defaultProps = {
+  error: undefined,
+  instruction: undefined,
+  label: undefined,
+  onChange: undefined
+};
+
+export { Toggle };

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

@@ -0,0 +1,26 @@
+.toggle {
+    width: 3rem;
+    height: 1.65rem;
+    border: 1px solid var(--border);
+    border-radius: 20rem;
+    display: flex;
+    background: #f8f8f8;
+    &.enabled {
+        justify-content: flex-end;
+        background-color: var(--primary);
+        border-color: var(--primary);
+        span {
+            margin-right: 2px;
+        }
+    }
+    span {
+        width: 40%;
+        height: 80%;
+        display: block;
+        border: 1px solid var(--border);
+        border-radius: 100%;
+        align-self: center;
+        background: #fff;
+        margin-left: 2px;
+    }
+}

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

@@ -0,0 +1,55 @@
+const validator = {};
+const rules = {
+  email: {
+    handler(value) {
+      if (value === null || value === undefined || value === '')
+        return true;
+      // eslint-disable-next-line no-useless-escape
+      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+      return re.test(String(value).toLowerCase());
+    },
+    errorMessage: 'Invalid email'
+  },
+  number: {
+    handler(value) {
+      if (value === null || value === undefined || value === '')
+        return true;
+      return /^-?[0-9]+$/.test(value);
+    },
+    errorMessage: 'Invalid number'
+  },
+  notEmpty: {
+    handler(value) {
+      return (value && value.length !== 0);
+    },
+    errorMessage: 'This field can not be empty'
+  },
+  noWhiteSpace: {
+    handler(value) {
+      return !/\s/g.test(value);
+    },
+    errorMessage: 'No whitespace allowed'
+  },
+  noSpecialChar: {
+    handler(value) {
+      // eslint-disable-next-line no-useless-escape
+      return !/[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(value);
+    },
+    errorMessage: 'No special character allowed'
+  }
+};
+
+validator.addRule = (key, handler, message) => {
+  rules[key] = {
+    handler,
+    errorMessage: message
+  };
+};
+
+validator.removeRule = (key) => {
+  delete rules[key];
+};
+
+validator.getRule = (key) => rules[key];
+
+export { validator };