@inceptionbg/iui 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inceptionbg/iui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "UI components, elements & utils for Inception ecosystem",
   "files": [
     "src"

package/src/Elements/Accordions/Accordions.tsx

@@ -1,10 +1,9 @@
 import { FC, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import clsx from "clsx";
-import { ITab } from "types/ITab";
-import { faArrowsToLine } from "icons/light/faArrowsToLine";
-import { faArrowsUpDown } from "icons/light/faArrowsUpDown";
-import { Collapse } from "Elements/Helper/Collapse";
+import { ITab } from "../../types/ITab";
+import { Collapse } from "../Helper/Collapse";
+import { faArrowsToLine, faArrowsUpDown } from "../../icons/light";
 
 interface Props {
   tabs: ITab[];

package/src/Elements/Alert/Alert.tsx

@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import clsx from "clsx";
 import { FC, ReactNode } from "react";
 import "./alert.scss";
-import { infoIcons } from "utils/icons";
+import { infoIcons } from "../../utils/icons";
 
 interface Props {
   text?: string;

package/src/Elements/Dialog/Dialog.tsx

@@ -3,10 +3,10 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import clsx from "clsx";
 import { FC, ReactNode, useCallback, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
-import { faTriangleExclamation } from "icons/regular/faTriangleExclamation";
-import { ConditionalWrapper } from "Elements/Wrappers/ConditionalWrapper";
-import { faCircleInfo } from "icons/regular/faCircleInfo";
-import { Button } from "Elements/Button/Button";
+import { faCircleInfo } from "../../icons/regular/faCircleInfo";
+import { faTriangleExclamation } from "../../icons/regular/faTriangleExclamation";
+import { ConditionalWrapper } from "../Wrappers/ConditionalWrapper";
+import { Button } from "../Button/Button";
 
 interface Props {
   title?: string;

package/src/Elements/Wrappers/FormWrapper.tsx

@@ -1,6 +1,6 @@
-import { Button } from "Elements/Button/Button";
 import clsx from "clsx";
 import { FC, FormEvent, ReactNode } from "react";
+import { Button } from "../Button/Button";
 
 export interface IFormWrapper {
   isLoading: boolean;

package/src/icons/duotone/index.ts

@@ -1,11 +1,11 @@
-import { faArrowLeftFromLine } from "icons/duotone/faArrowLeftFromLine";
-import { faArrowRightToLine } from "icons/duotone/faArrowRightToLine";
-import { faBell } from "icons/duotone/faBell";
-import { faEye } from "icons/duotone/faEye";
-import { faEyeSlash } from "icons/duotone/faEyeSlash";
-import { faHouseHeart } from "icons/duotone/faHouseHeart";
-import { faPlusCircle } from "icons/duotone/faPlusCircle";
-import { faUser } from "icons/duotone/faUser";
+import { faArrowLeftFromLine } from "./faArrowLeftFromLine";
+import { faArrowRightToLine } from "./faArrowRightToLine";
+import { faBell } from "./faBell";
+import { faEye } from "./faEye";
+import { faEyeSlash } from "./faEyeSlash";
+import { faHouseHeart } from "./faHouseHeart";
+import { faPlusCircle } from "./faPlusCircle";
+import { faUser } from "./faUser";
 
 export {
   faArrowLeftFromLine,

package/src/icons/light/index.ts

@@ -1,13 +1,13 @@
-import { faAngleDown } from "icons/light/faAngleDown";
-import { faArrowDownShortWide } from "icons/light/faArrowDownShortWide";
-import { faArrowDownWideShort } from "icons/light/faArrowDownWideShort";
-import { faArrowsToLine } from "icons/light/faArrowsToLine";
-import { faArrowsUpDown } from "icons/light/faArrowsUpDown";
-import { faBell } from "icons/light/faBell";
-import { faCheck } from "icons/light/faCheck";
-import { faClockRotateLeft } from "icons/light/faClockRotateLeft";
-import { faEllipsisVertical } from "icons/light/faEllipsisVertical";
-import { faXmark } from "icons/light/faXmark";
+import { faAngleDown } from "./faAngleDown";
+import { faArrowDownShortWide } from "./faArrowDownShortWide";
+import { faArrowDownWideShort } from "./faArrowDownWideShort";
+import { faArrowsToLine } from "./faArrowsToLine";
+import { faArrowsUpDown } from "./faArrowsUpDown";
+import { faBell } from "./faBell";
+import { faCheck } from "./faCheck";
+import { faClockRotateLeft } from "./faClockRotateLeft";
+import { faEllipsisVertical } from "./faEllipsisVertical";
+import { faXmark } from "./faXmark";
 
 export {
   faAngleDown,

package/src/index.ts

@@ -86,9 +86,9 @@ import { NoAccessInfo } from "./Elements/Helper/NoAccessInfo";
 // import { TableFooter } from "./Elements/Table/Components/TableFooter";
 // import { Tabs } from "./Elements/Tabs/Tabs";
 import { Tooltip } from "./Elements/Tooltip/Tooltip";
-// import { ConditionalWrapper } from "./Elements/Wrappers/ConditionalWrapper";
-// import { FullPageWrapper } from "./Elements/Wrappers/FullPageWrapper";
-// import { FormWrapper } from "./Elements/Wrappers/FormWrapper";
+import { ConditionalWrapper } from "./Elements/Wrappers/ConditionalWrapper";
+import { FullPageWrapper } from "./Elements/Wrappers/FullPageWrapper";
+import { FormWrapper } from "./Elements/Wrappers/FormWrapper";
 // import { PageWrapper } from "./Elements/Wrappers/PageWrapper";
 // import { ItemActionsMenu } from "./Elements/Table/Components/Edit/ItemActionsMenu";
 // import { ItemEditOptionsButtons } from "./Elements/Table/Components/Edit/ItemEditOptionsButtons";
@@ -130,9 +130,9 @@ export {
   //   TableFooter,
   //   Tabs,
   Tooltip,
-  //   ConditionalWrapper,
-  //   FullPageWrapper,
-  //   FormWrapper,
+  ConditionalWrapper,
+  FullPageWrapper,
+  FormWrapper,
   //   PageWrapper,
 };
 export {

package/src/Elements/Wrappers/PageWrapper.tsx

@@ -1,148 +0,0 @@
-import { FC, ReactElement, ReactNode, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { faArrowLeft } from "../../icons/solid/faArrowLeft";
-import { faEllipsisVertical } from "../../icons/solid/faEllipsisVertical";
-import { IHeaderAction } from "../../types/IHeaderAction";
-import { Button } from "../Button/Button";
-import { Menu } from "../Menu/Menu";
-import { MenuItem } from "../Menu/MenuItem";
-import { NoAccessInfo } from "../Helper/NoAccessInfo";
-import { Loader } from "../Loader/Loader";
-import { ConditionalWrapper } from "./ConditionalWrapper";
-import { Link } from "react-router-dom";
-import { IconButton } from "../Button/IconButton";
-
-export interface IPageWrapper {
-  breadcrumbs: string[];
-  actions?: IHeaderAction[];
-  moreActions?: IHeaderAction[];
-  showBackButton?: boolean;
-  noAccess?: boolean;
-  isLoading?: boolean;
-  loaderLogo?: string;
-  footer?: ReactElement;
-  translations?: {
-    NoAccessTitle?: string;
-    ReturnToHomepage?: string;
-  };
-  children?: ReactNode;
-}
-export const PageWrapper: FC<IPageWrapper> = ({
-  breadcrumbs,
-  actions,
-  moreActions,
-  showBackButton,
-  noAccess,
-  isLoading,
-  loaderLogo,
-  footer,
-  translations,
-  children,
-}) => {
-  const [isMoreActionsOpen, setIsMoreActionsOpen] = useState(false);
-  const navigate = useNavigate();
-
-  return (
-    <ConditionalWrapper
-      condition={!!isLoading}
-      wrapper={(children) => (
-        <Loader isLoading logo={loaderLogo} fullWidth>
-          {children}
-        </Loader>
-      )}
-    >
-      <div className="page-container">
-        <div className="page-header">
-          <div className="flex align-center gap-3">
-            {showBackButton && (
-              <IconButton
-                icon={faArrowLeft}
-                className="c-primary"
-                onClick={() => navigate(-1)}
-              />
-            )}
-            {/* ////// BREADCRUMBS ////// */}
-            <div className="breadcrumbs">
-              {breadcrumbs.map(
-                (e, i) =>
-                  e && (
-                    <h1 key={e}>{i + 1 < breadcrumbs.length ? `${e} /` : e}</h1>
-                  )
-              )}
-            </div>
-          </div>
-          {/* ////// ACTIONS ////// */}
-          {!noAccess && (
-            <div className="flex align-center">
-              {actions?.map(
-                (action) =>
-                  !action.hidden && (
-                    <ConditionalWrapper
-                      key={action.label}
-                      condition={!!action.to}
-                      wrapper={(children) => (
-                        <Link to={action.to!}>{children}</Link>
-                      )}
-                    >
-                      <Button key={action.label} {...action} className="ml-2" />
-                    </ConditionalWrapper>
-                  )
-              )}
-              {!!moreActions?.length && (
-                <Menu
-                  isOpen={isMoreActionsOpen}
-                  onClose={() => setIsMoreActionsOpen(false)}
-                  placementX="right"
-                  renderButton={(ref) => (
-                    <IconButton
-                      ref={ref}
-                      icon={faEllipsisVertical}
-                      active={isMoreActionsOpen}
-                      onClick={() => setIsMoreActionsOpen(!isMoreActionsOpen)}
-                    />
-                  )}
-                >
-                  {moreActions.map(
-                    (action) =>
-                      !action.hidden && (
-                        <MenuItem
-                          key={action.label}
-                          label={action.label}
-                          icon={action.icon}
-                          iconRotation={action.iconRotation}
-                          disabled={action.disabled}
-                          withDevider
-                          to={action.to}
-                          onClick={
-                            action.onClick
-                              ? () => {
-                                  action.onClick!();
-                                  setIsMoreActionsOpen(false);
-                                }
-                              : undefined
-                          }
-                        />
-                      )
-                  )}
-                </Menu>
-              )}
-            </div>
-          )}
-        </div>
-        <div className="page-content">
-          <div className="flex-grow">
-            {!noAccess ? (
-              children
-            ) : (
-              <NoAccessInfo
-                title={translations?.NoAccessTitle}
-                buttonLabel={translations?.ReturnToHomepage}
-              />
-            )}
-          </div>
-          {footer}
-        </div>
-      </div>
-    </ConditionalWrapper>
-  );
-};