@pismo/marola 0.0.1-alpha.6 → 0.0.1-alpha.7

package/dist/components/Input/Input.js

@@ -0,0 +1,497 @@
+import '../../assets/Input.css';
+import { jsxs as H, jsx as B } from "react/jsx-runtime";
+import * as f from "react";
+import { useState as pe, useId as ce } from "react";
+import { c as F } from "../../clsx-DB4S2d7J.js";
+import { Typography as L } from "../Typography/Typography.js";
+import { a as _, _ as me } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
+import { g as fe, a as _e, u as he, e as z, b as Q, i as be, P as e, c as ge, d as Ce } from "../../index-CqjC7P5Y.js";
+function ye(s) {
+  let l = "https://mui.com/production-error/?code=" + s;
+  for (let a = 1; a < arguments.length; a += 1)
+    l += "&args[]=" + encodeURIComponent(arguments[a]);
+  return "Minified MUI error #" + s + "; visit " + l + " for the full message.";
+}
+const X = /* @__PURE__ */ f.createContext(void 0);
+process.env.NODE_ENV !== "production" && (X.displayName = "FormControlContext");
+function we() {
+  return f.useContext(X);
+}
+const Z = "Input";
+function ve(s) {
+  return fe(Z, s);
+}
+_e(Z, ["root", "formControl", "focused", "disabled", "error", "multiline", "input", "inputMultiline", "inputTypeSearch", "adornedStart", "adornedEnd"]);
+function Ne(s = {}) {
+  const {
+    defaultValue: l,
+    disabled: a = !1,
+    error: h = !1,
+    onBlur: u,
+    onChange: b,
+    onFocus: P,
+    required: x = !1,
+    value: C,
+    inputRef: V
+  } = s, n = we();
+  let E, m, y, w, g;
+  if (n) {
+    var I, d, q;
+    if (E = void 0, m = (I = n.disabled) != null ? I : !1, y = (d = n.error) != null ? d : !1, w = (q = n.required) != null ? q : !1, g = n.value, process.env.NODE_ENV !== "production") {
+      const t = ["defaultValue", "disabled", "error", "required", "value"].filter((r) => s[r] !== void 0);
+      t.length > 0 && console.warn(["MUI: You have set props on an input that is inside a FormControl.", "Set these props on a FormControl instead. Otherwise they will be ignored.", `Ignored props: ${t.join(", ")}`].join(`
+`));
+    }
+  } else
+    E = l, m = a, y = h, w = x, g = C;
+  const {
+    current: U
+  } = f.useRef(g != null), M = f.useCallback((t) => {
+    process.env.NODE_ENV !== "production" && t && t.nodeName !== "INPUT" && !t.focus && console.error(["MUI: You have provided a `slots.input` to the input component", "that does not correctly handle the `ref` prop.", "Make sure the `ref` prop is called with a HTMLInputElement."].join(`
+`));
+  }, []), v = f.useRef(null), O = he(v, V, M), [N, R] = f.useState(!1);
+  f.useEffect(() => {
+    !n && m && N && (R(!1), u == null || u());
+  }, [n, m, N, u]);
+  const k = (t) => (r) => {
+    var o;
+    if (n != null && n.disabled) {
+      r.stopPropagation();
+      return;
+    }
+    if ((o = t.onFocus) == null || o.call(t, r), n && n.onFocus) {
+      var c;
+      n == null || (c = n.onFocus) == null || c.call(n);
+    } else
+      R(!0);
+  }, A = (t) => (r) => {
+    var o;
+    (o = t.onBlur) == null || o.call(t, r), n && n.onBlur ? n.onBlur() : R(!1);
+  }, T = (t) => (r, ...o) => {
+    var c, j;
+    if (!U && (r.target || v.current) == null)
+      throw new Error(process.env.NODE_ENV !== "production" ? "MUI: Expected valid input target. Did you use a custom `slots.input` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info." : ye(17));
+    n == null || (c = n.onChange) == null || c.call(n, r), (j = t.onChange) == null || j.call(t, r, ...o);
+  }, D = (t) => (r) => {
+    var o;
+    v.current && r.currentTarget === r.target && v.current.focus(), (o = t.onClick) == null || o.call(t, r);
+  };
+  return {
+    disabled: m,
+    error: y,
+    focused: N,
+    formControlContext: n,
+    getInputProps: (t = {}) => {
+      const o = _({}, {
+        onBlur: u,
+        onChange: b,
+        onFocus: P
+      }, z(t)), c = _({}, o, {
+        onBlur: A(o),
+        onChange: T(o),
+        onFocus: k(o)
+      });
+      return _({}, c, {
+        "aria-invalid": y || void 0,
+        defaultValue: E,
+        value: g,
+        required: w,
+        disabled: m
+      }, t, {
+        ref: O
+      }, c);
+    },
+    getRootProps: (t = {}) => {
+      const r = z(s, ["onBlur", "onChange", "onFocus"]), o = _({}, r, z(t));
+      return _({}, t, o, {
+        onClick: D(o)
+      });
+    },
+    inputRef: O,
+    required: w,
+    value: g
+  };
+}
+const Pe = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "defaultValue", "disabled", "endAdornment", "error", "id", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "startAdornment", "value", "type", "rows", "slotProps", "slots", "minRows", "maxRows"], xe = (s) => {
+  const {
+    disabled: l,
+    error: a,
+    focused: h,
+    formControlContext: u,
+    multiline: b,
+    startAdornment: P,
+    endAdornment: x
+  } = s;
+  return ge({
+    root: ["root", l && "disabled", a && "error", h && "focused", !!u && "formControl", b && "multiline", !!P && "adornedStart", !!x && "adornedEnd"],
+    input: ["input", l && "disabled", b && "multiline"]
+  }, Ce(ve));
+}, ee = /* @__PURE__ */ f.forwardRef(function(l, a) {
+  var h, u, b;
+  const {
+    "aria-describedby": P,
+    "aria-label": x,
+    "aria-labelledby": C,
+    autoComplete: V,
+    autoFocus: n,
+    className: E,
+    defaultValue: m,
+    disabled: y,
+    endAdornment: w,
+    error: g,
+    id: I,
+    multiline: d = !1,
+    name: q,
+    onClick: U,
+    onChange: M,
+    onKeyDown: v,
+    onKeyUp: O,
+    onFocus: N,
+    onBlur: R,
+    placeholder: k,
+    readOnly: A,
+    required: T,
+    startAdornment: D,
+    value: p,
+    type: S,
+    rows: t,
+    slotProps: r = {},
+    slots: o = {},
+    minRows: c,
+    maxRows: j
+  } = l, Y = me(l, Pe), {
+    getRootProps: te,
+    getInputProps: ne,
+    focused: oe,
+    formControlContext: re,
+    error: se,
+    disabled: ae
+  } = Ne({
+    disabled: y,
+    defaultValue: m,
+    error: g,
+    onBlur: R,
+    onClick: U,
+    onChange: M,
+    onFocus: N,
+    required: T,
+    value: p
+  }), W = d ? void 0 : S ?? "text", $ = _({}, l, {
+    disabled: ae,
+    error: se,
+    focused: oe,
+    formControlContext: re,
+    multiline: d,
+    type: W
+  }), G = xe($), le = {
+    "aria-describedby": P,
+    "aria-label": x,
+    "aria-labelledby": C,
+    autoComplete: V,
+    autoFocus: n,
+    id: I,
+    onKeyDown: v,
+    onKeyUp: O,
+    name: q,
+    placeholder: k,
+    readOnly: A,
+    type: W
+  }, J = (h = o.root) != null ? h : "div", ie = Q({
+    elementType: J,
+    getSlotProps: te,
+    externalSlotProps: r.root,
+    externalForwardedProps: Y,
+    additionalProps: {
+      ref: a
+    },
+    ownerState: $,
+    className: [G.root, E]
+  }), K = d ? (u = o.textarea) != null ? u : "textarea" : (b = o.input) != null ? b : "input", ue = Q({
+    elementType: K,
+    getSlotProps: (de) => ne(_({}, le, de)),
+    externalSlotProps: r.input,
+    additionalProps: _({
+      rows: d ? t : void 0
+    }, d && !be(K) && {
+      minRows: t || c,
+      maxRows: t || j
+    }),
+    ownerState: $,
+    className: G.input
+  });
+  return process.env.NODE_ENV !== "production" && d && t && (c || j) && console.warn("MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set."), /* @__PURE__ */ H(J, _({}, ie, {
+    children: [D, /* @__PURE__ */ B(K, _({}, ue)), w]
+  }));
+});
+process.env.NODE_ENV !== "production" && (ee.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  "aria-describedby": e.string,
+  /**
+   * @ignore
+   */
+  "aria-label": e.string,
+  /**
+   * @ignore
+   */
+  "aria-labelledby": e.string,
+  /**
+   * This prop helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+   */
+  autoComplete: e.string,
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   */
+  autoFocus: e.bool,
+  /**
+   * Class name applied to the root element.
+   */
+  className: e.string,
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: e.any,
+  /**
+   * If `true`, the component is disabled.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  disabled: e.bool,
+  /**
+   * Trailing adornment for this input.
+   */
+  endAdornment: e.node,
+  /**
+   * If `true`, the `input` will indicate an error by setting the `aria-invalid` attribute on the input and the `baseui--error` class on the root element.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  error: e.bool,
+  /**
+   * The id of the `input` element.
+   */
+  id: e.string,
+  /**
+   * @ignore
+   */
+  inputRef: e.oneOfType([e.func, e.shape({
+    current: e.object
+  })]),
+  /**
+   * Maximum number of rows to display when multiline option is set to true.
+   */
+  maxRows: e.number,
+  /**
+   * Minimum number of rows to display when multiline option is set to true.
+   */
+  minRows: e.number,
+  /**
+   * If `true`, a `textarea` element is rendered.
+   * @default false
+   */
+  multiline: e.bool,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: e.string,
+  /**
+   * @ignore
+   */
+  onBlur: e.func,
+  /**
+   * @ignore
+   */
+  onChange: e.func,
+  /**
+   * @ignore
+   */
+  onClick: e.func,
+  /**
+   * @ignore
+   */
+  onFocus: e.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: e.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: e.func,
+  /**
+   * The short hint displayed in the `input` before the user enters a value.
+   */
+  placeholder: e.string,
+  /**
+   * It prevents the user from changing the value of the field
+   * (not from interacting with the field).
+   */
+  readOnly: e.bool,
+  /**
+   * If `true`, the `input` element is required.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  required: e.bool,
+  /**
+   * Number of rows to display when multiline option is set to true.
+   */
+  rows: e.number,
+  /**
+   * The props used for each slot inside the Input.
+   * @default {}
+   */
+  slotProps: e.shape({
+    input: e.oneOfType([e.func, e.object]),
+    root: e.oneOfType([e.func, e.object])
+  }),
+  /**
+   * The components used for each slot inside the InputBase.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: e.shape({
+    input: e.elementType,
+    root: e.elementType,
+    textarea: e.elementType
+  }),
+  /**
+   * Leading adornment for this input.
+   */
+  startAdornment: e.node,
+  /**
+   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
+   * @default 'text'
+   */
+  type: e.oneOf(["button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week"]),
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value: e.any
+});
+const Ee = (s) => /* @__PURE__ */ f.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "data-waves-icon": "fa/solid/circle-exclamation", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+  fill: "currentcolor",
+  color: "currentcolor",
+  width: "1em",
+  height: "1em"
+}, ...s }, /* @__PURE__ */ f.createElement("path", { d: "M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z" })), Re = "_input_hm5q2_1", Fe = "_input__label_hm5q2_4", i = {
+  input: Re,
+  input__label: Fe,
+  "input__input-el-wrapper": "_input__input-el-wrapper_hm5q2_9",
+  "input__input-el": "_input__input-el_hm5q2_9",
+  "input__left-icon": "_input__left-icon_hm5q2_30",
+  "input__right-icon": "_input__right-icon_hm5q2_33",
+  "input__messages-wrapper": "_input__messages-wrapper_hm5q2_36",
+  "input__info-message": "_input__info-message_hm5q2_44",
+  "input__error-message": "_input__error-message_hm5q2_44",
+  "input__chars-counter": "_input__chars-counter_hm5q2_55",
+  "input--disabled": "_input--disabled_hm5q2_59",
+  "input--focused": "_input--focused_hm5q2_65",
+  "input--error": "_input--error_hm5q2_68"
+}, Ve = ({
+  label: s,
+  infoMessage: l,
+  errorMessage: a,
+  leftIcon: h,
+  rightIcon: u,
+  id: b,
+  disabled: P,
+  type: x = "text",
+  maxLength: C,
+  hideCharsCounter: V = !1,
+  onChange: n,
+  classNameWrapper: E,
+  classNameLabel: m,
+  classNameInput: y,
+  classNameInfoMessage: w,
+  classNameErrorMessage: g,
+  classNameCharsCounter: I,
+  "data-testid-wrapper": d,
+  "data-testid-label": q,
+  "data-testid-input": U,
+  "data-testid-infoMessage": M,
+  "data-testid-errorMessage": v,
+  "data-testid-charsCounter": O,
+  ...N
+}) => {
+  const [R, k] = pe(0), A = ce(), T = b || `input_${A}`;
+  Object.assign(N, { "data-testid": U });
+  const D = (p) => {
+    var S, t;
+    k((t = (S = p == null ? void 0 : p.target) == null ? void 0 : S.value) == null ? void 0 : t.length), n && n(p);
+  };
+  return /* @__PURE__ */ H("div", { className: F(i.input, E), "data-testid": d, children: [
+    s && /* @__PURE__ */ B(
+      L,
+      {
+        element: "label",
+        variant: "form-label",
+        elementProps: { htmlFor: T },
+        className: F(i.input__label, m),
+        "data-testid": q,
+        children: s
+      }
+    ),
+    /* @__PURE__ */ B(
+      ee,
+      {
+        id: T,
+        type: x,
+        disabled: P,
+        error: !!a,
+        "aria-label": s,
+        slotProps: {
+          root: (p) => ({
+            className: F(i["input__input-el-wrapper"], {
+              [i["input--disabled"]]: p.disabled,
+              [i["input--focused"]]: p.focused,
+              [i["input--error"]]: p.error
+            })
+          }),
+          input: {
+            className: F(i["input__input-el"], y),
+            maxLength: C,
+            onChange: D,
+            ...N
+          }
+        },
+        startAdornment: h && /* @__PURE__ */ B("span", { className: i["input__left-icon"], children: h }),
+        endAdornment: u && /* @__PURE__ */ B("span", { className: i["input__right-icon"], children: u })
+      }
+    ),
+    /* @__PURE__ */ H("div", { className: i["input__messages-wrapper"], children: [
+      (a || l) && /* @__PURE__ */ H(
+        L,
+        {
+          variant: "form-hint",
+          className: a ? F(i["input__error-message"], g) : F(i["input__info-message"], w),
+          "data-testid": a ? v : M,
+          children: [
+            /* @__PURE__ */ B(Ee, {}),
+            a || l
+          ]
+        }
+      ),
+      C && !V && /* @__PURE__ */ H(
+        L,
+        {
+          variant: "form-hint",
+          className: F(i["input__chars-counter"], I),
+          "data-testid": O,
+          children: [
+            R,
+            " / ",
+            C
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Ve as Input
+};

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

@@ -0,0 +1,43 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ label, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, type, maxLength, hideCharsCounter, onChange, classNameWrapper, classNameLabel, classNameInput, classNameInfoMessage, classNameErrorMessage, classNameCharsCounter, "data-testid-wrapper": testIdWrapper, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, "data-testid-charsCounter": testIdCharsCounter, ...rest }: import('react').InputHTMLAttributes<HTMLInputElement> & {
+        label?: string | undefined;
+        infoMessage?: string | undefined;
+        errorMessage?: string | undefined;
+        leftIcon?: import('react').ReactNode;
+        rightIcon?: import('react').ReactNode;
+        type?: "text" | "password" | undefined;
+        hideCharsCounter?: boolean | undefined;
+        classNameWrapper?: 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: {
+        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;
+export declare const WithMaxLength: Story;
+export declare const WithMaxLengthAndHideCharsCounter: Story;
+export declare const WithLeftIcon: Story;
+export declare const WithRightIconAndClickEvent: Story;
+export declare const WithBothIcons: Story;
+export declare const WithInfoMessage: Story;
+export declare const WithErrorMessage: Story;

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/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.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;