@mantis-core/ui 0.1.2 → 0.2.0

package/dist/index.js

@@ -10,6 +10,7 @@ export { default as MultiSelect } from "./components/Forms/MultiSelect";
 export { default as NumberInput } from "./components/Forms/NumberInput";
 export { default as RenderField } from "./components/Forms/RenderField";
 export { default as Select } from "./components/Forms/Select";
+export { default as AsyncSelect } from "./components/Forms/AsyncSelect";
 export { default as Switch } from "./components/Forms/Switch";
 export { default as TextArea } from "./components/Forms/TextArea";
 export { default as TextInput } from "./components/Forms/TextInput";
@@ -17,6 +18,10 @@ export { default as TimePicker } from "./components/Forms/TimePicker";
 export { default as Toggle } from "./components/Forms/Toggle";
 export { default as ToggleInlineButton } from "./components/Forms/ToggleInlineButton";
 export { default as UploadFilesPreview } from "./components/Forms/UploadFilesPreview";
+export { default as FileDropzone } from "./components/Forms/FileDropzone";
+export { default as FormActionsBar } from "./components/Forms/FormActionsBar";
+export { default as DirtyFormGuard } from "./components/Forms/DirtyFormGuard";
+export { default as useDirtyFormGuard } from "./components/Forms/useDirtyFormGuard";
 export { default as TableToolbar } from "./components/table-toolbar";
 export { default as TableFilterField } from "./components/table-filter-field";
 export { default as ActionColumn } from "./components/Tables/ActionColumn";
@@ -33,6 +38,9 @@ export { AdminPageLayoutProvider, useAdminPageLayout } from "./components/pages/
 export { default as AdminPageLayoutShell } from "./components/pages/admin-layout/AdminPageLayoutShell";
 export { Pagination, PaginationInfo, PageSizeSelector } from "./components/ui/Pagination";
 export { default as RichTextPreview } from "./components/ui/RichTextPreview";
+export { default as StatusBadge } from "./components/ui/StatusBadge";
+export { default as DataState } from "./components/ui/DataState";
+export { default as ConfirmDialog } from "./components/ui/ConfirmDialog";
 export { default as MapPicker } from "./components/Maps/MapPicker";
 export { default as MapPickerClient } from "./components/Maps/MapPickerClient";
 export { default as MapPickerOSM } from "./components/Maps/MapPickerOSM";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/docs/README.md

@@ -0,0 +1,72 @@
+# @mantis-core/ui Docs
+
+This folder contains focused documentation files intended for direct human lookup and efficient LLM retrieval.
+
+## Contracts
+
+- [Controller props](./contracts/controller-props.md)
+- [Underlying library map](./contracts/dependency-map.md)
+- [Style import guide](./contracts/style-imports.md)
+
+## Components
+
+### Buttons and loaders
+
+- [Button](./components/button.md)
+- [Loading](./components/loading.md)
+
+### Forms
+
+- [TextInput](./components/text-input.md)
+- [TextArea](./components/text-area.md)
+- [NumberInput](./components/number-input.md)
+- [DateInput](./components/date-input.md)
+- [DropDown](./components/drop-down.md)
+- [MultiSelect](./components/multi-select.md)
+- [Select](./components/select.md)
+- [AsyncSelect](./components/async-select.md)
+- [CKEditorInput](./components/ckeditor-input.md)
+- [TimePicker](./components/time-picker.md)
+- [Switch](./components/switch.md)
+- [Toggle](./components/toggle.md)
+- [ToggleInlineButton](./components/toggle-inline-button.md)
+- [FileDropzone](./components/file-dropzone.md)
+- [UploadFilesPreview](./components/upload-files-preview.md)
+- [FormActionsBar](./components/form-actions-bar.md)
+- [FormFieldRender](./components/form-field-render.md)
+- [RenderField](./components/render-field.md)
+- [ErrorMessage](./components/error-message.md)
+- [HiddenField](./components/hidden-field.md)
+- [DirtyFormGuard and useDirtyFormGuard](./components/dirty-form-guard.md)
+
+### Tables
+
+- [TableToolbar](./components/table-toolbar.md)
+- [TableFilterField](./components/table-filter-field.md)
+- [PaginatedTable](./components/paginated-table.md)
+- [ActionColumn](./components/action-column.md)
+- [MenuButton](./components/menu-button.md)
+- [FilterPannel](./components/filter-pannel.md)
+- [MultiSelectFilter](./components/multi-select-filter.md)
+- [IndexColumn](./components/index-column.md)
+
+### Page and layout
+
+- [PageTitle](./components/page-title.md)
+- [FormSection](./components/form-section.md)
+- [AdminPageHeader](./components/admin-page-header.md)
+- [Admin page layout](./components/admin-page-layout.md)
+
+### Generic UI
+
+- [Pagination, PaginationInfo, PageSizeSelector](./components/pagination.md)
+- [RichTextPreview](./components/rich-text-preview.md)
+- [StatusBadge](./components/status-badge.md)
+- [DataState](./components/data-state.md)
+- [ConfirmDialog](./components/confirm-dialog.md)
+
+### Maps
+
+- [MapPicker](./components/map-picker.md)
+- [MapPickerClient](./components/map-picker-client.md)
+- [MapPickerOSM](./components/map-picker-osm.md)

