@loopr-ai/craft 0.6.0 → 0.7.0

package/dist/components/organ/Form/Form.interfaces.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+import { FormInputProps } from "./FieldInput";
+export interface InputField {
+    label: string;
+    name: string;
+    type: "text" | "number" | "select" | "email" | "password" | "custom";
+    placeholder?: string;
+    required?: boolean;
+    defaultValue?: string;
+    disabled?: boolean;
+    beforeField?: string | React.ReactNode;
+    afterField?: string | React.ReactNode;
+    helperText?: string;
+}
+export interface Option {
+    name: string;
+    value: string;
+}
+export type OptionsType = Array<Option> | Array<string>;
+interface OptionsResponseHandler {
+    key: string;
+    name: string;
+    value: string | number;
+}
+export interface SelectField extends InputField {
+    options?: OptionsType;
+    api_endpoint?: string;
+    optionsResponseHandler?: OptionsResponseHandler;
+}
+interface Validation {
+    min?: number;
+    max?: number;
+    min_length?: number;
+    max_length?: number;
+    pattern?: string;
+    invalid_message: string;
+}
+export interface ConfigField extends SelectField {
+    validation?: Validation;
+    customComponent?: string;
+    submitDataKey?: string;
+}
+export interface CustomFieldProps {
+    value: string;
+    handleChange: (key: string, value: string) => void;
+}
+export interface CustomFields {
+    [key_name: string]: React.ComponentType<FormInputProps>;
+}
+export interface InvalidData {
+    message: string;
+    field: string;
+    value: string;
+}
+export {};

package/dist/components/organ/Form/Form.interfaces.js

@@ -0,0 +1 @@
+

package/dist/components/organ/Form/Form.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const formStyles: {
+    [key: string]: React.CSSProperties;
+};
+export default formStyles;

package/dist/components/organ/Form/Form.styles.js

@@ -0,0 +1,10 @@
+const e = {
+  form: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1rem"
+  }
+};
+export {
+  e as default
+};

package/dist/components/organ/Form/Form.utils.d.ts

@@ -0,0 +1,2 @@
+export declare function createNestedObject(finalObjectKey: string, type: string, value: string): any;
+export declare function deepMergeObjects(finalObj: any, nestedObj: any): any;

package/dist/components/organ/Form/Form.utils.js

@@ -0,0 +1,27 @@
+function k(t, r, e) {
+  const c = t.split("."), o = c.length - 1;
+  let s = {};
+  for (let n = o; n >= 0; n--) {
+    const u = c[n];
+    let y = {};
+    n === o ? s[u] = r === "number" ? parseInt(e) : e : (y[u] = { ...s }, s = y);
+  }
+  return s;
+}
+function p(t, r) {
+  const [e] = Object.keys(r);
+  return t.hasOwnProperty(e) ? {
+    ...t,
+    [e]: p(
+      t[e],
+      r[e]
+    )
+  } : {
+    ...t,
+    ...r
+  };
+}
+export {
+  k as createNestedObject,
+  p as deepMergeObjects
+};

package/dist/components/organ/Form/index.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { CraftFC } from "../../../global/interfaces";
+import { ConfigField, CustomFields, InvalidData } from "./Form.interfaces";
+interface FormProps {
+    config: Array<ConfigField>;
+    submitText?: string;
+    handleSubmit: (data: any) => void;
+    handleInvalidData?: (data: Array<InvalidData>) => void;
+    cancelText?: string;
+    handleCancel: () => void;
+    onChange?: (key: string, value: string) => void;
+    customFields?: CustomFields;
+    style?: React.CSSProperties;
+}
+/**
+ * Form component
+ * @param config - Array of ConfigField objects
+ * @param submitText - Text for submit button
+ * @param handleSubmit - Function to handle form submission
+ * @param handleInvalidData - Function to handle invalid form data
+ * @param cancelText - Text for cancel button
+ * @param handleCancel - Function to handle form cancel
+ * @param onChange - Function to handle form field change
+ * @param customFields - Custom form fields
+ * @param style - Form style
+ */
+declare const Form: CraftFC<FormProps>;
+export default Form;

package/dist/components/organ/Form/index.js

