@mantis-core/ui 0.1.3 → 0.2.0

package/docs/components/table-filter-field.md

@@ -0,0 +1,21 @@
+# TableFilterField
+
+- Export: `TableFilterField`
+- Extra exports: `TableFilterFieldProps`
+- Import: `import { TableFilterField } from "@mantis-core/ui";`
+- Base library: custom filter wrapper
+- Base typing: `{ label: ReactNode; htmlFor: string; children: ReactNode; className?: string; labelClassName?: string }`
+- Required styles: `@mantis-core/styles/scss/table.scss`
+
+## Example
+
+```tsx
+<TableFilterField label="Status" htmlFor="status-filter">
+  <DropDown
+    controller={{ name: "status", control: form.control }}
+    block
+    inputId="status-filter"
+    options={statusOptions}
+  />
+</TableFilterField>
+```

package/docs/components/table-toolbar.md

@@ -0,0 +1,19 @@
+# TableToolbar
+
+- Export: `TableToolbar`
+- Extra exports: `TableToolbarProps`
+- Import: `import { TableToolbar } from "@mantis-core/ui";`
+- Base library: custom layout
+- Base typing: `{ title?: ReactNode; totalRecords?: number; meta?: ReactNode; actions?: ReactNode; className?: string; copyClassName?: string; actionsClassName?: string }`
+- Required styles: `@mantis-core/styles/scss/table.scss`
+
+## Example
+
+```tsx
+<TableToolbar
+  title="Listings"
+  totalRecords={total}
+  meta="Updated today"
+  actions={<Button label="New listing" icon="pi pi-plus" />}
+/>
+```

package/docs/components/text-area.md

@@ -0,0 +1,20 @@
+# TextArea
+
+- Export: `TextArea`
+- Extra exports: `TextAreaProps`
+- Import: `import { TextArea } from "@mantis-core/ui";`
+- Base library: `primereact/inputtextarea`
+- Base typing: `Omit<InputTextareaProps, "name" | "defaultValue" | "ref" | "onChange"> & { controller: ControllerProps; block?: boolean; loading?: boolean }`
+- Form contract: [`ControllerProps`](../contracts/controller-props.md)
+- Required styles: `@mantis-core/styles/scss/inputs.scss`
+
+## Example
+
+```tsx
+<TextArea
+  controller={{ name: "description", control: form.control }}
+  block
+  rows={6}
+  autoResize
+/>
+```

package/docs/components/text-input.md

@@ -0,0 +1,23 @@
+# TextInput
+
+- Export: `TextInput`
+- Extra exports: `TextInputProps`
+- Import: `import { TextInput } from "@mantis-core/ui";`
+- Base library: `primereact/inputtext`
+- Base typing: `Omit<InputTextProps, "name" | "defaultValue"> & { controller: ControllerProps; block?: boolean; defaultValue?: string }`
+- Form contract: [`ControllerProps`](../contracts/controller-props.md)
+- Required styles: `@mantis-core/styles/scss/inputs.scss`
+
+## Example
+
+```tsx
+<TextInput
+  controller={{ name: "title", control: form.control }}
+  block
+  placeholder="Listing title"
+/>
+```
+
+## Notes
+
+- Use this when you want PrimeReact `InputText` behavior with `react-hook-form` wiring.

package/docs/components/time-picker.md

@@ -0,0 +1,22 @@
+# TimePicker
+
+- Export: `TimePicker`
+- Import: `import { TimePicker } from "@mantis-core/ui";`
+- Base library: `react-datepicker`
+- Base typing: explicit `TimePickerProps`
+- Form contract: [`ControllerProps`](../contracts/controller-props.md)
+- Required styles: none
+
+## Example
+
+```tsx
+<TimePicker
+  controller={{ name: "openingTime", control: form.control }}
+  block
+  datePicker={{ showTimeSelectOnly: true, timeIntervals: 30 }}
+/>
+```
+
+## Notes
+
+- This is not PrimeReact `Calendar`.

package/docs/components/toggle-inline-button.md

