slice-machine-ui 2.19.2-alpha.jp-figma-to-prismic.2 → 2.19.2-alpha.jp-figma-to-prismic.3

package/out/_next/static/chunks/907-88dafe5c1e80dead.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[907],{91589:function(e,a,r){r.d(a,{S:function(){return b}});var t=r(52322),i=r(11699),n=r(2784),l=r(76473),s=r(88932),o=r(30195),c=r(94160),d=r(34166),u=r(98250),m=r(68968),g=r(42828),p=r(80148),f=r(54597),h=r(62434);function x(e){let a;let{slice:r}=e,n="uploading"===r.status||"generating"===r.status,l="uploadError"===r.status||"generateError"===r.status,s="generateError"===r.status||"generating"===r.status||"success"===r.status;return l?a=(0,t.jsx)(i.E,{startIcon:"refresh",color:"grey",onClick:r.onRetry,children:"Retry"}):"figma"===r.source&&(a=(0,t.jsx)(g.Y,{variant:"square"})),(0,t.jsxs)(h.Zb,{disabled:n,children:[s?(0,t.jsx)(h.ZB,{src:r.thumbnailUrl}):(0,t.jsx)(h.ZB,{component:"div"}),(0,t.jsx)(h.eW,{loading:n,startIcon:function(e){switch(e){case"uploadError":case"generateError":return"close";case"success":return"check";default:return}}(r.status),title:"success"===r.status?r.model.name:"figma"===r.source?r.image.name.split(".")[0]:r.image.name,subtitle:function(e){switch(e){case"uploading":return"Uploading...";case"uploadError":return"Unable to upload image";case"generating":return"Generating...";case"generateError":return"Something went wrong";case"success":return"Generated"}}(r.status),error:l,action:a})]})}let y=o.z.object({__type:o.z.literal("figma-to-prismic/clipboard-data"),name:o.z.string(),image:o.z.string().startsWith("data:image/")});function b(e){let{open:a,location:r,onClose:o}=e,[h,b]=(0,n.useState)([]),{syncChanges:S}=(0,m.g)(),{createSliceSuccess:C}=(0,f.Z)(),{completeStep:I}=(0,u.k)(),k=function(e){let{open:a}=e,r=(0,n.useRef)([]);return(0,n.useEffect)(()=>{a&&(r.current=[],p.managerClient.slices.readAllSlices().then(e=>{r.current=e.models.map(e=>{let{model:a}=e;return a})}).catch(()=>null))},[a]),r}({open:a}),A=(0,n.useRef)(crypto.randomUUID());(0,l.y1)(["meta+v","ctrl+v"],e=>{e.preventDefault(),F()},{enabled:a}),(0,n.useEffect)(()=>{h.every(e=>"success"===e.status)&&U()},[h]);let D=e=>{let{index:a,slice:r}=e;b(e=>e.map((e,t)=>t===a?r(e):e))},E=e=>{if(e.length>10){s.Am.error("You can only upload ".concat(10," images at a time."));return}b(e.map(e=>({status:"uploading",source:"upload",image:e}))),e.forEach((e,a)=>{N({index:a,imageData:e,source:"upload"})})},F=async()=>{var e;if(a&&!(h.length>0)){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",r=null,t=!1;for(let a of e){let e=a.types.find(e=>e.startsWith("image/"));if(void 0!==e){r=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=y.safeParse(JSON.parse(n));if(l.success){t=!0;let e=l.data;if(a="".concat(e.name,".png"),!r){let a=await fetch(e.image);r=await a.blob()}}else console.warn("Clipboard data validation failed:",l.error)}catch(e){console.warn("Failed to parse JSON from clipboard:",e)}if(!r){t?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=h.length;if(i>=10){s.Am.error("You can only upload ".concat(10," images at a time."));return}let n=new File([r],a,{type:r.type});b(e=>[...e,{source:"figma",status:"uploading",image:n}]),N({index:i,imageData:n,source:"figma"}),s.Am.success("Pasted ".concat(a).concat(t?" 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.")}}},N=async e=>{var a;let{index:r,imageData:t,source:i}=e,n=A.current,l=await p.managerClient.project.getSliceMachineConfig(),s=null==l?void 0:null===(a=l.libraries)||void 0===a?void 0:a[0];if(void 0===s)throw Error("No library found in the config.");D({index:r,slice:e=>({...e,status:"uploading"})});try{let e=await j({image:t});if(n!==A.current)return;L({index:r,imageUrl:e,libraryID:s,source:i})}catch(e){if(n!==A.current)return;D({index:r,slice:e=>({...e,status:"uploadError",onRetry:()=>void N({index:r,imageData:t,source:i})})})}},L=async e=>{let{index:a,imageUrl:r,libraryID:t,source:i}=e,n=A.current;D({index:a,slice:e=>({...e,status:"generating",thumbnailUrl:r})});try{let e=await p.managerClient.customTypes.inferSlice({source:i,libraryID:t,imageUrl:r});if(n!==A.current)return;b(t=>t.map((t,i)=>i!==a?t:{...t,status:"success",thumbnailUrl:r,model:function(e){let{existingSlices:a,newSlices:r,slice:t}=e,i=new Set,n=new Set;for(let{id:e,name:r}of a)i.add(e),n.add(r.toLowerCase());for(let e of r)"success"===e.status&&(i.add(e.model.id),n.add(e.model.name.toLowerCase()));let l=t.id,s=2;for(;i.has(l);)l="".concat(t.id,"_").concat(s),s++;let o=t.name;for(s=2;n.has(o.toLowerCase());)o="".concat(t.name).concat(s),s++;return{...t,id:l,name:o}}({existingSlices:k.current,newSlices:h,slice:e.slice})}))}catch(e){if(n!==A.current)return;D({index:a,slice:e=>({...e,status:"generateError",thumbnailUrl:r,onRetry:()=>{L({index:a,imageUrl:r,libraryID:t,source:i})}})})}},U=async()=>{let e=h.reduce((e,a)=>("success"===a.status&&e.push(a),e),[]);if(!e.length)return;let a=A.current;try{let{slices:t,library:i}=await v(e.filter(e=>"upload"===e.source));if(a!==A.current)return;A.current=crypto.randomUUID();let n=await (0,c.y0)();for(let{model:e,langSmithUrl:a}of(C(n.libraries),S(),I("createSlice"),t))c.Xe.track({event:"slice:created",id:e.id,name:e.name,library:i,location:r,mode:"ai",langSmithUrl:a}),(0,d.nZ)({type:"model",library:i,sliceId:e.id,variationId:e.variations[0].id,langSmithUrl:a});s.Am.success("".concat(e.length," new slice").concat(e.length>1?"s":""," successfully generated."))}catch(e){if(a!==A.current)return;s.Am.error("An unexpected error happened while adding slices.")}},P=h.some(e=>"uploading"===e.status||"generating"===e.status);return(0,t.jsxs)(i.ae,{open:a,onOpenChange:e=>{e||(o(),A.current=crypto.randomUUID(),b([]))},children:[(0,t.jsx)(i.al,{title:"Generate from image"}),(0,t.jsxs)(i.aj,{gap:0,children:[(0,t.jsx)(i.ak,{hidden:!0,children:"Upload images to generate slices with AI"}),0===h.length?(0,t.jsxs)(i.D,{padding:16,height:"100%",gap:16,display:"flex",flexDirection:"column",children:[(0,t.jsxs)(i.D,{display:"flex",gap:16,alignItems:"center",backgroundColor:"grey2",padding:16,borderRadius:12,children:[(0,t.jsxs)(i.D,{display:"flex",gap:8,alignItems:"center",flexGrow:1,children:[(0,t.jsx)(i.D,{width:48,height:48,backgroundColor:"grey12",borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",children:(0,t.jsx)(g.Y,{variant:"original",height:25})}),(0,t.jsxs)(i.D,{display:"flex",flexDirection:"column",flexGrow:1,children:[(0,t.jsx)(i.bL,{variant:"bold",children:"Want to work faster?"}),(0,t.jsx)(i.bL,{variant:"small",color:"grey11",children:"Copy frames from Figma with the Slice Machine plugin and paste them here."})]})]}),(0,t.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,t.jsx)(i.aF,{onFilesSelected:E,assetType:"image",maxFiles:10,overlay:(0,t.jsx)(w,{onFilesSelected:E,onPaste:()=>void F(),droppingFiles:!0}),children:(0,t.jsx)(w,{onFilesSelected:E,onPaste:()=>void F()})})]}):(0,t.jsx)(i.bn,{stableScrollbar:!1,children:(0,t.jsx)(i.D,{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,padding:16,children:h.map((e,a)=>(0,t.jsx)(x,{slice:e},"slice-".concat(a)))})}),(0,t.jsx)(i.ah,{children:(0,t.jsx)(i.ai,{disabled:P,children:"Close"})})]})]})}function w(e){let{droppingFiles:a=!1,onFilesSelected:r,onPaste:n}=e;return(0,t.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,t.jsx)(i.s,{children:(0,t.jsxs)(i.D,{display:"flex",flexDirection:"column",gap:16,alignItems:"center",children:[(0,t.jsx)(i.x,{lineColor:"purple11",backgroundColor:"purple5",name:"cloudUpload",size:"large"}),(0,t.jsxs)(i.D,{display:"flex",flexDirection:"column",gap:4,alignItems:"center",children:[(0,t.jsx)(i.bL,{children:"Generate slices from your designs"}),(0,t.jsx)(i.bL,{variant:"small",color:"grey11",children:"Upload your design images or paste them directly from Figma."})]}),(0,t.jsxs)(i.D,{display:"flex",alignItems:"center",gap:16,children:[(0,t.jsx)(i.E,{size:"small",renderStartIcon:()=>(0,t.jsx)(g.Y,{variant:"original",height:16}),color:"grey",onClick:n,children:"Paste from Figma"}),(0,t.jsx)(i.aG,{size:"small",onFilesSelected:r,color:"purple",invisible:!0,children:"Add images"})]})]})})})}async function j(e){let{image:a}=e,r=[await p.managerClient.project.getResolvedRepositoryName(),"shared-slices","prismic-inferred-slices",crypto.randomUUID()].join("/");await p.managerClient.screenshots.initS3ACL();let{url:t}=await p.managerClient.screenshots.uploadScreenshot({keyPrefix:r,data:a});return t}async function v(e){let{libraries:a=[]}=await p.managerClient.project.getSliceMachineConfig(),r=a[0];if(!r)throw Error("No library found in the config.");for(let{model:a}of e){let{errors:e}=await p.managerClient.slices.createSlice({libraryID:r,model:a});if(e.length)throw Error("Failed to create slice ".concat(a.id,"."))}let t=await Promise.all(e.map(async e=>{let{model:a,image:t,langSmithUrl:i}=e;return await p.managerClient.slices.updateSliceScreenshot({libraryID:r,sliceID:a.id,variationID:a.variations[0].id,data:t}),{model:a,langSmithUrl:i}}));return{library:r,slices:t}}},27213:function(e,a,r){r.d(a,{F:function(){return n}});var t=r(52322),i=r(11699);let n=e=>{let{menuType:a}=e;return{fromImage:{BackgroundIcon:(0,t.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,t.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,t.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,t.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,r){r.d(a,{c:function(){return b}});var t=r(52322),i=r(2784),n=r(36131),l=r(75289),s=r(94160),o=r(98250),c=r(88932),d=r(63908),u=r(358),m=r(80148);async function g(e){let{sliceName:a,libraryName:r,location:t,onSuccess:i}=e;try{let e=(0,d.fo)(a),{errors:n}=await m.managerClient.slices.createSlice({libraryID:r,model:e});if(n.length>0)throw n;s.Xe.track({event:"slice:created",id:(0,u.MP)(a),name:a,library:r,location:t,mode:"manual"}),await i(e)}catch(r){let e="An unexpected error happened while creating slice ".concat(a,".");console.error(e,r),c.Am.error(e)}}var p=r(68968),f=r(59532),h=r(54597),x=r(46999),y=r(63019);let b=e=>{let{onClose:a,onSuccess:r,localLibraries:c,location:d,remoteSlices:u}=e,{createSliceSuccess:m}=(0,h.Z)(),[b,w]=(0,i.useState)(!1),{syncChanges:j}=(0,p.g)(),{completeStep:v}=(0,o.k)(),S=async e=>{let a=e.sliceName,t=e.from;w(!0),await g({sliceName:a,libraryName:t,location:d,onSuccess:async e=>{m((await (0,s.y0)()).libraries),r(e,t),j(),v("createSlice")}})};return(0,t.jsx)(f.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:r,setFieldValue:i,errors:s}=e;return(0,t.jsxs)(l.xu,{children:[(0,t.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,t.jsx)(l.__,{htmlFor:"from",sx:{mb:2},children:"Target Library"}),(0,t.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:r.from,label:r.from},styles:{option:e=>({...e,color:"#161618"})},theme:e=>({...e,colors:{...e.colors,primary:"#E9E8EA"}}),menuPortalTarget:document.body})]})}})}},63019:function(e,a,r){r.d(a,{h:function(){return o}});var t=r(96009),i=r.n(t),n=r(74600),l=r.n(n),s=r(7974);function o(e,a,r){let{sliceName:t}=e;return t?s.lS.includes(t.toLowerCase())?{sliceName:'Name "'.concat(t,'" is reserved for Slice Machine use.')}:s.xo.exec(t)?l()(i()(t)).replace(/\s/gm,"")!==t.trim()?{sliceName:"Value has to be PascalCased."}:t.match(/^\d/)?{sliceName:"Value cannot start with a number."}:[...a.flatMap(e=>e.components.map(e=>e.model.name)),...r.map(e=>e.name)].includes(t)?{sliceName:"Slice name is already taken."}:void 0:{sliceName:"No special characters allowed."}:{sliceName:"Cannot be empty"}}},21151:function(e,a,r){var t=r(52322),i=r(75289);a.Z=function(e){let{elems:a,renderElem:r,defineElementKey:n,gridTemplateMinPx:l="320px",gridGap:s="16px",sx:o}=e;return(0,t.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,t.jsx)("span",{children:r(e,a)},"".concat(n(e),"-").concat(a+1)):null)})}}}]);