@actdim/dynstruct-mui 1.5.12 → 1.5.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/INDEX.md +44 -0
- package/docs/topic--architecture.md +39 -0
- package/docs/topic--domain-model.md +56 -0
- package/docs/topic--setup-and-workflow.md +48 -0
- package/package.json +4 -4
package/docs/INDEX.md
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
---
|
|
2
|
+
protocol: along
|
|
3
|
+
protocol_version: "2.2.13"
|
|
4
|
+
slug: INDEX
|
|
5
|
+
title: Knowledge Base Topic Index
|
|
6
|
+
type: index
|
|
7
|
+
created: 2026-09-02
|
|
8
|
+
updated: 2026-09-02
|
|
9
|
+
tags: [index, kb, topics, map]
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
# Knowledge Base Topic Index
|
|
13
|
+
|
|
14
|
+
Central entry point and cross-linked topic catalog for project documentation:
|
|
15
|
+
|
|
16
|
+
## Knowledge Graph & Topic Map
|
|
17
|
+
|
|
18
|
+
```mermaid
|
|
19
|
+
flowchart TD
|
|
20
|
+
INDEX["Knowledge Base (INDEX)"]
|
|
21
|
+
T_ARCHITECTURE["01 Architecture"]
|
|
22
|
+
INDEX --> T_ARCHITECTURE
|
|
23
|
+
T_DOMAIN_MODEL["02 Domain Model"]
|
|
24
|
+
INDEX --> T_DOMAIN_MODEL
|
|
25
|
+
T_SETUP_AND_WORKFLOW["03 Setup And Workflow"]
|
|
26
|
+
INDEX --> T_SETUP_AND_WORKFLOW
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## Articles
|
|
32
|
+
|
|
33
|
+
- **[01 Architecture](./topic--architecture.md)** (topic) `architecture`
|
|
34
|
+
- **[02 Domain Model](./topic--domain-model.md)** (topic) `domain-model`
|
|
35
|
+
- **[03 Setup And Workflow](./topic--setup-and-workflow.md)** (topic) `setup-and-workflow`
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Related Context
|
|
40
|
+
|
|
41
|
+
- [AGENTS.md](../AGENTS.md): Active protocol conventions and rules.
|
|
42
|
+
- [.along/DECISIONS.md](../.along/DECISIONS.md): Architectural Decision Records.
|
|
43
|
+
- [.along/ISSUES.md](../.along/ISSUES.md): Active issue tracking board.
|
|
44
|
+
- [.along/HISTORY.md](../.along/HISTORY.md): Append-only project history log.
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
---
|
|
2
|
+
protocol: along
|
|
3
|
+
protocol_version: "2.2.5"
|
|
4
|
+
slug: architecture
|
|
5
|
+
title: 01 Architecture
|
|
6
|
+
type: topic
|
|
7
|
+
created: 2026-08-27
|
|
8
|
+
updated: 2026-09-02
|
|
9
|
+
tags: [architecture]
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
# @actdim/dynstruct-mui Architecture
|
|
13
|
+
|
|
14
|
+
## 1. System Overview
|
|
15
|
+
|
|
16
|
+
`@actdim/dynstruct-mui` provides Material UI (MUI v5/v6) component adapters specifically engineered for the `@actdim/dynstruct` component system. It bridges Material UI widgets with the dynstruct reactive component model, two-way bindings (`bind`, `bindProp`), and message bus integration.
|
|
17
|
+
|
|
18
|
+
```
|
|
19
|
+
+---------------------------------------------------------------------------------------------------+
|
|
20
|
+
| @actdim/dynstruct-mui |
|
|
21
|
+
+---------------------------------------------------------------------------------------------------+
|
|
22
|
+
| MUI Component Adapters |
|
|
23
|
+
| - Input & Form: TextField, Select, Autocomplete, Checkbox, Switch, RadioGroup, Slider, Rating |
|
|
24
|
+
| - Actions: Button, IconButton, Fab, ToggleButtonGroup, SpeedDial |
|
|
25
|
+
| - Layout & Containers: Card, Accordion, Dialog, Drawer, Menu, List, Table, Tabs, Stepper |
|
|
26
|
+
| - Feedback & Display: Alert, Snackbar, CircularProgress, LinearProgress, Skeleton, Badge, Avatar|
|
|
27
|
+
| - Navigation: Breadcrumbs, Pagination, Tooltip |
|
|
28
|
+
+---------------------------------------------------------------------------------------------------+
|
|
29
|
+
| Dynstruct Integration Layer |
|
|
30
|
+
| - Hook-Constructors: useButton, useTextField, useDialog, useSelect, etc. |
|
|
31
|
+
| - Two-way Data Binding: Seamless connection with bind(() => m.field, v => m.field = v) |
|
|
32
|
+
| - React Exports: Standard toReact() wrappers for direct JSX usage |
|
|
33
|
+
+---------------------------------------------------------------------------------------------------+
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## 2. Cross-Links
|
|
37
|
+
- [[INDEX.md]] - Knowledge Base Root
|
|
38
|
+
- [[02-domain-model.md]] - Domain Model & Component Catalog
|
|
39
|
+
- [[03-setup-and-workflow.md]] - Setup, Build & Storybook Workflow
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
---
|
|
2
|
+
protocol: along
|
|
3
|
+
protocol_version: "2.2.5"
|
|
4
|
+
slug: domain-model
|
|
5
|
+
title: 02 Domain Model
|
|
6
|
+
type: topic
|
|
7
|
+
created: 2026-08-27
|
|
8
|
+
updated: 2026-09-02
|
|
9
|
+
tags: [domain-model]
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
# @actdim/dynstruct-mui Domain Model & Component Catalog
|
|
13
|
+
|
|
14
|
+
## 1. Domain Overview
|
|
15
|
+
|
|
16
|
+
`@actdim/dynstruct-mui` exposes typed component structures and hook-constructors wrapping `@mui/material` components.
|
|
17
|
+
|
|
18
|
+
## 2. Component Catalog
|
|
19
|
+
|
|
20
|
+
### 2.1. Form & Input Components
|
|
21
|
+
- **`useTextField` / `TextField`**: Material UI text field with label, helperText, error state, and two-way string binding.
|
|
22
|
+
- **`useSelect` / `Select`**: Select dropdown supporting single and multi-selection with options mapping.
|
|
23
|
+
- **`useAutocomplete` / `Autocomplete`**: Searchable combobox and autocomplete input.
|
|
24
|
+
- **`useCheckbox` / `Checkbox`**: Boolean checkbox toggle with label.
|
|
25
|
+
- **`useSwitch` / `Switch`**: On/off toggle switch.
|
|
26
|
+
- **`useRadioGroup` / `RadioGroup`**: Radio button selection group.
|
|
27
|
+
- **`useSlider` / `Slider`**: Continuous or discrete numeric slider.
|
|
28
|
+
- **`useRating` / `Rating`**: Star rating input widget.
|
|
29
|
+
|
|
30
|
+
### 2.2. Actions & Buttons
|
|
31
|
+
- **`useButton` / `Button`**: Primary, secondary, text, and contained button variants with click handlers.
|
|
32
|
+
- **`useIconButton` / `IconButton`**: Icon-only button wrapper.
|
|
33
|
+
- **`useFab` / `Fab`**: Floating Action Button.
|
|
34
|
+
- **`useToggleButtonGroup` / `ToggleButtonGroup`**: Segmented button group.
|
|
35
|
+
- **`useSpeedDial` / `SpeedDial`**: Expandable floating action speed dial.
|
|
36
|
+
|
|
37
|
+
### 2.3. Dialogs, Drawers & Layouts
|
|
38
|
+
- **`useDialog` / `Dialog`**: Modal dialog with title, content, actions, and open/close state.
|
|
39
|
+
- **`useDrawer` / `Drawer`**: Side sliding drawer container.
|
|
40
|
+
- **`useCard` / `Card`**: Container card with header, media, content, and action sections.
|
|
41
|
+
- **`useAccordion` / `Accordion`**: Expandable panel accordion.
|
|
42
|
+
- **`useTable` / `Table`**: Data table with sorting and pagination headers.
|
|
43
|
+
- **`useTabs` / `Tabs`**: Tab navigation bar.
|
|
44
|
+
- **`useStepper` / `Stepper`**: Multi-step wizard navigation.
|
|
45
|
+
|
|
46
|
+
### 2.4. Feedback & Indicators
|
|
47
|
+
- **`useAlert` / `Alert`**: Severity banner (`error`, `warning`, `info`, `success`).
|
|
48
|
+
- **`useSnackbar` / `Snackbar`**: Floating toast notification with auto-hide duration.
|
|
49
|
+
- **`useCircularProgress` / `CircularProgress`** & **`useLinearProgress` / `LinearProgress`**: Loading spinners.
|
|
50
|
+
- **`useSkeleton` / `Skeleton`**: Content placeholder loading skeleton.
|
|
51
|
+
- **`useTooltip` / `Tooltip`**: Hover tooltip popup.
|
|
52
|
+
|
|
53
|
+
## 3. Cross-Links
|
|
54
|
+
- [[INDEX.md]] - Knowledge Base Root
|
|
55
|
+
- [[01-architecture.md]] - System Architecture
|
|
56
|
+
- [[03-setup-and-workflow.md]] - Setup, Build & Storybook Workflow
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
---
|
|
2
|
+
protocol: along
|
|
3
|
+
protocol_version: "2.2.5"
|
|
4
|
+
slug: setup-and-workflow
|
|
5
|
+
title: 03 Setup And Workflow
|
|
6
|
+
type: topic
|
|
7
|
+
created: 2026-08-27
|
|
8
|
+
updated: 2026-09-02
|
|
9
|
+
tags: [setup-and-workflow]
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
# @actdim/dynstruct-mui Setup, Build & Storybook Workflow
|
|
13
|
+
|
|
14
|
+
## 1. Prerequisites & Installation
|
|
15
|
+
|
|
16
|
+
- **Node.js**: >= 20.0.0
|
|
17
|
+
- **Package Manager**: `pnpm` (version ~10.21.0)
|
|
18
|
+
- **TypeScript**: >= 5.9.3
|
|
19
|
+
|
|
20
|
+
Install dependencies:
|
|
21
|
+
```bash
|
|
22
|
+
pnpm install
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Peer Dependencies
|
|
26
|
+
```bash
|
|
27
|
+
pnpm add @actdim/dynstruct @actdim/msgmesh @actdim/utico @mui/material @emotion/react @emotion/styled react react-dom mobx mobx-react-lite
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## 2. Scripts & Workflows
|
|
31
|
+
|
|
32
|
+
| Command | Action | Description |
|
|
33
|
+
|---|---|---|
|
|
34
|
+
| `pnpm run build` | `tsc -b tsconfig.json && vite build` | Compiles ESM packages with `.d.ts` declaration maps |
|
|
35
|
+
| `pnpm run storybook` | `storybook dev -p 6006` | Launches Storybook with all Material UI component stories |
|
|
36
|
+
| `pnpm run build-storybook` | `storybook build` | Builds static Storybook bundle |
|
|
37
|
+
| `pnpm run test` | `npx vitest --config=vitest.node.config.ts --no-cache` | Runs unit tests |
|
|
38
|
+
| `pnpm run typecheck` | `tsc -b tsconfig.json` | Runs strict TypeScript verification |
|
|
39
|
+
| `pnpm run lint` | `eslint "./**/*.{ts,tsx}"` | Lints codebase |
|
|
40
|
+
| `pnpm run format` | `prettier --write .` | Formats all files |
|
|
41
|
+
|
|
42
|
+
## 3. Storybook Catalog (`src/_stories/`)
|
|
43
|
+
Interactive stories exist for every wrapped Material UI component: `Button.stories.tsx`, `Dialog.stories.tsx`, `TextField.stories.tsx`, `Select.stories.tsx`, `Card.stories.tsx`, `Accordion.stories.tsx`, `Table.stories.tsx`, `Tabs.stories.tsx`, etc.
|
|
44
|
+
|
|
45
|
+
## 4. Cross-Links
|
|
46
|
+
- [[INDEX.md]] - Knowledge Base Root
|
|
47
|
+
- [[01-architecture.md]] - Architecture
|
|
48
|
+
- [[02-domain-model.md]] - Domain Model
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@actdim/dynstruct-mui",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.13",
|
|
4
4
|
"description": "MUI component wrappers for @actdim/dynstruct",
|
|
5
5
|
"author": "Pavel Borodaev",
|
|
6
6
|
"license": "MIT",
|
|
@@ -68,9 +68,9 @@
|
|
|
68
68
|
"react-router-dom": ">=7.9.4",
|
|
69
69
|
"rxjs": ">=7.8.2",
|
|
70
70
|
"uuid": ">=13.0.0",
|
|
71
|
-
"@actdim/dynstruct": "1.5.
|
|
72
|
-
"@actdim/msgmesh": "1.5.
|
|
73
|
-
"@actdim/utico": "1.5.
|
|
71
|
+
"@actdim/dynstruct": "1.5.13",
|
|
72
|
+
"@actdim/msgmesh": "1.5.13",
|
|
73
|
+
"@actdim/utico": "1.5.13"
|
|
74
74
|
},
|
|
75
75
|
"devDependencies": {
|
|
76
76
|
"@faker-js/faker": "^10.4.0",
|