@ariestools/sdk-react 10.0.2

package/dist/_pkg/json-viewer/browser/stores/JsonViewerStore.d.ts

@@ -0,0 +1,45 @@
+import type { SetStateAction } from 'react';
+import type { StoreApi } from 'zustand';
+import type { JsonViewerOnChange, JsonViewerOnCopy, JsonViewerOnSelect, JsonViewerProps, Path } from '../index.ts';
+import type { Colorspace } from '../theme/base16.ts';
+import type { JsonViewerKeyRenderer, JsonViewerOnAdd, JsonViewerOnDelete } from '../type.ts';
+export interface JsonViewerState<T = unknown> {
+    rootName: false | string;
+    indentWidth: number;
+    keyRenderer: JsonViewerKeyRenderer;
+    enableAdd: boolean | (<U>(path: Path, currentValue: U) => boolean);
+    enableDelete: boolean | (<U>(path: Path, currentValue: U) => boolean);
+    enableClipboard: boolean;
+    editable: boolean | (<U>(path: Path, currentValue: U) => boolean);
+    onChange: JsonViewerOnChange;
+    onCopy: JsonViewerOnCopy | undefined;
+    onSelect: JsonViewerOnSelect | undefined;
+    onAdd: JsonViewerOnAdd | undefined;
+    onDelete: JsonViewerOnDelete | undefined;
+    defaultInspectDepth: number;
+    defaultInspectControl?: (path: Path, value: unknown) => boolean;
+    maxDisplayLength: number;
+    groupArraysAfterLength: number;
+    collapseStringsAfterLength: number;
+    objectSortKeys: boolean | ((a: string, b: string) => number);
+    quotesOnKeys: boolean;
+    displayDataTypes: boolean;
+    displaySize: boolean | ((path: Path, value: unknown) => boolean);
+    displayComma: boolean;
+    highlightUpdates: boolean;
+    inspectCache: Record<string, boolean>;
+    hoverPath: {
+        path: Path;
+        nestedIndex?: number;
+    } | null;
+    colorspace: Colorspace;
+    value: T;
+    prevValue: T | undefined;
+    getInspectCache: (path: Path, nestedIndex?: number) => boolean;
+    setInspectCache: (path: Path, action: SetStateAction<boolean>, nestedIndex?: number) => void;
+    setHover: (path: Path | null, nestedIndex?: number) => void;
+}
+export declare const createJsonViewerStore: <T = unknown>(props: JsonViewerProps<T>) => import("zustand").UseBoundStore<StoreApi<JsonViewerState<unknown>>>;
+export declare const JsonViewerStoreContext: import("react").Context<StoreApi<JsonViewerState<unknown>>>;
+export declare const JsonViewerProvider: import("react").Provider<StoreApi<JsonViewerState<unknown>>>;
+export declare const useJsonViewerStore: <U extends unknown>(selector: (state: JsonViewerState) => U) => U;

package/dist/_pkg/json-viewer/browser/stores/typeRegistry.d.ts

@@ -0,0 +1,14 @@
+import type { SetStateAction } from 'react';
+import type { StoreApi } from 'zustand';
+import type { DataType, Path } from '../type.ts';
+export declare const predefinedTypes: DataType<any>[];
+interface TypeRegistryState {
+    registry: DataType<any>[];
+    registerTypes: (setState: SetStateAction<DataType<any>[]>) => void;
+}
+export declare const createTypeRegistryStore: () => StoreApi<TypeRegistryState>;
+export declare const TypeRegistryStoreContext: import("react").Context<StoreApi<TypeRegistryState>>;
+export declare const TypeRegistryProvider: import("react").Provider<StoreApi<TypeRegistryState>>;
+export declare const useTypeRegistryStore: <U extends unknown>(selector: (state: TypeRegistryState) => U) => U;
+export declare function useTypeComponents(value: unknown, path: Path): DataType<unknown>;
+export {};

package/dist/_pkg/json-viewer/browser/theme/base16.d.ts

