@povio/ui 0.0.4 → 0.0.6

package/src/assets/locales/en/translation.json

@@ -1,156 +0,0 @@
-{
-  "ui": {
-    "openAlt": "Open",
-    "closeAlt": "Close",
-    "clearAlt": "Clear",
-    "loadingState": {
-      "text": "Loading..."
-    },
-    "select": {
-      "closeAlt": "Close the menu",
-      "selectAll": "Select all",
-      "clearSelection": "Clear",
-      "allOption": "All",
-      "search": "Search",
-      "clearSearch": "Clear search"
-    },
-    "datePicker": {
-      "today": "Today",
-      "clear": "Clear",
-      "save": "Save",
-      "presets": {
-        "thisWeek": "This week",
-        "lastWeek": "Last week",
-        "thisAndLastWeek": "This & Last week",
-        "thisMonth": "This month",
-        "thisAndLastMonth": "This & Last month",
-        "thisYear": "This year",
-        "lastYear": "Last year",
-        "thisAndLastYear": "This & Last year",
-        "soFar": "So far"
-      },
-      "errors": {
-        "endDateBeforeStart": "End date cannot be before start date"
-      }
-    },
-    "modal": {
-      "closeBtn": "Close"
-    },
-    "autocomplete": {
-      "createNewBtn": "Create"
-    },
-    "password": {
-      "reveal": "Reveal password",
-      "hide": "Hide password"
-    },
-    "textEditor": {
-      "textStyle": {
-        "label": "Text style",
-        "normal": "Normal text",
-        "heading1": "Heading 1",
-        "heading2": "Heading 2",
-        "heading3": "Heading 3",
-        "heading4": "Heading 4",
-        "heading5": "Heading 5",
-        "heading6": "Heading 6"
-      },
-      "marks": {
-        "bold": "Bold",
-        "italic": "Italic",
-        "underline": "Underline",
-        "strikethrough": "Strikethrough"
-      },
-      "textAlign": {
-        "label": "Text align",
-        "left": "Left",
-        "center": "Center",
-        "right": "Right",
-        "justify": "Justify"
-      },
-      "link": {
-        "label": "Hyperlink",
-        "apply": "Apply",
-        "remove": "Remove",
-        "urlLabel": "URL",
-        "urlPlaceholder": "Enter the URL"
-      }
-    },
-    "tag": {
-      "dismiss": "Dismiss"
-    },
-    "clearInput": "Clear input",
-    "pagination": {
-      "nextBtn": "Next",
-      "backBtn": "Previous",
-      "firstBtn": "First",
-      "lastBtn": "Last",
-      "resultsPerPage": "Results per page"
-    },
-    "confirmation": {
-      "cancel": "Cancel",
-      "confirm": "Confirm"
-    },
-    "fileUpload": {
-      "emptyText": "Upload file",
-      "uploadText": "Drag & drop files here or",
-      "browse": "Browse",
-      "noFileUploaded": "No file uploaded",
-      "upload": "Upload",
-      "uploadFile": "Upload file",
-      "or": "or",
-      "removeFile": "Remove file",
-      "cancel": "Cancel"
-    },
-    "table": {
-      "column": "Column",
-      "show": "Show",
-      "configureColumns": "Configure columns"
-    }
-  },
-  "zodErrors": {
-    "required": "Required",
-    "invalid": "Invalid",
-    "string": {
-      "includes": "Must include \"{{text}}\"",
-      "startsWith": "Must start with \"{{text}}\"",
-      "endsWith": "Must end with \"{{text}}\"",
-      "constraint": "Invalid {{text}}",
-      "contains": "Must contain exactly {{count}} character(s)",
-      "containsAtLeast": "Must contain at least {{count}} character(s)",
-      "containsOver": "Must contain over {{count}} character(s)",
-      "containsAtMost": "Must contain at most {{count}} character(s)",
-      "containsUnder": "Must contain under {{count}} character(s)"
-    },
-    "array": {
-      "contains": "Array must contain exactly {{count}} element(s)",
-      "containsAtLeast": "Array must contain at least {{count}} element(s)",
-      "containsMoreThan": "Array must contain more than {{count}} element(s)",
-      "containsAtMost": "Array must contain at most {{count}} element(s)",
-      "containsLessThan": "Array must contain less than {{count}} element(s)"
-    },
-    "number": {
-      "exact": "Number must be exactly equal to {{number}}",
-      "greaterThanOrEqual": "Number must be greater than or equal to {{number}}",
-      "greaterThan": "Number must be greater than {{number}}",
-      "over": "Number must be over {{number}}",
-      "lessThanOrEqual": "Number must be less than or equal to {{number}}",
-      "lessThan": "Number must be less than {{number}}",
-      "multipleOf": "Number must be a multiple of {{multipleOf}}"
-    },
-    "date": {
-      "invalid": "Invalid date",
-      "exact": "Date must be exactly equal to {{date}}",
-      "greaterThanOrEqual": "Date must be greater than or equal to {{date}}",
-      "greaterThan": "Date must be greater than {{date}}",
-      "smallerThanOrEqual": "Date must be smaller than or equal to {{date}}",
-      "smallerThan": "Date must be smaller than {{date}}"
-    }
-  },
-  "sharedErrors": {
-    "dataValidation": "An error occurred while validating the data",
-    "internalError": "An internal error occurred. This is most likely a bug on our end. Please try again later.",
-    "networkError": "A network error occurred. Are you connected to the internet?",
-    "canceledError": "The request was canceled.",
-    "unknownError": "An unknown error occurred. Please try again later."
-  }
-}

