@pismo/marola 0.0.1-alpha.16 → 0.0.1-alpha.18

package/dist/components/Dialog/Dialog.stories.js

@@ -1,59 +0,0 @@
-import { jsx as e, Fragment as r, jsxs as i } from "react/jsx-runtime";
-import { useState as d } from "react";
-import "../Chip/Chip.js";
-import { Button as l } from "../Button/Button.js";
-import { Dialog as a } from "./Dialog.js";
-import "../IconButton/IconButton.js";
-import { Typography as n } from "../Typography/Typography.js";
-import "../Select/Select.js";
-import "../Table/Table.js";
-import "../Tabs/Tabs.js";
-import s from "./Content.js";
-import c from "./Actions.js";
-const y = {
-  title: "Components/Dialog",
-  component: a,
-  tags: ["autodocs"],
-  decorators: [
-    (o) => /* @__PURE__ */ e("div", { style: { padding: "1em" }, children: /* @__PURE__ */ e(o, {}) })
-  ]
-};
-function p(o) {
-  const [m, t] = d(!1);
-  return /* @__PURE__ */ i(r, { children: [
-    /* @__PURE__ */ e(l, { onClick: () => t(!0), children: "Open" }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        dialogTitle: o.dialogTitle,
-        dialogSubtitle: o.dialogSubtitle,
-        open: m,
-        onClose: () => {
-          t(!1), o != null && o.onClose && (o == null || o.onClose());
-        },
-        children: /* @__PURE__ */ i(r, { children: [
-          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(n, { element: "p", children: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates eum ipsum, corrupti, quod eveniet non sed recusandae iusto alias consectetur ipsam! Officia doloremque voluptates molestiae, autem maxime soluta? Blanditiis, consequuntur!" }) }),
-          /* @__PURE__ */ i(c, { children: [
-            /* @__PURE__ */ e(l, { onClick: () => t(!1), children: /* @__PURE__ */ e(n, { variant: "button", children: "Cancel" }) }),
-            /* @__PURE__ */ e(l, { onClick: () => t(!1), children: /* @__PURE__ */ e(n, { variant: "button", children: "Submit" }) }),
-            " "
-          ] })
-        ] })
-      }
-    )
-  ] });
-}
-const O = {
-  render: p,
-  args: {
-    dialogTitle: "This is a dialog title",
-    dialogSubtitle: "Here is a dialog sub title",
-    onClose: () => alert("Consider the dialog closed"),
-    children: /* @__PURE__ */ e(r, {}),
-    open: !1
-  }
-};
-export {
-  O as Simple,
-  y as default
-};

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

@@ -1,106 +0,0 @@
-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.stories.js

@@ -1,73 +0,0 @@
-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: t,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "padded"
-  }
-}, 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",
-  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
-      }
-    );
-  }
-}, g = {
-  name: "With placeholder",
-  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)
-      }
-    );
-  }
-}, S = {
-  args: {
-    label: "Search",
-    placeholder: "Search by name or id",
-    value: "Marola DS",
-    disabled: !0
-  }
-};
-export {
-  S as Disabled,
-  h as Simple,
-  u as WithCustomDelay,
-  m as WithLabel,
-  g as WithPlaceholder,
-  d as default
-};

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

@@ -1,38 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-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 f = {
-  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, {})
-      }
-    )
-  ]
-}, h = {
-  args: {}
-};
-export {
-  h as Simple,
-  f as default
-};

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

@@ -1,49 +0,0 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Button as r } from "../Button/Button.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";
-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!" })
-  }
-}, p = {
-  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,
-  p as WithBottomChildren,
-  u as WithRightChildren,
-  g as default
-};

package/dist/components/Select/Select.stories.js

