@react-fabric/core 1.0.0-beta.9 → 1.0.2

package/src/context/NotificationCenter.tsx

@@ -1,223 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-import { isObject, isString, uuid } from "@react-fabric/utilities";
-import { Fragment, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { Alert, type AlertProps } from "../overlays/alert/Alert";
-import { Message, type MessageProps } from "../overlays/message/Message";
-import { Toast, type ToastProps } from "../overlays/toast/Toast";
-
-export interface NotificationManagerRef {
-  showMessage: (
-    props: string | MessageProps,
-    timeout?: number,
-  ) => Promise<boolean | string>;
-
-  showToast: (
-    props: string | ToastProps,
-    timeout?: number,
-  ) => Promise<boolean | string>;
-
-  showAlert: (props: string | AlertProps) => Promise<boolean | string>;
-
-  showError: (
-    props: string | Omit<ToastProps, "color">,
-  ) => Promise<boolean | string>;
-
-  closeAll: () => void;
-}
-
-/** ***************** refactor props *******************/
-const makeProps = (obj: AnyObject): AnyObject => {
-  if (isString(obj)) {
-    return { message: obj };
-  } else if (isObject(obj)) {
-    return { ...obj };
-  }
-  return { message: "" };
-};
-
-export const NotificationManager = ({ onLoad }: KeyValue) => {
-  const refItems = useRef<KeyValue>({ toasts: {}, messages: {}, alerts: {} });
-
-  const [messages, setMessages] = useState<AnyObject>({});
-  const [toasts, setToasts] = useState<AnyObject>({});
-  const [alerts, setAlerts] = useState<AnyObject>({});
-
-  const updateMessages = useRef(() => {
-    setMessages({ ...refItems.current.messages });
-  });
-
-  const updateToasts = useRef(() => {
-    setToasts({ ...refItems.current.toasts });
-  });
-
-  const updateAlerts = useRef(() => {
-    setAlerts({ ...refItems.current.alerts });
-  });
-
-  const handleCloseAll = useRef(() => {
-    Object.values(refItems.current.messages).forEach((msg: AnyObject) =>
-      msg[1]?.(false),
-    );
-    Object.values(refItems.current.toasts).forEach((msg: AnyObject) =>
-      msg[1]?.(false),
-    );
-    Object.values(refItems.current.alerts).forEach((msg: AnyObject) =>
-      msg[1]?.(false),
-    );
-    refItems.current.messages = {};
-    refItems.current.toasts = {};
-    refItems.current.alerts = {};
-    updateMessages.current();
-    updateToasts.current();
-    updateAlerts.current();
-  });
-
-  const openNotification = useRef(
-    async (
-      map: KeyValue,
-      update: AnyObject,
-      Notif: React.ComponentType<AnyObject>,
-      props: AnyObject,
-      timeout = 5000,
-    ) => {
-      let timerRef: AnyObject = null;
-      const obj: AnyObject = makeProps(props);
-      return await new Promise<boolean | string>((resolve) => {
-        const key = uuid();
-        const handleClose = (b: boolean | string = false) => {
-          clearTimeout(timerRef);
-          setTimeout(() => {
-            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-            delete map[key];
-            update();
-            resolve(b);
-          }, 250);
-        };
-        map[key] = [
-          <div key={key}>
-            <Notif
-              {...obj}
-              onClose={handleClose}
-              onCloseAll={handleCloseAll.current}
-            />
-          </div>,
-          handleClose,
-        ];
-        update();
-        if (obj.type !== "confirm" && timeout > 0) {
-          timerRef = setTimeout(handleClose, timeout);
-        }
-      });
-    },
-  );
-
-  const showMessage = useRef(
-    async (props: string | MessageProps, timeout = 5000) => {
-      return await openNotification.current(
-        refItems.current.messages,
-        updateMessages.current,
-        Message,
-        props,
-        timeout,
-      );
-    },
-  );
-
-  const showToast = useRef(
-    async (props: string | MessageProps, timeout = 5000) => {
-      return await openNotification.current(
-        refItems.current.toasts,
-        updateToasts.current,
-        Toast,
-        props,
-        timeout,
-      );
-    },
-  );
-
-  const showAlert = useRef(async (props: string | MessageProps) => {
-    return await openNotification.current(
-      refItems.current.alerts,
-      updateAlerts.current,
-      Alert,
-      props,
-      0,
-    );
-  });
-
-  const showError = useRef(
-    async (props: string | MessageProps, timeout = 5000) => {
-      return await openNotification.current(
-        refItems.current.toasts,
-        Toast,
-        { ...makeProps(props), color: "danger" },
-        0,
-      );
-    },
-  );
-
-  useEffect(() => {
-    onLoad({
-      showMessage: showMessage.current,
-      showToast: showToast.current,
-      showAlert: showAlert.current,
-      showError: showError.current,
-      closeAll: handleCloseAll.current,
-    });
-  }, []);
-
-  return (
-    <Fragment>
-      {createPortal(
-        <div
-          style={{ zIndex: "var(--z-overlay)" }}
-          className="ruf-container__overlays pointer-events-none fixed inset-0 p-4 bg-transparent"
-        >
-          {Object.values(alerts).map(([el]: AnyObject) => el)}
-        </div>,
-        document.body,
-      )}
-      {createPortal(
-        <div
-          style={{ zIndex: "var(--z-notifications)" }}
-          className="ruf-container__notifs flex flex-nowrap pointer-events-none fixed inset-0 p-2 bg-transparent flex-col-reverse items-center justify-end"
-        >
-          {Object.values(messages).map(([el]: AnyObject) => el)}
-        </div>,
-        document.body,
-      )}
-      {createPortal(
-        <div
-          style={{ zIndex: "var(--z-notifications)" }}
-          className="ruf-container__toasts flex flex-nowrap pointer-events-none fixed inset-0 p-4 bg-transparent flex-col items-end justify-end overflow-auto scroll-hide"
-        >
-          {Object.values(toasts).map(([el]: AnyObject) => el)}
-        </div>,
-        document.body,
-      )}
-    </Fragment>
-  );
-};

package/src/core/aside/Aside.module.css

@@ -1,231 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-@layer comp {
-  .aside {
-    --aside-bg: color-mix(in lab, var(--fabric-bg) 95%, var(--tint));
-    --aside-border: color-mix(in lab, var(--fabric-bg) 75%, var(--tint));
-
-    background-color: var(--aside-bg);
-
-    &[data-align="start"] {
-      grid-area: side-s;
-      grid-template:
-        "head resizer" auto
-        "loader resizer" auto
-        "content resizer" 1fr / 1fr auto;
-      border-inline-end: 1px solid var(--aside-border);
-
-      & .asideHeader {
-        grid-template-areas: "icon title actions collapse";
-        grid-template-columns: auto 1fr auto auto;
-      }
-    }
-
-    &[data-align="end"] {
-      grid-area: side-e;
-      grid-template:
-        "resizer head" auto
-        "resizer loader" auto
-        "resizer content" 1fr / auto 1fr;
-      border-inline-start: 1px solid var(--aside-border);
-
-      & .asideHeader {
-        grid-template-areas: "collapse icon title actions";
-        grid-template-columns: auto auto 1fr auto;
-      }
-
-      & .asideCollapse {
-        transform: scaleX(-1);
-      }
-    }
-
-    & .asideBody {
-      grid-area: content;
-      grid-template: "head" auto "content" 1fr "foot" auto / 1fr;
-
-      & > [data-ref="content"] {
-        background-color: transparent;
-      }
-    }
-
-    & .asideHeader {
-      font-weight: 500;
-      color: theme(colors.primary.600);
-
-      &:not(:empty) {
-        border-bottom: 1px solid var(--aside-border);
-      }
-    }
-
-    & .asideTitle {
-      grid-area: title;
-    }
-
-    & .asideIcon {
-      grid-area: icon;
-    }
-
-    .asideActions {
-      grid-area: actions;
-    }
-
-    & .asideCollapse {
-      grid-area: collapse;
-
-      &:hover {
-        background-color: color-mix(in lab, var(--fabric-text) 10%, #0000);
-      }
-    }
-
-    & .asidePlaceholder {
-      z-index: 4;
-      grid-area: content;
-      background-color: var(--aside-bg);
-    }
-
-    & .asideResizer {
-      cursor: col-resize;
-      position: relative;
-      grid-area: resizer;
-      width: 0.25rem;
-
-      &::before {
-        height: 32px;
-        border: 1px solid theme(colors.tint.700);
-        border-width: 0 1.5px;
-      }
-
-      &:hover::before,
-      &:active::before {
-        height: 100%;
-        background-color: theme(colors.primary.600);
-        border-color: theme(backgroundColor.base);
-        border-width: 0 1.25px;
-      }
-    }
-  }
-}
-
-@layer util {
-  .asideBody,
-  .asideHeader {
-    width: unset;
-    height: unset;
-    margin: unset;
-  }
-
-  .asideBody {
-    & > [data-ref="content"] {
-      background-color: transparent;
-    }
-  }
-
-  .aside[data-collapsed="true"] {
-    position: relative;
-    overflow: visible;
-    width: 2rem;
-
-    & .asideBody {
-      position: absolute;
-      z-index: -1;
-      inset: 0;
-
-      background-color: var(--aside-bg);
-
-      transition: transform cubic-bezier(0.4, 0, 0.2, 1) 150ms;
-    }
-
-    & .asideHeader {
-      position: absolute;
-      z-index: 5;
-      width: 2rem;
-    }
-
-    & .asideTitle {
-      position: absolute;
-      top: 1rem;
-      grid-area: unset;
-      font-size: 1rem;
-    }
-
-    .asideIcon {
-      margin-inline: 2px;
-    }
-
-    & .asideCollapse + .asideIcon,
-    & .asideResizer {
-      display: none;
-    }
-  }
-
-  [dir="ltr"] .aside[data-align="start"][data-collapsed="true"],
-  [dir="rtl"] .aside[data-align="end"][data-collapsed="true"] {
-    & .asideBody {
-      right: unset;
-      transform: translateX(-100%);
-      grid-area: unset;
-    }
-
-    & .asideTitle {
-      right: calc(2rem + 2px);
-      transform-origin: 100% 100%;
-      transform: rotate(-90deg) translateY(2rem);
-    }
-
-    & .asideCollapse {
-      transform: scaleX(-1);
-    }
-
-    &[data-flyout="true"] .asideBody {
-      z-index: 3;
-      transform: translateX(2rem);
-      box-shadow: 0 0 1rem 0 var(--fabric-shadow);
-    }
-  }
-
-  [dir="ltr"] .aside[data-align="end"][data-collapsed="true"],
-  [dir="rtl"] .aside[data-align="start"][data-collapsed="true"] {
-    & .asideBody {
-      left: unset;
-      transform: translateX(100%);
-      grid-area: unset;
-    }
-
-    & .asideTitle {
-      left: calc(2rem + 2px);
-      transform-origin: 0 100%;
-      transform: rotate(90deg) translateY(2rem);
-    }
-
-    & .asideCollapse {
-      transform: scaleX(1);
-    }
-
-    &[data-flyout="true"] .asideBody {
-      z-index: 3;
-      transform: translateX(-2rem);
-      box-shadow: 0 0 1rem 0 var(--fabric-shadow);
-    }
-  }
-}

package/src/core/boundary/ErrorBoundary.module.css

@@ -1,65 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-@layer comp {
-  .errorBoundary {
-    grid-area: inherit;
-    align-self: flex-start;
-
-    max-height: calc(100% - 2rem);
-    margin: 1rem;
-
-    background-color: theme(colors.danger.500);
-    background-image: repeating-linear-gradient(
-      135deg,
-      rgba(255 255 255 / 50%) 0 4px,
-      rgba(255 255 255 / 20%) 4px 8px
-    );
-
-    & .boundaryContent {
-      grid-template: "icon message" auto "detail detail" auto / auto 1fr;
-      background-color: var(--fabric-bg);
-    }
-
-    & .boundaryIcon {
-      grid-area: icon;
-    }
-
-    & .boundaryMessage {
-      grid-area: message;
-    }
-
-    & .boundaryDetail {
-      grid-area: detail;
-      grid-template-rows: auto 1fr;
-
-      & .boundaryLink {
-        /* might add styles later */
-      }
-    }
-
-    & .boundaryStack {
-      /* might add styles later */
-    }
-  }
-}

package/src/core/headfoot/HeadFoot.module.css

@@ -1,38 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-@layer comp {
-  .headfoot {
-    .buttonWrapper + .buttonWrapper {
-      margin-inline-start: 0.25rem;
-    }
-  }
-}
-
-@layer util {
-  .headfoot {
-    width: unset;
-    height: unset;
-    margin: unset;
-  }
-}

package/src/core/index.ts

@@ -1,32 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-export { Aside } from "./aside/Aside";
-export { ErrorBoundary } from "./boundary/ErrorBoundary";
-export { Content } from "./content/Content";
-export { Footer, Header } from "./headfoot/HeadFoot";
-export { Page } from "./page/Page";
-export { Col, Container, Row } from "./responsive/Responsive";
-export { Section } from "./section/Section";
-export { ThemeProvider } from "./theme/ThemeProvider";
-export { Viewport } from "./viewport/Viewport";

package/src/core/page/Page.module.css

@@ -1,46 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-@layer comp {
-  .page {
-    --fabric-page: color-mix(in lab, var(--fabric-bg) 94%, var(--tint));
-    --fabric-page-title: color-mix(in lab, var(--fabric-bg) 90%, var(--tint));
-
-    grid-template: "title title title" auto "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
-    background-color: var(--fabric-page);
-
-    .pageTitle {
-      grid-area: title;
-      color: theme(colors.primary.600);
-      background-color: var(--fabric-page-title);
-    }
-  }
-}
-
-@layer util {
-  .pageTitle {
-    width: unset;
-    height: unset;
-    margin: unset;
-  }
-}