@molecule/app-danger-zone-react 1.0.0 → 1.0.2

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.
Files changed (2) hide show
  1. package/README.md +192 -0
  2. package/package.json +16 -9
package/README.md ADDED
@@ -0,0 +1,192 @@
1
+ <!--
2
+ AUTO-GENERATED — DO NOT EDIT THIS FILE.
3
+ Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
4
+ Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
5
+ To change this document, edit the module-level JSDoc in src/index.ts.
6
+ Generated: 2026-08-04T01:50:26.098Z
7
+ -->
8
+
9
+ # @molecule/app-danger-zone-react
10
+
11
+ > **Auto-generated, AI-first package reference** for the [molecule.dev](https://molecule.dev) ecosystem.
12
+ > It is written to be read by coding agents as much as by people, and is generated from this
13
+ > package's source — edit `src/index.ts` JSDoc, not this file.
14
+
15
+ React destructive-action primitives.
16
+
17
+ Exports:
18
+
19
+ - `<DangerZoneSection>` — Card with title/description/button for delete/reset/revoke.
20
+ - `<ConfirmDialog>` — standalone "Are you sure?" modal.
21
+
22
+ ## Quick Start
23
+
24
+ ```tsx
25
+ import { ConfirmDialog, DangerZoneSection } from '@molecule/app-danger-zone-react'
26
+
27
+ <DangerZoneSection
28
+ title="Delete account"
29
+ description="This permanently removes your account and all data."
30
+ actionLabel="Delete account"
31
+ onAction={() => setConfirmOpen(true)}
32
+ />
33
+
34
+ <ConfirmDialog
35
+ open={confirmOpen}
36
+ onClose={() => setConfirmOpen(false)}
37
+ title="Delete account?"
38
+ description="This action cannot be undone."
39
+ confirmLabel="Delete"
40
+ onConfirm={handleDelete}
41
+ />
42
+ ```
43
+
44
+ ## Type
45
+
46
+ `feature`
47
+
48
+ ## Installation
49
+
50
+ ```bash
51
+ npm install @molecule/app-danger-zone-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
52
+ npm install -D @types/react
53
+ ```
54
+
55
+ ## API
56
+
57
+ ### Interfaces
58
+
59
+ #### `ConfirmDialogProps`
60
+
61
+ Props for {@link ConfirmDialog}.
62
+
63
+ ```typescript
64
+ interface ConfirmDialogProps {
65
+ /** Whether the dialog is open. */
66
+ open: boolean
67
+ /** Called when the dialog should close (escape, backdrop, cancel). */
68
+ onClose: () => void
69
+ /** Title. */
70
+ title: ReactNode
71
+ /** Body / warning text. */
72
+ description: ReactNode
73
+ /** Confirm-button label (e.g. "Delete"). */
74
+ confirmLabel?: ReactNode
75
+ /** Cancel-button label. */
76
+ cancelLabel?: ReactNode
77
+ /** Called when the user confirms. */
78
+ onConfirm: () => void | Promise<void>
79
+ /** Is the confirm action destructive? Defaults to true. */
80
+ destructive?: boolean
81
+ /** Extra body content between description and footer. */
82
+ children?: ReactNode
83
+ /** Disables both buttons. Set it yourself while your `onConfirm` promise is pending — the dialog does not track it and does not auto-close. */
84
+ loading?: boolean
85
+ }
86
+ ```
87
+
88
+ #### `DangerZoneSectionProps`
89
+
90
+ Props for {@link DangerZoneSection}.
91
+
92
+ ```typescript
93
+ interface DangerZoneSectionProps {
94
+ /** Section title. */
95
+ title: ReactNode
96
+ /** Explanation of the destructive action. */
97
+ description: ReactNode
98
+ /** Label on the action button (e.g. "Delete account"). */
99
+ actionLabel: ReactNode
100
+ /** Called when the button is clicked. */
101
+ onAction: () => void
102
+ /** When true, the button disables and shows a loading label. */
103
+ loading?: boolean
104
+ /** When true, the button is disabled without loading. */
105
+ disabled?: boolean
106
+ /** Additional content between description and button (e.g. a confirm-text input). */
107
+ children?: ReactNode
108
+ /** Extra classes on the Card. */
109
+ className?: string
110
+ /** `data-mol-id` for AI-agent selectors. */
111
+ dataMolId?: string
112
+ }
113
+ ```
114
+
115
+ ### Functions
116
+
117
+ #### `ConfirmDialog(props)`
118
+
119
+ Are-you-sure-style confirmation modal for destructive actions.
120
+
121
+ Use standalone (around delete buttons, revoke tokens, irreversible
122
+ migrations) or wrap DangerZoneSection's action with this dialog.
123
+
124
+ ```typescript
125
+ function ConfirmDialog({
126
+ open,
127
+ onClose,
128
+ title,
129
+ description,
130
+ confirmLabel,
131
+ cancelLabel,
132
+ onConfirm,
133
+ destructive = true,
134
+ children,
135
+ loading,
136
+ }: ConfirmDialogProps): JSX.Element
137
+ ```
138
+
139
+ - `props` — Component props (see {@link ConfirmDialogProps}).
140
+
141
+ #### `DangerZoneSection(props)`
142
+
143
+ Card-wrapped section for destructive actions — delete account,
144
+ reset data, revoke access. Uses the error/danger accent color and
145
+ puts the action on the right.
146
+
147
+ ```typescript
148
+ function DangerZoneSection({
149
+ title,
150
+ description,
151
+ actionLabel,
152
+ onAction,
153
+ loading,
154
+ disabled,
155
+ children,
156
+ className,
157
+ dataMolId,
158
+ }: DangerZoneSectionProps): JSX.Element
159
+ ```
160
+
161
+ - `props` — Component props (see {@link DangerZoneSectionProps}).
162
+
163
+ ## Injection Notes
164
+
165
+ ### Requirements
166
+
167
+ Peer dependencies:
168
+
169
+ - `@molecule/app-react` ^1.0.1
170
+ - `@molecule/app-ui` ^1.0.1
171
+ - `@molecule/app-ui-react` ^1.0.1
172
+ - `react` ^18.0.0 || ^19.0.0
173
+
174
+ ### Runtime Dependencies
175
+
176
+ - `@molecule/app-react`
177
+ - `@molecule/app-ui`
178
+ - `@molecule/app-ui-react`
179
+ - `react`
180
+
181
+ `<ConfirmDialog>` does NOT track `onConfirm`'s promise and does NOT close
182
+ itself on confirm: set `loading` yourself while the action runs, then call
183
+ `onClose()` when it settles — otherwise users can double-fire the
184
+ destructive action or be left staring at an open dialog. Cancel/Confirm
185
+ fall back to the `confirm.*` i18n keys (companion bond:
186
+ `@molecule/app-locales-danger-zone`); pass `confirmLabel`/`cancelLabel`
187
+ for action-specific wording ("Delete", "Revoke"). `destructive` (default
188
+ true) only switches the confirm button color.
189
+
190
+ ## Translations
191
+
192
+ Translation strings are provided by `@molecule/app-locales-danger-zone`.
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@molecule/app-danger-zone-react",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "DangerZoneSection + ConfirmDialog for destructive actions (delete account, reset, revoke)",
5
+ "homepage": "https://www.molecule.dev/packages/app-danger-zone-react",
5
6
  "type": "module",
6
7
  "main": "dist/index.js",
7
8
  "types": "dist/index.d.ts",
@@ -17,7 +18,8 @@
17
18
  }