@@ -1,89 +0,0 @@
-import { jsx as e, Fragment as r, jsxs as a } from "react/jsx-runtime";
-import * as d from "react";
-import { useState as h } from "react";
-import { Select as n } from "./Select.js";
-const o = (t) => /* @__PURE__ */ d.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ d.createElement("path", { d: "M0.512792 11.6594C0.139667 11.2516 0.167167 10.6184 0.574323 10.2447C0.766229 10.0688 1.00839 9.98175 1.24964 9.98175C1.52063 9.98175 1.79026 10.0912 1.98745 10.3064L2.99998 11.4406V2.00094C2.99998 1.44781 3.44779 1 3.99998 1C4.55217 1 4.99998 1.44781 4.99998 2.00094V11.4384L6.01248 10.3325C6.38748 9.92812 7.01873 9.89687 7.42498 10.2719C7.83216 10.6453 7.85935 11.2787 7.48651 11.6866L4.76463 14.6894C4.38588 15.1037 3.66901 15.1037 3.28995 14.6894L0.512792 11.6594Z", fill: "#1897F3" }), /* @__PURE__ */ d.createElement("path", { opacity: 0.4, d: "M9.99998 3H11.5859L9.29279 5.29313C9.00666 5.57925 8.92123 6.00906 9.07598 6.38313C9.23073 6.75719 9.59566 7 9.99973 7H13.9716C14.5531 6.97188 15 6.55313 15 6C15 5.44688 14.5522 5 14 5H12.414L14.7072 2.70688C14.9933 2.42075 15.0787 1.99094 14.924 1.61688C14.7692 1.24281 14.4031 1 13.9719 1H9.99998C9.44685 1 8.99998 1.44719 8.99998 2C8.99998 2.55281 9.44685 3 9.99998 3ZM15.3937 13.5406L12.894 8.5375C12.5553 7.85594 11.444 7.85594 11.1053 8.5375L8.6056 13.5406C8.35854 14.0378 8.55873 14.6419 9.05279 14.8903C9.54873 15.1379 10.1478 14.9365 10.3944 14.4403L10.6179 13.9906H13.3814L13.6049 14.4403C13.7979 14.8288 14.354 15.1863 14.9465 14.8903C15.4406 14.6438 15.6406 14.0375 15.3937 13.5406ZM11.4937 12.2313L12 11.2094L12.5069 12.2291H11.4937V12.2313Z", fill: "#1897F3" })), g = {
-  title: "Components/Select",
-  component: n,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "padded"
-  }
-};
-function c(t) {
-  const [l, s] = h(""), p = [
-    { id: "1", name: "Frodo" },
-    { id: "2", name: "Sam" },
-    { id: "3", name: "Merry" },
-    { id: "4", name: "Pippin" }
-  ];
-  return /* @__PURE__ */ a(r, { children: [
-    /* @__PURE__ */ e(n, { ...t, value: l, onChange: (i) => s(i), children: p.map((i) => /* @__PURE__ */ e(n.Option, { value: i.id, children: i.name }, i.id)) }),
-    l && /* @__PURE__ */ a("pre", { style: { borderRadius: 4, background: "#fafafa", padding: 16, color: "#777777" }, children: [
-      "// selected character",
-      /* @__PURE__ */ e("br", {}),
-      JSON.stringify(
-        p.find((i) => i.id === l),
-        null,
-        4
-      )
-    ] })
-  ] });
-}
-const f = {
-  args: {
-    placeholder: "Select an option"
-  },
-  render: c
-}, S = {
-  name: "With all options disabled",
-  args: {
-    placeholder: "Select an option",
-    disabled: !0
-  },
-  render: c
-}, v = {
-  name: "With some options disabled",
-  args: {
-    placeholder: "Select an option",
-    children: /* @__PURE__ */ a(r, { children: [
-      /* @__PURE__ */ e(n.Option, { value: "1", disabled: !0, children: "Frodo" }),
-      /* @__PURE__ */ e(n.Option, { value: "2", children: "Sam" }),
-      /* @__PURE__ */ e(n.Option, { value: "3", disabled: !0, children: "Merry" }),
-      /* @__PURE__ */ e(n.Option, { value: "4", children: "Pippin" })
-    ] })
-  }
-}, O = {
-  name: "With prefix",
-  args: {
-    placeholder: "Select an option",
-    prefix: "Filter by:"
-  },
-  render: c
-}, y = {
-  name: "With icons",
-  args: {
-    placeholder: "Select an option",
-    children: /* @__PURE__ */ a(r, { children: [
-      /* @__PURE__ */ e(n.Option, { value: "1", icon: /* @__PURE__ */ e(o, {}), children: "Frodo" }),
-      /* @__PURE__ */ e(n.Option, { value: "2", icon: /* @__PURE__ */ e(o, {}), children: "Sam" }),
-      /* @__PURE__ */ e(n.Option, { value: "3", icon: /* @__PURE__ */ e(o, {}), children: "Merry" }),
-      /* @__PURE__ */ e(n.Option, { value: "4", icon: /* @__PURE__ */ e(o, {}), children: "Pippin" })
-    ] })
-  }
-}, L = {
-  name: "With many options",
-  args: {
-    placeholder: "Select an option",
-    children: /* @__PURE__ */ e(r, { children: [...Array(20).keys()].map((t) => /* @__PURE__ */ e(n.Option, { value: String(t + 1), children: `Item #${t + 1}` })) })
-  }
-};
-export {
-  f as Simple,
-  S as WithAllOptionsDisabled,
-  y as WithIcons,
-  L as WithManyOptions,
-  O as WithPrefix,
-  v as WithSomeOptionsDisabled,
-  g as default
-};

