@pismo/marola 0.0.1-alpha.1 → 0.0.1-alpha.11

package/dist/components/Input/Input.stories.js

@@ -0,0 +1,106 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useState as t } from "react";
+import { Input as n } from "./Input.js";
+const m = {
+  title: "Components/Input",
+  component: n,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded"
+  }
+}, g = {
+  args: {}
+}, u = {
+  name: "With label",
+  args: {
+    label: "What is your name?"
+  }
+}, W = {
+  name: "With placeholder",
+  args: {
+    label: "What is your name?",
+    placeholder: "What is your name?"
+  }
+}, d = {
+  args: {
+    label: "What is your name?",
+    value: "Marola DS",
+    disabled: !0
+  }
+}, p = {
+  name: "With max length",
+  args: {
+    label: "What is your name?",
+    infoMessage: "Text length counter",
+    maxLength: 10
+  }
+}, y = {
+  name: "With max length and no chars counter",
+  args: {
+    label: "What is your name?",
+    infoMessage: "Text length counter",
+    maxLength: 10,
+    hideCharsCounter: !0
+  }
+}, f = {
+  name: "With left icon",
+  args: {
+    label: "What is your name?",
+    placeholder: "Hey, I have an icon!",
+    leftIcon: "😁"
+  }
+}, b = {
+  name: "With right icon and click event",
+  render: () => {
+    const [o, s] = t(""), [r, h] = t(!1);
+    return /* @__PURE__ */ a(
+      n,
+      {
+        label: "What is your name?",
+        placeholder: "What is your name?",
+        type: r ? "text" : "password",
+        rightIcon: /* @__PURE__ */ a("span", { style: { cursor: "pointer" }, onClick: () => h((e) => !e), children: "😁" }),
+        value: o,
+        onChange: (e) => s(e.target.value),
+        infoMessage: "Type something and click on the icon"
+      }
+    );
+  }
+}, x = {
+  name: "With both icons",
+  args: {
+    label: "What is your name?",
+    placeholder: "Hey, I have icons!",
+    leftIcon: "😁",
+    rightIcon: "😁"
+  }
+}, I = {
+  name: "With info message",
+  args: {
+    label: "What is your name?",
+    placeholder: "What is your name?",
+    infoMessage: "The name must have less than 50 chars"
+  }
+}, M = {
+  name: "With error message",
+  args: {
+    label: "What is your name?",
+    placeholder: "What is your name?",
+    infoMessage: "The name must have less than 50 chars",
+    errorMessage: "Invalid name"
+  }
+};
+export {
+  d as Disabled,
+  g as Simple,
+  x as WithBothIcons,
+  M as WithErrorMessage,
+  I as WithInfoMessage,
+  u as WithLabel,
+  f as WithLeftIcon,
+  p as WithMaxLength,
+  y as WithMaxLengthAndHideCharsCounter,
+  W as WithPlaceholder,
+  b as WithRightIconAndClickEvent,
+  m as default
+};

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

@@ -0,0 +1,11 @@
+import { InputHTMLAttributes } from 'react';
+
+type InputSearchProps = InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+    placeholder?: string;
+    classNameWrapper?: string;
+    classNameInputSearch?: string;
+    'data-testid'?: string;
+};
+export declare const InputSearch: ({ label, placeholder, classNameWrapper, classNameInputSearch, disabled, "data-testid": dataTestId, }: InputSearchProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/InputSearch/InputSearch.js

@@ -0,0 +1,29 @@
+import '../../assets/InputSearch.css';
+import { jsx as t } from "react/jsx-runtime";
+import { c as r } 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)
+  }
+) });
+export {
+  I as InputSearch
+};

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

