@povio/ui 0.0.2 → 0.0.3

package/src/components/text/Typography/Typography.tsx

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, Ref } from "react";
+
+import { type TypographyVariantProps, typography } from "#ui/components/text/Typography/typography.cva";
+import { UIStyle } from "#ui/config/uiStyle.context";
+
+type TypographyTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
+
+interface TypographyPropsCva
+  extends Omit<TypographyVariantProps, "size">,
+    Required<Pick<TypographyVariantProps, "size">> {}
+
+export interface TypographyProps extends TypographyPropsCva, HTMLAttributes<HTMLElement> {
+  ref?: Ref<HTMLHeadingElement>;
+  as?: TypographyTag;
+}
+
+export const Typography = ({ as = "p", className, ...props }: TypographyProps) => {
+  const uiStyle = UIStyle.useConfig();
+  const typographyCva = (uiStyle?.typography?.cva ?? typography) as unknown as UIStyle.Cva<TypographyVariantProps>;
+
+  const Tag = as;
+
+  return (
+    <Tag
+      className={typographyCva({
+        ...props,
+        sizeMobile: props.sizeMobile ?? props.size,
+        className,
+      })}
+      {...props}
+    />
+  );
+};

package/src/components/text/Typography/typography.cva.ts

@@ -0,0 +1,102 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export const typography = cva("", {
+  variants: {
+    size: {
+      "headline-1": "md:text-desktop-headline-1",
+      "title-1": "md:text-desktop-title-1",
+      "title-2": "md:text-desktop-title-2",
+      "title-3": "md:text-desktop-title-3",
+      "title-4": "md:text-desktop-title-4",
+      "title-5": "md:text-desktop-title-5",
+      "title-6": "md:text-desktop-title-6",
+      "body-1": "md:text-desktop-body-1",
+      "body-2": "md:text-desktop-body-2",
+      "body-3": "md:text-desktop-body-3",
+      "body-4": "md:text-desktop-body-4",
+      "label-1": "md:text-label-1",
+      "label-2": "md:text-label-2",
+      "label-3": "md:text-label-3",
+    },
+    sizeMobile: {
+      "headline-1": "text-mobile-headline-1",
+      "title-1": "text-mobile-title-1",
+      "title-2": "text-mobile-title-2",
+      "title-3": "text-mobile-title-3",
+      "title-4": "text-mobile-title-4",
+      "title-5": "text-mobile-title-5",
+      "title-6": "text-mobile-title-6",
+      "body-1": "text-mobile-body-1",
+      "body-2": "text-mobile-body-2",
+      "body-3": "text-mobile-body-3",
+      "body-4": "text-mobile-body-4",
+      "label-1": "text-label-1",
+      "label-2": "text-label-2",
+      "label-3": "text-label-3",
+    },
+    variant: {
+      default: "",
+      "prominent-1": "",
+      "default-italic": "italic",
+      "prominent-1-italic": "italic",
+      "prominent-2": "",
+      "prominent-2-italic": "italic",
+    },
+  },
+  compoundVariants: [
+    {
+      size: ["headline-1", "title-1", "title-2", "title-3", "title-4", "title-5", "title-6"],
+      className: "font-geist",
+    },
+    {
+      size: ["body-1", "body-2", "body-3", "body-4", "label-1", "label-2", "label-3"],
+      className: "font-inter",
+    },
+    {
+      size: [
+        "headline-1",
+        "title-1",
+        "title-2",
+        "title-3",
+        "title-4",
+        "title-5",
+        "title-6",
+        "label-1",
+        "label-2",
+        "label-3",
+      ],
+      variant: ["default", "default-italic"],
+      className: "font-medium",
+    },
+    {
+      size: [
+        "headline-1",
+        "title-1",
+        "title-2",
+        "title-3",
+        "title-4",
+        "title-5",
+        "title-6",
+        "label-1",
+        "label-2",
+        "label-3",
+      ],
+      variant: ["prominent-1", "prominent-1-italic"],
+      className: "font-semibold",
+    },
+    {
+      size: ["body-1", "body-2", "body-3", "body-4"],
+      variant: ["prominent-1", "prominent-1-italic"],
+      className: "font-medium",
+    },
+    {
+      size: ["body-1", "body-2", "body-3", "body-4"],
+      variant: ["prominent-2", "prominent-2-italic"],
+      className: "font-semibold",
+    },
+  ],
+});
+
+// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
+export interface TypographyVariantProps extends VariantProps<typeof typography> {}

package/src/config/confirmation.context.tsx

@@ -0,0 +1,133 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,100 @@
+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;
+  };
+}