package/docs/components/action-column.md

@@ -0,0 +1,17 @@
+# ActionColumn
+
+- Export: `ActionColumn`
+- Extra exports: `ActionColumnProps`
+- Import: `import { ActionColumn } from "@mantis-core/ui";`
+- Base library: `primereact/column`
+- Base typing: `ColumnProps & { label?: string; icon?: string }`
+- Required styles: usually `@mantis-core/styles/scss/table.scss` through table context
+
+## Example
+
+```tsx
+{ActionColumn(
+  (row) => [{ label: "Open", route: `/admin/items/${row.id}` }],
+  { label: "Actions" },
+)}
+```

package/docs/components/admin-page-header.md

@@ -0,0 +1,21 @@
+# AdminPageHeader
+
+- Export: `AdminPageHeader`
+- Import: `import { AdminPageHeader } from "@mantis-core/ui";`
+- Base library: custom header + `next/link`
+- Base typing: `{ title: string; description?: string; actions?: ReactNode; breadcrumbs?: readonly AdminBreadcrumbItem[] }`
+- Required styles: none
+
+## Example
+
+```tsx
+<AdminPageHeader
+  title="Clients"
+  description="Manage B2B accounts"
+  breadcrumbs={[
+    { label: "Dashboard", href: "/admin" },
+    { label: "Clients" },
+  ]}
+  actions={<Button label="New client" icon="pi pi-plus" />}
+/>
+```

package/docs/components/admin-page-layout.md

@@ -0,0 +1,29 @@
+# Admin Page Layout
+
+- Exports:
+  - `AdminPageLayoutProvider`
+  - `useAdminPageLayout`
+  - `AdminPageConfigurator`
+  - `AdminPageLayoutShell`
+  - `AdminBreadcrumbItem`
+  - `AdminPageLayoutConfig`
+- Import: `import { AdminPageLayoutProvider, AdminPageConfigurator, AdminPageLayoutShell } from "@mantis-core/ui";`
+- Base library: React context + custom shell
+- Required styles: none
+
+## Example
+
+```tsx
+<AdminPageLayoutProvider>
+  <AdminPageLayoutShell>
+    <AdminPageConfigurator config={{ title: "Leads" }}>
+      <LeadsTable />
+    </AdminPageConfigurator>
+  </AdminPageLayoutShell>
+</AdminPageLayoutProvider>
+```
+
+## Notes
+
+- `useAdminPageLayout` must run inside `AdminPageLayoutProvider`.
+- `AdminPageLayoutShell` renders `AdminPageHeader` when `config.title` exists and `hideHeader` is not set.

package/docs/components/async-select.md

