namirasoft-site-react 1.4.528 → 1.4.530

package/SKILL.md

@@ -0,0 +1,307 @@
+---
+name: namirasoft-site-react
+description: Use the namirasoft-site-react component library (NS* prefixed React components) when building UIs in projects that import "namirasoft-site-react". Covers form inputs (NSBoxString, NSBoxEmail, NSBoxPhone, NSBoxDate, NSBoxMoney, etc.), buttons (NSButton, NSButtonBlue/Green/Red), cards, dialogs, layouts, tables, charts, formatters, and routing. Trigger when the user adds or modifies UI in a project whose package.json depends on namirasoft-site-react, asks how to render a form field/button/dialog/table with NS components, or imports anything from "namirasoft-site-react".
+---
+
+# namirasoft-site-react
+
+A React component library published as `namirasoft-site-react` on npm. All components are prefixed `NS`. This skill teaches you how to pick the right component and wire its props correctly.
+
+## When this skill applies
+
+Trigger when the project's `package.json` lists `namirasoft-site-react` as a dependency, or when the user imports anything from `"namirasoft-site-react"`. Skip otherwise — do not push these components on projects that use a different design system (MUI, Chakra, shadcn, etc.).
+
+## Cardinal rules
+
+1. **Prefer `NS*` components over raw HTML.** When designing or modifying a page, do not reach for `<div>`, `<span>`, `<a>`, `<button>`, `<input>`, `<table>`, `<form>`, `<h1..h6>`, `<ul>`/`<li>`, `<img>`, `<section>`, etc. The whole point of this library is reuse — every visible element should map to an `NS*` component. Specifically:
+    - layout: `NSLayout` / `NSSection` / `NSRow` / `NSColumn` / `NSSpace` / `NSPanel` instead of `<div>` + flex CSS
+    - text: `NSTitle` / `NSLabel` / `NSLineText` instead of `<h1>` / `<span>` / `<p>`
+    - links: `NSLink` (or `NSLinkBlue` / `NSLinkGreen` / `NSLinkRed`) instead of `<a>`
+    - actions: `NSButton` (or color variants) instead of `<button>`
+    - inputs: an `NSBox*` matching the data type instead of `<input>` / `<select>` / `<textarea>`
+    - lists: `NSListGrouped` / `NSRepeater` / `NSTable` instead of `<ul>` / `<table>`
+    - cards/tiles: `NSCard` / `NSTile` instead of bespoke `<div>` containers
+    - dialogs: `NSDialog` (or its variants) instead of a hand-rolled modal
+
+   Raw HTML is only acceptable when (a) no `NS*` equivalent exists, (b) you're rendering inside a component that explicitly takes `children: ReactNode` and a wrapper element is unavoidable, or (c) you're working with a third-party integration that requires it. When you do fall back to HTML, leave a one-line comment explaining why no `NS*` fit.
+
+2. **Always import from the package root**: `import { NSBoxString, NSButton } from "namirasoft-site-react";` — never deep-import from `dist/...`.
+3. **Every component accepts `IBaseComponentProps`**: `id?`, `name?`, `classList?: string[]`, `style?: React.CSSProperties`. Use `classList` (string array), not `className`.
+4. **NSBox\* inputs are class components with a ref-based imperative API**: hold a `React.createRef<NSBoxString>()` and call `ref.current?.getValue()` / `setValue(v)` / `setDisabled(b)`. They are not controlled inputs — pass `defaultValue`, read via ref.
+5. **Validation is built in**: every `NSBox*` requires `title: string` and `required: boolean`. `getValue()` throws if validation fails (call `getValue(false)` to skip the check).
+6. **Buttons take an `onClick` *object*, not a function**: `<NSButton onClick={{ action: (done) => { ...; done(); }, showLoading: true }} />`. The `done` callback hides the spinner.
+7. **CSS is bundled** — the package ships `.module.css` files alongside components. No separate stylesheet import is needed beyond what the package does internally.
+
+## Picking the right component
+
+### Form inputs (NSBox*)
+
+All take `title` (label) and `required`. Choose by data type:
+
+| Data | Component |
+|---|---|
+| Free text | `NSBoxString` |
+| Long text | `NSBoxTextArea` |
+| Email | `NSBoxEmail` |
+| URL | `NSBoxURL` |
+| Phone | `NSBoxPhone` (uses `react-phone-number-input`) |
+| Password / secret | `NSBoxSensitive` |
+| Whole number | `NSBoxInteger` |
+| Decimal | `NSBoxDouble` |
+| Currency | `NSBoxMoney` |
+| Boolean (checkbox) | `NSBoxBoolean` |
+| Multiple booleans | `NSBoxBooleans` |
+| Radio group | `NSBoxRadio` |
+| Enum / select | `NSBoxEnum` |
+| Combo (select with search) | `NSBoxCombo` |
+| Date only | `NSBoxDate` |
+| Date + time | `NSBoxDateTime` |
+| Time only | `NSBoxTime` |
+| Time zone | `NSBoxTimeZone` |
+| Duration | `NSBoxDuration` |
+| File upload | `NSBoxFile` |
+| IPv4 / IPv6 | `NSBoxIPV4`, `NSBoxIPV6` |
+| Semver | `NSBoxVersion` |
+| Search bar | `NSBoxSearch` |
+| Entity reference (FK) | `NSBoxEntity` |
+| Schema-driven dynamic field | `NSBoxDynamic`, `NSBoxDynamics`, `NSBoxSchemaBase`, `NSBoxSchemaVariable` |
+
+If you need to reach for a field type not in this table, prefer composing from `NSBoxString` over inventing a new component.
+
+### Buttons & links
+
+- `NSButton` — base button, takes `title`, optional `icon`, and the `onClick` object (see rule 5).
+- `NSButtonBlue` / `NSButtonGreen` / `NSButtonRed` — semantic color variants (primary / success / destructive).
+- `NSLink` — base link.
+- `NSLinkBlue` / `NSLinkGreen` / `NSLinkRed` — semantic link variants.
+- `NSMenuButton` — button that opens a menu.
+- `NSMenuAction` — action menu item.
+
+### Layout & structure
+
+- `NSLayout` — top-level page shell (header + footer + alerts + notifications + main). Requires `scope`, `logo`, `header.right`, `notifications`, `isLoggedIn`, and `notifier` (from `NSRouterMaker`). Use this once at the app root.
+- `NSHeader`, `NSFooter`, `NSMegaMenu` — pieces of `NSLayout`. You usually don't render these directly; let `NSLayout` compose them.
+- `NSSection`, `NSSectionTitle`, `NSSectionCards`, `NSSectionTiles` — vertical content blocks.
+- `NSRow`, `NSColumn` — flex row/column.
+- `NSSpace` — vertical/horizontal spacer (`size: NSSpaceSizeType.MINI | SMALL | ...`).
+- `NSSplitter` — resizable split pane.
+- `NSPanel`, `NSPanelAccordion` — bordered panels.
+- `NSTabPage` — tabbed pages.
+- `NSCard`, `NSCardScreenshot` — content cards with link.
+- `NSTile` — clickable tile.
+
+### Data display
+
+- `NSTable` — full-featured table with pagination, sorts, column visibility, xlsx export. Driven by `columns: TableColumnInfo[]` (formatter-based) and `getRows: (page, size, sorts) => Promise<{rows, count}>`.
+- `NSPagination` — paginator.
+- `NSListGrouped`, `NSListProduct` — list layouts.
+- `NSRepeater`, `NSRepeaterNSTag`, `NSRepeaterNSBoxSchemaVariable` — render arrays of items.
+- `NSTag` — chip/tag.
+- `NSLabel`, `NSLabelErrorNotifier`, `NSLabelSensitive` — text labels.
+- `NSID` — formatted ID display.
+- `NSCopy`, `NSCopyBox` — copy-to-clipboard widgets.
+- `NSElectronicCard` — credit-card-style display card.
+- `NSEntityCardBackground` — backgrounded entity card.
+
+### Charts & gauges
+
+- `NSChartColumn`, `NSChartDoughnut`, `NSChartPie`, `NSChartRange`, `NSChartTable` — chart.js / antd-charts wrappers.
+- `NSGauge`, `NSGaugeNumber`, `NSGaugeDate` — single-metric gauges.
+- `NSProgressBar`, `NSRange` — progress / range bars.
+- `NSTimelineMonthly` — monthly timeline.
+
+### Dialogs
+
+- `NSDialog` — base dialog. Takes `onClose: () => void` and `children`. Render conditionally based on local state.
+- `NSDialogDelete` — confirm-delete dialog.
+- `NSDialogInfo` — info/alert dialog.
+- `NSDialogPageSelection` — page-selection picker.
+- `NSDialogBox`, `NSDialogBoxString`, `NSDialogBoxDate`, `NSDialogBoxDateTime`, `NSDialogBoxPhone` — single-field edit dialogs.
+- `NSInfo` — inline info popover (smaller than a dialog).
+
+### Bars & banners
+
+- `NSBanner` — page-top banner.
+- `NSBarTitle` — page title bar.
+- `NSBarAction` — action bar.
+- `NSBarAlert` — alert strip (driven by `isVisible()` predicate).
+- `NSBarNotification` — notification toast strip (managed by the `NSNotifier`).
+
+### Filters
+
+- `NSFilterBox`, `NSFilterBoxItems`, `NSFilterItem` — query/filter UI for tables and lists.
+
+### Misc / state
+
+- `NSLoading` — spinner. Takes `small`, `hideTitle`, `hideDescription`.
+- `NSNoData` — empty-state placeholder.
+- `NSDownTimer` — countdown.
+- `NSDownload` — download button/link.
+- `NSProductSearch` — product search dropdown (uses `ProductCacheService`).
+- `NSLine`, `NSLineText` — separators.
+- `NSTitle` — heading.
+
+### Pages
+
+- `NSImplementing` — "this feature is being implemented" page.
+- `NSUpdating` — "this feature is updating" page.
+- `NSNotFoundPage` — 404 page. Use as the catch-all route.
+
+## Formatters (for NSTable columns)
+
+Import and instantiate a `BaseColumnFormatter` subclass per column. Pick by data type:
+
+`StringFormatter`, `IntegerFormatter`, `FloatFormatter`, `MoneyFormatter`, `PercentFormatter`, `BooleanFormatter`, `EnumFormatter`, `DateFormatter`, `DateTimeFormatter`, `TimeFormatter`, `DurationFormatter`, `EmailFormatter`, `PhoneFormatter`, `URLFormatter`, `IPFormatter`, `IDFormatter`, `JsonFormatter`, `BytesFormatter`, `SensitiveFormatter`, `BackColorFormatter`, `ForeColorFormatter`, `BaseURLImageFormatter`, `UnknowFormatter` (fallback).
+
+## Routing
+
+- `NSRouterMaker` — wraps a `NSRouterMakerComponent` with a `setState` callback and storage. Produces an `onRender()` that returns the routed JSX and provides a `NSNotifier` to children.
+- `NSNotifier` — lives on the `notifier` prop passed through `NSLayout` and friends. Methods: `addNotification`, `delNotification`, `onChangeState`.
+- `NSRouterMakerProps` — interface that exposes `notifier: NSNotifier` to a component.
+
+The `NSBaseMetaDatabase.getServerBaseURL` resolver is set up at module load so `Namirasoft<X>` package names map to `REACT_APP_BASE_URL_<X>` env vars (snake-uppercased). Define those env vars in `.env`.
+
+## Utilities (named exports from the root)
+
+- `Validator` — static methods: `getError(title, value, props)`, `getErrorString(title, value, props)`. Used internally by NSBox\* but exposed for custom validation.
+- `NSBoxBuilder` — schema-driven NSBox factory.
+- `ProductCacheService` — async cache for product lookups (used by `NSProductSearch`).
+- `CopyToClipboard` — programmatic copy.
+- `EncryptionOperation` — client-side encryption helpers.
+- `Color` — color palette / utilities.
+
+## Canonical examples
+
+### Form with three fields and a submit
+
+```tsx
+import React, { createRef } from "react";
+import { NSBoxString, NSBoxEmail, NSBoxPhone, NSButtonBlue } from "namirasoft-site-react";
+
+export function ContactForm() {
+    const nameRef = createRef<NSBoxString>();
+    const emailRef = createRef<NSBoxEmail>();
+    const phoneRef = createRef<NSBoxPhone>();
+
+    return (
+        <>
+            <NSBoxString ref={nameRef} title="Full Name" required min_length={2} max_length={120} />
+            <NSBoxEmail ref={emailRef} title="Email" required />
+            <NSBoxPhone ref={phoneRef} title="Phone" required={false} />
+            <NSButtonBlue
+                title="Submit"
+                onClick={{
+                    action: (done) => {
+                        try {
+                            const payload = {
+                                name: nameRef.current?.getValue(),
+                                email: emailRef.current?.getValue(),
+                                phone: phoneRef.current?.getValue(false),
+                            };
+                            // ... submit payload
+                        } finally {
+                            done();
+                        }
+                    },
+                    showLoading: true,
+                }}
+            />
+        </>
+    );
+}
+```
+
+Notes:
+- `getValue()` throws on validation failure and surfaces the error inline; that's intentional — wrap in try/finally so the spinner clears.
+- Use `getValue(false)` only for optional fields where you want the raw value without validation.
+- Don't try to read NSBox\* values via `useState` + `onChange` — the imperative ref API is the supported path.
+
+### Confirm-delete dialog
+
+`NSDialogDelete` extends `NSDialogInfoProps` and takes `onYes` / `onNo` — each a `NSButtonOnClickProps` object (`{ action, showLoading? }`), not a plain function. `show_as_code` is required (set `false` for plain text).
+
+```tsx
+import React, { useState } from "react";
+import { NSButtonRed, NSDialogDelete } from "namirasoft-site-react";
+
+export function DeleteRow({ onDelete }: { onDelete: () => Promise<void> }) {
+    const [open, setOpen] = useState(false);
+    return (
+        <>
+            <NSButtonRed title="Delete" onClick={{ action: (d) => { setOpen(true); d(); } }} />
+            {open && (
+                <NSDialogDelete
+                    title="Delete record?"
+                    description="This cannot be undone."
+                    show_as_code={false}
+                    onClose={() => setOpen(false)}
+                    onYes={{
+                        action: async (done) => {
+                            try { await onDelete(); setOpen(false); }
+                            finally { done(); }
+                        },
+                        showLoading: true,
+                    }}
+                    onNo={{ action: (done) => { setOpen(false); done(); } }}
+                />
+            )}
+        </>
+    );
+}
+```
+
+### Table with formatted columns
+
+```tsx
+import { NSTable, IntegerFormatter, StringFormatter, DateTimeFormatter, TableColumnInfo } from "namirasoft-site-react";
+
+const table = { name: "user", text: "User" };
+const columns: TableColumnInfo[] = [
+    { table, index: 0, name: "id",         text: "ID",         formatter: new IntegerFormatter() },
+    { table, index: 1, name: "name",       text: "Name",       formatter: new StringFormatter() },
+    { table, index: 2, name: "created_at", text: "Created",    formatter: new DateTimeFormatter() },
+];
+
+<NSTable
+    name="users"
+    checkbox={false}
+    columns={columns}
+    getRows={async (page, size, sorts) => {
+        const res = await api.users.list({ page, size, sorts });
+        return { rows: res.items, count: res.total };
+    }}
+    getRowKey={(row) => String(row.value.id)}
+/>
+```
+
+### App shell
+
+```tsx
+<NSLayout
+    scope="MyApp"
+    logo="/logo.png"
+    notifier={notifier}
+    isLoggedIn={() => !!session}
+    header={{ right: { /* IHeaderRightProps */ }, left: { title: "Dashboard" } }}
+    notifications={notifications}
+>
+    {pageContent}
+</NSLayout>
+```
+
+## Common mistakes to avoid
+
+- ❌ Reaching for raw HTML (`<div>`, `<a>`, `<button>`, `<input>`, `<table>`, etc.) when an `NS*` equivalent exists — see Cardinal rule #1.
+- ❌ Passing `className="foo"` — use `classList={["foo"]}`.
+- ❌ Treating NSBox\* as controlled (`value`/`onChange`) — use refs + `defaultValue`.
+- ❌ Passing a function to `NSButton.onClick` — must be `{ action, showLoading? }`.
+- ❌ Forgetting to call `done()` in the button action — the spinner will hang forever.
+- ❌ Importing from `"namirasoft-site-react/dist/..."` — only the root path is supported.
+- ❌ Mixing this library with another design system on the same screen — visual conventions clash.
+- ❌ Inventing a new `NSBox<Type>` when an existing one fits — check the data-type table first.
+
+## Peer expectations
+
+The package depends on (and re-exports types from) `namirasoft-core`, `namirasoft-schema`, `namirasoft-site`, `namirasoft-site-map`, `namirasoft-api-link`, `namirasoft-api-product`. If you import a type like `BaseMetaTable`, `SortItem`, `IStorage`, or `NamingConvention`, it lives in `namirasoft-core` — import it from there, not from `namirasoft-site-react`.
+
+React 18 and `react-router-dom` 7 are required peers. The library uses `react-app-rewired` for its own dev/test scripts, but consumers don't need it.

