@react-fabric/core 1.0.0-beta.0

package/src/core/page/Page.tsx

@@ -0,0 +1,100 @@
+/*
+ * 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 { Loading } from "../../components/animations/Animations";
+import { Icon } from "../../components/icon/Icon";
+import { type ChildrenProp, type IconProps, type TestProps } from "../../types";
+import classes from "./Page.module.css";
+
+export interface PageProps extends IconProps, ChildrenProp, TestProps {
+  /**
+   * page title
+   */
+  title?: string;
+  /**
+   * title element className
+   */
+  titleClassName?: string;
+  /**
+   * paper style drop shadow
+   */
+  paper?: boolean;
+  /**
+   * loading indicator
+   */
+  loading?: boolean;
+}
+
+/**
+ * The page component used typically for routes, is a structured layout used within an application to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
+ */
+export const Page = ({
+  children,
+  paper,
+  title,
+  titleClassName,
+  icon,
+  rtlFlip,
+  iconBg,
+  iconColor,
+  loading,
+  "data-testid": testId,
+  "data-test-value": testValue,
+}: PageProps) => {
+  return (
+    <div
+      data-testid={testId}
+      data-test-value={testValue}
+      className={classNames(
+        classes.page,
+        "overflow-hidden grid area-content",
+        paper && "shadow-paper m-[6px] rounded-capped",
+      )}
+    >
+      {title && (
+        <div
+          data-ref="pageTitle"
+          className={classNames(
+            classes.pageTitle,
+            "select-none flex gap-1 items-center justify-center px-1 py-0.5 font-medium text-center",
+            titleClassName,
+          )}
+        >
+          {icon && (
+            <Icon
+              icon={icon}
+              size="1.25em"
+              rtlFlip={rtlFlip}
+              bg={iconBg}
+              color={iconColor}
+            />
+          )}
+          {title}
+        </div>
+      )}
+      {loading && <Loading />}
+      {children}
+    </div>
+  );
+};

package/src/core/responsive/Responsive.module.css