@@ -0,0 +1,26 @@
+# AsyncSelect
+
+- Export: `AsyncSelect`
+- Extra exports: `AsyncSelectProps`
+- Import: `import { AsyncSelect } from "@mantis-core/ui";`
+- Base library: `react-select/async` or `react-select/async-creatable`
+- Base typing: `Omit<ReactSelectProps<SelectOption>, "name" | "defaultValue" | "options"> & { controller: ControllerProps; block?: boolean; variant?: ButtonVariant; isCreatable?: boolean; loadOptions; defaultOptions?; cacheOptions?; debounceMs?; onCreateOption?; formatCreateLabel? }`
+- Form contract: [`ControllerProps`](../contracts/controller-props.md)
+- Required styles: `@mantis-core/styles/scss/select.scss`
+
+## Example
+
+```tsx
+<AsyncSelect
+  controller={{ name: "city", control: form.control }}
+  block
+  loadOptions={async (input) => searchCities(input)}
+  defaultOptions
+  debounceMs={300}
+/>
+```
+
+## Notes
+
+- `loadOptions` is required.
+- Debouncing is implemented inside the wrapper.

package/docs/components/button.md

@@ -0,0 +1,25 @@
+# Button
+
+- Export: `Button`
+- Import: `import { Button } from "@mantis-core/ui";`
+- Base library: `primereact/button`
+- Base typing: `Omit<PrimeButtonProps, "onClick" | "ref">` plus `href`, `variant`, `block`, `sm`, `lg`, `outlined`, `text`, `rounded`
+- Required styles: `@mantis-core/styles/scss/buttons.scss`
+
+## Example
+
+```tsx
+<Button
+  label="Save"
+  icon="pi pi-check"
+  variant="primary"
+  rounded
+  onClick={() => console.log("saved")}
+/>
+```
+
+## Notes
+
+- PrimeReact props still pass through.
+- `href` triggers client navigation with `next/navigation`.
+- `ButtonVariant` accepts `danger`, but the tokenized SCSS loop is defined around `error`.

package/docs/components/ckeditor-input.md

@@ -0,0 +1,24 @@
+# CKEditorInput
+
+- Export: `CKEditorInput`
+- Extra exports: `CKEditorInputProps`, `CKEditorContentMetrics`
+- Import: `import { CKEditorInput } from "@mantis-core/ui";`
+- Base library: `@ckeditor/ckeditor5-react` + `ckeditor5`
+- Base typing: explicit `CKEditorInputProps`
+- Form contract: [`ControllerProps`](../contracts/controller-props.md)
+- Required styles: `@mantis-core/styles/scss/ckeditor.scss`
+
+## Example
+
+```tsx
+<CKEditorInput
+  controller={{ name: "body", control: form.control }}
+  minHeight="20rem"
+  showStats
+  onMetricsChange={(metrics) => console.log(metrics.words)}
+/>
+```
+
+## Notes
+
+- This wrapper adds metrics, presets, and optional non-empty HTML validation on top of CKEditor.

package/docs/components/confirm-dialog.md

@@ -0,0 +1,21 @@
+# ConfirmDialog
+
+- Export: `ConfirmDialog`
+- Extra exports: `ConfirmDialogProps`, `ConfirmDialogSeverity`
+- Import: `import { ConfirmDialog } from "@mantis-core/ui";`
+- Base library: `primereact/dialog`
+- Base typing: explicit `ConfirmDialogProps`
+- Required styles: `@mantis-core/styles/scss/confirm-dialog.scss`
+
+## Example
+
+```tsx
+<ConfirmDialog
+  visible={open}
+  title="Delete listing"
+  message="This action cannot be undone."
+  confirmSeverity="danger"
+  onConfirm={handleDelete}
+  onCancel={() => setOpen(false)}
+/>
+```

package/docs/components/data-state.md

@@ -0,0 +1,19 @@
+# DataState
+
+- Export: `DataState`
+- Extra exports: `DataStateProps`, `DataStateStatus`
+- Import: `import { DataState } from "@mantis-core/ui";`
+- Base library: custom state wrapper + `Button`
+- Base typing: explicit `DataStateProps`
+- Required styles: `@mantis-core/styles/scss/data-state.scss`
+
+## Example
+
+```tsx
+<DataState
+  status={query.isError ? "error" : query.isLoading ? "loading" : rows.length === 0 ? "empty" : "ready"}
+  onRetry={() => query.refetch()}
+>
+  <PaginatedTable value={rows}>{/* columns */}</PaginatedTable>
+</DataState>
+```