package/src/assets/locales/sl/translation.json

@@ -1,152 +0,0 @@
-{
-  "ui": {
-    "openAlt": "Odpri",
-    "closeAlt": "Zapri",
-    "clearAlt": "Sprazni",
-    "loadingState": {
-      "text": "Nalaganje..."
-    },
-    "select": {
-      "closeAlt": "Zapri meni",
-      "selectAll": "Izberi vse",
-      "clearSelection": "Sprazni",
-      "allOption": "Vse",
-      "search": "Išči",
-      "clearSearch": "Sprazni iskanje"
-    },
-    "datePicker": {
-      "today": "Danes",
-      "clear": "Sprazni",
-      "save": "Shrani",
-      "presets": {
-        "thisWeek": "Ta teden",
-        "lastWeek": "Prejšnji teden",
-        "thisAndLastWeek": "Ta in prejšnji teden",
-        "thisMonth": "Ta mesec",
-        "thisAndLastMonth": "Ta in prejšnji mesec",
-        "thisYear": "Ta leto",
-        "lastYear": "Prejšnje leto",
-        "thisAndLastYear": "Ta in prejšnje leto",
-        "soFar": "Od začetka"
-      },
-      "errors": {
-        "endDateBeforeStart": "Datum konca ne more biti pred datumom začetka"
-      }
-    },
-    "modal": {
-      "closeBtn": "Zapri"
-    },
-    "autocomplete": {
-      "createNewBtn": "Ustvari"
-    },
-    "password": {
-      "reveal": "Prikaži geslo",
-      "hide": "Skrij geslo"
-    },
-    "textEditor": {
-      "textStyle": {
-        "label": "Vrsta besedila",
-        "normal": "Normalni tekst",
-        "heading1": "Naslov 1",
-        "heading2": "Naslov 2",
-        "heading3": "Naslov 3",
-        "heading4": "Naslov 4",
-        "heading5": "Naslov 5",
-        "heading6": "Naslov 6"
-      },
-      "marks": {
-        "bold": "Krepko",
-        "italic": "Poševno",
-        "underline": "Podčrtano",
-        "strikethrough": "Prečrtano"
-      },
-      "textAlign": {
-        "label": "Poravnava besedila",
-        "left": "Levo",
-        "center": "Sredina",
-        "right": "Desno",
-        "justify": "Obojestransko"
-      },
-      "link": {
-        "label": "Povezava",
-        "apply": "Ustvari",
-        "remove": "Odstrani",
-        "urlLabel": "URL",
-        "urlPlaceholder": "Vnesite URL"
-      }
-    },
-    "pagination": {
-      "nextBtn": "Naprej",
-      "backBtn": "Nazaj",
-      "firstBtn": "Prva",
-      "lastBtn": "Zadnja",
-      "resultsPerPage": "Rezultatov na stran"
-    },
-    "confirmation": {
-      "cancel": "Prekliči",
-      "confirm": "Potrdi"
-    },
-    "fileUpload": {
-      "emptyText": "Naloži datoteko",
-      "uploadText": "Povlecite datoteke sem ali",
-      "browse": "Izberi",
-      "noFileUploaded": "Ni datotek",
-      "upload": "Naloži",
-      "uploadFile": "Naloži datoteko",
-      "or": "ali",
-      "removeFile": "Odstrani datoteko",
-      "cancel": "Prekliči"
-    },
-    "table": {
-      "column": "Stolpec",
-      "show": "Prikaži",
-      "configureColumns": "Nastavi stolpce"
-    }
-  },
-  "zodErrors": {
-    "required": "Obvezno",
-    "invalid": "Neveljavno",
-    "string": {
-      "includes": "Mora vključevati \"{{text}}\"",
-      "startsWith": "Se mora začeti z \"{{text}}\"",
-      "endsWith": "Se mora končati z \"{{text}}\"",
-      "constraint": "Neveljaven {{text}}",
-      "contains": "Mora vsebovati natančno {{count}} znak(ov)",
-      "containsAtLeast": "Mora vsebovati vsaj {{count}} znak(ov)",
-      "containsOver": "Mora vsebovati več kot {{count}} znak(ov)",
-      "containsAtMost": "Mora vsebovati največ {{count}} znak(ov)",
-      "containsUnder": "Mora vsebovati manj kot {{count}} znak(ov)"
-    },
-    "array": {
-      "contains": "Polje mora vsebovati natančno {{count}} element(ov)",
-      "containsAtLeast": "Polje mora vsebovati vsaj {{count}} element(ov)",
-      "containsMoreThan": "Polje mora vsebovati več kot {{count}} element(ov)",
-      "containsAtMost": "Polje mora vsebovati največ {{count}} element(ov)",
-      "containsLessThan": "Polje mora vsebovati manj kot {{count}} element(ov)"
-    },
-    "number": {
-      "exact": "Število mora biti natančno enako {{number}}",
-      "greaterThanOrEqual": "Število mora biti večje ali enako {{number}}",
-      "greaterThan": "Število mora biti večje od {{number}}",
-      "over": "Število mora biti nad {{number}}",
-      "lessThanOrEqual": "Število mora biti manjše ali enako {{number}}",
-      "lessThan": "Število mora biti manjše od {{number}}",
-      "multipleOf": "Število mora biti večkratnik števila {{multipleOf}}"
-    },
-    "date": {
-      "invalid": "Neveljaven datum",
-      "exact": "Datum mora biti natančno enak {{date}}",
-      "greaterThanOrEqual": "Datum mora biti večji ali enak {{date}}",
-      "greaterThan": "Datum mora biti večji od {{date}}",
-      "smallerThanOrEqual": "Datum mora biti manjši ali enak {{date}}",
-      "smallerThan": "Datum mora biti manjši od {{date}}"
-    }
-  },
-  "sharedErrors": {
-    "dataValidation": "Pri preverjanju podatkov je prišlo do napake",
-    "internalError": "Prišlo je do notranje napake. ",
-    "networkError": "Prišlo je do napake v omrežju. ",
-    "canceledError": "Zahteva je bila preklicana.",
-    "unknownError": "Prišlo je do neznane napake. "
-  }
-}

