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

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

@@ -1,11 +1,9 @@
-import { InputHTMLAttributes } from 'react';
+import { Input } from '../Input/Input';
+import { ComponentProps } 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;
+type InputSearchProps = {
+    /** How many milliseconds to wait before trigger the onChange event */
+    triggerDelay?: number;
+} & ComponentProps<typeof Input>;
+export declare const InputSearch: ({ classNameWrapper, triggerDelay, value, onChange, ...rest }: InputSearchProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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 { 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 { jsx as e } from "react/jsx-runtime";
+import { c as m } from "../../clsx-DB4S2d7J.js";
+import { Icon as u } from "../Icon/Icon.js";
+import { Input as p } from "../Input/Input.js";
+const l = "_inputSearch_lmxu2_1", h = {
+  inputSearch: l
+};
+let n;
+const x = ({
+  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(
+    p,
+    {
+      type: "search",
+      ...a,
+      leftIcon: /* @__PURE__ */ e(u, { icon: "magnifying-glass" }),
+      defaultValue: c,
+      onChange: (t) => s(t)
+    }
+  ) });
+};
 export {
-  I as InputSearch
+  x 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/InputSearch/InputSearch.stories.js

@@ -1,25 +1,61 @@
-import { InputSearch as a } from "./InputSearch.js";
-const l = {
+import { jsx as o } from "react/jsx-runtime";
+import { useState as l, useEffect as n } from "react";
+import { InputSearch as t } from "./InputSearch.js";
+const d = {
   title: "Components/InputSearch",
-  component: a,
+  component: t,
   tags: ["autodocs"],
   parameters: {
     layout: "padded"
   }
-}, r = {
-  args: {}
-}, t = {
+}, h = {
+  render: () => {
+    const [e, a] = l(void 0);
+    return n(() => {
+      e !== void 0 && alert("Search triggered after 500 milliseconds");
+    }, [e]), /* @__PURE__ */ o(t, { value: e, onChange: (r) => a(r.target.value) });
+  }
+}, m = {
   name: "With label",
-  args: {
-    label: "Search by name or id"
+  render: () => {
+    const [e, a] = l(void 0);
+    return n(() => {
+      e !== void 0 && alert("Search triggered after 500 milliseconds");
+    }, [e]), /* @__PURE__ */ o(t, { label: "Search by name or id", value: e, onChange: (r) => a(r.target.value) });
+  }
+}, u = {
+  name: "With custom delay",
+  render: () => {
+    const [e, a] = l(void 0);
+    return n(() => {
+      e !== void 0 && alert("Search triggered after 2000 milliseconds");
+    }, [e]), /* @__PURE__ */ o(
+      t,
+      {
+        label: "Search by name or id",
+        value: e,
+        onChange: (r) => a(r.target.value),
+        triggerDelay: 2e3
+      }
+    );
   }
-}, o = {
+}, g = {
   name: "With placeholder",
-  args: {
-    label: "Search",
-    placeholder: "Search by name or id"
+  render: () => {
+    const [e, a] = l(void 0);
+    return n(() => {
+      e !== void 0 && alert("Search triggered after 500 milliseconds");
+    }, [e]), /* @__PURE__ */ o(
+      t,
+      {
+        label: "Search",
+        placeholder: "Search by name or id",
+        value: e,
+        onChange: (r) => a(r.target.value)
+      }
+    );
   }
-}, c = {
+}, S = {
   args: {
     label: "Search",
     placeholder: "Search by name or id",
@@ -28,9 +64,10 @@ const l = {
   }
 };
 export {
-  c as Disabled,
-  r as Simple,
-  t as WithLabel,
-  o as WithPlaceholder,
-  l as default
+  S as Disabled,
+  h as Simple,
+  u as WithCustomDelay,
+  m as WithLabel,
+  g as WithPlaceholder,
+  d as default
 };

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/LoadingSpinner/LoadingSpinner.stories.js

@@ -1,15 +1,15 @@
-import '../../assets/global.css';
 import { jsx as t } from "react/jsx-runtime";
-/* empty css                    */
+import "../Chip/Chip.js";
 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 "../Select/Select.js";
 import "../Table/Table.js";
 import "../Tabs/Tabs.js";
-const g = {
+const f = {
   title: "Components/LoadingSpinner",
   component: i,
   tags: ["autodocs"],
@@ -29,10 +29,10 @@ const g = {
       }
     )
   ]
-}, f = {
+}, h = {
   args: {}
 };
 export {
-  f as Simple,
-  g as default
+  h as Simple,
+  f as default
 };

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

@@ -1,6 +1,6 @@
 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 { Tab as e } from "../Tabs/Tab.js";
 import { TabPanel as a } from "../Tabs/TabPanel.js";
 import { Tabs as o } from "../Tabs/Tabs.js";
 import { PageHeader as l } from "./PageHeader.js";
@@ -26,7 +26,7 @@ const g = {
     ...i.args,
     rightChildren: /* @__PURE__ */ t(r, { variant: "quick", onClick: () => alert("button clicked"), children: "Click me!" })
   }
-}, T = {
+}, p = {
   name: "With bottom children",
   args: {
     ...i.args,
@@ -43,7 +43,7 @@ const g = {
 export {
   c as Simple,
   i as WithBackLink,
-  T as WithBottomChildren,
+  p as WithBottomChildren,
   u as WithRightChildren,
   g as default
 };

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+
+type SelectOptionProps = {
+    disabled?: boolean;
+    value: string | number;
+    children: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+};
+type SelectProps = {
+    children: ReactNode;
+    disabled?: boolean;
+    placeholder?: string | number;
+    ariaLabelledby?: string;
+    onChange?: (value: number | string | null, event?: React.SyntheticEvent<Element, Event> | null) => void;
+    className?: string;
+    'data-testid'?: string;
+};
+export declare const Option: (props: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: {
+    (props: SelectProps): import("react/jsx-runtime").JSX.Element;
+    Option: (props: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { Select };