package/docs/components/date-input.md

@@ -0,0 +1,22 @@
+# DateInput
+
+- Export: `DateInput`
+- Extra exports: `DateInputProps`
+- Import: `import { DateInput } from "@mantis-core/ui";`
+- Base library: `primereact/calendar`
+- Base typing: `Omit<CalendarProps, "name" | "defaultValue"> & { controller: ControllerProps; block?: boolean }`
+- Form contract: [`ControllerProps`](../contracts/controller-props.md)
+- Required styles:
+  - `@mantis-core/styles/scss/inputs.scss`
+  - `@mantis-core/styles/scss/date-picker.scss`
+
+## Example
+
+```tsx
+<DateInput
+  controller={{ name: "publishAt", control: form.control }}
+  block
+  showIcon
+  dateFormat="yy-mm-dd"
+/>
+```

package/docs/components/dirty-form-guard.md

@@ -0,0 +1,31 @@
+# DirtyFormGuard and useDirtyFormGuard
+
+- Exports: `DirtyFormGuard`, `useDirtyFormGuard`
+- Extra exports: `DirtyFormGuardProps`, `UseDirtyFormGuardOptions`, `UseDirtyFormGuardResult`
+- Base library: browser `beforeunload` + `window.confirm`
+- Required styles: none
+
+## Component example
+
+```tsx
+<DirtyFormGuard
+  isDirty={form.formState.isDirty}
+  message="You have unsaved changes."
+/>
+```
+
+## Hook example
+
+```tsx
+const guard = useDirtyFormGuard({
+  isDirty: form.formState.isDirty,
+  message: "Leave without saving?",
+});
+
+void guard.confirmIfDirty(async () => router.push("/admin"));
+```
+
+## Notes
+
+- Use the component for declarative page guards.
+- Use the hook when you need to wrap specific navigation or destructive actions.

package/docs/components/drop-down.md

@@ -0,0 +1,28 @@
+# DropDown
+
+- Export: `DropDown`
+- Extra exports: `DropDownProps`
+- Import: `import { DropDown } from "@mantis-core/ui";`
+- Base library: `primereact/dropdown`
+- Base typing: `Omit<DropdownProps, "name" | "defaultValue"> & { controller: ControllerProps; block?: boolean }`
+- Form contract: [`ControllerProps`](../contracts/controller-props.md)
+- Required styles: `@mantis-core/styles/scss/inputs.scss`
+
+## Example
+
+```tsx
+<DropDown
+  controller={{ name: "status", control: form.control }}
+  block
+  options={[
+    { label: "Draft", value: "draft" },
+    { label: "Published", value: "published" },
+  ]}
+  optionLabel="label"
+  optionValue="value"
+/>
+```
+
+## Notes
+
+- This is the PrimeReact dropdown wrapper, not the `react-select` wrapper.

package/docs/components/error-message.md

@@ -0,0 +1,13 @@
+# ErrorMessage
+
+- Export: `ErrorMessage`
+- Import: `import { ErrorMessage } from "@mantis-core/ui";`
+- Base library: `@hookform/error-message`
+- Base typing: wrapper export around hook-form error rendering
+- Required styles: none
+
+## Example
+
+```tsx
+<ErrorMessage errors={form.formState.errors} name="title" />
+```

package/docs/components/file-dropzone.md

@@ -0,0 +1,25 @@
+# FileDropzone
+
+- Export: `FileDropzone`
+- Extra exports: `FileDropzoneProps`, `FileDropzoneRejectedFile`, `FileDropzoneRejectCode`
+- Import: `import { FileDropzone } from "@mantis-core/ui";`
+- Base library: custom drag-and-drop file input
+- Base typing: explicit `FileDropzoneProps`
+- Required styles: `@mantis-core/styles/scss/file-dropzone.scss`
+
+## Example
+
+```tsx
+<FileDropzone
+  controller={{ name: "attachments", control: form.control, defaultValue: [] }}
+  accept={["image/*", ".pdf"]}
+  maxFiles={5}
+  maxSizeBytes={5 * 1024 * 1024}
+  label="Attachments"
+/>
+```
+
+## Notes
+
+- Supports both `react-hook-form` mode and plain controlled mode with `value` and `onChange`.
+- Rejections are normalized into `FileDropzoneRejectedFile`.

