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.
Files changed (5) hide show
  1. package/dist/index.js +192 -11
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +192 -11
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -109,6 +109,13 @@ 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);
112
119
  const [roadmapView, setRoadmapView] = useState("board");
113
120
  const [isMobile, setIsMobile] = useState(false);
114
121
  const [votedIdeas, setVotedIdeas] = useState(/* @__PURE__ */ new Set());
@@ -209,6 +216,38 @@ function VersionPill({
209
216
  } catch {
210
217
  }
211
218
  }, [projectId, baseUrl]);
219
+ const submitIdea = useCallback(async () => {
220
+ if (!ideaTitle.trim() || !ideaAuthorEmail.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()
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
+ setIdeaAuthorName("");
242
+ setIdeaAuthorEmail("");
243
+ setShowIdeaForm(false);
244
+ fetchIdeas();
245
+ } catch (err) {
246
+ setIdeaSubmitMessage({ type: "error", text: err.message || "Failed to submit idea" });
247
+ } finally {
248
+ setSubmittingIdea(false);
249
+ }
250
+ }, [baseUrl, projectId, ideaTitle, ideaDescription, ideaAuthorName, ideaAuthorEmail, fetchIdeas]);
212
251
  const voteIdea = useCallback(async (ideaId) => {
213
252
  if (votedIdeas.has(ideaId)) return;
214
253
  setIdeas((prev) => prev.map((i) => i.id === ideaId ? { ...i, votes: i.votes + 1 } : i));
@@ -851,12 +890,10 @@ function VersionPill({
851
890
  }) })
852
891
  ] }) }),
