namirasoft-site-react 1.5.45 → 1.5.47

package/src/App.tsx

@@ -1,927 +1,927 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
-import { TimeOperation } from 'namirasoft-core';
-import React, { Component, createRef } from 'react';
-import './App.css';
-import { NSLayout } from './components/NSLayout';
-import
-{
-    DateTimeFormatter, IntegerFormatter, JsonFormatter, NSBoxCombo, NSBoxDate, NSBoxDateTime, NSButtonBlue, NSColumn, NSTable, PhoneFormatter, SensitiveFormatter, StringFormatter,
-    NSBanner, NSBarAction, NSBarAlert, NSBarNotification, NSBarNotificationColor, NotificationType, NSBarTitle,
-    NSBoxBoolean, NSBoxBooleans, NSBoxDateRange, NSBoxDateTimeRange, NSBoxDouble, NSBoxDuration, NSBoxDynamic, NSBoxDynamics,
-    NSBoxEmail, NSBoxEntity, NSBoxEnum, NSBoxFile, NSBoxInteger, NSBoxIPV4, NSBoxIPV6, NSBoxMoney, NSBoxOptions, NSBoxPhone, NSBoxRadio,
-    NSBoxSearch, NSBoxSensitive, NSBoxString, NSBoxTextArea, NSBoxTime, NSBoxTimeRange, NSBoxTimeZone, NSBoxURL, NSBoxVersion,
-    NSButton, NSButtonGreen, NSButtonRed,
-    NSCard, NSCardScreenshot,
-    NSTableChart,
-    NSCopy, NSCopyBox,
-    NSDialog, NSDialogDelete, NSDialogInfo, NSDialogPageSelection, NSInfo,
-    NSDialogBox, NSDialogBoxDate, NSDialogBoxDateTime, NSDialogBoxPhone, NSDialogBoxString,
-    NSDownTimer,
-    NSTile,
-    NSFilterBox, NSFilterBoxItems, NSFilterItem,
-    NSFooter,
-    NSHeader,
-    NSID,
-    NSLabel, NSLabelErrorNotifier, NSLabelSensitive,
-    NSLine, NSLineText,
-    NSLink, NSLinkBlue, NSLinkGreen, NSLinkRed,
-    NSListGrouped, NSListProduct,
-    NSLoading,
-    NSMenuAction, NSMenuButton,
-    NSNoData,
-    NSPagination,
-    NSPanel, NSPanelAccordion,
-    NSRepeater, NSRepeaterNSBoxSchemaVariable, NSRepeaterNSTag,
-    NSRow,
-    NSSection, NSSectionCards, NSSectionTiles, NSSectionTitle,
-    NSSpace, NSSpaceSizeType,
-    NSReorderDialog, NSSortDialog,
-    NSTabPage,
-    NSTag,
-    NSTitle,
-    NSGauge, NSGaugeDate, NSGaugeNumber,
-    NSSplitter,
-    NSBox,
-} from './main';
-import NSMegaMenu from './components/NSMegaMenu';
-import NSProgressBar from './components/NSProgressBar';
-import { NSDownload } from './components/NSDownload';
-import { NSElectronicCard } from './components/NSElectronicCard';
-import { NSEntityCardBackground } from './components/NSEntityCardBackground';
-import { NSHeaderScreenshot } from './components/NSHeaderScreenshot';
-import { NSProductSearch } from './components/NSProductSearch';
-import { NSRange } from './components/NSRange';
-import { NSTimelineMonthly } from './components/NSTimelineMonthly';
-import { NSBoxSchemaBase } from './components/NSBoxSchemaBase';
-import { NSBoxSchemaVariable } from './components/NSBoxSchemaVariable';
-import { NSBoxFilePath } from './components/NSBoxFilePath';
-import { NSBoxFont } from './components/NSBoxFont';
-import { NSBoxIPV4Range } from './components/NSBoxIPV4Range';
-import { NSBoxIPV6Range } from './components/NSBoxIPV6Range';
-import { NSBoxColor } from './components/NSBoxColor';
-
-type TableRow = {
-    id: string,
-    parent_id?: string,
-    name: string,
-    age: number,
-    experience: number,
-    salary: number,
-    city: string,
-    phone: string,
-    json?: string,
-    national_code: string,
-    created_at: string,
-};
-
-interface AppProps { }
-interface AppState { openDialog: string | null }
-
-class DocErrorBoundary extends Component<{ name: string; children: React.ReactNode }, { error: string | null }>
-{
-    constructor(props: { name: string; children: React.ReactNode })
-    {
-        super(props);
-        this.state = { error: null };
-    }
-    static getDerivedStateFromError(error: Error) { return { error: error?.message ?? String(error) }; }
-    override componentDidCatch(_error: Error) { }
-    override render()
-    {
-        if (this.state.error !== null)
-            return <div style={{ color: "#b00", fontSize: 12, padding: "0.25rem 0.5rem", border: "1px dashed #b00", borderRadius: 4 }}>
-                {this.props.name} render error: {this.state.error}
-            </div>;
-        return this.props.children;
-    }
-}
-
-export class App extends Component<AppProps, AppState>
-{
-    private NSTableRef = createRef<NSTable<TableRow>>();
-    private NSBoxDateRef = createRef<NSBoxDate>();
-    private NSBoxDateTimeRef = createRef<NSBoxDateTime>();
-
-    constructor(props: AppProps)
-    {
-        super(props);
-        this.state = { openDialog: null }
-    };
-
-    private openDialog = (name: string) => this.setState({ openDialog: name });
-    private closeDialog = () => this.setState({ openDialog: null });
-
-    override render()
-    {
-        const gaugeColors = { low: "red", medium: "orange", high: "green" };
-        return (
-            <NSLayout
-                header={{
-                    right: {
-                        icons: Array.from({ length: 6 }, (_, i) => ({
-                            onClicked: () => { },
-                            src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png",
-                            count: i + 1,
-                            tooltip: `Icon ${i + 1}`,
-                        })),
-                    },
-                    mega_menu: true,
-                    onCollapse: () => { },
-                    filters_postprocessor: (filters) =>
-                    {
-                        const now = new Date();
-                        const names = [
-                            "Model", "Load Balancer", "Failover", "Race", "Support",
-                            "Analytics", "Billing", "Reports", "Settings", "Integrations",
-                            "Users", "Teams", "Roles", "Audit Logs", "Notifications",
-                            "API Keys", "Webhooks"
-                        ];
-                        const mocks = names.map((name, i) => ({
-                            id: 100000 + i,
-                            parent_id: null,
-                            filter_id: 0,
-                            link_id: i,
-                            name,
-                            logo: null,
-                            order: i,
-                            created_at: now,
-                            updated_at: now,
-                            filter: {} as any,
-                            link: {
-                                id: i,
-                                category_id: 0,
-                                domain_id: 0,
-                                name,
-                                url: `https://example.com/mock/${i}`,
-                                logo: "",
-                                public: true,
-                                private: true,
-                                importance: 0,
-                                description: "",
-                                created_at: now,
-                                updated_at: now,
-                                category: {} as any,
-                                domain: {} as any,
-                            },
-                        }));
-                        return [...filters, ...mocks];
-                    },
-                }}
-                isLoggedIn={() => true}
-                logo='https://static.namirasoft.com/image/namirasoft/access/logo/base.png'
-                background={{ image: "https://static.namirasoft.com/image/namirasoft/access/background/base.svg" }}
-                notifications={[]}
-                notifier={{} as any}
-                scope=''
-            >
-                <NSColumn style={{ gap: '1rem', padding: '1rem' }}>
-                    <NSLineText title="NSBanner" />
-                    <DocErrorBoundary name="NSBanner">
-                        <NSBanner imageLeft={null} imageRight={null} title={{ text: "Sample" }} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBarAction" />
-                    <DocErrorBoundary name="NSBarAction">
-                        <NSBarAction title="Sample" />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBarAlert" />
-                    <DocErrorBoundary name="NSBarAlert">
-                        <NSBarAlert title={{ title: "Alert" }} isVisible={() => true} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBarNotification" />
-                    <DocErrorBoundary name="NSBarNotification">
-                        {React.createElement(NSBarNotification as any, { id: "n1", text: "Hi", type: NotificationType.Information, color: NSBarNotificationColor.BLUE, onClose: () => { }, onChangeState: () => { } })}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBarTitle" />
-                    <DocErrorBoundary name="NSBarTitle">
-                        <NSBarTitle title="Sample" />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxBoolean" />
-                    <DocErrorBoundary name="NSBoxBoolean">
-                        <NSBoxBoolean title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxBooleans" />
-                    <DocErrorBoundary name="NSBoxBooleans">
-                        <NSBoxBooleans items={[{ value: "a", text: "A" }]} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxColor" />
-                    <DocErrorBoundary name="NSBoxColor">
-                        <NSBoxColor title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxCombo" />
-                    <DocErrorBoundary name="NSBoxCombo">
-                        <NSBoxCombo title="Sample" required={false} multiple={false} getOptions={() => []} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxDate" />
-                    <DocErrorBoundary name="NSBoxDate">
-                        <NSBoxDate title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxDateRange" />
-                    <DocErrorBoundary name="NSBoxDateRange">
-                        <NSBoxDateRange title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxDateTime" />
-                    <DocErrorBoundary name="NSBoxDateTime">
-                        <NSBoxDateTime title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxDateTimeRange" />
-                    <DocErrorBoundary name="NSBoxDateTimeRange">
-                        <NSBoxDateTimeRange title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxDouble" />
-                    <DocErrorBoundary name="NSBoxDouble">
-                        <NSBoxDouble title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxDuration" />
-                    <DocErrorBoundary name="NSBoxDuration">
-                        <NSBoxDuration title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxDynamic" />
-                    <DocErrorBoundary name="NSBoxDynamic">
-                        {React.createElement(NSBoxDynamic as any, { title: "Sample", name: "dyn", variable: {} })}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxDynamics" />
-                    <DocErrorBoundary name="NSBoxDynamics">
-                        <NSBoxDynamics name="sample" variables={[]} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxEmail" />
-                    <DocErrorBoundary name="NSBoxEmail">
-                        <NSBoxEmail title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxEntity" />
-                    <DocErrorBoundary name="NSBoxEntity">
-                        {React.createElement(NSBoxEntity as any, { title: "Sample", required: false, multiple: false, getTitle: (x: any) => x, getValue: (x: any) => x, getSort: () => null, list: async () => ({ count: 0, rows: [] }), table_name: "sample" })}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxEnum" />
-                    <DocErrorBoundary name="NSBoxEnum">
-                        <NSBoxEnum title="Sample" required={false} multiple={false} getEnumObject={() => ({})} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxFile" />
-                    <DocErrorBoundary name="NSBoxFile">
-                        <NSBoxFile title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxFilePath" />
-                    <DocErrorBoundary name="NSBoxFilePath">
-                        <NSBoxFilePath title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxFont" />
-                    <DocErrorBoundary name="NSBoxFont">
-                        <NSBoxFont title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxIPV4" />
-                    <DocErrorBoundary name="NSBoxIPV4">
-                        <NSBoxIPV4 title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxIPV4Range" />
-                    <DocErrorBoundary name="NSBoxIPV4Range">
-                        <NSBoxIPV4Range title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxIPV6" />
-                    <DocErrorBoundary name="NSBoxIPV6">
-                        <NSBoxIPV6 title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxIPV6Range" />
-                    <DocErrorBoundary name="NSBoxIPV6Range">
-                        <NSBoxIPV6Range title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxInteger" />
-                    <DocErrorBoundary name="NSBoxInteger">
-                        <NSBoxInteger title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxMoney" />
-                    <DocErrorBoundary name="NSBoxMoney">
-                        <NSBoxMoney title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxOptions" />
-                    <DocErrorBoundary name="NSBoxOptions">
-                        <NSBoxOptions title="Sample" required={false} multiple={false} options={[{ value: "a", title: "A" }]} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxPhone" />
-                    <DocErrorBoundary name="NSBoxPhone">
-                        <NSBoxPhone title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxRadio" />
-                    <DocErrorBoundary name="NSBoxRadio">
-                        <NSBoxRadio title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxSchemaBase" />
-                    <DocErrorBoundary name="NSBoxSchemaBase">
-                        {React.createElement(NSBoxSchemaBase as any, { title: "Sample", name: "schema", required: false })}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxSchemaVariable" />
-                    <DocErrorBoundary name="NSBoxSchemaVariable">
-                        {React.createElement(NSBoxSchemaVariable as any, { title: "Sample", name: "schemavar", required: false })}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxSearch" />
-                    <DocErrorBoundary name="NSBoxSearch">
-                        <NSBoxSearch title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxSensitive" />
-                    <DocErrorBoundary name="NSBoxSensitive">
-                        <NSBoxSensitive title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxString" />
-                    <DocErrorBoundary name="NSBoxString">
-                        <NSBoxString title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxTextArea" />
-                    <DocErrorBoundary name="NSBoxTextArea">
-                        <NSBoxTextArea title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxTime" />
-                    <DocErrorBoundary name="NSBoxTime">
-                        <NSBoxTime title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxTimeRange" />
-                    <DocErrorBoundary name="NSBoxTimeRange">
-                        <NSBoxTimeRange title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxTimeZone" />
-                    <DocErrorBoundary name="NSBoxTimeZone">
-                        <NSBoxTimeZone title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxURL" />
-                    <DocErrorBoundary name="NSBoxURL">
-                        <NSBoxURL title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSBoxVersion" />
-                    <DocErrorBoundary name="NSBoxVersion">
-                        <NSBoxVersion title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSButton" />
-                    <DocErrorBoundary name="NSButton">
-                        <NSButton title="Sample" onClick={{ action: () => { }, showLoading: false }} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSButtonBlue" />
-                    <DocErrorBoundary name="NSButtonBlue">
-                        <NSButtonBlue title="Sample" onClick={{ action: () => { }, showLoading: false }} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSButtonGreen" />
-                    <DocErrorBoundary name="NSButtonGreen">
-                        <NSButtonGreen title="Sample" onClick={{ action: () => { }, showLoading: false }} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSButtonRed" />
-                    <DocErrorBoundary name="NSButtonRed">
-                        <NSButtonRed title="Sample" onClick={{ action: () => { }, showLoading: false }} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSCard" />
-                    <DocErrorBoundary name="NSCard">
-                        <NSColumn style={{ gap: "1.5rem" }}>
-                            <NSTitle title="Without CTA" />
-                            <div style={{ display: "flex", flexWrap: "wrap", gap: "1rem" }}>
-                                <NSCard title="Title only" link={{ href: "#" }} />
-                                <NSCard description="Description only — some sample text used to describe the card without any title or image." link={{ href: "#" }} />
-                                <NSCard image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
-                                <NSCard headline={{ text: "Headline only", color: "#0d6efd" }} link={{ href: "#" }} />
-                                <NSCard title="Title + Description" description="Short description text under the title." link={{ href: "#" }} />
-                                <NSCard title="Title + Image" image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
-                                <NSCard title="Title + Headline" headline={{ text: "Featured", color: "#28a745" }} link={{ href: "#" }} />
-                                <NSCard description="Description + Image with no title." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
-                                <NSCard description="Description + Headline." headline={{ text: "Info", color: "#17a2b8" }} link={{ href: "#" }} />
-                                <NSCard headline={{ text: "New", color: "#dc3545" }} image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
-                                <NSCard title="Title + Headline + Image" headline={{ text: "Popular", color: "#fd7e14" }} image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
-                                <NSCard title="Title + Description + Image" description="Full card with title, description and image." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
-                                <NSCard title="Title + Headline + Description" headline={{ text: "Trending", color: "#20c997" }} description="Card with headline, title and description but no image." link={{ href: "#" }} />
-                                <NSCard headline={{ text: "Alert", color: "#dc3545" }} description="Headline + Description + Image without a title." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
-                                <NSCard title="All fields" headline={{ text: "Premium", color: "#ffc107" }} description="Card with headline, title, description and image combined." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
-                            </div>
-
-                            <NSTitle title="With CTA" />
-                            <div style={{ display: "flex", flexWrap: "wrap", gap: "1rem" }}>
-                                <NSCard title="Title only" link={{ href: "#", children: "Open" }} />
-                                <NSCard description="Description only — some sample text used to describe the card without any title or image." link={{ href: "#", children: "Read more" }} />
-                                <NSCard image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "View image" }} />
-                                <NSCard headline={{ text: "Headline only", color: "#0d6efd" }} link={{ href: "#", children: "Explore" }} />
-                                <NSCard title="Title + Description" description="Short description text under the title." link={{ href: "#", children: "Learn more" }} />
-                                <NSCard title="Title + Image" image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "See details" }} />
-                                <NSCard title="Title + Headline" headline={{ text: "Featured", color: "#28a745" }} link={{ href: "#", children: "Discover" }} />
-                                <NSCard description="Description + Image with no title." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "Preview" }} />
-                                <NSCard description="Description + Headline." headline={{ text: "Info", color: "#17a2b8" }} link={{ href: "#", children: "More info" }} />
-                                <NSCard headline={{ text: "New", color: "#dc3545" }} image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "Check out" }} />
-                                <NSCard title="Title + Headline + Image" headline={{ text: "Popular", color: "#fd7e14" }} image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "Browse" }} />
-                                <NSCard title="Title + Description + Image" description="Full card with title, description and image." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "Continue" }} />
-                                <NSCard title="Title + Headline + Description" headline={{ text: "Trending", color: "#20c997" }} description="Card with headline, title and description but no image." link={{ href: "#", children: "Start now" }} />
-                                <NSCard headline={{ text: "Alert", color: "#dc3545" }} description="Headline + Description + Image without a title." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "Take action" }} />
-                                <NSCard title="All fields" headline={{ text: "Premium", color: "#ffc107" }} description="Card with headline, title, description and image combined." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "Get started" }} />
-                            </div>
-                        </NSColumn>
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSCardScreenshot" />
-                    <DocErrorBoundary name="NSCardScreenshot">
-                        {React.createElement(NSCardScreenshot as any, { key: 1, screenshot: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png", timeSpent: "1h", onDelete: () => { } })}
-                    </DocErrorBoundary>
-
-                    {/* <NSLineText title="NSChartBar" />
-                    <DocErrorBoundary name="NSChartBar">
-                        <NSChartBar labels={["A", "B"]} dataset={[{ label: "s", data: [1, 2] }]} range={{ min: 0, max: 10 }} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSChartDoughnut" />
-                    <DocErrorBoundary name="NSChartDoughnut">
-                        <NSChartDoughnut title="Sample" datas={[1, 2, 3]} labels={["A", "B", "C"]} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSChartLine" />
-                    <DocErrorBoundary name="NSChartLine">
-                        <NSChartLine labels={["A", "B"]} dataset={[{ label: "s", data: [1, 2] }]} range={{ min: 0, max: 10 }} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSChartPie" />
-                    <DocErrorBoundary name="NSChartPie">
-                        <NSChartPie datas={[1, 2, 3]} labels={["A", "B", "C"]} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSChartRange" />
-                    <DocErrorBoundary name="NSChartRange">
-                        <NSChartRange />
-                    </DocErrorBoundary> */}
-
-                    <NSLineText title="NSColumn" />
-                    <DocErrorBoundary name="NSColumn">
-                        <NSColumn>Sample</NSColumn>
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSCopy" />
-                    <DocErrorBoundary name="NSCopy">
-                        <NSCopy>Sample</NSCopy>
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSCopyBox" />
-                    <DocErrorBoundary name="NSCopyBox">
-                        <NSCopyBox value="Sample" />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSDialog" />
-                    <DocErrorBoundary name="NSDialog">
-                        <NSButtonBlue title="Open NSDialog" onClick={{ action: () => this.openDialog("NSDialog"), showLoading: false }} />
-                        {this.state.openDialog === "NSDialog" && <NSDialog onClose={this.closeDialog}>Sample</NSDialog>}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSDialogBox" />
-                    <DocErrorBoundary name="NSDialogBox">
-                        <NSButtonBlue title="Open NSDialogBox" onClick={{ action: () => this.openDialog("NSDialogBox"), showLoading: false }} />
-                        {this.state.openDialog === "NSDialogBox" && React.createElement(NSDialogBox as any, { onClose: this.closeDialog, children_ref: React.createRef<any>() })}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSDialogBoxDate" />
-                    <DocErrorBoundary name="NSDialogBoxDate">
-                        <NSButtonBlue title="Open NSDialogBoxDate" onClick={{ action: () => this.openDialog("NSDialogBoxDate"), showLoading: false }} />
-                        {this.state.openDialog === "NSDialogBoxDate" && <NSDialogBoxDate onClose={this.closeDialog} box={{ title: "Sample", required: false }} />}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSDialogBoxDateTime" />
-                    <DocErrorBoundary name="NSDialogBoxDateTime">
-                        <NSButtonBlue title="Open NSDialogBoxDateTime" onClick={{ action: () => this.openDialog("NSDialogBoxDateTime"), showLoading: false }} />
-                        {this.state.openDialog === "NSDialogBoxDateTime" && <NSDialogBoxDateTime onClose={this.closeDialog} box={{ title: "Sample", required: false }} />}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSDialogBoxPhone" />
-                    <DocErrorBoundary name="NSDialogBoxPhone">
-                        <NSButtonBlue title="Open NSDialogBoxPhone" onClick={{ action: () => this.openDialog("NSDialogBoxPhone"), showLoading: false }} />
-                        {this.state.openDialog === "NSDialogBoxPhone" && <NSDialogBoxPhone onClose={this.closeDialog} box={{ title: "Sample", required: false }} />}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSDialogBoxString" />
-                    <DocErrorBoundary name="NSDialogBoxString">
-                        <NSButtonBlue title="Open NSDialogBoxString" onClick={{ action: () => this.openDialog("NSDialogBoxString"), showLoading: false }} />
-                        {this.state.openDialog === "NSDialogBoxString" && <NSDialogBoxString onClose={this.closeDialog} box={{ title: "Sample", required: false }} />}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSDialogDelete" />
-                    <DocErrorBoundary name="NSDialogDelete">
-                        <NSButtonBlue title="Open NSDialogDelete" onClick={{ action: () => this.openDialog("NSDialogDelete"), showLoading: false }} />
-                        {this.state.openDialog === "NSDialogDelete" && <NSDialogDelete onClose={this.closeDialog} onYes={{ action: () => { this.closeDialog(); }, showLoading: false }} onNo={{ action: () => { this.closeDialog(); }, showLoading: false }} show_as_code={false} />}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSDialogInfo" />
-                    <DocErrorBoundary name="NSDialogInfo">
-                        <NSButtonBlue title="Open NSDialogInfo" onClick={{ action: () => this.openDialog("NSDialogInfo"), showLoading: false }} />
-                        {this.state.openDialog === "NSDialogInfo" && <NSDialogInfo onClose={this.closeDialog} show_as_code={false} />}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSDialogPageSelection" />
-                    <DocErrorBoundary name="NSDialogPageSelection">
-                        <NSButtonBlue title="Open NSDialogPageSelection" onClick={{ action: () => this.openDialog("NSDialogPageSelection"), showLoading: false }} />
-                        {this.state.openDialog === "NSDialogPageSelection" && React.createElement(NSDialogPageSelection as any, { current_page: 1, current_size: 25, max_page: 10, onClose: this.closeDialog, getItems: async () => [], onFinish: async () => { this.closeDialog(); } })}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSDownTimer" />
-                    <DocErrorBoundary name="NSDownTimer">
-                        <NSDownTimer date={new Date()} text="Sample" />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSDownload" />
-                    <DocErrorBoundary name="NSDownload">
-                        <NSDownload releaseDate="2025-01-01" />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSElectronicCard" />
-                    <DocErrorBoundary name="NSElectronicCard">
-                        <NSElectronicCard src="https://static.namirasoft.com/image/namirasoft/access/logo/base.png" title="Sample" cardNumber="0000000000000000" />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSEntityCardBackground" />
-                    <DocErrorBoundary name="NSEntityCardBackground">
-                        <NSEntityCardBackground title="Sample" />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSFilterBox" />
-                    <DocErrorBoundary name="NSFilterBox">
-                        <NSFilterBox getTables={() => []} getMoreTables={async () => []} getValues={null} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSFilterBoxItems" />
-                    <DocErrorBoundary name="NSFilterBoxItems">
-                        <NSFilterBoxItems filterItems={[]} onClearFilterItems={() => { }} onRemoveFilterItem={() => { }} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSFilterItem" />
-                    <DocErrorBoundary name="NSFilterItem">
-                        {React.createElement(NSFilterItem as any, { item: { toString: () => "Sample" }, removeSelected: () => { } })}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSFooter" />
-                    <DocErrorBoundary name="NSFooter">
-                        <NSFooter scope="" name="sample" logo="https://static.namirasoft.com/image/namirasoft/access/logo/base.png" isLoggedIn={() => true} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSGauge" />
-                    <DocErrorBoundary name="NSGauge">
-                        <NSGauge total={100} current={50} showPercent colors={gaugeColors} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSGaugeDate" />
-                    <DocErrorBoundary name="NSGaugeDate">
-                        <NSGaugeDate title="Sample" from={TimeOperation.daysAgo(1, new Date())} to={TimeOperation.daysAgo(-1, new Date())} colors={gaugeColors} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSGaugeNumber" />
-                    <DocErrorBoundary name="NSGaugeNumber">
-                        <NSGaugeNumber title="Sample" total={100} current={50} colors={gaugeColors} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSHeader" />
-                    <DocErrorBoundary name="NSHeader">
-                        {React.createElement(NSHeader as any, { right: { icons: [] }, left: { scope: "", name: "sample", logo: "" }, isLoggedIn: () => true, notifier: {} })}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSHeaderScreenshot" />
-                    <DocErrorBoundary name="NSHeaderScreenshot">
-                        <NSHeaderScreenshot project="P" task="T" time="1h" Countdown="00:00" />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSID" />
-                    <DocErrorBoundary name="NSID">
-                        <NSID id="sample" map={null} storage={null} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSInfo" />
-                    <DocErrorBoundary name="NSInfo">
-                        <NSInfo text="Sample" />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSLabel" />
-                    <DocErrorBoundary name="NSLabel">
-                        <NSLabel title="Sample" />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSLabelErrorNotifier" />
-                    <DocErrorBoundary name="NSLabelErrorNotifier">
-                        <NSLabelErrorNotifier clearError={() => { }} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSLabelSensitive" />
-                    <DocErrorBoundary name="NSLabelSensitive">
-                        <NSLabelSensitive value="Sample" sensitive={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSLine" />
-                    <DocErrorBoundary name="NSLine">
-                        <NSLine />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSLink" />
-                    <DocErrorBoundary name="NSLink">
-                        <NSLink href="#">Sample</NSLink>
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSLinkBlue" />
-                    <DocErrorBoundary name="NSLinkBlue">
-                        <NSLinkBlue href="#">Sample</NSLinkBlue>
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSLinkGreen" />
-                    <DocErrorBoundary name="NSLinkGreen">
-                        <NSLinkGreen href="#">Sample</NSLinkGreen>
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSLinkRed" />
-                    <DocErrorBoundary name="NSLinkRed">
-                        <NSLinkRed href="#">Sample</NSLinkRed>
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSListGrouped" />
-                    <DocErrorBoundary name="NSListGrouped">
-                        <NSListGrouped groups={[]} onClick={() => { }} onClose={() => { }} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSListProduct" />
-                    <DocErrorBoundary name="NSListProduct">
-                        <NSListProduct scope="" name="sample" />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSLoading" />
-                    <DocErrorBoundary name="NSLoading">
-                        <NSLoading />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSMegaMenu" />
-                    <DocErrorBoundary name="NSMegaMenu">
-                        {React.createElement(NSMegaMenu as any, { items: [], selected: { id: 0 } })}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSMenuAction" />
-                    <DocErrorBoundary name="NSMenuAction">
-                        <NSMenuAction name="Sample" items={[]} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSMenuButton" />
-                    <DocErrorBoundary name="NSMenuButton">
-                        <NSMenuButton />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSNoData" />
-                    <DocErrorBoundary name="NSNoData">
-                        <NSNoData lable="No Data" />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSPagination" />
-                    <DocErrorBoundary name="NSPagination">
-                        <NSPagination totalItems={100} onPageChange={() => { }} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSPanel" />
-                    <DocErrorBoundary name="NSPanel">
-                        <NSPanel>Sample</NSPanel>
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSPanelAccordion" />
-                    <DocErrorBoundary name="NSPanelAccordion">
-                        <NSPanelAccordion getHeader={() => "Sample"}>Sample</NSPanelAccordion>
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSProductSearch" />
-                    <DocErrorBoundary name="NSProductSearch">
-                        <NSProductSearch search="sample" />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSProgressBar" />
-                    <DocErrorBoundary name="NSProgressBar">
-                        {React.createElement(NSProgressBar as any, { progress: 50 })}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSRange" />
-                    <DocErrorBoundary name="NSRange">
-                        <NSRange data={[]} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSReorderDialog" />
-                    <DocErrorBoundary name="NSReorderDialog">
-                        <NSButtonBlue title="Open NSReorderDialog" onClick={{ action: () => this.openDialog("NSReorderDialog"), showLoading: false }} />
-                        {this.state.openDialog === "NSReorderDialog" && <NSReorderDialog visibleColumnKeys={[]} getColumns={() => []} onCancel={this.closeDialog} onApply={() => { this.closeDialog(); }} />}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSRepeater" />
-                    <DocErrorBoundary name="NSRepeater">
-                        {React.createElement(NSRepeater as any, { title: "Sample", required: false, createItem: () => null, getValue: () => null, setValue: () => { }, isEmpty: () => true })}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSRepeaterNSBoxSchemaVariable" />
-                    <DocErrorBoundary name="NSRepeaterNSBoxSchemaVariable">
-                        <NSRepeaterNSBoxSchemaVariable name="sample" title="Sample" required={false} item_title="Item" />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSRepeaterNSTag" />
-                    <DocErrorBoundary name="NSRepeaterNSTag">
-                        <NSRepeaterNSTag name="sample" title="Sample" required={false} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSRow" />
-                    <DocErrorBoundary name="NSRow">
-                        <NSRow>Sample</NSRow>
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSSection" />
-                    <DocErrorBoundary name="NSSection">
-                        <NSSection>Sample</NSSection>
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSSectionCards" />
-                    <DocErrorBoundary name="NSSectionCards">
-                        <NSSectionCards cards={[]} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSSectionTiles" />
-                    <DocErrorBoundary name="NSSectionTiles">
-                        <NSSectionTiles tiles={[]} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSSectionTitle" />
-                    <DocErrorBoundary name="NSSectionTitle">
-                        <NSSectionTitle title="Sample">Sample</NSSectionTitle>
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSSortDialog" />
-                    <DocErrorBoundary name="NSSortDialog">
-                        <NSButtonBlue title="Open NSSortDialog" onClick={{ action: () => this.openDialog("NSSortDialog"), showLoading: false }} />
-                        {this.state.openDialog === "NSSortDialog" && React.createElement(NSSortDialog as any, { sorts: [], getColumns: () => [], onCancel: this.closeDialog, onApply: () => { this.closeDialog(); } })}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSSpace" />
-                    <DocErrorBoundary name="NSSpace">
-                        <NSSpace size={NSSpaceSizeType.SMALL} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSSplitter" />
-                    <DocErrorBoundary name="NSSplitter">
-                        <NSSplitter />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSTabPage" />
-                    <DocErrorBoundary name="NSTabPage">
-                        <NSTabPage tabs={[]} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSTable" />
-                    <DocErrorBoundary name="NSTable">
-                        {React.createElement(NSTable as any, { name: "sample_docs", columns: [], getRowKey: (item: any) => item?.value?.id, getRows: async () => ({ count: 0, rows: [] }) })}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSTableChart" />
-                    <DocErrorBoundary name="NSTableChart">
-                        {false && React.createElement(NSTableChart as any, { name: "sample", columns: [], rows: [], selectedRows: [], onClose: () => { } })}
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSTag" />
-                    <DocErrorBoundary name="NSTag">
-                        <NSTag />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSTile" />
-                    <DocErrorBoundary name="NSTile">
-                        <NSTile title="Sample" description="Sample" image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSTimelineMonthly" />
-                    <DocErrorBoundary name="NSTimelineMonthly">
-                        <NSTimelineMonthly data={[]} />
-                    </DocErrorBoundary>
-
-                    <NSLineText title="NSTitle" />
-                    <DocErrorBoundary name="NSTitle">
-                        <NSTitle title="Sample" />
-                    </DocErrorBoundary>
-                </NSColumn>
-                <NSTable<TableRow>
-                    ref={this.NSTableRef}
-                    name={"table"}
-                    checkbox
-                    columns={[
-                        {
-                            table: { name: "table", text: "Table" },
-                            index: 0, type: "String", name: "id", text: "ID", formatter: new StringFormatter()
-                        },
-                        {
-                            table: { name: "table", text: "Table" },
-                            index: 1, type: "String", name: "name", text: "Name", formatter: new StringFormatter()
-                        },
-                        {
-                            table: { name: "table", text: "Table" },
-                            index: 2, type: "Number", name: "age", text: "Age", formatter: new IntegerFormatter()
-                        },
-                        {
-                            table: { name: "table", text: "Table" },
-                            index: 3, type: "Number", name: "experience", text: "Experience", formatter: new IntegerFormatter()
-                        },
-                        {
-                            table: { name: "table", text: "Table" },
-                            index: 4, type: "Number", name: "salary", text: "Salary", formatter: new IntegerFormatter()
-                        },
-                        {
-                            table: { name: "table", text: "Table" },
-                            index: 5, type: "String", name: "city", text: "City", formatter: new StringFormatter()
-                        },
-                        {
-                            table: { name: "table", text: "Table" },
-                            index: 6, type: "String", name: "phone", text: "Phone", formatter: new PhoneFormatter()
-                        },
-                        {
-                            table: { name: "table", text: "Table" },
-                            index: 7, type: "String", name: "national_code", text: "National Code", formatter: new SensitiveFormatter<TableRow>(
-                                async (value) =>
-                                {
-                                    await new Promise(resolve => setTimeout(resolve, 1000));
-                                    return value;
-                                },
-                                () => true
-                            )
-                        },
-                        {
-                            table: { name: "table", text: "Table" },
-                            index: 8, type: "DateTime", name: "created_at", text: "Created At", formatter: new DateTimeFormatter()
-                        },
-                        {
-                            table: { name: "table", text: "Table" },
-                            index: 9, type: "String", name: "json", text: "Json", formatter: new JsonFormatter()
-                        },
-                    ]}
-                    getRowKey={(item) => item.value.id}
-                    getRows={async () => ({
-                        count: 300,
-                        rows: [
-                            { id: "a1", name: "Amin Pasban", age: 28, experience: 6, salary: 12000, city: "Rasht", phone: "09117579093", national_code: "2670000001", json: JSON.stringify({ role: "Developer", skills: ["React", "TypeScript"], active: true, projects: { count: 3, latest: "Site Package" } }), created_at: TimeOperation.daysAgo(1, new Date()).toDateString() },
-                            { id: "c3", name: "Negar Sharifpour", age: 28, experience: 2, salary: 9000, city: "Rasht", phone: "09117579092", national_code: "2670000002", created_at: TimeOperation.daysAgo(2, new Date()).toDateString() },
-                            { id: "b2", name: "Milad Nazirzadeh", age: 28, experience: 6, salary: 18000, city: "Tehran", phone: "09127576063", national_code: "0070000003", created_at: TimeOperation.daysAgo(10, new Date()).toDateString() },
-                            { id: "d4", name: "Mohammad Nazirzadeh", age: 29, experience: 4, salary: 8000, city: "Tehran", phone: "09127576063", national_code: "0070000004", created_at: TimeOperation.daysAgo(20, new Date()).toDateString() },
-                            { id: "e5", name: "Hadiseh Pasban", age: 22, experience: 3, salary: 9500, city: "Rasht", phone: "09116463032", national_code: "2670000005", created_at: TimeOperation.daysAgo(100, new Date()).toDateString() },
-                        ]
-                    })}
-                    headerChildren={
-                        <NSBoxString
-                            required
-                            title={"Name"}
-                            hideHeader
-                            style={{ minWidth: NSBox.width.one }}
-                        />
-                    }
-                />
-                <NSColumn style={{ marginTop: "1.5rem", alignItems: "center" }}>
-                    <NSBoxSchemaVariable
-                        title={"Schema"}
-                        required={true}
-                        name='schema'
-                        style={{ width: NSBox.width.double }}
-                    />
-                    <NSButtonBlue
-                        title={"Log"}
-                        onClick={{
-                            showLoading: false,
-                            action: () =>
-                            {
-                                console.log("Date:", this.NSBoxDateRef.current?.getValueString(false));
-                                console.log("DateTime:", this.NSBoxDateTimeRef.current?.getValueString(false));
-                            }
-                        }}
-                    />
-                </NSColumn>
-            </NSLayout>
-        );
-    }
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { TimeOperation } from 'namirasoft-core';
+import React, { Component, createRef } from 'react';
+import './App.css';
+import { NSLayout } from './components/NSLayout';
+import
+{
+    DateTimeFormatter, IntegerFormatter, JsonFormatter, NSBoxCombo, NSBoxDate, NSBoxDateTime, NSButtonBlue, NSColumn, NSTable, PhoneFormatter, SensitiveFormatter, StringFormatter,
+    NSBanner, NSBarAction, NSBarAlert, NSBarNotification, NSBarNotificationColor, NotificationType, NSBarTitle,
+    NSBoxBoolean, NSBoxBooleans, NSBoxDateRange, NSBoxDateTimeRange, NSBoxDouble, NSBoxDuration, NSBoxDynamic, NSBoxDynamics,
+    NSBoxEmail, NSBoxEntity, NSBoxEnum, NSBoxFile, NSBoxInteger, NSBoxIPV4, NSBoxIPV6, NSBoxMoney, NSBoxOptions, NSBoxPhone, NSBoxRadio,
+    NSBoxSearch, NSBoxSensitive, NSBoxString, NSBoxTextArea, NSBoxTime, NSBoxTimeRange, NSBoxTimeZone, NSBoxURL, NSBoxVersion,
+    NSButton, NSButtonGreen, NSButtonRed,
+    NSCard, NSCardScreenshot,
+    NSTableChart,
+    NSCopy, NSCopyBox,
+    NSDialog, NSDialogDelete, NSDialogInfo, NSDialogPageSelection, NSInfo,
+    NSDialogBox, NSDialogBoxDate, NSDialogBoxDateTime, NSDialogBoxPhone, NSDialogBoxString,
+    NSDownTimer,
+    NSTile,
+    NSFilterBox, NSFilterBoxItems, NSFilterItem,
+    NSFooter,
+    NSHeader,
+    NSID,
+    NSLabel, NSLabelErrorNotifier, NSLabelSensitive,
+    NSLine, NSLineText,
+    NSLink, NSLinkBlue, NSLinkGreen, NSLinkRed,
+    NSListGrouped, NSListProduct,
+    NSLoading,
+    NSMenuAction, NSMenuButton,
+    NSNoData,
+    NSPagination,
+    NSPanel, NSPanelAccordion,
+    NSRepeater, NSRepeaterNSBoxSchemaVariable, NSRepeaterNSTag,
+    NSRow,
+    NSSection, NSSectionCards, NSSectionTiles, NSSectionTitle,
+    NSSpace, NSSpaceSizeType,
+    NSReorderDialog, NSSortDialog,
+    NSTabPage,
+    NSTag,
+    NSTitle,
+    NSGauge, NSGaugeDate, NSGaugeNumber,
+    NSSplitter,
+    NSBox,
+} from './main';
+import NSMegaMenu from './components/NSMegaMenu';
+import NSProgressBar from './components/NSProgressBar';
+import { NSDownload } from './components/NSDownload';
+import { NSElectronicCard } from './components/NSElectronicCard';
+import { NSEntityCardBackground } from './components/NSEntityCardBackground';
+import { NSHeaderScreenshot } from './components/NSHeaderScreenshot';
+import { NSProductSearch } from './components/NSProductSearch';
+import { NSRange } from './components/NSRange';
+import { NSTimelineMonthly } from './components/NSTimelineMonthly';
+import { NSBoxSchemaBase } from './components/NSBoxSchemaBase';
+import { NSBoxSchemaVariable } from './components/NSBoxSchemaVariable';
+import { NSBoxFilePath } from './components/NSBoxFilePath';
+import { NSBoxFont } from './components/NSBoxFont';
+import { NSBoxIPV4Range } from './components/NSBoxIPV4Range';
+import { NSBoxIPV6Range } from './components/NSBoxIPV6Range';
+import { NSBoxColor } from './components/NSBoxColor';
+
+type TableRow = {
+    id: string,
+    parent_id?: string,
+    name: string,
+    age: number,
+    experience: number,
+    salary: number,
+    city: string,
+    phone: string,
+    json?: string,
+    national_code: string,
+    created_at: string,
+};
+
+interface AppProps { }
+interface AppState { openDialog: string | null }
+
+class DocErrorBoundary extends Component<{ name: string; children: React.ReactNode }, { error: string | null }>
+{
+    constructor(props: { name: string; children: React.ReactNode })
+    {
+        super(props);
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error: Error) { return { error: error?.message ?? String(error) }; }
+    override componentDidCatch(_error: Error) { }
+    override render()
+    {
+        if (this.state.error !== null)
+            return <div style={{ color: "#b00", fontSize: 12, padding: "0.25rem 0.5rem", border: "1px dashed #b00", borderRadius: 4 }}>
+                {this.props.name} render error: {this.state.error}
+            </div>;
+        return this.props.children;
+    }
+}
+
+export class App extends Component<AppProps, AppState>
+{
+    private NSTableRef = createRef<NSTable<TableRow>>();
+    private NSBoxDateRef = createRef<NSBoxDate>();
+    private NSBoxDateTimeRef = createRef<NSBoxDateTime>();
+
+    constructor(props: AppProps)
+    {
+        super(props);
+        this.state = { openDialog: null }
+    };
+
+    private openDialog = (name: string) => this.setState({ openDialog: name });
+    private closeDialog = () => this.setState({ openDialog: null });
+
+    override render()
+    {
+        const gaugeColors = { low: "red", medium: "orange", high: "green" };
+        return (
+            <NSLayout
+                header={{
+                    right: {
+                        icons: Array.from({ length: 6 }, (_, i) => ({
+                            onClicked: () => { },
+                            src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png",
+                            count: i + 1,
+                            tooltip: `Icon ${i + 1}`,
+                        })),
+                    },
+                    mega_menu: true,
+                    onCollapse: () => { },
+                    filters_postprocessor: (filters) =>
+                    {
+                        const now = new Date();
+                        const names = [
+                            "Model", "Load Balancer", "Failover", "Race", "Support",
+                            "Analytics", "Billing", "Reports", "Settings", "Integrations",
+                            "Users", "Teams", "Roles", "Audit Logs", "Notifications",
+                            "API Keys", "Webhooks"
+                        ];
+                        const mocks = names.map((name, i) => ({
+                            id: 100000 + i,
+                            parent_id: null,
+                            filter_id: 0,
+                            link_id: i,
+                            name,
+                            logo: null,
+                            order: i,
+                            created_at: now,
+                            updated_at: now,
+                            filter: {} as any,
+                            link: {
+                                id: i,
+                                category_id: 0,
+                                domain_id: 0,
+                                name,
+                                url: `https://example.com/mock/${i}`,
+                                logo: "",
+                                public: true,
+                                private: true,
+                                importance: 0,
+                                description: "",
+                                created_at: now,
+                                updated_at: now,
+                                category: {} as any,
+                                domain: {} as any,
+                            },
+                        }));
+                        return [...filters, ...mocks];
+                    },
+                }}
+                isLoggedIn={() => true}
+                logo='https://static.namirasoft.com/image/namirasoft/access/logo/base.png'
+                background={{ image: "https://static.namirasoft.com/image/namirasoft/access/background/base.svg" }}
+                notifications={[]}
+                notifier={{} as any}
+                scope=''
+            >
+                <NSColumn style={{ gap: '1rem', padding: '1rem' }}>
+                    <NSLineText title="NSBanner" />
+                    <DocErrorBoundary name="NSBanner">
+                        <NSBanner imageLeft={null} imageRight={null} title={{ text: "Sample" }} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBarAction" />
+                    <DocErrorBoundary name="NSBarAction">
+                        <NSBarAction title="Sample" />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBarAlert" />
+                    <DocErrorBoundary name="NSBarAlert">
+                        <NSBarAlert title={{ title: "Alert" }} isVisible={() => true} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBarNotification" />
+                    <DocErrorBoundary name="NSBarNotification">
+                        {React.createElement(NSBarNotification as any, { id: "n1", text: "Hi", type: NotificationType.Information, color: NSBarNotificationColor.BLUE, onClose: () => { }, onChangeState: () => { } })}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBarTitle" />
+                    <DocErrorBoundary name="NSBarTitle">
+                        <NSBarTitle title="Sample" />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxBoolean" />
+                    <DocErrorBoundary name="NSBoxBoolean">
+                        <NSBoxBoolean title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxBooleans" />
+                    <DocErrorBoundary name="NSBoxBooleans">
+                        <NSBoxBooleans items={[{ value: "a", text: "A" }]} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxColor" />
+                    <DocErrorBoundary name="NSBoxColor">
+                        <NSBoxColor title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxCombo" />
+                    <DocErrorBoundary name="NSBoxCombo">
+                        <NSBoxCombo title="Sample" required={false} multiple={false} getOptions={() => []} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxDate" />
+                    <DocErrorBoundary name="NSBoxDate">
+                        <NSBoxDate title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxDateRange" />
+                    <DocErrorBoundary name="NSBoxDateRange">
+                        <NSBoxDateRange title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxDateTime" />
+                    <DocErrorBoundary name="NSBoxDateTime">
+                        <NSBoxDateTime title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxDateTimeRange" />
+                    <DocErrorBoundary name="NSBoxDateTimeRange">
+                        <NSBoxDateTimeRange title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxDouble" />
+                    <DocErrorBoundary name="NSBoxDouble">
+                        <NSBoxDouble title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxDuration" />
+                    <DocErrorBoundary name="NSBoxDuration">
+                        <NSBoxDuration title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxDynamic" />
+                    <DocErrorBoundary name="NSBoxDynamic">
+                        {React.createElement(NSBoxDynamic as any, { title: "Sample", name: "dyn", variable: {} })}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxDynamics" />
+                    <DocErrorBoundary name="NSBoxDynamics">
+                        <NSBoxDynamics name="sample" variables={[]} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxEmail" />
+                    <DocErrorBoundary name="NSBoxEmail">
+                        <NSBoxEmail title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxEntity" />
+                    <DocErrorBoundary name="NSBoxEntity">
+                        {React.createElement(NSBoxEntity as any, { title: "Sample", required: false, multiple: false, getTitle: (x: any) => x, getValue: (x: any) => x, getSort: () => null, list: async () => ({ count: 0, rows: [] }), table_name: "sample" })}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxEnum" />
+                    <DocErrorBoundary name="NSBoxEnum">
+                        <NSBoxEnum title="Sample" required={false} multiple={false} getEnumObject={() => ({})} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxFile" />
+                    <DocErrorBoundary name="NSBoxFile">
+                        <NSBoxFile title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxFilePath" />
+                    <DocErrorBoundary name="NSBoxFilePath">
+                        <NSBoxFilePath title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxFont" />
+                    <DocErrorBoundary name="NSBoxFont">
+                        <NSBoxFont title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxIPV4" />
+                    <DocErrorBoundary name="NSBoxIPV4">
+                        <NSBoxIPV4 title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxIPV4Range" />
+                    <DocErrorBoundary name="NSBoxIPV4Range">
+                        <NSBoxIPV4Range title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxIPV6" />
+                    <DocErrorBoundary name="NSBoxIPV6">
+                        <NSBoxIPV6 title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxIPV6Range" />
+                    <DocErrorBoundary name="NSBoxIPV6Range">
+                        <NSBoxIPV6Range title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxInteger" />
+                    <DocErrorBoundary name="NSBoxInteger">
+                        <NSBoxInteger title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxMoney" />
+                    <DocErrorBoundary name="NSBoxMoney">
+                        <NSBoxMoney title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxOptions" />
+                    <DocErrorBoundary name="NSBoxOptions">
+                        <NSBoxOptions title="Sample" required={false} multiple={false} options={[{ value: "a", title: "A" }]} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxPhone" />
+                    <DocErrorBoundary name="NSBoxPhone">
+                        <NSBoxPhone title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxRadio" />
+                    <DocErrorBoundary name="NSBoxRadio">
+                        <NSBoxRadio title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxSchemaBase" />
+                    <DocErrorBoundary name="NSBoxSchemaBase">
+                        {React.createElement(NSBoxSchemaBase as any, { title: "Sample", name: "schema", required: false })}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxSchemaVariable" />
+                    <DocErrorBoundary name="NSBoxSchemaVariable">
+                        {React.createElement(NSBoxSchemaVariable as any, { title: "Sample", name: "schemavar", required: false })}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxSearch" />
+                    <DocErrorBoundary name="NSBoxSearch">
+                        <NSBoxSearch title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxSensitive" />
+                    <DocErrorBoundary name="NSBoxSensitive">
+                        <NSBoxSensitive title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxString" />
+                    <DocErrorBoundary name="NSBoxString">
+                        <NSBoxString title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxTextArea" />
+                    <DocErrorBoundary name="NSBoxTextArea">
+                        <NSBoxTextArea title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxTime" />
+                    <DocErrorBoundary name="NSBoxTime">
+                        <NSBoxTime title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxTimeRange" />
+                    <DocErrorBoundary name="NSBoxTimeRange">
+                        <NSBoxTimeRange title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxTimeZone" />
+                    <DocErrorBoundary name="NSBoxTimeZone">
+                        <NSBoxTimeZone title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxURL" />
+                    <DocErrorBoundary name="NSBoxURL">
+                        <NSBoxURL title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSBoxVersion" />
+                    <DocErrorBoundary name="NSBoxVersion">
+                        <NSBoxVersion title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSButton" />
+                    <DocErrorBoundary name="NSButton">
+                        <NSButton title="Sample" onClick={{ action: () => { }, showLoading: false }} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSButtonBlue" />
+                    <DocErrorBoundary name="NSButtonBlue">
+                        <NSButtonBlue title="Sample" onClick={{ action: () => { }, showLoading: false }} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSButtonGreen" />
+                    <DocErrorBoundary name="NSButtonGreen">
+                        <NSButtonGreen title="Sample" onClick={{ action: () => { }, showLoading: false }} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSButtonRed" />
+                    <DocErrorBoundary name="NSButtonRed">
+                        <NSButtonRed title="Sample" onClick={{ action: () => { }, showLoading: false }} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSCard" />
+                    <DocErrorBoundary name="NSCard">
+                        <NSColumn style={{ gap: "1.5rem" }}>
+                            <NSTitle title="Without CTA" />
+                            <div style={{ display: "flex", flexWrap: "wrap", gap: "1rem" }}>
+                                <NSCard title="Title only" link={{ href: "#" }} />
+                                <NSCard description="Description only — some sample text used to describe the card without any title or image." link={{ href: "#" }} />
+                                <NSCard image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
+                                <NSCard headline={{ text: "Headline only", color: "#0d6efd" }} link={{ href: "#" }} />
+                                <NSCard title="Title + Description" description="Short description text under the title." link={{ href: "#" }} />
+                                <NSCard title="Title + Image" image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
+                                <NSCard title="Title + Headline" headline={{ text: "Featured", color: "#28a745" }} link={{ href: "#" }} />
+                                <NSCard description="Description + Image with no title." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
+                                <NSCard description="Description + Headline." headline={{ text: "Info", color: "#17a2b8" }} link={{ href: "#" }} />
+                                <NSCard headline={{ text: "New", color: "#dc3545" }} image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
+                                <NSCard title="Title + Headline + Image" headline={{ text: "Popular", color: "#fd7e14" }} image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
+                                <NSCard title="Title + Description + Image" description="Full card with title, description and image." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
+                                <NSCard title="Title + Headline + Description" headline={{ text: "Trending", color: "#20c997" }} description="Card with headline, title and description but no image." link={{ href: "#" }} />
+                                <NSCard headline={{ text: "Alert", color: "#dc3545" }} description="Headline + Description + Image without a title." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
+                                <NSCard title="All fields" headline={{ text: "Premium", color: "#ffc107" }} description="Card with headline, title, description and image combined." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#" }} />
+                            </div>
+
+                            <NSTitle title="With CTA" />
+                            <div style={{ display: "flex", flexWrap: "wrap", gap: "1rem" }}>
+                                <NSCard title="Title only" link={{ href: "#", children: "Open" }} />
+                                <NSCard description="Description only — some sample text used to describe the card without any title or image." link={{ href: "#", children: "Read more" }} />
+                                <NSCard image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "View image" }} />
+                                <NSCard headline={{ text: "Headline only", color: "#0d6efd" }} link={{ href: "#", children: "Explore" }} />
+                                <NSCard title="Title + Description" description="Short description text under the title." link={{ href: "#", children: "Learn more" }} />
+                                <NSCard title="Title + Image" image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "See details" }} />
+                                <NSCard title="Title + Headline" headline={{ text: "Featured", color: "#28a745" }} link={{ href: "#", children: "Discover" }} />
+                                <NSCard description="Description + Image with no title." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "Preview" }} />
+                                <NSCard description="Description + Headline." headline={{ text: "Info", color: "#17a2b8" }} link={{ href: "#", children: "More info" }} />
+                                <NSCard headline={{ text: "New", color: "#dc3545" }} image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "Check out" }} />
+                                <NSCard title="Title + Headline + Image" headline={{ text: "Popular", color: "#fd7e14" }} image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "Browse" }} />
+                                <NSCard title="Title + Description + Image" description="Full card with title, description and image." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "Continue" }} />
+                                <NSCard title="Title + Headline + Description" headline={{ text: "Trending", color: "#20c997" }} description="Card with headline, title and description but no image." link={{ href: "#", children: "Start now" }} />
+                                <NSCard headline={{ text: "Alert", color: "#dc3545" }} description="Headline + Description + Image without a title." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "Take action" }} />
+                                <NSCard title="All fields" headline={{ text: "Premium", color: "#ffc107" }} description="Card with headline, title, description and image combined." image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} link={{ href: "#", children: "Get started" }} />
+                            </div>
+                        </NSColumn>
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSCardScreenshot" />
+                    <DocErrorBoundary name="NSCardScreenshot">
+                        {React.createElement(NSCardScreenshot as any, { key: 1, screenshot: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png", timeSpent: "1h", onDelete: () => { } })}
+                    </DocErrorBoundary>
+
+                    {/* <NSLineText title="NSChartBar" />
+                    <DocErrorBoundary name="NSChartBar">
+                        <NSChartBar labels={["A", "B"]} dataset={[{ label: "s", data: [1, 2] }]} range={{ min: 0, max: 10 }} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSChartDoughnut" />
+                    <DocErrorBoundary name="NSChartDoughnut">
+                        <NSChartDoughnut title="Sample" datas={[1, 2, 3]} labels={["A", "B", "C"]} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSChartLine" />
+                    <DocErrorBoundary name="NSChartLine">
+                        <NSChartLine labels={["A", "B"]} dataset={[{ label: "s", data: [1, 2] }]} range={{ min: 0, max: 10 }} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSChartPie" />
+                    <DocErrorBoundary name="NSChartPie">
+                        <NSChartPie datas={[1, 2, 3]} labels={["A", "B", "C"]} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSChartRange" />
+                    <DocErrorBoundary name="NSChartRange">
+                        <NSChartRange />
+                    </DocErrorBoundary> */}
+
+                    <NSLineText title="NSColumn" />
+                    <DocErrorBoundary name="NSColumn">
+                        <NSColumn>Sample</NSColumn>
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSCopy" />
+                    <DocErrorBoundary name="NSCopy">
+                        <NSCopy>Sample</NSCopy>
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSCopyBox" />
+                    <DocErrorBoundary name="NSCopyBox">
+                        <NSCopyBox value="Sample" />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSDialog" />
+                    <DocErrorBoundary name="NSDialog">
+                        <NSButtonBlue title="Open NSDialog" onClick={{ action: () => this.openDialog("NSDialog"), showLoading: false }} />
+                        {this.state.openDialog === "NSDialog" && <NSDialog onClose={this.closeDialog}>Sample</NSDialog>}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSDialogBox" />
+                    <DocErrorBoundary name="NSDialogBox">
+                        <NSButtonBlue title="Open NSDialogBox" onClick={{ action: () => this.openDialog("NSDialogBox"), showLoading: false }} />
+                        {this.state.openDialog === "NSDialogBox" && React.createElement(NSDialogBox as any, { onClose: this.closeDialog, children_ref: React.createRef<any>() })}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSDialogBoxDate" />
+                    <DocErrorBoundary name="NSDialogBoxDate">
+                        <NSButtonBlue title="Open NSDialogBoxDate" onClick={{ action: () => this.openDialog("NSDialogBoxDate"), showLoading: false }} />
+                        {this.state.openDialog === "NSDialogBoxDate" && <NSDialogBoxDate onClose={this.closeDialog} box={{ title: "Sample", required: false }} />}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSDialogBoxDateTime" />
+                    <DocErrorBoundary name="NSDialogBoxDateTime">
+                        <NSButtonBlue title="Open NSDialogBoxDateTime" onClick={{ action: () => this.openDialog("NSDialogBoxDateTime"), showLoading: false }} />
+                        {this.state.openDialog === "NSDialogBoxDateTime" && <NSDialogBoxDateTime onClose={this.closeDialog} box={{ title: "Sample", required: false }} />}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSDialogBoxPhone" />
+                    <DocErrorBoundary name="NSDialogBoxPhone">
+                        <NSButtonBlue title="Open NSDialogBoxPhone" onClick={{ action: () => this.openDialog("NSDialogBoxPhone"), showLoading: false }} />
+                        {this.state.openDialog === "NSDialogBoxPhone" && <NSDialogBoxPhone onClose={this.closeDialog} box={{ title: "Sample", required: false }} />}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSDialogBoxString" />
+                    <DocErrorBoundary name="NSDialogBoxString">
+                        <NSButtonBlue title="Open NSDialogBoxString" onClick={{ action: () => this.openDialog("NSDialogBoxString"), showLoading: false }} />
+                        {this.state.openDialog === "NSDialogBoxString" && <NSDialogBoxString onClose={this.closeDialog} box={{ title: "Sample", required: false }} />}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSDialogDelete" />
+                    <DocErrorBoundary name="NSDialogDelete">
+                        <NSButtonBlue title="Open NSDialogDelete" onClick={{ action: () => this.openDialog("NSDialogDelete"), showLoading: false }} />
+                        {this.state.openDialog === "NSDialogDelete" && <NSDialogDelete onClose={this.closeDialog} onYes={{ action: () => { this.closeDialog(); }, showLoading: false }} onNo={{ action: () => { this.closeDialog(); }, showLoading: false }} show_as_code={false} />}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSDialogInfo" />
+                    <DocErrorBoundary name="NSDialogInfo">
+                        <NSButtonBlue title="Open NSDialogInfo" onClick={{ action: () => this.openDialog("NSDialogInfo"), showLoading: false }} />
+                        {this.state.openDialog === "NSDialogInfo" && <NSDialogInfo onClose={this.closeDialog} show_as_code={false} />}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSDialogPageSelection" />
+                    <DocErrorBoundary name="NSDialogPageSelection">
+                        <NSButtonBlue title="Open NSDialogPageSelection" onClick={{ action: () => this.openDialog("NSDialogPageSelection"), showLoading: false }} />
+                        {this.state.openDialog === "NSDialogPageSelection" && React.createElement(NSDialogPageSelection as any, { current_page: 1, current_size: 25, max_page: 10, onClose: this.closeDialog, getItems: async () => [], onFinish: async () => { this.closeDialog(); } })}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSDownTimer" />
+                    <DocErrorBoundary name="NSDownTimer">
+                        <NSDownTimer date={new Date()} text="Sample" />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSDownload" />
+                    <DocErrorBoundary name="NSDownload">
+                        <NSDownload releaseDate="2025-01-01" />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSElectronicCard" />
+                    <DocErrorBoundary name="NSElectronicCard">
+                        <NSElectronicCard src="https://static.namirasoft.com/image/namirasoft/access/logo/base.png" title="Sample" cardNumber="0000000000000000" />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSEntityCardBackground" />
+                    <DocErrorBoundary name="NSEntityCardBackground">
+                        <NSEntityCardBackground title="Sample" />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSFilterBox" />
+                    <DocErrorBoundary name="NSFilterBox">
+                        <NSFilterBox getTables={() => []} getMoreTables={async () => []} getValues={null} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSFilterBoxItems" />
+                    <DocErrorBoundary name="NSFilterBoxItems">
+                        <NSFilterBoxItems filterItems={[]} onClearFilterItems={() => { }} onRemoveFilterItem={() => { }} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSFilterItem" />
+                    <DocErrorBoundary name="NSFilterItem">
+                        {React.createElement(NSFilterItem as any, { item: { toString: () => "Sample" }, removeSelected: () => { } })}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSFooter" />
+                    <DocErrorBoundary name="NSFooter">
+                        <NSFooter scope="" name="sample" logo="https://static.namirasoft.com/image/namirasoft/access/logo/base.png" isLoggedIn={() => true} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSGauge" />
+                    <DocErrorBoundary name="NSGauge">
+                        <NSGauge total={100} current={50} showPercent colors={gaugeColors} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSGaugeDate" />
+                    <DocErrorBoundary name="NSGaugeDate">
+                        <NSGaugeDate title="Sample" from={TimeOperation.daysAgo(1, new Date())} to={TimeOperation.daysAgo(-1, new Date())} colors={gaugeColors} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSGaugeNumber" />
+                    <DocErrorBoundary name="NSGaugeNumber">
+                        <NSGaugeNumber title="Sample" total={100} current={50} colors={gaugeColors} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSHeader" />
+                    <DocErrorBoundary name="NSHeader">
+                        {React.createElement(NSHeader as any, { right: { icons: [] }, left: { scope: "", name: "sample", logo: "" }, isLoggedIn: () => true, notifier: {} })}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSHeaderScreenshot" />
+                    <DocErrorBoundary name="NSHeaderScreenshot">
+                        <NSHeaderScreenshot project="P" task="T" time="1h" Countdown="00:00" />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSID" />
+                    <DocErrorBoundary name="NSID">
+                        <NSID id="sample" map={null} storage={null} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSInfo" />
+                    <DocErrorBoundary name="NSInfo">
+                        <NSInfo text="Sample" />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSLabel" />
+                    <DocErrorBoundary name="NSLabel">
+                        <NSLabel title="Sample" />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSLabelErrorNotifier" />
+                    <DocErrorBoundary name="NSLabelErrorNotifier">
+                        <NSLabelErrorNotifier clearError={() => { }} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSLabelSensitive" />
+                    <DocErrorBoundary name="NSLabelSensitive">
+                        <NSLabelSensitive value="Sample" sensitive={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSLine" />
+                    <DocErrorBoundary name="NSLine">
+                        <NSLine />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSLink" />
+                    <DocErrorBoundary name="NSLink">
+                        <NSLink href="#">Sample</NSLink>
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSLinkBlue" />
+                    <DocErrorBoundary name="NSLinkBlue">
+                        <NSLinkBlue href="#">Sample</NSLinkBlue>
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSLinkGreen" />
+                    <DocErrorBoundary name="NSLinkGreen">
+                        <NSLinkGreen href="#">Sample</NSLinkGreen>
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSLinkRed" />
+                    <DocErrorBoundary name="NSLinkRed">
+                        <NSLinkRed href="#">Sample</NSLinkRed>
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSListGrouped" />
+                    <DocErrorBoundary name="NSListGrouped">
+                        <NSListGrouped groups={[]} onClick={() => { }} onClose={() => { }} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSListProduct" />
+                    <DocErrorBoundary name="NSListProduct">
+                        <NSListProduct scope="" name="sample" />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSLoading" />
+                    <DocErrorBoundary name="NSLoading">
+                        <NSLoading />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSMegaMenu" />
+                    <DocErrorBoundary name="NSMegaMenu">
+                        {React.createElement(NSMegaMenu as any, { items: [], selected: { id: 0 } })}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSMenuAction" />
+                    <DocErrorBoundary name="NSMenuAction">
+                        <NSMenuAction name="Sample" items={[]} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSMenuButton" />
+                    <DocErrorBoundary name="NSMenuButton">
+                        <NSMenuButton />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSNoData" />
+                    <DocErrorBoundary name="NSNoData">
+                        <NSNoData lable="No Data" />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSPagination" />
+                    <DocErrorBoundary name="NSPagination">
+                        <NSPagination totalItems={100} onPageChange={() => { }} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSPanel" />
+                    <DocErrorBoundary name="NSPanel">
+                        <NSPanel>Sample</NSPanel>
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSPanelAccordion" />
+                    <DocErrorBoundary name="NSPanelAccordion">
+                        <NSPanelAccordion getHeader={() => "Sample"}>Sample</NSPanelAccordion>
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSProductSearch" />
+                    <DocErrorBoundary name="NSProductSearch">
+                        <NSProductSearch search="sample" />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSProgressBar" />
+                    <DocErrorBoundary name="NSProgressBar">
+                        {React.createElement(NSProgressBar as any, { progress: 50 })}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSRange" />
+                    <DocErrorBoundary name="NSRange">
+                        <NSRange data={[]} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSReorderDialog" />
+                    <DocErrorBoundary name="NSReorderDialog">
+                        <NSButtonBlue title="Open NSReorderDialog" onClick={{ action: () => this.openDialog("NSReorderDialog"), showLoading: false }} />
+                        {this.state.openDialog === "NSReorderDialog" && <NSReorderDialog visibleColumnKeys={[]} getColumns={() => []} onCancel={this.closeDialog} onApply={() => { this.closeDialog(); }} />}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSRepeater" />
+                    <DocErrorBoundary name="NSRepeater">
+                        {React.createElement(NSRepeater as any, { title: "Sample", required: false, createItem: () => null, getValue: () => null, setValue: () => { }, isEmpty: () => true })}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSRepeaterNSBoxSchemaVariable" />
+                    <DocErrorBoundary name="NSRepeaterNSBoxSchemaVariable">
+                        <NSRepeaterNSBoxSchemaVariable name="sample" title="Sample" required={false} item_title="Item" />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSRepeaterNSTag" />
+                    <DocErrorBoundary name="NSRepeaterNSTag">
+                        <NSRepeaterNSTag name="sample" title="Sample" required={false} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSRow" />
+                    <DocErrorBoundary name="NSRow">
+                        <NSRow>Sample</NSRow>
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSSection" />
+                    <DocErrorBoundary name="NSSection">
+                        <NSSection>Sample</NSSection>
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSSectionCards" />
+                    <DocErrorBoundary name="NSSectionCards">
+                        <NSSectionCards cards={[]} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSSectionTiles" />
+                    <DocErrorBoundary name="NSSectionTiles">
+                        <NSSectionTiles tiles={[]} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSSectionTitle" />
+                    <DocErrorBoundary name="NSSectionTitle">
+                        <NSSectionTitle title="Sample">Sample</NSSectionTitle>
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSSortDialog" />
+                    <DocErrorBoundary name="NSSortDialog">
+                        <NSButtonBlue title="Open NSSortDialog" onClick={{ action: () => this.openDialog("NSSortDialog"), showLoading: false }} />
+                        {this.state.openDialog === "NSSortDialog" && React.createElement(NSSortDialog as any, { sorts: [], getColumns: () => [], onCancel: this.closeDialog, onApply: () => { this.closeDialog(); } })}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSSpace" />
+                    <DocErrorBoundary name="NSSpace">
+                        <NSSpace size={NSSpaceSizeType.SMALL} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSSplitter" />
+                    <DocErrorBoundary name="NSSplitter">
+                        <NSSplitter />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSTabPage" />
+                    <DocErrorBoundary name="NSTabPage">
+                        <NSTabPage tabs={[]} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSTable" />
+                    <DocErrorBoundary name="NSTable">
+                        {React.createElement(NSTable as any, { name: "sample_docs", columns: [], getRowKey: (item: any) => item?.value?.id, getRows: async () => ({ count: 0, rows: [] }) })}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSTableChart" />
+                    <DocErrorBoundary name="NSTableChart">
+                        {false && React.createElement(NSTableChart as any, { name: "sample", columns: [], rows: [], selectedRows: [], onClose: () => { } })}
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSTag" />
+                    <DocErrorBoundary name="NSTag">
+                        <NSTag />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSTile" />
+                    <DocErrorBoundary name="NSTile">
+                        <NSTile title="Sample" description="Sample" image={{ src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png" }} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSTimelineMonthly" />
+                    <DocErrorBoundary name="NSTimelineMonthly">
+                        <NSTimelineMonthly data={[]} />
+                    </DocErrorBoundary>
+
+                    <NSLineText title="NSTitle" />
+                    <DocErrorBoundary name="NSTitle">
+                        <NSTitle title="Sample" />
+                    </DocErrorBoundary>
+                </NSColumn>
+                <NSTable<TableRow>
+                    ref={this.NSTableRef}
+                    name={"table"}
+                    checkbox
+                    columns={[
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 0, type: "String", name: "id", text: "ID", formatter: new StringFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 1, type: "String", name: "name", text: "Name", formatter: new StringFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 2, type: "Number", name: "age", text: "Age", formatter: new IntegerFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 3, type: "Number", name: "experience", text: "Experience", formatter: new IntegerFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 4, type: "Number", name: "salary", text: "Salary", formatter: new IntegerFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 5, type: "String", name: "city", text: "City", formatter: new StringFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 6, type: "String", name: "phone", text: "Phone", formatter: new PhoneFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 7, type: "String", name: "national_code", text: "National Code", formatter: new SensitiveFormatter<TableRow>(
+                                async (value) =>
+                                {
+                                    await new Promise(resolve => setTimeout(resolve, 1000));
+                                    return value;
+                                },
+                                () => true
+                            )
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 8, type: "DateTime", name: "created_at", text: "Created At", formatter: new DateTimeFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 9, type: "String", name: "json", text: "Json", formatter: new JsonFormatter()
+                        },
+                    ]}
+                    getRowKey={(item) => item.value.id}
+                    getRows={async () => ({
+                        count: 300,
+                        rows: [
+                            { id: "a1", name: "Amin Pasban", age: 28, experience: 6, salary: 12000, city: "Rasht", phone: "09117579093", national_code: "2670000001", json: JSON.stringify({ role: "Developer", skills: ["React", "TypeScript"], active: true, projects: { count: 3, latest: "Site Package" } }), created_at: TimeOperation.daysAgo(1, new Date()).toDateString() },
+                            { id: "c3", name: "Negar Sharifpour", age: 28, experience: 2, salary: 9000, city: "Rasht", phone: "09117579092", national_code: "2670000002", created_at: TimeOperation.daysAgo(2, new Date()).toDateString() },
+                            { id: "b2", name: "Milad Nazirzadeh", age: 28, experience: 6, salary: 18000, city: "Tehran", phone: "09127576063", national_code: "0070000003", created_at: TimeOperation.daysAgo(10, new Date()).toDateString() },
+                            { id: "d4", name: "Mohammad Nazirzadeh", age: 29, experience: 4, salary: 8000, city: "Tehran", phone: "09127576063", national_code: "0070000004", created_at: TimeOperation.daysAgo(20, new Date()).toDateString() },
+                            { id: "e5", name: "Hadiseh Pasban", age: 22, experience: 3, salary: 9500, city: "Rasht", phone: "09116463032", national_code: "2670000005", created_at: TimeOperation.daysAgo(100, new Date()).toDateString() },
+                        ]
+                    })}
+                    headerChildren={
+                        <NSBoxString
+                            required
+                            title={"Name"}
+                            hideHeader
+                            style={{ minWidth: NSBox.width.one }}
+                        />
+                    }
+                />
+                <NSColumn style={{ marginTop: "1.5rem", alignItems: "center" }}>
+                    <NSBoxSchemaVariable
+                        title={"Schema"}
+                        required={true}
+                        name='schema'
+                        style={{ width: NSBox.width.double }}
+                    />
+                    <NSButtonBlue
+                        title={"Log"}
+                        onClick={{
+                            showLoading: false,
+                            action: () =>
+                            {
+                                console.log("Date:", this.NSBoxDateRef.current?.getValueString(false));
+                                console.log("DateTime:", this.NSBoxDateTimeRef.current?.getValueString(false));
+                            }
+                        }}
+                    />
+                </NSColumn>
+            </NSLayout>
+        );
+    }
 }