mtxuilib 0.0.781 → 0.1.1

package/dist/common/DeleteComfirm.jsx

@@ -0,0 +1,65 @@
+"use client";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { createStore, useStore } from "zustand";
+import { immer } from "zustand/middleware/immer";
+import { MtButton } from "../ui-mt/Button";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../ui/dialog";
+export const createFormSlice = (set, get) => ({
+    setOpen: (open) => set({ open }),
+    setConfirmCallback: (confirmCallback) => set({ confirmCallback }),
+});
+const createDeleteConformStore = (initProps) => {
+    return createStore()(immer((...a) => ({
+        ...createFormSlice(...a),
+        ...initProps,
+    })));
+};
+const formContext = createContext(null);
+export const DeleteConfirmProvider = (props) => {
+    const { children, ...etc } = props;
+    const mystore = useMemo(() => createDeleteConformStore(etc), [etc]);
+    return (<formContext.Provider value={mystore}>
+      {children}
+      <DeleteConfirmDlg />
+    </formContext.Provider>);
+};
+function useDeleteConfirmStore(selector) {
+    const store = useContext(formContext);
+    if (!store)
+        throw new Error("useDeleteConfirm Missing MtxFormProvider");
+    return useStore(store, selector);
+}
+export const useDeleteConfirm = () => {
+    const setOpen = useDeleteConfirmStore((x) => x.setOpen);
+    const setConfirmCallback = useDeleteConfirmStore((x) => x.setConfirmCallback);
+    const show = useCallback((props) => {
+        setConfirmCallback(props.callback);
+        setOpen(true);
+    }, [setConfirmCallback, setOpen]);
+    return {
+        show,
+    };
+};
+export const DeleteConfirmDlg = () => {
+    const open = useDeleteConfirmStore((x) => x.open);
+    const setOpen = useDeleteConfirmStore((x) => x.setOpen);
+    const confirmCallback = useDeleteConfirmStore((x) => x.confirmCallback);
+    return (<Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogTitle>delete confirm</DialogTitle>
+        <DialogDescription>will delete item, continue?</DialogDescription>
+        <MtButton variant={"destructive"} onClick={async () => {
+            setOpen(false);
+            confirmCallback && confirmCallback();
+        }}>
+          Continue
+        </MtButton>
+        <MtButton variant={"outline"} onClick={() => {
+            setOpen(false);
+            confirmCallback && confirmCallback();
+        }}>
+          Cancel
+        </MtButton>
+      </DialogContent>
+    </Dialog>);
+};

package/dist/common/FullCenter.jsx

@@ -0,0 +1,7 @@
+"use client";
+export const FullCenter = (props) => {
+    const { children } = props;
+    return (<div className="flex h-full w-full items-center justify-center">
+    <div className="flex-1">{children}</div>
+  </div>);
+};

package/dist/common/GlobalSearch.jsx

@@ -0,0 +1,27 @@
+"use client";
+import { createContext, useContext, useMemo } from "react";
+import { createStore, useStore } from "zustand";
+export const createFormSlice = (set, get) => ({
+    setQ: (q) => set({ q }),
+});
+const createDeleteConformStore = (initProps) => {
+    return createStore()((...a) => ({
+        ...createFormSlice(...a),
+        ...initProps,
+    }));
+};
+const formContext = createContext(null);
+export const GlobalSearchProvider = (props) => {
+    const { children, ...etc } = props;
+    const mystore = useMemo(() => createDeleteConformStore(etc), [etc]);
+    return (<formContext.Provider value={mystore}>
+      {children}
+      
+    </formContext.Provider>);
+};
+export function useGlobalSearch(selector) {
+    const store = useContext(formContext);
+    if (!store)
+        throw new Error("useGlobalSearch Missing GlobalSearchProvider");
+    return useStore(store, selector);
+}

package/dist/common/MtImage.jsx

@@ -0,0 +1,27 @@
+import { isCloudflarePage } from 'mtxlib/utils';
+import Image from 'next/image';
+const normalizeSrc = (src) => {
+    return src.startsWith('/') ? src.slice(1) : src;
+};
+const cloudflareLoader = ({ src, width, quality }) => {
+    const params = [`width=${width}`];
+    if (quality) {
+        params.push(`quality=${quality}`);
+    }
+    const paramsString = params.join(',');
+    return `https://cfgomtm.yuepa8.com/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
+};
+const exampleImageLoader = ({ src, width, quality }) => {
+    return `https://example.com/${src}?w=${width}&q=${quality || 75}`;
+};
+function getImageLoader() {
+    if (isCloudflarePage()) {
+        return cloudflareLoader;
+    }
+    else {
+        exampleImageLoader;
+    }
+}
+export const MtImage = (props) => {
+    return <Image {...props} loader={getImageLoader()}/>;
+};