853
892
  activeTab === "ideas" && /* @__PURE__ */ jsxs("div", { style: { maxWidth: 640, width: "100%", overflowY: "auto", flex: 1 }, children: [
854
- /* @__PURE__ */ jsxs(
855
- "a",
893
+ !showIdeaForm ? /* @__PURE__ */ jsxs(
894
+ "button",
856
895
  {
857
- href: `${baseUrl}/${projectId}/feature-requests`,
858
- target: "_blank",
859
- rel: "noopener noreferrer",
896
+ onClick: () => setShowIdeaForm(true),
860
897
  style: {
861
898
  display: "flex",
862
899
  alignItems: "center",
@@ -872,18 +909,162 @@ function VersionPill({
872
909
  fontSize: 14,
873
910
  fontWeight: 500,
874
911
  cursor: "pointer",
875
- transition: "all 150ms",
876
- textDecoration: "none",
877
- boxSizing: "border-box"
912
+ transition: "all 150ms"
913
+ },
914
+ onMouseEnter: (e) => {
915
+ e.currentTarget.style.background = isLight ? "rgba(34,197,94,0.1)" : "rgba(34,197,94,0.15)";
916
+ },
917
+ onMouseLeave: (e) => {
918
+ e.currentTarget.style.background = isLight ? "rgba(34,197,94,0.05)" : "rgba(34,197,94,0.08)";
878
919
  },
879
920
  children: [
880
921
  /* @__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" }) })
922
+ "Suggest a feature"
923
+ ]
924
+ }
925
+ ) : /* @__PURE__ */ jsxs(
926
+ "div",
927
+ {
928
+ style: {
929
+ padding: 16,
930
+ marginBottom: 20,
931
+ borderRadius: 12,
932
+ background: isLight ? "#f9fafb" : "#151515",
933
+ border: `1px solid ${isLight ? "#e5e5e5" : "#1f1f1f"}`
934
+ },
935
+ children: [
936
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }, children: [
937
+ /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 15, color: isLight ? "#18181b" : "#fff" }, children: "Suggest a Feature" }),
938
+ /* @__PURE__ */ jsx(
939
+ "button",
940
+ {
941
+ onClick: () => {
942
+ setShowIdeaForm(false);
943
+ setIdeaSubmitMessage(null);
944
+ },
945
+ style: { background: "transparent", border: "none", color: isLight ? "#71717a" : "#a1a1aa", cursor: "pointer", fontSize: 18 },
946
+ children: "\xD7"
947
+ }
948
+ )
949
+ ] }),
950
+ /* @__PURE__ */ jsx(
951
+ "input",
952
+ {
953
+ type: "text",
954
+ value: ideaTitle,
955
+ onChange: (e) => setIdeaTitle(e.target.value),
956
+ placeholder: "Feature title *",
957
+ style: {
958
+ width: "100%",
959
+ padding: "10px 12px",
960
+ marginBottom: 8,
961
+ borderRadius: 8,
962
+ border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
963
+ background: isLight ? "#fff" : "#0a0a0a",
964
+ color: isLight ? "#18181b" : "#fff",
965
+ fontSize: 14,
966
+ outline: "none",
967
+ boxSizing: "border-box"
968
+ }
969
+ }
970
+ ),
971
+ /* @__PURE__ */ jsx(
972
+ "textarea",
973
+ {
974
+ value: ideaDescription,
975
+ onChange: (e) => setIdeaDescription(e.target.value),
976
+ placeholder: "Describe your idea...",
977
+ rows: 3,
978
+ style: {
979
+ width: "100%",
980
+ padding: "10px 12px",
981
+ marginBottom: 8,
982
+ borderRadius: 8,
983
+ border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
984
+ background: isLight ? "#fff" : "#0a0a0a",
985
+ color: isLight ? "#18181b" : "#fff",
986
+ fontSize: 14,
987
+ outline: "none",
988
+ resize: "none",
989
+ boxSizing: "border-box"
990
+ }
991
+ }
992
+ ),
993
+ /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 8, marginBottom: 12 }, children: [
994
+ /* @__PURE__ */ jsx(
995
+ "input",
996
+ {
997
+ type: "text",
998
+ value: ideaAuthorName,
999
+ onChange: (e) => setIdeaAuthorName(e.target.value),
1000
+ placeholder: "Your name",
1001
+ style: {
1002
+ width: "100%",
1003
+ padding: "8px 12px",
1004
+ borderRadius: 8,
1005
+ border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
1006
+ background: isLight ? "#fff" : "#0a0a0a",
1007
+ color: isLight ? "#18181b" : "#fff",
1008
+ fontSize: 13,
1009
+ outline: "none",
1010
+ boxSizing: "border-box"
1011
+ }
1012
+ }
1013
+ ),
1014
+ /* @__PURE__ */ jsx(
1015
+ "input",
1016
+ {
1017
+ type: "email",
1018
+ value: ideaAuthorEmail,
1019
+ onChange: (e) => setIdeaAuthorEmail(e.target.value),
1020
+ placeholder: "Email *",
1021
+ style: {
1022
+ width: "100%",
1023
+ padding: "8px 12px",
1024
+ borderRadius: 8,
1025
+ border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
1026
+ background: isLight ? "#fff" : "#0a0a0a",
1027
+ color: isLight ? "#18181b" : "#fff",
1028
+ fontSize: 13,
1029
+ outline: "none",
1030
+ boxSizing: "border-box"
1031
+ }
1032
+ }
1033
+ )
1034
+ ] }),
1035
+ ideaSubmitMessage && /* @__PURE__ */ jsx("div", { style: {
1036
+ padding: "8px 12px",
1037
+ marginBottom: 12,
1038
+ borderRadius: 8,
1039
+ background: ideaSubmitMessage.type === "success" ? isLight ? "#dcfce7" : "#14532d" : isLight ? "#fee2e2" : "#450a0a",
1040
+ color: ideaSubmitMessage.type === "success" ? isLight ? "#166534" : "#86efac" : isLight ? "#dc2626" : "#fca5a5",
1041
+ fontSize: 13
1042
+ }, children: ideaSubmitMessage.text }),
1043
+ /* @__PURE__ */ jsx(
1044
+ "button",
1045
+ {
1046
+ onClick: submitIdea,
1047
+ disabled: submittingIdea || !ideaTitle.trim() || !ideaAuthorEmail.trim(),
1048
+ style: {
1049
+ width: "100%",
1050
+ padding: "10px 16px",
1051
+ borderRadius: 999,
1052
+ border: "none",
1053
+ background: "#22c55e",
1054
+ color: "#fff",
1055
+ fontSize: 14,
1056
+ fontWeight: 500,
1057
+ cursor: submittingIdea || !ideaTitle.trim() || !ideaAuthorEmail.trim() ? "not-allowed" : "pointer",
1058
+ opacity: submittingIdea || !ideaTitle.trim() || !ideaAuthorEmail.trim() ? 0.6 : 1,
1059
+ transition: "opacity 150ms"
1060
+ },
1061
+ children: submittingIdea ? "Submitting..." : "Submit Idea"
1062
+ }
1063
+ )
883
1064
  ]
884
1065
  }
885
1066
  ),
886
- ideasArray.length === 0 ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: 60, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
1067
+ ideasArray.length === 0 && !showIdeaForm ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 60, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
887
1068
  /* @__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" }) }),
888
1069
  /* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: 500, marginBottom: 8 }, children: "No feature requests yet" }),
889
1070
  /* @__PURE__ */ jsx("div", { style: { fontSize: 13, color: isLight ? "#a1a1aa" : "#525252" }, children: "Be the first to suggest one!" })