@loopr-ai/craft 0.5.2 → 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.d.ts

@@ -2,34 +2,55 @@ export declare const defaultTheme: import("@mui/material").Theme;
 export declare const fontCustomizations: {
     headingLarge: {
         fontWeight: string;
-        fontSize: string;
+        fontSize: {
+            sm: string;
+            md: string;
+        };
     };
     headingMedium: {
         fontWeight: string;
-        fontSize: string;
+        fontSize: {
+            sm: string;
+            md: string;
+        };
     };
     headingSmall: {
         fontWeight: string;
-        fontSize: string;
+        fontSize: {
+            sm: string;
+            md: string;
+        };
     };
     bodyText: {
         fontWeight: string;
-        fontSize: string;
-    };
-    smallText: {
-        fontSize: string;
+        fontSize: {
+            sm: string;
+            md: string;
+        };
     };
     boldText: {
         fontWeight: string;
-        fontSize: string;
+        fontSize: {
+            sm: string;
+            md: string;
+        };
     };
     subtitleNormal: {
-        fontSize: string;
+        fontSize: {
+            sm: string;
+            md: string;
+        };
     };
     subtitleSmall: {
-        fontSize: string;
+        fontSize: {
+            sm: string;
+            md: string;
+        };
     };
     helperText: {
-        fontSize: string;
+        fontSize: {
+            sm: string;
+            md: string;
+        };
     };
 };

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",
@@ -16,61 +16,77 @@ const f = {
   A400: "#ffea00",
   A700: "#ffd600"
 }, t = f;
-const i = e({
+const n = e({
   palette: {
+    // define other things related to the theme/color here
     primary: {
       main: "#3C4FE0",
       dark: "#3F4DBA",
       contrastText: "white"
     },
     secondary: {
-      // light: yellow[400],
       main: t[500]
-      // dark: yellow[700],
-      // contrastText: '#fff'
     }
   },
   typography: {
     fontFamily: "DM Sans, sans-serif"
   }
-}), a = {
+}), r = {
   headingLarge: {
     fontWeight: "700",
-    fontSize: "1.5rem"
+    fontSize: {
+      sm: "1.375rem",
+      md: "1.5rem"
+    }
   },
   headingMedium: {
     fontWeight: "700",
-    fontSize: "1.25rem"
+    fontSize: {
+      sm: "1.125rem",
+      md: "1.25rem"
+    }
   },
   headingSmall: {
-    fontWeight: "500",
-    fontSize: "1rem"
+    fontWeight: "700",
+    fontSize: {
+      sm: "1rem",
+      md: "1.125rem"
+    }
   },
   bodyText: {
     fontWeight: "400",
-    fontSize: "1rem"
-  },
-  smallText: {
-    // fontWeight: "400",
-    fontSize: "0.875rem"
+    fontSize: {
+      sm: "0.875rem",
+      md: "1rem"
+    }
   },
   boldText: {
     fontWeight: "700",
-    fontSize: "1rem"
+    fontSize: {
+      sm: "0.875rem",
+      md: "1rem"
+    }
   },
   subtitleNormal: {
-    // fontWeight: "400",
-    fontSize: "0.875rem"
+    fontSize: {
+      sm: "0.75rem",
+      md: "0.875rem"
+    }
   },
   subtitleSmall: {
-    // fontWeight: "400",
-    fontSize: "0.8125rem"
+    fontSize: {
+      sm: "0.625rem",
+      md: "0.75rem"
+    }
   },
   helperText: {
-    fontSize: "0.5625rem"
+    fontSize: {
+      sm: "0.5rem",
+      md: "0.625rem"
+    }
   }
 };
 export {
-  i as defaultTheme,
-  a as fontCustomizations
+  n as defaultTheme,
+  r as fontCustomizations
 };

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;