@@ -0,0 +1,22 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ label, placeholder, classNameWrapper, classNameInputSearch, disabled, "data-testid": dataTestId, }: import('react').InputHTMLAttributes<HTMLInputElement> & {
+        label?: string | undefined;
+        placeholder?: string | undefined;
+        classNameWrapper?: string | undefined;
+        classNameInputSearch?: string | undefined;
+        'data-testid'?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithLabel: Story;
+export declare const WithPlaceholder: Story;
+export declare const Disabled: Story;

package/dist/components/InputSearch/InputSearch.stories.js

@@ -0,0 +1,36 @@
+import { InputSearch as a } from "./InputSearch.js";
+const l = {
+  title: "Components/InputSearch",
+  component: a,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded"
+  }
+}, r = {
+  args: {}
+}, t = {
+  name: "With label",
+  args: {
+    label: "Search by name or id"
+  }
+}, o = {
+  name: "With placeholder",
+  args: {
+    label: "Search",
+    placeholder: "Search by name or id"
+  }
+}, c = {
+  args: {
+    label: "Search",
+    placeholder: "Search by name or id",
+    value: "Marola DS",
+    disabled: !0
+  }
+};
+export {
+  c as Disabled,
+  r as Simple,
+  t as WithLabel,
+  o as WithPlaceholder,
+  l as default
+};

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

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

package/dist/components/LoadingSpinner/LoadingSpinner.js

@@ -1,17 +1,16 @@
 import '../../assets/LoadingSpinner.css';
-import { jsxs as o, jsx as s } from "react/jsx-runtime";
-import { useMemo as e } from "react";
+import { jsxs as e, jsx as s } from "react/jsx-runtime";
+import { useMemo as o } from "react";
 import { c as t } from "../../clsx-DB4S2d7J.js";
 const n = {
-  "ls-ring": "_ls-ring_19dsy_1",
-  "ls-ring--invert": "_ls-ring--invert_19dsy_34"
-}, c = ({ invert: i = !1, classNames: r }) => {
-  const l = e(() => t(
-    [n["ls-ring"]],
-    { [n["ls-ring--invert"]]: i },
-    r
-  ), [r, i]);
-  return /* @__PURE__ */ o("div", { className: l, children: [
+  "ls-ring": "_ls-ring_elvjz_1",
+  "ls-ring--invert": "_ls-ring--invert_elvjz_34"
+}, a = ({ invert: i = !1, classNames: r }) => {
+  const l = o(
+    () => t([n["ls-ring"]], { [n["ls-ring--invert"]]: i }, r),
+    [r, i]
+  );
+  return /* @__PURE__ */ e("div", { className: l, children: [
     /* @__PURE__ */ s("div", {}),
     /* @__PURE__ */ s("div", {}),
     /* @__PURE__ */ s("div", {}),
@@ -19,6 +18,6 @@ const n = {
   ] });
 };
 export {
-  c as LoadingSpinner,
-  c as default
+  a as LoadingSpinner,
+  a as default
 };

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

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ invert, classNames }: import('./LoadingSpinner').LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        invert?: boolean | undefined;
+        classNames?: string | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;

package/dist/components/LoadingSpinner/LoadingSpinner.stories.js

@@ -0,0 +1,38 @@
+import '../../assets/global.css';
+import { jsx as t } from "react/jsx-runtime";
+/* empty css                    */
+import "../Button/Button.js";
+import "react";
+import "../Dialog/Backdrop.js";
+import "../Typography/Typography.js";
+import "../IconButton/IconButton.js";
+import { LoadingSpinner as i } from "./LoadingSpinner.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+const g = {
+  title: "Components/LoadingSpinner",
+  component: i,
+  tags: ["autodocs"],
+  decorators: [
+    (o) => /* @__PURE__ */ t(
+      "div",
+      {
+        style: {
+          backgroundColor: "#423755",
+          width: "5em",
+          height: "5em",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ t(o, {})
+      }
+    )
+  ]
+}, f = {
+  args: {}
+};
+export {
+  f as Simple,
+  g as default
+};

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

@@ -0,0 +1,36 @@
+import { RequireAllOrNone } from '../../types/helpers';
+import { ReactNode } from 'react';
+
+type PageHeaderCommonProps = {
+    /** Title text */
+    title: string;
+    /** Subtitle text */
+    subtitle?: string;
+    /** Back link text */
+    backLinkText?: string;
+    /** Callback called when `back link` is clicked */
+    onBackLinkClick?: () => void;
+    /** Element to be rendered on the right slot of the component */
+    rightChildren?: ReactNode;
+    /** Element to be rendered on the bottom slot of the component */
+    bottomChildren?: ReactNode;
+    /** CSS classes to be applied on the container element */
+    classNameWrapper?: string;
+    /** CSS classes to be applied on the back link element */
+    classNameBackLink?: string;
+    /** CSS classes to be applied on the title element */
+    classNameTitle?: string;
+    /** CSS classes to be applied on the subtitle element */
+    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 */
+    '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;
+};
+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 {};

package/dist/components/PageHeader/PageHeader.js

@@ -0,0 +1,51 @@
+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 })
+    ] }),
+    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 })
+] });
+export {
+  C as PageHeader
+};

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

