slice-machine-ui 2.19.2-alpha.jp-figma-to-prismic.5 → 2.19.2-alpha.jp-figma-to-prismic.7

package/src/features/customTypes/customTypesBuilder/CreateSliceFromImageModal/SliceCard.tsx

@@ -15,13 +15,16 @@ export function SliceCard(props: SliceCardProps) {
   const loading = slice.status === "uploading" || slice.status === "generating";
 
   const error =
-    slice.status === "uploadError" || slice.status === "generateError";
+    slice.status === "uploadError" ||
+    slice.status === "generateError" ||
+    slice.status === "cancelled";
 
   const hasThumbnail =
     slice.status === "pending" ||
     slice.status === "generateError" ||
     slice.status === "generating" ||
-    slice.status === "success";
+    slice.status === "success" ||
+    slice.status === "cancelled";
 
   let action: ReactNode | undefined;
   if (error) {
@@ -71,8 +74,9 @@ export type Slice = { image: File; source: "upload" | "figma" } & (
   | { status: "uploading" }
   | { status: "uploadError"; onRetry: () => void }
   | { status: "pending"; thumbnailUrl: string }
-  | { status: "generating"; thumbnailUrl: string }
+  | { status: "generating"; thumbnailUrl: string; requestId: string }
   | { status: "generateError"; thumbnailUrl: string; onRetry: () => void }
+  | { status: "cancelled"; thumbnailUrl: string; onRetry: () => void }
   | {
       status: "success";
       thumbnailUrl: string;
@@ -85,6 +89,7 @@ function getStartIcon(status: Slice["status"]) {
   switch (status) {
     case "uploadError":
     case "generateError":
+    case "cancelled":
       return "close";
     case "success":
       return "check";
@@ -116,6 +121,8 @@ function getSubtitle(slice: Slice) {
       return "Generating...";
     case "generateError":
       return "Something went wrong";
+    case "cancelled":
+      return "Cancelled";
     case "success":
       return "Generated";
   }

package/src/legacy/lib/builders/CustomTypeBuilder/SliceZone/index.tsx

@@ -440,7 +440,6 @@ const SliceZone: React.FC<SliceZoneProps> = ({
               );
             },
           });
-          closeCreateSliceFromImageModal();
         }}
         onClose={closeCreateSliceFromImageModal}
       />

package/src/pages/slices.tsx

@@ -333,7 +333,6 @@ const SlicesIndex: React.FunctionComponent = () => {
                   path={library}
                 />,
               );
-              closeCreateSliceFromImageModal();
             }}
             onClose={closeCreateSliceFromImageModal}
           />

