@btst/stack 1.1.3 → 1.1.5
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/dist/node_modules/.pnpm/@radix-ui_react-alert-dialog@1.1.15_@types_react-dom@19.2.2_@types_react@19.2.2__@types_ec789942cd38340bd7362c09e7d34384/node_modules/@radix-ui/react-alert-dialog/dist/index.cjs +182 -0
- package/dist/node_modules/.pnpm/@radix-ui_react-alert-dialog@1.1.15_@types_react-dom@19.2.2_@types_react@19.2.2__@types_ec789942cd38340bd7362c09e7d34384/node_modules/@radix-ui/react-alert-dialog/dist/index.mjs +149 -0
- package/dist/packages/better-stack/src/plugins/blog/client/components/forms/post-forms.cjs +64 -14
- package/dist/packages/better-stack/src/plugins/blog/client/components/forms/post-forms.mjs +66 -16
- package/dist/packages/better-stack/src/plugins/blog/client/components/pages/edit-post-page.internal.cjs +5 -1
- package/dist/packages/better-stack/src/plugins/blog/client/components/pages/edit-post-page.internal.mjs +5 -1
- package/dist/packages/better-stack/src/plugins/blog/client/hooks/blog-hooks.cjs +31 -0
- package/dist/packages/better-stack/src/plugins/blog/client/hooks/blog-hooks.mjs +31 -1
- package/dist/packages/better-stack/src/plugins/blog/client/localization/blog-forms.cjs +8 -0
- package/dist/packages/better-stack/src/plugins/blog/client/localization/blog-forms.mjs +8 -0
- package/dist/packages/ui/src/components/alert-dialog.cjs +149 -0
- package/dist/packages/ui/src/components/alert-dialog.mjs +137 -0
- package/dist/plugins/blog/client/hooks/index.cjs +1 -0
- package/dist/plugins/blog/client/hooks/index.d.cts +7 -1
- package/dist/plugins/blog/client/hooks/index.d.mts +7 -1
- package/dist/plugins/blog/client/hooks/index.d.ts +7 -1
- package/dist/plugins/blog/client/hooks/index.mjs +1 -1
- package/dist/plugins/blog/client/index.d.cts +8 -1
- package/dist/plugins/blog/client/index.d.mts +8 -1
- package/dist/plugins/blog/client/index.d.ts +8 -1
- package/dist/plugins/client/index.d.cts +5 -9
- package/dist/plugins/client/index.d.mts +5 -9
- package/dist/plugins/client/index.d.ts +5 -9
- package/package.json +1 -1
- package/src/plugins/blog/client/components/forms/post-forms.tsx +92 -14
- package/src/plugins/blog/client/components/pages/edit-post-page.internal.tsx +6 -0
- package/src/plugins/blog/client/hooks/blog-hooks.tsx +38 -0
- package/src/plugins/blog/client/localization/blog-forms.ts +10 -0
- package/src/plugins/client/index.ts +10 -16
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
const React = require('react');
|
|
5
|
+
const index$1 = require('../../../../../@radix-ui_react-context@1.1.2_@types_react@19.2.2_react@19.2.0/node_modules/@radix-ui/react-context/dist/index.cjs');
|
|
6
|
+
const index = require('../../../../../@radix-ui_react-compose-refs@1.1.2_@types_react@19.2.2_react@19.2.0/node_modules/@radix-ui/react-compose-refs/dist/index.cjs');
|
|
7
|
+
const DialogPrimitive = require('@radix-ui/react-dialog');
|
|
8
|
+
const index$2 = require('../../../../../@radix-ui_primitive@1.1.3/node_modules/@radix-ui/primitive/dist/index.cjs');
|
|
9
|
+
const reactSlot = require('@radix-ui/react-slot');
|
|
10
|
+
const jsxRuntime = require('react/jsx-runtime');
|
|
11
|
+
|
|
12
|
+
function _interopNamespaceCompat(e) {
|
|
13
|
+
if (e && typeof e === 'object' && 'default' in e) return e;
|
|
14
|
+
const n = Object.create(null);
|
|
15
|
+
if (e) {
|
|
16
|
+
for (const k in e) {
|
|
17
|
+
n[k] = e[k];
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
n.default = e;
|
|
21
|
+
return n;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
|
|
25
|
+
const DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceCompat(DialogPrimitive);
|
|
26
|
+
|
|
27
|
+
var ROOT_NAME = "AlertDialog";
|
|
28
|
+
var [createAlertDialogContext] = index$1.createContextScope(ROOT_NAME, [
|
|
29
|
+
DialogPrimitive.createDialogScope
|
|
30
|
+
]);
|
|
31
|
+
var useDialogScope = DialogPrimitive.createDialogScope();
|
|
32
|
+
var AlertDialog = (props) => {
|
|
33
|
+
const { __scopeAlertDialog, ...alertDialogProps } = props;
|
|
34
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
35
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...dialogScope, ...alertDialogProps, modal: true });
|
|
36
|
+
};
|
|
37
|
+
AlertDialog.displayName = ROOT_NAME;
|
|
38
|
+
var TRIGGER_NAME = "AlertDialogTrigger";
|
|
39
|
+
var AlertDialogTrigger = React__namespace.forwardRef(
|
|
40
|
+
(props, forwardedRef) => {
|
|
41
|
+
const { __scopeAlertDialog, ...triggerProps } = props;
|
|
42
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
43
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { ...dialogScope, ...triggerProps, ref: forwardedRef });
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
AlertDialogTrigger.displayName = TRIGGER_NAME;
|
|
47
|
+
var PORTAL_NAME = "AlertDialogPortal";
|
|
48
|
+
var AlertDialogPortal = (props) => {
|
|
49
|
+
const { __scopeAlertDialog, ...portalProps } = props;
|
|
50
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
51
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { ...dialogScope, ...portalProps });
|
|
52
|
+
};
|
|
53
|
+
AlertDialogPortal.displayName = PORTAL_NAME;
|
|
54
|
+
var OVERLAY_NAME = "AlertDialogOverlay";
|
|
55
|
+
var AlertDialogOverlay = React__namespace.forwardRef(
|
|
56
|
+
(props, forwardedRef) => {
|
|
57
|
+
const { __scopeAlertDialog, ...overlayProps } = props;
|
|
58
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
59
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { ...dialogScope, ...overlayProps, ref: forwardedRef });
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
AlertDialogOverlay.displayName = OVERLAY_NAME;
|
|
63
|
+
var CONTENT_NAME = "AlertDialogContent";
|
|
64
|
+
var [AlertDialogContentProvider, useAlertDialogContentContext] = createAlertDialogContext(CONTENT_NAME);
|
|
65
|
+
var Slottable = reactSlot.createSlottable("AlertDialogContent");
|
|
66
|
+
var AlertDialogContent = React__namespace.forwardRef(
|
|
67
|
+
(props, forwardedRef) => {
|
|
68
|
+
const { __scopeAlertDialog, children, ...contentProps } = props;
|
|
69
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
70
|
+
const contentRef = React__namespace.useRef(null);
|
|
71
|
+
const composedRefs = index.useComposedRefs(forwardedRef, contentRef);
|
|
72
|
+
const cancelRef = React__namespace.useRef(null);
|
|
73
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
74
|
+
DialogPrimitive__namespace.WarningProvider,
|
|
75
|
+
{
|
|
76
|
+
contentName: CONTENT_NAME,
|
|
77
|
+
titleName: TITLE_NAME,
|
|
78
|
+
docsSlug: "alert-dialog",
|
|
79
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(AlertDialogContentProvider, { scope: __scopeAlertDialog, cancelRef, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
80
|
+
DialogPrimitive__namespace.Content,
|
|
81
|
+
{
|
|
82
|
+
role: "alertdialog",
|
|
83
|
+
...dialogScope,
|
|
84
|
+
...contentProps,
|
|
85
|
+
ref: composedRefs,
|
|
86
|
+
onOpenAutoFocus: index$2.composeEventHandlers(contentProps.onOpenAutoFocus, (event) => {
|
|
87
|
+
event.preventDefault();
|
|
88
|
+
cancelRef.current?.focus({ preventScroll: true });
|
|
89
|
+
}),
|
|
90
|
+
onPointerDownOutside: (event) => event.preventDefault(),
|
|
91
|
+
onInteractOutside: (event) => event.preventDefault(),
|
|
92
|
+
children: [
|
|
93
|
+
/* @__PURE__ */ jsxRuntime.jsx(Slottable, { children }),
|
|
94
|
+
/* @__PURE__ */ jsxRuntime.jsx(DescriptionWarning, { contentRef })
|
|
95
|
+
]
|
|
96
|
+
}
|
|
97
|
+
) })
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
AlertDialogContent.displayName = CONTENT_NAME;
|
|
103
|
+
var TITLE_NAME = "AlertDialogTitle";
|
|
104
|
+
var AlertDialogTitle = React__namespace.forwardRef(
|
|
105
|
+
(props, forwardedRef) => {
|
|
106
|
+
const { __scopeAlertDialog, ...titleProps } = props;
|
|
107
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
108
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { ...dialogScope, ...titleProps, ref: forwardedRef });
|
|
109
|
+
}
|
|
110
|
+
);
|
|
111
|
+
AlertDialogTitle.displayName = TITLE_NAME;
|
|
112
|
+
var DESCRIPTION_NAME = "AlertDialogDescription";
|
|
113
|
+
var AlertDialogDescription = React__namespace.forwardRef((props, forwardedRef) => {
|
|
114
|
+
const { __scopeAlertDialog, ...descriptionProps } = props;
|
|
115
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
116
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ...dialogScope, ...descriptionProps, ref: forwardedRef });
|
|
117
|
+
});
|
|
118
|
+
AlertDialogDescription.displayName = DESCRIPTION_NAME;
|
|
119
|
+
var ACTION_NAME = "AlertDialogAction";
|
|
120
|
+
var AlertDialogAction = React__namespace.forwardRef(
|
|
121
|
+
(props, forwardedRef) => {
|
|
122
|
+
const { __scopeAlertDialog, ...actionProps } = props;
|
|
123
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
124
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { ...dialogScope, ...actionProps, ref: forwardedRef });
|
|
125
|
+
}
|
|
126
|
+
);
|
|
127
|
+
AlertDialogAction.displayName = ACTION_NAME;
|
|
128
|
+
var CANCEL_NAME = "AlertDialogCancel";
|
|
129
|
+
var AlertDialogCancel = React__namespace.forwardRef(
|
|
130
|
+
(props, forwardedRef) => {
|
|
131
|
+
const { __scopeAlertDialog, ...cancelProps } = props;
|
|
132
|
+
const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);
|
|
133
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
134
|
+
const ref = index.useComposedRefs(forwardedRef, cancelRef);
|
|
135
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { ...dialogScope, ...cancelProps, ref });
|
|
136
|
+
}
|
|
137
|
+
);
|
|
138
|
+
AlertDialogCancel.displayName = CANCEL_NAME;
|
|
139
|
+
var DescriptionWarning = ({ contentRef }) => {
|
|
140
|
+
const MESSAGE = `\`${CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.
|
|
141
|
+
|
|
142
|
+
You can add a description to the \`${CONTENT_NAME}\` by passing a \`${DESCRIPTION_NAME}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
|
|
143
|
+
|
|
144
|
+
Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${CONTENT_NAME}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
|
|
145
|
+
|
|
146
|
+
For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
|
|
147
|
+
React__namespace.useEffect(() => {
|
|
148
|
+
const hasDescription = document.getElementById(
|
|
149
|
+
contentRef.current?.getAttribute("aria-describedby")
|
|
150
|
+
);
|
|
151
|
+
if (!hasDescription) console.warn(MESSAGE);
|
|
152
|
+
}, [MESSAGE, contentRef]);
|
|
153
|
+
return null;
|
|
154
|
+
};
|
|
155
|
+
var Root2 = AlertDialog;
|
|
156
|
+
var Trigger2 = AlertDialogTrigger;
|
|
157
|
+
var Portal2 = AlertDialogPortal;
|
|
158
|
+
var Overlay2 = AlertDialogOverlay;
|
|
159
|
+
var Content2 = AlertDialogContent;
|
|
160
|
+
var Action = AlertDialogAction;
|
|
161
|
+
var Cancel = AlertDialogCancel;
|
|
162
|
+
var Title2 = AlertDialogTitle;
|
|
163
|
+
var Description2 = AlertDialogDescription;
|
|
164
|
+
|
|
165
|
+
exports.Action = Action;
|
|
166
|
+
exports.AlertDialog = AlertDialog;
|
|
167
|
+
exports.AlertDialogAction = AlertDialogAction;
|
|
168
|
+
exports.AlertDialogCancel = AlertDialogCancel;
|
|
169
|
+
exports.AlertDialogContent = AlertDialogContent;
|
|
170
|
+
exports.AlertDialogDescription = AlertDialogDescription;
|
|
171
|
+
exports.AlertDialogOverlay = AlertDialogOverlay;
|
|
172
|
+
exports.AlertDialogPortal = AlertDialogPortal;
|
|
173
|
+
exports.AlertDialogTitle = AlertDialogTitle;
|
|
174
|
+
exports.AlertDialogTrigger = AlertDialogTrigger;
|
|
175
|
+
exports.Cancel = Cancel;
|
|
176
|
+
exports.Content = Content2;
|
|
177
|
+
exports.Description = Description2;
|
|
178
|
+
exports.Overlay = Overlay2;
|
|
179
|
+
exports.Portal = Portal2;
|
|
180
|
+
exports.Root = Root2;
|
|
181
|
+
exports.Title = Title2;
|
|
182
|
+
exports.Trigger = Trigger2;
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { createContextScope } from '../../../../../@radix-ui_react-context@1.1.2_@types_react@19.2.2_react@19.2.0/node_modules/@radix-ui/react-context/dist/index.mjs';
|
|
4
|
+
import { useComposedRefs } from '../../../../../@radix-ui_react-compose-refs@1.1.2_@types_react@19.2.2_react@19.2.0/node_modules/@radix-ui/react-compose-refs/dist/index.mjs';
|
|
5
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
6
|
+
import { createDialogScope } from '@radix-ui/react-dialog';
|
|
7
|
+
import { composeEventHandlers } from '../../../../../@radix-ui_primitive@1.1.3/node_modules/@radix-ui/primitive/dist/index.mjs';
|
|
8
|
+
import { createSlottable } from '@radix-ui/react-slot';
|
|
9
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
10
|
+
|
|
11
|
+
var ROOT_NAME = "AlertDialog";
|
|
12
|
+
var [createAlertDialogContext] = createContextScope(ROOT_NAME, [
|
|
13
|
+
createDialogScope
|
|
14
|
+
]);
|
|
15
|
+
var useDialogScope = createDialogScope();
|
|
16
|
+
var AlertDialog = (props) => {
|
|
17
|
+
const { __scopeAlertDialog, ...alertDialogProps } = props;
|
|
18
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
19
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...dialogScope, ...alertDialogProps, modal: true });
|
|
20
|
+
};
|
|
21
|
+
AlertDialog.displayName = ROOT_NAME;
|
|
22
|
+
var TRIGGER_NAME = "AlertDialogTrigger";
|
|
23
|
+
var AlertDialogTrigger = React.forwardRef(
|
|
24
|
+
(props, forwardedRef) => {
|
|
25
|
+
const { __scopeAlertDialog, ...triggerProps } = props;
|
|
26
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
27
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ...dialogScope, ...triggerProps, ref: forwardedRef });
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
AlertDialogTrigger.displayName = TRIGGER_NAME;
|
|
31
|
+
var PORTAL_NAME = "AlertDialogPortal";
|
|
32
|
+
var AlertDialogPortal = (props) => {
|
|
33
|
+
const { __scopeAlertDialog, ...portalProps } = props;
|
|
34
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
35
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { ...dialogScope, ...portalProps });
|
|
36
|
+
};
|
|
37
|
+
AlertDialogPortal.displayName = PORTAL_NAME;
|
|
38
|
+
var OVERLAY_NAME = "AlertDialogOverlay";
|
|
39
|
+
var AlertDialogOverlay = React.forwardRef(
|
|
40
|
+
(props, forwardedRef) => {
|
|
41
|
+
const { __scopeAlertDialog, ...overlayProps } = props;
|
|
42
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
43
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { ...dialogScope, ...overlayProps, ref: forwardedRef });
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
AlertDialogOverlay.displayName = OVERLAY_NAME;
|
|
47
|
+
var CONTENT_NAME = "AlertDialogContent";
|
|
48
|
+
var [AlertDialogContentProvider, useAlertDialogContentContext] = createAlertDialogContext(CONTENT_NAME);
|
|
49
|
+
var Slottable = createSlottable("AlertDialogContent");
|
|
50
|
+
var AlertDialogContent = React.forwardRef(
|
|
51
|
+
(props, forwardedRef) => {
|
|
52
|
+
const { __scopeAlertDialog, children, ...contentProps } = props;
|
|
53
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
54
|
+
const contentRef = React.useRef(null);
|
|
55
|
+
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
56
|
+
const cancelRef = React.useRef(null);
|
|
57
|
+
return /* @__PURE__ */ jsx(
|
|
58
|
+
DialogPrimitive.WarningProvider,
|
|
59
|
+
{
|
|
60
|
+
contentName: CONTENT_NAME,
|
|
61
|
+
titleName: TITLE_NAME,
|
|
62
|
+
docsSlug: "alert-dialog",
|
|
63
|
+
children: /* @__PURE__ */ jsx(AlertDialogContentProvider, { scope: __scopeAlertDialog, cancelRef, children: /* @__PURE__ */ jsxs(
|
|
64
|
+
DialogPrimitive.Content,
|
|
65
|
+
{
|
|
66
|
+
role: "alertdialog",
|
|
67
|
+
...dialogScope,
|
|
68
|
+
...contentProps,
|
|
69
|
+
ref: composedRefs,
|
|
70
|
+
onOpenAutoFocus: composeEventHandlers(contentProps.onOpenAutoFocus, (event) => {
|
|
71
|
+
event.preventDefault();
|
|
72
|
+
cancelRef.current?.focus({ preventScroll: true });
|
|
73
|
+
}),
|
|
74
|
+
onPointerDownOutside: (event) => event.preventDefault(),
|
|
75
|
+
onInteractOutside: (event) => event.preventDefault(),
|
|
76
|
+
children: [
|
|
77
|
+
/* @__PURE__ */ jsx(Slottable, { children }),
|
|
78
|
+
/* @__PURE__ */ jsx(DescriptionWarning, { contentRef })
|
|
79
|
+
]
|
|
80
|
+
}
|
|
81
|
+
) })
|
|
82
|
+
}
|
|
83
|
+
);
|
|
84
|
+
}
|
|
85
|
+
);
|
|
86
|
+
AlertDialogContent.displayName = CONTENT_NAME;
|
|
87
|
+
var TITLE_NAME = "AlertDialogTitle";
|
|
88
|
+
var AlertDialogTitle = React.forwardRef(
|
|
89
|
+
(props, forwardedRef) => {
|
|
90
|
+
const { __scopeAlertDialog, ...titleProps } = props;
|
|
91
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
92
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Title, { ...dialogScope, ...titleProps, ref: forwardedRef });
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
AlertDialogTitle.displayName = TITLE_NAME;
|
|
96
|
+
var DESCRIPTION_NAME = "AlertDialogDescription";
|
|
97
|
+
var AlertDialogDescription = React.forwardRef((props, forwardedRef) => {
|
|
98
|
+
const { __scopeAlertDialog, ...descriptionProps } = props;
|
|
99
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
100
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Description, { ...dialogScope, ...descriptionProps, ref: forwardedRef });
|
|
101
|
+
});
|
|
102
|
+
AlertDialogDescription.displayName = DESCRIPTION_NAME;
|
|
103
|
+
var ACTION_NAME = "AlertDialogAction";
|
|
104
|
+
var AlertDialogAction = React.forwardRef(
|
|
105
|
+
(props, forwardedRef) => {
|
|
106
|
+
const { __scopeAlertDialog, ...actionProps } = props;
|
|
107
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
108
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Close, { ...dialogScope, ...actionProps, ref: forwardedRef });
|
|
109
|
+
}
|
|
110
|
+
);
|
|
111
|
+
AlertDialogAction.displayName = ACTION_NAME;
|
|
112
|
+
var CANCEL_NAME = "AlertDialogCancel";
|
|
113
|
+
var AlertDialogCancel = React.forwardRef(
|
|
114
|
+
(props, forwardedRef) => {
|
|
115
|
+
const { __scopeAlertDialog, ...cancelProps } = props;
|
|
116
|
+
const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);
|
|
117
|
+
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
118
|
+
const ref = useComposedRefs(forwardedRef, cancelRef);
|
|
119
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Close, { ...dialogScope, ...cancelProps, ref });
|
|
120
|
+
}
|
|
121
|
+
);
|
|
122
|
+
AlertDialogCancel.displayName = CANCEL_NAME;
|
|
123
|
+
var DescriptionWarning = ({ contentRef }) => {
|
|
124
|
+
const MESSAGE = `\`${CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.
|
|
125
|
+
|
|
126
|
+
You can add a description to the \`${CONTENT_NAME}\` by passing a \`${DESCRIPTION_NAME}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
|
|
127
|
+
|
|
128
|
+
Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${CONTENT_NAME}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
|
|
129
|
+
|
|
130
|
+
For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
|
|
131
|
+
React.useEffect(() => {
|
|
132
|
+
const hasDescription = document.getElementById(
|
|
133
|
+
contentRef.current?.getAttribute("aria-describedby")
|
|
134
|
+
);
|
|
135
|
+
if (!hasDescription) console.warn(MESSAGE);
|
|
136
|
+
}, [MESSAGE, contentRef]);
|
|
137
|
+
return null;
|
|
138
|
+
};
|
|
139
|
+
var Root2 = AlertDialog;
|
|
140
|
+
var Trigger2 = AlertDialogTrigger;
|
|
141
|
+
var Portal2 = AlertDialogPortal;
|
|
142
|
+
var Overlay2 = AlertDialogOverlay;
|
|
143
|
+
var Content2 = AlertDialogContent;
|
|
144
|
+
var Action = AlertDialogAction;
|
|
145
|
+
var Cancel = AlertDialogCancel;
|
|
146
|
+
var Title2 = AlertDialogTitle;
|
|
147
|
+
var Description2 = AlertDialogDescription;
|
|
148
|
+
|
|
149
|
+
export { Action, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Cancel, Content2 as Content, Description2 as Description, Overlay2 as Overlay, Portal2 as Portal, Root2 as Root, Title2 as Title, Trigger2 as Trigger };
|
|
@@ -10,6 +10,7 @@ const _switch = require('../../../../../../../ui/src/components/switch.cjs');
|
|
|
10
10
|
const textarea = require('../../../../../../../ui/src/components/textarea.cjs');
|
|
11
11
|
const blogHooks = require('../../hooks/blog-hooks.cjs');
|
|
12
12
|
const utils = require('../../../utils.cjs');
|
|
13
|
+
const alertDialog = require('../../../../../../../ui/src/components/alert-dialog.cjs');
|
|
13
14
|
const zod = require('@hookform/resolvers/zod');
|
|
14
15
|
const lucideReact = require('lucide-react');
|
|
15
16
|
const React = require('react');
|
|
@@ -307,14 +308,17 @@ const editPostFormPropsAreEqual = (prevProps, nextProps) => {
|
|
|
307
308
|
if (prevProps.postSlug !== nextProps.postSlug) return false;
|
|
308
309
|
if (prevProps.onClose !== nextProps.onClose) return false;
|
|
309
310
|
if (prevProps.onSuccess !== nextProps.onSuccess) return false;
|
|
311
|
+
if (prevProps.onDelete !== nextProps.onDelete) return false;
|
|
310
312
|
return true;
|
|
311
313
|
};
|
|
312
314
|
const EditPostFormComponent = ({
|
|
313
315
|
postSlug,
|
|
314
316
|
onClose,
|
|
315
|
-
onSuccess
|
|
317
|
+
onSuccess,
|
|
318
|
+
onDelete
|
|
316
319
|
}) => {
|
|
317
320
|
const [featuredImageUploading, setFeaturedImageUploading] = React.useState(false);
|
|
321
|
+
const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
|
|
318
322
|
const { localization } = context.usePluginOverrides("blog", {
|
|
319
323
|
localization: index.BLOG_LOCALIZATION
|
|
320
324
|
});
|
|
@@ -341,6 +345,7 @@ const EditPostFormComponent = ({
|
|
|
341
345
|
isPending: isUpdatingPost,
|
|
342
346
|
error: updatePostError
|
|
343
347
|
} = blogHooks.useUpdatePost();
|
|
348
|
+
const { mutateAsync: deletePost, isPending: isDeletingPost } = blogHooks.useDeletePost();
|
|
344
349
|
const onSubmit = async (data) => {
|
|
345
350
|
const updatedPost = await updatePost({
|
|
346
351
|
id: post.id,
|
|
@@ -362,6 +367,17 @@ const EditPostFormComponent = ({
|
|
|
362
367
|
published: updatedPost?.published ?? false
|
|
363
368
|
});
|
|
364
369
|
};
|
|
370
|
+
const handleDelete = async () => {
|
|
371
|
+
if (!post?.id) return;
|
|
372
|
+
await deletePost({ id: post.id });
|
|
373
|
+
sonner.toast.success(localization.BLOG_FORMS_TOAST_DELETE_SUCCESS);
|
|
374
|
+
setDeleteDialogOpen(false);
|
|
375
|
+
if (onDelete) {
|
|
376
|
+
onDelete();
|
|
377
|
+
} else {
|
|
378
|
+
onClose();
|
|
379
|
+
}
|
|
380
|
+
};
|
|
365
381
|
const form = reactHookForm.useForm({
|
|
366
382
|
resolver: zod.zodResolver(schema),
|
|
367
383
|
defaultValues: {
|
|
@@ -378,19 +394,53 @@ const EditPostFormComponent = ({
|
|
|
378
394
|
if (!post) {
|
|
379
395
|
return /* @__PURE__ */ jsxRuntime.jsx(emptyList.EmptyList, { message: localization.BLOG_PAGE_NOT_FOUND_DESCRIPTION });
|
|
380
396
|
}
|
|
381
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
397
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
398
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
399
|
+
PostFormBody,
|
|
400
|
+
{
|
|
401
|
+
form,
|
|
402
|
+
onSubmit,
|
|
403
|
+
submitLabel: isUpdatingPost ? localization.BLOG_FORMS_SUBMIT_UPDATE_PENDING : localization.BLOG_FORMS_SUBMIT_UPDATE_IDLE,
|
|
404
|
+
onCancel: onClose,
|
|
405
|
+
disabled: isUpdatingPost || featuredImageUploading,
|
|
406
|
+
errorMessage: updatePostError?.message,
|
|
407
|
+
setFeaturedImageUploading,
|
|
408
|
+
initialSlugTouched: !!post?.slug
|
|
409
|
+
}
|
|
410
|
+
),
|
|
411
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialog, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: [
|
|
412
|
+
/* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
413
|
+
button.Button,
|
|
414
|
+
{
|
|
415
|
+
variant: "destructive",
|
|
416
|
+
type: "button",
|
|
417
|
+
disabled: isUpdatingPost || featuredImageUploading || isDeletingPost,
|
|
418
|
+
className: "mt-4",
|
|
419
|
+
children: localization.BLOG_FORMS_DELETE_BUTTON
|
|
420
|
+
}
|
|
421
|
+
) }),
|
|
422
|
+
/* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogContent, { children: [
|
|
423
|
+
/* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogHeader, { children: [
|
|
424
|
+
/* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: localization.BLOG_FORMS_DELETE_DIALOG_TITLE }),
|
|
425
|
+
/* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: localization.BLOG_FORMS_DELETE_DIALOG_DESCRIPTION })
|
|
426
|
+
] }),
|
|
427
|
+
/* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
|
|
428
|
+
/* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { disabled: isDeletingPost, children: localization.BLOG_FORMS_DELETE_DIALOG_CANCEL }),
|
|
429
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
430
|
+
alertDialog.AlertDialogAction,
|
|
431
|
+
{
|
|
432
|
+
onClick: (e) => {
|
|
433
|
+
e.preventDefault();
|
|
434
|
+
void handleDelete();
|
|
435
|
+
},
|
|
436
|
+
disabled: isDeletingPost,
|
|
437
|
+
children: isDeletingPost ? localization.BLOG_FORMS_DELETE_PENDING : localization.BLOG_FORMS_DELETE_DIALOG_CONFIRM
|
|
438
|
+
}
|
|
439
|
+
)
|
|
440
|
+
] })
|
|
441
|
+
] })
|
|
442
|
+
] }) })
|
|
443
|
+
] });
|
|
394
444
|
};
|
|
395
445
|
const EditPostForm = React.memo(
|
|
396
446
|
EditPostFormComponent,
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import { createPostSchema, updatePostSchema } from '../../../schemas.mjs';
|
|
4
4
|
import { Button } from '../../../../../../../ui/src/components/button.mjs';
|
|
5
5
|
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from '../../../../../../../ui/src/components/form.mjs';
|
|
6
6
|
import { Input } from '../../../../../../../ui/src/components/input.mjs';
|
|
7
7
|
import { Switch } from '../../../../../../../ui/src/components/switch.mjs';
|
|
8
8
|
import { Textarea } from '../../../../../../../ui/src/components/textarea.mjs';
|
|
9
|
-
import { useCreatePost, useSuspensePost, useUpdatePost } from '../../hooks/blog-hooks.mjs';
|
|
9
|
+
import { useCreatePost, useSuspensePost, useUpdatePost, useDeletePost } from '../../hooks/blog-hooks.mjs';
|
|
10
10
|
import { slugify } from '../../../utils.mjs';
|
|
11
|
+
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '../../../../../../../ui/src/components/alert-dialog.mjs';
|
|
11
12
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
12
13
|
import { Loader2 } from 'lucide-react';
|
|
13
14
|
import { memo, useState, useMemo, Suspense, lazy } from 'react';
|
|
@@ -305,14 +306,17 @@ const editPostFormPropsAreEqual = (prevProps, nextProps) => {
|
|
|
305
306
|
if (prevProps.postSlug !== nextProps.postSlug) return false;
|
|
306
307
|
if (prevProps.onClose !== nextProps.onClose) return false;
|
|
307
308
|
if (prevProps.onSuccess !== nextProps.onSuccess) return false;
|
|
309
|
+
if (prevProps.onDelete !== nextProps.onDelete) return false;
|
|
308
310
|
return true;
|
|
309
311
|
};
|
|
310
312
|
const EditPostFormComponent = ({
|
|
311
313
|
postSlug,
|
|
312
314
|
onClose,
|
|
313
|
-
onSuccess
|
|
315
|
+
onSuccess,
|
|
316
|
+
onDelete
|
|
314
317
|
}) => {
|
|
315
318
|
const [featuredImageUploading, setFeaturedImageUploading] = useState(false);
|
|
319
|
+
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
316
320
|
const { localization } = usePluginOverrides("blog", {
|
|
317
321
|
localization: BLOG_LOCALIZATION
|
|
318
322
|
});
|
|
@@ -339,6 +343,7 @@ const EditPostFormComponent = ({
|
|
|
339
343
|
isPending: isUpdatingPost,
|
|
340
344
|
error: updatePostError
|
|
341
345
|
} = useUpdatePost();
|
|
346
|
+
const { mutateAsync: deletePost, isPending: isDeletingPost } = useDeletePost();
|
|
342
347
|
const onSubmit = async (data) => {
|
|
343
348
|
const updatedPost = await updatePost({
|
|
344
349
|
id: post.id,
|
|
@@ -360,6 +365,17 @@ const EditPostFormComponent = ({
|
|
|
360
365
|
published: updatedPost?.published ?? false
|
|
361
366
|
});
|
|
362
367
|
};
|
|
368
|
+
const handleDelete = async () => {
|
|
369
|
+
if (!post?.id) return;
|
|
370
|
+
await deletePost({ id: post.id });
|
|
371
|
+
toast.success(localization.BLOG_FORMS_TOAST_DELETE_SUCCESS);
|
|
372
|
+
setDeleteDialogOpen(false);
|
|
373
|
+
if (onDelete) {
|
|
374
|
+
onDelete();
|
|
375
|
+
} else {
|
|
376
|
+
onClose();
|
|
377
|
+
}
|
|
378
|
+
};
|
|
363
379
|
const form = useForm({
|
|
364
380
|
resolver: zodResolver(schema),
|
|
365
381
|
defaultValues: {
|
|
@@ -376,19 +392,53 @@ const EditPostFormComponent = ({
|
|
|
376
392
|
if (!post) {
|
|
377
393
|
return /* @__PURE__ */ jsx(EmptyList, { message: localization.BLOG_PAGE_NOT_FOUND_DESCRIPTION });
|
|
378
394
|
}
|
|
379
|
-
return /* @__PURE__ */
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
395
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
396
|
+
/* @__PURE__ */ jsx(
|
|
397
|
+
PostFormBody,
|
|
398
|
+
{
|
|
399
|
+
form,
|
|
400
|
+
onSubmit,
|
|
401
|
+
submitLabel: isUpdatingPost ? localization.BLOG_FORMS_SUBMIT_UPDATE_PENDING : localization.BLOG_FORMS_SUBMIT_UPDATE_IDLE,
|
|
402
|
+
onCancel: onClose,
|
|
403
|
+
disabled: isUpdatingPost || featuredImageUploading,
|
|
404
|
+
errorMessage: updatePostError?.message,
|
|
405
|
+
setFeaturedImageUploading,
|
|
406
|
+
initialSlugTouched: !!post?.slug
|
|
407
|
+
}
|
|
408
|
+
),
|
|
409
|
+
/* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(AlertDialog, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: [
|
|
410
|
+
/* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
411
|
+
Button,
|
|
412
|
+
{
|
|
413
|
+
variant: "destructive",
|
|
414
|
+
type: "button",
|
|
415
|
+
disabled: isUpdatingPost || featuredImageUploading || isDeletingPost,
|
|
416
|
+
className: "mt-4",
|
|
417
|
+
children: localization.BLOG_FORMS_DELETE_BUTTON
|
|
418
|
+
}
|
|
419
|
+
) }),
|
|
420
|
+
/* @__PURE__ */ jsxs(AlertDialogContent, { children: [
|
|
421
|
+
/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
|
|
422
|
+
/* @__PURE__ */ jsx(AlertDialogTitle, { children: localization.BLOG_FORMS_DELETE_DIALOG_TITLE }),
|
|
423
|
+
/* @__PURE__ */ jsx(AlertDialogDescription, { children: localization.BLOG_FORMS_DELETE_DIALOG_DESCRIPTION })
|
|
424
|
+
] }),
|
|
425
|
+
/* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
|
|
426
|
+
/* @__PURE__ */ jsx(AlertDialogCancel, { disabled: isDeletingPost, children: localization.BLOG_FORMS_DELETE_DIALOG_CANCEL }),
|
|
427
|
+
/* @__PURE__ */ jsx(
|
|
428
|
+
AlertDialogAction,
|
|
429
|
+
{
|
|
430
|
+
onClick: (e) => {
|
|
431
|
+
e.preventDefault();
|
|
432
|
+
void handleDelete();
|
|
433
|
+
},
|
|
434
|
+
disabled: isDeletingPost,
|
|
435
|
+
children: isDeletingPost ? localization.BLOG_FORMS_DELETE_PENDING : localization.BLOG_FORMS_DELETE_DIALOG_CONFIRM
|
|
436
|
+
}
|
|
437
|
+
)
|
|
438
|
+
] })
|
|
439
|
+
] })
|
|
440
|
+
] }) })
|
|
441
|
+
] });
|
|
392
442
|
};
|
|
393
443
|
const EditPostForm = memo(
|
|
394
444
|
EditPostFormComponent,
|
|
@@ -35,6 +35,9 @@ function EditPostPage({ slug }) {
|
|
|
35
35
|
const handleSuccess = (post) => {
|
|
36
36
|
navigate(`${basePath}/blog/${post.slug}`);
|
|
37
37
|
};
|
|
38
|
+
const handleDelete = () => {
|
|
39
|
+
navigate(`${basePath}/blog`);
|
|
40
|
+
};
|
|
38
41
|
return /* @__PURE__ */ jsxRuntime.jsxs(pageWrapper.PageWrapper, { className: "gap-6", testId: "edit-post-page", children: [
|
|
39
42
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
40
43
|
pageHeader.PageHeader,
|
|
@@ -48,7 +51,8 @@ function EditPostPage({ slug }) {
|
|
|
48
51
|
{
|
|
49
52
|
postSlug: slug,
|
|
50
53
|
onClose: handleClose,
|
|
51
|
-
onSuccess: handleSuccess
|
|
54
|
+
onSuccess: handleSuccess,
|
|
55
|
+
onDelete: handleDelete
|
|
52
56
|
}
|
|
53
57
|
)
|
|
54
58
|
] });
|
|
@@ -33,6 +33,9 @@ function EditPostPage({ slug }) {
|
|
|
33
33
|
const handleSuccess = (post) => {
|
|
34
34
|
navigate(`${basePath}/blog/${post.slug}`);
|
|
35
35
|
};
|
|
36
|
+
const handleDelete = () => {
|
|
37
|
+
navigate(`${basePath}/blog`);
|
|
38
|
+
};
|
|
36
39
|
return /* @__PURE__ */ jsxs(PageWrapper, { className: "gap-6", testId: "edit-post-page", children: [
|
|
37
40
|
/* @__PURE__ */ jsx(
|
|
38
41
|
PageHeader,
|
|
@@ -46,7 +49,8 @@ function EditPostPage({ slug }) {
|
|
|
46
49
|
{
|
|
47
50
|
postSlug: slug,
|
|
48
51
|
onClose: handleClose,
|
|
49
|
-
onSuccess: handleSuccess
|
|
52
|
+
onSuccess: handleSuccess,
|
|
53
|
+
onDelete: handleDelete
|
|
50
54
|
}
|
|
51
55
|
)
|
|
52
56
|
] });
|
|
@@ -269,6 +269,36 @@ function useUpdatePost() {
|
|
|
269
269
|
}
|
|
270
270
|
});
|
|
271
271
|
}
|
|
272
|
+
function useDeletePost() {
|
|
273
|
+
const { refresh, apiBaseURL, apiBasePath } = context.usePluginOverrides("blog");
|
|
274
|
+
const client$1 = client.createApiClient({
|
|
275
|
+
baseURL: apiBaseURL,
|
|
276
|
+
basePath: apiBasePath
|
|
277
|
+
});
|
|
278
|
+
const queryClient = reactQuery.useQueryClient();
|
|
279
|
+
const queries = plugins_blog_queryKeys.createBlogQueryKeys(client$1);
|
|
280
|
+
return reactQuery.useMutation({
|
|
281
|
+
mutationKey: [...queries.posts._def, "delete"],
|
|
282
|
+
mutationFn: async ({ id }) => {
|
|
283
|
+
const response = await client$1(`@delete/posts/:id`, {
|
|
284
|
+
method: "DELETE",
|
|
285
|
+
params: { id }
|
|
286
|
+
});
|
|
287
|
+
return response.data;
|
|
288
|
+
},
|
|
289
|
+
onSuccess: async () => {
|
|
290
|
+
await queryClient.invalidateQueries({
|
|
291
|
+
queryKey: queries.posts._def
|
|
292
|
+
});
|
|
293
|
+
await queryClient.invalidateQueries({
|
|
294
|
+
queryKey: queries.drafts.list._def
|
|
295
|
+
});
|
|
296
|
+
if (refresh) {
|
|
297
|
+
await refresh();
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
});
|
|
301
|
+
}
|
|
272
302
|
function usePostSearch({
|
|
273
303
|
query,
|
|
274
304
|
enabled = true,
|
|
@@ -368,6 +398,7 @@ function useRecentPosts(options = {}) {
|
|
|
368
398
|
}
|
|
369
399
|
|
|
370
400
|
exports.useCreatePost = useCreatePost;
|
|
401
|
+
exports.useDeletePost = useDeletePost;
|
|
371
402
|
exports.useNextPreviousPosts = useNextPreviousPosts;
|
|
372
403
|
exports.usePost = usePost;
|
|
373
404
|
exports.usePostSearch = usePostSearch;
|