package/dist/common/MtProgressBar.jsx

@@ -0,0 +1,5 @@
+"use client";
+import { AppProgressBar } from "next-nprogress-bar";
+export const MtProgressBar = () => {
+    return <AppProgressBar height="4px" color="#4934eb" options={{ showSpinner: false }} shallowRouting/>;
+};

package/dist/common/NotFoundGoBack.jsx

@@ -0,0 +1,15 @@
+'use client';
+import { useRouter } from "next/navigation";
+import { Button } from "../ui/button";
+export const NotFoundGoBack = () => {
+    const router = useRouter();
+    return (<div className="container flex flex-col">
+    <div className="mx-auto p-8">
+      not found
+    </div>
+
+    <Button className="mx-auto p-8" onClick={() => {
+            router.back();
+        }}>Go back</Button>
+  </div>);
+};

package/dist/common/SlntTree/Slnt.z.jsx

@@ -0,0 +1,13 @@
+import { z } from "zod";
+const DashMenuTreeItemRouteType = ["default", "list", "detail"];
+const slntTreeNodeBaseSchema = z.object({
+    id: z.string(),
+    pid: z.string().optional(),
+    label: z.string().optional(),
+    icon: z.string().optional(),
+    routeName: z.string().optional(),
+    routeType: z.enum(DashMenuTreeItemRouteType).optional(),
+});
+export const treeNodeSchema = slntTreeNodeBaseSchema.extend({
+    children: z.lazy(() => treeNodeSchema.array()).optional(),
+});

package/dist/common/SlntTree/SlntChildrenTabs.jsx

@@ -0,0 +1,33 @@
+"use client";
+import { urlJoinPaths } from "mtxlib/http/url";
+import { usePathname, useSelectedLayoutSegment, useSelectedLayoutSegments, } from "next/navigation";
+import { cn } from "../../lib/utils";
+import { MtLink } from "../mtlink";
+import { useMenuTreeStore } from "./SlntTreeNode";
+export const SlntChildrenTabs = () => {
+    const parentData = useMenuTreeStore((x) => x.menuNode);
+    const pathName = usePathname();
+    const segments = useSelectedLayoutSegments();
+    const segment = useSelectedLayoutSegment();
+    const basePath = pathName.slice(0, -segments.join("/").length);
+    const basePath3 = "/" + segments.join("/");
+    return (<div className="flex gap-1 ">
+      
+      {parentData?.children?.map((item, i) => {
+            let href = `${urlJoinPaths(basePath, item.routeName || "")}`;
+            if (!segments?.length) {
+                href = urlJoinPaths(pathName, item.routeName || "");
+            }
+            return (<TabItem key={i} activate={segment == item.routeName}>
+            <MtLink key={i} variant={"ghost"} href={href}>
+              {item.label}
+            </MtLink>
+            
+          </TabItem>);
+        })}
+    </div>);
+};
+const TabItem = (props) => {
+    const { activate, ...etc } = props;
+    return (<div data-state={activate && "active"} className={cn("ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow")} {...etc}/>);
+};

package/dist/common/SlntTree/SlntTreeNode.jsx