package/src/components/Menu/Menu.tsx

@@ -1,29 +0,0 @@
-import type { ReactElement } from "react";
-import type { MenuItemProps } from "react-aria-components";
-
-import { MenuDesktop } from "#ui/components/Menu/MenuDesktop";
-import { MenuMobile } from "#ui/components/Menu/MenuMobile";
-import { useBreakpoint } from "#ui/hooks/useBreakpoint";
-
-export interface MenuItem extends Omit<MenuItemProps, "aria-label" | "textValue" | "children"> {
-  label: string;
-  content?: string | ReactElement;
-  children?: MenuItem[];
-}
-
-export interface MenuProps {
-  trigger: ReactElement;
-  items: MenuItem[];
-  triggerOnHover?: boolean;
-  closeDelay?: number;
-}
-
-export const Menu = (props: MenuProps) => {
-  const isDesktop = useBreakpoint("md");
-
-  if (isDesktop) {
-    return <MenuDesktop {...props} />;
-  }
-
-  return <MenuMobile {...props} />;
-};

package/src/components/Menu/MenuMobile.tsx

@@ -1,81 +0,0 @@
-import { clsx } from "clsx";
-import { useRef, useState } from "react";
-import { Button as AriaButton, Menu as AriaMenu } from "react-aria-components";
-
-import { ArrowLeftIcon } from "#ui/assets/icons/ArrowLeft";
-import type { MenuItem as MenuItemType, MenuProps } from "#ui/components/Menu/Menu";
-import { MenuItem, menuItemClass } from "#ui/components/Menu/MenuItem";
-import { BottomSheet } from "#ui/components/overlays/BottomSheet/BottomSheet";
-
-export const MenuMobile = ({ trigger, items }: MenuProps) => {
-  const activeItemRef = useRef<MenuItemType | null>(null);
-  const activeItemParentsRef = useRef<MenuItemType[]>([]);
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [activeItem, setActiveItem] = useState<MenuItemType | null>(null);
-
-  const onAction = (item: MenuItemType) => {
-    if (!item.children) {
-      activeItemRef.current = null;
-      activeItemParentsRef.current = [];
-      setActiveItem(null);
-      setIsOpen(false);
-      return;
-    }
-
-    if (activeItemRef.current) {
-      activeItemParentsRef.current.push(activeItemRef.current);
-    }
-    activeItemRef.current = item;
-    setActiveItem(activeItemRef.current);
-  };
-
-  const onClose = () => {
-    if (activeItemRef.current) {
-      return;
-    }
-    setIsOpen(false);
-  };
-
-  const onBack = () => {
-    activeItemRef.current = activeItemParentsRef.current.pop() ?? null;
-    setActiveItem(activeItemRef.current);
-  };
-
-  return (
-    <BottomSheet
-      isOpen={isOpen}
-      onOpenChange={setIsOpen}
-      trigger={trigger}
-      isDismissable
-    >
-      {() => (
-        <>
-          {activeItem && (
-            <AriaButton
-              className={clsx(menuItemClass, "!justify-start w-full font-labels-default")}
-              onPress={onBack}
-            >
-              <ArrowLeftIcon className="size-6" />
-              {activeItem.label}
-            </AriaButton>
-          )}
-          <AriaMenu
-            autoFocus
-            onClose={onClose}
-            className="outline-none"
-          >
-            {(activeItem?.children ?? items).map((item, index) => (
-              <MenuItem
-                // oxlint-disable-next-line react/no-array-index-key
-                key={index}
-                {...item}
-                onAction={() => onAction(item)}
-              />
-            ))}
-          </AriaMenu>
-        </>
-      )}
-    </BottomSheet>
-  );
-};