18
19
  },
19
20
  "files": [
20
- "dist"
21
+ "dist",
22
+ "README.md"
21
23
  ],
22
24
  "keywords": [
23
25
  "molecule",
@@ -25,22 +27,27 @@
25
27
  "react"
26
28
  ],
27
29
  "license": "Apache-2.0",
30
+ "repository": {
31
+ "type": "git",
32
+ "url": "https://github.com/molecule-dev/molecule.git",
33
+ "directory": "packages/app/features/danger-zone-react"
34
+ },
28
35
  "peerDependencies": {
29
- "@molecule/app-react": "^1.0.0",
30
- "@molecule/app-ui": "^1.0.0",
31
- "@molecule/app-ui-react": "^1.0.0",
36
+ "@molecule/app-react": "^1.0.1",
37
+ "@molecule/app-ui": "^1.0.1",
38
+ "@molecule/app-ui-react": "^1.0.1",
32
39
  "react": "^18.0.0 || ^19.0.0"
33
40
  },
34
41
  "devDependencies": {
35
- "@molecule/app-react": "1.0.0",
36
- "@molecule/app-ui": "1.0.0",
37
- "@molecule/app-ui-react": "1.0.0",
42
+ "@molecule/app-react": "1.5.1",
43
+ "@molecule/app-ui": "1.1.1",
44
+ "@molecule/app-ui-react": "1.0.2",
38
45
  "@types/node": "26.1.2",
39
46
  "@types/react": "19.2.17",
40
47
  "@types/react-dom": "19.2.3",
41
48
  "react": "19.2.8",
42
49
  "react-dom": "19.2.8",
43
50
  "typescript": "6.0.3",
44
- "vitest": "4.1.10"
51
+ "vitest": "4.1.11"
45
52
  }
46
53
  }