package/SKILLS.md

@@ -0,0 +1,188 @@
+---
+name: namirasoft-site-react
+description: Use when working inside the Namirasoft Site React NPM Package or when any Namirasoft portal frontend imports from namirasoft-site-react. Covers all 40+ NSBox* form/display components, NSBoxBuilder, routing, formatters, and Ant Design integration.
+---
+
+# Namirasoft Site React Package Skill
+
+## Trigger
+Use this skill when working inside `d:\01 - Code Base\Namira\Package\TypeScript\Namirasoft Site React NPM Package` or when any Namirasoft portal frontend imports from `namirasoft-site-react`.
+
+## Package Identity
+- **npm name:** `namirasoft-site-react`
+- **Entry point:** `dist/main.js` / React app entry: `src/index.tsx`
+- **Purpose:** React UI component library and application framework for Namirasoft portal interfaces. 40+ `NSBox*` form/display components, routing, data formatting, and portal infrastructure built on Ant Design + Bootstrap.
+
+## Key Dependencies
+`react ^18`, `react-dom`, `react-router-dom ^7`, `antd ^6`, `@ant-design/icons ^6`, `react-bootstrap ^2`, `bootstrap`, `chart.js`, `react-chartjs-2`, `axios`, `@uiw/react-json-view`, `namirasoft-core`, `namirasoft-schema`, `namirasoft-site`, `namirasoft-site-map`, `namirasoft-api-product`, `namirasoft-api-link`
+
+## Source Structure
+
+```
+src/
+├── components/          # 40+ NSBox* components
+├── pages/               # Page-level components
+├── props/               # Prop type interfaces
+├── routing/             # Route definitions
+├── formatter/           # Data formatters
+├── App.tsx              # Main application component
+├── main.ts              # Module entry (for npm consumers)
+└── index.tsx            # React app entry
+```
+
+## NSBox Component Library
+
+All input/display components follow the `NSBox*` naming convention. They are built on top of Ant Design and handle type-specific rendering, validation, and editing.
+
+### Boolean
+| Component | Description |
+|-----------|-------------|
+| `NSBoxBoolean` | Toggle/checkbox for boolean values |
+
+### Text & String
+| Component | Description |
+|-----------|-------------|
+| `NSBoxString` | Text input |
+| `NSBoxEmail` | Email input with format validation |
+| `NSBoxURL` | URL input |
+| `NSBoxPhone` | Phone number input (E.164) |
+| `NSBoxColor` | Color picker (hex) |
+| `NSBoxFont` | Font name selector |
+| `NSBoxVersion` | SemVer string input |
+| `NSBoxFilePath` | File path input |
+| `NSBoxIPV4` | IPv4 address input |
+| `NSBoxIPV6` | IPv6 address input |
+| `NSBoxIPV4Range` | IPv4 CIDR range input |
+| `NSBoxIPV6Range` | IPv6 CIDR range input |
+
+### Numeric
+| Component | Description |
+|-----------|-------------|
+| `NSBoxInteger` | Integer number input |
+| `NSBoxFloat` | Float input |
+| `NSBoxDouble` | Double input |
+| `NSBoxDecimal` | Decimal/arbitrary precision input |
+| `NSBoxBigInt` | BigInt input |
+| `NSBoxMoney` | Currency amount input |
+
+### Date & Time
+| Component | Description |
+|-----------|-------------|
+| `NSBoxDate` | Date picker (YYYY-MM-DD) |
+| `NSBoxDateTime` | Date + time picker |
+| `NSBoxTime` | Time picker (HH:mm:ss) |
+| `NSBoxDuration` | Duration input (ISO 8601) |
+| `NSBoxTimeZone` | IANA timezone selector |
+
+### Selection
+| Component | Description |
+|-----------|-------------|
+| `NSBoxCombo` | Dropdown/combo box (enum values) |
+| `NSBoxEntity` | Entity reference selector (FK-like dropdown) |
+| `NSBoxEnum` | Enum display/input |
+
+### Complex
+| Component | Description |
+|-----------|-------------|
+| `NSBoxArray` | Array of items editor |
+| `NSBoxAny` | Unconstrained value input |
+| `NSBoxBuilder` | Large composite form builder (35KB). Generates entire forms from schema definitions. |
+
+## Utilities
+| Export | Description |
+|--------|-------------|
+| `Validator` | Client-side validation (delegates to `namirasoft-schema` JoiValidator) |
+| `EncryptionOperation` | Client-side AES encrypt/decrypt |
+| `Color` | Color manipulation helpers |
+| `CopyToClipboard` | Copy text to clipboard |
+| `ProductCacheService` | Caches product/API metadata on the client side |
+
+## Common Usage Patterns
+
+### Using an NSBox component
+```tsx
+import { NSBoxString } from 'namirasoft-site-react';
+
+function UserForm() {
+  const [email, setEmail] = React.useState('');
+
+  return (
+    <NSBoxEmail
+      value={email}
+      onChange={setEmail}
+      label="Email Address"
+      required
+    />
+  );
+}
+```
+
+### Using NSBoxBuilder (schema-driven forms)
+```tsx
+import { NSBoxBuilder } from 'namirasoft-site-react';
+import { ApplicationSchema } from 'namirasoft-schema';
+
+function AutoForm({ schema, data, onChange }) {
+  return (
+    <NSBoxBuilder
+      schema={schema}
+      data={data}
+      onChange={onChange}
+    />
+  );
+}
+```
+
+### Using NSBoxCombo (enum dropdown)
+```tsx
+import { NSBoxCombo } from 'namirasoft-site-react';
+
+<NSBoxCombo
+  value={status}
+  onChange={setStatus}
+  options={[
+    { label: 'Active',   value: 'active' },
+    { label: 'Inactive', value: 'inactive' },
+  ]}
+  label="Status"
+/>
+```
+
+### Routing setup
+```tsx
+// src/routing/ defines routes using react-router-dom v7
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { routes } from './routing/routes';
+
+const router = createBrowserRouter(routes);
+
+function App() {
+  return <RouterProvider router={router} />;
+}
+```
+
+### Formatters
+```tsx
+import { formatDate, formatMoney, formatDuration } from 'namirasoft-site-react/formatter';
+
+formatDate('2024-01-15');          // → 'Jan 15, 2024'
+formatMoney(12345.67, 'USD');      // → '$12,345.67'
+formatDuration('PT1H30M');        // → '1h 30m'
+```
+
+## Build Configuration
+Uses `react-app-rewired` to customize CRA build without ejecting. Static assets (CSS, HTML, images) are copied to `dist/` using `copyfiles`.
+
+```bash
+npm run start    # dev server (CRA)
+npm run build    # production build → dist/
+npm run build:lib  # build library module → dist/main.js
+```
+
+## Conventions
+- Always use `NSBox*` components for form inputs — never raw Ant Design/Bootstrap inputs directly.
+- Each `NSBox*` component corresponds to a type schema in `namirasoft-schema` — match them.
+- `NSBoxBuilder` is the canonical way to render schema-driven forms — use it instead of writing manual form layouts when a full schema is available.
+- Component props always include `value`, `onChange`, `label`, and `required` as standard fields.
+- All data display formatting goes through `formatter/` — no ad-hoc `Date.toLocaleDateString()` calls.
+- `ProductCacheService` should be initialized once at app startup, not per-component.

