payout-widget - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

lib/cjs/index.d.ts

 import { FC } from "react";
-import "react-phone-input-2/lib/style.css";
 interface PayoutWidgetProps {
     token?: string;
+    clientId?: string;
+    theme?: {
+        primaryColor?: string;
+        fontFamily?: string;
+        mode?: "dark" | "light";
+    };
 }
 declare const PayoutWidget: FC<PayoutWidgetProps>;
 export default PayoutWidget;

lib/cjs/index.js

@@ -7,42 +7,56 @@ "use strict";
 var react_1 = __importDefault(require("react"));
-var input_1 = __importDefault(require("antd/lib/input"));
-var button_1 = __importDefault(require("antd/lib/button"));
+var button_1 = __importDefault(require("./components/button"));
 var form_1 = __importDefault(require("antd/lib/form"));
-var notification_1 = __importDefault(require("antd/lib/notification"));
-var select_1 = __importDefault(require("antd/lib/select"));
-var statistic_1 = __importDefault(require("antd/lib/statistic"));
-var react_phone_input_2_1 = __importDefault(require("react-phone-input-2"));
-var avatar_1 = __importDefault(require("antd/lib/avatar"));
-var popover_1 = __importDefault(require("antd/lib/popover"));
-require("react-phone-input-2/lib/style.css");
+var wizard_text_input_1 = __importDefault(require("./components/wizard-inputs/wizard-text-input"));
+var wizard_select_input_1 = __importDefault(require("./components/wizard-inputs/wizard-select-input"));
+var wizard_phone_input_1 = __importDefault(require("./components/wizard-inputs/wizard-phone-input"));
+var wizard_amount_input_1 = __importDefault(require("./components/wizard-inputs/wizard-amount-input"));
+var currencies_1 = require("./data/currencies");
+var details_row_1 = __importDefault(require("./components/data-display/details-row"));
 var PayoutWidget = function (_a) {
+    var theme = _a.theme;
     var form = form_1.default.useForm()[0];
-    var formInstance = form_1.default.useFormInstance();
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(form_1.default, { form: form },
-            react_1.default.createElement(form_1.default.Item, null,
-                react_1.default.createElement(input_1.default, null)),
-            react_1.default.createElement(react_phone_input_2_1.default, { enableSearch: true, disableSearchIcon: true, specialLabel: "", dropdownStyle: {
-                    fontSize: 14,
-                    color: "#575962",
-                    fontFamily: "Soleil,'sans-serif'",
-                } }),
-            react_1.default.createElement(select_1.default, null,
-                react_1.default.createElement(select_1.default.Option, null, "Hello world")),
-            react_1.default.createElement(button_1.default, { onClick: function () {
-                    notification_1.default.success({
-                        message: "test",
-                    });
-                    formInstance.getFieldsValue();
-                } }, "Hello World")),
-        react_1.default.createElement(statistic_1.default, { precision: 2, value: 1000, className: "statistic" }),
-        react_1.default.createElement(avatar_1.default, { size: 20, shape: "circle", src: "", style: {
-                marginRight: ".7rem",
-            } }),
-        react_1.default.createElement(popover_1.default, { trigger: "hover", content: "Test" },
-            react_1.default.createElement("span", { style: {
-                    display: "inline-flex",
-                    alignItems: "center",
-                } }, "Test"))));
+    form_1.default.useWatch(["test"], form);
+    var primaryColor = (theme === null || theme === void 0 ? void 0 : theme.primaryColor) || "#FDDC01";
+    var styles = {
+        "--primary-color": primaryColor,
+        "--button-color": primaryColor === "#FDDC01" ? "#454E57" : "white",
+    };
+    return (react_1.default.createElement("div", { style: styles },
+        react_1.default.createElement(form_1.default, { form: form, name: ((theme === null || theme === void 0 ? void 0 : theme.mode) || "") + "form", onFinish: function (values) {
+                console.log(values, "values");
+            }, initialValues: {
+                test: "Test",
+                password: "password",
+                xtx: "255655",
+                channel: "TEST",
+                amount: "10000",
+                currency: "TZS",
+            } },
+            react_1.default.createElement(wizard_text_input_1.default, { name: "test", label: "Name", placeholder: "test", mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
+            react_1.default.createElement(wizard_amount_input_1.default, { currency: {
+                    options: currencies_1.currencies,
+                }, label: "Amount", mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
+            react_1.default.createElement(wizard_text_input_1.default, { textarea: true, label: "Textarea", name: "carres", mode: theme === null || theme === void 0 ? void 0 : theme.mode, placeholder: "Helo" }),
+            react_1.default.createElement(wizard_select_input_1.default, { options: [
+                    {
+                        label: "TEST",
+                        value: "TEST",
+                    },
+                ], name: "channel", theme: theme === null || theme === void 0 ? void 0 : theme.mode, label: "Channel", placeholder: "Select Channel" }),
+            react_1.default.createElement(wizard_phone_input_1.default, { name: "xtx", label: "Phone Number", mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
+            react_1.default.createElement(button_1.default, null, "Submit")),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(details_row_1.default, { status: {
+                    label: "Test",
+                    color: "blue",
+                    name: form.getFieldValue("test"),
+                }, mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
+            react_1.default.createElement(details_row_1.default, { text: {
+                    type: "date",
+                    label: "Date",
+                    value: new Date().toISOString(),
+                }, mode: theme === null || theme === void 0 ? void 0 : theme.mode }))));
 };
 exports.default = PayoutWidget;

lib/esm/index.d.ts

 import { FC } from "react";
-import "react-phone-input-2/lib/style.css";
 interface PayoutWidgetProps {
     token?: string;
+    clientId?: string;
+    theme?: {
+        primaryColor?: string;
+        fontFamily?: string;
+        mode?: "dark" | "light";
+    };
 }
 declare const PayoutWidget: FC<PayoutWidgetProps>;
 export default PayoutWidget;

lib/esm/index.js

 import React from "react";
-import Input from "antd/lib/input";
-import Button from "antd/lib/button";
+import Button from "./components/button";
 import Form from "antd/lib/form";
-import notification from "antd/lib/notification";
-import Select from "antd/lib/select";
-import Statistic from "antd/lib/statistic";
-import PhoneInput2 from "react-phone-input-2";
-import Avatar from "antd/lib/avatar";
-import Popover from "antd/lib/popover";
-import "react-phone-input-2/lib/style.css";
+import WizardTextInput from "./components/wizard-inputs/wizard-text-input";
+import WizardSelectInput from "./components/wizard-inputs/wizard-select-input";
+import WizardPhoneInput from "./components/wizard-inputs/wizard-phone-input";
+import WizardAmountInput from "./components/wizard-inputs/wizard-amount-input";
+import { currencies } from "./data/currencies";
+import DetailsRow from "./components/data-display/details-row";
 var PayoutWidget = function (_a) {
+    var theme = _a.theme;
     var form = Form.useForm()[0];
-    var formInstance = Form.useFormInstance();
-    return (React.createElement("div", null,
-        React.createElement(Form, { form: form },
-            React.createElement(Form.Item, null,
-                React.createElement(Input, null)),
-            React.createElement(PhoneInput2, { enableSearch: true, disableSearchIcon: true, specialLabel: "", dropdownStyle: {
-                    fontSize: 14,
-                    color: "#575962",
-                    fontFamily: "Soleil,'sans-serif'",
-                } }),
-            React.createElement(Select, null,
-                React.createElement(Select.Option, null, "Hello world")),
-            React.createElement(Button, { onClick: function () {
-                    notification.success({
-                        message: "test",
-                    });
-                    formInstance.getFieldsValue();
-                } }, "Hello World")),
-        React.createElement(Statistic, { precision: 2, value: 1000, className: "statistic" }),
-        React.createElement(Avatar, { size: 20, shape: "circle", src: "", style: {
-                marginRight: ".7rem",
-            } }),
-        React.createElement(Popover, { trigger: "hover", content: "Test" },
-            React.createElement("span", { style: {
-                    display: "inline-flex",
-                    alignItems: "center",
-                } }, "Test"))));
+    Form.useWatch(["test"], form);
+    var primaryColor = (theme === null || theme === void 0 ? void 0 : theme.primaryColor) || "#FDDC01";
+    var styles = {
+        "--primary-color": primaryColor,
+        "--button-color": primaryColor === "#FDDC01" ? "#454E57" : "white",
+    };
+    return (React.createElement("div", { style: styles },
+        React.createElement(Form, { form: form, name: ((theme === null || theme === void 0 ? void 0 : theme.mode) || "") + "form", onFinish: function (values) {
+                console.log(values, "values");
+            }, initialValues: {
+                test: "Test",
+                password: "password",
+                xtx: "255655",
+                channel: "TEST",
+                amount: "10000",
+                currency: "TZS",
+            } },
+            React.createElement(WizardTextInput, { name: "test", label: "Name", placeholder: "test", mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
+            React.createElement(WizardAmountInput, { currency: {
+                    options: currencies,
+                }, label: "Amount", mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
+            React.createElement(WizardTextInput, { textarea: true, label: "Textarea", name: "carres", mode: theme === null || theme === void 0 ? void 0 : theme.mode, placeholder: "Helo" }),
+            React.createElement(WizardSelectInput, { options: [
+                    {
+                        label: "TEST",
+                        value: "TEST",
+                    },
+                ], name: "channel", theme: theme === null || theme === void 0 ? void 0 : theme.mode, label: "Channel", placeholder: "Select Channel" }),
+            React.createElement(WizardPhoneInput, { name: "xtx", label: "Phone Number", mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
+            React.createElement(Button, null, "Submit")),
+        React.createElement("br", null),
+        React.createElement("div", null,
+            React.createElement(DetailsRow, { status: {
+                    label: "Test",
+                    color: "blue",
+                    name: form.getFieldValue("test"),
+                }, mode: theme === null || theme === void 0 ? void 0 : theme.mode }),
+            React.createElement(DetailsRow, { text: {
+                    type: "date",
+                    label: "Date",
+                    value: new Date().toISOString(),
+                }, mode: theme === null || theme === void 0 ? void 0 : theme.mode }))));
 };
 export default PayoutWidget;

package.json

 {
   "name": "payout-widget",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
@@ -17,3 +17,4 @@ "main": "./lib/cjs/index.js",
     "build:esm": "tsc",
-    "build:cjs": "tsc --module commonjs --outDir lib/cjs"
+    "build:cjs": "tsc --module commonjs --outDir lib/cjs",
+    "watch": "tsc-watch --onSuccess 'npm run build'"
   },
@@ -31,3 +32,6 @@ "author": "Benedict",
     "copyfiles": "^2.4.1",
+    "dayjs": "^1.11.12",
     "rimraf": "^3.0.2",
+    "sass": "^1.77.8",
+    "tsc-watch": "^6.2.0",
     "typescript": "^4.7.4"
@@ -39,4 +43,5 @@ },
   "dependencies": {
+    "react-currency-input-field": "^3.8.0",
     "react-phone-input-2": "^2.15.1"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

736564

increased by8744.43%

Number of package files

82

increased by1266.67%

Lines of code

6501

increased by6211.65%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

9

increased by50%

Number of low supply chain risk alerts

17

increased by1600%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-currency-input-field@^3.8.0

• + Addedreact-currency-input-field@3.9.0(transitive)