@pismo/marola 0.0.1-alpha.9 → 1.0.0-beta.0

package/dist/components/InputSearch/InputSearch.js

@@ -1,29 +1,34 @@
 import '../../assets/InputSearch.css';
-import { jsx as t } from "react/jsx-runtime";
-import { c as r } from "../../clsx-DB4S2d7J.js";
+import { jsx as e } from "react/jsx-runtime";
+import { c as m } from "../../clsx-DB4S2d7J.js";
 import { Icon as p } from "../Icon/Icon.js";
-import { Input as m } from "../Input/Input.js";
-const u = "_inputSearch_8ayrz_1", a = {
-  inputSearch: u
-}, I = ({
-  label: n,
-  placeholder: c,
-  classNameWrapper: s,
-  classNameInputSearch: e,
-  disabled: i,
-  "data-testid": o
-}) => /* @__PURE__ */ t("div", { className: r(a.inputSearch, s), children: /* @__PURE__ */ t(
-  m,
-  {
-    label: n,
-    type: "search",
-    placeholder: c,
-    leftIcon: /* @__PURE__ */ t(p, { icon: "magnifying-glass" }),
-    "data-testid": o,
-    disabled: i,
-    classNameInput: r(a.input, e)
-  }
-) });
+import { Input as u } from "../Input/Input.js";
+const l = "_inputSearch_114e1_1", h = {
+  inputSearch: l
+};
+let n;
+const d = ({
+  classNameWrapper: r,
+  triggerDelay: o = 500,
+  value: c,
+  onChange: i = () => {
+  },
+  ...a
+}) => {
+  const s = (t) => {
+    n && clearTimeout(n), n = setTimeout(() => i(t), o);
+  };
+  return /* @__PURE__ */ e("div", { className: m(h.inputSearch, r), children: /* @__PURE__ */ e(
+    u,
+    {
+      type: "search",
+      ...a,
+      leftIcon: /* @__PURE__ */ e(p, { icon: "magnifying-glass" }),
+      defaultValue: c,
+      onChange: (t) => s(t)
+    }
+  ) });
+};
 export {
-  I as InputSearch
+  d as InputSearch
 };

package/dist/components/InputSearch/InputSearch.stories.d.ts