package/docs/components/filter-pannel.md

@@ -0,0 +1,23 @@
+# FilterPannel
+
+- Export: `FilterPannel`
+- Import: `import { FilterPannel } from "@mantis-core/ui";`
+- Base library: `primereact/sidebar` + `react-hook-form`
+- Base typing: `PropsWithChildren<{ onApplyFilter: (data: T) => Promise<void> }>`
+- Required styles: none
+
+## Example
+
+```tsx
+<FilterPannel<{ status: string | null; city: string | null }>
+  onApplyFilter={async (filters) => setFilters(filters)}
+>
+  <DropDown controller={{ name: "status" }} options={statusOptions} />
+  <DropDown controller={{ name: "city" }} options={cityOptions} />
+</FilterPannel>
+```
+
+## Notes
+
+- The component creates its own `FormProvider`.
+- Empty values are normalized to `null` before `onApplyFilter`.

package/docs/components/form-actions-bar.md

@@ -0,0 +1,22 @@
+# FormActionsBar
+
+- Export: `FormActionsBar`
+- Import: `import { FormActionsBar } from "@mantis-core/ui";`
+- Base library: custom layout + `Button`
+- Base typing: explicit `FormActionsBarProps`
+- Required styles: `@mantis-core/styles/scss/form-actions.scss`
+
+## Example
+
+```tsx
+<FormActionsBar
+  align="between"
+  sticky
+  leftSlot={<span>Unsaved changes</span>}
+  primaryLabel="Save"
+  primaryType="submit"
+  secondaryLabel="Cancel"
+  secondaryOutlined
+  onSecondaryClick={() => router.back()}
+/>
+```

package/docs/components/form-field-render.md

@@ -0,0 +1,20 @@
+# FormFieldRender
+
+- Export: `FormFieldRender`
+- Extra exports: `FormFieldRenderProps`
+- Import: `import { FormFieldRender } from "@mantis-core/ui";`
+- Base library: custom label and error wrapper
+- Base typing: `{ name: string; label: string | ReactElement; labelProps?; containerClassName?; render: ({ name }) => ReactElement | ReactNode }`
+- Required styles: none
+
+## Example
+
+```tsx
+<FormFieldRender
+  name="email"
+  label="Email"
+  render={({ name }) => (
+    <TextInput controller={{ name, control: form.control }} block />
+  )}
+/>
+```

package/docs/components/form-section.md

@@ -0,0 +1,15 @@
+# FormSection
+
+- Export: `FormSection`
+- Import: `import { FormSection } from "@mantis-core/ui";`
+- Base library: custom card section
+- Base typing: `{ title: string; description?: string; icon?: ReactNode; children: ReactNode; className?: string }`
+- Required styles: none
+
+## Example
+
+```tsx
+<FormSection title="Publishing" description="Visibility and timing controls">
+  <Switch name="published" control={form.control} />
+</FormSection>
+```

package/docs/components/hidden-field.md

@@ -0,0 +1,19 @@
+# HiddenField
+
+- Export: `HiddenField`
+- Extra exports: `HiddenFieldProps`
+- Import: `import { HiddenField } from "@mantis-core/ui";`
+- Base library: `react-hook-form`
+- Base typing: `ControllerProps & { hidden?: boolean }`
+- Form contract: [`ControllerProps`](../contracts/controller-props.md)
+- Required styles: none
+
+## Example
+
+```tsx
+<HiddenField
+  name="tenantId"
+  control={form.control}
+  defaultValue={tenantId}
+/>
+```

package/docs/components/index-column.md

@@ -0,0 +1,13 @@
+# IndexColumn
+
+- Export: `IndexColumn`
+- Import: `import { IndexColumn } from "@mantis-core/ui";`
+- Base library: `primereact/column`
+- Base typing: `(props?: ColumnProps) => JSX.Element`
+- Required styles: none beyond table context
+
+## Example
+
+```tsx
+<IndexColumn style={{ width: "4rem" }} />
+```

package/docs/components/loading.md

