@loopr-ai/craft 0.6.0 → 0.7.1

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 styles: {
+    [key: string]: React.CSSProperties;
+};
+export default styles;

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

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

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

@@ -1,5 +1,6 @@
 import "react/jsx-runtime";
-import { Z as a } from "../../../ZoomControllers-7fb8d495.js";
+import { Z as p } from "../../../ZoomControllers-8a147df0.js";
+import "../../../Box-8cd400c2.js";
 export {
-  a as default
+  p as default
 };

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

@@ -1,14 +1,15 @@
 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 { T as C, Z as S, a as W } from "../../../ZoomControllers-8a147df0.js";
+import { B as m } from "../../../Box-8cd400c2.js";
 const D = {
   position: "relative",
   borderRadius: "1rem",
   overflow: "hidden"
-}, v = ({
+}, B = ({
   children: c,
-  parentContainerProps: l,
-  zoomControllerProps: f,
+  parentContainerProps: f,
+  zoomControllerProps: l,
   defaultRotationAngle: p,
   onRotate: o,
   height: s,
@@ -16,38 +17,38 @@ const D = {
   rotatedImageScale: i = 0.55,
   ...d
 }) => {
-  const [r, h] = x(p ?? "0");
+  const [e, h] = x(p ?? "0");
   function u() {
-    h((e) => ((parseInt(e) + 90) % 360).toString());
+    h((r) => ((parseInt(r) + 90) % 360).toString());
   }
   n(() => {
-    const e = document.querySelector(".react-transform-wrapper");
-    e && (e.style.width = "100%", e.style.height = "100%");
+    const r = document.querySelector(".react-transform-wrapper");
+    r && (r.style.width = "100%", r.style.height = "100%");
   }, []), n(() => {
-    const e = document.querySelector(".react-transform-component");
-    e && (e.style.transformOrigin = "center center", e.style.height = s ?? "100%", e.style.width = a ?? "100%");
+    const r = document.querySelector(".react-transform-component");
+    r && (r.style.transformOrigin = "center center", r.style.height = s ?? "100%", r.style.width = a ?? "100%");
   }, [a, s]), n(() => {
-    o == null || o(r);
-  }, [r]);
+    o == null || o(e);
+  }, [e]);
   const g = w(() => ({
-    transform: `rotate(${r}deg) scale(${parseInt(r) === 0 || parseInt(r) === 180 ? 1 : i})`,
+    transform: `rotate(${e}deg) scale(${parseInt(e) === 0 || parseInt(e) === 180 ? 1 : i})`,
     width: "100%",
     height: "100%",
     "& img": {
       height: "100%"
     }
-  }), [r, i]);
+  }), [e, i]);
   return /* @__PURE__ */ t(
     m,
     {
       sx: D,
-      ...l,
+      ...f,
       children: /* @__PURE__ */ y(C, { ...d, children: [
         /* @__PURE__ */ t(
           S,
           {
             handleRotate: u,
-            ...f
+            ...l
           }
         ),
         /* @__PURE__ */ t(W, { children: /* @__PURE__ */ t(m, { sx: g, children: c }) })
@@ -56,5 +57,5 @@ const D = {
   );
 };
 export {
-  v as default
+  B as default
 };

package/dist/createSvgIcon-8e5d9dc7.js

@@ -0,0 +1,81 @@
+import { a as _, C as g, b, h as E } from "./createTheme-ca1567c6.js";
+import { c as y } from "./createSvgIcon-bb3d4825.js";
+import { c as C, d as N, i as S, o as I, a as $, u as x, b as T } from "./Grow-a906cda2.js";
+import { s as q, a as P, b as w, u as D, c as O } from "./TransitionGroupContext-ba502e63.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: b,
+  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__ */ E(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/{createSvgIcon-58aa3adf.js → createSvgIcon-bb3d4825.js}

@@ -1,9 +1,9 @@
-import { g as b, c as h, _ as w, a as y, P as o } from "./createTheme-a4db2989.js";
+import { g as I, b as h, _ as w, a as y, P as o } from "./createTheme-ca1567c6.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, a as N, b as R, c as O, e as B } from "./styled-80b57810.js";
 function j(e) {
-  return b("MuiSvgIcon", e);
+  return I("MuiSvgIcon", e);
 }
 T("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
 const A = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"], E = (e) => {
@@ -78,10 +78,10 @@ const A = ["children", "className", "color", "component", "fontSize", "htmlColor
     hasSvgAsChild: l
   }), x = {};
   m || (x.viewBox = a);
-  const I = E($);
+  const b = E($);
   return /* @__PURE__ */ C(V, y({
     as: c,
-    className: O(I.root, d),
+    className: O(b.root, d),
     focusable: "false",
     color: u,
     "aria-hidden": s ? void 0 : !0,

package/dist/{createTheme-a4db2989.js → createTheme-ca1567c6.js}

@@ -2204,16 +2204,16 @@ export {
   ue as P,
   se as _,
   U as a,
-  qr as b,
-  bt as c,
+  bt as b,
+  En as c,
   Ge as d,
-  On as e,
-  En as f,
+  qr as e,
+  On 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-0233db5a.js

@@ -0,0 +1,10 @@
+import { g as t } from "./styled-80b57810.js";
+import { g as e } from "./createTheme-ca1567c6.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-3d9df1ae.js}

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

package/dist/{extendSxProp-db8b9da5.js → extendSxProp-fc2654e5.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-ca1567c6.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 { c as e } from "../createTheme-ca1567c6.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, c as j, n as V } from "../createTheme-ca1567c6.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-3d9df1ae.js";
 const l = /* @__PURE__ */ p.createContext(null);
 process.env.NODE_ENV !== "production" && (l.displayName = "ThemeContext");
 const E = l;