@@ -0,0 +1,130 @@
+import { jsxs as N, jsx as l } from "react/jsx-runtime";
+import { useState as x, useCallback as q, useEffect as w } from "react";
+import j from "../../cell/Button/index.js";
+import A from "./FieldInput.js";
+import K from "./Form.styles.js";
+import { createNestedObject as P, deepMergeObjects as R } from "./Form.utils.js";
+const J = ({
+  config: u,
+  submitText: _ = "Submit",
+  handleSubmit: v,
+  handleInvalidData: c,
+  cancelText: y = "Cancel",
+  handleCancel: F,
+  onChange: f,
+  style: S = {},
+  customFields: O = {}
+}) => {
+  const [o, b] = x({}), [V, h] = x([]);
+  function C(e, s) {
+    b((m) => ({
+      ...m,
+      [e]: s
+    })), f == null || f(e, s);
+  }
+  function d() {
+    const e = {};
+    u.forEach((s) => {
+      e[s.name] = s.defaultValue || "";
+    }), b(e), h([]);
+  }
+  function E() {
+    const e = [];
+    return u.forEach((s) => {
+      const { name: m, label: a, type: r, validation: t, required: p } = s, n = o[m], i = m;
+      if (t)
+        if (r === "number") {
+          const g = parseInt(n);
+          t.min && g < t.min && e.push({
+            field: i,
+            value: n,
+            message: t.invalid_message
+          }), t.max && g > t.max && e.push({
+            field: i,
+            value: n,
+            message: t.invalid_message
+          }), isNaN(g) && e.push({
+            field: i,
+            value: n,
+            message: "Invalid number"
+          });
+        } else
+          r === "text" && (t.min_length && n.length < t.min_length && e.push({
+            field: i,
+            value: n,
+            message: t.invalid_message
+          }), t.max_length && n.length > t.max_length && e.push({
+            field: i,
+            value: n,
+            message: t.invalid_message
+          }), t.pattern && !new RegExp(t.pattern).test(n) && e.push({
+            field: i,
+            value: n,
+            message: t.invalid_message
+          }));
+      p && !n && e.push({
+        field: i,
+        value: n,
+        message: `${a} is required`
+      });
+    }), h(e), e.length && (c == null || c(e)), !e.length;
+  }
+  const M = q(
+    (e) => {
+      let s = {};
+      return e.forEach((m) => {
+        const { name: a, type: r, submitDataKey: t } = m;
+        if (t) {
+          const p = P(
+            t,
+            r,
+            o[a]
+          );
+          s = R(s, p);
+        } else
+          s[a] = r === "number" ? parseInt(o[a]) : o[a];
+      }), s;
+    },
+    [o]
+  );
+  function k(e) {
+    if (e.preventDefault(), E()) {
+      const m = M(u);
+      v(m);
+    }
+  }
+  function B() {
+    d(), F();
+  }
+  w(() => {
+    d();
+  }, []);
+  const D = {
+    ...K.form,
+    ...S
+  };
+  return /* @__PURE__ */ N("form", { style: D, children: [
+    Object.keys(o).length && u.map((e) => {
+      const s = V.find(
+        (a) => a.field === e.name
+      ), m = {
+        ...e,
+        value: o[e.name],
+        handleChange: C,
+        error: !!s,
+        helperText: s == null ? void 0 : s.message
+      };
+      if (e.type === "custom" && e.customComponent) {
+        const a = O[e.customComponent];
+        if (a)
+          return /* @__PURE__ */ l(a, { ...m }, e.name);
+      } else
+        return /* @__PURE__ */ l(A, { ...m }, e.name);
+    }),
+    /* @__PURE__ */ l(j, { type: "submit", onClick: k, children: _ }),
+    /* @__PURE__ */ l(j, { onClick: B, children: y })
+  ] });
+};
+export {
+  J as default
+};

package/dist/components/organ/ZoomControlWithDrag/ZoomControllers.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { Z as a } from "../../../ZoomControllers-7fb8d495.js";
+import { Z as a } from "../../../ZoomControllers-2e737c18.js";
 export {
   a as default
 };

package/dist/components/organ/ZoomControlWithDrag/index.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as y } from "react/jsx-runtime";
 import { useState as x, useEffect as n, useMemo as w } from "react";
