@opentf/react-sandbox
Version:
The CodeSandbox sandpack wrapper with tabs layout.
1 lines • 21.4 kB
Source Map (JSON)
{"version":3,"sources":["../src/index.ts","../src/SandBox.tsx","../src/Tabs.tsx","../src/LogsContainer.tsx","../src/SplitPanel.tsx"],"sourcesContent":["import SandBox from './SandBox';\n\nexport { SandBox };\n","import {\n SandpackProvider,\n SandpackCodeEditor,\n SandpackPreview,\n SandpackLayout,\n SandpackConsole,\n SandpackPredefinedTemplate,\n SandpackThemeProp,\n} from '@codesandbox/sandpack-react';\nimport Tabs from './Tabs';\nimport { LogsContainer } from './LogsContainer';\nimport SplitPanel from './SplitPanel';\n\ninterface Props {\n code: string;\n layout?: 'Default' | 'Tabs' | 'Code_Console';\n consoleType?: 'Basic' | 'Advanced';\n tabIndex?: number;\n deps?: string[];\n files?: Record<string, string>;\n template?: SandpackPredefinedTemplate;\n cdns?: string[];\n style?: Record<string, string>;\n theme?: SandpackThemeProp;\n}\n\nfunction getDefaultTemplateFile(code: string, template: string) {\n const templateFile: Record<string, string> = {\n react: '/App.js',\n 'react-ts': '/App.tsx',\n vanilla: '/index.js',\n 'vanilla-ts': '/index.ts',\n static: '/index.html',\n nextjs: 'pages/index.js',\n node: '/index.js',\n vite: '/index.js',\n 'vite-react': '/App.jsx',\n 'vite-react-ts': '/App.tsx',\n };\n const key = templateFile[template];\n\n if (!key) {\n return {};\n }\n\n return {\n [key as string]: code,\n };\n}\n\nexport default function SandBox(props: Props) {\n const {\n tabIndex,\n deps = [],\n code,\n files,\n template = 'react',\n cdns = [],\n consoleType = 'Basic',\n layout = 'Default',\n theme = 'auto',\n ...otherProps\n } = props;\n const sandboxFiles = { ...getDefaultTemplateFile(code, template), ...files };\n const defaultStyles = {\n height: '350px',\n };\n\n const styles = {\n ...defaultStyles,\n ...otherProps.style,\n };\n\n const sandboxDeps: Record<string, string> = {};\n deps.forEach((d) => {\n const match = d.match(/(?:(@.+\\/))?(.+)/);\n if (match) {\n const org = match[1] || '';\n const [pkgName, ver] = (match[2] || '').split('@');\n sandboxDeps[org + pkgName] = ver || 'latest';\n }\n });\n\n const renderByLayout = () => {\n switch (layout) {\n case 'Tabs':\n return (\n <Tabs\n tabIndex={tabIndex}\n style={styles}\n labels={['CODE', 'PREVIEW', 'CONSOLE']}\n theme={theme === 'dark' ? 'dark' : 'light'}\n panels={[\n <SandpackLayout style={{ height: '100%' }}>\n <SandpackCodeEditor\n showInlineErrors\n showLineNumbers\n showTabs\n showRunButton\n style={{ height: '100%' }}\n />\n </SandpackLayout>,\n <SandpackPreview showNavigator style={{ height: '100%' }} />,\n consoleType === 'Basic' ? (\n <SandpackConsole\n showSyntaxError\n resetOnPreviewRestart\n style={{ height: '100%' }}\n />\n ) : (\n <LogsContainer />\n ),\n ]}\n />\n );\n case 'Code_Console':\n return (\n <SandpackLayout style={{ height: '100%' }}>\n <SandpackPreview style={{ display: 'none' }} />\n <SplitPanel\n left={\n <SandpackCodeEditor\n showInlineErrors\n showLineNumbers\n showTabs\n showRunButton\n style={{ height: '100%' }}\n />\n }\n right={\n consoleType === 'Basic' ? (\n <SandpackConsole\n showSyntaxError\n resetOnPreviewRestart\n style={{ height: '100%' }}\n />\n ) : (\n <LogsContainer />\n )\n }\n />\n </SandpackLayout>\n );\n default:\n return (\n <SandpackLayout style={{ height: '100%' }}>\n <SplitPanel\n left={\n <SandpackCodeEditor\n showInlineErrors\n showLineNumbers\n showTabs\n showRunButton\n style={{ height: '100%' }}\n />\n }\n right={\n <SandpackPreview showNavigator style={{ height: '100%' }} />\n }\n />\n </SandpackLayout>\n );\n }\n };\n\n return (\n <div style={styles}>\n <SandpackProvider\n style={{ height: '100%' }}\n template={template}\n options={{ externalResources: cdns }}\n theme={theme}\n files={sandboxFiles}\n customSetup={{\n dependencies: sandboxDeps,\n }}\n >\n {renderByLayout()}\n </SandpackProvider>\n </div>\n );\n}\n","import { CSSProperties, useState } from 'react';\n\ninterface Props {\n labels: string[];\n panels: JSX.Element[];\n style: Record<string, string>;\n tabIndex?: number | undefined;\n theme: 'light' | 'dark';\n}\n\nexport default function Tabs({\n tabIndex,\n labels,\n panels,\n style,\n theme,\n}: Props) {\n const [selectedIndex, setSelectedIndex] = useState(tabIndex || 0);\n const getStyles = (i: number) => {\n const bgColor = theme === 'dark' ? 'rgb(23, 26, 28)' : 'rgb(240, 244, 248)';\n const bgColorSelected =\n theme === 'dark' ? 'rgb(85, 94, 104)' : 'rgb(205, 215, 225)';\n const textColor =\n theme === 'dark' ? 'rgb(221, 231, 238)' : 'rgb(50, 56, 62)';\n const textColorSelected =\n theme === 'dark' ? 'rgb(240, 244, 248)' : 'rgb(23, 26, 28)';\n const borderBottomColor =\n theme === 'dark' ? 'rgb(240, 244, 248)' : 'rgb(23, 26, 28)';\n const styles: CSSProperties = {\n backgroundColor: i === selectedIndex ? bgColorSelected : bgColor,\n color: i === selectedIndex ? textColorSelected : textColor,\n padding: '6px',\n fontSize: '12px',\n fontWeight: i === selectedIndex ? 'bold' : undefined,\n cursor: 'pointer',\n border: 0,\n };\n\n styles['borderBottom'] =\n i === selectedIndex ? `2px solid ${borderBottomColor}` : '0px';\n\n return styles;\n };\n\n return (\n <div>\n <div style={{ display: 'flex', justifyContent: 'center' }}>\n {labels.map((l, i) => (\n <button\n key={i}\n onClick={() => setSelectedIndex(i)}\n style={getStyles(i)}\n >\n {l}\n </button>\n ))}\n </div>\n <div\n style={{\n position: 'relative',\n height: `calc(${style['height']} - 50px`,\n }}\n >\n {panels.map((p, i) => (\n <div\n key={i}\n style={{\n visibility: selectedIndex === i ? 'visible' : 'hidden',\n position: 'absolute',\n top: 5,\n left: 0,\n width: '100%',\n border: '1px solid gray',\n borderRadius: '5px',\n height: '100%',\n }}\n >\n {p}\n </div>\n ))}\n </div>\n </div>\n );\n}\n","import { useState } from 'react';\nimport { Console } from 'console-feed';\nimport type { Message } from 'console-feed/lib/definitions/Component';\nimport {\n useSandpack,\n useSandpackConsole,\n useSandpackShellStdout,\n} from '@codesandbox/sandpack-react';\nimport stripAnsi from 'strip-ansi';\n\nfunction LogsContainer() {\n const {\n sandpack: { environment },\n } = useSandpack();\n const [tab, setTab] = useState(environment === 'node' ? 'Server' : 'Client');\n const { logs: shellLogs, reset: shellReset } = useSandpackShellStdout({\n resetOnPreviewRestart: true,\n clientId: undefined,\n });\n const { logs: clientLogs, reset: clientReset } = useSandpackConsole({\n showSyntaxError: true,\n resetOnPreviewRestart: true,\n });\n const logs =\n tab === 'Server'\n ? shellLogs.map((o) => ({\n id: o.id,\n data: [stripAnsi(o.data)],\n method: 'log',\n }))\n : clientLogs;\n const reset = tab === 'Server' ? shellReset : clientReset;\n const getTabStyles = (tabName: string) => {\n const styles = {\n background: tabName === tab ? '#0074D9' : '#AAAAAA',\n color: 'white',\n fontWeight: 'bold',\n borderRadius: '15px',\n border: '0',\n padding: '5px 10px',\n marginRight: '5px',\n cursor: 'pointer',\n };\n\n return styles;\n };\n\n return (\n <div style={{ height: '100%' }}>\n <div\n style={{\n background: '#151515',\n padding: '8px',\n height: '35px',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n fontFamily: 'monospace',\n }}\n >\n <div style={{ display: 'flex', alignItems: 'center' }}>\n <svg style={{ width: '20px', height: '20px', fill: 'gray' }}>\n <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\" />\n <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\" />\n </svg>\n <span style={{ color: 'gray' }}>Terminal</span>\n </div>\n <div>\n <button\n style={getTabStyles('Client')}\n onClick={() => setTab('Client')}\n >\n Client\n </button>\n <button\n style={getTabStyles('Server')}\n onClick={() => setTab('Server')}\n >\n Server\n </button>\n </div>\n </div>\n <div\n style={{\n backgroundColor: '#242424',\n padding: '10px',\n overflow: 'auto',\n height: 'calc(100% - 35px)',\n boxSizing: 'border-box',\n }}\n >\n <Console logs={logs as Message[]} variant=\"dark\" />\n <button\n title=\"Clear\"\n onClick={reset}\n style={{\n borderRadius: '50%',\n position: 'absolute',\n right: '20px',\n bottom: '15px',\n border: '0px',\n width: '25px',\n height: '25px',\n cursor: 'pointer',\n padding: '0px',\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <svg\n style={{ margin: 'auto', width: '20px', fill: 'white' }}\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n data-testid=\"ClearAllOutlinedIcon\"\n >\n <path d=\"M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z\"></path>\n </svg>\n </button>\n </div>\n </div>\n );\n}\n\nexport { LogsContainer };\n","/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport { MouseEvent, useEffect, useRef, useState } from 'react';\n\ninterface Props {\n left: JSX.Element;\n right: JSX.Element;\n}\n\nexport default function SplitPanel({ left, right }: Props) {\n const [state, setState] = useState({ drag: false, splitterPos: 50 });\n const splitterRef = useRef<HTMLDivElement | null>(null);\n\n const handleDrag = (e: MouseEvent) => {\n if (splitterRef.current !== null) {\n const container = splitterRef.current.parentElement as HTMLDivElement;\n const { left, width } = container.getBoundingClientRect();\n const offset = ((e.clientX - left) / width) * 100;\n const splitterPos = Math.min(Math.max(offset, 25), 75);\n setState((s) => ({ ...s, splitterPos }));\n }\n };\n\n const stopDragging = (): void => {\n splitterRef.current = null;\n setState((s) => ({ ...s, drag: false }));\n };\n\n useEffect(() => {\n // @ts-ignore\n document.body.addEventListener('mousemove', handleDrag);\n document.body.addEventListener('mouseup', stopDragging);\n\n return () => {\n // @ts-ignore\n document.body.removeEventListener('mousemove', handleDrag);\n document.body.removeEventListener('mouseup', stopDragging);\n };\n }, []);\n\n return (\n <div\n style={{\n display: 'grid',\n gridTemplateColumns: `${state.splitterPos}% 1fr`,\n position: 'relative',\n width: '100%',\n boxSizing: 'border-box',\n height: '100%',\n }}\n >\n <div\n style={{\n height: '100%',\n overflow: 'hidden',\n pointerEvents: state.drag ? 'none' : 'initial',\n }}\n >\n {left}\n </div>\n <div\n style={{\n // marginLeft: '-2px',\n width: '6px',\n height: '100%',\n position: 'absolute',\n left: `calc(${state.splitterPos}% - 3px)`,\n zIndex: 5,\n background: 'transparent',\n cursor: 'col-resize',\n }}\n onMouseDown={(e) => {\n splitterRef.current = e.target as HTMLDivElement;\n setState({ ...state, drag: true });\n }}\n onMouseEnter={(e) => {\n (e.target as HTMLDivElement).style.background = '#0074D9';\n }}\n onMouseLeave={(e) => {\n (e.target as HTMLDivElement).style.background = 'transparent';\n }}\n ></div>\n <div\n style={{\n height: '100%',\n overflow: 'hidden',\n pointerEvents: state.drag ? 'none' : 'initial',\n }}\n >\n {right}\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":["src_exports","__export","SandBox","__toCommonJS","import_sandpack_react","import_react","import_jsx_runtime","Tabs","tabIndex","labels","panels","style","theme","selectedIndex","setSelectedIndex","getStyles","i","bgColor","bgColorSelected","textColor","textColorSelected","borderBottomColor","styles","l","import_react","import_console_feed","import_sandpack_react","import_strip_ansi","import_jsx_runtime","LogsContainer","environment","tab","setTab","shellLogs","shellReset","clientLogs","clientReset","logs","o","stripAnsi","reset","getTabStyles","tabName","import_react","import_jsx_runtime","SplitPanel","left","right","state","setState","splitterRef","handleDrag","e","container","width","offset","splitterPos","s","stopDragging","import_jsx_runtime","getDefaultTemplateFile","code","template","key","SandBox","props","tabIndex","deps","files","cdns","consoleType","layout","theme","otherProps","sandboxFiles","styles","sandboxDeps","d","match","org","pkgName","ver","Tabs","LogsContainer","SplitPanel"]}