version-pill-react 1.6.0 → 1.6.1
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/index.js +192 -11
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +192 -11
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -147,6 +147,13 @@ function VersionPill({
|
|
|
147
147
|
const [isOpen, setIsOpen] = (0, import_react.useState)(false);
|
|
148
148
|
const [activeTab, setActiveTab] = (0, import_react.useState)("changelog");
|
|
149
149
|
const [hasNewVersion, setHasNewVersion] = (0, import_react.useState)(false);
|
|
150
|
+
const [showIdeaForm, setShowIdeaForm] = (0, import_react.useState)(false);
|
|
151
|
+
const [ideaTitle, setIdeaTitle] = (0, import_react.useState)("");
|
|
152
|
+
const [ideaDescription, setIdeaDescription] = (0, import_react.useState)("");
|
|
153
|
+
const [ideaAuthorName, setIdeaAuthorName] = (0, import_react.useState)("");
|
|
154
|
+
const [ideaAuthorEmail, setIdeaAuthorEmail] = (0, import_react.useState)("");
|
|
155
|
+
const [submittingIdea, setSubmittingIdea] = (0, import_react.useState)(false);
|
|
156
|
+
const [ideaSubmitMessage, setIdeaSubmitMessage] = (0, import_react.useState)(null);
|
|
150
157
|
const [roadmapView, setRoadmapView] = (0, import_react.useState)("board");
|
|
151
158
|
const [isMobile, setIsMobile] = (0, import_react.useState)(false);
|
|
152
159
|
const [votedIdeas, setVotedIdeas] = (0, import_react.useState)(/* @__PURE__ */ new Set());
|
|
@@ -247,6 +254,38 @@ function VersionPill({
|
|
|
247
254
|
} catch {
|
|
248
255
|
}
|
|
249
256
|
}, [projectId, baseUrl]);
|
|
257
|
+
const submitIdea = (0, import_react.useCallback)(async () => {
|
|
258
|
+
if (!ideaTitle.trim() || !ideaAuthorEmail.trim()) return;
|
|
259
|
+
setSubmittingIdea(true);
|
|
260
|
+
setIdeaSubmitMessage(null);
|
|
261
|
+
try {
|
|
262
|
+
const response = await fetch(`${baseUrl}/api/ideas/${projectId}`, {
|
|
263
|
+
method: "POST",
|
|
264
|
+
headers: { "Content-Type": "application/json" },
|
|
265
|
+
body: JSON.stringify({
|
|
266
|
+
title: ideaTitle.trim(),
|
|
267
|
+
description: ideaDescription.trim() || void 0,
|
|
268
|
+
authorName: ideaAuthorName.trim() || void 0,
|
|
269
|
+
authorEmail: ideaAuthorEmail.trim()
|
|
270
|
+
})
|
|
271
|
+
});
|
|
272
|
+
if (!response.ok) {
|
|
273
|
+
const error = await response.json().catch(() => ({ error: "Failed to submit" }));
|
|
274
|
+
throw new Error(error.error || "Failed to submit idea");
|
|
275
|
+
}
|
|
276
|
+
setIdeaSubmitMessage({ type: "success", text: "Thanks! Your idea has been submitted." });
|
|
277
|
+
setIdeaTitle("");
|
|
278
|
+
setIdeaDescription("");
|
|
279
|
+
setIdeaAuthorName("");
|
|
280
|
+
setIdeaAuthorEmail("");
|
|
281
|
+
setShowIdeaForm(false);
|
|
282
|
+
fetchIdeas();
|
|
283
|
+
} catch (err) {
|
|
284
|
+
setIdeaSubmitMessage({ type: "error", text: err.message || "Failed to submit idea" });
|
|
285
|
+
} finally {
|
|
286
|
+
setSubmittingIdea(false);
|
|
287
|
+
}
|
|
288
|
+
}, [baseUrl, projectId, ideaTitle, ideaDescription, ideaAuthorName, ideaAuthorEmail, fetchIdeas]);
|
|
250
289
|
const voteIdea = (0, import_react.useCallback)(async (ideaId) => {
|
|
251
290
|
if (votedIdeas.has(ideaId)) return;
|
|
252
291
|
setIdeas((prev) => prev.map((i) => i.id === ideaId ? { ...i, votes: i.votes + 1 } : i));
|
|
@@ -889,12 +928,10 @@ function VersionPill({
|
|
|
889
928
|
}) })
|
|
890
929
|
] }) }),
|
|
891
930
|
activeTab === "ideas" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { maxWidth: 640, width: "100%", overflowY: "auto", flex: 1 }, children: [
|
|
892
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
893
|
-
"
|
|
931
|
+
!showIdeaForm ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
932
|
+
"button",
|
|
894
933
|
{
|
|
895
|
-
|
|
896
|
-
target: "_blank",
|
|
897
|
-
rel: "noopener noreferrer",
|
|
934
|
+
onClick: () => setShowIdeaForm(true),
|
|
898
935
|
style: {
|
|
899
936
|
display: "flex",
|
|
900
937
|
alignItems: "center",
|
|
@@ -910,18 +947,162 @@ function VersionPill({
|
|
|
910
947
|
fontSize: 14,
|
|
911
948
|
fontWeight: 500,
|
|
912
949
|
cursor: "pointer",
|
|
913
|
-
transition: "all 150ms"
|
|
914
|
-
|
|
915
|
-
|
|
950
|
+
transition: "all 150ms"
|
|
951
|
+
},
|
|
952
|
+
onMouseEnter: (e) => {
|
|
953
|
+
e.currentTarget.style.background = isLight ? "rgba(34,197,94,0.1)" : "rgba(34,197,94,0.15)";
|
|
954
|
+
},
|
|
955
|
+
onMouseLeave: (e) => {
|
|
956
|
+
e.currentTarget.style.background = isLight ? "rgba(34,197,94,0.05)" : "rgba(34,197,94,0.08)";
|
|
916
957
|
},
|
|
917
958
|
children: [
|
|
918
959
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 16 }, children: "\u{1F4A1}" }),
|
|
919
|
-
"Suggest a feature"
|
|
920
|
-
|
|
960
|
+
"Suggest a feature"
|
|
961
|
+
]
|
|
962
|
+
}
|
|
963
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
964
|
+
"div",
|
|
965
|
+
{
|
|
966
|
+
style: {
|
|
967
|
+
padding: 16,
|
|
968
|
+
marginBottom: 20,
|
|
969
|
+
borderRadius: 12,
|
|
970
|
+
background: isLight ? "#f9fafb" : "#151515",
|
|
971
|
+
border: `1px solid ${isLight ? "#e5e5e5" : "#1f1f1f"}`
|
|
972
|
+
},
|
|
973
|
+
children: [
|
|
974
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }, children: [
|
|
975
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 600, fontSize: 15, color: isLight ? "#18181b" : "#fff" }, children: "Suggest a Feature" }),
|
|
976
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
977
|
+
"button",
|
|
978
|
+
{
|
|
979
|
+
onClick: () => {
|
|
980
|
+
setShowIdeaForm(false);
|
|
981
|
+
setIdeaSubmitMessage(null);
|
|
982
|
+
},
|
|
983
|
+
style: { background: "transparent", border: "none", color: isLight ? "#71717a" : "#a1a1aa", cursor: "pointer", fontSize: 18 },
|
|
984
|
+
children: "\xD7"
|
|
985
|
+
}
|
|
986
|
+
)
|
|
987
|
+
] }),
|
|
988
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
989
|
+
"input",
|
|
990
|
+
{
|
|
991
|
+
type: "text",
|
|
992
|
+
value: ideaTitle,
|
|
993
|
+
onChange: (e) => setIdeaTitle(e.target.value),
|
|
994
|
+
placeholder: "Feature title *",
|
|
995
|
+
style: {
|
|
996
|
+
width: "100%",
|
|
997
|
+
padding: "10px 12px",
|
|
998
|
+
marginBottom: 8,
|
|
999
|
+
borderRadius: 8,
|
|
1000
|
+
border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
|
|
1001
|
+
background: isLight ? "#fff" : "#0a0a0a",
|
|
1002
|
+
color: isLight ? "#18181b" : "#fff",
|
|
1003
|
+
fontSize: 14,
|
|
1004
|
+
outline: "none",
|
|
1005
|
+
boxSizing: "border-box"
|
|
1006
|
+
}
|
|
1007
|
+
}
|
|
1008
|
+
),
|
|
1009
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1010
|
+
"textarea",
|
|
1011
|
+
{
|
|
1012
|
+
value: ideaDescription,
|
|
1013
|
+
onChange: (e) => setIdeaDescription(e.target.value),
|
|
1014
|
+
placeholder: "Describe your idea...",
|
|
1015
|
+
rows: 3,
|
|
1016
|
+
style: {
|
|
1017
|
+
width: "100%",
|
|
1018
|
+
padding: "10px 12px",
|
|
1019
|
+
marginBottom: 8,
|
|
1020
|
+
borderRadius: 8,
|
|
1021
|
+
border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
|
|
1022
|
+
background: isLight ? "#fff" : "#0a0a0a",
|
|
1023
|
+
color: isLight ? "#18181b" : "#fff",
|
|
1024
|
+
fontSize: 14,
|
|
1025
|
+
outline: "none",
|
|
1026
|
+
resize: "none",
|
|
1027
|
+
boxSizing: "border-box"
|
|
1028
|
+
}
|
|
1029
|
+
}
|
|
1030
|
+
),
|
|
1031
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 8, marginBottom: 12 }, children: [
|
|
1032
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1033
|
+
"input",
|
|
1034
|
+
{
|
|
1035
|
+
type: "text",
|
|
1036
|
+
value: ideaAuthorName,
|
|
1037
|
+
onChange: (e) => setIdeaAuthorName(e.target.value),
|
|
1038
|
+
placeholder: "Your name",
|
|
1039
|
+
style: {
|
|
1040
|
+
width: "100%",
|
|
1041
|
+
padding: "8px 12px",
|
|
1042
|
+
borderRadius: 8,
|
|
1043
|
+
border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
|
|
1044
|
+
background: isLight ? "#fff" : "#0a0a0a",
|
|
1045
|
+
color: isLight ? "#18181b" : "#fff",
|
|
1046
|
+
fontSize: 13,
|
|
1047
|
+
outline: "none",
|
|
1048
|
+
boxSizing: "border-box"
|
|
1049
|
+
}
|
|
1050
|
+
}
|
|
1051
|
+
),
|
|
1052
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1053
|
+
"input",
|
|
1054
|
+
{
|
|
1055
|
+
type: "email",
|
|
1056
|
+
value: ideaAuthorEmail,
|
|
1057
|
+
onChange: (e) => setIdeaAuthorEmail(e.target.value),
|
|
1058
|
+
placeholder: "Email *",
|
|
1059
|
+
style: {
|
|
1060
|
+
width: "100%",
|
|
1061
|
+
padding: "8px 12px",
|
|
1062
|
+
borderRadius: 8,
|
|
1063
|
+
border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
|
|
1064
|
+
background: isLight ? "#fff" : "#0a0a0a",
|
|
1065
|
+
color: isLight ? "#18181b" : "#fff",
|
|
1066
|
+
fontSize: 13,
|
|
1067
|
+
outline: "none",
|
|
1068
|
+
boxSizing: "border-box"
|
|
1069
|
+
}
|
|
1070
|
+
}
|
|
1071
|
+
)
|
|
1072
|
+
] }),
|
|
1073
|
+
ideaSubmitMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
|
|
1074
|
+
padding: "8px 12px",
|
|
1075
|
+
marginBottom: 12,
|
|
1076
|
+
borderRadius: 8,
|
|
1077
|
+
background: ideaSubmitMessage.type === "success" ? isLight ? "#dcfce7" : "#14532d" : isLight ? "#fee2e2" : "#450a0a",
|
|
1078
|
+
color: ideaSubmitMessage.type === "success" ? isLight ? "#166534" : "#86efac" : isLight ? "#dc2626" : "#fca5a5",
|
|
1079
|
+
fontSize: 13
|
|
1080
|
+
}, children: ideaSubmitMessage.text }),
|
|
1081
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1082
|
+
"button",
|
|
1083
|
+
{
|
|
1084
|
+
onClick: submitIdea,
|
|
1085
|
+
disabled: submittingIdea || !ideaTitle.trim() || !ideaAuthorEmail.trim(),
|
|
1086
|
+
style: {
|
|
1087
|
+
width: "100%",
|
|
1088
|
+
padding: "10px 16px",
|
|
1089
|
+
borderRadius: 999,
|
|
1090
|
+
border: "none",
|
|
1091
|
+
background: "#22c55e",
|
|
1092
|
+
color: "#fff",
|
|
1093
|
+
fontSize: 14,
|
|
1094
|
+
fontWeight: 500,
|
|
1095
|
+
cursor: submittingIdea || !ideaTitle.trim() || !ideaAuthorEmail.trim() ? "not-allowed" : "pointer",
|
|
1096
|
+
opacity: submittingIdea || !ideaTitle.trim() || !ideaAuthorEmail.trim() ? 0.6 : 1,
|
|
1097
|
+
transition: "opacity 150ms"
|
|
1098
|
+
},
|
|
1099
|
+
children: submittingIdea ? "Submitting..." : "Submit Idea"
|
|
1100
|
+
}
|
|
1101
|
+
)
|
|
921
1102
|
]
|
|
922
1103
|
}
|
|
923
1104
|
),
|
|
924
|
-
ideasArray.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
|
|
1105
|
+
ideasArray.length === 0 && !showIdeaForm ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 60, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
|
|
925
1106
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: { marginBottom: 12, opacity: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" }) }),
|
|
926
1107
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 16, fontWeight: 500, marginBottom: 8 }, children: "No feature requests yet" }),
|
|
927
1108
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13, color: isLight ? "#a1a1aa" : "#525252" }, children: "Be the first to suggest one!" })
|