@@ -0,0 +1,24 @@
+export type NamedColorspace = {
+    scheme: string;
+    author: string;
+} & Colorspace;
+export interface Colorspace {
+    base00: string;
+    base01: string;
+    base02: string;
+    base03: string;
+    base04: string;
+    base05: string;
+    base06: string;
+    base07: string;
+    base08: string;
+    base09: string;
+    base0A: string;
+    base0B: string;
+    base0C: string;
+    base0D: string;
+    base0E: string;
+    base0F: string;
+}
+export declare const lightColorspace: NamedColorspace;
+export declare const darkColorspace: NamedColorspace;

package/dist/_pkg/json-viewer/browser/type.d.ts

@@ -0,0 +1,250 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { ComponentType, CSSProperties, Dispatch, FC, SetStateAction } from 'react';
+import type { Colorspace } from './theme/base16.ts';
+export type Path = (string | number)[];
+/**
+ * @param path path to the target value
+ * @param oldValue
+ * @param newValue
+ */
+export type JsonViewerOnChange = <U = unknown>(path: Path, oldValue: U, newValue: U) => void;
+/**
+ * @param path path to the target value
+ * @param value the value to be copied
+ * @param copy the function to copy the value to clipboard
+ */
+export type JsonViewerOnCopy = <U = unknown>(path: Path, value: U, copy: (value: string) => Promise<void>) => unknown | Promise<unknown>;
+/**
+ * @param path path to the target value
+ * @param value the value to be selected
+ */
+export type JsonViewerOnSelect = <U = unknown>(path: Path, value: U) => void;
+/**
+ * @param path path to the parent target where the value will be added
+ */
+export type JsonViewerOnAdd = (path: Path) => void;
+/**
+ * @param path path to the target value
+ * @param value the value to be deleted
+ */
+export type JsonViewerOnDelete = <U = unknown>(path: Path, value: U) => void;
+export interface DataItemProps<ValueType = unknown> {
+    inspect: boolean;
+    setInspect: Dispatch<SetStateAction<boolean>>;
+    value: ValueType;
+    prevValue: ValueType | undefined;
+    path: Path;
+    nestedIndex?: number;
+}
+export interface EditorProps<ValueType = unknown> {
+    path: Path;
+    value: ValueType;
+    setValue: Dispatch<ValueType>;
+    abortEditing: () => void;
+    commitEditing: (newValue: string) => void;
+}
+/**
+ * A data type definition, including methods for checking, serializing, and deserializing values, as well as components for rendering and editing values.
+ *
+ * @template ValueType The type of the value represented by this data type
+ */
+export interface DataType<ValueType = unknown> {
+    /**
+     * Determines whether a given value belongs to this data type.
+     *
+     * @param value The value to check
+     * @param path The path to the value within the input data structure
+     * @returns `true` if the value belongs to this data type, `false` otherwise
+     */
+    is: (value: unknown, path: Path) => boolean;
+    /**
+     * Convert the value of this data type to a string for editing
+     */
+    serialize?: (value: ValueType) => string;
+    /**
+     * Converts a string representation of a value back to a value of this data type.
+     *
+     * Throws an error if the input is invalid, in which case the editor will ignore the change.
+     */
+    deserialize?: (value: string) => ValueType;
+    /**
+     * The main component used to render a value of this data type.
+     */
+    Component: ComponentType<DataItemProps<ValueType>>;
+    /**
+     * An optional custom editor component for editing values of this data type.
+     *
+     * You must also provide a `serialize` and `deserialize` function to enable this feature.
+     */
+    Editor?: ComponentType<EditorProps<string>>;
+    /**
+     * An optional component to render before the value.
+     *
+     * In collapsed mode, it will still be rendered as a prefix.
+     */
+    PreComponent?: ComponentType<DataItemProps<ValueType>>;
+    /**
+     * An optional component to render after the value.
+     *
+     * In collapsed mode, it will still be rendered as a suffix.
+     */
+    PostComponent?: ComponentType<DataItemProps<ValueType>>;
+}
+export interface JsonViewerKeyRenderer extends FC<DataItemProps> {
+    when(props: DataItemProps): boolean;
+}
+export type JsonViewerTheme = 'light' | 'dark' | 'auto' | Colorspace;
+export interface JsonViewerProps<T = unknown> {
+    /**
+     * Any value, `object`, `Array`, primitive type, even `Map` or `Set`.
+     */
+    value: T;
+    /**
+     * Name of the root value
+     *
+     * @default "root"
+     */
+    rootName?: false | string;
+    /**
+     * Color theme.
+     *
+     * @default 'light'
+     */
+    theme?: JsonViewerTheme;
+    className?: string;
+    style?: CSSProperties;
+    /**
+     * [The `sx` prop](https://mui.com/system/getting-started/the-sx-prop/) lets you style elements inline, using values from the theme.
+     *
+     * @see https://mui.com/system/getting-started/the-sx-prop/
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * Indent width for nested objects
+     *
+     * @default 3
+     */
+    indentWidth?: number;
+    /**
+     * Customize a key, if `keyRenderer.when` returns `true`.
+     */
+    keyRenderer?: JsonViewerKeyRenderer;
+    /**
+     * Customize the definition of data types.
+     *
+     * @see https://viewer.textea.io/how-to/data-types
+     */
+    valueTypes?: DataType<any>[];
+    /**
+     * Whether enable add feature.
+     *
+     * @default false
+     * */
+    enableAdd?: boolean | (<U = unknown>(path: Path, currentValue: U) => boolean);
+    /**
+     * Whether enable delete feature.
+     *
+     * @default false
+     * */
+    enableDelete?: boolean | (<U = unknown>(path: Path, currentValue: U) => boolean);
+    /**
+     * Whether enable clipboard feature.
+     *
+     * @default true
+     */
+    enableClipboard?: boolean;
+    /**
+     * Whether this value can be edited.
+     *
+     * Provide a function to customize this behavior by returning a boolean based on the value and path.
+     *
+     * @default false
+     */
+    editable?: boolean | (<U = unknown>(path: Path, currentValue: U) => boolean);
+    /** Callback when value changed. */
+    onChange?: JsonViewerOnChange;
+    /** Callback when value copied, you can use it to customize the copy behavior.<br />\*Note: you will have to write the data to the clipboard by yourself. */
+    onCopy?: JsonViewerOnCopy;
+    /** Callback when value selected. */
+    onSelect?: JsonViewerOnSelect;
+    /** Callback when the add button is clicked. This is the function which implements the add feature. Please see the official demo for more details. */
+    onAdd?: JsonViewerOnAdd;
+    /** Callback when the delete button is clicked. This is the function which implements the delete feature. Please see the official demo for more details. */
+    onDelete?: JsonViewerOnDelete;
+    /**
+     * Default inspect depth for nested objects.
+     * _If the number is set too large, it could result in performance issues._
+     *
+     * @default 5
+     */
+    defaultInspectDepth?: number;
+    /**
+     * Default inspect control for nested objects.
+     *
+     * Provide a function to customize which fields should be expanded by default.
+     */
+    defaultInspectControl?: (path: Path, value: unknown) => boolean;
+    /**
+     * Hide items after reaching the count.
+     * `Array` and `Object` will be affected.
+     *
+     * _If the number is set too large, it could result in performance issues._
+     *
+     * @default 30
+     */
+    maxDisplayLength?: number;
+    /**
+     * When an integer value is assigned, arrays will be displayed in groups by count of the value.
+     * Groups are displayed with bracket notation and can be expanded and collapsed by clicking on the brackets.
+     *
+     * @default 100
+     */
+    groupArraysAfterLength?: number;
+    /**
+     * Cut off the string after reaching the count.
+     * Collapsed strings are followed by an ellipsis.
+     *
+     * String content can be expanded and collapsed by clicking on the string value.
+     *
+     * @default 50
+     */
+    collapseStringsAfterLength?: number | false;
+    /**
+     * Whether sort keys through `String.prototype.localeCompare()`
+     *
+     * @default false
+     */
+    objectSortKeys?: boolean | ((a: string, b: string) => number);
+    /**
+     * Whether add quotes on keys.
+     *
+     * @default true
+     */
+    quotesOnKeys?: boolean;
+    /**
+     * Whether display data type labels
+     *
+     * @default true
+     */
+    displayDataTypes?: boolean;
+    /**
+     * Whether display the size of `Object`, `Array`, `Map` and `Set`.
+     *
+     * Provide a function to customize this behavior by returning a boolean based on the value and path.
+     *
+     * @default true
+     */
+    displaySize?: boolean | ((path: Path, value: unknown) => boolean);
+    /**
+     * Whether display comma at the end of items. Just like valid JSON.
+     *
+     * @default false
+     */
+    displayComma?: boolean;
+    /**
+     * Whether to highlight updates.
+     *
+     * @default false
+     */
+    highlightUpdates?: boolean;
+}