package/src/components/Menu/MenuPopover.tsx

@@ -1,45 +0,0 @@
-import { clsx } from "clsx";
-import {
-  Menu as AriaMenu,
-  Popover as AriaPopover,
-  type PopoverProps as AriaPopoverProps,
-  SubmenuTrigger as AriaSubmenuTrigger,
-} from "react-aria-components";
-
-import type { MenuProps } from "#ui/components/Menu/Menu";
-import { MenuItem } from "#ui/components/Menu/MenuItem";
-
-export interface MenuPopoverProps extends Pick<MenuProps, "items">, AriaPopoverProps {}
-
-export const MenuPopover = ({ items, ...props }: MenuPopoverProps) => {
-  return (
-    <AriaPopover
-      {...props}
-      className={clsx("outline-none", props.className)}
-    >
-      <div className="overflow-hidden rounded-list-rounding-dropdown border border-elevation-outline-default-1 shadow-5 outline-none">
-        <AriaMenu>
-          {items.map((item, index) =>
-            !item.children || item.children.length === 0 ? (
-              <MenuItem
-                // oxlint-disable-next-line react/no-array-index-key
-                key={index}
-                {...item}
-              />
-            ) : (
-              // oxlint-disable-next-line react/no-array-index-key
-              <AriaSubmenuTrigger key={index}>
-                <MenuItem {...item} />
-                <MenuPopover
-                  offset={0}
-                  className="pl-2"
-                  items={item.children}
-                />
-              </AriaSubmenuTrigger>
-            ),
-          )}
-        </AriaMenu>
-      </div>
-    </AriaPopover>
-  );
-};

package/src/components/buttons/Button/Button.tsx