@@ -0,0 +1,21 @@
+# Loading
+
+- Export: `Loading`
+- Extra exports: `LoadingWrapperProps`
+- Import: `import { Loading } from "@mantis-core/ui";`
+- Base library: custom full-screen overlay
+- Base typing: `PropsWithChildren<{ loading?: boolean; texto?: string; className?: string }>`
+- Required styles: none
+
+## Example
+
+```tsx
+<Loading loading={isSubmitting} texto="Saving changes...">
+  <FormScreen />
+</Loading>
+```
+
+## Notes
+
+- When `loading` is `false`, it returns `children` unchanged.
+- This is a page overlay, not an inline spinner primitive.

package/docs/components/map-picker-client.md

@@ -0,0 +1,22 @@
+# MapPickerClient
+
+- Export: `MapPickerClient`
+- Extra exports: `MapPickerClientProps`
+- Import: `import { MapPickerClient } from "@mantis-core/ui";`
+- Base library: `react-leaflet` + `leaflet`
+- Base typing: `{ onLocationSelect: (lat: number, lng: number) => void; initialLat?: number | null; initialLng?: number | null }`
+- Required styles: Leaflet CSS is imported by the component
+
+## Example
+
+```tsx
+<MapPickerClient
+  initialLat={-2.9}
+  initialLng={-79.0}
+  onLocationSelect={(lat, lng) => console.log(lat, lng)}
+/>
+```
+
+## Notes
+
+- Marker assets are expected under `/leaflet/*`.

package/docs/components/map-picker-osm.md

@@ -0,0 +1,18 @@
+# MapPickerOSM
+
+- Export: `MapPickerOSM`
+- Extra exports: `MapPickerOSMProps`, `LatLng`
+- Import: `import { MapPickerOSM } from "@mantis-core/ui";`
+- Base library: Leaflet loaded from CDN
+- Base typing: `{ initialPosition?: LatLng; zoom?: number; height?: string; onChange?: (pos: LatLng) => void; onSave?: (pos: LatLng) => void }`
+- Required styles: no `@mantis-core/styles` partial; Leaflet CSS is injected from CDN
+
+## Example
+
+```tsx
+<MapPickerOSM
+  initialPosition={{ lat: -12.0464, lng: -77.0428 }}
+  onChange={(pos) => console.log(pos)}
+  onSave={(pos) => saveCoordinates(pos)}
+/>
+```

package/docs/components/map-picker.md

@@ -0,0 +1,21 @@
+# MapPicker
+
+- Export: `MapPicker`
+- Extra exports: `MapPickerProps`
+- Import: `import { MapPicker } from "@mantis-core/ui";`
+- Base library: `next/dynamic` wrapper over `MapPickerClient`
+- Base typing: `{ onLocationSelect: (lat: number, lng: number) => void; initialLat?: number | null; initialLng?: number | null }`
+- Required styles: Leaflet CSS comes from the client implementation
+
+## Example
+
+```tsx
+<MapPicker
+  initialLat={-2.9}
+  initialLng={-79.0}
+  onLocationSelect={(lat, lng) => {
+    form.setValue("lat", lat);
+    form.setValue("lng", lng);
+  }}
+/>
+```

package/docs/components/menu-button.md

@@ -0,0 +1,22 @@
+# MenuButton
+
+- Export: `MenuButton`
+- Extra exports: `MenuButtonProps`, `ActionMenuItem`
+- Import: `import { MenuButton } from "@mantis-core/ui";`
+- Base library: `primereact/tieredmenu`
+- Base typing:
+  - `ActionMenuItem extends MenuItem { route?: string; items?: ActionMenuItem[] | ActionMenuItem[][] }`
+  - `MenuButtonProps = { label?: string; icon?: string; items?: ActionMenuItem[] }`
+- Required styles: [`buttons.scss`](../../../../packages/mantis-core-styles/docs/styles/buttons.md) indirectly through `Button`
+
+## Example
+
+```tsx
+<MenuButton
+  label="Actions"
+  items={[
+    { label: "Edit", icon: "pi pi-pencil", route: "/admin/listings/1" },
+    { label: "Delete", icon: "pi pi-trash", command: () => setOpen(true) },
+  ]}
+/>
+```