package/dist/App.d.ts

@@ -1,13 +1,14 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { Component } from 'react';
 import './App.css';
-import { NSBoxSensitive } from './main';
 interface AppProps {
 }
 interface AppState {
+    dialog_show: boolean;
+    dialog_loading: boolean;
 }
 export declare class App extends Component<AppProps, AppState> {
-    ref: import("react").RefObject<NSBoxSensitive>;
+    private repeaterAdd;
     constructor(props: AppProps);
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/App.js

@@ -7,23 +7,24 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { EncodingOperation, IStorageLocal } from 'namirasoft-core';
-import { NamirasoftMap } from 'namirasoft-site-map';
-import { Component, createRef } from 'react';
+import { Component } from 'react';
 import './App.css';
 import { NSLayout } from './components/NSLayout';
-import { EmailFormatter, EncryptionOperation, IDFormatter, IntegerFormatter, NSColumn, NSTable, PhoneFormatter, SensitiveFormatter, StringFormatter, StringFormatterSizeType } from './main';
+import { PercentFormatter } from './formatter/PercentFormatter';
+import { NSBoxSensitive, NSBoxString, NSButtonBlue, NSColumn, NSRepeater, NSTable, StringFormatter, URLFormatter } from './main';
 export class App extends Component {
     constructor(props) {
         super(props);
-        this.ref = createRef();
-        this.state = {};
+        this.repeaterAdd = null;
+        this.state = {
+            dialog_show: false,
+            dialog_loading: false,
+        };
     }
+    ;
     render() {
-        let namirasoft = new NamirasoftMap();
-        EncryptionOperation.AES256GCMEncrypt("1234", EncodingOperation.Base64Encode("")).then(console.log);
         return (_jsx(NSLayout, { header: {
                 right: {
                     icons: [
@@ -34,92 +35,23 @@ export class App extends Component {
                         }
                     ],
                 },
-                mega_menu: true
-            }, 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: {}, scope: '', children: _jsx(NSColumn, { style: { alignItems: "center" }, children: _jsx(NSTable, { name: 'users', checkbox: true, getRows: () => __awaiter(this, void 0, void 0, function* () {
-                        return ({
-                            count: 10,
-                            rows: [
-                                {
-                                    id: ["prd-c7836310e7e54170"], first_name: "Amin", last_name: "Pasban", gender: "Male", age: 27,
-                                    phone: "09117579093", email: "amin.cj0077@gmail.com",
-                                    password: "1234", sensitive: false,
-                                },
-                                {
-                                    id: ["prd-c7836310e7e54171"], first_name: "Sara", last_name: "Moradi", gender: "Female", age: 24,
-                                    phone: "09123456781", email: "sara.moradi@example.com",
-                                    password: "CKaKg94ACeR56eqJtZFXgidZQ+lbRTOuZfHxRjaqlPpMO+tWWnYdnEinONB+1oUWvLlLvIj0", sensitive: true,
-                                },
-                                {
-                                    id: ["prd-c7836310e7e54172"], first_name: "Reza", last_name: "Karimi", gender: "Male", age: 31,
-                                    phone: "09129876542", email: "reza.karimi@example.com",
-                                    password: "1234", sensitive: false,
-                                },
-                                {
-                                    id: ["prd-c7836310e7e54173"], first_name: "Niloofar", last_name: "Ahmadi", gender: "Female", age: 29,
-                                    phone: "09351234567", email: "niloofar.ahmadi@example.com",
-                                    password: "gNYeNtQQAPvc8SqiT7hQG77LjowyOsTM+oOX6J0GBv+XrYakhu7u9FDEi80yvgKjlK7gKMy1", sensitive: true,
-                                },
-                                {
-                                    id: ["prd-c7836310e7e54174"], first_name: "Hossein", last_name: "Bagheri", gender: "Male", age: 35,
-                                    phone: "09134561234", email: "hossein.bagheri@example.com",
-                                    password: "1234", sensitive: false,
-                                },
-                                {
-                                    id: ["prd-c7836310e7e54175"], first_name: "Maryam", last_name: "Shahbazi", gender: "Female", age: 26,
-                                    phone: "09141239876", email: "maryam.shahbazi@example.com",
-                                    password: "iKg0wY9m9xeUWSzx1UsVY4QBqR7CAlIuX3JAXmN9Y3tAdE2g/6jIkREh1xOVN3BV+3mNVgJp", sensitive: true,
-                                },
-                                {
-                                    id: ["prd-c7836310e7e54176"], first_name: "Ali", last_name: "Rostami", gender: "Male", age: 28,
-                                    phone: "09151237654", email: "ali.rostami@example.com",
-                                    password: "1234", sensitive: false,
-                                },
-                                {
-                                    id: ["prd-c7836310e7e54177"], first_name: "Fatemeh", last_name: "Jafari", gender: "Female", age: 30,
-                                    phone: "09361234589", email: "fatemeh.jafari@example.com",
-                                    password: "Z2SuGaena/4oXcvf0RL5Fh6dX4OqvwxY0RD9gnp07zwLYS1PJpE2Ftr9WiZYlwcKsOCRptiI", sensitive: true,
-                                },
-                                {
-                                    id: ["prd-c7836310e7e54178"], first_name: "Mohammad", last_name: "Esfandiari", gender: "Male", age: 33,
-                                    phone: "09162348752", email: "mohammad.esfandiari@example.com",
-                                    password: "1234", sensitive: false,
-                                },
-                                {
-                                    id: ["prd-c7836310e7e54179"], first_name: "Elham", last_name: "Khosravi", gender: "Female", age: 25,
-                                    phone: "09203456781", email: "elham.khosravi@example.com",
-                                    password: "G3E9av/PnhcCZMmU8t342TZbTmyxP0efWI9gV7rfPfVLEtekQoDmExdBP/Y61m8BFQHNgoFJ", sensitive: true,
-                                },
-                                {
-                                    id: ["prd-c7836310e7e54180"], first_name: "Mohammad", last_name: "Esfandiari", gender: "Male", age: 33,
-                                    phone: "09162348752", email: "mohammad.esfandiari@example.com",
-                                    password: "1234", sensitive: false,
-                                },
-                                {
-                                    id: ["prd-c7836310e7e54181"], first_name: "Elham", last_name: "Khosravi", gender: "Female", age: 25,
-                                    phone: "09203456781", email: "elham.khosravi@example.com",
-                                    password: "I69kFc3BYEOjf8tdbWxFlV1CTpfSGkVfRx/s54YoNeL7AO+321NF0ZmHEb+2c2i1vA8irJDw", sensitive: true,
-                                },
-                            ]
-                        });
-                    }), getRowKey: (item) => item.value.id[0], columns: [
-                        { index: 0, name: "id", text: "ID", table: { name: "users", text: "users" }, formatter: new IDFormatter(namirasoft, new IStorageLocal()) },
-                        { index: 1, name: "first_name", text: "First Name", table: { name: "users", text: "users" }, formatter: new StringFormatter(StringFormatterSizeType.TwoWords) },
-                        { index: 2, name: "last_name", text: "Last Name", table: { name: "users", text: "users" }, formatter: new StringFormatter(StringFormatterSizeType.TwoWords) },
-                        { index: 3, name: "gender", text: "Gender", table: { name: "users", text: "users" }, formatter: new StringFormatter(StringFormatterSizeType.TwoWords) },
-                        { index: 4, name: "age", text: "Age", table: { name: "users", text: "users" }, formatter: new IntegerFormatter() },
-                        {
-                            index: 4, name: "password", text: "Password", table: { name: "users", text: "users" },
-                            formatter: new SensitiveFormatter((value) => __awaiter(this, void 0, void 0, function* () {
-                                let decrypted = yield EncryptionOperation.AES256GCMDecrypt("1234", value);
-                                let decoded = EncodingOperation.Base64Decode(decrypted);
-                                return decoded;
-                            }), (_col, row) => {
-                                return row.value.sensitive;
-                            })
-                        },
-                        { index: 6, name: "phone", text: "Phone Number", table: { name: "users", text: "users" }, formatter: new PhoneFormatter() },
-                        { index: 7, name: "email", text: "Email Address", table: { name: "users", text: "users" }, formatter: new EmailFormatter() },
-                    ], scroll: false }) }) }));
+                mega_menu: true,
+                onCollapse: () => { },
+            }, 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: {}, scope: '', children: _jsxs(NSColumn, { style: { alignItems: "center" }, children: [_jsx(NSTable, { name: "", checkbox: true, columns: [
+                            { index: 0, name: "title", text: "Title", formatter: new StringFormatter(), table: { name: "", text: "" } },
+                            { index: 1, name: "percentage", text: "Percentage", formatter: new PercentFormatter(), table: { name: "", text: "" } },
+                            { index: 2, name: "url", text: "URL", formatter: new URLFormatter(), table: { name: "", text: "" } },
+                        ], getRowKey: (item) => item.value.id, getRows: () => __awaiter(this, void 0, void 0, function* () {
+                            return {
+                                count: 2,
+                                rows: [
+                                    { id: "1", title: "Amin", percentage: 19, url: "https://example.com/amin" },
+                                    { id: "2", title: "Negar", percentage: 21, url: "example.com/negar" },
+                                ]
+                            };
+                        }), getRowCheckboxDisabled: row => {
+                            return row.value.percentage < 20;
+                        } }), _jsx(NSRepeater, { title: "Items (external add)", required: false, onExternalAddRef: (add) => { this.repeaterAdd = add; }, max: 3, createItem: (_gIndex, lIndex, ref, onChange, onDelete) => _jsx(NSBoxString, { ref: ref, title: `Item ${lIndex + 1}`, required: false, onChanged: onChange, menu: { builtin: { delete: { enabled: onDelete != null, onDelete: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(lIndex) } }, items: [] } }), getValue: (item, checkError) => item.getValue(checkError), setValue: (item, _index, value, callback) => item.setValue(value !== null && value !== void 0 ? value : null, callback), isEmpty: (_item, value) => !value || value.trim() === '' }), _jsx(NSButtonBlue, { title: "Add Item", onClick: { action: (done) => { var _a; (_a = this.repeaterAdd) === null || _a === void 0 ? void 0 : _a.call(this); done(); } } }), _jsx(NSBoxSensitive, { required: true, title: "Sensitive" })] }) }));
     }
 }
 //# sourceMappingURL=App.js.map