@react-fabric/core 1.0.0-beta.0

package/src/components/tabpanel/TabPanel.module.css

@@ -0,0 +1,200 @@
+/*
+ * 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 {
+  .tabPanel {
+    --color: theme(colors.primary.500);
+
+    & > .tabList {
+      grid-area: tablist;
+
+      & > .tabButton {
+        &[data-color="accent"] {
+          --color: theme(colors.accent.500);
+        }
+
+        &[data-color="info"] {
+          --color: theme(colors.info.500);
+        }
+
+        &[data-color="danger"] {
+          --color: theme(colors.danger.500);
+        }
+
+        &[data-color="success"] {
+          --color: theme(colors.success.500);
+        }
+
+        &[data-color="warning"] {
+          --color: theme(colors.warning.500);
+        }
+
+        &:not(:global(.active)):hover {
+          color: color-mix(in lab, var(--color) 65%, var(--fabric-text));
+          background-color: theme(colors.tint.100/50%);
+        }
+
+        &:global(.active) {
+          --active-color: var(--color);
+
+          font-weight: 500;
+          color: color-mix(in lab, var(--color) 65%, var(--fabric-text));
+        }
+      }
+    }
+
+    &[data-variant="outline"] {
+      & > .tabList > .tabButton:global(.active) {
+        --active-color: theme(backgroundColor.base);
+        --active-border: 0 0 0 1px theme(borderColor.base) inset;
+
+        background-color: theme(backgroundColor.base);
+      }
+    }
+
+    &[data-variant="solid"] {
+      & > .tabList > .tabButton:global(.active) {
+        color: theme(colors.white);
+        background-color: var(--color);
+      }
+    }
+
+    &[data-variant="soft"] {
+      & > .tabList > .tabButton:global(.active) {
+        background-color: color-mix(in lab, var(--color) 20%, var(--fabric-bg));
+      }
+    }
+
+    &[data-orientation="top"] {
+      grid-template: "tablist" auto "content" 1fr / 1fr;
+      padding-inline: 2px;
+
+      &[data-variant="outline"] > .tabList,
+      &[data-variant="solid"] > .tabList,
+      &[data-variant="soft"] > .tabList {
+        box-shadow: 0 -1px 0 theme(borderColor.dimmed) inset;
+      }
+    }
+
+    &[data-orientation="bottom"] {
+      grid-template: "content" 1fr "tablist" auto / 1fr;
+      padding-inline: 2px;
+
+      &[data-variant="outline"] > .tabList,
+      &[data-variant="solid"] > .tabList,
+      &[data-variant="soft"] > .tabList {
+        box-shadow: 0 1px 0 theme(borderColor.dimmed) inset;
+      }
+    }
+
+    &[data-orientation="start"] {
+      grid-template: "tablist content" 1fr / auto 1fr;
+      padding-block: 2px;
+
+      &[data-variant="outline"] > .tabList,
+      &[data-variant="solid"] > .tabList,
+      &[data-variant="soft"] > .tabList {
+        box-shadow: -1px 0 0 theme(borderColor.dimmed) inset;
+      }
+    }
+
+    &[data-orientation="end"] {
+      grid-template: "content tablist" 1fr / 1fr auto;
+      padding-block: 2px;
+
+      &[data-variant="outline"] > .tabList,
+      &[data-variant="solid"] > .tabList,
+      &[data-variant="soft"] > .tabList {
+        box-shadow: 1px 0 0 theme(borderColor.dimmed) inset;
+      }
+    }
+  }
+}
+
+@layer util {
+  .tabPanel {
+    & > .tabList > .tabButton:global(.active) {
+      pointer-events: none;
+    }
+
+    &[data-orientation="top"] > .tabList {
+      & > .tabButton:global(.active) {
+        box-shadow:
+          0 -2px 0 var(--active-color) inset,
+          var(--active-border, 0 0 0 transparent);
+      }
+    }
+
+    &[data-orientation="bottom"] > .tabList {
+      & > .tabButton:global(.active) {
+        box-shadow:
+          0 2px 0 var(--active-color) inset,
+          var(--active-border, 0 0 0 transparent);
+      }
+    }
+
+    &[data-orientation="start"] > .tabList {
+      & > .tabButton:global(.active) {
+        box-shadow:
+          -2px 0 0 var(--active-color) inset,
+          var(--active-border, 0 0 0 transparent);
+      }
+    }
+
+    &[data-orientation="end"] > .tabList {
+      & > .tabButton:global(.active) {
+        box-shadow:
+          2px 0 0 var(--active-color) inset,
+          var(--active-border, 0 0 0 transparent);
+      }
+    }
+
+    &[data-orientation="top"] > .tabList > .tabButton {
+      margin-top: 2px;
+      margin-inline: 1px;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    &[data-orientation="bottom"] > .tabList > .tabButton {
+      margin-bottom: 2px;
+      margin-inline: 1px;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+
+    &[data-orientation="start"] > .tabList > .tabButton {
+      margin-block: 1px;
+      margin-inline-start: 2px;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    &[data-orientation="end"] > .tabList > .tabButton {
+      margin-block: 1px;
+      margin-inline-end: 2px;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+  }
+}

package/src/components/tabpanel/TabPanel.tsx

@@ -0,0 +1,155 @@
+/*
+ * 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 classNames from "classnames";
+import {
+  Children,
+  cloneElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { type CallbackReturn, type ChildrenProp } from "../../types";
+import { nodeCheck } from "../../utils";
+import { Tab } from "./Tab";
+import classes from "./TabPanel.module.css";
+
+export interface TabPanelProps extends ChildrenProp<typeof Tab> {
+  /**
+   * tab list orientation
+   */
+  orientation?: "top" | "bottom" | "start" | "end";
+  /**
+   * justify buttons
+   */
+  justify?: "start" | "center" | "end";
+  /**
+   * tab variations
+   */
+  variant?: "soft" | "solid" | "outline";
+  /**
+   * tab button flex to fill tabs
+   */
+  tabFlex?: boolean;
+  /**
+   * tab button gap
+   */
+  gap?: number;
+  /**
+   * current active tab
+   */
+  activeTab?: string;
+  /**
+   * tab list className
+   */
+  headerClassName?: string;
+  /**
+   * change handler
+   */
+  onChange?: (id: string) => void;
+  /**
+   * before close handler, return false to prevent change
+   */
+  onBeforeChange?: (nextTab: string, currentTab?: string) => CallbackReturn;
+}
+
+// TODO: implement append/prepend tab-bar items
+
+export const TabPanel = ({
+  children,
+  headerClassName,
+  orientation = "top",
+  activeTab,
+  justify,
+  variant,
+  tabFlex,
+  gap,
+  onBeforeChange,
+  onChange,
+}: TabPanelProps) => {
+  const [active, setActive] = useState<string>();
+
+  const [tabs, rest] = useMemo(() => {
+    return Children.toArray(children as AnyObject).reduce<AnyObject[]>(
+      (ret, node) => {
+        nodeCheck(node, Tab) ? ret[0].push(node) : ret[1].push(node);
+        return ret;
+      },
+      [[], []],
+    );
+  }, [children]);
+
+  useEffect(() => {
+    setActive(activeTab);
+  }, [activeTab]);
+
+  const activeTabPanel = useMemo(() => {
+    return tabs.find((tab: AnyObject) => tab.props.id === active)?.props
+      .children;
+  }, [tabs, active]);
+
+  const handleClick = useCallback(
+    (id: string) => {
+      void Promise.resolve(onBeforeChange?.(id, active)).then((ret) => {
+        if (ret !== false) {
+          setActive(id);
+          onChange?.(id);
+        }
+      });
+    },
+    [onBeforeChange, onChange, active],
+  );
+
+  return (
+    <div
+      className={classNames(
+        classes.tabPanel,
+        "area-content grid bg-base overflow-hidden",
+      )}
+      data-orientation={orientation}
+      data-variant={variant ?? "default"}
+    >
+      <div
+        className={classNames(
+          classes.tabList,
+          headerClassName,
+          justify && `justify-${justify}`,
+          ["start", "end"].includes(orientation) && "flex-col",
+          "flex flex-nowrap overflow-auto scroll-thin",
+        )}
+        style={{ gap }}
+      >
+        {tabs.map((node: AnyObject) =>
+          cloneElement(node, {
+            tabFlex: node.props.tabFlex ?? tabFlex,
+            onClick: handleClick,
+            active: node.props.id === active,
+          }),
+        )}
+      </div>
+      {rest}
+      {activeTabPanel}
+    </div>
+  );
+};