@@ -2,12 +2,28 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ label, placeholder, classNameWrapper, classNameInputSearch, disabled, "data-testid": dataTestId, }: import('react').InputHTMLAttributes<HTMLInputElement> & {
+    component: ({ classNameWrapper, triggerDelay, value, onChange, ...rest }: {
+        triggerDelay?: number | undefined;
+    } & import('react').InputHTMLAttributes<HTMLInputElement> & {
         label?: string | undefined;
-        placeholder?: string | undefined;
+        infoMessage?: string | undefined;
+        errorMessage?: string | undefined;
+        leftIcon?: import('react').ReactNode;
+        rightIcon?: import('react').ReactNode;
+        type?: "search" | "text" | "password" | undefined;
+        hideCharsCounter?: boolean | undefined;
         classNameWrapper?: string | undefined;
-        classNameInputSearch?: string | undefined;
-        'data-testid'?: string | undefined;
+        classNameLabel?: string | undefined;
+        classNameInput?: string | undefined;
+        classNameInfoMessage?: string | undefined;
+        classNameErrorMessage?: string | undefined;
+        classNameCharsCounter?: string | undefined;
+        'data-testid-wrapper'?: string | undefined;
+        'data-testid-label'?: string | undefined;
+        'data-testid-input'?: string | undefined;
+        'data-testid-infoMessage'?: string | undefined;
+        'data-testid-errorMessage'?: string | undefined;
+        'data-testid-charsCounter'?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
@@ -18,5 +34,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
 export declare const WithLabel: Story;
+export declare const WithCustomDelay: Story;
 export declare const WithPlaceholder: Story;
 export declare const Disabled: Story;

package/dist/components/LoadingSpinner/LoadingSpinner.d.ts

@@ -1,7 +1,7 @@
 export interface LoadingSpinnerProps {
     /** Whether to invert colours or not */
     invert?: boolean;
-    /** Space seperated list of CSS classes to apply */
+    /** Space separated list of CSS classes to apply */
     classNames?: string;
 }
 export declare const LoadingSpinner: ({ invert, classNames }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PageHeader/PageHeader.d.ts

@@ -1,14 +1,33 @@
 import { RequireAllOrNone } from '../../types/helpers';
 import { ReactNode } from 'react';
 
+type BreadcrumbItem = {
+    /** Breadcrumb item label */
+    label: string;
+    /** Id to be applied as `data-testid` on the breadcrumb item */
+    'data-testid'?: string;
+    /** CSS classes to be applied on the breadcrumb item */
+    className?: string;
+    /** Callback called when the breadcrumb item is clicked */
+    onClick: () => void;
+};
+type LastBreadcrumbItem = Omit<BreadcrumbItem, 'onClick'> & {
+    /** Callback called when the breadcrumb item is clicked */
+    onClick?: () => void;
+};
 type PageHeaderCommonProps = {
     /** Title text */
     title: string;
     /** Subtitle text */
     subtitle?: string;
-    /** Back link text */
+    /** Back link text
+     * @deprecated Use breadcrumb prop instead.
+     */
     backLinkText?: string;
-    /** Callback called when `back link` is clicked */
+    /**
+     * Callback called when `back link` is clicked
+     * @deprecated Use breadcrumb prop instead.
+     * */
     onBackLinkClick?: () => void;
     /** Element to be rendered on the right slot of the component */
     rightChildren?: ReactNode;
@@ -16,7 +35,10 @@ type PageHeaderCommonProps = {
     bottomChildren?: ReactNode;
     /** CSS classes to be applied on the container element */
     classNameWrapper?: string;
-    /** CSS classes to be applied on the back link element */
+    /**
+     * CSS classes to be applied on the back link element
+     * @deprecated Use breadcrumb prop instead.
+     * */
     classNameBackLink?: string;
     /** CSS classes to be applied on the title element */
     classNameTitle?: string;
@@ -24,13 +46,21 @@ type PageHeaderCommonProps = {
     classNameSubtitle?: string;
     /** Id to be applied as `data-testid` on the container element */
     'data-testid-wrapper'?: string;
-    /** Id to be applied as `data-testid` on the back link element */
+    /**
+     * Id to be applied as `data-testid` on the back link element
+     * @deprecated Use breadcrumb prop instead.
+     * */
     'data-testid-backLink'?: string;
     /** Id to be applied as `data-testid` on the title element */
     'data-testid-title'?: string;
     /** Id to be applied as `data-testid` on the subtitle element */
     'data-testid-subtitle'?: string;
+    breadcrumb?: never;
+};
+type PageHeaderWithBreadcrumb = Omit<PageHeaderCommonProps, 'backLinkText' | 'onBackLinkClick' | 'classNameBackLink' | 'data-testid-backLink' | 'breadcrumb'> & {
+    /** List of breadcrumbs to be rendered at the top of the title */
+    breadcrumb?: [...BreadcrumbItem[], LastBreadcrumbItem];
 };
-type PageHeaderProps = RequireAllOrNone<PageHeaderCommonProps, 'backLinkText' | 'onBackLinkClick'>;
-export declare const PageHeader: ({ title, subtitle, backLinkText, onBackLinkClick, rightChildren, bottomChildren, classNameWrapper, classNameBackLink, classNameTitle, classNameSubtitle, "data-testid-wrapper": wrapperTestId, "data-testid-backLink": backLinkTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, ...rest }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export type PageHeaderProps = RequireAllOrNone<PageHeaderCommonProps, 'backLinkText' | 'onBackLinkClick'> | PageHeaderWithBreadcrumb;
+export declare const PageHeader: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, ...props }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/PageHeader/PageHeader.js

@@ -1,51 +1,87 @@
 import '../../assets/PageHeader.css';
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { c as r } from "../../clsx-DB4S2d7J.js";
-import * as _ from "react";
-const z = (n) => /* @__PURE__ */ _.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", "data-waves-icon": "fa/solid/arrow-left", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
-  fill: "currentcolor",
-  color: "currentcolor",
-  width: "1em",
-  height: "1em"
-}, ...n }, /* @__PURE__ */ _.createElement("path", { d: "M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z" })), b = "_title_157kz_45", k = "_subtitle_157kz_46", e = {
-  "page-header": "_page-header_157kz_1",
-  "page-header__top-content": "_page-header__top-content_157kz_9",
-  "page-header__main-content": "_page-header__main-content_157kz_12",
-  "page-header__bottom-content": "_page-header__bottom-content_157kz_12",
-  "page-header__main-left-content": "_page-header__main-left-content_157kz_39",
-  title: b,
-  subtitle: k,
-  "page-header__main-right-content": "_page-header__main-right-content_157kz_63"
-}, C = ({
-  title: n,
-  subtitle: d,
-  backLinkText: c,
-  onBackLinkClick: s,
-  rightChildren: i,
-  bottomChildren: o,
-  classNameWrapper: l,
-  classNameBackLink: h,
-  classNameTitle: m,
-  classNameSubtitle: p,
-  "data-testid-wrapper": g,
-  "data-testid-backLink": f,
-  "data-testid-title": u,
-  "data-testid-subtitle": v,
-  ...w
-}) => /* @__PURE__ */ a("div", { className: r([e["page-header"], l]), "data-testid": g, ...w, children: [
-  c && /* @__PURE__ */ t("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ a("button", { type: "button", onClick: s, className: h, "data-testid": f, children: [
-    /* @__PURE__ */ t(z, { fontSize: 16 }),
-    c
-  ] }) }),
-  /* @__PURE__ */ a("div", { className: e["page-header__main-content"], children: [
-    /* @__PURE__ */ a("div", { className: e["page-header__main-left-content"], children: [
-      /* @__PURE__ */ t("h1", { className: r(e.title, m), "data-testid": u, children: n }),
-      /* @__PURE__ */ t("h2", { className: r(e.subtitle, p), "data-testid": v, children: d })
+import { jsx as a, jsxs as h } from "react/jsx-runtime";
+import { useMemo as L } from "react";
+import { c as n } from "../../clsx-DB4S2d7J.js";
+import { Icon as B } from "../Icon/Icon.js";
+import { IconButton as C } from "../IconButton/IconButton.js";
+const j = "_title_z7ezb_22", w = "_subtitle_z7ezb_43", e = {
+  "u-typography-h1": "_u-typography-h1_z7ezb_1",
+  "u-typography-h2": "_u-typography-h2_z7ezb_8",
+  "u-typography-h3": "_u-typography-h3_z7ezb_15",
+  "u-typography-h4": "_u-typography-h4_z7ezb_22",
+  "page-header__main-left-content": "_page-header__main-left-content_z7ezb_22",
+  title: j,
+  "u-typography-h5": "_u-typography-h5_z7ezb_29",
+  "u-typography-h6": "_u-typography-h6_z7ezb_36",
+  "u-typography-base": "_u-typography-base_z7ezb_43",
+  subtitle: w,
+  "u-typography-base--xxl": "_u-typography-base--xxl_z7ezb_48",
+  "u-typography-base--xl": "_u-typography-base--xl_z7ezb_52",
+  "u-typography-base--lg": "_u-typography-base--lg_z7ezb_56",
+  "u-typography-base--sm": "_u-typography-base--sm_z7ezb_60",
+  "u-typography-base--bold": "_u-typography-base--bold_z7ezb_64",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_z7ezb_67",
+  "u-typography-base--underlined": "_u-typography-base--underlined_z7ezb_70",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_z7ezb_73",
+  "page-header": "_page-header_z7ezb_22",
+  "page-header__top-content": "_page-header__top-content_z7ezb_86",
+  "page-header__main-content": "_page-header__main-content_z7ezb_89",
+  "page-header__bottom-content": "_page-header__bottom-content_z7ezb_89",
+  "page-header__breadcrumb": "_page-header__breadcrumb_z7ezb_103",
+  "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_z7ezb_108",
+  "page-header__main-right-content": "_page-header__main-right-content_z7ezb_131"
+}, P = ({
+  title: l,
+  subtitle: g,
+  rightChildren: d,
+  bottomChildren: b,
+  classNameWrapper: y,
+  classNameTitle: u,
+  classNameSubtitle: z,
+  "data-testid-wrapper": m,
+  "data-testid-title": k,
+  "data-testid-subtitle": N,
+  ...f
+}) => {
+  const {
+    breadcrumb: r,
+    backLinkText: p,
+    onBackLinkClick: s,
+    classNameBackLink: c,
+    "data-testid-backLink": i,
+    ...x
+  } = f, v = L(() => {
+    const _ = [];
+    return p && s && _.push({
+      label: p,
+      className: c,
+      "data-testid": i,
+      onClick: s
+    }), r && _.push(...r), /* @__PURE__ */ a("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ a("div", { className: e["page-header__breadcrumb"], children: _.map((t, o) => /* @__PURE__ */ a(
+      C,
+      {
+        icon: o === 0 ? /* @__PURE__ */ a(B, { icon: "arrow-left" }) : /* @__PURE__ */ a("span", { className: e["page-header__breadcrumb__separator"], children: "/" }),
+        onClick: () => t.onClick && t.onClick(),
+        className: t.className,
+        "data-testid": t["data-testid"],
+        disabled: _.length === 1 ? !1 : o === _.length - 1,
+        children: t.label
+      },
+      `${t.label}_${o}`
+    )) }) });
+  }, [r, p, c, i, s]);
+  return /* @__PURE__ */ h("div", { className: n([e["page-header"], y]), "data-testid": m, ...x, children: [
+    v,
+    /* @__PURE__ */ h("div", { className: e["page-header__main-content"], children: [
+      /* @__PURE__ */ h("div", { className: e["page-header__main-left-content"], children: [
+        /* @__PURE__ */ a("h1", { className: n(e.title, u), "data-testid": k, children: l }),
+        /* @__PURE__ */ a("h2", { className: n(e.subtitle, z), "data-testid": N, children: g })
+      ] }),
+      d && /* @__PURE__ */ a("div", { className: e["page-header__main-right-content"], children: d })
     ] }),
-    i && /* @__PURE__ */ t("div", { className: e["page-header__main-right-content"], children: i })
-  ] }),
-  o && /* @__PURE__ */ t("div", { className: e["page-header__bottom-content"], children: o })
-] });
+    b && /* @__PURE__ */ a("div", { className: e["page-header__bottom-content"], children: b })
+  ] });
+};
 export {
-  C as PageHeader
+  P as PageHeader
 };

