@kohryan/moodui 0.0.3 → 0.0.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.
Files changed (3) hide show
  1. package/dist/index.js +66 -1
  2. package/dist/index.mjs +66 -1
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -780,9 +780,11 @@ function MoodUIPromptPlayground(props) {
780
780
  const [error, setError] = React2.useState(null);
781
781
  const [spec, setSpec] = React2.useState(null);
782
782
  const [code, setCode] = React2.useState("");
783
+ const [copied, setCopied] = React2.useState(false);
783
784
  const onGenerate = React2.useCallback(async () => {
784
785
  setLoading(true);
785
786
  setError(null);
787
+ setCopied(false);
786
788
  try {
787
789
  const result = provider === "ollama" ? await generateReactFromPrompt({
788
790
  provider: "ollama",
@@ -814,6 +816,29 @@ function MoodUIPromptPlayground(props) {
814
816
  setLoading(false);
815
817
  }
816
818
  }, [apiKey, baseUrl, model, prompt, props.componentName, provider]);
819
+ const componentName = props.componentName ?? "MoodScreen";
820
+ const onCopyCode = React2.useCallback(async () => {
821
+ if (!code) return;
822
+ try {
823
+ await navigator.clipboard.writeText(code);
824
+ setCopied(true);
825
+ setTimeout(() => setCopied(false), 2e3);
826
+ } catch (e) {
827
+ console.error("Failed to copy:", e);
828
+ }
829
+ }, [code]);
830
+ const onDownloadCode = React2.useCallback(() => {
831
+ if (!code) return;
832
+ const blob = new Blob([code], { type: "text/plain" });
833
+ const url = URL.createObjectURL(blob);
834
+ const a = document.createElement("a");
835
+ a.href = url;
836
+ a.download = `${componentName}.tsx`;
837
+ document.body.appendChild(a);
838
+ a.click();
839
+ document.body.removeChild(a);
840
+ URL.revokeObjectURL(url);
841
+ }, [code, componentName]);
817
842
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
818
843
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
819
844
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "MoodUI Prompt" }),
@@ -912,7 +937,47 @@ function MoodUIPromptPlayground(props) {
912
937
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
913
938
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "Preview" }),
914
939
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { minHeight: 240, padding: 16, borderRadius: 16, background: "#ffffff", border: "1px solid #e5e7eb" }, children: spec ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MoodUIRuntime, { spec }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: "#6b7280" }, children: "Belum ada hasil" }) }),
915
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "React Code" }),
940
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
941
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "React Code" }),
942
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
943
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
944
+ "button",
945
+ {
946
+ type: "button",
947
+ onClick: onCopyCode,
948
+ disabled: !code,
949
+ style: {
950
+ padding: "6px 12px",
951
+ borderRadius: 8,
952
+ border: copied ? "1px solid #16a34a" : "1px solid #6b7280",
953
+ background: copied ? "#dcfce7" : "#ffffff",
954
+ color: copied ? "#16a34a" : "#374151",
955
+ cursor: !code ? "not-allowed" : "pointer",
956
+ fontSize: 12
957
+ },
958
+ children: copied ? "Copied!" : "Copy"
959
+ }
960
+ ),
961
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
962
+ "button",
963
+ {
964
+ type: "button",
965
+ onClick: onDownloadCode,
966
+ disabled: !code,
967
+ style: {
968
+ padding: "6px 12px",
969
+ borderRadius: 8,
970
+ border: "1px solid #111827",
971
+ background: "#111827",
972
+ color: "#ffffff",
973
+ cursor: !code ? "not-allowed" : "pointer",
974
+ fontSize: 12
975
+ },
976
+ children: "Download"
977
+ }
978
+ )
979
+ ] })
980
+ ] }),
916
981
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
917
982
  "textarea",
