@maif/react-forms 1.0.3 → 1.0.7

package/lib/style.d.ts

@@ -0,0 +1,156 @@
+export namespace style {
+    const input: {
+        display: string;
+        width: string;
+        padding: string;
+        fontSize: string;
+        color: string;
+        border: string;
+        borderRadius: number;
+        "&[readonly]": {
+            backgroundColor: string;
+            opacity: number;
+        };
+    };
+    namespace btn {
+        const borderRadius: number;
+        const padding: number;
+        const fontSize: string;
+        const cursor: string;
+        const border: number;
+    }
+    namespace btn_sm {
+        const fontSize_1: string;
+        export { fontSize_1 as fontSize };
+        const padding_1: string;
+        export { padding_1 as padding };
+    }
+    const btn_group: {
+        "& > button:not(:last-child)": {
+            borderTopRightRadius: number;
+            borderBottomRightRadius: number;
+        };
+        "& > button:not(:first-child)": {
+            borderTopLeftRadius: number;
+            borderBottomLeftRadius: number;
+        };
+    };
+    const btn_red: {
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
+        "&:hover": {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    const btn_green: {
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
+        "&:hover": {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    const btn_blue: {
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
+        "&:hover": {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    const btn_grey: {
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
+        "&:hover": {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    namespace txt_red {
+        const color: string;
+    }
+    namespace ml_5 {
+        const marginLeft: number;
+    }
+    namespace ml_10 {
+        const marginLeft_1: number;
+        export { marginLeft_1 as marginLeft };
+    }
+    namespace mt_5 {
+        const marginTop: number;
+    }
+    namespace mt_10 {
+        const marginTop_1: number;
+        export { marginTop_1 as marginTop };
+    }
+    namespace mt_20 {
+        const marginTop_2: number;
+        export { marginTop_2 as marginTop };
+    }
+    namespace mb_5 {
+        const marginBottom: number;
+    }
+    namespace p_15 {
+        const padding_2: number;
+        export { padding_2 as padding };
+    }
+    namespace pr_15 {
+        const paddingRight: number;
+    }
+    namespace d_none {
+        const display: string;
+    }
+    namespace flex {
+        const display_1: string;
+        export { display_1 as display };
+    }
+    namespace flexDirection {
+        const flexDirection_1: string;
+        export { flexDirection_1 as flexDirection };
+    }
+    namespace jc_end {
+        const justifyContent: string;
+    }
+    namespace ac_center {
+        const alignContent: string;
+    }
+    namespace ai_center {
+        const alignItems: string;
+    }
+    namespace cursor_pointer {
+        const cursor_1: string;
+        export { cursor_1 as cursor };
+    }
+    namespace collapse {
+        const display_2: string;
+        export { display_2 as display };
+        const justifyContent_1: string;
+        export { justifyContent_1 as justifyContent };
+        const cursor_2: string;
+        export { cursor_2 as cursor };
+    }
+    namespace collapse_label {
+        export const fontWeight: string;
+        const marginTop_3: number;
+        export { marginTop_3 as marginTop };
+    }
+    const datepicker: {
+        "& input": {
+            borderRadius: string;
+        };
+    };
+    const code: {};
+    namespace input__boolean__on {
+        const color_1: string;
+        export { color_1 as color };
+    }
+    namespace input__boolean__off {
+        const color_2: string;
+        export { color_2 as color };
+    }
+}

package/lib/style.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.style = void 0;
+var style = {
+  input: {
+    display: "block",
+    width: "100%",
+    padding: "8px 12px",
+    fontSize: "1rem",
+    color: "#495057",
+    border: "1px solid #ced4da",
+    borderRadius: 4,
+    "&[readonly]": {
+      backgroundColor: "#e9ecef",
+      opacity: 1
+    }
+  },
+  btn: {
+    borderRadius: 5,
+    padding: 10,
+    fontSize: "1rem",
+    cursor: "pointer",
+    border: 0
+  },
+  btn_sm: {
+    fontSize: "0.875rem",
+    padding: ".25rem .5rem"
+  },
+  btn_group: {
+    "& > button:not(:last-child)": {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    },
+    "& > button:not(:first-child)": {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    }
+  },
+  btn_red: {
+    color: "#fff",
+    backgroundColor: "#dc3545",
+    borderColor: "#dc3545",
+    "&:hover": {
+      backgroundColor: "#c82333",
+      borderColor: "#bd2130"
+    }
+  },
+  btn_green: {
+    color: "#fff",
+    backgroundColor: "#28a745",
+    borderColor: "#28a745",
+    "&:hover": {
+      backgroundColor: "#218838",
+      borderColor: "#1e7e34"
+    }
+  },
+  btn_blue: {
+    color: "#fff",
+    backgroundColor: "#007bff",
+    borderColor: "#007bff",
+    "&:hover": {
+      backgroundColor: "#0069d9",
+      borderColor: "#0062cc"
+    }
+  },
+  btn_grey: {
+    color: "#fff",
+    backgroundColor: "#6c757d",
+    borderColor: "#6c757d",
+    "&:hover": {
+      backgroundColor: "#5c636a",
+      borderColor: "#5c636a"
+    }
+  },
+  txt_red: {
+    color: "#dc3545"
+  },
+  ml_5: {
+    marginLeft: 5
+  },
+  ml_10: {
+    marginLeft: 10
+  },
+  mt_5: {
+    marginTop: 5
+  },
+  mt_10: {
+    marginTop: 10
+  },
+  mt_20: {
+    marginTop: 20
+  },
+  mb_5: {
+    marginBottom: 5
+  },
+  p_15: {
+    padding: 15
+  },
+  pr_15: {
+    paddingRight: 15
+  },
+  d_none: {
+    display: "none"
+  },
+  flex: {
+    display: "flex"
+  },
+  flexDirection: {
+    flexDirection: "column"
+  },
+  jc_end: {
+    justifyContent: "end"
+  },
+  ac_center: {
+    alignContent: "center"
+  },
+  ai_center: {
+    alignItems: "center"
+  },
+  cursor_pointer: {
+    cursor: "pointer"
+  },
+  collapse: {
+    display: "flex",
+    justifyContent: "space-between",
+    cursor: "pointer"
+  },
+  collapse_label: {
+    fontWeight: "bold",
+    marginTop: 7
+  },
+  datepicker: {
+    "& input": {
+      borderRadius: "4px"
+    }
+  },
+  code: {},
+  input__boolean__on: {
+    color: "MediumSeaGreen"
+  },
+  input__boolean__off: {
+    color: "tomato"
+  }
+};
+exports.style = style;

package/lib/styleContext.d.ts

@@ -0,0 +1 @@
+export function useCustomStyle(overrideStyle?: {}): import("jss").Classes<"code" | "flex" | "flexDirection" | "input" | "btn" | "btn_sm" | "btn_group" | "btn_red" | "btn_green" | "btn_blue" | "btn_grey" | "txt_red" | "ml_5" | "ml_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "d_none" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "collapse" | "collapse_label" | "datepicker" | "input__boolean__on" | "input__boolean__off">;

package/lib/styleContext.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCustomStyle = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactJss = require("react-jss");
+
+var _style = require("./style");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var useCustomStyle = function useCustomStyle() {
+  var overrideStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var useStyle = (0, _reactJss.createUseStyles)(_objectSpread(_objectSpread({}, _style.style), overrideStyle));
+  var classes = useStyle();
+  return classes;
+};
+
+exports.useCustomStyle = useCustomStyle;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.0.3",
+  "version": "1.0.7",
   "main": "lib/index.js",
   "author": "MAIF team",
   "keywords": [
@@ -113,8 +113,9 @@
     "react-ace": "9.4.3",
     "react-feather": "2.0.9",
     "react-hook-form": "7.17.1",
+    "react-jss": "10.8.2",
     "react-rainbow-components": "1.26.0",
-    "react-select": "4.3.1",
+    "react-select": "5.2.1",
     "react-tooltip": "4.2.21",
     "showdown": "1.9.1",
     "typescript": "^4.3.5",