@@ -0,0 +1,22 @@
+# ToggleInlineButton
+
+- Export: `ToggleInlineButton`
+- Extra exports: `ToggleInlineButtonProps`
+- Import: `import { ToggleInlineButton } from "@mantis-core/ui";`
+- Base library: `primereact/selectbutton`
+- Base typing: `{ controller: ControllerProps; options: any[]; variant?: ButtonVariant; multiple?: boolean }`
+- Form contract: [`ControllerProps`](../contracts/controller-props.md)
+- Required styles: `@mantis-core/styles/scss/select-button.scss`
+
+## Example
+
+```tsx
+<ToggleInlineButton
+  controller={{ name: "visibility", control: form.control }}
+  variant="accent"
+  options={[
+    { label: "Public", value: "public" },
+    { label: "Private", value: "private" },
+  ]}
+/>
+```

package/docs/components/toggle.md

@@ -0,0 +1,21 @@
+# Toggle
+
+- Export: `Toggle`
+- Extra exports: `ToggleProps`
+- Import: `import { Toggle } from "@mantis-core/ui";`
+- Base library: `primereact/checkbox`
+- Base typing: `ControllerProps & { on?; off?; size?; offstyle?; onstyle?; onClick?; active? }`
+- Form contract: [`ControllerProps`](../contracts/controller-props.md)
+- Required styles: none
+
+## Example
+
+```tsx
+<Toggle
+  name="published"
+  control={form.control}
+  defaultValue={false}
+  on="YES"
+  off="NO"
+/>
+```

package/docs/components/upload-files-preview.md

@@ -0,0 +1,26 @@
+# UploadFilesPreview
+
+- Export: `UploadFilesPreview`
+- Extra exports: `UploadFilesPreviewProps`, `UploadPreviewItem`, `UploadFilesPreviewCopy`
+- Import: `import { UploadFilesPreview } from "@mantis-core/ui";`
+- Base library: custom upload queue and sortable preview grid
+- Base typing: `UploadFilesPreviewProps<TItem extends UploadPreviewItem = UploadPreviewItem>`
+- Required styles: none
+
+## Example
+
+```tsx
+type PhotoItem = {
+  id: string;
+  fullUrl: string;
+  storagePath: string;
+};
+
+<UploadFilesPreview<PhotoItem>
+  previews={photos}
+  onUploadFile={uploadPhoto}
+  onFileUploaded={(photo) => setPhotos((prev) => [...prev, photo])}
+  onRemoveFile={(photo) => removePhoto(photo.id)}
+  onReorder={setPhotos}
+/>
+```

package/docs/contracts/controller-props.md

@@ -0,0 +1,28 @@
+# Controller Props
+
+Shared form wrappers in `@mantis-core/ui` use this contract:
+
+```ts
+export interface ControllerProps {
+  name: string;
+  rules?: RegisterOptions;
+  shouldUnregister?: boolean;
+  defaultValue?: any;
+  control?: Control;
+}
+```
+
+## Usage
+
+```tsx
+controller={{
+  name: "title",
+  control: form.control,
+  rules: { required: "Title is required" },
+}}
+```
+
+## Notes
+
+- Components that expose `controller: ControllerProps` are designed for `react-hook-form`.
+- Some components, such as `FileDropzone`, also support plain controlled mode without `controller`.

package/docs/contracts/dependency-map.md