package/dist/_pkg/json-viewer/browser/utils/index.d.ts

@@ -0,0 +1,98 @@
+import type { ComponentType } from 'react';
+import type { DataItemProps, DataType, EditorProps, Path } from '../type.ts';
+export declare function isPlainObject(value: any): boolean;
+/**
+ * Apply a value to a given path of an object.
+ */
+export declare function applyValue(input: any, path: (string | number)[], value: any): any;
+/**
+ * Delete a value from a given path of an object.
+ */
+export declare function deleteValue(input: any, path: (string | number)[], value: any): any;
+/**
+ * Define custom data types for any data structure
+ */
+export declare function defineDataType<ValueType = unknown>({ is, serialize, deserialize, Component, Editor, PreComponent, PostComponent, }: {
+    /**
+     * Determines whether a given value belongs to this data type.
+     *
+     * @param value The value to check
+     * @param path The path to the value within the input data structure
+     * @returns `true` if the value belongs to this data type, `false` otherwise
+     */
+    is: (value: unknown, path: Path) => boolean;
+    /**
+     * Convert the value of this data type to a string for editing
+     */
+    serialize?: (value: ValueType) => string;
+    /**
+     * Converts a string representation of a value back to a value of this data type.
+     *
+     * Throws an error if the input is invalid, in which case the editor will ignore the change.
+     */
+    deserialize?: (value: string) => ValueType;
+    /**
+     * The main component used to render a value of this data type.
+     */
+    Component: ComponentType<DataItemProps<ValueType>>;
+    /**
+     * An optional custom editor component for editing values of this data type.
+     *
+     * You must also provide a `serialize` and `deserialize` function to enable this feature.
+     */
+    Editor?: ComponentType<EditorProps<string>>;
+    /**
+     * An optional component to render before the value.
+     *
+     * In collapsed mode, it will still be rendered as a prefix.
+     */
+    PreComponent?: ComponentType<DataItemProps<ValueType>>;
+    /**
+     * An optional component to render after the value.
+     *
+     * In collapsed mode, it will still be rendered as a suffix.
+     */
+    PostComponent?: ComponentType<DataItemProps<ValueType>>;
+}): DataType<ValueType>;
+export declare const isCycleReference: (root: any, path: (string | number)[], value: unknown) => false | string;
+export declare function getValueSize(value: any): number;
+export declare function segmentArray<T>(arr: T[], size: number): T[][];
+/**
+ * A safe version of `JSON.stringify` that handles circular references and BigInts.
+ *
+ * *This function might be changed in the future to support more types. Use it with caution.*
+ *
+ * @param obj A JavaScript value, usually an object or array, to be converted.
+ * @param space Adds indentation, white space, and line break characters to the return-value JSON text to make it easier to read.
+ * @returns
+ */
+export declare function safeStringify(obj: any, space?: string | number): string;
+export declare function copyString(value: string): Promise<void>;
+/**
+ * Allows handling custom data structures when retrieving values from objects at specific paths.
+ */
+export interface PathValueCustomGetter {
+    /**
+     * Determines if the custom getter should be applied based on the current value and path.
+     *
+     * @param {unknown} value - The current value in the object at the given path.
+     * @param {Path} path - The current path being evaluated.
+     * @returns {boolean} - True if the custom handler should be used for this value and path.
+     */
+    is: (value: unknown, path: Path) => boolean;
+    /**
+     * Custom handler to retrieve a value from a specific key in the current value.
+     *
+     * @param {unknown} value - The current value in the object at the given path.
+     * @param {unknown} key - The key used to retrieve the value from the current value.
+     * @returns {unknown} - The value retrieved using the custom handler.
+     */
+    handler: (value: unknown, key: unknown) => unknown;
+}
+export declare function pathValueDefaultGetter(value: any, key: any): unknown;
+/**
+ * Get the value at a given path in an object.
+ * Passing custom getters allows you to handle custom data structures.
+ * @experimental This function is not yet stable and may change in the future.
+ */
+export declare function getPathValue<T = unknown, R = unknown>(obj: T, path: Path, customGetters?: PathValueCustomGetter[]): R | null;

