@pismo/marola 0.0.1-alpha.2 → 0.0.1-alpha.21

package/dist/useList-B0hog_3-.js

@@ -0,0 +1,436 @@
+import { b as p, u as re, f as ie } from "./index-CH45lKw7.js";
+import * as f from "react";
+import { L as x } from "./combineHooksSlotProps-DVjg9PRh.js";
+function W(t, e, r = (n, l) => n === l) {
+  return t.length === e.length && t.every((n, l) => r(n, e[l]));
+}
+function ue(t, e) {
+  return t === e;
+}
+const N = {}, q = () => {
+};
+function L(t, e) {
+  const r = p({}, t);
+  return Object.keys(e).forEach((n) => {
+    e[n] !== void 0 && (r[n] = e[n]);
+  }), r;
+}
+function se(t) {
+  const {
+    nextState: e,
+    initialState: r,
+    stateComparers: n,
+    onStateChange: l,
+    controlledProps: a,
+    lastActionRef: i
+  } = t, h = f.useRef(r);
+  f.useEffect(() => {
+    if (i.current === null)
+      return;
+    const s = L(h.current, a);
+    Object.keys(e).forEach((C) => {
+      var V;
+      const g = (V = n[C]) != null ? V : ue, c = e[C], m = s[C];
+      if (m == null && c != null || m != null && c == null || m != null && c != null && !g(c, m)) {
+        var o, S;
+        l == null || l((o = i.current.event) != null ? o : null, C, c, (S = i.current.type) != null ? S : "", e);
+      }
+    }), h.current = e, i.current = null;
+  }, [h, e, i, l, n, a]);
+}
+function ae(t) {
+  const e = f.useRef(null), {
+    reducer: r,
+    initialState: n,
+    controlledProps: l = N,
+    stateComparers: a = N,
+    onStateChange: i = q,
+    actionContext: h,
+    componentName: s = ""
+  } = t, C = f.useRef(l);
+  process.env.NODE_ENV !== "production" && f.useEffect(() => {
+    Object.keys(l).forEach((o) => {
+      C.current[o] !== void 0 && l[o] === void 0 && console.error(`useControllableReducer: ${s ? `The ${s} component` : "A component"} is changing a controlled prop to be uncontrolled: ${o}`), C.current[o] === void 0 && l[o] !== void 0 && console.error(`useControllableReducer: ${s ? `The ${s} component` : "A component"} is changing an uncontrolled prop to be controlled: ${o}`);
+    });
+  }, [l, s]);
+  const V = f.useCallback((o, S) => {
+    e.current = S;
+    const R = L(o, l);
+    return r(R, S);
+  }, [l, r]), [g, c] = f.useReducer(V, n), m = f.useCallback((o) => {
+    c(p({}, o, {
+      context: h
+    }));
+  }, [h]);
+  return se({
+    nextState: g,
+    initialState: n,
+    stateComparers: a ?? N,
+    onStateChange: i ?? q,
+    controlledProps: l,
+    lastActionRef: e
+  }), [L(g, l), m];
+}
+function oe(t, e, r, n, l, a) {
+  if (r.length === 0 || !n && r.every((h, s) => l(h, s)))
+    return -1;
+  let i = t;
+  for (; ; ) {
+    if (!a && e === "next" && i === r.length || !a && e === "previous" && i === -1)
+      return -1;
+    if (n ? !1 : l(r[i], i))
+      i += e === "next" ? 1 : -1, a && (i = (i + r.length) % r.length);
+    else
+      return i;
+  }
+}
+function w(t, e, r) {
+  var n;
+  const {
+    items: l,
+    isItemDisabled: a,
+    disableListWrap: i,
+    disabledItemsFocusable: h,
+    itemComparer: s,
+    focusManagement: C
+  } = r, V = C === "DOM" ? 0 : -1, g = l.length - 1, c = t == null ? -1 : l.findIndex((D) => s(D, t));
+  let m, o, S = !i;
+  switch (e) {
+    case "reset":
+      if (V === -1)
+        return null;
+      m = 0, o = "next", S = !1;
+      break;
+    case "start":
+      m = 0, o = "next", S = !1;
+      break;
+    case "end":
+      m = g, o = "previous", S = !1;
+      break;
+    default: {
+      const D = c + e;
+      D < 0 ? !S && c !== -1 || Math.abs(e) > 1 ? (m = 0, o = "next") : (m = g, o = "previous") : D > g ? !S || Math.abs(e) > 1 ? (m = g, o = "previous") : (m = 0, o = "next") : (m = D, o = e >= 0 ? "next" : "previous");
+    }
+  }
+  const R = oe(m, o, l, h, a, S);
+  return R === -1 && t !== null && !a(t, c) ? t : (n = l[R]) != null ? n : null;
+}
+function ce(t, e, r, n) {
+  return r === "none" ? [] : r === "single" ? n(e[0], t) ? e : [t] : e.some((l) => n(l, t)) ? e.filter((l) => !n(l, t)) : [...e, t];
+}
+function j(t, e, r) {
+  const {
+    itemComparer: n,
+    isItemDisabled: l,
+    selectionMode: a,
+    items: i
+  } = r, {
+    selectedValues: h
+  } = e, s = i.findIndex((V) => n(t, V));
+  if (l(t, s))
+    return e;
+  const C = ce(t, h, a, n);
+  return p({}, e, {
+    selectedValues: C,
+    highlightedValue: t
+  });
+}
+function he(t, e, r) {
+  const n = e.highlightedValue, {
+    orientation: l,
+    pageSize: a
+  } = r;
+  switch (t) {
+    case "Home":
+      return p({}, e, {
+        highlightedValue: w(n, "start", r)
+      });
+    case "End":
+      return p({}, e, {
+        highlightedValue: w(n, "end", r)
+      });
+    case "PageUp":
+      return p({}, e, {
+        highlightedValue: w(n, -a, r)
+      });
+    case "PageDown":
+      return p({}, e, {
+        highlightedValue: w(n, a, r)
+      });
+    case "ArrowUp":
+      if (l !== "vertical")
+        break;
+      return p({}, e, {
+        highlightedValue: w(n, -1, r)
+      });
+    case "ArrowDown":
+      if (l !== "vertical")
+        break;
+      return p({}, e, {
+        highlightedValue: w(n, 1, r)
+      });
+    case "ArrowLeft": {
+      if (l === "vertical")
+        break;
+      return p({}, e, {
+        highlightedValue: w(n, l === "horizontal-ltr" ? -1 : 1, r)
+      });
+    }
+    case "ArrowRight": {
+      if (l === "vertical")
+        break;
+      return p({}, e, {
+        highlightedValue: w(n, l === "horizontal-ltr" ? 1 : -1, r)
+      });
+    }
+    case "Enter":
+    case " ":
+      return e.highlightedValue === null ? e : j(e.highlightedValue, e, r);
+  }
+  return e;
+}
+function ge(t, e) {
+  return e.focusManagement === "DOM" ? t : p({}, t, {
+    highlightedValue: null
+  });
+}
+function de(t, e, r) {
+  var n;
+  const l = (n = r(t)) == null ? void 0 : n.trim().toLowerCase();
+  return !l || l.length === 0 ? !1 : l.indexOf(e) === 0;
+}
+function fe(t, e, r) {
+  const {
+    items: n,
+    isItemDisabled: l,
+    disabledItemsFocusable: a,
+    getItemAsString: i
+  } = r, h = e.length > 1;
+  let s = h ? t.highlightedValue : w(t.highlightedValue, 1, r);
+  for (let C = 0; C < n.length; C += 1) {
+    if (!s || !h && t.highlightedValue === s)
+      return t;
+    if (de(s, e, i) && (!l(s, n.indexOf(s)) || a))
+      return p({}, t, {
+        highlightedValue: s
+      });
+    s = w(s, 1, r);
+  }
+  return t;
+}
+function me(t, e, r, n) {
+  var l;
+  const {
+    itemComparer: a,
+    focusManagement: i
+  } = n;
+  let h = null;
+  if (r.highlightedValue != null) {
+    var s;
+    h = (s = t.find((g) => a(g, r.highlightedValue))) != null ? s : null;
+  } else
+    i === "DOM" && e.length === 0 && (h = w(null, "reset", n));
+  const V = ((l = r.selectedValues) != null ? l : []).filter((g) => t.some((c) => a(c, g)));
+  return p({}, r, {
+    highlightedValue: h,
+    selectedValues: V
+  });
+}
+function pe(t, e) {
+  return p({}, t, {
+    highlightedValue: w(null, "reset", e)
+  });
+}
+function Ce(t, e) {
+  return p({}, t, {
+    highlightedValue: w(null, "end", e)
+  });
+}
+function Se(t, e) {
+  return p({}, t, {
+    selectedValues: [],
+    highlightedValue: w(null, "reset", e)
+  });
+}
+function Ie(t, e) {
+  const {
+    type: r,
+    context: n
+  } = e;
+  switch (r) {
+    case x.keyDown:
+      return he(e.key, t, n);
+    case x.itemClick:
+      return j(e.item, t, n);
+    case x.blur:
+      return ge(t, n);
+    case x.textNavigation:
+      return fe(t, e.searchString, n);
+    case x.itemsChange:
+      return me(e.items, e.previousItems, t, n);
+    case x.resetHighlight:
+      return pe(t, n);
+    case x.highlightLast:
+      return Ce(t, n);
+    case x.clearSelection:
+      return Se(t, n);
+    default:
+      return t;
+  }
+}
+const be = 500;
+function xe(t) {
+  const e = f.useRef({
+    searchString: "",
+    lastTime: null
+  });
+  return f.useCallback((r) => {
+    if (r.key.length === 1 && r.key !== " ") {
+      const n = e.current, l = r.key.toLowerCase(), a = performance.now();
+      n.searchString.length > 0 && n.lastTime && a - n.lastTime > be ? n.searchString = l : (n.searchString.length !== 1 || l !== n.searchString) && (n.searchString += l), n.lastTime = a, t(n.searchString, r);
+    }
+  }, [t]);
+}
+const z = {}, Ve = () => {
+}, we = (t, e) => t === e, De = () => !1, Re = (t) => typeof t == "string" ? t : String(t), ve = () => ({
+  highlightedValue: null,
+  selectedValues: []
+});
+function Me(t) {
+  const {
+    controlledProps: e = z,
+    disabledItemsFocusable: r = !1,
+    disableListWrap: n = !1,
+    focusManagement: l = "activeDescendant",
+    getInitialState: a = ve,
+    getItemDomElement: i,
+    getItemId: h,
+    isItemDisabled: s = De,
+    rootRef: C,
+    onStateChange: V = Ve,
+    items: g,
+    itemComparer: c = we,
+    getItemAsString: m = Re,
+    onChange: o,
+    onHighlightChange: S,
+    onItemsChange: R,
+    orientation: D = "vertical",
+    pageSize: P = 5,
+    reducerActionContext: H = z,
+    selectionMode: $ = "single",
+    stateReducer: _,
+    componentName: G = "useList"
+  } = t;
+  if (process.env.NODE_ENV !== "production") {
+    if (l === "DOM" && i == null)
+      throw new Error("useList: The `getItemDomElement` prop is required when using the `DOM` focus management.");
+    if (l === "activeDescendant" && h == null)
+      throw new Error("useList: The `getItemId` prop is required when using the `activeDescendant` focus management.");
+  }
+  const B = f.useRef(null), F = re(C, B), T = f.useCallback((d, u, I) => {
+    if (S == null || S(d, u, I), l === "DOM" && u != null && (I === x.itemClick || I === x.keyDown || I === x.textNavigation)) {
+      var b;
+      i == null || (b = i(u)) == null || b.focus();
+    }
+  }, [i, S, l]), O = f.useMemo(() => ({
+    highlightedValue: c,
+    selectedValues: (d, u) => W(d, u, c)
+  }), [c]), J = f.useCallback((d, u, I, b, M) => {
+    switch (V == null || V(d, u, I, b, M), u) {
+      case "highlightedValue":
+        T(d, I, b);
+        break;
+      case "selectedValues":
+        o == null || o(d, I, b);
+        break;
+    }
+  }, [T, o, V]), K = f.useMemo(() => ({
+    disabledItemsFocusable: r,
+    disableListWrap: n,
+    focusManagement: l,
+    isItemDisabled: s,
+    itemComparer: c,
+    items: g,
+    getItemAsString: m,
+    onHighlightChange: T,
+    orientation: D,
+    pageSize: P,
+    selectionMode: $,
+    stateComparers: O
+  }), [r, n, l, s, c, g, m, T, D, P, $, O]), Y = a(), X = _ ?? Ie, Q = f.useMemo(() => p({}, H, K), [H, K]), [k, v] = ae({
+    reducer: X,
+    actionContext: Q,
+    initialState: Y,
+    controlledProps: e,
+    stateComparers: O,
+    onStateChange: J,
+    componentName: G
+  }), {
+    highlightedValue: E,
+    selectedValues: A
+  } = k, Z = xe((d, u) => v({
+    type: x.textNavigation,
+    event: u,
+    searchString: d
+  })), y = f.useRef([]);
+  f.useEffect(() => {
+    W(y.current, g, c) || (v({
+      type: x.itemsChange,
+      event: null,
+      items: g,
+      previousItems: y.current
+    }), y.current = g, R == null || R(g));
+  }, [g, c, v, R]);
+  const ee = (d) => (u) => {
+    var I;
+    if ((I = d.onKeyDown) == null || I.call(d, u), u.defaultMuiPrevented)
+      return;
+    const b = ["Home", "End", "PageUp", "PageDown"];
+    D === "vertical" ? b.push("ArrowUp", "ArrowDown") : b.push("ArrowLeft", "ArrowRight"), l === "activeDescendant" && b.push(" ", "Enter"), b.includes(u.key) && u.preventDefault(), v({
+      type: x.keyDown,
+      key: u.key,
+      event: u
+    }), Z(u);
+  }, te = (d) => (u) => {
+    var I, b;
+    (I = d.onBlur) == null || I.call(d, u), !u.defaultMuiPrevented && ((b = B.current) != null && b.contains(u.relatedTarget) || v({
+      type: x.blur,
+      event: u
+    }));
+  }, ne = (d = {}) => {
+    const u = ie(d);
+    return p({}, d, {
+      "aria-activedescendant": l === "activeDescendant" && E != null ? h(E) : void 0,
+      tabIndex: l === "DOM" ? -1 : 0,
+      ref: F
+    }, u, {
+      onBlur: te(u),
+      onKeyDown: ee(u)
+    });
+  }, U = f.useCallback((d) => {
+    const u = (A ?? []).some((M) => M != null && c(d, M)), I = E != null && c(d, E);
+    return {
+      focusable: l === "DOM",
+      highlighted: I,
+      selected: u
+    };
+  }, [c, A, E, l]), le = f.useMemo(() => ({
+    dispatch: v,
+    getItemState: U
+  }), [v, U]);
+  return f.useDebugValue({
+    state: k
+  }), {
+    contextValue: le,
+    dispatch: v,
+    getRootProps: ne,
+    rootRef: F,
+    state: k
+  };
+}
+export {
+  j as h,
+  Ie as l,
+  w as m,
+  Me as u
+};

