namirasoft-site-react 1.5.26 → 1.5.27

package/src/App.tsx

@@ -1,9 +1,63 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { TimeOperation } from 'namirasoft-core';
-import { Component, createRef } from 'react';
+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 } from './main';
+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,
+} 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,
@@ -20,7 +74,26 @@ type TableRow = {
 };
 
 interface AppProps { }
-interface AppState { }
+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>
 {
@@ -31,11 +104,15 @@ export class App extends Component<AppProps, AppState>
     constructor(props: AppProps)
     {
         super(props);
-        this.state = {}
+        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={{
@@ -58,6 +135,623 @@ export class App extends Component<AppProps, AppState>
                 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">
+                        <NSCard title="Sample" link={{ href: "#" }} />
+                    </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"}