@devtable/settings-form 2.2.0 → 2.5.0

package/dist/{settings-form/src/api-caller → 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 { DataSourceType, IDataSource, IDataSourceConfig } from './datasource.typed';
+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

@@ -0,0 +1,7 @@
+export declare const APICaller: {
+    datasource: {
+        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/{settings-form/src/datasource → datasource}/add-data-source.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IStyles } from "./styles";
+import { IStyles } from './styles';
 interface IAddDataSource {
     styles?: IStyles;
     onSuccess: () => void;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+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/{settings-form/src/datasource → datasource}/delete-data-source.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IStyles } from "./styles";
+import { IStyles } from './styles';
 interface IDeleteDataSource {
     id: string;
     name: string;

package/dist/{settings-form/src/datasource → datasource}/styles.d.ts

@@ -1,4 +1,4 @@
-import { MantineSize } from "@mantine/core";
+import { MantineSize } from '@mantine/core';
 export interface IStyles {
     size: MantineSize;
     spacing: MantineSize;

package/dist/datasource/types.d.ts

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

package/dist/index.d.ts

@@ -1 +1 @@
-export * from './settings-form/src/index'
+export * from './datasource';

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,7 +58,7 @@ const datasource = {
     }
   },
   delete: async (id) => {
-    await post("/datasource/delete", { id });
+    await APIClient.getRequest("POST")("/datasource/delete", { id });
   }
 };
 const APICaller = {
@@ -362,7 +364,8 @@ function DeleteDataSource({
   });
 }
 function DataSourceList({
-  styles = defaultStyles
+  styles = defaultStyles,
+  config
 }) {
   const {
     data = [],
@@ -376,6 +379,9 @@ function DataSourceList({
   }, {
     refreshDeps: []
   });
+  if (APIClient.baseURL !== config.apiBaseURL) {
+    APIClient.baseURL = config.apiBaseURL;
+  }
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(Group, {
       pt: styles.spacing,

package/dist/settings-form.umd.js

@@ -1,4 +1,4 @@
-(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,y,O){"use strict";function w(r){return r&&typeof r=="object"&&"default"in r?r:{default:r}}var _=w(T),j=w(P);const S=(r=>(t,a,n={})=>{const s={"X-Requested-With":"XMLHttpRequest","Content-Type":n.string?"application/x-www-form-urlencoded":"application/json",...n.headers},d={baseURL:"http://localhost:31200",method:r,url:t,params:r==="GET"?a:n.params,headers:s};return["POST","PUT"].includes(r)&&(d.data=n.string?JSON.stringify(a):a),j.default(d).then(l=>l.data).catch(l=>Promise.reject(l))})("POST"),b={datasource:{list:async()=>await S("/datasource/list",{filter:{},sort:{field:"create_time",order:"ASC"},pagination:{page:1,pagesize:100}}),create:async(r,t,a)=>{try{return await S("/datasource/create",{type:r,key:t,config:a})}catch(n){return console.error(n),!1}},delete:async r=>{await S("/datasource/delete",{id:r})}}},m={size:"sm",spacing:"md"};var h={exports:{}},g={};/**
+(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 A=_.default,R=Symbol.for("react.element"),I=Symbol.for("react.fragment"),N=Object.prototype.hasOwnProperty,L=A.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,E={key:!0,ref:!0,__self:!0,__source:!0};function q(r,t,a){var n,s={},d=null,l=null;a!==void 0&&(d=""+a),t.key!==void 0&&(d=""+t.key),t.ref!==void 0&&(l=t.ref);for(n in t)N.call(t,n)&&!E.hasOwnProperty(n)&&(s[n]=t[n]);if(r&&r.defaultProps)for(n in t=r.defaultProps,t)s[n]===void 0&&(s[n]=t[n]);return{$$typeof:R,type:r,key:d,ref:l,props:s,_owner:L.current}}g.Fragment=I,g.jsx=q,g.jsxs=q,h.exports=g;const e=h.exports.jsx,f=h.exports.jsxs,D=h.exports.Fragment;function M({postSubmit:r,styles:t=m}){const{control:a,handleSubmit:n,formState:{errors:s,isValidating:d,isValid:l}}=u.useForm({defaultValues:{type:"postgresql",key:"",config:{host:"",port:5432,username:"",password:"",database:""}}}),x=async({type:c,key:B,config:G})=>{if(p.showNotification({id:"for-creating",title:"Pending",message:"Adding data source...",loading:!0}),!await b.datasource.create(c,B,G)){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 e(i.Box,{mx:"auto",children:f("form",{onSubmit:n(x),children:[e(u.Controller,{name:"type",control:a,render:({field:c})=>e(i.SegmentedControl,{fullWidth:!0,mb:t.spacing,size:t.size,data:[{label:"PostgreSQL",value:"postgresql"},{label:"MySQL",value:"mysql"},{label:"HTTP",value:"http",disabled:!0}],...c})}),e(u.Controller,{name:"key",control:a,render:({field:c})=>e(i.TextInput,{mb:t.spacing,size:t.size,required:!0,label:"Name",placeholder:"A unique name",...c})}),e(i.Divider,{label:"Connection Info",labelPosition:"center"}),f(i.Group,{grow:!0,children:[e(u.Controller,{name:"config.host",control:a,render:({field:c})=>e(i.TextInput,{mb:t.spacing,size:t.size,required:!0,label:"Host",sx:{flexGrow:1},...c})}),e(u.Controller,{name:"config.port",control:a,render:({field:c})=>e(i.NumberInput,{mb:t.spacing,size:t.size,required:!0,label:"Port",hideControls:!0,sx:{width:"8em"},...c})})]}),e(u.Controller,{name:"config.username",control:a,render:({field:c})=>e(i.TextInput,{mb:t.spacing,size:t.size,required:!0,label:"Username",...c})}),e(u.Controller,{name:"config.password",control:a,render:({field:c})=>e(i.PasswordInput,{mb:t.spacing,size:t.size,required:!0,label:"Password",...c})}),e(u.Controller,{name:"config.database",control:a,render:({field:c})=>e(i.TextInput,{mb:t.spacing,size:t.size,required:!0,label:"Database",...c})}),e(i.Group,{position:"right",mt:t.spacing,children:e(i.Button,{type:"submit",size:t.size,children:"Save"})})]})})}function v({onSuccess:r,styles:t=m}){const[a,n]=_.default.useState(!1),s=()=>n(!0),d=()=>n(!1),l=()=>{r(),d()};return f(D,{children:[e(i.Modal,{overflow:"inside",opened:a,onClose:()=>n(!1),title:"Add a data source",trapFocus:!0,onDragStart:x=>{x.stopPropagation()},children:e(M,{postSubmit:l,styles:t})}),e(i.Button,{size:t.size,onClick:s,leftIcon:e(z.PlaylistAdd,{size:20}),children:"Add a Data Source"})]})}function C({id:r,name:t,onSuccess:a,styles:n=m}){const s=O.useModals(),d=async()=>{!r||(p.showNotification({id:"for-deleting",title:"Pending",message:"Deleting data source...",loading:!0}),await b.datasource.delete(r),p.updateNotification({id:"for-deleting",title:"Successful",message:`Data source [${t}] is deleted`,color:"green"}),a())},l=()=>s.openConfirmModal({title:"Delete this data source?",children:e(i.Text,{size:n.size,children:"This action won't affect your database."}),labels:{confirm:"Confirm",cancel:"Cancel"},onCancel:()=>console.log("Cancel"),onConfirm:d});return e(i.Button,{size:n.size,color:"red",onClick:l,leftIcon:e(z.Trash,{size:20}),children:"Delete"})}function k({styles:r=m}){const{data:t=[],loading:a,refresh:n}=y.useRequest(async()=>{const{data:s}=await b.datasource.list();return s},{refreshDeps:[]});return f(D,{children:[e(i.Group,{pt:r.spacing,position:"right",children:e(v,{onSuccess:n})}),f(i.Box,{mt:r.spacing,sx:{position:"relative"},children:[e(i.LoadingOverlay,{visible:a}),f(i.Table,{horizontalSpacing:r.spacing,verticalSpacing:r.spacing,fontSize:r.size,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:s,key:d,type:l})=>f("tr",{children:[e("td",{width:200,children:l}),e("td",{children:d}),e("td",{width:200,children:e(i.Group,{position:"left",children:e(C,{id:s,name:d,onSuccess:n})})})]},d))})]})]})]})}o.AddDataSource=v,o.DataSourceList=k,o.DeleteDataSource=C,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.2.0",
+  "version": "2.5.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -52,4 +52,4 @@
     "react-hook-form": "^7.31.2",
     "tabler-icons-react": "^1.48.0"
   }
-}
+}

package/dist/settings-form/src/api-caller/index.d.ts

@@ -1,7 +0,0 @@
-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>>;
-        delete: (id: string) => Promise<void>;
-    };
-};

package/dist/settings-form/src/datasource/data-source-list.d.ts

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

package/dist/settings-form/src/index.d.ts

@@ -1 +0,0 @@
-export * from './datasource';