package/out/_next/static/chunks/907-fc580cc28042182f.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[907],{91589:function(e,a,t){t.d(a,{S:function(){return j}});var r=t(52322),i=t(11699),n=t(2784),l=t(76473),s=t(88932),o=t(30195),c=t(94160),d=t(34166),u=t(98250),m=t(68968),g=t(96317),p=t(42828),h=t(80148),f=t(54597),x=t(62434);function y(e){let a;let{slice:t}=e,n="uploading"===t.status||"generating"===t.status,l="uploadError"===t.status||"generateError"===t.status,s="pending"===t.status||"generateError"===t.status||"generating"===t.status||"success"===t.status;return l?a=(0,r.jsx)(i.E,{startIcon:"refresh",color:"grey",onClick:t.onRetry,children:"Retry"}):"figma"===t.source&&(a=(0,r.jsx)(i.c3,{content:"Pasted from Figma",children:(0,r.jsx)(p.Y,{variant:"square"})})),(0,r.jsxs)(x.Zb,{disabled:n,children:[s?(0,r.jsx)(x.ZB,{src:t.thumbnailUrl}):(0,r.jsx)(x.ZB,{component:"div"}),(0,r.jsx)(x.eW,{loading:n,startIcon:function(e){switch(e){case"uploadError":case"generateError":return"close";case"success":return"check";default:return}}(t.status),title:"success"===t.status?t.model.name:"figma"===t.source?t.image.name.split(".")[0]:t.image.name,subtitle:function(e){let{status:a}=e;switch(a){case"uploading":return"Uploading...";case"uploadError":return"Unable to upload image";case"pending":var t;return(t=e.image.size)<1024?"".concat(t," B"):t<1048576?"".concat((t/1024).toFixed(1)," kB"):"".concat((t/1048576).toFixed(1)," MB");case"generating":return"Generating...";case"generateError":return"Something went wrong";case"success":return"Generated"}}(t),error:l,action:a})]})}let b=o.z.object({__type:o.z.literal("figma-to-prismic/clipboard-data"),name:o.z.string(),image:o.z.string().startsWith("data:image/")});function j(e){let{open:a,location:t,onClose:o,onSuccess:g}=e,[x,j]=(0,n.useState)([]),[I,F]=(0,n.useState)(!1),{syncChanges:k}=(0,m.g)(),{createSliceSuccess:A}=(0,f.Z)(),{completeStep:D}=(0,u.k)(),U=function(e){let{open:a}=e,t=(0,n.useRef)([]);return(0,n.useEffect)(()=>{a&&(t.current=[],h.managerClient.slices.readAllSlices().then(e=>{t.current=e.models.map(e=>{let{model:a}=e;return a})}).catch(()=>null))},[a]),t}({open:a}),{libraryID:L,isLoading:E}=function(){let[e,a]=(0,n.useState)();return(0,n.useEffect)(()=>{h.managerClient.project.getSliceMachineConfig().then(e=>{var t;let r=null==e?void 0:null===(t=e.libraries)||void 0===t?void 0:t[0];if(void 0===r)throw Error("No library found in the config.");a(r)}).catch(()=>{throw Error("Could not get library ID from the config.")})},[]),{libraryID:e,isLoading:void 0===e}}(),N=(0,n.useRef)(crypto.randomUUID()),z=S();(0,l.y1)(["meta+v","ctrl+v"],e=>{e.preventDefault(),G()},{enabled:a&&z});let P=e=>{let{index:a,slice:t}=e;j(e=>e.map((e,r)=>r===a?t(e):e))},B=e=>{if(Y)return;if(e.length>10){s.Am.error("You can only upload ".concat(10," images at a time."));return}let a=x.length;j(a=>[...a,...e.map(e=>({source:"upload",status:"uploading",image:e}))]),e.forEach((e,t)=>{R({index:a+t,imageData:e,source:"upload"})})},G=async()=>{var e;if(!(!a||!z||x.some(e=>"figma"===e.source)||x.some(e=>"uploading"===e.status||"generating"===e.status))){if("function"!=typeof(null===(e=navigator.clipboard)||void 0===e?void 0:e.read)){s.Am.error("Clipboard paste is not supported in this browser.");return}try{let e=await navigator.clipboard.read();if(0===e.length){s.Am.error("No data found in clipboard.");return}let a="pasted-image.png",t=null,r=!1;for(let a of e){let e=a.types.find(e=>e.startsWith("image/"));if(void 0!==e){t=await a.getType(e);break}}for(let i of e)if(i.types.includes("text/plain"))try{let e=await i.getType("text/plain"),n=await e.text(),l=b.safeParse(JSON.parse(n));if(l.success){r=!0;let e=l.data;if(a="".concat(e.name,".png"),!t){let a=await fetch(e.image);t=await a.blob()}}else console.warn("Clipboard data validation failed:",l.error)}catch(e){console.warn("Failed to parse JSON from clipboard:",e)}if(!t){r?s.Am.error("Could not extract Figma data from clipboard. Please try copying again using the Prismic Figma plugin."):s.Am.error("No Figma data found in clipboard. Make sure you've copied a design using the Prismic Figma plugin.");return}let i=x.length;if(i>=10){s.Am.error("You can only upload ".concat(10," images at a time."));return}let n=new File([t],a,{type:t.type});j(e=>[...e,{source:"figma",status:"uploading",image:n}]),R({index:i,imageData:n,source:"figma"}),s.Am.success("Pasted ".concat(a).concat(r?" from Figma":""))}catch(e){console.error("Failed to paste from clipboard:",e),s.Am.error("Failed to paste from clipboard. Please check browser permissions and try again.")}}},R=async e=>{let{index:a,imageData:t,source:r}=e,i=N.current;P({index:a,slice:e=>({...e,status:"uploading",image:t,source:r})});try{let e=await v({image:t});if(i!==N.current)return;P({index:a,slice:a=>({...a,status:"pending",thumbnailUrl:e})})}catch(e){if(i!==N.current)return;P({index:a,slice:e=>({...e,status:"uploadError",onRetry:()=>void R({index:a,imageData:t,source:r})})})}},_=()=>{void 0!==L&&x.forEach((e,a)=>{"pending"===e.status&&T({index:a,libraryID:L,imageUrl:e.thumbnailUrl,source:e.source})})},T=async e=>{let{index:a,imageUrl:r,libraryID:i,source:n}=e,l=N.current;P({index:a,slice:e=>({...e,status:"generating",thumbnailUrl:r})});try{let e=await h.managerClient.customTypes.inferSlice({source:n,libraryID:i,imageUrl:r});if(l!==N.current)return;let s=function(e){let{existingSlices:a,newSlices:t,slice:r}=e,i=new Set,n=new Set;for(let{id:e,name:t}of a)i.add(e),n.add(t.toLowerCase());for(let e of t)"success"===e.status&&(i.add(e.model.id),n.add(e.model.name.toLowerCase()));let l=r.id,s=2;for(;i.has(l);)l="".concat(r.id,"_").concat(s),s++;let o=r.name;for(s=2;n.has(o.toLowerCase());)o="".concat(r.name).concat(s),s++;return{...r,id:l,name:o}}({existingSlices:U.current,newSlices:x,slice:e.slice});if(j(t=>t.map((t,i)=>i!==a?t:{...t,status:"success",thumbnailUrl:r,model:s,langSmithUrl:e.langSmithUrl})),"upload"===n){l=N.current;let e=x[a],{errors:t}=await h.managerClient.slices.createSlice({libraryID:i,model:s});if(t.length)throw Error("Failed to create slice ".concat(s.id,"."));if(await h.managerClient.slices.updateSliceScreenshot({libraryID:i,sliceID:s.id,variationID:s.variations[0].id,data:e.image}),l!==N.current)return}D("createSlice"),c.Xe.track({event:"slice:created",id:s.id,name:s.name,library:i,location:t,mode:"ai",langSmithUrl:e.langSmithUrl}),(0,d.nZ)({type:"model",library:i,sliceId:s.id,variationId:s.variations[0].id,langSmithUrl:e.langSmithUrl})}catch(e){if(l!==N.current)return;P({index:a,slice:e=>({...e,status:"generateError",thumbnailUrl:r,onRetry:()=>{T({index:a,imageUrl:r,libraryID:i,source:n})}})})}},Z=()=>{N.current=crypto.randomUUID(),j([])},M=async()=>{try{if(F(!0),void 0===L)return;let e=await (0,c.y0)();A(e.libraries),k(),g({slices:x.flatMap(e=>"success"===e.status?e.model:[]),library:L}),Z()}finally{F(!1)}},O=x.filter(e=>"uploading"===e.status||"generating"===e.status).length,W=x.filter(e=>"pending"===e.status).length,Y=x.some(e=>"generating"===e.status||"success"===e.status),V=x.filter(e=>"success"===e.status).length,H=O+W;return console.log({slices:x,generateSliceCount:H,loadingSliceCount:O,pendingSliceCount:W}),(0,r.jsxs)(i.ae,{open:a,onOpenChange:O>0?void 0:e=>{e||(o(),N.current=crypto.randomUUID(),j([]))},children:[(0,r.jsx)(i.al,{title:"Generate with AI"}),(0,r.jsxs)(i.aj,{gap:0,children:[(0,r.jsx)(i.ak,{hidden:!0,children:"Upload images to generate slices with AI"}),E?(0,r.jsx)(i.D,{display:"flex",justifyContent:"center",alignItems:"center",height:"100%",children:(0,r.jsx)(i.bg,{color:"purple9"})}):(0,r.jsxs)(r.Fragment,{children:[0===x.length?(0,r.jsxs)(i.D,{padding:16,height:"100%",gap:16,display:"flex",flexDirection:"column",children:[z&&(0,r.jsxs)(i.D,{display:"flex",gap:16,alignItems:"center",backgroundColor:"grey2",padding:16,borderRadius:12,children:[(0,r.jsxs)(i.D,{display:"flex",gap:8,alignItems:"center",flexGrow:1,children:[(0,r.jsx)(i.D,{width:48,height:48,backgroundColor:"grey12",borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",children:(0,r.jsx)(p.Y,{variant:"original",height:25})}),(0,r.jsxs)(i.D,{display:"flex",flexDirection:"column",flexGrow:1,children:[(0,r.jsx)(i.bL,{variant:"bold",children:"Want to work faster?"}),(0,r.jsx)(i.bL,{variant:"small",color:"grey11",children:"Copy frames from Figma with the Slice Machine plugin and paste them here."})]})]}),(0,r.jsx)(i.E,{endIcon:"arrowForward",color:"indigo",onClick:()=>window.open("https://www.figma.com/community/plugin/TODO","_blank"),sx:{marginRight:8},invisible:!0,children:"Install plugin"})]}),(0,r.jsx)(i.aF,{onFilesSelected:B,assetType:"image",maxFiles:10,overlay:(0,r.jsx)(w,{onFilesSelected:B,onPaste:()=>void G(),droppingFiles:!0}),children:(0,r.jsx)(w,{onFilesSelected:B,onPaste:()=>void G()})})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(i.D,{display:"flex",alignItems:"center",justifyContent:"space-between",padding:16,children:[(0,r.jsx)(i.bL,{variant:"h3",children:"Design"}),(0,r.jsx)(i.aG,{size:"medium",color:"grey",onFilesSelected:B,startIcon:"attachFile",disabled:Y,children:"Add images"})]}),(0,r.jsx)(i.bn,{stableScrollbar:!1,children:(0,r.jsx)(i.D,{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,padding:16,children:x.map((e,a)=>(0,r.jsx)(y,{slice:e},"slice-".concat(a)))})})]}),(0,r.jsxs)(i.ah,{children:[(0,r.jsx)(i.ai,{size:"medium",onClick:()=>{Z(),o()},disabled:O>0,children:"Close"}),0===V?(0,r.jsxs)(i.af,{color:"purple",startIcon:"autoFixHigh",onClick:()=>void _(),disabled:Y||O>0||0===W,loading:O>0,size:"medium",children:["Generate"," ",H>0?"(".concat(H,") "):"",1===H?"Slice":"Slices"]}):(0,r.jsx)(i.af,{color:"purple",onClick:()=>void M(),loading:I,size:"medium",children:C(t,V)})]})]})]})]})}function w(e){let{droppingFiles:a=!1,onFilesSelected:t,onPaste:n}=e,l=S();return(0,r.jsx)(i.D,{justifyContent:"center",flexDirection:"column",height:"100%",backgroundColor:a?"purple2":"grey2",border:!0,borderStyle:"dashed",borderColor:a?"purple9":"grey6",borderRadius:12,flexGrow:1,children:(0,r.jsx)(i.s,{children:(0,r.jsxs)(i.D,{display:"flex",flexDirection:"column",gap:16,alignItems:"center",children:[(0,r.jsx)(i.x,{lineColor:"purple11",backgroundColor:"purple5",name:"cloudUpload",size:"large"}),(0,r.jsx)(i.D,{display:"flex",flexDirection:"column",gap:4,alignItems:"center",children:l?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(i.bL,{children:"Generate slices from your designs"}),(0,r.jsx)(i.bL,{variant:"small",color:"grey11",children:"Upload your design images or paste them directly from Figma."})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(i.bL,{children:"Upload your design images."}),(0,r.jsx)(i.bL,{variant:"small",color:"grey11",children:"Once uploaded, you can generate slices automatically using AI."})]})}),(0,r.jsx)(i.D,{display:"flex",alignItems:"center",gap:16,children:l?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(i.E,{size:"small",renderStartIcon:()=>(0,r.jsx)(p.Y,{variant:"original",height:16}),color:"grey",onClick:n,children:"Paste from Figma"}),(0,r.jsx)(i.aG,{size:"small",onFilesSelected:t,color:"purple",invisible:!0,children:"Add images"})]}):(0,r.jsx)(i.aG,{startIcon:"attachFile",onFilesSelected:t,color:"grey",children:"Add images"})})]})})})}async function v(e){let{image:a}=e,t=[await h.managerClient.project.getResolvedRepositoryName(),"shared-slices","prismic-inferred-slices",crypto.randomUUID()].join("/");await h.managerClient.screenshots.initS3ACL();let{url:r}=await h.managerClient.screenshots.uploadScreenshot({keyPrefix:t,data:a});return r}function S(){let e=(0,g.L)("llm-proxy-access");return(null==e?void 0:e.value)==="on"}let C=(e,a)=>{switch(e){case"custom_type":return"Add to type (".concat(a,")");case"page_type":return"Add to page (".concat(a,")");case"slices":return"Done"}}},27213:function(e,a,t){t.d(a,{F:function(){return n}});var r=t(52322),i=t(11699);let n=e=>{let{menuType:a}=e;return{fromImage:{BackgroundIcon:(0,r.jsx)(i.B,{name:"autoFixHigh",size:"ActionList"===a?"small":"extraSmall",iconSize:"ActionList"===a?"medium":"small",color:"purple",variant:"solid",radius:6}),title:"Generate from image",description:"Build a slice based on your design image."},fromScratch:{BackgroundIcon:(0,r.jsx)(i.B,{name:"add",size:"ActionList"===a?"small":"extraSmall",iconSize:"ActionList"===a?"medium":"small",color:"white",variant:"solid",radius:6}),title:"Start from scratch",description:"Build a custom slice your way."},fromTemplate:{BackgroundIcon:(0,r.jsx)(i.B,{name:"contentCopy",size:"ActionList"===a?"small":"extraSmall",iconSize:"ActionList"===a?"medium":"small",color:"white",variant:"solid",radius:6}),title:"Use a template",description:"Choose from ready-made examples."},fromExisting:{BackgroundIcon:(0,r.jsx)(i.B,{name:"folder",size:"ActionList"===a?"small":"extraSmall",iconSize:"ActionList"===a?"medium":"small",color:"white",variant:"solid",radius:6}),title:"Reuse an existing slice",description:"Select from your created slices."}}}},6256:function(e,a,t){t.d(a,{c:function(){return b}});var r=t(52322),i=t(2784),n=t(36131),l=t(75289),s=t(94160),o=t(98250),c=t(88932),d=t(63908),u=t(358),m=t(80148);async function g(e){let{sliceName:a,libraryName:t,location:r,onSuccess:i}=e;try{let e=(0,d.fo)(a),{errors:n}=await m.managerClient.slices.createSlice({libraryID:t,model:e});if(n.length>0)throw n;s.Xe.track({event:"slice:created",id:(0,u.MP)(a),name:a,library:t,location:r,mode:"manual"}),await i(e)}catch(t){let e="An unexpected error happened while creating slice ".concat(a,".");console.error(e,t),c.Am.error(e)}}var p=t(68968),h=t(59532),f=t(54597),x=t(46999),y=t(63019);let b=e=>{let{onClose:a,onSuccess:t,localLibraries:c,location:d,remoteSlices:u}=e,{createSliceSuccess:m}=(0,f.Z)(),[b,j]=(0,i.useState)(!1),{syncChanges:w}=(0,p.g)(),{completeStep:v}=(0,o.k)(),S=async e=>{let a=e.sliceName,r=e.from;j(!0),await g({sliceName:a,libraryName:r,location:d,onSuccess:async e=>{m((await (0,s.y0)()).libraries),t(e,r),w(),v("createSlice")}})};return(0,r.jsx)(h.Z,{testId:"create-slice-modal",isOpen:!0,widthInPx:"530px",isLoading:b,formId:"create-new-slice",close:a,buttonLabel:"Create",onSubmit:e=>{S(e)},initialValues:{sliceName:"",from:c[0].name},validate:e=>(0,y.h)(e,c,u),content:{title:"Create a new slice"},children:e=>{let{touched:a,values:t,setFieldValue:i,errors:s}=e;return(0,r.jsxs)(l.xu,{children:[(0,r.jsx)(x.W,{name:"sliceName",label:"Slice name",placeholder:"Pascalised slice API ID (e.g. TextBlock)",error:a.sliceName?s.sliceName:void 0,testId:"slice-name-input"}),(0,r.jsx)(l.__,{htmlFor:"from",sx:{mb:2},children:"Target Library"}),(0,r.jsx)(n.ZP,{name:"from",options:c.map(e=>({value:e.name,label:e.name})),onChange:e=>e?void i("from",e.value):null,defaultValue:{value:t.from,label:t.from},styles:{option:e=>({...e,color:"#161618"})},theme:e=>({...e,colors:{...e.colors,primary:"#E9E8EA"}}),menuPortalTarget:document.body})]})}})}},63019:function(e,a,t){t.d(a,{h:function(){return o}});var r=t(96009),i=t.n(r),n=t(74600),l=t.n(n),s=t(7974);function o(e,a,t){let{sliceName:r}=e;return r?s.lS.includes(r.toLowerCase())?{sliceName:'Name "'.concat(r,'" is reserved for Slice Machine use.')}:s.xo.exec(r)?l()(i()(r)).replace(/\s/gm,"")!==r.trim()?{sliceName:"Value has to be PascalCased."}:r.match(/^\d/)?{sliceName:"Value cannot start with a number."}:[...a.flatMap(e=>e.components.map(e=>e.model.name)),...t.map(e=>e.name)].includes(r)?{sliceName:"Slice name is already taken."}:void 0:{sliceName:"No special characters allowed."}:{sliceName:"Cannot be empty"}}},21151:function(e,a,t){var r=t(52322),i=t(75289);a.Z=function(e){let{elems:a,renderElem:t,defineElementKey:n,gridTemplateMinPx:l="320px",gridGap:s="16px",sx:o}=e;return(0,r.jsx)(i.xu,{as:"section",sx:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(".concat(l,", 1fr))"),gridGap:s,pt:2,...o},children:a.map((e,a)=>e?(0,r.jsx)("span",{children:t(e,a)},"".concat(n(e),"-").concat(a+1)):null)})}}}]);