@@ -1,108 +0,0 @@
-import { clsx } from "clsx";
-import type { ElementType, FC, ReactElement, SVGProps } from "react";
-import {
-  Button as AriaButton,
-  type ButtonProps as AriaButtonProps,
-  Link as AriaLink,
-  type LinkProps as AriaLinkProps,
-  ToggleButton as AriaToggleButton,
-  type ToggleButtonProps as AriaToggleButtonProps,
-} from "react-aria-components";
-
-import { ButtonContent } from "#ui/components/buttons/shared/ButtonContent";
-import type { ButtonContentVariantProps } from "#ui/components/buttons/shared/buttonContent.cva";
-import { TooltipEllipsis } from "#ui/components/overlays/Tooltip/TooltipEllipsis";
-import { UIStyle } from "#ui/config/uiStyle.context";
-
-import {
-  type ButtonVariantProps,
-  button,
-  buttonContent,
-  buttonIconSize,
-  buttonSize,
-  buttonTypography,
-} from "./button.cva";
-
-export type ButtonIconProps<IconOnly extends boolean = false> = {
-  iconOnly?: IconOnly;
-} & (IconOnly extends true
-  ? { icon: FC<SVGProps<SVGSVGElement>> | ReactElement }
-  : { icon?: FC<SVGProps<SVGSVGElement>> | ReactElement });
-
-type ToggleButtonProps = { toggle?: false } | ({ toggle: true; isSelected?: boolean } & AriaToggleButtonProps);
-
-export type ButtonProps<IconOnly extends boolean = false> = ButtonVariantProps &
-  ButtonContentVariantProps &
-  AriaButtonProps &
-  ButtonIconProps<IconOnly> &
-  ToggleButtonProps & {
-    children: string;
-    isLoading?: boolean;
-    link?: AriaLinkProps;
-    noDisableWhenLoading?: boolean;
-    iconClassName?: string;
-    disableTooltip?: boolean;
-  };
-
-export const Button = <IconOnly extends boolean = false>({
-  icon: Icon,
-  iconPosition,
-  children,
-  isLoading,
-  className,
-  link,
-  iconClassName,
-  noDisableWhenLoading,
-  disableTooltip,
-  ...props
-}: ButtonProps<IconOnly>) => {
-  const uiStyle = UIStyle.useConfig();
-  const buttonCva = (uiStyle?.button?.cva ?? button) as unknown as UIStyle.Cva<ButtonVariantProps>;
-  const buttonSizeCva = (uiStyle?.button?.sizeCva ?? buttonSize) as unknown as UIStyle.Cva<
-    ButtonVariantProps & { iconOnly?: boolean }
-  >;
-  const buttonContentCva = (uiStyle?.button?.contentCva ??
-    buttonContent) as unknown as UIStyle.Cva<ButtonContentVariantProps>;
-  const buttonIconSizeCva = (uiStyle?.button?.iconSize ?? buttonIconSize) as unknown as UIStyle.Cva<
-    Pick<ButtonVariantProps, "size">
-  >;
-  const typographyMap = uiStyle?.button?.typography ?? buttonTypography;
-
-  const Component: ElementType = (() => {
-    if (link) {
-      return AriaLink;
-    }
-    if (props.toggle != null) {
-      return AriaToggleButton;
-    }
-    return AriaButton;
-  })();
-
-  return (
-    <TooltipEllipsis
-      text={children}
-      isDisabled={disableTooltip}
-    >
-      {(onContentRef) => (
-        <Component
-          {...props}
-          {...link}
-          isDisabled={props.isDisabled || (isLoading && !noDisableWhenLoading)}
-          className={clsx(buttonCva({ ...props, className }), buttonSizeCva({ ...props }))}
-        >
-          <ButtonContent
-            isLoading={isLoading}
-            icon={Icon}
-            text={children}
-            ref={onContentRef}
-            hideText={props.iconOnly}
-            iconPosition={iconPosition}
-            iconClassName={buttonIconSizeCva({ ...props, className: iconClassName })}
-            className={buttonContentCva({ ...props, iconPosition: !Icon ? "none" : iconPosition })}
-            typography={typographyMap({ ...props })}
-          />
-        </Component>
-      )}
-    </TooltipEllipsis>
-  );
-};

package/src/components/buttons/IconButton/IconButton.tsx

@@ -1,25 +0,0 @@
-import type { FC, ReactElement, SVGProps } from "react";
-import type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from "react-aria-components";
-
-import { Button } from "#ui/components/buttons/Button/Button";
-import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
-
-export interface IconButtonProps extends ButtonVariantProps, Omit<AriaButtonProps, "children"> {
-  label: string;
-  icon: FC<SVGProps<SVGSVGElement>> | ReactElement;
-  link?: AriaLinkProps;
-  disableTooltip?: boolean;
-}
-
-export const IconButton = ({ label, ...props }: IconButtonProps) => {
-  return (
-    <Button
-      {...props}
-      iconOnly
-      width="hug"
-      disableTooltip={props.disableTooltip}
-    >
-      {label}
-    </Button>
-  );
-};

package/src/components/buttons/InlineIconButton/InlineIconButton.tsx

@@ -1,27 +0,0 @@
-import type { FC, ReactElement, RefObject, SVGProps } from "react";
-import type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from "react-aria-components";
-
-import { Button } from "#ui/components/buttons/Button/Button";
-import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
-
-export interface InlineIconButtonProps extends Omit<AriaButtonProps, "children">, ButtonVariantProps {
-  label: string;
-  icon: FC<SVGProps<SVGSVGElement>> | ReactElement;
-  link?: AriaLinkProps;
-  ref?: RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
-  disableTooltip?: boolean;
-}
-
-export const InlineIconButton = ({ label, ...props }: InlineIconButtonProps) => {
-  return (
-    <Button
-      {...props}
-      iconOnly
-      variant="text"
-      size="xxs"
-      width="hug"
-    >
-      {label}
-    </Button>
-  );
-};