@ariestools/sdk-react 10.0.2

package/dist/_pkg/shared/browser/index.mjs

@@ -0,0 +1,498 @@
+// src/Collapsible/provider.tsx
+import { useMemo, useState } from "react";
+
+// src/contextEx/create.ts
+import { createContext } from "react";
+var createContextEx = () => {
+  const ExContext = createContext({ provided: false });
+  ExContext.displayName = "ExContext";
+  return ExContext;
+};
+
+// src/contextEx/use.ts
+import { use } from "react";
+var useContextEx = (context, contextName, required = true) => {
+  const { provided, ...props } = use(context);
+  if (!provided && required) {
+    throw new Error(`use${contextName} can not be used outside of a ${contextName} Context when required=true`);
+  }
+  return props;
+};
+var useProvided = (context) => {
+  const { provided } = use(context);
+  return provided;
+};
+
+// src/Collapsible/context.ts
+var CollapsibleContext = createContextEx();
+
+// src/Collapsible/provider.tsx
+import { jsx } from "react/jsx-runtime";
+var CollapsibleProvider = ({
+  defaultCollapse = false,
+  defaultCollapseEnd = false,
+  children
+}) => {
+  const [collapse, setCollapse] = useState(() => defaultCollapse);
+  const [collapseEnd, setCollapseEnd] = useState(() => defaultCollapseEnd);
+  const value = useMemo(() => {
+    const value2 = {
+      collapse,
+      collapseEnd,
+      provided: true,
+      setCollapse,
+      setCollapseEnd
+    };
+    return value2;
+  }, [collapse, collapseEnd]);
+  return /* @__PURE__ */ jsx(CollapsibleContext, { value, children });
+};
+
+// src/Collapsible/use.ts
+var useCollapsible = () => useContextEx(CollapsibleContext, "Collapsible", false);
+
+// src/components/BusyCircularProgress.tsx
+import {
+  alpha,
+  Box,
+  CircularProgress,
+  useTheme
+} from "@mui/material";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var percentBackground = (percent) => `color-mix(in srgb, var(--mui-palette-background-default), transparent ${percent}%)`;
+var BusyCircularProgress = ({
+  bgcolor,
+  style,
+  rounded,
+  size,
+  opacity = 0.85,
+  ...props
+}) => {
+  const theme = useTheme();
+  const opacityNumber = Number(String(opacity));
+  return /* @__PURE__ */ jsx2(
+    Box,
+    {
+      style: { borderRadius: rounded === true ? theme.shape.borderRadius : 0, ...style },
+      sx: {
+        display: "flex",
+        bgcolor: bgcolor === void 0 ? percentBackground(opacityNumber * 100) : alpha(bgcolor, opacityNumber),
+        flexGrow: 1,
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsx2(CircularProgress, { size, ...props })
+    }
+  );
+};
+
+// src/components/BusyLinearProgress.tsx
+import {
+  alpha as alpha2,
+  Box as Box2,
+  LinearProgress,
+  useTheme as useTheme2
+} from "@mui/material";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var percentBackground2 = (percent) => `color-mix(in srgb, var(--mui-palette-background-default), transparent ${percent}%)`;
+var BusyLinearProgress = ({
+  bgcolor,
+  style,
+  rounded,
+  opacity = 0.85,
+  ...props
+}) => {
+  const theme = useTheme2();
+  const opacityNumber = Number(String(opacity));
+  return /* @__PURE__ */ jsx3(
+    Box2,
+    {
+      style: { borderRadius: rounded === true ? theme.shape.borderRadius : 0, ...style },
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        bgcolor: bgcolor === void 0 ? percentBackground2(opacityNumber * 100) : alpha2(bgcolor, opacityNumber),
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        justifyContent: "flex-start",
+        alignItems: "stretch",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsx3(LinearProgress, { ...props })
+    }
+  );
+};
+
+// src/components/NotFound.tsx
+import { Box as Box3, Typography } from "@mui/material";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var NotFound = ({ sx, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    Box3,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        ...sx
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx4(Typography, { variant: "h2", children: "Sorry!" }),
+        /* @__PURE__ */ jsx4(
+          Typography,
+          {
+            variant: "body2",
+            sx: { marginY: 3 },
+            children: "Can't find anything here"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/hooks/useBreakpoint.ts
+import { useMediaQuery, useTheme as useTheme3 } from "@mui/material";
+var useBreakpoint = () => {
+  const theme = useTheme3();
+  const xs = useMediaQuery(theme.breakpoints.only("xs"));
+  const sm = useMediaQuery(theme.breakpoints.only("sm"));
+  const md = useMediaQuery(theme.breakpoints.only("md"));
+  const lg = useMediaQuery(theme.breakpoints.only("lg"));
+  const xl = useMediaQuery(theme.breakpoints.only("xl"));
+  return xs ? "xs" : sm ? "sm" : md ? "md" : lg ? "lg" : xl ? "xl" : void 0;
+};
+
+// src/hooks/useInterval.ts
+import { useEffect, useRef } from "react";
+var useInterval = (callback, delay) => {
+  const intervalRef = useRef(void 0);
+  const savedCallbackRef = useRef(callback);
+  useEffect(() => {
+    savedCallbackRef.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    const tick = () => savedCallbackRef.current();
+    intervalRef.current = setInterval(tick, delay);
+    return () => clearInterval(intervalRef.current);
+  }, [delay]);
+  return intervalRef;
+};
+
+// src/hooks/useLocalStorage.ts
+import { useCallback, useState as useState2 } from "react";
+
+// src/lib/getApiStage.ts
+import { getApiStage as baseGetApiStage } from "@ariestools/sdk";
+var getApiStage = () => {
+  return baseGetApiStage(document.location.hostname);
+};
+
+// src/lib/isLocalHost.ts
+var isLocalhost = () => !!(location.hostname === "localhost" || location.hostname === "[::1]" || /^127(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d{1,2})){3}$/.test(location.hostname));
+
+// src/lib/profile.ts
+var logProfiling = false;
+var enableProfileLogging = (enabled) => {
+  logProfiling = enabled;
+};
+var profileResults = [];
+var profileBlock = async (name, closure) => {
+  const startTime = Date.now();
+  await closure();
+  const endTime = Date.now();
+  profileResults.push({
+    endTime,
+    name,
+    startTime
+  });
+  if (logProfiling) {
+    console.log(`Timed ${name} [${endTime - startTime}ms]`);
+  }
+};
+
+// src/lib/safeLocalStorage.ts
+var getLocalStorageObject = (key, log) => {
+  let result = {};
+  try {
+    result = JSON.parse(localStorage.getItem(key) ?? "{}");
+  } catch (e) {
+    log?.error("getLocalStorageObject", e);
+  }
+  return result;
+};
+var setLocalStorageObject = (key, value, log) => {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch (e) {
+    log?.error("setLocalStorageObject", e);
+  }
+};
+
+// src/lib/safeSessionStorage.ts
+var getSessionStorageObject = (key, log) => {
+  let result = {};
+  try {
+    result = JSON.parse(sessionStorage.getItem(key) ?? "{}");
+  } catch (e) {
+    log?.error("getSessionStorageObject", e);
+  }
+  return result;
+};
+var setSessionStorageObject = (key, value, log) => {
+  try {
+    sessionStorage.setItem(key, JSON.stringify(value));
+  } catch (e) {
+    log?.error("setSessionStorageObject", e);
+  }
+};
+
+// src/hooks/useLocalStorage.ts
+var useLocalStorage = (key, defaultValue) => {
+  const [storedValue, setStoredValue] = useState2(() => {
+    if (globalThis === void 0) return defaultValue;
+    try {
+      const item = getLocalStorageObject(key);
+      if (typeof item === "boolean" || typeof item === "string" || typeof item === "number") {
+        return item;
+      }
+      if (Array.isArray(item)) {
+        return item;
+      }
+      if (Object.keys(item).length > 0) {
+        return item;
+      }
+      setLocalStorageObject(key, defaultValue);
+      return defaultValue;
+    } catch {
+      return defaultValue;
+    }
+  });
+  const setValue = useCallback(
+    (value) => {
+      setStoredValue(value);
+      setLocalStorageObject(key, value);
+    },
+    [setStoredValue, key]
+  );
+  return [storedValue, setValue];
+};
+
+// src/hooks/useMediaQuery.ts
+import { useMediaQuery as useMediaQuery2 } from "@mui/material";
+
+// src/hooks/useMounted.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+var useMounted = () => {
+  const [mounted, setMounted] = useState3(true);
+  useEffect2(() => {
+    setMounted(true);
+    return () => {
+      setMounted(false);
+    };
+  }, []);
+  return () => {
+    return mounted;
+  };
+};
+
+// src/hooks/useSpacing.tsx
+import { useTheme as useTheme4 } from "@mui/material";
+var useSpacing = (value) => {
+  const theme = useTheme4();
+  return theme.spacing(typeof value === "string" ? Number.parseInt(value) : value);
+};
+
+// src/hooks/useTimeout.ts
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+var useTimeout = (callback, delay) => {
+  const timeoutRef = useRef2(void 0);
+  const savedCallbackRef = useRef2(callback);
+  useEffect3(() => {
+    savedCallbackRef.current = callback;
+  }, [callback]);
+  useEffect3(() => {
+    const tick = () => savedCallbackRef.current();
+    timeoutRef.current = setTimeout(tick, delay);
+    return () => clearTimeout(timeoutRef.current);
+  }, [delay]);
+  return timeoutRef;
+};
+
+// src/hooks/useWebP.tsx
+import { useAsyncEffect } from "../../async-effect/browser/index.mjs";
+import { useState as useState4 } from "react";
+var supportsWebP;
+var useWebP = (webp, alt) => {
+  const [img, setImg] = useState4();
+  useAsyncEffect(
+    async (mounted) => {
+      supportsWebP ??= await getSupportsWebP();
+      if (mounted()) {
+        setImg(supportsWebP ? webp : alt);
+      }
+    },
+    [alt, webp]
+  );
+  return img;
+};
+var getSupportsWebP = async () => {
+  try {
+    return await new Promise((resolve) => {
+      const image = new Image();
+      const onError = () => resolve(false);
+      image.addEventListener("error", onError);
+      const onLoad = () => resolve(image.width === 1);
+      image.addEventListener("load", onLoad);
+      image.src = "data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=";
+    });
+  } catch {
+    return false;
+  }
+};
+
+// src/hooks/useWindowSize.ts
+import { useEffect as useEffect4, useState as useState5 } from "react";
+function useWindowSize() {
+  const [windowSize, setWindowSize] = useState5(
+    globalThis === void 0 ? {} : { height: window.innerHeight, width: window.innerWidth }
+  );
+  const handleResize = () => {
+    setWindowSize({
+      height: window.innerHeight,
+      width: window.innerWidth
+    });
+  };
+  useEffect4(() => {
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowSize;
+}
+
+// src/calcSpacing.ts
+var calcSpacing = (theme, values) => {
+  for (const value of values) {
+    if (value !== void 0) {
+      if (typeof value === "string") {
+        return value;
+      }
+      if (typeof value === "number") {
+        return theme.spacing(value);
+      }
+    }
+  }
+};
+
+// src/mergeBoxlikeStyles.ts
+var mergeBoxlikeStyles = (theme, props, defaultProps) => {
+  const {
+    alignContent,
+    alignItems,
+    alignSelf,
+    bgcolor,
+    border,
+    borderColor,
+    display,
+    flexGrow,
+    flexShrink,
+    flexDirection,
+    flexWrap,
+    justifyContent,
+    justifyItems,
+    justifySelf,
+    height,
+    minHeight,
+    minWidth,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginLeft,
+    marginRight,
+    marginBottom,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingLeft,
+    paddingRight,
+    paddingBottom,
+    position,
+    style,
+    width,
+    ...rootProps
+  } = { ...defaultProps, ...props };
+  const mergedStyle = {
+    alignContent,
+    alignItems,
+    alignSelf,
+    backgroundColor: bgcolor,
+    border,
+    borderColor,
+    display,
+    flexDirection,
+    flexGrow,
+    flexShrink,
+    flexWrap,
+    height,
+    justifyContent,
+    justifyItems,
+    justifySelf,
+    marginBottom: calcSpacing(theme, [marginBottom, marginY, margin]),
+    marginLeft: calcSpacing(theme, [marginLeft, marginX, margin]),
+    marginRight: calcSpacing(theme, [marginRight, marginX, margin]),
+    marginTop: calcSpacing(theme, [marginTop, marginY, margin]),
+    minHeight,
+    minWidth,
+    paddingBottom: calcSpacing(theme, [paddingBottom, paddingY, padding]),
+    paddingLeft: calcSpacing(theme, [paddingLeft, paddingX, padding]),
+    paddingRight: calcSpacing(theme, [paddingRight, paddingX, padding]),
+    paddingTop: calcSpacing(theme, [paddingTop, paddingY, padding]),
+    position,
+    width,
+    ...style
+  };
+  return {
+    ...rootProps,
+    style: mergedStyle
+  };
+};
+export {
+  BusyCircularProgress,
+  BusyLinearProgress,
+  CollapsibleProvider,
+  NotFound,
+  createContextEx,
+  enableProfileLogging,
+  getApiStage,
+  getLocalStorageObject,
+  getSessionStorageObject,
+  isLocalhost,
+  mergeBoxlikeStyles,
+  profileBlock,
+  profileResults,
+  setLocalStorageObject,
+  setSessionStorageObject,
+  useBreakpoint,
+  useCollapsible,
+  useContextEx,
+  useInterval,
+  useLocalStorage,
+  useMediaQuery2 as useMediaQuery,
+  useMounted,
+  useProvided,
+  useSpacing,
+  useTimeout,
+  useWebP,
+  useWindowSize
+};

package/dist/_pkg/shared/browser/lib/ComponentSizes.d.ts

@@ -0,0 +1,2 @@
+type ComponentSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type { ComponentSizes };

package/dist/_pkg/shared/browser/lib/getApiStage.d.ts

@@ -0,0 +1,2 @@
+declare const getApiStage: () => "local" | "beta" | "prod";
+export { getApiStage };

package/dist/_pkg/shared/browser/lib/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ComponentSizes.ts';
+export * from './getApiStage.ts';
+export * from './isLocalHost.ts';
+export * from './profile.ts';
+export * from './safeLocalStorage.ts';
+export * from './safeSessionStorage.ts';

package/dist/_pkg/shared/browser/lib/isLocalHost.d.ts

@@ -0,0 +1,2 @@
+declare const isLocalhost: () => boolean;
+export { isLocalhost };

package/dist/_pkg/shared/browser/lib/profile.d.ts

@@ -0,0 +1,8 @@
+export interface ProfileResult {
+    endTime: number;
+    name: string;
+    startTime: number;
+}
+export declare const enableProfileLogging: (enabled: boolean) => void;
+export declare const profileResults: ProfileResult[];
+export declare const profileBlock: (name: string, closure: () => Promise<unknown>) => Promise<void>;

package/dist/_pkg/shared/browser/lib/safeLocalStorage.d.ts

@@ -0,0 +1,3 @@
+import type { Logger } from '@ariestools/sdk';
+export declare const getLocalStorageObject: <T>(key: string, log?: Logger) => T;
+export declare const setLocalStorageObject: <T>(key: string, value: T, log?: Logger) => void;

package/dist/_pkg/shared/browser/lib/safeSessionStorage.d.ts

@@ -0,0 +1,3 @@
+import type { Logger } from '@ariestools/sdk';
+export declare const getSessionStorageObject: <T>(key: string, log?: Logger) => T;
+export declare const setSessionStorageObject: <T>(key: string, value: T, log?: Logger) => void;

package/dist/_pkg/shared/browser/mergeBoxlikeStyles.d.ts

@@ -0,0 +1,4 @@
+import type { Theme } from '@mui/material';
+import type { BoxlikeComponentProps } from './BoxlikeComponentProps.ts';
+declare const mergeBoxlikeStyles: <T extends BoxlikeComponentProps>(theme: Theme, props: BoxlikeComponentProps, defaultProps?: BoxlikeComponentProps) => T;
+export { mergeBoxlikeStyles };

package/dist/_pkg/theme/browser/alphaCss.d.ts

@@ -0,0 +1 @@
+export declare const alphaCss: (color: string, value: number) => string;

package/dist/_pkg/theme/browser/components/ColorSchemeButton.d.ts

@@ -0,0 +1,7 @@
+import type { IconButtonProps } from '@mui/material';
+import React from 'react';
+export interface ColorSchemeButtonProps extends IconButtonProps {
+    darkModeColor?: IconButtonProps['color'];
+    lightModeColor?: IconButtonProps['color'];
+}
+export declare const ColorSchemeButton: React.FC<ColorSchemeButtonProps>;

package/dist/_pkg/theme/browser/components/index.d.ts

@@ -0,0 +1 @@
+export * from './ColorSchemeButton.tsx';

package/dist/_pkg/theme/browser/darkenCss.d.ts

@@ -0,0 +1 @@
+export declare const darkenCss: (color: string, value: number) => string;

package/dist/_pkg/theme/browser/index.d.ts

@@ -0,0 +1,7 @@
+export * from './alphaCss.ts';
+export * from './components/index.ts';
+export * from './darkenCss.ts';
+export * from './lightenCss.ts';
+export * from './product-theme/index.ts';
+export * from './useIsDark.ts';
+export * from './useIsSmall.ts';