-import { B as m, T as C, Z as S, a as W } from "../../../ZoomControllers-7fb8d495.js";
+import { B as m, T as C, Z as S, a as W } from "../../../ZoomControllers-2e737c18.js";
 const D = {
   position: "relative",
   borderRadius: "1rem",

package/dist/{createSvgIcon-58aa3adf.js → createSvgIcon-5180e4db.js}

@@ -1,7 +1,7 @@
-import { g as b, c as h, _ as w, a as y, P as o } from "./createTheme-a4db2989.js";
+import { g as b, c as h, _ as w, a as y, P as o } from "./createTheme-54078d82.js";
 import * as v from "react";
 import { jsxs as C, jsx as z } from "react/jsx-runtime";
-import { g as T, s as N, a as R, c as O, b as B } from "./styled-126c6a62.js";
+import { g as T, s as N, a as R, c as O, b as B } from "./styled-2bc0b59e.js";
 function j(e) {
   return b("MuiSvgIcon", e);
 }

package/dist/createSvgIcon-78477fc1.js

@@ -0,0 +1,81 @@
+import { a as _, C as g, c as E, h as b } from "./createTheme-54078d82.js";
+import { c as y } from "./createSvgIcon-5180e4db.js";
+import { c as C, d as N, i as S, o as I, a as $, u as x, b as T } from "./Grow-d188a215.js";
+import { s as q, a as P, b as w, u as D, c as O } from "./TransitionGroupContext-7cd3ef83.js";
+import { u as R } from "./unsupportedProp-3dbf01f6.js";
+function M(e, r) {
+  return process.env.NODE_ENV === "production" ? () => null : (t, u, s, n, o) => {
+    const a = s || "<<anonymous>>", i = o || u;
+    return typeof t[u] < "u" ? new Error(`The ${n} \`${i}\` of \`${a}\` is deprecated. ${r}`) : null;
+  };
+}
+function F(e, r) {
+  if (process.env.NODE_ENV === "production")
+    return () => null;
+  const t = r ? _({}, r.propTypes) : null;
+  return (s) => (n, o, a, i, l, ...v) => {
+    const f = l || o, p = t == null ? void 0 : t[f];
+    if (p) {
+      const d = p(n, o, a, i, l, ...v);
+      if (d)
+        return d;
+    }
+    return typeof n[o] < "u" && !n[s] ? new Error(`The prop \`${f}\` of \`${e}\` can only be used together with the \`${s}\` prop.`) : null;
+  };
+}
+const k = {
+  configure: (e) => {
+    process.env.NODE_ENV !== "production" && console.warn(["MUI: `ClassNameGenerator` import from `@mui/material/utils` is outdated and might cause unexpected issues.", "", "You should use `import { unstable_ClassNameGenerator } from '@mui/material/className'` instead", "", "The detail of the issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401", "", "The updated documentation: https://mui.com/guides/classname-generator/"].join(`
+`)), g.configure(e);
+  }
+}, G = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  capitalize: E,
+  createChainedFunction: C,
+  createSvgIcon: y,
+  debounce: N,
+  deprecatedPropType: M,
+  isMuiElement: S,
+  ownerDocument: I,
+  ownerWindow: $,
+  requirePropFactory: F,
+  setRef: q,
+  unstable_ClassNameGenerator: k,
+  unstable_useEnhancedEffect: P,
+  unstable_useId: x,
+  unsupportedProp: R,
+  useControlled: T,
+  useEventCallback: w,
+  useForkRef: D,
+  useIsFocusVisible: O
+}, Symbol.toStringTag, { value: "Module" }));
+var h = { exports: {} };
+(function(e) {
+  function r(t) {
+    return t && t.__esModule ? t : {
+      default: t
+    };
+  }
+  e.exports = r, e.exports.__esModule = !0, e.exports.default = e.exports;
+})(h);
+var Y = h.exports, c = {};
+const V = /* @__PURE__ */ b(G);
+var m;
+function B() {
+  return m || (m = 1, function(e) {
+    "use client";
+    Object.defineProperty(e, "__esModule", {
+      value: !0
+    }), Object.defineProperty(e, "default", {
+      enumerable: !0,
+      get: function() {
+        return r.createSvgIcon;
+      }
+    });
+    var r = V;
+  }(c)), c;
+}
+export {
+  Y as i,
+  B as r
+};

package/dist/{createTheme-a4db2989.js → createTheme-54078d82.js}