package/dist/_pkg/link/browser/LinkEx.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { LinkExProps } from './LinkExProps.tsx';
+export declare const LinkEx: {
+    ({ ref, onClick, disableUserEvents, funnel, intent, placement, target, href, to, toOptions, ...props }: LinkExProps & {
+        ref?: React.RefObject<HTMLAnchorElement | null>;
+    }): React.JSX.Element;
+    displayName: string;
+};

package/dist/_pkg/link/browser/LinkExProps.d.ts

@@ -0,0 +1,31 @@
+import type { LinkProps } from '@mui/material';
+import type { NavigateOptions, To } from 'react-router-dom';
+export interface LinkOnlyHrefProps {
+    href?: string;
+    to?: never;
+    toOptions?: never;
+}
+export interface LinkOnlyToProps {
+    href?: never;
+    to?: To;
+    toOptions?: NavigateOptions;
+}
+export interface LinkNoToOrHrefProps {
+    href?: never;
+    to?: never;
+    toOptions?: never;
+}
+export type LinkHrefOrToOrNoProps = LinkOnlyHrefProps | LinkOnlyToProps | LinkNoToOrHrefProps;
+export interface LinkHrefAndToProps {
+    href?: string;
+    to?: To;
+    toOptions?: NavigateOptions;
+}
+export declare const asLinkHrefOrToProps: (props: LinkHrefAndToProps) => LinkHrefOrToOrNoProps;
+export interface LinkExBaseProps extends Omit<LinkProps, 'ref' | 'href'> {
+    disableUserEvents?: boolean;
+    funnel?: string;
+    intent?: string;
+    placement?: string;
+}
+export type LinkExProps = LinkExBaseProps & LinkHrefOrToOrNoProps;