package/src/context/Global.tsx

@@ -0,0 +1,241 @@
+/*
+ * 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 i18next from "i18next";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ComponentType,
+  type FC,
+  type PropsWithChildren,
+} from "react";
+import { HotKeyWrapper } from "../hotkeys/HotKeyWrapper";
+import {
+  NotificationManager,
+  type NotificationManagerRef,
+} from "./NotificationCenter";
+
+interface State {
+  locale: string;
+  colorScheme: "light" | "dark";
+  calendar: "gregorian" | "hijri";
+}
+
+export interface GlobalProps extends PropsWithChildren {
+  /**
+   * application default error display
+   */
+  errorElement?: ComponentType<{ error?: string }>;
+
+  defaultLocale?: string;
+  defaultCalendar?: State["calendar"];
+  defaultColorScheme?: State["colorScheme"];
+}
+
+interface GlobalContextType {
+  /**
+   * change language locale
+   * @param locale
+   */
+  changeLocale: (locale: string) => string;
+  /**
+   * change date calendat
+   * @param locale
+   */
+  changeCalendar: (calendar: State["calendar"]) => State["calendar"];
+  /**
+   * toggle theme between light and dark
+   * or force to theme provided
+   * @param theme
+   */
+  toggleColorScheme: (
+    colorScheme?: State["colorScheme"],
+  ) => State["colorScheme"];
+  /**
+   * application default error display
+   */
+  errorElement: GlobalProps["errorElement"];
+
+  currentLocale: string;
+  currentCalendar: State["calendar"];
+  currentColorScheme: State["colorScheme"];
+
+  notificationManager: NotificationManagerRef;
+}
+
+const KEY_LOCALE = "ruf:locale";
+const KEY_CALENDAR = "ruf:calendar";
+const KEY_COLOR_SCHEME = "ruf:colorScheme";
+const systemLocale = () => {
+  return (
+    (typeof window !== "undefined"
+      ? localStorage.getItem(KEY_LOCALE)
+      : undefined) ?? "en"
+  );
+};
+const systemCalendar = () => {
+  return (
+    (typeof window !== "undefined"
+      ? (localStorage.getItem(KEY_CALENDAR) as AnyObject)
+      : undefined) ?? "gregorian"
+  );
+};
+const systemColorScheme = () => {
+  const theme: AnyObject =
+    typeof window !== "undefined"
+      ? localStorage.getItem(KEY_COLOR_SCHEME) ??
+        (window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light")
+      : "light";
+  return theme;
+};
+
+export const GlobalContext = createContext<GlobalContextType>(
+  {} as GlobalContextType,
+);
+
+/**
+ * global context provider
+ */
+export const ApplicationProvider: FC<GlobalProps> = ({
+  children,
+  errorElement,
+  defaultLocale,
+  defaultCalendar,
+  defaultColorScheme,
+}) => {
+  const [refNotifications, setNotificationRef] =
+    useState<NotificationManagerRef>({
+      closeAll: () => undefined,
+      showAlert: () => undefined as AnyObject,
+      showError: () => undefined as AnyObject,
+      showMessage: () => undefined as AnyObject,
+      showToast: () => undefined as AnyObject,
+    });
+  const [colorScheme, setColorScheme] = useState<State["colorScheme"]>(
+    defaultColorScheme ?? systemColorScheme(),
+  );
+  const [calendar, setCalendar] = useState<State["calendar"]>(
+    defaultCalendar ?? systemCalendar(),
+  );
+  const [locale, setLocale] = useState<State["locale"]>(
+    defaultLocale ?? systemLocale(),
+  );
+
+  /** ***************** set initial theme and locale dir  *******************/
+  useEffect(() => {
+    document.documentElement.lang = locale;
+    if (!document.documentElement.dataset.colorScheme) {
+      document.documentElement.dataset.colorScheme = colorScheme;
+    } else {
+      setColorScheme(document.documentElement.dataset.colorScheme as AnyObject);
+    }
+    if (typeof window !== "undefined") {
+      try {
+        void i18next.changeLanguage(locale).then(() => {
+          document.documentElement.dir = i18next.dir();
+        });
+      } catch {
+        //
+      }
+    }
+  }, []);
+
+  /** ***************** theme toggle *******************/
+  const toggleColorScheme = useCallback(
+    (forceTheme?: State["colorScheme"]) => {
+      const newTheme =
+        forceTheme ?? (colorScheme === "dark" ? "light" : "dark");
+      setColorScheme(newTheme);
+      localStorage.setItem(KEY_COLOR_SCHEME, newTheme);
+      document.documentElement.dataset.colorScheme = newTheme;
+      return newTheme;
+    },
+
+    [colorScheme],
+  );
+
+  /** ***************** change locale *******************/
+  const changeLocale = useCallback((locale: string) => {
+    try {
+      void i18next.changeLanguage(locale).then(() => {
+        localStorage.setItem(KEY_LOCALE, locale);
+        document.documentElement.lang = locale;
+        document.documentElement.dir = i18next.dir();
+      });
+    } catch {
+      //
+    }
+    setLocale(locale);
+    return locale;
+  }, []);
+
+  /** ***************** change calendar *******************/
+  const changeCalendar = useCallback((calendar: State["calendar"]) => {
+    setCalendar(calendar);
+    localStorage.setItem(KEY_CALENDAR, calendar);
+    return calendar;
+  }, []);
+
+  /** ***************** context provider *******************/
+  return (
+    <GlobalContext.Provider
+      value={{
+        errorElement,
+        changeLocale,
+        changeCalendar,
+        toggleColorScheme,
+        currentLocale: locale,
+        currentCalendar: calendar,
+        currentColorScheme: colorScheme,
+        notificationManager: refNotifications as AnyObject,
+      }}
+    >
+      <HotKeyWrapper>{children}</HotKeyWrapper>
+      <NotificationManager onLoad={setNotificationRef} />
+    </GlobalContext.Provider>
+  );
+};
+
+/**
+ * internal usage only
+ * @internal
+ */
+export const useGlobals = () => useContext(GlobalContext);
+
+/**
+ * global application context
+ */
+export const useApplicationContext = () => {
+  const { errorElement, ...rest } = useContext(GlobalContext);
+  return rest;
+};
+
+export const useNotificationService = () => {
+  const { notificationManager } = useContext(GlobalContext);
+  return notificationManager ?? {};
+};