catchup-library-web 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/boxes/SelectionBox.tsx

@@ -0,0 +1,41 @@
+import { ISelectionBoxProps } from "../../properties/BoxProperties";
+
+const SelectionBox = ({
+  optionList,
+  selectedId,
+  handleSelectOnClick,
+}: ISelectionBoxProps) => {
+  return (
+    <div className="flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center">
+      {optionList.map((option: any, index: number) => (
+        <div
+          key={index}
+          className={`${
+            option.id === selectedId
+              ? "border-catchup-blue-400"
+              : "border-catchup-gray-100 hover:border-catchup-blue-500"
+          } border-2 rounded-catchup-xlarge py-3 px-8 cursor-pointer duration-300 transition-all`}
+          onClick={() => {
+            handleSelectOnClick(option.id);
+          }}
+        >
+          <div
+            className={`flex flex-row items-center gap-x-1 ${
+              option.id === selectedId ? "opacity-100" : "opacity-50"
+            }`}
+          >
+            <div>{option.icon}</div>
+            <div className="flex-1 flex flex-col items-center">
+              <p>{option.text}</p>
+              {option.subText ? (
+                <p className="text-md">({option.subText})</p>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SelectionBox;

package/src/components/boxes/SelectionCheckbox.tsx

@@ -0,0 +1,66 @@
+import { ISelectionCheckboxBoxProps } from "../../properties/BoxProperties";
+import BaseImage from "../images/BaseImage";
+
+const SelectionCheckbox = ({
+  optionList,
+  selectedIdList,
+  handleSelectOnClick,
+  handleRemoveOnClick,
+}: ISelectionCheckboxBoxProps) => {
+  return (
+    <div className="flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center">
+      {optionList.map((option: any, index: number) => (
+        <div
+          key={index}
+          className={`${
+            selectedIdList.findIndex(
+              (selectedId: any) => selectedId === option.id
+            ) > -1
+              ? "border-catchup-blue-400"
+              : "border-catchup-gray-100 hover:border-catchup-blue-500"
+          } border-2 rounded-catchup-xlarge py-3 px-6 cursor-pointer duration-300 transition-all`}
+          onClick={() => {
+            if (
+              selectedIdList.findIndex(
+                (selectedId: any) => selectedId === option.id
+              ) === -1
+            ) {
+              handleSelectOnClick(option.id);
+            } else {
+              handleRemoveOnClick(option.id);
+            }
+          }}
+        >
+          <div
+            className={`flex flex-row items-center gap-x-1 ${
+              selectedIdList.findIndex(
+                (selectedId: any) => selectedId === option.id
+              ) > -1
+                ? "opacity-100"
+                : "opacity-50"
+            }`}
+          >
+            <div>
+              <BaseImage
+                src={
+                  selectedIdList.findIndex(
+                    (selectedId: any) => selectedId === option.id
+                  ) > -1
+                    ? "/icons/checkbox.png"
+                    : "/icons/checkbox-empty.png"
+                }
+                alt="checkbox"
+                size="small"
+              />
+            </div>
+            <div className="flex-1">
+              <p>{option.text}</p>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SelectionCheckbox;

package/src/components/labels/ActivityTemplateLabel.tsx

@@ -0,0 +1,15 @@
+import { IActivityTemplateLabelProps } from "../../properties/LabelProperties";
+import BaseImage from "../images/BaseImage";
+
+const ActivityTemplateLabel = ({ title }: IActivityTemplateLabelProps) => {
+  return (
+    <div className="px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge">
+      <div className="flex flex-row items-center gap-x-2">
+        <BaseImage src="/icons/activity.png" alt="label" size="xsmall" />
+        <p className="text-md">{title}</p>
+      </div>
+    </div>
+  );
+};
+
+export default ActivityTemplateLabel;

package/src/components/labels/BrandLabel.tsx

@@ -0,0 +1,19 @@
+import { IBrandLabelProps } from "../../properties/LabelProperties";
+import BaseImage from "../images/BaseImage";
+
+const BrandLabel = ({ title, icon, font }: IBrandLabelProps) => {
+  return (
+    <div className="px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge">
+      <div className="flex flex-row items-center gap-x-2">
+        {icon ? (
+          icon
+        ) : (
+          <BaseImage src="/icons/brand-label.png" alt="label" size="xsmall" />
+        )}
+        <p className={font ? font : "text-sm"}>{title}</p>
+      </div>
+    </div>
+  );
+};
+
+export default BrandLabel;

package/src/components/labels/CoterieLabel.tsx

@@ -0,0 +1,11 @@
+import { ICoterieLabelProps } from "../../properties/LabelProperties";
+
+const CoterieLabel = ({ title }: ICoterieLabelProps) => {
+  return (
+    <div className="px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge">
+      <p className="text-md">{title}</p>
+    </div>
+  );
+};
+
+export default CoterieLabel;

package/src/components/labels/GradeLabel.tsx

@@ -0,0 +1,11 @@
+import { IGradeLabelProps } from "../../properties/LabelProperties";
+
+const GradeLabel = ({ title }: IGradeLabelProps) => {
+  return (
+    <div className="px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge">
+      <p className="text-sm">{title}</p>
+    </div>
+  );
+};
+
+export default GradeLabel;

package/src/components/labels/OutcomeLabel.tsx

@@ -0,0 +1,15 @@
+import { IOutcomeLabelProps } from "../../properties/LabelProperties";
+import BaseImage from "../images/BaseImage";
+
+const OutcomeLabel = ({ title }: IOutcomeLabelProps) => {
+  return (
+    <div className="px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge">
+      <div className="flex flex-row items-center gap-x-2">
+        <BaseImage src="/icons/category.png" alt="label" size="xsmall" />
+        <p className="text-md">{title}</p>
+      </div>
+    </div>
+  );
+};
+
+export default OutcomeLabel;

package/src/components/labels/PersonalLabel.tsx

@@ -0,0 +1,23 @@
+import { IPersonalLabelProps } from "../../properties/LabelProperties";
+import BaseImage from "../images/BaseImage";
+
+const PersonalLabel = ({ title, icon, font }: IPersonalLabelProps) => {
+  return (
+    <div className="px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge">
+      <div className="flex flex-row items-center gap-x-2">
+        {icon ? (
+          icon
+        ) : (
+          <BaseImage
+            src="/icons/personal-label.png"
+            alt="label"
+            size="xsmall"
+          />
+        )}
+        <p className={font ? font : "text-sm"}>{title}</p>
+      </div>
+    </div>
+  );
+};
+
+export default PersonalLabel;

package/src/components/labels/PublishingHouseLabel.tsx

@@ -0,0 +1,23 @@
+import { IPublishingLabelProps } from "../../properties/LabelProperties";
+import BaseImage from "../images/BaseImage";
+
+const PublishingHouseLabel = ({ title, icon, font }: IPublishingLabelProps) => {
+  return (
+    <div className="px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge">
+      <div className="flex flex-row items-center gap-x-2">
+        {icon ? (
+          icon
+        ) : (
+          <BaseImage
+            src="/icons/publishing-house-label.png"
+            alt="label"
+            size="xsmall"
+          />
+        )}
+        <p className={font ? font : "text-sm"}>{title}</p>
+      </div>
+    </div>
+  );
+};
+
+export default PublishingHouseLabel;

package/src/components/modals/BaseModal.tsx

@@ -0,0 +1,56 @@
+import Modal from "react-modal";
+import { IModalProps } from "../../properties/ModalProperties";
+
+const BaseModal = ({
+  isOpen,
+  size,
+  onAfterOpen,
+  onRequestClose,
+  customSize,
+  children,
+}: IModalProps) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onAfterOpen={onAfterOpen}
+      onRequestClose={onRequestClose}
+      style={{
+        content: {
+          top: "50%",
+          left: "50%",
+          right: "auto",
+          bottom: "auto",
+          marginRight: "-50%",
+          transform: "translate(-50%, -50%)",
+          padding: 0,
+          borderRadius: 20,
+          background: "",
+          border: "",
+          maxHeight: "70%",
+          overflow: "auto",
+          zIndex: 20,
+        },
+        overlay: {
+          background: "rgba(0, 0, 0, 0.6)",
+        },
+      }}
+      contentLabel=""
+    >
+      {customSize ? (
+        <div className={`${customSize}`}>{children}</div>
+      ) : (
+        <div
+          className={`${
+            size === "small"
+              ? "w-[600px]"
+              : "w-[600px] lg:w-[900px] xl:w-[1200px] 2xl:w-[1500px]"
+          }`}
+        >
+          {children}
+        </div>
+      )}
+    </Modal>
+  );
+};
+
+export default BaseModal;

package/src/components/tabs/SelectionTab.tsx

@@ -0,0 +1,45 @@
+import { ISelectionTabProps } from "../../properties/TabProperties";
+
+const SelectionTab = ({
+  optionList,
+  selectedId,
+  handleSelectOnClick,
+  selectedTextColor,
+  selectedBorderColor,
+  textColor,
+  borderColor,
+}: ISelectionTabProps) => {
+  return (
+    <div className="flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-5 text-lg text-center">
+      {optionList.map((option: any, index: number) => (
+        <div
+          key={index}
+          className={`${
+            selectedId === option.id
+              ? selectedTextColor
+                ? selectedTextColor
+                : "text-catchup-blue-500"
+              : textColor
+              ? textColor
+              : "text-catchup-gray-300"
+          } ${
+            selectedId === option.id
+              ? selectedBorderColor
+                ? selectedBorderColor
+                : "border-catchup-blue-500"
+              : borderColor
+              ? borderColor
+              : "border-catchup-gray-50"
+          } border-b-2 transition-all duration-300 p-3 cursor-pointer`}
+          onClick={() => {
+            handleSelectOnClick(option.id);
+          }}
+        >
+          {option.title}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SelectionTab;

package/src/index.ts

@@ -9,6 +9,8 @@ export { default as BaseImage } from "./components/images/BaseImage";
 
 export { default as BaseLoading } from "./components/loading/BaseLoading";
 
+export { default as BaseModal } from "./components/modals/BaseModal";
+
 export { default as DropdownActivityContent } from "./components/activities/DropdownActivityContent";
 export { default as FillInTheBlanksActivityContent } from "./components/activities/FillInTheBlanksActivityContent";
 export { default as GroupingActivityContent } from "./components/activities/GroupingActivityContent";
@@ -27,8 +29,31 @@ export { default as InputGroup } from "./components/groups/InputGroup";
 
 export { default as useScreenSize } from "./hooks/useScreenSize";
 
+export { default as SelectionBox } from "./components/boxes/SelectionBox";
+export { default as SelectionCheckbox } from "./components/boxes/SelectionCheckbox";
+
+export { default as SelectionTab } from "./components/tabs/SelectionTab";
+
+export { default as ActivityTemplateLabel } from "./components/labels/ActivityTemplateLabel";
+export { default as BrandLabel } from "./components/labels/BrandLabel";
+export { default as CoterieLabel } from "./components/labels/CoterieLabel";
+export { default as GradeLabel } from "./components/labels/GradeLabel";
+export { default as OutcomeLabel } from "./components/labels/OutcomeLabel";
+export { default as PersonalLabel } from "./components/labels/PersonalLabel";
+export { default as PublishingHouseLabel } from "./components/labels/PublishingHouseLabel";
+
 export { default as i18n } from "./language/i18n";
 
 export * from "./utilization/AppUtilization";
+export * from "./utilization/AuthorizationUtilization";
 export * from "./utilization/CatchtivityUtilization";
+export * from "./utilization/CategoryUtilization";
+export * from "./utilization/DateUtilization";
+export * from "./utilization/FunctionUtilization";
+export * from "./utilization/GamificationUtilization";
+export * from "./utilization/IndividualModelUtilization";
+export * from "./utilization/ManagementUtilization";
+export * from "./utilization/NotificationUtilization";
+export * from "./utilization/ReportUtilization";
 export * from "./utilization/StorageUtilization";
+export * from "./utilization/TokenUtilization";

package/src/properties/BoxProperties.ts

@@ -0,0 +1,12 @@
+export interface ISelectionBoxProps {
+  optionList: any;
+  selectedId: any;
+  handleSelectOnClick: (e: any) => void;
+}
+
+export interface ISelectionCheckboxBoxProps {
+  optionList: any;
+  selectedIdList: any;
+  handleSelectOnClick: (e: any) => void;
+  handleRemoveOnClick: (e: any) => void;
+}

package/src/properties/GroupProperties.ts

@@ -13,7 +13,7 @@ export interface IInputGroupProps {
   multiple?: boolean;
   accept?: string;
   theme?: string;
-  useMinHeight: boolean;
+  useMinHeight?: boolean;
   disabled?: boolean;
   limit?: number;
 }

package/src/properties/LabelProperties.ts

@@ -0,0 +1,33 @@
+export interface IActivityTemplateLabelProps {
+  title: string;
+}
+
+export interface IBrandLabelProps {
+  title: string;
+  icon: any;
+  font: string;
+}
+
+export interface ICoterieLabelProps {
+  title: string;
+}
+
+export interface IGradeLabelProps {
+  title: string;
+}
+
+export interface IOutcomeLabelProps {
+  title: string;
+}
+
+export interface IPersonalLabelProps {
+  title: string;
+  icon: any;
+  font: string;
+}
+
+export interface IPublishingLabelProps {
+  title: string;
+  icon: any;
+  font: string;
+}

package/src/properties/ModalProperties.ts

@@ -0,0 +1,8 @@
+export interface IModalProps {
+  isOpen: boolean;
+  size: string;
+  onAfterOpen: () => {};
+  onRequestClose: () => {};
+  customSize: string;
+  children: any;
+}

package/src/properties/TabProperties.ts

@@ -0,0 +1,9 @@
+export interface ISelectionTabProps {
+  optionList: any;
+  selectedId: any;
+  handleSelectOnClick: (e: any) => void;
+  textColor: string;
+  selectedTextColor: string;
+  borderColor: string;
+  selectedBorderColor: string;
+}

package/src/utilization/AuthorizationUtilization.ts

@@ -0,0 +1,15 @@
+export const parseJwt = (token: string) => {
+  var base64Url = token.split(".")[1];
+  var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+  var jsonPayload = decodeURIComponent(
+    window
+      .atob(base64)
+      .split("")
+      .map(function (c) {
+        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+      })
+      .join("")
+  );
+
+  return JSON.parse(jsonPayload);
+};