@@ -0,0 +1,57 @@
+# Underlying Library Map
+
+Use this file when you need to know which base library a component wraps.
+
+## PrimeReact wrappers
+
+- `Button`: `primereact/button`
+- `DateInput`: `primereact/calendar`
+- `DropDown`: `primereact/dropdown`
+- `MultiSelect`: `primereact/multiselect`
+- `NumberInput`: `primereact/inputnumber`
+- `TextInput`: `primereact/inputtext`
+- `TextArea`: `primereact/inputtextarea`
+- `Toggle`: `primereact/checkbox`
+- `ToggleInlineButton`: `primereact/selectbutton`
+- `PaginatedTable`: `primereact/datatable`
+- `ActionColumn`: `primereact/column`
+- `IndexColumn`: `primereact/column`
+- `MenuButton`: `primereact/tieredmenu`
+- `FilterPannel`: `primereact/sidebar`
+- `MultiSelectFilter`: `primereact/multiselect`
+- `ConfirmDialog`: `primereact/dialog`
+
+## Non-PrimeReact wrappers
+
+- `Select`: `react-select`
+- `AsyncSelect`: `react-select/async`
+- `CKEditorInput`: `@ckeditor/ckeditor5-react` + `ckeditor5`
+- `TimePicker`: `react-datepicker`
+- `MapPickerClient`: `react-leaflet` + `leaflet`
+- `MapPickerOSM`: Leaflet loaded from CDN
+- `MapPicker`: `next/dynamic` wrapper over `MapPickerClient`
+
+## Custom components
+
+- `Loading`
+- `FileDropzone`
+- `UploadFilesPreview`
+- `FormActionsBar`
+- `FormFieldRender`
+- `RenderField`
+- `DirtyFormGuard`
+- `useDirtyFormGuard`
+- `TableToolbar`
+- `TableFilterField`
+- `PageTitle`
+- `FormSection`
+- `AdminPageHeader`
+- `AdminPageLayoutProvider`
+- `AdminPageConfigurator`
+- `AdminPageLayoutShell`
+- `Pagination`
+- `PaginationInfo`
+- `PageSizeSelector`
+- `RichTextPreview`
+- `StatusBadge`
+- `DataState`

package/docs/contracts/style-imports.md

@@ -0,0 +1,27 @@
+# Style Import Guide
+
+`@mantis-core/ui` does not inject CSS automatically. Import the matching partials from `@mantis-core/styles`.
+
+## Common imports
+
+```scss
+@use "@mantis-core/styles/scss/buttons.scss";
+@use "@mantis-core/styles/scss/inputs.scss";
+@use "@mantis-core/styles/scss/select.scss";
+@use "@mantis-core/styles/scss/select-button.scss";
+@use "@mantis-core/styles/scss/table.scss";
+@use "@mantis-core/styles/scss/status-badge.scss";
+@use "@mantis-core/styles/scss/data-state.scss";
+@use "@mantis-core/styles/scss/confirm-dialog.scss";
+@use "@mantis-core/styles/scss/form-actions.scss";
+@use "@mantis-core/styles/scss/file-dropzone.scss";
+@use "@mantis-core/styles/scss/ckeditor.scss";
+@use "@mantis-core/styles/scss/rich-text-preview.scss";
+@use "@mantis-core/styles/scss/switch.scss";
+```
+
+## Notes
+
+- `Pagination` is a custom component and does not use `paginator.scss`.
+- `Select` and `AsyncSelect` require `select.scss`, not PrimeReact input styles.
+- Components like `Loading`, `UploadFilesPreview`, `PageTitle`, and `FormSection` rely mainly on utility classes or inline styles.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantis-core/ui",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "private": false,
   "description": "Reusable React UI components for Mantis Core.",
   "type": "module",
@@ -32,8 +32,10 @@
   },
   "files": [
     "dist",
+    "docs",
     "README.md",
-    "COMPONENTS.md"
+    "COMPONENTS.md",
+    "PRIMEREACT_MAPPING.md"
   ],
   "publishConfig": {
     "access": "public"
@@ -56,7 +58,7 @@
     "react-datepicker": "^9.0.0",
     "react-leaflet": "^5.0.0",
     "react-select": "^5.10.2",
-    "@mantis-core/utils": "^0.3.0"
+    "@mantis-core/utils": "^0.4.0"
   },
   "repository": {
     "type": "git",
@@ -75,7 +77,7 @@
   ],
   "scripts": {
     "clean": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\"",
-    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json",
+    "build": "tsc -p tsconfig.build.json",
     "typecheck": "tsc -p tsconfig.build.json --noEmit"
   }
 }