version-pill-react 1.5.1 → 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.
Files changed (5) hide show
  1. package/dist/index.js +18 -222
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +18 -222
  4. package/dist/index.mjs.map +1 -1
  5. 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/ideas/${projectId}/vote`, {
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
- !showIdeaForm ? /* @__PURE__ */ jsxs(
893
- "button",
854
+ /* @__PURE__ */ jsxs(
855
+ "a",
894
856
  {
895
- onClick: () => setShowIdeaForm(true),
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 dashed ${isLight ? "#d4d4d8" : "#3f3f46"}`,
906
- background: "transparent",
907
- color: isLight ? "#71717a" : "#a1a1aa",
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
- onMouseEnter: (e) => {
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";
875
+ transition: "all 150ms",
876
+ textDecoration: "none",
877
+ boxSizing: "border-box"
920
878
  },
921
879
  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"}`
935
- },
936
- children: [
937
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }, children: [
938
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: isLight ? "#18181b" : "#fff" }, children: "Suggest a Feature" }),
939
- /* @__PURE__ */ jsx(
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 && !showIdeaForm ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: 60, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
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 = {};