@@ -0,0 +1,47 @@
+"use client";
+import { useSelectedLayoutSegment, useSelectedLayoutSegments, } from "next/navigation";
+import { createContext, useContext, useMemo } from "react";
+import { useStore } from "zustand";
+import { immer } from "zustand/middleware/immer";
+import { useShallow } from "zustand/react/shallow";
+import { createStore } from "zustand/vanilla";
+const createModalStore = (initProps) => {
+    return createStore()(immer((set, get) => ({
+        ...initProps,
+    })));
+};
+export const slntContext = createContext(null);
+export const MenuTreeProvider = (props) => {
+    const { children, ...etc } = props;
+    const mystore = useMemo(() => createModalStore(etc), [etc]);
+    return (<slntContext.Provider value={mystore}>{children}</slntContext.Provider>);
+};
+export const DEFAULT_USE_SHALLOW = true;
+export function useMenuTreeStore(selector) {
+    const store = useContext(slntContext);
+    if (!store)
+        return null;
+    if (selector) {
+        return useStore(store, DEFAULT_USE_SHALLOW ? useShallow(selector) : selector);
+    }
+    return useStore(store);
+}
+export const SlntTreeNode = (props) => {
+    const { children, treeData } = props;
+    const parentData = useMenuTreeStore((x) => x?.menuNode);
+    const segment = useSelectedLayoutSegment();
+    const segments = useSelectedLayoutSegments();
+    const parent = parentData || treeData;
+    if (!parent) {
+        throw new Error("must within parentNodes or rootNodes ");
+    }
+    const currNode = useMemo(() => {
+        const fined = parent.children?.find((x) => x.routeName == segment);
+        console.log({ message: `(SlntTreeNode)${segment}`, fined, parent });
+        return fined;
+    }, [parent, segment]);
+    return (<MenuTreeProvider menuNode={currNode}>
+      
+      {children}
+    </MenuTreeProvider>);
+};

package/dist/common/TrpcQuery.jsx

@@ -0,0 +1 @@
+"use strict";

package/dist/common/devtools/DebugValue.jsx

@@ -0,0 +1,16 @@
+"use client";
+import { MtButton } from "../../ui-mt/Button";
+import { Dialog, DialogContent, DialogTrigger } from "../../ui/dialog";
+export const DebugValue = (props) => {
+    const { title, data, className } = props;
+    return (<Dialog>
+      <DialogTrigger asChild>
+        <MtButton variant={"outline"} className={className}>
+          {title || "debug"}
+        </MtButton>
+      </DialogTrigger>
+      <DialogContent className="max-h-lvh w-full overflow-scroll bg-red-100">
+        <pre className=" text-xs">{JSON.stringify(data, null, 2)}</pre>
+      </DialogContent>
+    </Dialog>);
+};

package/dist/common/devtools/DevTools.jsx

@@ -0,0 +1,26 @@
+"use client";
+import dynamic from "next/dynamic";
+import { useHotkeys } from "react-hotkeys-hook";
+import { useMtapp } from "../../mtapp/MtAppProvider";
+import { TailwindIndicator } from "../tailwind-indicator";
+const ReactQueryDevtoolsProduction = dynamic(() => import("@tanstack/react-query-devtools/build/modern/production.js").then((d) => ({
+    default: d.ReactQueryDevtools,
+})), {
+    ssr: false,
+});
+export const HOTKEY_Debug = "alt+.";
+export const DevTools = () => {
+    const debug = useMtapp((x) => x.debug);
+    const setDebug = useMtapp((x) => x.setDebug);
+    useHotkeys(HOTKEY_Debug, () => {
+        console.log("debug2:%o", !debug);
+        setDebug(!debug);
+    }, [debug, setDebug]);
+    if (!debug) {
+        return null;
+    }
+    return (<>
+      <ReactQueryDevtoolsProduction buttonPosition="bottom-right"/>
+      <TailwindIndicator />
+    </>);
+};

package/dist/common/mtlink.jsx

@@ -0,0 +1,16 @@
+'use client';
+import { Slot } from "@radix-ui/react-slot";
+import Link from "next/link";
+import React from "react";
+import { cn } from "../lib/utils";
+import { buttonVariants } from "../ui/button";
+export const MtLink = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : Link;
+    return (<Comp className={cn(((variant) && buttonVariants({ variant: variant, className })))} ref={ref} {...props}/>);
+});
+MtLink.displayName = "MtLink";
+export function MtExternalLink({ children, className, ...props }) {
+    return (<a className={cn(className, "hover:text-brandtext-500 hover:underline hover:brightness-150")} rel="noopener noreferrer" {...props}>
+      {children}
+    </a>);
+}

package/dist/common/pip/PipExamplePage.jsx

