@povio/ui 0.0.4 → 0.0.6

package/src/config/confirmation.context.tsx

@@ -1,133 +0,0 @@
-import { type PropsWithChildren, createContext, use, useCallback, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-import { ActionModal, type ActionModalProps } from "#ui/components/overlays/ActionModal/ActionModal";
-import { ns } from "#ui/config/i18n";
-
-export namespace Confirmation {
-  export type ContextState = Pick<
-    ActionModalProps,
-    "heading" | "description" | "buttonSize" | "textAlign" | "primaryAction" | "secondaryAction" | "modalClassName"
-  > & {
-    isOpen: boolean;
-  };
-
-  export type ConfirmationInput = Pick<
-    ContextState,
-    "heading" | "description" | "buttonSize" | "textAlign" | "modalClassName"
-  > & {
-    cancelLabel?: NonNullable<ContextState["secondaryAction"]>["label"];
-    confirmLabel?: NonNullable<ContextState["primaryAction"]>["label"];
-    cancelVariant?: NonNullable<ContextState["secondaryAction"]>["variant"];
-    cancelColor?: NonNullable<ContextState["secondaryAction"]>["color"];
-    confirmVariant?: NonNullable<ContextState["primaryAction"]>["variant"];
-
-    confirmColor?: NonNullable<ContextState["primaryAction"]>["color"];
-  };
-
-  export interface Options {
-    confirm: (input: ConfirmationInput) => Promise<boolean>;
-  }
-
-  const DEFAULT_STATE: ContextState = {
-    heading: "",
-    description: "",
-    isOpen: false,
-    primaryAction: {
-      label: "",
-      onPress: () => {},
-    },
-    secondaryAction: {
-      label: "",
-      onPress: () => {},
-    },
-  };
-
-  const Context = createContext<Options | null>(null);
-
-  export const Provider = ({ children }: PropsWithChildren) => {
-    const [state, setState] = useState<ContextState>(DEFAULT_STATE);
-    const { t } = useTranslation(ns);
-
-    const onCancel = () => setState(DEFAULT_STATE);
-
-    const confirm = useCallback(
-      async ({
-        heading,
-        description,
-        buttonSize,
-        textAlign,
-        modalClassName,
-        cancelLabel = t(($) => $.ui.confirmation.cancel),
-        confirmLabel = t(($) => $.ui.confirmation.confirm),
-        confirmVariant,
-        confirmColor,
-        cancelVariant,
-        cancelColor,
-      }: ConfirmationInput) => {
-        return new Promise<boolean>((resolve) => {
-          setState({
-            heading,
-            description,
-            buttonSize,
-            textAlign,
-            modalClassName,
-            primaryAction: {
-              label: confirmLabel,
-              onPress() {
-                setState({
-                  ...state,
-                  isOpen: false,
-                  heading: "",
-                  description: "",
-                });
-                resolve(true);
-              },
-              variant: confirmVariant,
-              color: confirmColor,
-            },
-            secondaryAction: {
-              label: cancelLabel,
-              onPress() {
-                onCancel();
-                resolve(false);
-              },
-              variant: cancelVariant,
-              color: cancelColor,
-            },
-            isOpen: !state.isOpen,
-          });
-        });
-      },
-      [state, t],
-    );
-
-    const value = useMemo<Options>(
-      () => ({
-        confirm,
-      }),
-      [confirm],
-    );
-
-    return (
-      <Context.Provider value={value}>
-        <ActionModal
-          {...state}
-          onClose={state.secondaryAction?.onPress ?? onCancel}
-          primaryAction={state.primaryAction}
-          secondaryAction={state.secondaryAction}
-        />
-
-        {children}
-      </Context.Provider>
-    );
-  };
-
-  export const useConfirmation = () => {
-    const context = use(Context);
-    if (!context) {
-      throw new Error("Confirmation.useConfirmation must be used within a Confirmation.Provider");
-    }
-    return context;
-  };
-}

package/src/config/i18n.ts

@@ -1,12 +0,0 @@
-import translationEN from "#ui/assets/locales/en/translation.json";
-import translationSL from "#ui/assets/locales/sl/translation.json";
-
-export const ns = "ui";
-export const resources = {
-  en: {
-    [ns]: translationEN,
-  },
-  sl: {
-    [ns]: translationSL,
-  },
-} as const;

package/src/config/router.context.tsx

@@ -1,66 +0,0 @@
-import { type PropsWithChildren, createContext, use } from "react";
-import { RouterProvider as ReactAriaRouterProvider } from "react-aria";
-import type { UrlObject } from "url";
-
-interface UIRouterProviderProps {
-  push: (url: UrlObject | string) => Promise<boolean>;
-  replace: (url: UrlObject | string) => Promise<boolean>;
-  query: NodeJS.Dict<string | string[]>;
-  pathname: string;
-}
-
-interface UIRouterContextValue {
-  push: (url: UrlObject | string) => Promise<boolean>;
-  replace: (url: UrlObject | string) => Promise<boolean>;
-  pathname: string;
-  query: NodeJS.Dict<string | string[]>;
-  searchParams: URLSearchParams;
-}
-
-export namespace UIRouter {
-  const UIRouterContext = createContext<UIRouterContextValue>(null as never);
-
-  export const UIRouterProvider = ({
-    children,
-    pathname,
-    push,
-    query,
-    replace,
-  }: PropsWithChildren<UIRouterProviderProps>) => {
-    const searchParams = new URLSearchParams();
-
-    for (const [k, v] of Object.entries(query)) {
-      if (Array.isArray(v)) {
-        for (const item of v) {
-          searchParams.append(k, item);
-        }
-      } else {
-        searchParams.set(k, v!);
-      }
-    }
-
-    const value: UIRouterContextValue = {
-      searchParams,
-      pathname,
-      push,
-      query,
-      replace,
-    };
-
-    return (
-      <UIRouterContext value={value}>
-        <ReactAriaRouterProvider navigate={(href) => push(href)}>{children}</ReactAriaRouterProvider>
-      </UIRouterContext>
-    );
-  };
-
-  export const useUIRouter = () => {
-    const context = use(UIRouterContext);
-
-    if (!context) {
-      throw new Error("useUIRouter must be used within a UIRouterContext");
-    }
-
-    return context;
-  };
-}

package/src/config/uiConfig.context.tsx

@@ -1,89 +0,0 @@
-import { type PropsWithChildren, createContext, use } from "react";
-
-import type { CheckboxProps } from "#ui/components/inputs/Checkbox/Checkbox";
-import type { NumberInputProps } from "#ui/components/inputs/Input/NumberInput/NumberInput";
-import type { TextInputProps } from "#ui/components/inputs/Input/TextInput/TextInput";
-import type { RadioGroupProps } from "#ui/components/inputs/RadioGroup/RadioGroup";
-import type { SelectBaseProps } from "#ui/components/inputs/Selection/shared/SelectBase";
-import type { SliderProps } from "#ui/components/inputs/Slider/Slider";
-import type { ToggleProps } from "#ui/components/inputs/Toggle/Toggle";
-import { useDeepCompareMemo } from "#ui/hooks/useDeepCompare";
-import { ObjectUtils } from "#ui/utils/object.utils";
-
-export namespace UIConfig {
-  type DeepRequired<T> = {
-    [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
-  };
-
-  export interface Options {
-    input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size">;
-    numberInput: Pick<NumberInputProps, "formatOptions">;
-    radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;
-    checkbox: Pick<CheckboxProps, "variant">;
-    select: Pick<SelectBaseProps, "selectionMode" | "isSearchable">;
-    toggle: Pick<ToggleProps, "variant">;
-    slider: Pick<SliderProps, "minValue" | "maxValue">;
-  }
-
-  const DEFAULT_CONFIG: DeepRequired<Options> = {
-    input: {
-      variant: "outlined",
-      as: "default",
-      size: "default",
-      isClearable: false,
-      hideLabel: false,
-    },
-    numberInput: {
-      formatOptions: {
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 3,
-      },
-    },
-    radioGroup: {
-      variant: "default",
-      hideLabel: false,
-    },
-    checkbox: {
-      variant: "default",
-    },
-    select: {
-      selectionMode: "single",
-      isSearchable: false,
-    },
-    toggle: {
-      variant: "default",
-    },
-    slider: {
-      minValue: 0,
-      maxValue: 100,
-    },
-  };
-
-  const Context = createContext<DeepRequired<Options>>(DEFAULT_CONFIG);
-
-  interface ProviderProps {
-    config?: Partial<Options>;
-  }
-
-  export const Provider = ({ config = {}, children }: PropsWithChildren<ProviderProps>) => {
-    const parentConfig = use(Context) || DEFAULT_CONFIG;
-
-    const value = useDeepCompareMemo(() => {
-      return ObjectUtils.deepConditionalMerge(
-        parentConfig,
-        config,
-        (val) => val !== null && val !== undefined,
-      ) as DeepRequired<Options>;
-    }, [config, parentConfig]);
-
-    return <Context.Provider value={value}>{children}</Context.Provider>;
-  };
-
-  export const useConfig = () => {
-    const context = use(Context);
-    if (!context) {
-      throw new Error("UIConfig.useConfig must be used within a UIConfig.Provider");
-    }
-    return context;
-  };
-}

package/src/config/uiStyle.context.tsx

@@ -1,100 +0,0 @@
-import type { ClassProp } from "class-variance-authority/types";
-import { type PropsWithChildren, createContext, use } from "react";
-
-import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
-import type { PillButtonVariants } from "#ui/components/buttons/PillButton/pillButton.cva";
-import type { CheckboxVariantProps } from "#ui/components/inputs/Checkbox/checkbox.cva";
-import type { RadioVariantProps } from "#ui/components/inputs/RadioGroup/radio.cva";
-import type { InputBaseProps, InputSideProps, InputSizeProps } from "#ui/components/inputs/shared/input.cva";
-import type { LabelBaseProps } from "#ui/components/inputs/shared/label.cva";
-import type { ToggleVariantProps } from "#ui/components/inputs/Toggle/toggle.cva";
-import type { AlertVariantProps } from "#ui/components/status/Alert/alert.cva";
-import type { ToastVariantProps } from "#ui/components/status/Toast/toast.cva";
-import type {
-  TableDataVariantProps,
-  TableHeadRowVariantProps,
-  TableRowVariantProps,
-} from "#ui/components/table/table.cva";
-import type { LinkVariantProps } from "#ui/components/text/Link/link.cva";
-import type { TagVariantProps } from "#ui/components/text/Tag/tag.cva";
-import type { TypographyVariantProps } from "#ui/components/text/Typography/typography.cva";
-import type { CompoundMapper } from "#ui/utils/compoundMapper";
-
-export namespace UIStyle {
-  export type Cva<T> = (props: T & ClassProp) => string;
-
-  interface Options {
-    button: {
-      cva?: Cva<ButtonVariantProps>;
-      sizeCva?: Cva<ButtonVariantProps>;
-      contentCva?: Cva<ButtonVariantProps>;
-      iconSize?: Cva<Pick<ButtonVariantProps, "size">>;
-      typography?: CompoundMapper<TypographyVariantProps, ButtonVariantProps>;
-    };
-    pillButton: {
-      cva?: Cva<PillButtonVariants>;
-      typography?: CompoundMapper<TypographyVariantProps, PillButtonVariants>;
-    };
-    checkbox: {
-      cva?: Cva<CheckboxVariantProps>;
-      typography?: CompoundMapper<TypographyVariantProps, CheckboxVariantProps>;
-    };
-    radio: {
-      cva?: Cva<RadioVariantProps>;
-      typography?: CompoundMapper<TypographyVariantProps, RadioVariantProps>;
-    };
-    status: {
-      iconCva?: Cva<ToastVariantProps>;
-      separatorCva?: Cva<ToastVariantProps>;
-    };
-    toast: {
-      cva?: Cva<ToastVariantProps>;
-      buttonColor?: CompoundMapper<Pick<ButtonVariantProps, "color" | "inverted">, ToastVariantProps>;
-    };
-    alert: {
-      cva?: Cva<AlertVariantProps>;
-    };
-    input: {
-      baseCva?: Cva<InputBaseProps>;
-      sizeCva?: Cva<InputSizeProps>;
-      sideCva?: Cva<InputSideProps>;
-    };
-    label: {
-      cva?: Cva<LabelBaseProps>;
-      typography?: CompoundMapper<TypographyVariantProps, LabelBaseProps>;
-    };
-    toggle: {
-      cva?: Cva<ToggleVariantProps>;
-      typography?: CompoundMapper<TypographyVariantProps, ToggleVariantProps>;
-    };
-    typography: {
-      cva?: Cva<TypographyVariantProps>;
-    };
-    link: {
-      cva?: Cva<LinkVariantProps>;
-    };
-    tag: {
-      cva?: Cva<TagVariantProps>;
-    };
-    table: {
-      headRowCva?: Cva<TableHeadRowVariantProps>;
-      rowCva?: Cva<TableRowVariantProps>;
-      dataCva?: Cva<TableDataVariantProps>;
-    };
-  }
-
-  const Context = createContext<Partial<Options> | null | undefined>(null);
-
-  interface ProviderProps {
-    config?: Partial<Options>;
-  }
-
-  export const Provider = ({ children, config }: PropsWithChildren<ProviderProps>) => {
-    return <Context.Provider value={config}>{children}</Context.Provider>;
-  };
-
-  export const useConfig = () => {
-    const context = use(Context);
-    return context;
-  };
-}