version-pill-react 1.5.0 → 1.6.0
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 +43 -224
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +43 -224
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -109,13 +109,6 @@ function VersionPill({
|
|
|
109
109
|
const [isOpen, setIsOpen] = useState(false);
|
|
110
110
|
const [activeTab, setActiveTab] = useState("changelog");
|
|
111
111
|
const [hasNewVersion, setHasNewVersion] = useState(false);
|
|
112
|
-
const [showIdeaForm, setShowIdeaForm] = useState(false);
|
|
113
|
-
const [ideaTitle, setIdeaTitle] = useState("");
|
|
114
|
-
const [ideaDescription, setIdeaDescription] = useState("");
|
|
115
|
-
const [ideaAuthorName, setIdeaAuthorName] = useState("");
|
|
116
|
-
const [ideaAuthorEmail, setIdeaAuthorEmail] = useState("");
|
|
117
|
-
const [submittingIdea, setSubmittingIdea] = useState(false);
|
|
118
|
-
const [ideaSubmitMessage, setIdeaSubmitMessage] = useState(null);
|
|
119
112
|
const [roadmapView, setRoadmapView] = useState("board");
|
|
120
113
|
const [isMobile, setIsMobile] = useState(false);
|
|
121
114
|
const [votedIdeas, setVotedIdeas] = useState(/* @__PURE__ */ new Set());
|
|
@@ -216,45 +209,14 @@ function VersionPill({
|
|
|
216
209
|
} catch {
|
|
217
210
|
}
|
|
218
211
|
}, [projectId, baseUrl]);
|
|
219
|
-
const submitIdea = useCallback(async () => {
|
|
220
|
-
if (!ideaTitle.trim()) return;
|
|
221
|
-
setSubmittingIdea(true);
|
|
222
|
-
setIdeaSubmitMessage(null);
|
|
223
|
-
try {
|
|
224
|
-
const response = await fetch(`${baseUrl}/api/ideas/${projectId}`, {
|
|
225
|
-
method: "POST",
|
|
226
|
-
headers: { "Content-Type": "application/json" },
|
|
227
|
-
body: JSON.stringify({
|
|
228
|
-
title: ideaTitle.trim(),
|
|
229
|
-
description: ideaDescription.trim() || void 0,
|
|
230
|
-
authorName: ideaAuthorName.trim() || void 0,
|
|
231
|
-
authorEmail: ideaAuthorEmail.trim() || void 0
|
|
232
|
-
})
|
|
233
|
-
});
|
|
234
|
-
if (!response.ok) {
|
|
235
|
-
const error = await response.json().catch(() => ({ error: "Failed to submit" }));
|
|
236
|
-
throw new Error(error.error || "Failed to submit idea");
|
|
237
|
-
}
|
|
238
|
-
setIdeaSubmitMessage({ type: "success", text: "Thanks! Your idea has been submitted." });
|
|
239
|
-
setIdeaTitle("");
|
|
240
|
-
setIdeaDescription("");
|
|
241
|
-
setShowIdeaForm(false);
|
|
242
|
-
fetchIdeas();
|
|
243
|
-
} catch (err) {
|
|
244
|
-
setIdeaSubmitMessage({ type: "error", text: err.message || "Failed to submit idea" });
|
|
245
|
-
} finally {
|
|
246
|
-
setSubmittingIdea(false);
|
|
247
|
-
}
|
|
248
|
-
}, [baseUrl, projectId, ideaTitle, ideaDescription, ideaAuthorName, ideaAuthorEmail, fetchIdeas]);
|
|
249
212
|
const voteIdea = useCallback(async (ideaId) => {
|
|
250
213
|
if (votedIdeas.has(ideaId)) return;
|
|
251
214
|
setIdeas((prev) => prev.map((i) => i.id === ideaId ? { ...i, votes: i.votes + 1 } : i));
|
|
252
215
|
setVotedIdeas((prev) => new Set(prev).add(ideaId));
|
|
253
216
|
try {
|
|
254
|
-
await fetch(`${baseUrl}/api/
|
|
217
|
+
await fetch(`${baseUrl}/api/vote/${ideaId}`, {
|
|
255
218
|
method: "POST",
|
|
256
|
-
headers: { "Content-Type": "application/json" }
|
|
257
|
-
body: JSON.stringify({ ideaId })
|
|
219
|
+
headers: { "Content-Type": "application/json" }
|
|
258
220
|
});
|
|
259
221
|
} catch {
|
|
260
222
|
setIdeas((prev) => prev.map((i) => i.id === ideaId ? { ...i, votes: i.votes - 1 } : i));
|
|
@@ -889,10 +851,12 @@ function VersionPill({
|
|
|
889
851
|
}) })
|
|
890
852
|
] }) }),
|
|
891
853
|
activeTab === "ideas" && /* @__PURE__ */ jsxs("div", { style: { maxWidth: 640, width: "100%", overflowY: "auto", flex: 1 }, children: [
|
|
892
|
-
|
|
893
|
-
"
|
|
854
|
+
/* @__PURE__ */ jsxs(
|
|
855
|
+
"a",
|
|
894
856
|
{
|
|
895
|
-
|
|
857
|
+
href: `${baseUrl}/${projectId}/feature-requests`,
|
|
858
|
+
target: "_blank",
|
|
859
|
+
rel: "noopener noreferrer",
|
|
896
860
|
style: {
|
|
897
861
|
display: "flex",
|
|
898
862
|
alignItems: "center",
|
|
@@ -902,195 +866,27 @@ function VersionPill({
|
|
|
902
866
|
padding: "12px 16px",
|
|
903
867
|
marginBottom: 20,
|
|
904
868
|
borderRadius: 999,
|
|
905
|
-
border: `1px
|
|
906
|
-
background: "
|
|
907
|
-
color:
|
|
869
|
+
border: `1px solid ${isLight ? "#22c55e" : "rgba(34,197,94,0.4)"}`,
|
|
870
|
+
background: isLight ? "rgba(34,197,94,0.05)" : "rgba(34,197,94,0.08)",
|
|
871
|
+
color: "#22c55e",
|
|
908
872
|
fontSize: 14,
|
|
909
873
|
fontWeight: 500,
|
|
910
874
|
cursor: "pointer",
|
|
911
|
-
transition: "all 150ms"
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
e.currentTarget.style.borderColor = isLight ? "#a1a1aa" : "#71717a";
|
|
915
|
-
e.currentTarget.style.color = isLight ? "#52525b" : "#d4d4d8";
|
|
916
|
-
},
|
|
917
|
-
onMouseLeave: (e) => {
|
|
918
|
-
e.currentTarget.style.borderColor = isLight ? "#d4d4d8" : "#3f3f46";
|
|
919
|
-
e.currentTarget.style.color = isLight ? "#71717a" : "#a1a1aa";
|
|
920
|
-
},
|
|
921
|
-
children: [
|
|
922
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize: 18 }, children: "\u{1F4A1}" }),
|
|
923
|
-
"Suggest a feature"
|
|
924
|
-
]
|
|
925
|
-
}
|
|
926
|
-
) : /* @__PURE__ */ jsxs(
|
|
927
|
-
"div",
|
|
928
|
-
{
|
|
929
|
-
style: {
|
|
930
|
-
padding: 16,
|
|
931
|
-
marginBottom: 20,
|
|
932
|
-
borderRadius: 12,
|
|
933
|
-
background: isLight ? "#f5f5f5" : "#151515",
|
|
934
|
-
border: `1px solid ${isLight ? "#e5e5e5" : "#1f1f1f"}`
|
|
875
|
+
transition: "all 150ms",
|
|
876
|
+
textDecoration: "none",
|
|
877
|
+
boxSizing: "border-box"
|
|
935
878
|
},
|
|
936
879
|
children: [
|
|
937
|
-
/* @__PURE__ */
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
"button",
|
|
941
|
-
{
|
|
942
|
-
onClick: () => {
|
|
943
|
-
setShowIdeaForm(false);
|
|
944
|
-
setIdeaSubmitMessage(null);
|
|
945
|
-
},
|
|
946
|
-
style: {
|
|
947
|
-
background: "transparent",
|
|
948
|
-
border: "none",
|
|
949
|
-
color: isLight ? "#71717a" : "#a1a1aa",
|
|
950
|
-
cursor: "pointer",
|
|
951
|
-
fontSize: 18
|
|
952
|
-
},
|
|
953
|
-
children: "\xD7"
|
|
954
|
-
}
|
|
955
|
-
)
|
|
956
|
-
] }),
|
|
957
|
-
/* @__PURE__ */ jsx(
|
|
958
|
-
"input",
|
|
959
|
-
{
|
|
960
|
-
type: "text",
|
|
961
|
-
value: ideaTitle,
|
|
962
|
-
onChange: (e) => setIdeaTitle(e.target.value),
|
|
963
|
-
placeholder: "Feature title *",
|
|
964
|
-
style: {
|
|
965
|
-
width: "100%",
|
|
966
|
-
padding: "10px 12px",
|
|
967
|
-
marginBottom: 8,
|
|
968
|
-
borderRadius: 6,
|
|
969
|
-
border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
|
|
970
|
-
background: isLight ? "#fff" : "#0a0a0a",
|
|
971
|
-
color: isLight ? "#18181b" : "#fff",
|
|
972
|
-
fontSize: 14,
|
|
973
|
-
outline: "none",
|
|
974
|
-
boxSizing: "border-box"
|
|
975
|
-
}
|
|
976
|
-
}
|
|
977
|
-
),
|
|
978
|
-
/* @__PURE__ */ jsx(
|
|
979
|
-
"textarea",
|
|
980
|
-
{
|
|
981
|
-
value: ideaDescription,
|
|
982
|
-
onChange: (e) => setIdeaDescription(e.target.value),
|
|
983
|
-
placeholder: "Describe your idea...",
|
|
984
|
-
rows: 3,
|
|
985
|
-
style: {
|
|
986
|
-
width: "100%",
|
|
987
|
-
padding: "10px 12px",
|
|
988
|
-
marginBottom: 8,
|
|
989
|
-
borderRadius: 6,
|
|
990
|
-
border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
|
|
991
|
-
background: isLight ? "#fff" : "#0a0a0a",
|
|
992
|
-
color: isLight ? "#18181b" : "#fff",
|
|
993
|
-
fontSize: 14,
|
|
994
|
-
outline: "none",
|
|
995
|
-
resize: "none",
|
|
996
|
-
boxSizing: "border-box"
|
|
997
|
-
}
|
|
998
|
-
}
|
|
999
|
-
),
|
|
1000
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 8, marginBottom: 12 }, children: [
|
|
1001
|
-
/* @__PURE__ */ jsx(
|
|
1002
|
-
"input",
|
|
1003
|
-
{
|
|
1004
|
-
type: "text",
|
|
1005
|
-
value: ideaAuthorName,
|
|
1006
|
-
onChange: (e) => setIdeaAuthorName(e.target.value),
|
|
1007
|
-
placeholder: "Name (optional)",
|
|
1008
|
-
style: {
|
|
1009
|
-
width: "100%",
|
|
1010
|
-
padding: "8px 12px",
|
|
1011
|
-
borderRadius: 6,
|
|
1012
|
-
border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
|
|
1013
|
-
background: isLight ? "#fff" : "#0a0a0a",
|
|
1014
|
-
color: isLight ? "#18181b" : "#fff",
|
|
1015
|
-
fontSize: 13,
|
|
1016
|
-
outline: "none",
|
|
1017
|
-
boxSizing: "border-box"
|
|
1018
|
-
}
|
|
1019
|
-
}
|
|
1020
|
-
),
|
|
1021
|
-
/* @__PURE__ */ jsx(
|
|
1022
|
-
"input",
|
|
1023
|
-
{
|
|
1024
|
-
type: "email",
|
|
1025
|
-
value: ideaAuthorEmail,
|
|
1026
|
-
onChange: (e) => setIdeaAuthorEmail(e.target.value),
|
|
1027
|
-
placeholder: "Email *",
|
|
1028
|
-
style: {
|
|
1029
|
-
width: "100%",
|
|
1030
|
-
padding: "8px 12px",
|
|
1031
|
-
borderRadius: 6,
|
|
1032
|
-
border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
|
|
1033
|
-
background: isLight ? "#fff" : "#0a0a0a",
|
|
1034
|
-
color: isLight ? "#18181b" : "#fff",
|
|
1035
|
-
fontSize: 13,
|
|
1036
|
-
outline: "none",
|
|
1037
|
-
boxSizing: "border-box"
|
|
1038
|
-
}
|
|
1039
|
-
}
|
|
1040
|
-
)
|
|
1041
|
-
] }),
|
|
1042
|
-
ideaSubmitMessage && /* @__PURE__ */ jsx("div", { style: {
|
|
1043
|
-
padding: "8px 12px",
|
|
1044
|
-
marginBottom: 12,
|
|
1045
|
-
borderRadius: 6,
|
|
1046
|
-
background: ideaSubmitMessage.type === "success" ? isLight ? "#dcfce7" : "#14532d" : isLight ? "#fee2e2" : "#450a0a",
|
|
1047
|
-
color: ideaSubmitMessage.type === "success" ? isLight ? "#166534" : "#86efac" : isLight ? "#dc2626" : "#fca5a5",
|
|
1048
|
-
fontSize: 13
|
|
1049
|
-
}, children: ideaSubmitMessage.text }),
|
|
1050
|
-
/* @__PURE__ */ jsx(
|
|
1051
|
-
"button",
|
|
1052
|
-
{
|
|
1053
|
-
onClick: submitIdea,
|
|
1054
|
-
disabled: submittingIdea || !ideaTitle.trim() || !ideaAuthorEmail.trim(),
|
|
1055
|
-
style: {
|
|
1056
|
-
width: "100%",
|
|
1057
|
-
padding: "10px 16px",
|
|
1058
|
-
borderRadius: 999,
|
|
1059
|
-
border: "none",
|
|
1060
|
-
background: "#22c55e",
|
|
1061
|
-
color: "#fff",
|
|
1062
|
-
fontSize: 14,
|
|
1063
|
-
fontWeight: 500,
|
|
1064
|
-
cursor: submittingIdea || !ideaTitle.trim() || !ideaAuthorEmail.trim() ? "not-allowed" : "pointer",
|
|
1065
|
-
opacity: submittingIdea || !ideaTitle.trim() || !ideaAuthorEmail.trim() ? 0.6 : 1,
|
|
1066
|
-
transition: "opacity 150ms"
|
|
1067
|
-
},
|
|
1068
|
-
children: submittingIdea ? "Submitting..." : "Submit Idea"
|
|
1069
|
-
}
|
|
1070
|
-
)
|
|
880
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 16 }, children: "\u{1F4A1}" }),
|
|
881
|
+
"Suggest a feature",
|
|
882
|
+
/* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { marginLeft: 2 }, children: /* @__PURE__ */ jsx("path", { d: "M7 17L17 7M17 7H7M17 7v10" }) })
|
|
1071
883
|
]
|
|
1072
884
|
}
|
|
1073
885
|
),
|
|
1074
|
-
ideasArray.length === 0
|
|
886
|
+
ideasArray.length === 0 ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: 60, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
|
|
1075
887
|
/* @__PURE__ */ 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__ */ 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" }) }),
|
|
1076
888
|
/* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: 500, marginBottom: 8 }, children: "No feature requests yet" }),
|
|
1077
|
-
/* @__PURE__ */ jsx(
|
|
1078
|
-
"button",
|
|
1079
|
-
{
|
|
1080
|
-
onClick: () => setShowIdeaForm(true),
|
|
1081
|
-
style: {
|
|
1082
|
-
padding: "8px 20px",
|
|
1083
|
-
borderRadius: 999,
|
|
1084
|
-
border: "none",
|
|
1085
|
-
background: "#22c55e",
|
|
1086
|
-
color: "#fff",
|
|
1087
|
-
fontSize: 14,
|
|
1088
|
-
fontWeight: 500,
|
|
1089
|
-
cursor: "pointer"
|
|
1090
|
-
},
|
|
1091
|
-
children: "Suggest a feature"
|
|
1092
|
-
}
|
|
1093
|
-
)
|
|
889
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 13, color: isLight ? "#a1a1aa" : "#525252" }, children: "Be the first to suggest one!" })
|
|
1094
890
|
] }) : (() => {
|
|
1095
891
|
const statusOrder = ["under review", "planned", "in progress", "new", "shipped"];
|
|
1096
892
|
const grouped = {};
|
|
@@ -1175,7 +971,18 @@ function VersionPill({
|
|
|
1175
971
|
),
|
|
1176
972
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1177
973
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 4, flexWrap: "wrap" }, children: [
|
|
1178
|
-
/* @__PURE__ */ jsx(
|
|
974
|
+
/* @__PURE__ */ jsx(
|
|
975
|
+
"a",
|
|
976
|
+
{
|
|
977
|
+
href: `${baseUrl}/${projectId}/feature-requests`,
|
|
978
|
+
target: "_blank",
|
|
979
|
+
rel: "noopener noreferrer",
|
|
980
|
+
style: { fontSize: 15, fontWeight: 500, color: isLight ? "#18181b" : "#fff", textDecoration: "none" },
|
|
981
|
+
onMouseEnter: (e) => e.currentTarget.style.textDecoration = "underline",
|
|
982
|
+
onMouseLeave: (e) => e.currentTarget.style.textDecoration = "none",
|
|
983
|
+
children: idea.title
|
|
984
|
+
}
|
|
985
|
+
),
|
|
1179
986
|
idea.status && /* @__PURE__ */ jsx("span", { style: {
|
|
1180
987
|
padding: "2px 8px",
|
|
1181
988
|
fontSize: 10,
|
|
@@ -1187,7 +994,19 @@ function VersionPill({
|
|
|
1187
994
|
letterSpacing: "0.3px"
|
|
1188
995
|
}, children: cfg.label })
|
|
1189
996
|
] }),
|
|
1190
|
-
idea.description && /* @__PURE__ */ jsx("div", { style: { fontSize: 14, color: isLight ? "#71717a" : "#a1a1aa", lineHeight: 1.5 }, children: idea.description })
|
|
997
|
+
idea.description && /* @__PURE__ */ jsx("div", { style: { fontSize: 14, color: isLight ? "#71717a" : "#a1a1aa", lineHeight: 1.5 }, children: idea.description }),
|
|
998
|
+
/* @__PURE__ */ jsx(
|
|
999
|
+
"a",
|
|
1000
|
+
{
|
|
1001
|
+
href: `${baseUrl}/${projectId}/feature-requests`,
|
|
1002
|
+
target: "_blank",
|
|
1003
|
+
rel: "noopener noreferrer",
|
|
1004
|
+
style: { fontSize: 12, color: isLight ? "#71717a" : "#a1a1aa", textDecoration: "none", marginTop: 6, display: "inline-flex", alignItems: "center", gap: 4 },
|
|
1005
|
+
onMouseEnter: (e) => e.currentTarget.style.color = "#22c55e",
|
|
1006
|
+
onMouseLeave: (e) => e.currentTarget.style.color = isLight ? "#71717a" : "#a1a1aa",
|
|
1007
|
+
children: "Join discussion \u2192"
|
|
1008
|
+
}
|
|
1009
|
+
)
|
|
1191
1010
|
] })
|
|
1192
1011
|
]
|
|
1193
1012
|
},
|