package/dist/components/Snackbar/Snackbar.stories.js

@@ -1,62 +0,0 @@
-import { jsx as o, jsxs as s, Fragment as i } from "react/jsx-runtime";
-import { useState as l } from "react";
-import { Button as c } from "../Button/Button.js";
-import { Snackbar as a } from "./Snackbar.js";
-const C = {
-  title: "Components/Snackbar",
-  component: a,
-  tags: ["autodocs"],
-  decorators: [
-    (e) => /* @__PURE__ */ o("div", { style: { padding: "1em" }, children: /* @__PURE__ */ o(e, {}) })
-  ]
-};
-function n(e) {
-  const [r, t] = l(!1);
-  return /* @__PURE__ */ s(i, { children: [
-    /* @__PURE__ */ o(c, { onClick: () => t(!0), children: "Open Snackbar" }),
-    /* @__PURE__ */ o(
-      a,
-      {
-        ...e,
-        open: r,
-        onClose: () => {
-          t(!1), e != null && e.onClose && (e == null || e.onClose());
-        }
-      }
-    )
-  ] });
-}
-const f = {
-  render: n,
-  args: {
-    snackbarMessage: "Dialog success",
-    variant: "success",
-    autoHideDuration: 5e3,
-    onClose: () => alert("Consider the dialog closed"),
-    open: !1
-  }
-}, g = {
-  render: n,
-  args: {
-    variant: "error",
-    snackbarMessage: "Dialog error",
-    autoHideDuration: 5e3,
-    onClose: () => alert("Consider the dialog closed"),
-    open: !1
-  }
-}, k = {
-  render: n,
-  args: {
-    variant: "warning",
-    snackbarMessage: "Dialog attention",
-    autoHideDuration: 5e3,
-    onClose: () => alert("Consider the dialog closed"),
-    open: !1
-  }
-};
-export {
-  g as Error,
-  f as Success,
-  k as Warning,
-  C as default
-};

package/dist/components/Toggle/Toggle.stories.js

@@ -1,33 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useState as r } from "react";
-import { Toggle as c } from "./Toggle.js";
-const l = {
-  title: "Components/Toggle",
-  component: c,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "padded"
-  }
-}, h = {
-  render: () => {
-    const [e, t] = r(!1);
-    return /* @__PURE__ */ o(c, { checked: e, onChange: (a) => t(a.target.checked) });
-  }
-}, m = {
-  name: "With label",
-  render: () => {
-    const [e, t] = r(!1);
-    return /* @__PURE__ */ o(c, { label: "Active", checked: e, onChange: (a) => t(a.target.checked) });
-  }
-}, g = {
-  render: () => {
-    const [e, t] = r(!1);
-    return /* @__PURE__ */ o(c, { label: "Active", disabled: !0, checked: e, onChange: (a) => t(a.target.checked) });
-  }
-};
-export {
-  g as Disabled,
-  h as Simple,
-  m as WithLabel,
-  l as default
-};

package/dist/components/Typography/Typography.stories.js

@@ -1,30 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import "../Chip/Chip.js";
-import "../Button/Button.js";
-import "react";
-import "../Dialog/Backdrop.js";
-import { Typography as p } from "./Typography.js";
-import "../IconButton/IconButton.js";
-import "../Select/Select.js";
-import "../Table/Table.js";
-import "../Tabs/Tabs.js";
-const d = {
-  title: "Components/Typography",
-  component: p,
-  tags: ["autodocs"],
-  argTypes: {
-    element: {
-      options: ["span", "p", "h1", "h2", "h3", "h4", "h5", "h6", "td", "th"],
-      control: { type: "select" }
-    }
-  },
-  decorators: [
-    (o) => /* @__PURE__ */ t("div", { style: { margin: "1em" }, children: /* @__PURE__ */ t(o, {}) })
-  ]
-}, y = {
-  args: { children: "Example text" }
-};
-export {
-  y as Simple,
-  d as default
-};