package/dist/components/PageHeader/PageHeader.stories.d.ts

@@ -2,42 +2,13 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ title, subtitle, backLinkText, onBackLinkClick, rightChildren, bottomChildren, classNameWrapper, classNameBackLink, classNameTitle, classNameSubtitle, "data-testid-wrapper": wrapperTestId, "data-testid-backLink": backLinkTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, ...rest }: (Required<Pick<{
-        title: string;
-        subtitle?: string | undefined;
-        backLinkText?: string | undefined;
-        onBackLinkClick?: (() => void) | undefined;
-        rightChildren?: import('react').ReactNode;
-        bottomChildren?: import('react').ReactNode;
-        classNameWrapper?: string | undefined;
-        classNameBackLink?: string | undefined;
-        classNameTitle?: string | undefined;
-        classNameSubtitle?: string | undefined;
-        'data-testid-wrapper'?: string | undefined;
-        'data-testid-backLink'?: string | undefined;
-        'data-testid-title'?: string | undefined;
-        'data-testid-subtitle'?: string | undefined;
-    }, "backLinkText" | "onBackLinkClick">> | Partial<Record<"backLinkText" | "onBackLinkClick", never>>) & Omit<{
-        title: string;
-        subtitle?: string | undefined;
-        backLinkText?: string | undefined;
-        onBackLinkClick?: (() => void) | undefined;
-        rightChildren?: import('react').ReactNode;
-        bottomChildren?: import('react').ReactNode;
-        classNameWrapper?: string | undefined;
-        classNameBackLink?: string | undefined;
-        classNameTitle?: string | undefined;
-        classNameSubtitle?: string | undefined;
-        'data-testid-wrapper'?: string | undefined;
-        'data-testid-backLink'?: string | undefined;
-        'data-testid-title'?: string | undefined;
-        'data-testid-subtitle'?: string | undefined;
-    }, "backLinkText" | "onBackLinkClick">) => import("react/jsx-runtime").JSX.Element;
+    component: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, ...props }: import('./PageHeader').PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
 export declare const WithBackLink: Story;
