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

The CodeSandbox sandpack wrapper with tabs layout.

"use strict";var z=Object.create;var C=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var F=(e,t)=>{for(var o in t)C(e,o,{get:t[o],enumerable:!0})},M=(e,t,o,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of N(t))!j.call(e,n)&&n!==o&&C(e,n,{get:()=>t[n],enumerable:!(d=O(t,n))||d.enumerable});return e};var X=(e,t,o)=>(o=e!=null?z(V(e)):{},M(t||!e||!e.__esModule?C(o,"default",{value:e,enumerable:!0}):o,e)),$=e=>M(C({},"__esModule",{value:!0}),e);var W={};F(W,{SandBox:()=>P});module.exports=$(W);var i=require("@codesandbox/sandpack-react");var R=require("react"),h=require("react/jsx-runtime");function L({tabIndex:e,labels:t,panels:o,style:d,theme:n}){let[c,u]=(0,R.useState)(e||0),a=p=>{let l=n==="dark"?"rgb(23, 26, 28)":"rgb(240, 244, 248)",g=n==="dark"?"rgb(85, 94, 104)":"rgb(205, 215, 225)",v=n==="dark"?"rgb(221, 231, 238)":"rgb(50, 56, 62)",S=n==="dark"?"rgb(240, 244, 248)":"rgb(23, 26, 28)",m=n==="dark"?"rgb(240, 244, 248)":"rgb(23, 26, 28)",x={backgroundColor:p===c?g:l,color:p===c?S:v,padding:"6px",fontSize:"12px",fontWeight:p===c?"bold":void 0,cursor:"pointer",border:0};return x.borderBottom=p===c?`2px solid ${m}`:"0px",x};return(0,h.jsxs)("div",{children:[(0,h.jsx)("div",{style:{display:"flex",justifyContent:"center"},children:t.map((p,l)=>(0,h.jsx)("button",{onClick:()=>u(l),style:a(l),children:p},l))}),(0,h.jsx)("div",{style:{position:"relative",height:`calc(${d.height} - 50px`},children:o.map((p,l)=>(0,h.jsx)("div",{style:{visibility:c===l?"visible":"hidden",position:"absolute",top:5,left:0,width:"100%",border:"1px solid gray",borderRadius:"5px",height:"100%"},children:p},l))})]})}var T=require("react"),I=require("console-feed"),b=require("@codesandbox/sandpack-react"),B=X(require("strip-ansi"),1),r=require("react/jsx-runtime");function E(){let{sandpack:{environment:e}}=(0,b.useSandpack)(),[t,o]=(0,T.useState)(e==="node"?"Server":"Client"),{logs:d,reset:n}=(0,b.useSandpackShellStdout)({resetOnPreviewRestart:!0,clientId:void 0}),{logs:c,reset:u}=(0,b.useSandpackConsole)({showSyntaxError:!0,resetOnPreviewRestart:!0}),a=t==="Server"?d.map(g=>({id:g.id,data:[(0,B.default)(g.data)],method:"log"})):c,p=t==="Server"?n:u,l=g=>({background:g===t?"#0074D9":"#AAAAAA",color:"white",fontWeight:"bold",borderRadius:"15px",border:"0",padding:"5px 10px",marginRight:"5px",cursor:"pointer"});return(0,r.jsxs)("div",{style:{height:"100%"},children:[(0,r.jsxs)("div",{style:{background:"#151515",padding:"8px",height:"35px",display:"flex",justifyContent:"space-between",alignItems:"center",fontFamily:"monospace"},children:[(0,r.jsxs)("div",{style:{display:"flex",alignItems:"center"},children:[(0,r.jsxs)("svg",{style:{width:"20px",height:"20px",fill:"gray"},children:[(0,r.jsx)("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"}),(0,r.jsx)("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"})]}),(0,r.jsx)("span",{style:{color:"gray"},children:"Terminal"})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("button",{style:l("Client"),onClick:()=>o("Client"),children:"Client"}),(0,r.jsx)("button",{style:l("Server"),onClick:()=>o("Server"),children:"Server"})]})]}),(0,r.jsxs)("div",{style:{backgroundColor:"#242424",padding:"10px",overflow:"auto",height:"calc(100% - 35px)",boxSizing:"border-box"},children:[(0,r.jsx)(I.Console,{logs:a,variant:"dark"}),(0,r.jsx)("button",{title:"Clear",onClick:p,style:{borderRadius:"50%",position:"absolute",right:"20px",bottom:"15px",border:"0px",width:"25px",height:"25px",cursor:"pointer",padding:"0px",display:"flex",alignItems:"center"},children:(0,r.jsx)("svg",{style:{margin:"auto",width:"20px",fill:"white"},focusable:"false","aria-hidden":"true",viewBox:"0 0 24 24","data-testid":"ClearAllOutlinedIcon",children:(0,r.jsx)("path",{d:"M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z"})})})]})]})}var f=require("react"),y=require("react/jsx-runtime");function k({left:e,right:t}){let[o,d]=(0,f.useState)({drag:!1,splitterPos:50}),n=(0,f.useRef)(null),c=a=>{if(n.current!==null){let p=n.current.parentElement,{left:l,width:g}=p.getBoundingClientRect(),v=(a.clientX-l)/g*100,S=Math.min(Math.max(v,25),75);d(m=>({...m,splitterPos:S}))}},u=()=>{n.current=null,d(a=>({...a,drag:!1}))};return(0,f.useEffect)(()=>(document.body.addEventListener("mousemove",c),document.body.addEventListener("mouseup",u),()=>{document.body.removeEventListener("mousemove",c),document.body.removeEventListener("mouseup",u)}),[]),(0,y.jsxs)("div",{style:{display:"grid",gridTemplateColumns:`${o.splitterPos}% 1fr`,position:"relative",width:"100%",boxSizing:"border-box",height:"100%"},children:[(0,y.jsx)("div",{style:{height:"100%",overflow:"hidden",pointerEvents:o.drag?"none":"initial"},children:e}),(0,y.jsx)("div",{style:{width:"6px",height:"100%",position:"absolute",left:`calc(${o.splitterPos}% - 3px)`,zIndex:5,background:"transparent",cursor:"col-resize"},onMouseDown:a=>{n.current=a.target,d({...o,drag:!0})},onMouseEnter:a=>{a.target.style.background="#0074D9"},onMouseLeave:a=>{a.target.style.background="transparent"}}),(0,y.jsx)("div",{style:{height:"100%",overflow:"hidden",pointerEvents:o.drag?"none":"initial"},children:t})]})}var s=require("react/jsx-runtime");function J(e,t){let d={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"}[t];return d?{[d]:e}:{}}function P(e){let{tabIndex:t,deps:o=[],code:d,files:n,template:c="react",cdns:u=[],consoleType:a="Basic",layout:p="Default",theme:l="auto",...g}=e,v={...J(d,c),...n},m={...{height:"350px"},...g.style},x={};return o.forEach(D=>{let w=D.match(/(?:(@.+\/))?(.+)/);if(w){let A=w[1]||"",[H,Z]=(w[2]||"").split("@");x[A+H]=Z||"latest"}}),(0,s.jsx)("div",{style:m,children:(0,s.jsx)(i.SandpackProvider,{style:{height:"100%"},template:c,options:{externalResources:u},theme:l,files:v,customSetup:{dependencies:x},children:(()=>{switch(p){case"Tabs":return(0,s.jsx)(L,{tabIndex:t,style:m,labels:["CODE","PREVIEW","CONSOLE"],theme:l==="dark"?"dark":"light",panels:[(0,s.jsx)(i.SandpackLayout,{style:{height:"100%"},children:(0,s.jsx)(i.SandpackCodeEditor,{showInlineErrors:!0,showLineNumbers:!0,showTabs:!0,showRunButton:!0,style:{height:"100%"}})}),(0,s.jsx)(i.SandpackPreview,{showNavigator:!0,style:{height:"100%"}}),a==="Basic"?(0,s.jsx)(i.SandpackConsole,{showSyntaxError:!0,resetOnPreviewRestart:!0,style:{height:"100%"}}):(0,s.jsx)(E,{})]});case"Code_Console":return(0,s.jsxs)(i.SandpackLayout,{style:{height:"100%"},children:[(0,s.jsx)(i.SandpackPreview,{style:{display:"none"}}),(0,s.jsx)(k,{left:(0,s.jsx)(i.SandpackCodeEditor,{showInlineErrors:!0,showLineNumbers:!0,showTabs:!0,showRunButton:!0,style:{height:"100%"}}),right:a==="Basic"?(0,s.jsx)(i.SandpackConsole,{showSyntaxError:!0,resetOnPreviewRestart:!0,style:{height:"100%"}}):(0,s.jsx)(E,{})})]});default:return(0,s.jsx)(i.SandpackLayout,{style:{height:"100%"},children:(0,s.jsx)(k,{left:(0,s.jsx)(i.SandpackCodeEditor,{showInlineErrors:!0,showLineNumbers:!0,showTabs:!0,showRunButton:!0,style:{height:"100%"}}),right:(0,s.jsx)(i.SandpackPreview,{showNavigator:!0,style:{height:"100%"}})})})}})()})})}0&&(module.exports={SandBox});
//# sourceMappingURL=index.cjs.map