package/dist/useTimeout-DxF9kiZL.js

@@ -0,0 +1,36 @@
+import * as n from "react";
+const u = {};
+function c(t, r) {
+  const e = n.useRef(u);
+  return e.current === u && (e.current = t(r)), e;
+}
+const i = [];
+function o(t) {
+  n.useEffect(t, i);
+}
+class s {
+  constructor() {
+    this.currentId = null, this.clear = () => {
+      this.currentId !== null && (clearTimeout(this.currentId), this.currentId = null);
+    }, this.disposeEffect = () => this.clear;
+  }
+  static create() {
+    return new s();
+  }
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(r, e) {
+    this.clear(), this.currentId = setTimeout(() => {
+      this.currentId = null, e();
+    }, r);
+  }
+}
+function f() {
+  const t = c(s.create).current;
+  return o(t.disposeEffect), t;
+}
+export {
+  s as T,
+  f as u
+};

package/dist/utils/styleStrings.d.ts

@@ -0,0 +1,6 @@
+import { Split } from '../types/helpers';
+
+export type BlockType<T extends string> = Split<T, '-'>[0];
+export declare const bemify: <T extends string>(variant: T, blocksWithElements?: BlockType<T>[]) => string;
+export declare const getBEMBase: (variant: string) => string;
+export declare const getBEMBlock: (variant: string) => string;