package/dist/_pkg/link/browser/LinkToEx.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { LinkExProps } from './LinkExProps.tsx';
+export declare const LinkToEx: {
+    ({ ref, intent, funnel, onClick, to, toOptions, placement, disableUserEvents, ...props }: LinkExProps & {
+        ref?: React.RefObject<HTMLAnchorElement | null>;
+    }): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,3 @@
+export * from './LinkEx.tsx';
+export * from './LinkExProps.tsx';
+export * from './LinkToEx.tsx';

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

@@ -0,0 +1,127 @@
+// src/LinkEx.tsx
+import { toPromise as toPromise2 } from "@ariestools/sdk";
+import { useUserEvents as useUserEvents2 } from "../../pixel/browser/index.mjs";
+import { Link as Link2 } from "@mui/material";
+
+// src/LinkToEx.tsx
+import { toPromise } from "@ariestools/sdk";
+import { useUserEvents } from "../../pixel/browser/index.mjs";
+import { Link } from "@mui/material";
+import { Link as RouterLink, useNavigate } from "react-router-dom";
+import { jsx } from "react/jsx-runtime";
+var LinkToEx = ({
+  ref,
+  intent,
+  funnel,
+  onClick,
+  to,
+  toOptions,
+  placement,
+  disableUserEvents,
+  ...props
+}) => {
+  const userEvents = useUserEvents();
+  const navigate = useNavigate();
+  const localOnClick = (event) => {
+    if (disableUserEvents !== true && userEvents) {
+      const elementName = props["aria-label"] ?? event.currentTarget.textContent;
+      const callOnClickAndNavigate = () => {
+        try {
+          onClick?.(event);
+        } catch (ex) {
+          console.error("onClick threw", elementName, funnel, placement, ex);
+        }
+        if (to !== void 0 && toOptions !== void 0) {
+          void navigate(to, toOptions);
+        }
+      };
+      void (async () => {
+        try {
+          await toPromise(userEvents.userClick({
+            elementName,
+            funnel,
+            intent,
+            placement
+          }));
+          callOnClickAndNavigate();
+        } catch (ex) {
+          console.error("User event failed", elementName, funnel, placement, ex);
+          callOnClickAndNavigate();
+        }
+      })();
+    } else {
+      onClick?.(event);
+    }
+  };
+  return /* @__PURE__ */ jsx(Link, { ref, rel: "noopener noreferrer", to: toOptions === void 0 ? to : void 0, component: RouterLink, onClick: localOnClick, ...props });
+};
+LinkToEx.displayName = "LinkToExXYLabs";
+
+// src/LinkEx.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var LinkEx = ({
+  ref,
+  onClick,
+  disableUserEvents,
+  funnel,
+  intent,
+  placement,
+  target,
+  href,
+  to,
+  toOptions,
+  ...props
+}) => {
+  const userEvents = useUserEvents2();
+  const localOnClick = (event) => {
+    const windowToNavigate = () => target !== void 0 && target.length > 0 && href !== void 0 && href.length > 0 ? window.open("", target) ?? globalThis : globalThis;
+    const callOnClickAndFollowHref = (windowToNav = windowToNavigate()) => {
+      onClick?.(event);
+      if (href !== void 0 && href.length > 0) {
+        windowToNav.location.href = href;
+      }
+    };
+    if (disableUserEvents !== true && userEvents) {
+      const elementName = props["aria-label"] ?? event.currentTarget.textContent;
+      event.preventDefault();
+      const windowToNav = windowToNavigate();
+      void (async () => {
+        try {
+          await toPromise2(userEvents.userClick({
+            elementName,
+            funnel,
+            intent,
+            placement
+          }));
+          callOnClickAndFollowHref(windowToNav);
+        } catch (ex) {
+          console.error("User event failed", elementName, funnel, placement, ex);
+          callOnClickAndFollowHref(windowToNav);
+        }
+      })();
+    } else {
+      callOnClickAndFollowHref();
+    }
+  };
+  return to === void 0 ? /* @__PURE__ */ jsx2(Link2, { ref, href, target, onClick: localOnClick, ...props }) : /* @__PURE__ */ jsx2(LinkToEx, { ref, to, toOptions, target, onClick, ...props });
+};
+LinkEx.displayName = "LinkExXYLabs";
+
+// src/LinkExProps.tsx
+var asLinkHrefOrToProps = (props) => {
+  if (props.href !== void 0 && props.href.length > 0 && (props.to !== void 0 || props.toOptions !== void 0)) {
+    throw new Error("LinkExProps: cannot have both href and to");
+  }
+  if (props.href !== void 0 && props.href.length > 0) {
+    return { href: props.href };
+  }
+  if (props.to !== void 0) {
+    return { to: props.to, toOptions: props.toOptions };
+  }
+  return {};
+};
+export {
+  LinkEx,
+  LinkToEx,
+  asLinkHrefOrToProps
+};

package/dist/_pkg/number-status/browser/NumberStatus.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { NumberStatusProps } from './NumberStatusProps.ts';
+declare const NumberStatus: React.FC<NumberStatusProps>;
+export { NumberStatus };

package/dist/_pkg/number-status/browser/NumberStatusProps.d.ts

@@ -0,0 +1,13 @@
+import type { ButtonExProps } from '../../button/browser/index.ts';
+type NumberStatusProps = ButtonExProps & {
+    autoWidth?: boolean;
+    error?: Error;
+    fontSize?: number;
+    format?: string;
+    rounded?: boolean;
+    shorten?: string | boolean;
+    title?: string;
+    value?: number | string;
+    width?: number;
+};
+export type { NumberStatusProps };

package/dist/_pkg/number-status/browser/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NumberStatus.tsx';
+export * from './NumberStatusProps.ts';