@@ -0,0 +1,42 @@
+"use client";
+import ReactDocumentPictureInPicture from "mtxuilib/common/pip/ReactDocumentPictureInPicture";
+import { MtButton } from "mtxuilib/ui-mt/Button";
+import { useRef, useState } from "react";
+export default function PipExamplePage() {
+    const pipWindowRef = useRef(null);
+    return (<>
+      <ReactDocumentPictureInPicture ref={pipWindowRef} width="50%" height="100%" buttonRenderer={({ open, close, toggle, isOpen }) => (<div className="flex gap-2">
+            <b>Is {isOpen ? "Open" : "Closed"} </b>
+            <MtButton onClick={open}>Open</MtButton>
+            <MtButton onClick={close}>Close</MtButton>
+            <MtButton onClick={toggle}>Toggle</MtButton>
+          </div>)}>
+        <Comp pipWindowRef={pipWindowRef}/>
+      </ReactDocumentPictureInPicture>
+    </>);
+}
+const Comp = (props) => {
+    const { pipWindowRef } = props;
+    const [text, setText] = useState("tet1");
+    return (<div className="prose">
+      <h1>画中画显示（范例）</h1>
+      <div>
+        <button onClick={() => {
+            console.log("关闭");
+            setText("ssssssssssssssss");
+        }}>
+          sssss
+        </button>
+        <MtButton onClick={() => {
+            console.log("关闭");
+            setText("ssssssssssssssss");
+        }}>
+          关闭333 {text}
+        </MtButton>
+      </div>
+      <i>
+        This text should be displayed in a Document Picture in Picture filling the maximum allow height and 50% of the
+        width of the original window
+      </i>
+    </div>);
+};

package/dist/common/pip/ReactDocumentPictureInPicture.jsx

@@ -0,0 +1,122 @@
+"use client";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+export var FeatureUnavailableReasonEnum;
+(function (FeatureUnavailableReasonEnum) {
+    FeatureUnavailableReasonEnum["USING_UNSECURE_PROTOCOL"] = "USING_UNSECURE_PROTOCOL";
+    FeatureUnavailableReasonEnum["API_NOT_SUPPORTED"] = "API_NOT_SUPPORTED";
+})(FeatureUnavailableReasonEnum || (FeatureUnavailableReasonEnum = {}));
+;
+const ReactDocumentPictureInPicture = forwardRef((props, ref) => {
+    const contentRef = useRef();
+    const pipWindow = useRef();
+    const [isOpen, setIsOpen] = useState(false);
+    const absoluteDimensions = useMemo(() => {
+        if (typeof window != "undefined") {
+            let absoluteWidth = 500;
+            let absoluteHeight = 400;
+            if (typeof props.width === "number")
+                absoluteWidth = props.width;
+            else if (typeof props.width === "string") {
+                if (props.width.endsWith('px'))
+                    absoluteWidth = parseInt(props.width);
+                else if (props.width.endsWith('%'))
+                    absoluteWidth = window?.innerWidth * (parseInt(props.width) / 100);
+            }
+            if (typeof props.height === "number")
+                absoluteHeight = props.height;
+            else if (typeof props.height === "string") {
+                if (props.height.endsWith('px'))
+                    absoluteHeight = parseInt(props.height);
+                else if (props.height.endsWith('%'))
+                    absoluteHeight = window?.innerHeight * (parseInt(props.height) / 100);
+            }
+            return { width: absoluteWidth, height: absoluteHeight };
+        }
+    }, [props.width, props.height]);
+    const close = useCallback(() => {
+        if (pipWindow.current == null)
+            return;
+        pipWindow.current?.close();
+        setIsOpen(false);
+        if (props.onClose)
+            props.onClose();
+    }, [contentRef, pipWindow, setIsOpen]);
+    const open = useCallback(async () => {
+        if (contentRef.current == null)
+            return;
+        if (typeof window != "undefined") {
+            const contentElement = contentRef.current;
+            pipWindow.current = await window?.documentPictureInPicture.requestWindow({ ...absoluteDimensions });
+            if (props.shareStyles === true) {
+                [...document.styleSheets].forEach((styleSheet) => {
+                    try {
+                        const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
+                        const style = document.createElement('style');
+                        style.textContent = cssRules;
+                        pipWindow?.current.document.head.appendChild(style);
+                    }
+                    catch (e) {
+                        const link = document.createElement('link');
+                        link.rel = 'stylesheet';
+                        link.type = styleSheet.type;
+                        if (styleSheet.media.length > 0) {
+                            link.media = styleSheet.media.mediaText;
+                        }
+                        link.href = styleSheet.href || "";
+                        pipWindow.current?.document.head.appendChild(link);
+                    }
+                });
+            }
+            pipWindow.current.document.body.append(contentElement);
+            pipWindow.current.addEventListener('pagehide', () => close());
+            pipWindow.current.addEventListener('resize', (event) => {
+                if (props.onResize)
+                    props.onResize(event.target.innerWidth, event.target.innerHeight);
+            });
+            setIsOpen(true);
+            if (props.onOpen)
+                props.onOpen();
+        }
+    }, [contentRef, pipWindow, setIsOpen, close, absoluteDimensions, props.shareStyles]);
+    const toggle = useCallback(() => isOpen ? close() : open(), [isOpen]);
+    useImperativeHandle(ref, () => ({
+        window: () => pipWindow.current,
+        isOpen,
+        close,
+    }), [
+        pipWindow,
+        isOpen,
+        close,
+    ]);
+    const featureUnavailableReason = (() => {
+        if (typeof window != "undefined") {
+            const isUsingSecureProtocol = window?.location.protocol === 'https:';
+            if (isUsingSecureProtocol === false)
+                return FeatureUnavailableReasonEnum.USING_UNSECURE_PROTOCOL;
+            const featureIsAvailable = 'documentPictureInPicture' in window;
+            if (featureIsAvailable === false)
+                return FeatureUnavailableReasonEnum.API_NOT_SUPPORTED;
+        }
+        return null;
+    })();
+    if (featureUnavailableReason != null && props.featureUnavailableRenderer == null)
+        return;
+    if (featureUnavailableReason != null) {
+        const featureUnavailableRenderer = typeof props.featureUnavailableRenderer === "function" ? props.featureUnavailableRenderer(featureUnavailableReason) : props.featureUnavailableRenderer;
+        return featureUnavailableRenderer;
+    }
+    const buttonRenderer = typeof props.buttonRenderer === "function" ? props.buttonRenderer({ open, close, toggle, isOpen }) : props.buttonRenderer;
+    return (<div>
+      {buttonRenderer}
+      
+      <div ref={contentRef} style={{
+            display: isOpen ? 'block' : 'none',
+            width: '100%',
+            height: '100%',
+        }}>
+        {props.children}
+      </div>
+    </div>);
+});
+ReactDocumentPictureInPicture.displayName = "ReactDocumentPictureInPicture";
+export default ReactDocumentPictureInPicture;