@@ -0,0 +1,43 @@
+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;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithBackLink: Story;
+export declare const WithRightChildren: Story;
+export declare const WithBottomChildren: Story;

package/dist/components/PageHeader/PageHeader.stories.js

@@ -0,0 +1,49 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Button as r } from "../Button/Button.js";
+import { T as e } from "../../Tab-CRwnhsj5.js";
+import { TabPanel as a } from "../Tabs/TabPanel.js";
+import { Tabs as o } from "../Tabs/Tabs.js";
+import { PageHeader as l } from "./PageHeader.js";
+const g = {
+  title: "Components/PageHeader",
+  component: l,
+  tags: ["autodocs"]
+}, c = {
+  args: {
+    title: "Marola Design System",
+    subtitle: "A Pismo design system"
+  }
+}, i = {
+  name: "With back link",
+  args: {
+    ...c.args,
+    backLinkText: "Back",
+    onBackLinkClick: () => alert("Back button clicked!")
+  }
+}, u = {
+  name: "With right children",
+  args: {
+    ...i.args,
+    rightChildren: /* @__PURE__ */ t(r, { variant: "quick", onClick: () => alert("button clicked"), children: "Click me!" })
+  }
+}, T = {
+  name: "With bottom children",
+  args: {
+    ...i.args,
+    bottomChildren: /* @__PURE__ */ n(o, { children: [
+      /* @__PURE__ */ t(e, { value: "1", children: "Tab 1" }),
+      /* @__PURE__ */ t(e, { value: "2", children: "Tab 2" }),
+      /* @__PURE__ */ t(e, { value: "3", children: "Tab 3" }),
+      /* @__PURE__ */ t(a, { value: "1", children: "Tab 1 content" }),
+      /* @__PURE__ */ t(a, { value: "2", children: "Tab 2 content" }),
+      /* @__PURE__ */ t(a, { value: "3", children: "Tab 3 content" })
+    ] })
+  }
+};
+export {
+  c as Simple,
+  i as WithBackLink,
+  T as WithBottomChildren,
+  u as WithRightChildren,
+  g as default
+};

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

@@ -0,0 +1,36 @@
+export type PaginationParams = {
+    totalItems: number;
+    perPage: number;
+    currentPage: number;
+};
+export type PaginationTranslations = {
+    showing: string;
+    of: string;
+    results: string;
+    previous: string;
+    next: string;
+};
+type PaginationLanguages = 'pt' | 'en';
+type PaginationCommonProps = {
+    className?: string;
+    'data-testid'?: string;
+    classNamePerPage?: string;
+    'data-testid__per-page'?: string;
+    classNamePagesNav?: string;
+    'data-testid__pages-nav'?: string;
+};
+export type PaginationProps = {
+    perPageOptions?: (number | {
+        value: number;
+        label: string;
+    })[] | undefined;
+    onPageChange: (page: number) => void;
+    onRowsPerPageChange: (perPage: number | string) => void;
+    language?: PaginationLanguages;
+    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 {};