reso-ui 1.1.0

package/src/pending_components/form/check-box/check-box.scss

@@ -0,0 +1,34 @@
+.component_checkbox_container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  // border: 2px solid red;
+  margin-right: $margin-xxlarge;
+}
+
+.component_checkbox_checkbox {
+  height: 24px;
+  width: 24px;
+  // border: 1px solid $primary-grey-medium;
+  border-radius: $border-radius-default;
+  margin-right: $margin-xsmall;
+  cursor: pointer;
+  &:disabled {
+    pointer-events: none;
+  }
+}
+
+.component_checkbox_children {
+  font-size: $font-size-default;
+  color: $fc-dark;
+}
+
+.container_auth_tnc {
+  text-decoration: underline;
+  opacity: 0.9;
+  color: $fc-dark;
+  &:hover {
+    opacity: 1;
+  }
+}

package/src/pending_components/form/clickable-button/clickable-button.js

@@ -0,0 +1,30 @@
+import React from "react";
+import classnames from "classnames";
+
+const ClickableButton = ({
+  value,
+  className,
+  disabled,
+  onClick = () => {},
+}) => {
+  const classes = classnames({
+    button: true,
+    component_clickablebutton: true,
+    [`${className}`]: true,
+  });
+
+  return (
+    <button
+      type="submit"
+      className={classes}
+      disabled={disabled}
+      onClick={() => {
+        onClick();
+      }}
+    >
+      {value}
+    </button>
+  );
+};
+
+export default ClickableButton;

package/src/pending_components/form/clickable-button/clickable-button.scss

@@ -0,0 +1,24 @@
+.component_clickablebutton {
+  width: 100%;
+  height: 48px;
+  margin-top: $margin-xsmall;
+  line-height: 48px;
+  text-align: center;
+  margin-bottom: $margin-medium;
+  border-radius: $border-radius-default;
+  background: $bg-button-primary;
+  color: $fc-light;
+  font-family: $font-family;
+  opacity: 0.9;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:disabled {
+    background: $bg-button-disabled;
+    opacity: 0.9;
+    cursor: default;
+  }
+}

package/src/pending_components/form/dropdown-select/dropdown-select.js

@@ -0,0 +1,87 @@
+import React, { useState, useRef, useEffect } from "react";
+import classnames from "classnames";
+import { DropdownDown, DropdownUp } from "../../../icons";
+
+const DropdownSelect = ({ options = [], value = "", onChange = () => {} }) => {
+  const node = useRef();
+  const [isOpened, setIsOpened] = useState(false);
+
+  const handleClickComponent = (e) => {
+    if (node.current.contains(e.target)) {
+      // inside click
+      return;
+    }
+    // outside click
+    setIsOpened(false);
+  };
+
+  useEffect(() => {
+    // add event listener on mount
+    document.addEventListener("mousedown", handleClickComponent);
+
+    // remove event listener when unmounted
+    return () => {
+      document.removeEventListener("mousedown", handleClickComponent);
+    };
+  }, []);
+  const listItemClassesActive = classnames({
+    component_dropdownselect_option: true,
+    component_dropdownselect_option_selected: true,
+  });
+
+  const ul_header_classes = classnames({
+    component_dropdownselect_li_header: true,
+    [`${
+      isOpened
+        ? "component_dropdownselect_li_header_opened"
+        : "component_dropdownselect_li_header_not_opened"
+    }`]: true,
+  });
+
+  const listItemClasses = classnames({
+    component_dropdownselect_option: true,
+  });
+
+  return (
+    <ul
+      ref={node}
+      id="selectInput"
+      className="component_dropdownselect_ul_container no_select"
+    >
+      <div
+        className={ul_header_classes}
+        onClick={() => {
+          setIsOpened(!isOpened);
+        }}
+      >
+        {value ? value : ""}
+      </div>
+      {isOpened && (
+        <div className="component_dropdownselect_li_inactive_container">
+          {options.map((op, index) => (
+            <li
+              key={index}
+              className={op === value ? listItemClassesActive : listItemClasses}
+              onClick={() => {
+                setIsOpened(false);
+                onChange(op, index);
+              }}
+            >
+              {op}
+            </li>
+          ))}
+        </div>
+      )}
+      <div
+        className="component_dropdownselect_arrow"
+        onClick={() => {
+          setIsOpened(!isOpened);
+        }}
+      >
+        {isOpened ? <DropdownUp /> : <DropdownDown />}
+      </div>
+    </ul>
+  );
+};
+
+export default DropdownSelect;

package/src/pending_components/form/dropdown-select/dropdown-select.scss