@@ -0,0 +1,85 @@
+/*
+ * 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 {
+  .row {
+    margin: calc(-0.5 * var(--gutter));
+
+    & + .row {
+      margin-top: calc(0.5 * var(--gutter));
+    }
+  }
+
+  .col {
+    flex: 0 0 auto;
+    max-width: calc((12 / 12) * 100% - var(--gutter, 0px));
+    margin: calc(0.5 * var(--gutter));
+
+    &.stretchContent > * {
+      min-width: 100%;
+      min-height: 100%;
+    }
+  }
+
+  [data-gutter="0"] {
+    &.container,
+    &.row {
+      --gutter: 0px;
+    }
+  }
+
+  [data-gutter="xs"] {
+    &.container,
+    &.row {
+      --gutter: 2px;
+    }
+  }
+
+  [data-gutter="sm"] {
+    &.container,
+    &.row {
+      --gutter: 0.25rem;
+    }
+  }
+
+  [data-gutter="md"] {
+    &.container,
+    &.row {
+      --gutter: 0.75rem;
+    }
+  }
+
+  [data-gutter="lg"] {
+    &.container,
+    &.row {
+      --gutter: 1rem;
+    }
+  }
+
+  [data-gutter="xl"] {
+    &.container,
+    &.row {
+      --gutter: 1.5rem;
+    }
+  }
+}

package/src/core/responsive/Responsive.tsx

@@ -0,0 +1,172 @@
+/*
+ * 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 {
+  type AriaProps,
+  type ChildrenProp,
+  type CssProp,
+  type SizeTypeWithZero,
+  type TestProps,
+} from "../../types";
+import classes from "./Responsive.module.css";
+
+export interface ContainerProps
+  extends AriaProps,
+    CssProp,
+    ChildrenProp,
+    TestProps {
+  /**
+   * use full width
+   */
+  fullWidth?: boolean;
+  /**
+   * gutter size
+   */
+  gutter?: SizeTypeWithZero;
+}
+
+export interface RowProps extends AriaProps, CssProp, ChildrenProp, TestProps {
+  /**
+   * no wrapping
+   */
+  noWrap?: boolean;
+  /**
+   * gutter size
+   */
+  gutter?: SizeTypeWithZero;
+  /**
+   * flex orientation
+   */
+  orient?: "row" | "row-reverse" | "col" | "col-reverse";
+  /**
+   * align items
+   */
+  align?: "start" | "end" | "center" | "stretch";
+  /**
+   * justify items
+   */
+  justify?: "start" | "end" | "center" | "between";
+}
+
+export interface ColProps
+  extends AriaProps,
+    CssProp,
+    TestProps,
+    Partial<ChildrenProp> {
+  /**
+   * align items
+   */
+  align?: "start" | "end" | "center" | "stretch";
+  /**
+   * column flex
+   */
+  flex?: "auto" | "fill" | "full";
+  /**
+   * stretch inner content
+   */
+  stretchContent?: boolean;
+}
+
+/**
+ * Responsive layout container
+ */
+export const Container = ({
+  children,
+  fullWidth,
+  className,
+  gutter,
+  ...aria
+}: ContainerProps) => {
+  return (
+    <div
+      className={classNames(
+        classes.container,
+        className,
+        !fullWidth && "container mx-auto",
+      )}
+      data-gutter={gutter}
+      {...aria}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const Row = ({
+  children,
+  gutter,
+  noWrap,
+  orient,
+  align = "stretch",
+  justify = "start",
+  className,
+  ...aria
+}: RowProps) => {
+  return (
+    <div
+      className={classNames(
+        classes.row,
+        className,
+        "flex",
+        orient === "row" && "flex-row",
+        orient === "col" && "flex-col",
+        orient === "row-reverse" && "flex-row-reverse",
+        orient === "col-reverse" && "flex-col-reverse",
+        noWrap ? "flex-nowrap" : "flex-wrap",
+        `justify-${justify}`,
+        `items-${align}`,
+      )}
+      data-gutter={gutter}
+      {...aria}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const Col = ({
+  children,
+  flex,
+  align,
+  className,
+  stretchContent,
+  ...aria
+}: ColProps) => {
+  return (
+    <div
+      className={classNames(
+        classes.col,
+        className,
+        stretchContent && classes.stretchContent,
+        flex === "auto" && "flex-content",
+        flex === "fill" && "flex-1",
+        flex === "full" && "flex-full",
+        align && `self-${align}`,
+      )}
+      {...aria}
+    >
+      {children}
+    </div>
+  );
+};

package/src/core/section/Section.module.css

@@ -0,0 +1,28 @@
+/*
+ * 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 {
+  .section {
+    grid-template: "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+  }
+}

package/src/core/section/Section.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 { type ChildrenProp } from "../../types";
+import { ErrorBoundary } from "../boundary/ErrorBoundary";
+import classes from "./Section.module.css";
+
+/**
+ * The section component provides a structured layout used within a page to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
+ */
+export const Section = ({
+  children,
+  dir,
+}: ChildrenProp & { dir?: "ltr" | "rtl" }) => {
+  return (
+    <div
+      data-ref="section"
+      dir={dir}
+      className={classNames(
+        classes.section,
+        "grid area-content overflow-hidden",
+      )}
+    >
+      <ErrorBoundary>{children}</ErrorBoundary>
+    </div>
+  );
+};

package/src/core/theme/Theme.module.css

@@ -0,0 +1,30 @@
+/*
+ * 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 {
+  .themeProvider {
+    & > * {
+      background-color: theme(backgroundColor.base);
+    }
+  }
+}

package/src/core/theme/ThemeProvider.tsx

@@ -0,0 +1,112 @@
+/*
+ * 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 { isColor } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useMemo } from "react";
+import { type ChildrenProp } from "../../types";
+import classes from "./Theme.module.css";
+
+export interface ThemeProps {
+  /**
+   * light/dark color scheme
+   */
+  colorScheme?: "light" | "dark";
+  /**
+   * branding css className
+   *
+   * .branding {
+   *  --primary: #color;
+   *  --accent: #color;
+   *  --tint: #color;
+   * }
+   */
+  branding?: string;
+  /**
+   * primary color
+   */
+  primaryColor?: string;
+  /**
+   * accent color
+   */
+  accentColor?: string;
+  /**
+   * tint mix color
+   */
+  tintColor?: string;
+  /**
+   * component rounding
+   */
+  rounding?: "minimal" | "normal" | "full";
+}
+
+/**
+ * Theme override
+ */
+export const ThemeProvider = ({
+  children,
+  branding,
+  primaryColor,
+  accentColor,
+  tintColor,
+  colorScheme,
+  rounding,
+}: ThemeProps & ChildrenProp) => {
+  const styles = useMemo(() => {
+    const ret: KeyValue = {};
+    if (primaryColor && isColor(primaryColor)) {
+      ret["--primary"] = primaryColor;
+    }
+    if (primaryColor && !isColor(primaryColor)) {
+      ret["--primary"] = `var(--${primaryColor})`;
+    }
+    if (accentColor && isColor(accentColor)) {
+      ret["--accent"] = accentColor;
+    }
+    if (accentColor && !isColor(accentColor)) {
+      ret["--accent"] = `var(--${accentColor})`;
+    }
+    if (tintColor && isColor(tintColor)) {
+      ret["--tint"] = tintColor;
+    }
+    if (tintColor && !isColor(tintColor)) {
+      ret["--tint"] = `var(--${tintColor})`;
+    }
+    return ret;
+  }, [primaryColor, accentColor, tintColor]);
+
+  return (
+    <div
+      style={styles}
+      data-color-scheme={colorScheme}
+      data-rounding={rounding}
+      className={classNames(
+        classes.themeProvider,
+        "contents theme-base",
+        branding,
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/src/core/viewport/Viewport.module.css

@@ -0,0 +1,32 @@
+/*
+ * 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 {
+  .viewport {
+    --fabric-viewport: color-mix(in lab, var(--fabric-bg) 76%, var(--tint));
+
+    grid-template: "head head head" auto "crumbbar crumbbar crumbbar" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+    color: var(--fabric-text);
+    background-color: var(--fabric-viewport);
+  }
+}

package/src/core/viewport/Viewport.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 { type PropsWithChildren } from "react";
+import classes from "./Viewport.module.css";
+
+/**
+ * The application viewport is the main container that defines the visible area where content is displayed and interacted with.
+ */
+export const Viewport = ({ children }: PropsWithChildren) => {
+  return (
+    <div
+      data-ref="viewport"
+      className={classNames(
+        classes.viewport,
+        "grid overflow-hidden absolute inset-0",
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/src/hooks/useClientService.tsx

@@ -0,0 +1,29 @@
+/*
+ * 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 const useClientService = (
+  clientApi: AnyObject,
+  serverMock?: AnyObject,
+) => {
+  return typeof window === "undefined" ? serverMock : clientApi;
+};