@opentf/react-sandbox/dist/index.js

The CodeSandbox sandpack wrapper with tabs layout.

import{SandpackProvider as J,SandpackCodeEditor as w,SandpackPreview as L,SandpackLayout as E,SandpackConsole as P}from"@codesandbox/sandpack-react";import{useState as D}from"react";import{jsx as y,jsxs as A}from"react/jsx-runtime";function S({tabIndex:p,labels:l,panels:r,style:a,theme:n}){let[i,g]=D(p||0),t=s=>{let o=n==="dark"?"rgb(23, 26, 28)":"rgb(240, 244, 248)",d=n==="dark"?"rgb(85, 94, 104)":"rgb(205, 215, 225)",u=n==="dark"?"rgb(221, 231, 238)":"rgb(50, 56, 62)",b=n==="dark"?"rgb(240, 244, 248)":"rgb(23, 26, 28)",h=n==="dark"?"rgb(240, 244, 248)":"rgb(23, 26, 28)",m={backgroundColor:s===i?d:o,color:s===i?b:u,padding:"6px",fontSize:"12px",fontWeight:s===i?"bold":void 0,cursor:"pointer",border:0};return m.borderBottom=s===i?`2px solid ${h}`:"0px",m};return A("div",{children:[y("div",{style:{display:"flex",justifyContent:"center"},children:l.map((s,o)=>y("button",{onClick:()=>g(o),style:t(o),children:s},o))}),y("div",{style:{position:"relative",height:`calc(${a.height} - 50px`},children:r.map((s,o)=>y("div",{style:{visibility:i===o?"visible":"hidden",position:"absolute",top:5,left:0,width:"100%",border:"1px solid gray",borderRadius:"5px",height:"100%"},children:s},o))})]})}import{useState as H}from"react";import{Console as Z}from"console-feed";import{useSandpack as z,useSandpackConsole as O,useSandpackShellStdout as N}from"@codesandbox/sandpack-react";import V from"strip-ansi";import{jsx as c,jsxs as v}from"react/jsx-runtime";function C(){let{sandpack:{environment:p}}=z(),[l,r]=H(p==="node"?"Server":"Client"),{logs:a,reset:n}=N({resetOnPreviewRestart:!0,clientId:void 0}),{logs:i,reset:g}=O({showSyntaxError:!0,resetOnPreviewRestart:!0}),t=l==="Server"?a.map(d=>({id:d.id,data:[V(d.data)],method:"log"})):i,s=l==="Server"?n:g,o=d=>({background:d===l?"#0074D9":"#AAAAAA",color:"white",fontWeight:"bold",borderRadius:"15px",border:"0",padding:"5px 10px",marginRight:"5px",cursor:"pointer"});return v("div",{style:{height:"100%"},children:[v("div",{style:{background:"#151515",padding:"8px",height:"35px",display:"flex",justifyContent:"space-between",alignItems:"center",fontFamily:"monospace"},children:[v("div",{style:{display:"flex",alignItems:"center"},children:[v("svg",{style:{width:"20px",height:"20px",fill:"gray"},children:[c("path",{d:"M5.65871 3.62037C5.44905 3.44066 5.1334 3.46494 4.95368 3.6746C4.77397 3.88427 4.79825 4.19992 5.00792 4.37963L5.65871 3.62037ZM5.00792 11.6204C4.79825 11.8001 4.77397 12.1157 4.95368 12.3254C5.1334 12.5351 5.44905 12.5593 5.65871 12.3796L5.00792 11.6204ZM9.9114 7.92407L10.2368 7.54445L9.9114 7.92407ZM5.00792 4.37963L9.586 8.3037L10.2368 7.54445L5.65871 3.62037L5.00792 4.37963ZM9.586 7.6963L5.00792 11.6204L5.65871 12.3796L10.2368 8.45555L9.586 7.6963ZM9.586 8.3037C9.39976 8.14407 9.39976 7.85594 9.586 7.6963L10.2368 8.45555C10.5162 8.2161 10.5162 7.7839 10.2368 7.54445L9.586 8.3037Z"}),c("path",{d:"M10 11.5C9.72386 11.5 9.5 11.7239 9.5 12C9.5 12.2761 9.72386 12.5 10 12.5V11.5ZM14.6667 12.5C14.9428 12.5 15.1667 12.2761 15.1667 12C15.1667 11.7239 14.9428 11.5 14.6667 11.5V12.5ZM10 12.5H14.6667V11.5H10V12.5Z"})]}),c("span",{style:{color:"gray"},children:"Terminal"})]}),v("div",{children:[c("button",{style:o("Client"),onClick:()=>r("Client"),children:"Client"}),c("button",{style:o("Server"),onClick:()=>r("Server"),children:"Server"})]})]}),v("div",{style:{backgroundColor:"#242424",padding:"10px",overflow:"auto",height:"calc(100% - 35px)",boxSizing:"border-box"},children:[c(Z,{logs:t,variant:"dark"}),c("button",{title:"Clear",onClick:s,style:{borderRadius:"50%",position:"absolute",right:"20px",bottom:"15px",border:"0px",width:"25px",height:"25px",cursor:"pointer",padding:"0px",display:"flex",alignItems:"center"},children:c("svg",{style:{margin:"auto",width:"20px",fill:"white"},focusable:"false","aria-hidden":"true",viewBox:"0 0 24 24","data-testid":"ClearAllOutlinedIcon",children:c("path",{d:"M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z"})})})]})]})}import{useEffect as j,useRef as F,useState as X}from"react";import{jsx as k,jsxs as $}from"react/jsx-runtime";function f({left:p,right:l}){let[r,a]=X({drag:!1,splitterPos:50}),n=F(null),i=t=>{if(n.current!==null){let s=n.current.parentElement,{left:o,width:d}=s.getBoundingClientRect(),u=(t.clientX-o)/d*100,b=Math.min(Math.max(u,25),75);a(h=>({...h,splitterPos:b}))}},g=()=>{n.current=null,a(t=>({...t,drag:!1}))};return j(()=>(document.body.addEventListener("mousemove",i),document.body.addEventListener("mouseup",g),()=>{document.body.removeEventListener("mousemove",i),document.body.removeEventListener("mouseup",g)}),[]),$("div",{style:{display:"grid",gridTemplateColumns:`${r.splitterPos}% 1fr`,position:"relative",width:"100%",boxSizing:"border-box",height:"100%"},children:[k("div",{style:{height:"100%",overflow:"hidden",pointerEvents:r.drag?"none":"initial"},children:p}),k("div",{style:{width:"6px",height:"100%",position:"absolute",left:`calc(${r.splitterPos}% - 3px)`,zIndex:5,background:"transparent",cursor:"col-resize"},onMouseDown:t=>{n.current=t.target,a({...r,drag:!0})},onMouseEnter:t=>{t.target.style.background="#0074D9"},onMouseLeave:t=>{t.target.style.background="transparent"}}),k("div",{style:{height:"100%",overflow:"hidden",pointerEvents:r.drag?"none":"initial"},children:l})]})}import{jsx as e,jsxs as _}from"react/jsx-runtime";function W(p,l){let a={react:"/App.js","react-ts":"/App.tsx",vanilla:"/index.js","vanilla-ts":"/index.ts",static:"/index.html",nextjs:"pages/index.js",node:"/index.js",vite:"/index.js","vite-react":"/App.jsx","vite-react-ts":"/App.tsx"}[l];return a?{[a]:p}:{}}function M(p){let{tabIndex:l,deps:r=[],code:a,files:n,template:i="react",cdns:g=[],consoleType:t="Basic",layout:s="Default",theme:o="auto",...d}=p,u={...W(a,i),...n},h={...{height:"350px"},...d.style},m={};return r.forEach(R=>{let x=R.match(/(?:(@.+\/))?(.+)/);if(x){let T=x[1]||"",[I,B]=(x[2]||"").split("@");m[T+I]=B||"latest"}}),e("div",{style:h,children:e(J,{style:{height:"100%"},template:i,options:{externalResources:g},theme:o,files:u,customSetup:{dependencies:m},children:(()=>{switch(s){case"Tabs":return e(S,{tabIndex:l,style:h,labels:["CODE","PREVIEW","CONSOLE"],theme:o==="dark"?"dark":"light",panels:[e(E,{style:{height:"100%"},children:e(w,{showInlineErrors:!0,showLineNumbers:!0,showTabs:!0,showRunButton:!0,style:{height:"100%"}})}),e(L,{showNavigator:!0,style:{height:"100%"}}),t==="Basic"?e(P,{showSyntaxError:!0,resetOnPreviewRestart:!0,style:{height:"100%"}}):e(C,{})]});case"Code_Console":return _(E,{style:{height:"100%"},children:[e(L,{style:{display:"none"}}),e(f,{left:e(w,{showInlineErrors:!0,showLineNumbers:!0,showTabs:!0,showRunButton:!0,style:{height:"100%"}}),right:t==="Basic"?e(P,{showSyntaxError:!0,resetOnPreviewRestart:!0,style:{height:"100%"}}):e(C,{})})]});default:return e(E,{style:{height:"100%"},children:e(f,{left:e(w,{showInlineErrors:!0,showLineNumbers:!0,showTabs:!0,showRunButton:!0,style:{height:"100%"}}),right:e(L,{showNavigator:!0,style:{height:"100%"}})})})}})()})})}export{M as SandBox};
//# sourceMappingURL=index.js.map