@kohryan/moodui 0.0.3 → 0.0.4

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 +33 -1
  2. package/dist/index.mjs +33 -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,16 @@ function MoodUIPromptPlayground(props) {
814
816
  setLoading(false);
815
817
  }
816
818
  }, [apiKey, baseUrl, model, prompt, props.componentName, provider]);
819
+ const onCopyCode = React2.useCallback(async () => {
820
+ if (!code) return;
821
+ try {
822
+ await navigator.clipboard.writeText(code);
823
+ setCopied(true);
824
+ setTimeout(() => setCopied(false), 2e3);
825
+ } catch (e) {
826
+ console.error("Failed to copy:", e);
827
+ }
828
+ }, [code]);
817
829
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
818
830
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
819
831
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "MoodUI Prompt" }),
@@ -912,7 +924,27 @@ function MoodUIPromptPlayground(props) {
912
924
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
913
925
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "Preview" }),
914
926
  /* @__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" }),
927
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
928
+ /* @__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
+ )
947
+ ] }),
916
948
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
917
949
  "textarea",
918
950
  {
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,16 @@ function MoodUIPromptPlayground(props) {
219
221
  setLoading(false);
220
222
  }
221
223
  }, [apiKey, baseUrl, model, prompt, props.componentName, provider]);
224
+ const onCopyCode = React2.useCallback(async () => {
225
+ if (!code) return;
226
+ try {
227
+ await navigator.clipboard.writeText(code);
228
+ setCopied(true);
229
+ setTimeout(() => setCopied(false), 2e3);
230
+ } catch (e) {
231
+ console.error("Failed to copy:", e);
232
+ }
233
+ }, [code]);
222
234
  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
223
235
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
224
236
  /* @__PURE__ */ jsx2("div", { style: { fontWeight: 700, fontSize: 16 }, children: "MoodUI Prompt" }),
@@ -317,7 +329,27 @@ function MoodUIPromptPlayground(props) {
317
329
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
318
330
  /* @__PURE__ */ jsx2("div", { style: { fontWeight: 700, fontSize: 16 }, children: "Preview" }),
319
331
  /* @__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" }),
332
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
333
+ /* @__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
+ )
352
+ ] }),
321
353
  /* @__PURE__ */ jsx2(
322
354
  "textarea",
323
355
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kohryan/moodui",
3
- "version": "0.0.3",
3
+ "version": "0.0.4",
4
4
  "description": "MoodUI - AI-friendly UI spec + React renderer",
5
5
  "license": "MIT",
6
6
  "sideEffects": false,