package/dist/utils/styleStrings.js

@@ -0,0 +1,10 @@
+const n = (r, e) => {
+  const g = new RegExp(`^([${e == null ? void 0 : e.join("|")}]*)-`);
+  let t = r.replace(g, "$1__");
+  return t = t.replace(new RegExp("(?<!-)-(?!-)", "g"), "--"), t;
+}, p = (r) => r.split("--")[0], B = (r) => r.split(/--|__/)[0];
+export {
+  n as bemify,
+  p as getBEMBase,
+  B as getBEMBlock
+};

package/dist/utils/styleStrings.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.21",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -17,36 +17,78 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsc --p ./tsconfig-build.json && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "yarn lint --fix",
+    "lint:scss": "stylelint \"**/*.scss\" --fix",
+    "prettier": "prettier . --write",
     "preview": "vite preview",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test": "yarn test:unit",
+    "test:unit": "vitest run",
+    "test:unit:visual": "vitest-preview",
+    "test:unit:watch": "vitest",
+    "test:e2e": "echo \"no test implemented\"",
+    "coverage": "vitest run --coverage",
+    "export-files": "node scripts/export-files.cjs",
+    "prebuild": "yarn export-files",
+    "build": "tsc --p ./tsconfig-build.json && vite build && mv ./dist/assets/marola.css ./dist",
+    "postbuild": "storybook build --disable-telemetry --output-dir build",
+    "storybook": "storybook dev -p 6006"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
+    "@storybook/addon-a11y": "^8.0.8",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/addon-onboarding": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/react": "^8.0.8",
+    "@storybook/react-vite": "^8.0.8",
+    "@storybook/test": "^8.0.8",
+    "@testing-library/react": "^15.0.5",
     "@types/node": "^20.12.2",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
     "@vitejs/plugin-react": "^4.2.1",
     "clsx": "^2.1.0",
+    "commitlint": "^19.2.1",
+    "cypress": "^13.8.1",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "glob": "^10.3.12",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "glob": "^10.3.14",
+    "husky": "^9.0.11",
+    "jsdom": "^24.0.0",
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.72.0",
+    "storybook": "^8.0.8",
+    "stylelint": "^16.3.1",
+    "stylelint-config-recess-order": "^5.0.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-prettier": "^5.0.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.8.1",
-    "vite-plugin-lib-inject-css": "^2.0.1"
+    "vite-plugin-lib-inject-css": "^2.0.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^1.4.0",
+    "vitest-preview": "^0.0.1"
   },
   "dependencies": {
-    "@mui/base": "^5.0.0-beta.40"
+    "@mui/base": "^5.0.0-beta.40",
+    "@mui/material": "^5.15.15"
   }
 }