+export declare const WithBreadcrumb: Story;
 export declare const WithRightChildren: Story;
 export declare const WithBottomChildren: Story;

package/dist/components/Pagination/Pagination.d.ts

@@ -1,36 +1,55 @@
 export type PaginationParams = {
+    /** Total number of items to paginate */
     totalItems: number;
+    /** Number of items to show per page */
     perPage: number;
+    /** Current page */
     currentPage: number;
 };
 export type PaginationTranslations = {
+    /** Translation text for `showing` */
     showing: string;
+    /** Translation text for `of` */
     of: string;
+    /** Translation text for `result` */
     results: string;
+    /** Translation text for `previous` */
     previous: string;
+    /** Translation text for `next` */
     next: string;
 };
 type PaginationLanguages = 'pt' | 'en';
 type PaginationCommonProps = {
+    /** CSS classes to be applied on the container element */
     className?: string;
-    'data-testid'?: string;
+    /** CSS classes to be applied on the per page element */
     classNamePerPage?: string;
-    'data-testid__per-page'?: string;
+    /** CSS classes to be applied on the pages navigation element */
     classNamePagesNav?: string;
-    'data-testid__pages-nav'?: string;
+    /** Id to be applied as `data-testid` on the container element */
+    'data-testid'?: string;
+    /** Id to be applied as `data-testid` on per page element */
+    'data-testid-per-page'?: string;
+    /** Id to be applied as `data-testid` on the pages navigation element */
+    'data-testid-pages-nav'?: string;
 };
 export type PaginationProps = {
+    /** Array of options to be rendered as per page options. */
     perPageOptions?: (number | {
         value: number;
         label: string;
     })[] | undefined;
+    /** Callback called when page changes. */
     onPageChange: (page: number) => void;
-    onRowsPerPageChange: (perPage: number | string) => void;
+    /** Callback called when items per page changes. */
+    onRowsPerPageChange: (perPage: number) => void;
+    /** Language to be used for texts. */
     language?: PaginationLanguages;
+    /** Custom translation object to be used for texts. */
     t?: PaginationTranslations;
 } & PaginationParams & PaginationCommonProps;
 export declare const paginationDefaultTranslations: {
     [key in PaginationLanguages]: PaginationTranslations;
 };
-export declare const Pagination: (props: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Pagination: ({ perPageOptions, language, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
 export {};