package/dist/common/react-markdown/Code.jsx

@@ -0,0 +1,12 @@
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { materialOceanic } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+export const CodeBlock = ({ ...props }) => {
+    return (<SyntaxHighlighter language={props.className?.replace(/(?:lang(?:uage)?-)/, '')} style={materialOceanic} wrapLines={true} className='not-prose rounded-md'>
+            {props.children}
+        </SyntaxHighlighter>);
+};
+export const Pre = ({ ...props }) => {
+    return (<div className='not-prose'>
+            {props.children}
+        </div>);
+};

package/dist/common/react-markdown/MarkdownToolbar.jsx

@@ -0,0 +1,15 @@
+import { Button } from "../../ui/button";
+const MarkdownToolbar = ({ feedElement }) => {
+    const btns = [
+        { name: 'B', syntax: '**Bold**' },
+        { name: 'I', syntax: '*Italic*' },
+        { name: 'S', syntax: '~Strikethrough~' },
+        { name: 'H1', syntax: '# ' },
+    ];
+    return (<header className=" flex gap-1 bg-[#253237]">
+      {btns.map(btn => (<Button key={btn.syntax} className="flex rounded-md" onClick={() => feedElement(btn.syntax)}>
+          {btn.name}
+        </Button>))}
+    </header>);
+};
+export default MarkdownToolbar;

package/dist/common/react-markdown/ReactMarkdownExample.jsx

@@ -0,0 +1,27 @@
+'use client';
+import Markdown from 'react-markdown';
+import rehypeExternalLinks from 'rehype-external-links';
+import rehypeSanitize from 'rehype-sanitize';
+import remarkGfm from 'remark-gfm';
+import { CodeBlock, Pre } from "./Code";
+export const ReactMarkdownExample = () => {
+    const options = {
+        code: CodeBlock,
+        pre: Pre,
+    };
+    return (<div className='bg-slate-500'>
+      
+      <div className='flex h-screen justify-between'>
+        <article className='w-full pl-6 pt-5'>
+          <Markdown className='prose prose-invert min-w-full' remarkPlugins={[remarkGfm]} rehypePlugins={[
+            rehypeSanitize,
+            [rehypeExternalLinks,
+                { content: { type: 'text', value: '🔗' } }
+            ],
+        ]} components={options}>
+            
+          </Markdown>
+        </article>
+      </div>
+    </div>);
+};

