catchup-library-web 1.0.0 → 1.0.2

package/src/components/dividers/BlueVerticalDividerLine.tsx

@@ -0,0 +1,13 @@
+import { IDividerLineProps } from "../../properties/DividerLineProperties";
+
+const BlueVerticalDividerLine = ({ opacity }: IDividerLineProps) => {
+  return (
+    <div
+      className={`w-[2px] h-[40px] my-4 bg-catchup-blue ${
+        opacity === "medium" ? "opacity-50" : ""
+      }`}
+    />
+  );
+};
+
+export default BlueVerticalDividerLine;

package/src/components/dividers/DividerLine.tsx

@@ -0,0 +1,5 @@
+const DividerLine = () => {
+  return <div className="bg-catchup-gray-50 h-[1px] w-full my-3" />;
+};
+
+export default DividerLine;

package/src/components/dividers/VerticalDividerLine.tsx

@@ -0,0 +1,5 @@
+const VerticalDividerLine = () => {
+  return <div className="bg-catchup-gray-50 h-full w-[1px] mx-3" />;
+};
+
+export default VerticalDividerLine;

package/src/components/dnds/DraggableDroppableItem.tsx

@@ -0,0 +1,62 @@
+import { useRef } from "react";
+import { useDrag, useDrop } from "react-dnd";
+import { IDraggableDroppableItemProps } from "../../properties/DnDProperties";
+
+const DraggableDroppableItem = ({
+  key,
+  item,
+  type,
+  component,
+  moveCardHandler,
+  dropRef,
+  target,
+  setTarget,
+}: IDraggableDroppableItemProps) => {
+  const ref = useRef(null);
+
+  const [, drop] = useDrop({
+    accept: type,
+    hover() {
+      if (!ref.current) {
+        return;
+      }
+      if (item.index && target !== item.index) {
+        setTarget(item.index);
+      }
+    },
+  });
+
+  const [{ isDragging }, drag] = useDrag({
+    type,
+    item,
+    end: (item, monitor) => {
+      const dropResult = monitor.getDropResult();
+      if (dropResult) {
+        moveCardHandler();
+      }
+    },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const opacity = isDragging ? 0.4 : 1;
+
+  drag(drop(ref));
+
+  return (
+    <div
+      key={key}
+      className={`${
+        isDragging ? "w-[0px] opacity-0" : "w-full opacity-100"
+      } transition-all duration-500`}
+      ref={dropRef}
+    >
+      <div ref={ref} className="w-full" style={{ opacity }}>
+        {component}
+      </div>
+    </div>
+  );
+};
+
+export default DraggableDroppableItem;

package/src/components/dnds/DraggableItem.tsx

@@ -0,0 +1,41 @@
+import { useDrag } from "react-dnd";
+import { IDraggableItemProps } from "../../properties/DnDProperties";
+
+const DraggableItem = ({
+  key,
+  item,
+  type,
+  component,
+  moveCardHandler,
+}: IDraggableItemProps) => {
+  const [{ isDragging }, drag] = useDrag({
+    type,
+    item,
+    end: (item, monitor) => {
+      const dropResult = monitor.getDropResult();
+      if (dropResult) {
+        moveCardHandler();
+      }
+    },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const opacity = isDragging ? 0.4 : 1;
+
+  return (
+    <div
+      key={key}
+      className={`${
+        isDragging ? "w-[0px] opacity-0" : "opacity-100"
+      } transition-all duration-500`}
+    >
+      <div ref={drag} className="" style={{ opacity }}>
+        {component}
+      </div>
+    </div>
+  );
+};
+
+export default DraggableItem;

package/src/components/dnds/DroppableItem.tsx

@@ -0,0 +1,38 @@
+import { useRef } from "react";
+import { useDrop } from "react-dnd";
+import { IDroppableItemProps } from "../../properties/DnDProperties";
+
+const DroppableItem = ({
+  key,
+  item,
+  type,
+  component,
+  dropRef,
+  target,
+  setTarget,
+}: IDroppableItemProps) => {
+  const ref = useRef(null);
+
+  const [, drop] = useDrop({
+    accept: type,
+    hover() {
+      if (item.index !== null && target !== item.index) {
+        setTarget(item.index);
+      }
+    },
+  });
+
+  dropRef(drop(ref));
+
+  return (
+    <div
+      key={key}
+      className={`w-full transition-all duration-500 h-full`}
+      ref={ref}
+    >
+      {component}
+    </div>
+  );
+};
+
+export default DroppableItem;

package/src/components/dropdowns/MediaDropdown.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { IDropdownProps } from "../../properties/DropdownProperties";
+
+const MediaDropdown = ({ id, answer, optionList }: IDropdownProps) => {
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+
+  return (
+    <div
+      key={id}
+      className="w-full relative"
+      onMouseEnter={() => {
+        setShowDropdown(true);
+      }}
+      onMouseLeave={() => {
+        setShowDropdown(false);
+      }}
+    >
+      <div className="w-full flex flex-col items-center justify-center">
+        {answer}
+      </div>
+      <ul
+        className={`absolute ${
+          showDropdown ? "opacity-100 visible" : "opacity-0 invisible"
+        } flex flex-col items-center w-[300px] rounded-catchup-xlarge border-3 transition-all duration-300 border-catchup-blue bg-catchup-white px-4 py-4 translate-x-1/2 right-1/2 mt-2 z-10`}
+      >
+        {optionList.map((option: any, index: number) => (
+          <li
+            key={option.id}
+            className={`${
+              option.listItemClassNames ? option.listItemClassNames : ""
+            }`}
+          >
+            <div
+              className={`w-full flex flex-col my-2 ${
+                option.divClassNames ? option.divClassNames : ""
+              }`}
+              onClick={option.onClick}
+            >
+              {option.media}
+            </div>
+            {index !== optionList.length - 1 ? (
+              <div className="w-full border my-1 border-catchup-light-blue rounded-catchup-full" />
+            ) : null}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default MediaDropdown;

package/src/components/groups/InputGroup.tsx

@@ -0,0 +1,330 @@
+import Select from "react-select";
+import i18n from "../../language/i18n";
+import { useEffect, useRef } from "react";
+import { IInputGroupProps } from "../../properties/GroupProperties";
+import BaseImage from "../images/BaseImage";
+import { IOptionProps } from "../../properties/CommonProperties";
+
+const InputGroup = ({
+  type,
+  title,
+  defaultValue,
+  placeholder,
+  value,
+  onFocus,
+  onChange,
+  onClick,
+  onKeyDown,
+  optionList,
+  errorText,
+  multiple,
+  accept,
+  theme,
+  useMinHeight,
+  disabled,
+  limit,
+}: IInputGroupProps) => {
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (!textAreaRef) return;
+    if (!textAreaRef.current) return;
+    if (value) {
+      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+    } else {
+      textAreaRef.current.style.height = `44px`;
+    }
+  }, [textAreaRef, value]);
+
+  const retrieveNullableOptionList = () => {
+    if (!optionList) return [];
+    const currentOptionList = {
+      text: i18n.t("option_please_select"),
+      value: "DEFAULT_OPTION",
+    };
+    return [currentOptionList, ...optionList];
+  };
+
+  const convertOptionListToSelectComponent = (optionList: IOptionProps[]) => {
+    return optionList.map((option: IOptionProps) => ({
+      value: option.value,
+      label: option.text,
+    }));
+  };
+
+  const handleTextAreaOnChange = (e: any) => {
+    if (!textAreaRef) return;
+    if (!textAreaRef.current) return;
+    textAreaRef.current.style.height = `30px`;
+    textAreaRef.current.style.height = `${e.target.scrollHeight + 6}px`;
+    if (limit) {
+      if (e.target.value.length <= limit) {
+        onChange && onChange(e);
+      }
+    } else {
+      onChange && onChange(e);
+    }
+  };
+
+  const CheckboxInputGroup = () => {
+    return (
+      <div
+        className="flex flex-row items-center gap-x-1 cursor-pointer"
+        onClick={onClick}
+      >
+        <BaseImage
+          src={value ? "/icons/checkbox.png" : "/icons/checkbox-empty.png"}
+          alt="checkbox"
+          size="xsmall"
+          onClick={() => {}}
+        />
+        <p className="">{title}</p>
+      </div>
+    );
+  };
+
+  const FileInputGroup = () => {
+    return (
+      <div className="my-1">
+        {title ? (
+          <p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
+            {title}
+          </p>
+        ) : null}
+        <input
+          className="w-full py-2 px-4 border border-catchup-gray-100 placeholder-catchup-gray-200 rounded-catchup-large text-black focus:outline-none focus:border-catchup-blue-400 focus:shadow-input"
+          type={type}
+          defaultValue={defaultValue}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onClick={onClick}
+          multiple={multiple}
+          accept={accept}
+        />
+      </div>
+    );
+  };
+
+  const DateInputGroup = () => {
+    return (
+      <div className="my-1">
+        {title ? (
+          <p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
+            {title}
+          </p>
+        ) : null}
+        <input
+          className={`w-full py-2 px-4 border ${
+            errorText
+              ? "border-catchup-red shadow-error"
+              : theme === "red"
+              ? "border-catchup-red bg-catchup-red text-catchup-white focus:border-catchup-red"
+              : "border-catchup-gray-100 placeholder-catchup-gray-200 focus:border-catchup-blue-400"
+          } rounded-catchup-large text-black focus:outline-none focus:shadow-input`}
+          type={type}
+          defaultValue={defaultValue}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      </div>
+    );
+  };
+
+  const SearchableSelectInputGroup = () => {
+    return (
+      <div className="my-1">
+        {title ? (
+          <p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400 ">
+            {title}
+          </p>
+        ) : null}
+        <Select
+          options={convertOptionListToSelectComponent(
+            retrieveNullableOptionList()
+          )}
+          className={`w-full`}
+          styles={{
+            control: (baseStyles: any, state: any) => ({
+              ...baseStyles,
+              borderWidth: 1,
+              borderStyle: "solid",
+              borderRadius: 16,
+              borderColor: errorText
+                ? "#ff6b6b"
+                : theme === "red"
+                ? "#ff6b6b"
+                : state.isFocused
+                ? "#73d7e6"
+                : state.isActive
+                ? "#d2dde1"
+                : "#d2dde1",
+              backgroundColor: theme !== "red" ? "#ffffff" : "#ff6b6b",
+              paddingRight: 6,
+              paddingLeft: 6,
+              paddingTop: 2,
+              paddingBottom: 2,
+              outline: "none",
+              margin: 0,
+              text: theme === "red" ? "#ffffff" : "#55777f",
+              boxShadow: errorText
+                ? "0px 0px 7px 0px rgba(255, 107, 107, 1)"
+                : state.isFocused
+                ? "0px 0px 7px 0px rgba(115, 215, 230, 100)"
+                : "none",
+              "&:hover": {
+                outline: "none",
+              },
+            }),
+            menu: (baseStyles: any, state: any) => ({
+              ...baseStyles,
+              borderRadius: 16,
+              paddingTop: 10,
+              paddingBottom: 10,
+              boxShadow: "0px 0px 6px 0px rgba(0, 0, 0, 0.25)",
+            }),
+            option: (baseStyles: any, state: any) => ({
+              ...baseStyles,
+              color: state.isSelected ? "#2b3a41" : "#2b3a41",
+              backgroundColor: state.isSelected ? "#eaecf1" : "",
+              "&:hover": {
+                backgroundColor: "#eaecf1",
+              },
+              paddingLeft: 20,
+              paddingRight: 20,
+            }),
+            dropdownIndicator: (baseStyles: any, state: any) => ({
+              ...baseStyles,
+              color: state.isFocused ? "#57c2d3" : "#55777f",
+              "&:hover": {
+                color: state.isFocused ? "#57c2d3" : "#55777f",
+              },
+            }),
+          }}
+          components={{
+            IndicatorSeparator: () => null,
+          }}
+          value={convertOptionListToSelectComponent(
+            retrieveNullableOptionList()
+          ).find((option) => option.value === value)}
+          onChange={(target: any) => {
+            const event = { target };
+            onChange && onChange(event);
+          }}
+        />
+      </div>
+    );
+  };
+
+  const TextAreaInputGroup = () => {
+    return (
+      <div className="my-1 flex-1 flex flex-col relative">
+        <div className="flex flex-row justify-between items-center">
+          <div>
+            {title ? (
+              <p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
+                {title}
+              </p>
+            ) : null}
+          </div>
+          <div>
+            {limit ? (
+              <p className="text-md font-semibold pr-2 py-1 text-catchup-gray-400">
+                {value.length} / {limit}
+              </p>
+            ) : null}
+          </div>
+        </div>
+        <textarea
+          ref={textAreaRef}
+          disabled={disabled}
+          className={`w-full ${
+            useMinHeight ? "min-h-[250px]" : ""
+          } resize-none overflow-hidden py-2 px-4 border ${
+            errorText
+              ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80"
+              : "border-catchup-gray-100"
+          } placeholder-catchup-gray-200 rounded-catchup-large focus:outline-none focus:border-catchup-blue-400 ${
+            disabled ? "bg-catchup-lighter-gray" : null
+          } focus:shadow-input`}
+          placeholder={errorText ? errorText : placeholder}
+          value={value}
+          onLoad={(e) => {
+            console.log(e);
+          }}
+          onChange={handleTextAreaOnChange}
+          onFocus={onFocus}
+          onKeyDown={onKeyDown}
+        />
+        {/* <div
+          className={`${
+            title ? "absolute top-0 right-0" : "absolute top-3 left-5"
+          }`}
+        >
+          <p className="italic text-catchup-red opacity-70">{errorText}</p>
+        </div> */}
+      </div>
+    );
+  };
+
+  const TextInputGroup = () => {
+    return (
+      <div className="my-1 relative">
+        {title ? (
+          <p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
+            {title}
+          </p>
+        ) : null}
+        <input
+          disabled={disabled}
+          className={`w-full py-2 px-4 border ${
+            errorText
+              ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80"
+              : "border-catchup-gray-100"
+          } rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${
+            disabled ? "bg-catchup-lighter-gray" : null
+          } focus:shadow-input`}
+          type={type}
+          defaultValue={defaultValue}
+          placeholder={errorText ? errorText : placeholder}
+          value={value}
+          onChange={onChange}
+          onFocus={onFocus}
+          onKeyDown={onKeyDown}
+        />
+
+        {/* <div
+          className={`${
+            title ? "absolute top-0 right-0" : "absolute top-3 left-5"
+          }`}
+        >
+          <p className="italic text-catchup-red opacity-70">{errorText}</p>
+        </div> */}
+      </div>
+    );
+  };
+
+  const RenderMainContent = () => {
+    if (type === "text" || type === "number") {
+      return TextInputGroup();
+    } else if (type === "textarea") {
+      return TextAreaInputGroup();
+    } else if (type === "password") {
+      return TextInputGroup();
+    } else if (type === "select") {
+      return SearchableSelectInputGroup();
+    } else if (type === "date" || type === "datetime-local") {
+      return DateInputGroup();
+    } else if (type === "file") {
+      return FileInputGroup();
+    } else if (type === "checkbox") {
+      return CheckboxInputGroup();
+    }
+  };
+
+  return RenderMainContent();
+};
+
+export default InputGroup;

package/src/hooks/useScreenSize.ts

@@ -0,0 +1,40 @@
+import { useState, useEffect } from "react";
+
+const useScreenSize = () => {
+  const [containerSize, setContainerSize] = useState({
+    width: 0,
+    height: 0,
+  });
+  const [screenSize, setScreenSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+      const container = document.getElementById("container");
+      if (!container) return;
+      const boundingClientRect = container.getBoundingClientRect();
+      setContainerSize({
+        width: boundingClientRect.width,
+        height: boundingClientRect.height,
+      });
+    };
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+
+    // Clean up the event listener when the component unmounts
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return { screenSize, containerSize };
+};
+
+export default useScreenSize;

package/src/index.ts

@@ -8,3 +8,27 @@ export { default as ApproveButton } from "./components/buttons/ApproveButton";
 export { default as BaseImage } from "./components/images/BaseImage";
 
 export { default as BaseLoading } from "./components/loading/BaseLoading";
+
+export { default as DropdownActivityContent } from "./components/activities/DropdownActivityContent";
+export { default as FillInTheBlanksActivityContent } from "./components/activities/FillInTheBlanksActivityContent";
+export { default as GroupingActivityContent } from "./components/activities/GroupingActivityContent";
+export { default as MatchingActivityContent } from "./components/activities/MatchingActivityContent";
+export { default as MCMAActivityContent } from "./components/activities/MCMAActivityContent";
+export { default as MCSAActivityContent } from "./components/activities/MCSAActivityContent";
+export { default as OpenEndedActivityContent } from "./components/activities/OpenEndedActivityContent";
+export { default as OrderingActivityContent } from "./components/activities/OrderingActivityContent";
+export { default as TrueFalseActivityContent } from "./components/activities/TrueFalseActivityContent";
+
+export { default as BlueVerticalDividerLine } from "./components/dividers/BlueVerticalDividerLine";
+export { default as DividerLine } from "./components/dividers/DividerLine";
+export { default as VerticalDividerLine } from "./components/dividers/VerticalDividerLine";
+
+export { default as InputGroup } from "./components/groups/InputGroup";
+
+export { default as useScreenSize } from "./hooks/useScreenSize";
+
+export { default as i18n } from "./language/i18n";
+
+export * from "./utilization/AppUtilization";
+export * from "./utilization/CatchtivityUtilization";
+export * from "./utilization/StorageUtilization";

package/src/language/i18n.ts

@@ -0,0 +1,10 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+// the translations
+// (tip move them in a JSON file and import them,
+// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
+
+i18n.use(initReactI18next);
+
+export default i18n;