918
983
  {
package/dist/index.mjs CHANGED
@@ -185,9 +185,11 @@ function MoodUIPromptPlayground(props) {
185
185
  const [error, setError] = React2.useState(null);
186
186
  const [spec, setSpec] = React2.useState(null);
187
187
  const [code, setCode] = React2.useState("");
188
+ const [copied, setCopied] = React2.useState(false);
188
189
  const onGenerate = React2.useCallback(async () => {
189
190
  setLoading(true);
190
191
  setError(null);
192
+ setCopied(false);
191
193
  try {
192
194
  const result = provider === "ollama" ? await generateReactFromPrompt({
193
195
  provider: "ollama",
@@ -219,6 +221,29 @@ function MoodUIPromptPlayground(props) {
219
221
  setLoading(false);
220
222
  }
221
223
  }, [apiKey, baseUrl, model, prompt, props.componentName, provider]);
224
+ const componentName = props.componentName ?? "MoodScreen";
225
+ const onCopyCode = React2.useCallback(async () => {
226
+ if (!code) return;
227
+ try {
228
+ await navigator.clipboard.writeText(code);
229
+ setCopied(true);
230
+ setTimeout(() => setCopied(false), 2e3);
231
+ } catch (e) {
232
+ console.error("Failed to copy:", e);
233
+ }
234
+ }, [code]);
235
+ const onDownloadCode = React2.useCallback(() => {
236
+ if (!code) return;
237
+ const blob = new Blob([code], { type: "text/plain" });
238
+ const url = URL.createObjectURL(blob);
239
+ const a = document.createElement("a");
240
+ a.href = url;
241
+ a.download = `${componentName}.tsx`;
242
+ document.body.appendChild(a);
243
+ a.click();
244
+ document.body.removeChild(a);
245
+ URL.revokeObjectURL(url);
246
+ }, [code, componentName]);
222
247
  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
223
248
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
224
249
  /* @__PURE__ */ jsx2("div", { style: { fontWeight: 700, fontSize: 16 }, children: "MoodUI Prompt" }),
@@ -317,7 +342,47 @@ function MoodUIPromptPlayground(props) {
317
342
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
318
343
  /* @__PURE__ */ jsx2("div", { style: { fontWeight: 700, fontSize: 16 }, children: "Preview" }),
319
344
  /* @__PURE__ */ jsx2("div", { style: { minHeight: 240, padding: 16, borderRadius: 16, background: "#ffffff", border: "1px solid #e5e7eb" }, children: spec ? /* @__PURE__ */ jsx2(MoodUIRuntime, { spec }) : /* @__PURE__ */ jsx2("div", { style: { color: "#6b7280" }, children: "Belum ada hasil" }) }),
320
- /* @__PURE__ */ jsx2("div", { style: { fontWeight: 700, fontSize: 16 }, children: "React Code" }),
345
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
346
+ /* @__PURE__ */ jsx2("div", { style: { fontWeight: 700, fontSize: 16 }, children: "React Code" }),
347
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
348
+ /* @__PURE__ */ jsx2(
349
+ "button",
350
+ {
351
+ type: "button",
352
+ onClick: onCopyCode,
353
+ disabled: !code,
354
+ style: {
355
+ padding: "6px 12px",
356
+ borderRadius: 8,
357
+ border: copied ? "1px solid #16a34a" : "1px solid #6b7280",
358
+ background: copied ? "#dcfce7" : "#ffffff",
359
+ color: copied ? "#16a34a" : "#374151",
360
+ cursor: !code ? "not-allowed" : "pointer",
361
+ fontSize: 12
362
+ },
363
+ children: copied ? "Copied!" : "Copy"
364
+ }
365
+ ),
366
+ /* @__PURE__ */ jsx2(
367
+ "button",
368
+ {
369
+ type: "button",
370
+ onClick: onDownloadCode,
371
+ disabled: !code,
372
+ style: {
373
+ padding: "6px 12px",
374
+ borderRadius: 8,
375
+ border: "1px solid #111827",
376
+ background: "#111827",
377
+ color: "#ffffff",
378
+ cursor: !code ? "not-allowed" : "pointer",
379
+ fontSize: 12
380
+ },
381
+ children: "Download"
382
+ }
383
+ )
384
+ ] })
385
+ ] }),
321
386
  /* @__PURE__ */ jsx2(
322
387
  "textarea",
323
388
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kohryan/moodui",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "description": "MoodUI - AI-friendly UI spec + React renderer",
5
5
  "license": "MIT",
6
6
  "sideEffects": false,