@@ -0,0 +1,108 @@
+.dropdownContainer {
+  // this is used by parent container
+  // usually is a flex component
+  height: 42px;
+}
+
+.component_dropdownselect_ul_container {
+  // border: 1px solid $primary-grey-medium;
+  // border-radius: $border-radius-default;
+  // transition: max-height 0.5s ease;
+  color: $fc-dark;
+  min-width: $input-select-width;
+  // height: 100%;
+  position: relative;
+}
+
+.component_dropdownselect_li_header {
+  border: 1px solid $primary-grey-medium;
+  border-radius: $border-radius-default;
+  background-color: $white;
+  width: 100%;
+  height: $input-text-height;
+  line-height: $input-text-height;
+  padding: 0 $padding-small;
+  padding-right: $input-text-height;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+
+  &:focus {
+    box-shadow: 0px 2px 15px rgba(34, 60, 102, 0.2);
+  }
+  &:disabled {
+    background-color: $primary-grey-medium-light;
+  }
+
+  &:hover {
+    color: $fc-dark;
+    background-color: $white;
+  }
+}
+
+.component_dropdownselect_li_header_not_opened {
+  border-radius: $border-radius-default;
+}
+
+.component_dropdownselect_li_header_opened {
+  border-bottom: none;
+  border-radius: $border-radius-default $border-radius-default 0 0;
+}
+
+.component_dropdownselect_li_inactive_container {
+  // border: 1px solid $primary-grey-medium;
+  // box-shadow: 0px 2px 15px rgba(34, 60, 102, 0.2);
+  border-radius: 0 0 $border-radius-default $border-radius-default;
+  border: 1px solid $primary-grey-medium;
+  border-top: none;
+  // border-radius: $border-radius-default;
+  background-color: $white;
+  position: relative;
+  z-index: 5;
+  max-height: 240px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin-bottom: $margin-medium;
+}
+
+.component_dropdownselect_option {
+  width: 100%;
+  height: $input-text-height;
+  line-height: $input-text-height;
+  padding: 0 $padding-small;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+
+  &:focus {
+    box-shadow: 0px 2px 15px rgba(34, 60, 102, 0.2);
+  }
+  &:disabled {
+    background-color: $primary-grey-medium-light;
+  }
+  &:hover {
+    color: $fc-light;
+    background-color: $primary-grey-medium;
+  }
+}
+
+.component_dropdownselect_option_selected {
+  background-color: $primary-grey-medium-light;
+  &:hover {
+    color: $fc-dark;
+    background-color: $primary-grey-medium-light;
+  }
+}
+
+.component_dropdownselect_arrow {
+  width: $input-text-height;
+  height: $input-text-height;
+  //   border: 1px solid $primary-grey-medium;
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/pending_components/form/external-links-array-input/external-link-array-input.scss

@@ -0,0 +1,39 @@
+.container_externalLinksArrayForm_container {
+  border: 1px solid $primary-grey-medium;
+  border-radius: $border-radius-default;
+  width: 100%;
+  flex: 1;
+  padding: $padding-xsmall;
+}
+
+.container_externalLinksArrayForm_objectContainer {
+  padding: $padding-xsmall;
+  border: 1px solid $primary-grey-medium;
+  border-radius: $border-radius-default;
+  margin-bottom: $margin-xxsmall;
+}
+
+.container_externalLinksArrayForm_objectContainer_selected {
+  border: 2px solid $primary-grey-dark;
+}
+
+.component_externalLinksArrayForm_input_group {
+  margin-bottom: $margin-xxxsmall;
+}
+
+.container_externalLinksArrayForm_buttonsContainer {
+  margin-top: $margin-small;
+}
+
+.component_externalLinksArrayForm_button_left {
+  border-radius: $border-radius-small;
+  height: 32px;
+  line-height: 32px;
+  margin-right: $margin-xxxsmall;
+}
+
+.component_externalLinksArrayForm_button {
+  border-radius: $border-radius-small;
+  height: 32px;
+  line-height: 32px;
+}

package/src/pending_components/form/external-links-array-input/external-links-array-input.js

@@ -0,0 +1,234 @@
+import React, { useState } from "react";
+import classnames from "classnames";
+import FlexContainer from "../../component-containers/flex-container/flex-container";
+import InputLabel from "../input-label/input-label";
+import InputField from "../input-field/input-field";
+import GenericButton from "../../buttons/generic-button/generic-button";
+import PrimaryButton from "../../buttons/primary-button/primary-button";
+
+const ExternalLinksArrayInput = ({
+  className,
+  topLevelFormValuesChanged,
+  setTopLevelFormValuesChanged,
+  id,
+  links,
+  getSelectedObject,
+  selectedObjIndex,
+  setSelectedObjectIndex,
+  addToArray,
+  removeFromArray,
+  updateArrayObject,
+  resetSelectedObjectIndex,
+  restoreInitialObjects,
+}) => {
+  const [editMode, setEditMode] = useState(false);
+  const [showForm, setShowFrom] = useState(false);
+  const [newObjText, setNewObjText] = useState("");
+  const [newObjLink, setNewObjLink] = useState("");
+
+  const containerClasses = classnames({
+    container_externalLinksArrayForm_container: true,
+    [className]: className !== null && className !== undefined,
+  });
+
+  const resetFormValues = () => {
+    setNewObjText("");
+    setNewObjLink("");
+  };
+
+  return (
+    <div id={id} className={containerClasses}>
+      {links &&
+        links.length > 0 &&
+        links.map((linkObject, idx) => {
+          const objectIsSelected =
+            selectedObjIndex !== null && selectedObjIndex === idx;
+
+          const objectClasses = classnames({
+            container_externalLinksArrayForm_objectContainer: true,
+            container_externalLinksArrayForm_objectContainer_selected:
+              objectIsSelected,
+          });
+          return (
+            <div className={objectClasses} key={`external-links-object-${idx}`}>
+              <FlexContainer
+                direction="row"
+                justify="start"
+                align="center"
+                className="component_externalLinksArrayForm_input_group"
+              >
+                <InputLabel
+                  label="Text"
+                  htmlFor={`product-externalLink-text-input-${idx}`}
+                />
+                <InputField
+                  id={`product-externalLink-text-input-${idx}`}
+                  type="text"
+                  value={linkObject.text}
+                  onChange={(e) => {
+                    setTopLevelFormValuesChanged(true);
+                    if (editMode && objectIsSelected) {
+                      updateArrayObject(selectedObjIndex, {
+                        text: e.target.value,
+                      });
+                    }
+                  }}
+                  disabled={!objectIsSelected}
+                />
+              </FlexContainer>
+              <FlexContainer
+                direction="row"
+                justify="start"
+                align="center"
+                className="component_externalLinksArrayForm_input_group"
+              >
+                <InputLabel
+                  label="Link"
+                  htmlFor={`product-externalLink-link-input-${idx}`}
+                />
+                <InputField
+                  id={`product-externalLink-link-input-${idx}`}
+                  type="text"
+                  value={linkObject.link}
+                  onChange={(e) => {
+                    setTopLevelFormValuesChanged(true);
+                    if (editMode && objectIsSelected) {
+                      updateArrayObject(selectedObjIndex, {
+                        link: e.target.value,
+                      });
+                    }
+                  }}
+                  disabled={!objectIsSelected}
+                />
+              </FlexContainer>
+              <FlexContainer
+                direction="row"
+                justify="end"
+                align="center"
+                className="component_externalLinksArrayForm_input_group container_externalLinksArrayForm_buttonsContainer"
+              >
+                <GenericButton
+                  text="Edit"
+                  onClick={() => {
+                    resetFormValues();
+                    setSelectedObjectIndex(idx);
+                    setEditMode(true);
+                    setShowFrom(false);
+                  }}
+                  disabled={objectIsSelected}
+                  className="component_externalLinksArrayForm_button_left"
+                />
+                <GenericButton
+                  text="Delete"
+                  onClick={() => {
+                    removeFromArray(idx);
+                    setTopLevelFormValuesChanged(true);
+                  }}
+                  className="component_externalLinksArrayForm_button"
+                />
+              </FlexContainer>
+            </div>
+          );
+        })}
+      {/* NEW FORM */}
+      {showForm && (
+        <div className="container_externalLinksArrayForm_objectContainer">
+          <FlexContainer
+            direction="row"
+            justify="start"
+            align="center"
+            className="component_externalLinksArrayForm_input_group"
+          >
+            <InputLabel
+              label="Text"
+              htmlFor={`product-externalLink-text-input-new`}
+            />
+            <InputField
+              id={`product-externalLink-text-input-new`}
+              type="text"
+              value={newObjText}
+              onChange={(e) => {
+                setNewObjText(e.target.value);
+              }}
+            />
+          </FlexContainer>
+          <FlexContainer
+            direction="row"
+            justify="start"
+            align="center"
+            className="component_externalLinksArrayForm_input_group"
+          >
+            <InputLabel
+              label="Link"
+              htmlFor={`product-externalLink-link-input-new`}
+            />
+            <InputField
+              id={`product-externalLink-link-input-new`}
+              type="text"
+              value={newObjLink}
+              onChange={(e) => {
+                setNewObjLink(e.target.value);
+              }}
+            />
+          </FlexContainer>
+          <FlexContainer
+            direction="row"
+            justify="end"
+            align="center"
+            className="component_externalLinksArrayForm_input_group container_externalLinksArrayForm_buttonsContainer"
+          >
+            <PrimaryButton
+              text="Add"
+              disabled={
+                !newObjLink ||
+                newObjLink === "" ||
+                !newObjText ||
+                newObjText === ""
+              }
+              onClick={() => {
+                addToArray({
+                  text: newObjText,
+                  link: newObjLink,
+                });
+                setTopLevelFormValuesChanged(true);
+                resetFormValues();
+                resetSelectedObjectIndex();
+                setEditMode(false);
+                setShowFrom(false);
+              }}
+              //   disabled={objectIsSelected}
+              className="component_externalLinksArrayForm_button"
+            />
+          </FlexContainer>
+        </div>
+      )}
+      <GenericButton
+        className="component_externalLinksArrayForm_input_group"
+        fullWidth
+        text={showForm ? "Done" : "Add New"}
+        onClick={() => {
+          resetFormValues();
+          resetSelectedObjectIndex();
+          setEditMode(false);
+          setShowFrom(!showForm);
+        }}
+      />
+      {links && links.length > 0 && topLevelFormValuesChanged && (
+        <GenericButton
+          className="component_externalLinksArrayForm_input_group"
+          fullWidth
+          text={"Reset All"}
+          onClick={() => {
+            resetFormValues();
+            resetSelectedObjectIndex();
+            setEditMode(false);
+            setShowFrom(false);
+            restoreInitialObjects();
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ExternalLinksArrayInput;

package/src/pending_components/form/form/form.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+const Form = ({ className, onSubmit, children }) => {
+  return (
+    <form
+      className={className}
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+    >
+      {children}
+    </form>
+  );
+};
+
+export default Form;

package/src/pending_components/form/form-group/form-group.js

@@ -0,0 +1,20 @@
+import React from "react";
+import classnames from "classnames";
+
+// if you are using the custom dropdown,
+// you should overwrite the style with some extra height
+const FormGroup = ({ heading, children, className }) => {
+  const contentClasses = classnames({
+    component_formgroup_content: true,
+    [className]: true,
+  });
+
+  return (
+    <div className="component_formgroup_container">
+      <div className="heading component_formgroup_header">{heading}</div>
+      <div className={contentClasses}>{children}</div>
+    </div>
+  );
+};
+
+export default FormGroup;

package/src/pending_components/form/form-group/form-group.scss

@@ -0,0 +1,21 @@
+.component_formgroup_container {
+  border: 1px solid $primary-grey-medium-light;
+  border-radius: $border-radius-default;
+  width: 100%;
+  margin-bottom: $margin-xlarge;
+}
+
+.component_formgroup_header {
+  background-color: $primary-grey-medium-light;
+  border-radius: $border-radius-default $border-radius-default 0 0;
+  padding: 0 $padding-medium;
+  height: 48px;
+  line-height: 48px;
+  text-align: left;
+  color: $primary-grey-dark;
+}
+
+.component_formgroup_content {
+  //   border: solid 2px blue;
+  padding: $padding-large;
+}

package/src/pending_components/form/input-field/input-field.js

@@ -0,0 +1,57 @@
+import React from "react";
+import classnames from "classnames";
+import { useDisableNumberInputScroll } from "../../../hooks/fields";
+
+const InputField = ({
+  type = "text", // can be anything except file
+  value = "",
+  id = "inputComponent",
+  onChange = () => {},
+  disabled = false,
+  placeholder,
+  pattern = null,
+  minLength = null,
+  min = 0,
+  step = "any",
+  max = null,
+  required = false,
+  inputClassName,
+}) => {
+  useDisableNumberInputScroll();
+
+  const inputClasses = classnames({
+    input_text: true,
+    component_inputfield_input: true,
+    [inputClassName]: true,
+  });
+
+  return (
+    <input
+      id={id}
+      type={type === "file" ? "text" : type}
+      value={
+        type === "number"
+          ? value !== null && value !== ""
+            ? value
+            : 0
+          : value
+          ? value
+          : ""
+      }
+      min={min}
+      max={max}
+      step={step}
+      minLength={minLength}
+      required={required}
+      className={inputClasses}
+      placeholder={placeholder}
+      pattern={pattern}
+      disabled={disabled || type === "file"}
+      onChange={(e) => {
+        onChange(e);
+      }}
+    ></input>
+  );
+};
+
+export default InputField;

package/src/pending_components/form/input-field/input-field.scss

@@ -0,0 +1,22 @@
+.component_inputfield_label {
+  margin-bottom: $margin-small;
+}
+
+.component_inputfield_input {
+  height: $input-text-height;
+  border: 1px solid $primary-grey-medium;
+  border-radius: $border-radius-default;
+  outline: none;
+  padding: $padding-xsmall $padding-small;
+  font-family: $font-family;
+  // sometimes container is flex, otherwise take width 100%
+  flex: 1;
+  width: 100%;
+
+  &:focus {
+    box-shadow: 0px 2px 15px rgba(34, 60, 102, 0.2);
+  }
+  &:disabled {
+    background-color: $primary-grey-medium-light;
+  }
+}