@@ -2210,10 +2210,10 @@ export {
   On as e,
   En as f,
   Ft as g,
-  zr as h,
+  vn as h,
   oe as i,
-  It as j,
-  vn as k,
+  zr as j,
+  It as k,
   Fr as l,
   ae as m,
   F as n,

package/dist/dividerClasses-68f129df.js

@@ -0,0 +1,10 @@
+import { g as t } from "./styled-2bc0b59e.js";
+import { g as e } from "./createTheme-54078d82.js";
+function a(i) {
+  return e("MuiDivider", i);
+}
+const r = t("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]), d = r;
+export {
+  d,
+  a as g
+};

package/dist/{exactProp-d79ccada.js → exactProp-893ad662.js}

@@ -1,4 +1,4 @@
-import { a as n } from "./createTheme-a4db2989.js";
+import { a as n } from "./createTheme-54078d82.js";
 const s = "exact-prop: ​";
 function u(e) {
   return process.env.NODE_ENV === "production" ? e : n({}, e, {

package/dist/{extendSxProp-db8b9da5.js → extendSxProp-8c660b3a.js}

@@ -1,4 +1,4 @@
-import { _ as a, a as i, d as c, i as f } from "./createTheme-a4db2989.js";
+import { _ as a, a as i, d as c, i as f } from "./createTheme-54078d82.js";
 const x = ["sx"], P = (t) => {
   var s, o;
   const n = {

package/dist/global/theme.js

@@ -1,5 +1,5 @@
 import "../assets/theme.css";
-import { f as e } from "../createTheme-a4db2989.js";
+import { f as e } from "../createTheme-54078d82.js";
 const f = {
   50: "#fffde7",
   100: "#fff9c4",

package/dist/main.d.ts

@@ -1,10 +1,12 @@
-import Chip from "./components/cell/Chip";
+import AvatarGroup from "./components/cell/AvatarGroup";
 import Button from "./components/cell/Button";
+import Chip from "./components/cell/Chip";
 import ProgressBar from "./components/cell/ProgressBar";
 import Search from "./components/cell/Search";
 import Typography from "./components/cell/Typography";
-import AvatarGroup from "./components/cell/AvatarGroup";
+import Form from "./components/organ/Form";
+import * as FormTypes from "./components/organ/Form/Form.interfaces";
 import ZoomControlWithDrag from "./components/organ/ZoomControlWithDrag";
-export { Button, ProgressBar, Search, Chip, Typography, AvatarGroup, ZoomControlWithDrag, };
+export { AvatarGroup, Button, Chip, Form, FormTypes, ProgressBar, Search, Typography, ZoomControlWithDrag, };
 export * from "./global/interfaces";
 export * from "./providers";

package/dist/main.js

@@ -1,18 +1,22 @@
-import { default as a } from "./components/cell/Chip/index.js";
-import { default as e } from "./components/cell/Button/index.js";
-import { default as p } from "./components/cell/ProgressBar/index.js";
-import { default as s } from "./components/cell/Search/index.js";
-import { default as d } from "./components/cell/Typography/index.js";
-import { default as x } from "./components/cell/AvatarGroup/index.js";
-import { default as g } from "./components/organ/ZoomControlWithDrag/index.js";
-import { default as C } from "./providers/CraftThemeProvider.js";
+import { default as a } from "./components/cell/AvatarGroup/index.js";
+import { default as t } from "./components/cell/Button/index.js";
+import { default as p } from "./components/cell/Chip/index.js";
+import { default as s } from "./components/cell/ProgressBar/index.js";
+import { default as d } from "./components/cell/Search/index.js";
+import { default as x } from "./components/cell/Typography/index.js";
+import { default as g } from "./components/organ/Form/index.js";
+import { F as y } from "./Form.interfaces-c9b49688.js";
+import { default as F } from "./components/organ/ZoomControlWithDrag/index.js";
+import { default as n } from "./providers/CraftThemeProvider.js";
 export {
-  x as AvatarGroup,
-  e as Button,
-  a as Chip,
-  C as CraftThemeProvider,
-  p as ProgressBar,
-  s as Search,
-  d as Typography,
-  g as ZoomControlWithDrag
+  a as AvatarGroup,
+  t as Button,
+  p as Chip,
+  n as CraftThemeProvider,
+  g as Form,
+  y as FormTypes,
+  s as ProgressBar,
+  d as Search,
+  x as Typography,
+  F as ZoomControlWithDrag
 };

package/dist/providers/CraftThemeProvider.js

@@ -2,9 +2,9 @@ import { jsx as u } from "react/jsx-runtime";
 import * as p from "react";
 import { useMemo as O } from "react";
 import { defaultTheme as P } from "../global/theme.js";
-import { P as n, a as c, _ as D, f as j, n as V } from "../createTheme-a4db2989.js";
+import { P as n, a as c, _ as D, f as j, n as V } from "../createTheme-54078d82.js";
 import { c as b, a as g, T as f } from "../useThemeWithoutDefault-188598a8.js";
-import { e as v } from "../exactProp-d79ccada.js";
+import { e as v } from "../exactProp-893ad662.js";
 const l = /* @__PURE__ */ p.createContext(null);
 process.env.NODE_ENV !== "production" && (l.displayName = "ThemeContext");
 const E = l;

package/dist/{styled-126c6a62.js → styled-2bc0b59e.js}

@@ -1,7 +1,7 @@
-import { a as E, g as we, h as re, _ as ne, c as z, s as Ce, f as xe } from "./createTheme-a4db2989.js";
+import { a as E, g as we, j as re, _ as ne, c as z, s as Ce, f as xe } from "./createTheme-54078d82.js";
 import { m as ke, w as Oe, a as $e, g as Ae, s as Fe, r as Me, b as Ie, i as Le, c as Ne, T as oe } from "./useThemeWithoutDefault-188598a8.js";
 import * as F from "react";
-var j = { exports: {} }, f = {};
+var V = { exports: {} }, f = {};
 /**
  * @license React
  * react-is.production.min.js
@@ -104,8 +104,8 @@ function ze() {
     }
     function y(s) {
       if (typeof s == "object" && s !== null) {
-        var V = s.$$typeof;
-        switch (V) {
+        var j = s.$$typeof;
+        switch (j) {
           case e:
             var D = s.type;
             switch (D) {
@@ -126,11 +126,11 @@ function ze() {
                   case l:
                     return W;
                   default:
-                    return V;
+                    return j;
                 }
             }
           case t:
-            return V;
+            return j;
         }
       }
     }
@@ -180,21 +180,21 @@ function ze() {
     d.ContextConsumer = w, d.ContextProvider = O, d.Element = $, d.ForwardRef = C, d.Fragment = u, d.Lazy = x, d.Memo = L, d.Portal = N, d.Profiler = Y, d.StrictMode = A, d.Suspense = ue, d.SuspenseList = fe, d.isAsyncMode = de, d.isConcurrentMode = me, d.isContextConsumer = pe, d.isContextProvider = he, d.isElement = ye, d.isForwardRef = ve, d.isFragment = ge, d.isLazy = Se, d.isMemo = _e, d.isPortal = be, d.isProfiler = Ee, d.isStrictMode = Te, d.isSuspense = Pe, d.isSuspenseList = Re, d.isValidElementType = _, d.typeOf = y;
   }()), d;
 }
-process.env.NODE_ENV === "production" ? j.exports = De() : j.exports = ze();
-var G = j.exports;
+process.env.NODE_ENV === "production" ? V.exports = De() : V.exports = ze();
+var G = V.exports;
 const Ye = /^\s*function(?:\s|\s*\/\*.*\*\/\s*)+([^(\s/]*)\s*/;
-function Ve(e) {
+function je(e) {
   const t = `${e}`.match(Ye);
   return t && t[1] || "";
 }
 function ie(e, t = "") {
-  return e.displayName || e.name || Ve(e) || t;
+  return e.displayName || e.name || je(e) || t;
 }
 function K(e, t, n) {
   const r = ie(t);
   return e.displayName || (r !== "" ? `${n}(${r})` : n);
 }
-function je(e) {
+function Ve(e) {
   if (e != null) {
     if (typeof e == "string")
       return e;
@@ -639,7 +639,7 @@ function ct(e = {}) {
       const C = k(O, ...w);
       if (process.env.NODE_ENV !== "production") {
         let u;
-        m && (u = `${m}${z(h || "")}`), u === void 0 && (u = `Styled(${je(a)})`), C.displayName = u;
+        m && (u = `${m}${z(h || "")}`), u === void 0 && (u = `Styled(${Ve(a)})`), C.displayName = u;
       }
       return a.muiName && (C.muiName = a.muiName), C;
     };

package/dist/{useTheme-573c40a2.js → useTheme-e2efed29.js}

@@ -1,5 +1,5 @@
 import * as o from "react";
-import { u as r, d as s } from "./styled-126c6a62.js";
+import { u as r, d as s } from "./styled-2bc0b59e.js";
 import { T as t } from "./useThemeWithoutDefault-188598a8.js";
 function a() {
   const e = r(s);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loopr-ai/craft",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Component library based out of Material UI customized to support Loopr AI products",
   "homepage": "https://loopr.ai",
   "author": {