@devtable/settings-form 2.0.0 → 2.3.0

package/dist/api-caller/datasource.d.ts

@@ -1,5 +1,5 @@
 import { DataSourceType, IDataSource, IDataSourceConfig } from "./datasource.typed";
-import { PaginationResponse } from "../../../website/src/api-caller/types";
+import { PaginationResponse } from "./types";
 export declare const datasource: {
     list: () => Promise<PaginationResponse<IDataSource>>;
     create: (type: DataSourceType, key: string, config: IDataSourceConfig) => Promise<PaginationResponse<IDataSource> | false>;

package/dist/api-caller/index.d.ts

@@ -1,7 +1,7 @@
 export declare const APICaller: {
     datasource: {
-        list: () => Promise<import("../../../website/src/api-caller/types").PaginationResponse<import("./datasource.typed").IDataSource>>;
-        create: (type: import("./datasource.typed").DataSourceType, key: string, config: import("./datasource.typed").IDataSourceConfig) => Promise<false | import("../../../website/src/api-caller/types").PaginationResponse<import("./datasource.typed").IDataSource>>;
+        list: () => Promise<import("./types").PaginationResponse<import("./datasource.typed").IDataSource>>;
+        create: (type: import("./datasource.typed").DataSourceType, key: string, config: import("./datasource.typed").IDataSourceConfig) => Promise<false | import("./types").PaginationResponse<import("./datasource.typed").IDataSource>>;
         delete: (id: string) => Promise<void>;
     };
 };

package/dist/api-caller/request.d.ts

@@ -0,0 +1,5 @@
+import { Method } from 'axios';
+export declare const APIClient: {
+    baseURL: string;
+    getRequest(method: Method): (url: string, data: any, options?: any) => Promise<any>;
+};

package/dist/api-caller/types.d.ts

@@ -0,0 +1,5 @@
+export declare type PaginationResponse<T> = {
+    total: number;
+    offset: number;
+    data: T[];
+};

package/dist/datasource/add-data-source.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import { IStyles } from "./styles";
 interface IAddDataSource {
+    styles?: IStyles;
     onSuccess: () => void;
 }
-export declare function AddDataSource({ onSuccess }: IAddDataSource): JSX.Element;
+export declare function AddDataSource({ onSuccess, styles }: IAddDataSource): JSX.Element;
 export {};

package/dist/datasource/data-source-list.d.ts

@@ -1,2 +1,9 @@
 /// <reference types="react" />
-export declare function DataSourceList(): JSX.Element;
+import { IStyles } from "./styles";
+import { ISettingsFormConfig } from "./types";
+interface IDataSourceList {
+    styles?: IStyles;
+    config: ISettingsFormConfig;
+}
+export declare function DataSourceList({ styles, config }: IDataSourceList): JSX.Element;
+export {};

package/dist/datasource/delete-data-source.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="react" />
-export declare function DeleteDataSource({ id, name, onSuccess }: {
+import { IStyles } from "./styles";
+interface IDeleteDataSource {
     id: string;
     name: string;
     onSuccess: () => void;
-}): JSX.Element;
+    styles?: IStyles;
+}
+export declare function DeleteDataSource({ id, name, onSuccess, styles }: IDeleteDataSource): JSX.Element;
+export {};

package/dist/datasource/styles.d.ts

@@ -0,0 +1,6 @@
+import { MantineSize } from "@mantine/core";
+export interface IStyles {
+    size: MantineSize;
+    spacing: MantineSize;
+}
+export declare const defaultStyles: IStyles;

package/dist/datasource/types.d.ts

@@ -0,0 +1,3 @@
+export interface ISettingsFormConfig {
+    apiBaseURL: string;
+}

package/dist/settings-form.es.js

@@ -6,34 +6,36 @@ import { PlaylistAdd, Trash } from "tabler-icons-react";
 import axios from "axios";
 import { useRequest } from "ahooks";
 import { useModals } from "@mantine/modals";
-const getRequest = (method) => {
-  return (url, data, options = {}) => {
-    const headers = {
-      "X-Requested-With": "XMLHttpRequest",
-      "Content-Type": options.string ? "application/x-www-form-urlencoded" : "application/json",
-      ...options.headers
-    };
-    const conf = {
-      baseURL: "http://localhost:31200",
-      method,
-      url,
-      params: method === "GET" ? data : options.params,
-      headers
+const APIClient = {
+  baseURL: "http://localhost:31200",
+  getRequest(method) {
+    return (url, data, options = {}) => {
+      const headers = {
+        "X-Requested-With": "XMLHttpRequest",
+        "Content-Type": options.string ? "application/x-www-form-urlencoded" : "application/json",
+        ...options.headers
+      };
+      const conf = {
+        baseURL: this.baseURL,
+        method,
+        url,
+        params: method === "GET" ? data : options.params,
+        headers
+      };
+      if (method === "POST") {
+        conf.data = options.string ? JSON.stringify(data) : data;
+      }
+      return axios(conf).then((res) => {
+        return res.data;
+      }).catch((err) => {
+        return Promise.reject(err);
+      });
     };
-    if (["POST", "PUT"].includes(method)) {
-      conf.data = options.string ? JSON.stringify(data) : data;
-    }
-    return axios(conf).then((res) => {
-      return res.data;
-    }).catch((err) => {
-      return Promise.reject(err);
-    });
-  };
+  }
 };
-const post = getRequest("POST");
 const datasource = {
   list: async () => {
-    const res = await post("/datasource/list", {
+    const res = await APIClient.getRequest("POST")("/datasource/list", {
       filter: {},
       sort: {
         field: "create_time",
@@ -48,7 +50,7 @@ const datasource = {
   },
   create: async (type, key, config) => {
     try {
-      const res = await post("/datasource/create", { type, key, config });
+      const res = await APIClient.getRequest("POST")("/datasource/create", { type, key, config });
       return res;
     } catch (error) {
       console.error(error);
@@ -56,12 +58,16 @@ const datasource = {
     }
   },
   delete: async (id) => {
-    await post("/datasource/delete", { id });
+    await APIClient.getRequest("POST")("/datasource/delete", { id });
   }
 };
 const APICaller = {
   datasource
 };
+const defaultStyles = {
+  size: "sm",
+  spacing: "md"
+};
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /**
@@ -96,7 +102,8 @@ const jsx = jsxRuntime.exports.jsx;
 const jsxs = jsxRuntime.exports.jsxs;
 const Fragment = jsxRuntime.exports.Fragment;
 function AddDataSourceForm({
-  postSubmit
+  postSubmit,
+  styles = defaultStyles
 }) {
   const {
     control,
@@ -159,7 +166,8 @@ function AddDataSourceForm({
           field
         }) => /* @__PURE__ */ jsx(SegmentedControl, {
           fullWidth: true,
-          mb: "md",
+          mb: styles.spacing,
+          size: styles.size,
           data: [{
             label: "PostgreSQL",
             value: "postgresql"
@@ -179,7 +187,8 @@ function AddDataSourceForm({
         render: ({
           field
         }) => /* @__PURE__ */ jsx(TextInput, {
-          mb: "md",
+          mb: styles.spacing,
+          size: styles.size,
           required: true,
           label: "Name",
           placeholder: "A unique name",
@@ -189,7 +198,6 @@ function AddDataSourceForm({
         label: "Connection Info",
         labelPosition: "center"
       }), /* @__PURE__ */ jsxs(Group, {
-        direction: "row",
         grow: true,
         children: [/* @__PURE__ */ jsx(Controller, {
           name: "config.host",
@@ -197,7 +205,8 @@ function AddDataSourceForm({
           render: ({
             field
           }) => /* @__PURE__ */ jsx(TextInput, {
-            mb: "md",
+            mb: styles.spacing,
+            size: styles.size,
             required: true,
             label: "Host",
             sx: {
@@ -211,7 +220,8 @@ function AddDataSourceForm({
           render: ({
             field
           }) => /* @__PURE__ */ jsx(NumberInput, {
-            mb: "md",
+            mb: styles.spacing,
+            size: styles.size,
             required: true,
             label: "Port",
             hideControls: true,
@@ -227,7 +237,8 @@ function AddDataSourceForm({
         render: ({
           field
         }) => /* @__PURE__ */ jsx(TextInput, {
-          mb: "md",
+          mb: styles.spacing,
+          size: styles.size,
           required: true,
           label: "Username",
           ...field
@@ -238,7 +249,8 @@ function AddDataSourceForm({
         render: ({
           field
         }) => /* @__PURE__ */ jsx(PasswordInput, {
-          mb: "md",
+          mb: styles.spacing,
+          size: styles.size,
           required: true,
           label: "Password",
           ...field
@@ -249,16 +261,18 @@ function AddDataSourceForm({
         render: ({
           field
         }) => /* @__PURE__ */ jsx(TextInput, {
-          mb: "md",
+          mb: styles.spacing,
+          size: styles.size,
           required: true,
           label: "Database",
           ...field
         })
       }), /* @__PURE__ */ jsx(Group, {
         position: "right",
-        mt: "md",
+        mt: styles.spacing,
         children: /* @__PURE__ */ jsx(Button, {
           type: "submit",
+          size: styles.size,
           children: "Save"
         })
       })]
@@ -266,7 +280,8 @@ function AddDataSourceForm({
   });
 }
 function AddDataSource({
-  onSuccess
+  onSuccess,
+  styles = defaultStyles
 }) {
   const [opened, setOpened] = require$$0.useState(false);
   const open = () => setOpened(true);
@@ -286,10 +301,11 @@ function AddDataSource({
         e.stopPropagation();
       },
       children: /* @__PURE__ */ jsx(AddDataSourceForm, {
-        postSubmit
+        postSubmit,
+        styles
       })
     }), /* @__PURE__ */ jsx(Button, {
-      size: "sm",
+      size: styles.size,
       onClick: open,
       leftIcon: /* @__PURE__ */ jsx(PlaylistAdd, {
         size: 20
@@ -301,7 +317,8 @@ function AddDataSource({
 function DeleteDataSource({
   id,
   name,
-  onSuccess
+  onSuccess,
+  styles = defaultStyles
 }) {
   const modals = useModals();
   const doDelete = async () => {
@@ -326,7 +343,7 @@ function DeleteDataSource({
   const confirmAndDelete = () => modals.openConfirmModal({
     title: "Delete this data source?",
     children: /* @__PURE__ */ jsx(Text, {
-      size: "sm",
+      size: styles.size,
       children: "This action won't affect your database."
     }),
     labels: {
@@ -337,7 +354,7 @@ function DeleteDataSource({
     onConfirm: doDelete
   });
   return /* @__PURE__ */ jsx(Button, {
-    size: "sm",
+    size: styles.size,
     color: "red",
     onClick: confirmAndDelete,
     leftIcon: /* @__PURE__ */ jsx(Trash, {
@@ -346,7 +363,10 @@ function DeleteDataSource({
     children: "Delete"
   });
 }
-function DataSourceList() {
+function DataSourceList({
+  styles = defaultStyles,
+  config
+}) {
   const {
     data = [],
     loading,
@@ -359,24 +379,27 @@ function DataSourceList() {
   }, {
     refreshDeps: []
   });
+  if (APIClient.baseURL !== config.apiBaseURL) {
+    APIClient.baseURL = config.apiBaseURL;
+  }
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(Group, {
-      pt: "md",
+      pt: styles.spacing,
       position: "right",
       children: /* @__PURE__ */ jsx(AddDataSource, {
         onSuccess: refresh
       })
     }), /* @__PURE__ */ jsxs(Box, {
-      mt: "xl",
+      mt: styles.spacing,
       sx: {
         position: "relative"
       },
       children: [/* @__PURE__ */ jsx(LoadingOverlay, {
         visible: loading
       }), /* @__PURE__ */ jsxs(Table, {
-        horizontalSpacing: "md",
-        verticalSpacing: "md",
-        fontSize: "md",
+        horizontalSpacing: styles.spacing,
+        verticalSpacing: styles.spacing,
+        fontSize: styles.size,
         highlightOnHover: true,
         children: [/* @__PURE__ */ jsx("thead", {
           children: /* @__PURE__ */ jsxs("tr", {

package/dist/settings-form.umd.js

@@ -1,4 +1,4 @@
-(function(o,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("@mantine/core"),require("react-hook-form"),require("@mantine/notifications"),require("react"),require("tabler-icons-react"),require("axios"),require("ahooks"),require("@mantine/modals")):typeof define=="function"&&define.amd?define(["exports","@mantine/core","react-hook-form","@mantine/notifications","react","tabler-icons-react","axios","ahooks","@mantine/modals"],a):(o=typeof globalThis!="undefined"?globalThis:o||self,a(o["settings-form"]={},o["@mantine/core"],o["react-hook-form"],o["@mantine/notifications"],o.React,o["tabler-icons-react"],o.axios,o.ahooks,o["@mantine/modals"]))})(this,function(o,a,c,m,v,b,C,T,P){"use strict";function y(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var x=y(v),O=y(C);const g=(t=>(r,i,n={})=>{const s={"X-Requested-With":"XMLHttpRequest","Content-Type":n.string?"application/x-www-form-urlencoded":"application/json",...n.headers},l={baseURL:"http://localhost:31200",method:t,url:r,params:t==="GET"?i:n.params,headers:s};return["POST","PUT"].includes(t)&&(l.data=n.string?JSON.stringify(i):i),O.default(l).then(u=>u.data).catch(u=>Promise.reject(u))})("POST"),S={datasource:{list:async()=>await g("/datasource/list",{filter:{},sort:{field:"create_time",order:"ASC"},pagination:{page:1,pagesize:100}}),create:async(t,r,i)=>{try{return await g("/datasource/create",{type:t,key:r,config:i})}catch(n){return console.error(n),!1}},delete:async t=>{await g("/datasource/delete",{id:t})}}};var p={exports:{}},h={};/**
+(function(o,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("@mantine/core"),require("react-hook-form"),require("@mantine/notifications"),require("react"),require("tabler-icons-react"),require("axios"),require("ahooks"),require("@mantine/modals")):typeof define=="function"&&define.amd?define(["exports","@mantine/core","react-hook-form","@mantine/notifications","react","tabler-icons-react","axios","ahooks","@mantine/modals"],i):(o=typeof globalThis!="undefined"?globalThis:o||self,i(o["settings-form"]={},o["@mantine/core"],o["react-hook-form"],o["@mantine/notifications"],o.React,o["tabler-icons-react"],o.axios,o.ahooks,o["@mantine/modals"]))})(this,function(o,i,u,p,T,z,P,R,L){"use strict";function q(r){return r&&typeof r=="object"&&"default"in r?r:{default:r}}var w=q(T),O=q(P);const m={baseURL:"http://localhost:31200",getRequest(r){return(e,a,n={})=>{const l={"X-Requested-With":"XMLHttpRequest","Content-Type":n.string?"application/x-www-form-urlencoded":"application/json",...n.headers},s={baseURL:this.baseURL,method:r,url:e,params:r==="GET"?a:n.params,headers:l};return r==="POST"&&(s.data=n.string?JSON.stringify(a):a),O.default(s).then(d=>d.data).catch(d=>Promise.reject(d))}}},x={datasource:{list:async()=>await m.getRequest("POST")("/datasource/list",{filter:{},sort:{field:"create_time",order:"ASC"},pagination:{page:1,pagesize:100}}),create:async(r,e,a)=>{try{return await m.getRequest("POST")("/datasource/create",{type:r,key:e,config:a})}catch(n){return console.error(n),!1}},delete:async r=>{await m.getRequest("POST")("/datasource/delete",{id:r})}}},g={size:"sm",spacing:"md"};var S={exports:{}},b={};/**
  * @license React
  * react-jsx-runtime.production.min.js
  *
@@ -6,4 +6,4 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var j=x.default,A=Symbol.for("react.element"),R=Symbol.for("react.fragment"),I=Object.prototype.hasOwnProperty,N=j.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,L={key:!0,ref:!0,__self:!0,__source:!0};function w(t,r,i){var n,s={},l=null,u=null;i!==void 0&&(l=""+i),r.key!==void 0&&(l=""+r.key),r.ref!==void 0&&(u=r.ref);for(n in r)I.call(r,n)&&!L.hasOwnProperty(n)&&(s[n]=r[n]);if(t&&t.defaultProps)for(n in r=t.defaultProps,r)s[n]===void 0&&(s[n]=r[n]);return{$$typeof:A,type:t,key:l,ref:u,props:s,_owner:N.current}}h.Fragment=R,h.jsx=w,h.jsxs=w,p.exports=h;const e=p.exports.jsx,f=p.exports.jsxs,_=p.exports.Fragment;function z({postSubmit:t}){const{control:r,handleSubmit:i,formState:{errors:n,isValidating:s,isValid:l}}=c.useForm({defaultValues:{type:"postgresql",key:"",config:{host:"",port:5432,username:"",password:"",database:""}}}),u=async({type:d,key:M,config:k})=>{if(m.showNotification({id:"for-creating",title:"Pending",message:"Adding data source...",loading:!0}),!await S.datasource.create(d,M,k)){m.updateNotification({id:"for-creating",title:"Failed",message:"Test connection failed with given info",color:"red"});return}m.updateNotification({id:"for-creating",title:"Successful",message:"Data source is added",color:"green"}),t()};return e(a.Box,{mx:"auto",children:f("form",{onSubmit:i(u),children:[e(c.Controller,{name:"type",control:r,render:({field:d})=>e(a.SegmentedControl,{fullWidth:!0,mb:"md",data:[{label:"PostgreSQL",value:"postgresql"},{label:"MySQL",value:"mysql"},{label:"HTTP",value:"http",disabled:!0}],...d})}),e(c.Controller,{name:"key",control:r,render:({field:d})=>e(a.TextInput,{mb:"md",required:!0,label:"Name",placeholder:"A unique name",...d})}),e(a.Divider,{label:"Connection Info",labelPosition:"center"}),f(a.Group,{direction:"row",grow:!0,children:[e(c.Controller,{name:"config.host",control:r,render:({field:d})=>e(a.TextInput,{mb:"md",required:!0,label:"Host",sx:{flexGrow:1},...d})}),e(c.Controller,{name:"config.port",control:r,render:({field:d})=>e(a.NumberInput,{mb:"md",required:!0,label:"Port",hideControls:!0,sx:{width:"8em"},...d})})]}),e(c.Controller,{name:"config.username",control:r,render:({field:d})=>e(a.TextInput,{mb:"md",required:!0,label:"Username",...d})}),e(c.Controller,{name:"config.password",control:r,render:({field:d})=>e(a.PasswordInput,{mb:"md",required:!0,label:"Password",...d})}),e(c.Controller,{name:"config.database",control:r,render:({field:d})=>e(a.TextInput,{mb:"md",required:!0,label:"Database",...d})}),e(a.Group,{position:"right",mt:"md",children:e(a.Button,{type:"submit",children:"Save"})})]})})}function q({onSuccess:t}){const[r,i]=x.default.useState(!1),n=()=>i(!0),s=()=>i(!1),l=()=>{t(),s()};return f(_,{children:[e(a.Modal,{overflow:"inside",opened:r,onClose:()=>i(!1),title:"Add a data source",trapFocus:!0,onDragStart:u=>{u.stopPropagation()},children:e(z,{postSubmit:l})}),e(a.Button,{size:"sm",onClick:n,leftIcon:e(b.PlaylistAdd,{size:20}),children:"Add a Data Source"})]})}function D({id:t,name:r,onSuccess:i}){const n=P.useModals(),s=async()=>{!t||(m.showNotification({id:"for-deleting",title:"Pending",message:"Deleting data source...",loading:!0}),await S.datasource.delete(t),m.updateNotification({id:"for-deleting",title:"Successful",message:`Data source [${r}] is deleted`,color:"green"}),i())},l=()=>n.openConfirmModal({title:"Delete this data source?",children:e(a.Text,{size:"sm",children:"This action won't affect your database."}),labels:{confirm:"Confirm",cancel:"Cancel"},onCancel:()=>console.log("Cancel"),onConfirm:s});return e(a.Button,{size:"sm",color:"red",onClick:l,leftIcon:e(b.Trash,{size:20}),children:"Delete"})}function E(){const{data:t=[],loading:r,refresh:i}=T.useRequest(async()=>{const{data:n}=await S.datasource.list();return n},{refreshDeps:[]});return f(_,{children:[e(a.Group,{pt:"md",position:"right",children:e(q,{onSuccess:i})}),f(a.Box,{mt:"xl",sx:{position:"relative"},children:[e(a.LoadingOverlay,{visible:r}),f(a.Table,{horizontalSpacing:"md",verticalSpacing:"md",fontSize:"md",highlightOnHover:!0,children:[e("thead",{children:f("tr",{children:[e("th",{children:"Type"}),e("th",{children:"Name"}),e("th",{children:"Action"})]})}),e("tbody",{children:t.map(({id:n,key:s,type:l})=>f("tr",{children:[e("td",{width:200,children:l}),e("td",{children:s}),e("td",{width:200,children:e(a.Group,{position:"left",children:e(D,{id:n,name:s,onSuccess:i})})})]},s))})]})]})]})}o.AddDataSource=q,o.DataSourceList=E,o.DeleteDataSource=D,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+ */var y=w.default,A=Symbol.for("react.element"),j=Symbol.for("react.fragment"),I=Object.prototype.hasOwnProperty,N=y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,U={key:!0,ref:!0,__self:!0,__source:!0};function _(r,e,a){var n,l={},s=null,d=null;a!==void 0&&(s=""+a),e.key!==void 0&&(s=""+e.key),e.ref!==void 0&&(d=e.ref);for(n in e)I.call(e,n)&&!U.hasOwnProperty(n)&&(l[n]=e[n]);if(r&&r.defaultProps)for(n in e=r.defaultProps,e)l[n]===void 0&&(l[n]=e[n]);return{$$typeof:A,type:r,key:s,ref:d,props:l,_owner:N.current}}b.Fragment=j,b.jsx=_,b.jsxs=_,S.exports=b;const t=S.exports.jsx,f=S.exports.jsxs,C=S.exports.Fragment;function B({postSubmit:r,styles:e=g}){const{control:a,handleSubmit:n,formState:{errors:l,isValidating:s,isValid:d}}=u.useForm({defaultValues:{type:"postgresql",key:"",config:{host:"",port:5432,username:"",password:"",database:""}}}),h=async({type:c,key:M,config:k})=>{if(p.showNotification({id:"for-creating",title:"Pending",message:"Adding data source...",loading:!0}),!await x.datasource.create(c,M,k)){p.updateNotification({id:"for-creating",title:"Failed",message:"Test connection failed with given info",color:"red"});return}p.updateNotification({id:"for-creating",title:"Successful",message:"Data source is added",color:"green"}),r()};return t(i.Box,{mx:"auto",children:f("form",{onSubmit:n(h),children:[t(u.Controller,{name:"type",control:a,render:({field:c})=>t(i.SegmentedControl,{fullWidth:!0,mb:e.spacing,size:e.size,data:[{label:"PostgreSQL",value:"postgresql"},{label:"MySQL",value:"mysql"},{label:"HTTP",value:"http",disabled:!0}],...c})}),t(u.Controller,{name:"key",control:a,render:({field:c})=>t(i.TextInput,{mb:e.spacing,size:e.size,required:!0,label:"Name",placeholder:"A unique name",...c})}),t(i.Divider,{label:"Connection Info",labelPosition:"center"}),f(i.Group,{grow:!0,children:[t(u.Controller,{name:"config.host",control:a,render:({field:c})=>t(i.TextInput,{mb:e.spacing,size:e.size,required:!0,label:"Host",sx:{flexGrow:1},...c})}),t(u.Controller,{name:"config.port",control:a,render:({field:c})=>t(i.NumberInput,{mb:e.spacing,size:e.size,required:!0,label:"Port",hideControls:!0,sx:{width:"8em"},...c})})]}),t(u.Controller,{name:"config.username",control:a,render:({field:c})=>t(i.TextInput,{mb:e.spacing,size:e.size,required:!0,label:"Username",...c})}),t(u.Controller,{name:"config.password",control:a,render:({field:c})=>t(i.PasswordInput,{mb:e.spacing,size:e.size,required:!0,label:"Password",...c})}),t(u.Controller,{name:"config.database",control:a,render:({field:c})=>t(i.TextInput,{mb:e.spacing,size:e.size,required:!0,label:"Database",...c})}),t(i.Group,{position:"right",mt:e.spacing,children:t(i.Button,{type:"submit",size:e.size,children:"Save"})})]})})}function D({onSuccess:r,styles:e=g}){const[a,n]=w.default.useState(!1),l=()=>n(!0),s=()=>n(!1),d=()=>{r(),s()};return f(C,{children:[t(i.Modal,{overflow:"inside",opened:a,onClose:()=>n(!1),title:"Add a data source",trapFocus:!0,onDragStart:h=>{h.stopPropagation()},children:t(B,{postSubmit:d,styles:e})}),t(i.Button,{size:e.size,onClick:l,leftIcon:t(z.PlaylistAdd,{size:20}),children:"Add a Data Source"})]})}function v({id:r,name:e,onSuccess:a,styles:n=g}){const l=L.useModals(),s=async()=>{!r||(p.showNotification({id:"for-deleting",title:"Pending",message:"Deleting data source...",loading:!0}),await x.datasource.delete(r),p.updateNotification({id:"for-deleting",title:"Successful",message:`Data source [${e}] is deleted`,color:"green"}),a())},d=()=>l.openConfirmModal({title:"Delete this data source?",children:t(i.Text,{size:n.size,children:"This action won't affect your database."}),labels:{confirm:"Confirm",cancel:"Cancel"},onCancel:()=>console.log("Cancel"),onConfirm:s});return t(i.Button,{size:n.size,color:"red",onClick:d,leftIcon:t(z.Trash,{size:20}),children:"Delete"})}function E({styles:r=g,config:e}){const{data:a=[],loading:n,refresh:l}=R.useRequest(async()=>{const{data:s}=await x.datasource.list();return s},{refreshDeps:[]});return m.baseURL!==e.apiBaseURL&&(m.baseURL=e.apiBaseURL),f(C,{children:[t(i.Group,{pt:r.spacing,position:"right",children:t(D,{onSuccess:l})}),f(i.Box,{mt:r.spacing,sx:{position:"relative"},children:[t(i.LoadingOverlay,{visible:n}),f(i.Table,{horizontalSpacing:r.spacing,verticalSpacing:r.spacing,fontSize:r.size,highlightOnHover:!0,children:[t("thead",{children:f("tr",{children:[t("th",{children:"Type"}),t("th",{children:"Name"}),t("th",{children:"Action"})]})}),t("tbody",{children:a.map(({id:s,key:d,type:h})=>f("tr",{children:[t("td",{width:200,children:h}),t("td",{children:d}),t("td",{width:200,children:t(i.Group,{position:"left",children:t(v,{id:s,name:d,onSuccess:l})})})]},d))})]})]})]})}o.AddDataSource=D,o.DataSourceList=E,o.DeleteDataSource=v,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "2.0.0",
+  "version": "2.3.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -22,32 +22,33 @@
     }
   },
   "scripts": {
-    "dev": "vite",
+    "dev-build": "tsc && vite build --watch",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {},
-  "devDependencies": {},
+  "devDependencies": {
+    "@types/lodash": "^4.14.182",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/react-grid-layout": "^1.3.2",
+    "@vitejs/plugin-react": "^1.3.0",
+    "rollup-plugin-visualizer": "5.6.0",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.9",
+    "vite-plugin-dts": "^1.1.1"
+  },
   "peerDependencies": {
-    "@mantine/core": "^4.2.12",
-    "@mantine/dates": "^4.2.12",
-    "@mantine/form": "^4.2.12",
-    "@mantine/hooks": "^4.2.12",
-    "@mantine/modals": "^4.2.12",
-    "@mantine/notifications": "^4.2.12",
-    "@mantine/prism": "^4.2.12",
-    "@mantine/rte": "^4.2.12",
+    "@emotion/react": "11.10.0",
+    "@mantine/core": "^5.0.2",
+    "@mantine/hooks": "^5.0.2",
+    "@mantine/modals": "^5.0.2",
+    "@mantine/notifications": "^5.0.2",
     "ahooks": "^3.3.11",
     "axios": "^0.27.2",
-    "echarts": "^5.3.2",
-    "echarts-for-react": "^3.0.2",
-    "echarts-gl": "^2.0.9",
-    "echarts-stat": "1.2.0",
     "lodash": "^4.17.21",
-    "numbro": "^2.3.6",
     "react": "^16.8.0 || 17.x || 18.x",
     "react-dom": "^16.8.0 || 17.x || 18.x",
-    "react-grid-layout": "^1.3.4",
     "react-hook-form": "^7.31.2",
     "tabler-icons-react": "^1.48.0"
   }