package/dist/common/schema-form/SchemaFormFieldsRender.jsx

@@ -0,0 +1,22 @@
+"use client";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "mtxuilib/ui/form";
+import { Input } from "mtxuilib/ui/input";
+import { useFormContext } from "react-hook-form";
+export const SchemaFormFieldsRender = (props) => {
+    const { schema } = props;
+    const form = useFormContext();
+    return (<>
+      {schema.fields?.map((formField, i) => {
+            return (<FormField key={i} control={form.control} name={formField.name} defaultValue={formField.defaultValue || ""} render={({ field }) => (<FormItem>
+                {formField.label && <FormLabel>{formField.label}</FormLabel>}
+                <FormControl>
+                  <>
+                    <Input placeholder={formField.placeholder} {...field}/>
+                  </>
+                </FormControl>
+                {formField.description && <FormDescription>{formField.description}</FormDescription>}
+                <FormMessage />
+              </FormItem>)}/>);
+        })}
+    </>);
+};

package/dist/common/schema-form/SchemaFormView.jsx

@@ -0,0 +1,31 @@
+"use client";
+import { useState } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { EditFormToolbar } from "mtxuilib/form/EditFormToolbar";
+import { Card, CardContent } from "mtxuilib/ui/card";
+import { DialogFooter } from "mtxuilib/ui/dialog";
+import { SchemaFormFieldsRender } from "./SchemaFormFieldsRender";
+export const SchemaFormView = (props) => {
+    const { formSchema, onSubmit, onCancel, variants } = props;
+    const [defaultValues, setDefaultValues] = useState({});
+    const form = useForm({
+        defaultValues: defaultValues,
+    });
+    if (!formSchema) {
+        return <div className="border p-8">missing formSchema params</div>;
+    }
+    return (<>
+      <FormProvider {...form}>
+        <Card className="p-2">
+          <CardContent>
+            <form onSubmit={form.handleSubmit(onSubmit)}>
+              <SchemaFormFieldsRender schema={formSchema}/>
+              <DialogFooter>
+                <EditFormToolbar onCancel={() => onCancel && onCancel()}/>
+              </DialogFooter>
+            </form>
+          </CardContent>
+        </Card>
+      </FormProvider>
+    </>);
+};

package/dist/common/schema-form/schema-form.z.js

@@ -0,0 +1,19 @@
+import { z } from "zod";
+export const schemaFieldValueType = z.enum(["string", "number", "date", "email"]);
+export const schemaField = z.object({
+    name: z.string(),
+    label: z.string().optional(),
+    type: z.string().optional(),
+    valueType: schemaFieldValueType.optional(),
+    defaultValue: z.any().optional(),
+    placeholder: z.string().optional(),
+    description: z.string().optional(),
+});
+export const schemaFormSchema = z.object({
+    title: z.string().optional(),
+    description: z.string().optional(),
+    action: z.string().optional(),
+    fields: schemaField.array(),
+    loadingDetailDataProcedure: z.string().optional(),
+    loadingDetailDataParams: z.any().optional(),
+});

package/dist/common/table/SimpleTable.jsx

@@ -0,0 +1,26 @@
+"use client";
+import { flexRender } from "@tanstack/react-table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../ui/table";
+export function SimpleTable(props) {
+    const { table } = props;
+    return (<div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (<TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (<TableHead key={header.id}>
+                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>);
+            })}
+            </TableRow>))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => (<TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+                {row.getVisibleCells().map((cell) => (<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>))}
+              </TableRow>))) : (<TableRow>
+              
+            </TableRow>)}
+        </TableBody>
+      </Table>
+    </div>);
+}

package/dist/common/table/cells/ExpenderCell.jsx

@@ -0,0 +1,10 @@
+'use client';
+import { ChevronRight } from 'lucide-react';
+import { cn } from "../../../lib/utils";
+export const ExpenderCell = (info) => {
+    return info.row.getCanExpand() ? (<button className="pointer" {...{
+        onClick: info.row.getToggleExpandedHandler(),
+    }}>
+      <ChevronRight className={cn(info.row.getIsExpanded() && "rotate-90")}></ChevronRight>
+    </button>) : ('🔵');
+};