@kohryan/moodui 0.0.4 → 0.0.6

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 +88 -18
  2. package/dist/index.mjs +88 -18
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -816,6 +816,7 @@ function MoodUIPromptPlayground(props) {
816
816
  setLoading(false);
817
817
  }
818
818
  }, [apiKey, baseUrl, model, prompt, props.componentName, provider]);
819
+ const componentName = props.componentName ?? "MoodScreen";
819
820
  const onCopyCode = React2.useCallback(async () => {
820
821
  if (!code) return;
821
822
  try {
@@ -826,6 +827,37 @@ function MoodUIPromptPlayground(props) {
826
827
  console.error("Failed to copy:", e);
827
828
  }
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]);
842
+ const onSaveToFile = React2.useCallback(async () => {
843
+ if (!code) return;
844
+ try {
845
+ const handle = await window.showSaveFilePicker({
846
+ suggestedName: `${componentName}.tsx`,
847
+ types: [{
848
+ description: "TypeScript Files",
849
+ accept: { "text/plain": [".tsx"] }
850
+ }]
851
+ });
852
+ const writable = await handle.createWritable();
853
+ await writable.write(code);
854
+ await writable.close();
855
+ } catch (e) {
856
+ if (!e.name?.includes("AbortError")) {
857
+ console.error("Failed to save file:", e);
858
+ }
859
+ }
860
+ }, [code, componentName]);
829
861
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
830
862
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
831
863
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "MoodUI Prompt" }),
@@ -926,24 +958,62 @@ function MoodUIPromptPlayground(props) {
926
958
  /* @__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" }) }),
927
959
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
928
960
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "React Code" }),
929
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
930
- "button",
931
- {
932
- type: "button",
933
- onClick: onCopyCode,
934
- disabled: !code,
935
- style: {
936
- padding: "6px 12px",
937
- borderRadius: 8,
938
- border: copied ? "1px solid #16a34a" : "1px solid #6b7280",
939
- background: copied ? "#dcfce7" : "#ffffff",
940
- color: copied ? "#16a34a" : "#374151",
941
- cursor: !code ? "not-allowed" : "pointer",
942
- fontSize: 12
943
- },
944
- children: copied ? "Copied!" : "Copy"
945
- }
946
- )
961
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
962
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
963
+ "button",
964
+ {
965
+ type: "button",
966
+ onClick: onCopyCode,
967
+ disabled: !code,
968
+ style: {
969
+ padding: "6px 12px",
970
+ borderRadius: 8,
971
+ border: copied ? "1px solid #16a34a" : "1px solid #6b7280",
972
+ background: copied ? "#dcfce7" : "#ffffff",
973
+ color: copied ? "#16a34a" : "#374151",
974
+ cursor: !code ? "not-allowed" : "pointer",
975
+ fontSize: 12
976
+ },
977
+ children: copied ? "Copied!" : "Copy"
978
+ }
979
+ ),
980
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
981
+ "button",
982
+ {
983
+ type: "button",
984
+ onClick: onSaveToFile,
985
+ disabled: !code,
986
+ style: {
987
+ padding: "6px 12px",
988
+ borderRadius: 8,
989
+ border: "1px solid #059669",
990
+ background: "#059669",
991
+ color: "#ffffff",
992
+ cursor: !code ? "not-allowed" : "pointer",
993
+ fontSize: 12
994
+ },
995
+ children: "Save to File"
996
+ }
997
+ ),
998
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
999
+ "button",
1000
+ {
1001
+ type: "button",
1002
+ onClick: onDownloadCode,
1003
+ disabled: !code,
1004
+ style: {
1005
+ padding: "6px 12px",
1006
+ borderRadius: 8,
1007
+ border: "1px solid #111827",
1008
+ background: "#111827",
1009
+ color: "#ffffff",
1010
+ cursor: !code ? "not-allowed" : "pointer",
1011
+ fontSize: 12
1012
+ },
1013
+ children: "Download"
1014
+ }
1015
+ )
1016
+ ] })
947
1017
  ] }),
948
1018
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
949
1019
  "textarea",
package/dist/index.mjs CHANGED
@@ -221,6 +221,7 @@ function MoodUIPromptPlayground(props) {
221
221
  setLoading(false);
222
222
  }
223
223
  }, [apiKey, baseUrl, model, prompt, props.componentName, provider]);
224
+ const componentName = props.componentName ?? "MoodScreen";
224
225
  const onCopyCode = React2.useCallback(async () => {
225
226
  if (!code) return;
226
227
  try {
@@ -231,6 +232,37 @@ function MoodUIPromptPlayground(props) {
231
232
  console.error("Failed to copy:", e);
232
233
  }
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]);
247
+ const onSaveToFile = React2.useCallback(async () => {
248
+ if (!code) return;
249
+ try {
250
+ const handle = await window.showSaveFilePicker({
251
+ suggestedName: `${componentName}.tsx`,
252
+ types: [{
253
+ description: "TypeScript Files",
254
+ accept: { "text/plain": [".tsx"] }
255
+ }]
256
+ });
257
+ const writable = await handle.createWritable();
258
+ await writable.write(code);
259
+ await writable.close();
260
+ } catch (e) {
261
+ if (!e.name?.includes("AbortError")) {
262
+ console.error("Failed to save file:", e);
263
+ }
264
+ }
265
+ }, [code, componentName]);
234
266
  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
235
267
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
236
268
  /* @__PURE__ */ jsx2("div", { style: { fontWeight: 700, fontSize: 16 }, children: "MoodUI Prompt" }),
@@ -331,24 +363,62 @@ function MoodUIPromptPlayground(props) {
331
363
  /* @__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" }) }),
332
364
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
333
365
  /* @__PURE__ */ jsx2("div", { style: { fontWeight: 700, fontSize: 16 }, children: "React Code" }),
334
- /* @__PURE__ */ jsx2(
335
- "button",
336
- {
337
- type: "button",
338
- onClick: onCopyCode,
339
- disabled: !code,
340
- style: {
341
- padding: "6px 12px",
342
- borderRadius: 8,
343
- border: copied ? "1px solid #16a34a" : "1px solid #6b7280",
344
- background: copied ? "#dcfce7" : "#ffffff",
345
- color: copied ? "#16a34a" : "#374151",
346
- cursor: !code ? "not-allowed" : "pointer",
347
- fontSize: 12
348
- },
349
- children: copied ? "Copied!" : "Copy"
350
- }
351
- )
366
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
367
+ /* @__PURE__ */ jsx2(
368
+ "button",
369
+ {
370
+ type: "button",
371
+ onClick: onCopyCode,
372
+ disabled: !code,
373
+ style: {
374
+ padding: "6px 12px",
375
+ borderRadius: 8,
376
+ border: copied ? "1px solid #16a34a" : "1px solid #6b7280",
377
+ background: copied ? "#dcfce7" : "#ffffff",
378
+ color: copied ? "#16a34a" : "#374151",
379
+ cursor: !code ? "not-allowed" : "pointer",
380
+ fontSize: 12
381
+ },
382
+ children: copied ? "Copied!" : "Copy"
383
+ }
384
+ ),
385
+ /* @__PURE__ */ jsx2(
386
+ "button",
387
+ {
388
+ type: "button",
389
+ onClick: onSaveToFile,
390
+ disabled: !code,
391
+ style: {
392
+ padding: "6px 12px",
393
+ borderRadius: 8,
394
+ border: "1px solid #059669",
395
+ background: "#059669",
396
+ color: "#ffffff",
397
+ cursor: !code ? "not-allowed" : "pointer",
398
+ fontSize: 12
399
+ },
400
+ children: "Save to File"
401
+ }
402
+ ),
403
+ /* @__PURE__ */ jsx2(
404
+ "button",
405
+ {
406
+ type: "button",
407
+ onClick: onDownloadCode,
408
+ disabled: !code,
409
+ style: {
410
+ padding: "6px 12px",
411
+ borderRadius: 8,
412
+ border: "1px solid #111827",
413
+ background: "#111827",
414
+ color: "#ffffff",
415
+ cursor: !code ? "not-allowed" : "pointer",
416
+ fontSize: 12
417
+ },
418
+ children: "Download"
419
+ }
420
+ )
421
+ ] })
352
422
  ] }),
353
423
  /* @__PURE__ */ jsx2(
354
424
  "textarea",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kohryan/moodui",
3
- "version": "0.0.4",
3
+ "version": "0.0.6",
4
4
  "description": "MoodUI - AI-friendly UI spec + React renderer",
5
5
  "license": "MIT",
6
6
  "sideEffects": false,