From 6418094b0f168c0028a01d5a226e2efa76c2ead1 Mon Sep 17 00:00:00 2001 From: muzam1l Date: Wed, 17 Aug 2022 11:50:49 +0530 Subject: [PATCH] Run prettier through everything. --- .prettierignore | 3 +- .prettierrc.json | 2 +- components/Accounts.tsx | 466 ++++----- components/AlertDialog/index.tsx | 63 +- components/AlertDialog/primitive.tsx | 109 +- components/Box.tsx | 10 +- components/Button.tsx | 382 ++++--- components/ButtonGroup.tsx | 34 +- components/Container.tsx | 18 +- components/ContextMenu/index.tsx | 106 +- components/ContextMenu/primitive.tsx | 128 +-- components/DebugStream.tsx | 219 ++-- components/DeployEditor.tsx | 169 ++- components/Dialog.tsx | 110 +- components/DropdownMenu.tsx | 149 +-- components/EditorNavigation.tsx | 323 +++--- components/Flex.tsx | 50 +- components/Heading.tsx | 22 +- components/HooksEditor.tsx | 246 ++--- components/Input.tsx | 224 ++-- components/Link.tsx | 12 +- components/LogBox.tsx | 173 ++- components/LogText.tsx | 34 +- components/Logo.tsx | 28 +- components/Monaco.tsx | 68 +- components/Navigation.tsx | 394 ++++--- components/PanelBox.tsx | 48 +- components/Popover.tsx | 123 +-- components/Pre.tsx | 16 +- components/RunScript/index.tsx | 259 +++-- components/Select.tsx | 117 +-- components/SetHookDialog.tsx | 323 +++--- components/Spinner.tsx | 16 +- components/Stack.tsx | 16 +- components/Switch.tsx | 40 +- components/Tabs.tsx | 337 +++--- components/Text.tsx | 42 +- components/Textarea.tsx | 158 ++- components/ThemeChanger.tsx | 38 +- components/Tooltip.tsx | 93 +- components/Transaction/index.tsx | 218 ++-- components/Transaction/json.tsx | 231 ++-- components/Transaction/ui.tsx | 275 +++-- components/icons/Carbon.tsx | 12 +- components/icons/Firewall.tsx | 12 +- components/icons/Notary.tsx | 12 +- components/icons/Peggy.tsx | 12 +- components/icons/Starter.tsx | 12 +- components/index.tsx | 32 +- content/amount-schema.json | 12 +- content/transactions.json | 4 +- hooks/useWindowSize.tsx | 26 +- next.config.js | 20 +- package.json | 2 + pages/_app.tsx | 137 +-- pages/_document.tsx | 31 +- pages/_middleware.ts | 16 +- pages/api/auth/[...nextauth].ts | 31 +- pages/api/faucet.ts | 38 +- pages/api/hello.ts | 5 +- pages/api/proxy.ts | 25 +- pages/deploy/[[...slug]].tsx | 66 +- pages/develop/[[...slug]].tsx | 234 ++--- pages/index.tsx | 6 +- pages/sign-in.tsx | 37 +- pages/test/[[...slug]].tsx | 128 ++- public/site.webmanifest | 34 +- raw-loader.d.ts | 8 +- state/actions/addFaucetAccount.ts | 88 +- state/actions/compileCode.ts | 112 +- state/actions/createNewFile.ts | 32 +- state/actions/deleteAccount.ts | 42 +- state/actions/deployHook.tsx | 274 +++-- state/actions/downloadAsZip.ts | 36 +- state/actions/fetchFiles.ts | 117 ++- state/actions/importAccount.ts | 34 +- state/actions/index.ts | 24 +- state/actions/persistSplits.ts | 5 +- state/actions/saveFile.ts | 24 +- state/actions/sendTransaction.ts | 103 +- state/actions/showAlert.ts | 46 +- state/actions/syncToGist.ts | 127 ++- state/actions/updateEditorSettings.ts | 18 +- state/constants/index.ts | 2 +- state/constants/templates.ts | 74 +- state/index.ts | 179 ++-- state/transactions.ts | 388 ++++--- stitches.config.ts | 628 +++++------ styles/keyframes.ts | 26 +- theme/editor/sunburst.json | 2 +- theme/editor/vibrant_ink.json | 2 +- tsconfig.json | 17 +- types/next-auth.d.ts | 10 +- utils/comment-parser.ts | 34 +- utils/decodeBinary.ts | 16 +- utils/decodeRestrictedBase64ToBytes.ts | 139 ++- utils/estimateFee.ts | 27 +- utils/helpers.ts | 14 +- utils/hookOnCalculator.ts | 35 +- utils/json.ts | 53 +- utils/languageClient.ts | 30 +- utils/object.ts | 35 +- utils/schema.ts | 65 +- utils/setHook.ts | 124 ++- utils/truncate.ts | 10 +- utils/wat-highlight.ts | 1336 ++++++++++++------------ utils/zip.ts | 32 +- utils/zlib.ts | 8 +- xrpl-hooks-docs/docs.ts | 192 ++-- yarn.lock | 5 + 110 files changed, 5458 insertions(+), 5951 deletions(-) diff --git a/.prettierignore b/.prettierignore index 4991f94..a877e3a 100644 --- a/.prettierignore +++ b/.prettierignore @@ -34,4 +34,5 @@ yarn-error.log* .vercel .vscode -*.md \ No newline at end of file +*.md +utils/libwabt.js \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json index 3369b6f..0a3835d 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -5,4 +5,4 @@ "printWidth": 100, "singleQuote": true, "trailingComma": "none" -} \ No newline at end of file +} diff --git a/components/Accounts.tsx b/components/Accounts.tsx index 105c1a7..001284f 100644 --- a/components/Accounts.tsx +++ b/components/Accounts.tsx @@ -1,95 +1,93 @@ -import toast from "react-hot-toast"; -import { useSnapshot } from "valtio"; -import { ArrowSquareOut, Copy, Trash, Wallet, X } from "phosphor-react"; -import React, { useEffect, useState, FC } from "react"; -import Dinero from "dinero.js"; +import toast from 'react-hot-toast' +import { useSnapshot } from 'valtio' +import { ArrowSquareOut, Copy, Trash, Wallet, X } from 'phosphor-react' +import React, { useEffect, useState, FC } from 'react' +import Dinero from 'dinero.js' -import Button from "./Button"; -import { addFaucetAccount, importAccount } from "../state/actions"; -import state from "../state"; -import Box from "./Box"; -import { Container, Heading, Stack, Text, Flex } from "."; +import Button from './Button' +import { addFaucetAccount, importAccount } from '../state/actions' +import state from '../state' +import Box from './Box' +import { Container, Heading, Stack, Text, Flex } from '.' import { Dialog, DialogContent, DialogTitle, DialogDescription, DialogClose, - DialogTrigger, -} from "./Dialog"; -import { css } from "../stitches.config"; -import { Input, Label } from "./Input"; -import truncate from "../utils/truncate"; + DialogTrigger +} from './Dialog' +import { css } from '../stitches.config' +import { Input, Label } from './Input' +import truncate from '../utils/truncate' const labelStyle = css({ - color: "$mauve10", - textTransform: "uppercase", - fontSize: "10px", - mb: "$0.5", -}); -import transactionsData from "../content/transactions.json"; -import { SetHookDialog } from "./SetHookDialog"; -import { addFunds } from "../state/actions/addFaucetAccount"; -import { deleteHook } from "../state/actions/deployHook"; -import { capitalize } from "../utils/helpers"; -import { deleteAccount } from '../state/actions/deleteAccount'; + color: '$mauve10', + textTransform: 'uppercase', + fontSize: '10px', + mb: '$0.5' +}) +import transactionsData from '../content/transactions.json' +import { SetHookDialog } from './SetHookDialog' +import { addFunds } from '../state/actions/addFaucetAccount' +import { deleteHook } from '../state/actions/deployHook' +import { capitalize } from '../utils/helpers' +import { deleteAccount } from '../state/actions/deleteAccount' export const AccountDialog = ({ activeAccountAddress, - setActiveAccountAddress, + setActiveAccountAddress }: { - activeAccountAddress: string | null; - setActiveAccountAddress: React.Dispatch>; + activeAccountAddress: string | null + setActiveAccountAddress: React.Dispatch> }) => { - const snap = useSnapshot(state); - const [showSecret, setShowSecret] = useState(false); - const activeAccount = snap.accounts.find( - account => account.address === activeAccountAddress - ); + const snap = useSnapshot(state) + const [showSecret, setShowSecret] = useState(false) + const activeAccount = snap.accounts.find(account => account.address === activeAccountAddress) return ( { - setShowSecret(false); - !open && setActiveAccountAddress(null); + setShowSecret(false) + !open && setActiveAccountAddress(null) }} > {activeAccount?.name} @@ -97,25 +95,25 @@ export const AccountDialog = ({ - - - - + + + + Account Address - + - - + + Secret {showSecret ? activeAccount?.secret - : "•".repeat(activeAccount?.secret.length || 16)}{" "} + : '•'.repeat(activeAccount?.secret.length || 16)}{' '} - + - - + + Balances & Objects {Dinero({ - amount: Number(activeAccount?.xrp || "0"), - precision: 6, + amount: Number(activeAccount?.xrp || '0'), + precision: 6 }) .toUnit() .toLocaleString(undefined, { - style: "currency", - currency: "XRP", - currencyDisplay: "name", + style: 'currency', + currency: 'XRP', + currencyDisplay: 'name' })} - - + + Installed Hooks {activeAccount && activeAccount.hooks.length > 0 @@ -261,20 +255,20 @@ export const AccountDialog = ({ > {truncate(i, 12)} - ); + ) }) - : "–"} + : '–'} {activeAccount && activeAccount?.hooks?.length > 0 && ( - + - ); -}; + ) +} interface AccountProps { - card?: boolean; - hideDeployBtn?: boolean; - showHookStats?: boolean; + card?: boolean + hideDeployBtn?: boolean + showHookStats?: boolean } const Accounts: FC = props => { - const snap = useSnapshot(state); - const [activeAccountAddress, setActiveAccountAddress] = useState< - string | null - >(null); + const snap = useSnapshot(state) + const [activeAccountAddress, setActiveAccountAddress] = useState(null) useEffect(() => { const fetchAccInfo = async () => { - if (snap.clientStatus === "online") { + if (snap.clientStatus === 'online') { const requests = snap.accounts.map(acc => snap.client?.send({ id: `hooks-builder-req-info-${acc.address}`, - command: "account_info", - account: acc.address, + command: 'account_info', + account: acc.address }) - ); - const responses = await Promise.all(requests); + ) + const responses = await Promise.all(requests) responses.forEach((res: any) => { - const address = res?.account_data?.Account as string; - const balance = res?.account_data?.Balance as string; - const sequence = res?.account_data?.Sequence as number; - const accountToUpdate = state.accounts.find( - acc => acc.address === address - ); + const address = res?.account_data?.Account as string + const balance = res?.account_data?.Balance as string + const sequence = res?.account_data?.Sequence as number + const accountToUpdate = state.accounts.find(acc => acc.address === address) if (accountToUpdate) { - accountToUpdate.xrp = balance; - accountToUpdate.sequence = sequence; - accountToUpdate.error = null; + accountToUpdate.xrp = balance + accountToUpdate.sequence = sequence + accountToUpdate.error = null } else { - const oldAccount = state.accounts.find( - acc => acc.address === res?.account - ); + const oldAccount = state.accounts.find(acc => acc.address === res?.account) if (oldAccount) { - oldAccount.xrp = "0"; + oldAccount.xrp = '0' oldAccount.error = { code: res?.error, - message: res?.error_message, - }; + message: res?.error_message + } } } - }); + }) const objectRequests = snap.accounts.map(acc => { return snap.client?.send({ id: `hooks-builder-req-objects-${acc.address}`, - command: "account_objects", - account: acc.address, - }); - }); - const objectResponses = await Promise.all(objectRequests); + command: 'account_objects', + account: acc.address + }) + }) + const objectResponses = await Promise.all(objectRequests) objectResponses.forEach((res: any) => { - const address = res?.account as string; - const accountToUpdate = state.accounts.find( - acc => acc.address === address - ); + const address = res?.account as string + const accountToUpdate = state.accounts.find(acc => acc.address === address) if (accountToUpdate) { accountToUpdate.hooks = res.account_objects - .find((ac: any) => ac?.LedgerEntryType === "Hook") - ?.Hooks?.map((oo: any) => oo.Hook.HookHash) || []; + .find((ac: any) => ac?.LedgerEntryType === 'Hook') + ?.Hooks?.map((oo: any) => oo.Hook.HookHash) || [] } - }); + }) } - }; + } - let fetchAccountInfoInterval: NodeJS.Timer; - if (snap.clientStatus === "online") { - fetchAccInfo(); - fetchAccountInfoInterval = setInterval(() => fetchAccInfo(), 10000); + let fetchAccountInfoInterval: NodeJS.Timer + if (snap.clientStatus === 'online') { + fetchAccInfo() + fetchAccountInfoInterval = setInterval(() => fetchAccInfo(), 10000) } return () => { if (snap.accounts.length > 0) { if (fetchAccountInfoInterval) { - clearInterval(fetchAccountInfoInterval); + clearInterval(fetchAccountInfoInterval) } } - }; + } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [snap.accounts.length, snap.clientStatus]); + }, [snap.accounts.length, snap.clientStatus]) return ( - + = props => { css={{ fontWeight: 300, m: 0, - fontSize: "11px", - color: "$mauve12", - px: "$3", - textTransform: "uppercase", - alignItems: "center", - display: "inline-flex", - gap: "$3", + fontSize: '11px', + color: '$mauve12', + px: '$3', + textTransform: 'uppercase', + alignItems: 'center', + display: 'inline-flex', + gap: '$3' }} > Accounts - + {snap.accounts.map(account => ( @@ -438,45 +424,45 @@ const Accounts: FC = props => { key={account.address + account.name} onClick={() => setActiveAccountAddress(account.address)} css={{ - px: "$3", - py: props.card ? "$3" : "$2", - cursor: "pointer", - borderBottom: props.card ? "1px solid $mauve6" : undefined, - "@hover": { - "&:hover": { - background: "$backgroundAlt", - }, - }, + px: '$3', + py: props.card ? '$3' : '$2', + cursor: 'pointer', + borderBottom: props.card ? '1px solid $mauve6' : undefined, + '@hover': { + '&:hover': { + background: '$backgroundAlt' + } + } }} > {account.name} - {account.address}{" "} + {account.address}{' '} {!account?.error ? ( `(${Dinero({ - amount: Number(account?.xrp || "0"), - precision: 6, + amount: Number(account?.xrp || '0'), + precision: 6 }) .toUnit() .toLocaleString(undefined, { - style: "currency", - currency: "XRP", - currencyDisplay: "name", + style: 'currency', + currency: 'XRP', + currencyDisplay: 'name' })})` ) : ( - + (Account not found, request funds to activate account) )} @@ -486,7 +472,7 @@ const Accounts: FC = props => {
{ - e.stopPropagation(); + e.stopPropagation() }} > @@ -494,9 +480,9 @@ const Accounts: FC = props => { )} {props.showHookStats && ( - + {account.hooks.length} hook - {account.hooks.length === 1 ? "" : "s"} installed + {account.hooks.length === 1 ? '' : 's'} installed )} @@ -508,37 +494,33 @@ const Accounts: FC = props => { setActiveAccountAddress={setActiveAccountAddress} /> - ); -}; + ) +} export const transactionsOptions = transactionsData.map(tx => ({ value: tx.TransactionType, - label: tx.TransactionType, -})); + label: tx.TransactionType +})) -const ImportAccountDialog = ({ - type = "import", -}: { - type?: "import" | "create"; -}) => { - const [secret, setSecret] = useState(""); - const [name, setName] = useState(""); +const ImportAccountDialog = ({ type = 'import' }: { type?: 'import' | 'create' }) => { + const [secret, setSecret] = useState('') + const [name, setName] = useState('') - const btnText = type === "import" ? "Import" : "Create"; - const title = type === "import" ? "Import Account" : "Create Account"; + const btnText = type === 'import' ? 'Import' : 'Create' + const title = type === 'import' ? 'Import Account' : 'Create Account' const handleSubmit = async () => { - if (type === "create") { - const value = capitalize(name); - await addFaucetAccount(value, true); - setName(""); - setSecret(""); - return; + if (type === 'create') { + const value = capitalize(name) + await addFaucetAccount(value, true) + setName('') + setSecret('') + return } - importAccount(secret, name); - setName(""); - setSecret(""); - }; + importAccount(secret, name) + setName('') + setSecret('') + } return ( @@ -547,9 +529,9 @@ const ImportAccountDialog = ({ - {title} + {title} - + @@ -562,7 +544,7 @@ const ImportAccountDialog = ({ onChange={e => setName(e.target.value)} /> - {type === "import" && ( + {type === 'import' && ( @@ -594,13 +576,13 @@ const ImportAccountDialog = ({ - + - ); -}; + ) +} -export default Accounts; +export default Accounts diff --git a/components/AlertDialog/index.tsx b/components/AlertDialog/index.tsx index eecfacb..36d4fb0 100644 --- a/components/AlertDialog/index.tsx +++ b/components/AlertDialog/index.tsx @@ -1,65 +1,62 @@ -import { FC, ReactNode } from "react"; -import { proxy, useSnapshot } from "valtio"; -import Button from "../Button"; -import Flex from "../Flex"; +import { FC, ReactNode } from 'react' +import { proxy, useSnapshot } from 'valtio' +import Button from '../Button' +import Flex from '../Flex' import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, - AlertDialogTitle, -} from "./primitive"; + AlertDialogTitle +} from './primitive' export interface AlertState { - isOpen: boolean; - title?: string; - body?: ReactNode; - cancelText?: string; - confirmText?: string; - confirmPrefix?: ReactNode; - onConfirm?: () => any; - onCancel?: () => any; + isOpen: boolean + title?: string + body?: ReactNode + cancelText?: string + confirmText?: string + confirmPrefix?: ReactNode + onConfirm?: () => any + onCancel?: () => any } export const alertState = proxy({ - isOpen: false, -}); + isOpen: false +}) const Alert: FC = () => { const { - title = "Are you sure?", + title = 'Are you sure?', isOpen, body, cancelText, - confirmText = "Ok", + confirmText = 'Ok', confirmPrefix, onCancel, - onConfirm, - } = useSnapshot(alertState); + onConfirm + } = useSnapshot(alertState) return ( - (alertState.isOpen = value)} - > + (alertState.isOpen = value)}> {title} {body} - + {(cancelText || onCancel) && ( - )} {isContentChanged && ( - File contents were changed after last compile, compile again to - incorporate your latest changes in the build. + File contents were changed after last compile, compile again to incorporate your latest + changes in the build. )} - ); + ) const NoContentView = !snap.loading && router.isReady && ( {`You haven't compiled any files yet, compile files on `} @@ -109,29 +98,27 @@ const DeployEditor = () => { develop view - ); + ) - const isContent = - snap.files?.filter(file => file.compiledWatContent).length > 0 && - router.isReady; + const isContent = snap.files?.filter(file => file.compiledWatContent).length > 0 && router.isReady return ( {!isContent ? ( @@ -141,41 +128,39 @@ const DeployEditor = () => { ) : ( { - monaco.languages.register({ id: "wat" }); - monaco.languages.setLanguageConfiguration("wat", wat.config); - monaco.languages.setMonarchTokensProvider("wat", wat.tokens); + monaco.languages.register({ id: 'wat' }) + monaco.languages.setLanguageConfiguration('wat', wat.config) + monaco.languages.setMonarchTokensProvider('wat', wat.tokens) }} onMount={editor => { editor.updateOptions({ glyphMargin: true, - readOnly: true, - }); + readOnly: true + }) }} - theme={theme === "dark" ? "dark" : "light"} + theme={theme === 'dark' ? 'dark' : 'light'} overlay={ - setShowContent(false)}> - Exit editor mode - + setShowContent(false)}>Exit editor mode } /> )} - ); -}; + ) +} -export default DeployEditor; +export default DeployEditor diff --git a/components/Dialog.tsx b/components/Dialog.tsx index 7fffd24..86d03d8 100644 --- a/components/Dialog.tsx +++ b/components/Dialog.tsx @@ -1,90 +1,88 @@ -import React from "react"; -import * as Stiches from "@stitches/react"; -import { keyframes } from "@stitches/react"; -import { blackA } from "@radix-ui/colors"; -import * as DialogPrimitive from "@radix-ui/react-dialog"; -import { styled } from "../stitches.config"; +import React from 'react' +import * as Stiches from '@stitches/react' +import { keyframes } from '@stitches/react' +import { blackA } from '@radix-ui/colors' +import * as DialogPrimitive from '@radix-ui/react-dialog' +import { styled } from '../stitches.config' const overlayShow = keyframes({ - "0%": { opacity: 0.01 }, - "100%": { opacity: 1 }, -}); + '0%': { opacity: 0.01 }, + '100%': { opacity: 1 } +}) const contentShow = keyframes({ - "0%": { opacity: 0.01 }, - "100%": { opacity: 1 }, -}); + '0%': { opacity: 0.01 }, + '100%': { opacity: 1 } +}) const StyledOverlay = styled(DialogPrimitive.Overlay, { zIndex: 10000, backgroundColor: blackA.blackA9, - position: "fixed", + position: 'fixed', inset: 0, top: 0, left: 0, right: 0, bottom: 0, - display: "grid", - placeItems: "center", - overflowY: "auto", - "@media (prefers-reduced-motion: no-preference)": { - animation: `${overlayShow} 250ms cubic-bezier(0.16, 1, 0.3, 1)`, + display: 'grid', + placeItems: 'center', + overflowY: 'auto', + '@media (prefers-reduced-motion: no-preference)': { + animation: `${overlayShow} 250ms cubic-bezier(0.16, 1, 0.3, 1)` }, - ".dark &": { - backgroundColor: blackA.blackA11, - }, -}); + '.dark &': { + backgroundColor: blackA.blackA11 + } +}) const StyledContent = styled(DialogPrimitive.Content, { zIndex: 1000, - backgroundColor: "$mauve2", - color: "$mauve12", - borderRadius: "$md", - position: "relative", - mb: "15%", - boxShadow: - "0px 10px 38px -5px rgba(22, 23, 24, 0.25), 0px 10px 20px -5px rgba(22, 23, 24, 0.2)", - width: "90vw", - maxWidth: "450px", + backgroundColor: '$mauve2', + color: '$mauve12', + borderRadius: '$md', + position: 'relative', + mb: '15%', + boxShadow: '0px 10px 38px -5px rgba(22, 23, 24, 0.25), 0px 10px 20px -5px rgba(22, 23, 24, 0.2)', + width: '90vw', + maxWidth: '450px', // maxHeight: "85vh", padding: 25, - "@media (prefers-reduced-motion: no-preference)": { - animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`, + '@media (prefers-reduced-motion: no-preference)': { + animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)` }, - "&:focus": { outline: "none" }, - ".dark &": { - backgroundColor: "$mauve5", - boxShadow: - "0px 10px 38px 0px rgba(0, 0, 0, 0.85), 0px 10px 20px 0px rgba(0, 0, 0, 0.6)", - }, -}); + '&:focus': { outline: 'none' }, + '.dark &': { + backgroundColor: '$mauve5', + boxShadow: '0px 10px 38px 0px rgba(0, 0, 0, 0.85), 0px 10px 20px 0px rgba(0, 0, 0, 0.6)' + } +}) const Content: React.FC<{ css?: Stiches.CSS }> = ({ css, children }) => { return ( {children} - ); -}; + ) +} const StyledTitle = styled(DialogPrimitive.Title, { margin: 0, fontWeight: 500, - color: "$mauve12", - fontSize: 17, -}); + color: '$mauve12', + fontSize: 17 +}) const StyledDescription = styled(DialogPrimitive.Description, { - margin: "10px 0 10px", - color: "$mauve11", + margin: '10px 0 10px', + color: '$mauve11', fontSize: 15, - lineHeight: 1.5, -}); + lineHeight: 1.5 +}) // Exports -export const Dialog = styled(DialogPrimitive.Root); -export const DialogTrigger = DialogPrimitive.Trigger; -export const DialogContent = Content; -export const DialogTitle = StyledTitle; -export const DialogDescription = StyledDescription; -export const DialogClose = DialogPrimitive.Close; -export const DialogPortal = DialogPrimitive.Portal; +export const Dialog = styled(DialogPrimitive.Root) +export const DialogTrigger = DialogPrimitive.Trigger +export const DialogContent = Content +export const DialogTitle = StyledTitle +export const DialogDescription = StyledDescription +export const DialogClose = DialogPrimitive.Close +export const DialogPortal = DialogPrimitive.Portal diff --git a/components/DropdownMenu.tsx b/components/DropdownMenu.tsx index 9b7f871..c79259b 100644 --- a/components/DropdownMenu.tsx +++ b/components/DropdownMenu.tsx @@ -1,115 +1,120 @@ -import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"; +import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu' -import { styled } from "../stitches.config"; -import { slideDownAndFade, slideLeftAndFade, slideRightAndFade, slideUpAndFade } from '../styles/keyframes'; +import { styled } from '../stitches.config' +import { + slideDownAndFade, + slideLeftAndFade, + slideRightAndFade, + slideUpAndFade +} from '../styles/keyframes' const StyledContent = styled(DropdownMenuPrimitive.Content, { minWidth: 220, - backgroundColor: "$mauve2", + backgroundColor: '$mauve2', borderRadius: 6, padding: 5, boxShadow: - "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)", - "@media (prefers-reduced-motion: no-preference)": { - animationDuration: "400ms", - animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)", - willChange: "transform, opacity", + '0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)', + '@media (prefers-reduced-motion: no-preference)': { + animationDuration: '400ms', + animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)', + willChange: 'transform, opacity', '&[data-state="open"]': { '&[data-side="top"]': { animationName: slideDownAndFade }, '&[data-side="right"]': { animationName: slideLeftAndFade }, '&[data-side="bottom"]': { animationName: slideUpAndFade }, - '&[data-side="left"]': { animationName: slideRightAndFade }, - }, + '&[data-side="left"]': { animationName: slideRightAndFade } + } }, - ".dark &": { - backgroundColor: "$mauve5", + '.dark &': { + backgroundColor: '$mauve5', boxShadow: - "0px 10px 38px -10px rgba(22, 23, 24, 0.85), 0px 10px 20px -15px rgba(22, 23, 24, 0.6)", - }, -}); + '0px 10px 38px -10px rgba(22, 23, 24, 0.85), 0px 10px 20px -15px rgba(22, 23, 24, 0.6)' + } +}) const itemStyles = { - all: "unset", + all: 'unset', fontSize: 13, lineHeight: 1, - color: "$mauve12", + color: '$mauve12', borderRadius: 3, - display: "flex", - alignItems: "center", + display: 'flex', + alignItems: 'center', height: 32, - padding: "0 5px", - position: "relative", - paddingLeft: "5px", - userSelect: "none", - py: "$0.5", - pr: "$2", - gap: "$2", + padding: '0 5px', + position: 'relative', + paddingLeft: '5px', + userSelect: 'none', + py: '$0.5', + pr: '$2', + gap: '$2', - "&[data-disabled]": { - color: "$mauve9", - pointerEvents: "none", + '&[data-disabled]': { + color: '$mauve9', + pointerEvents: 'none' }, - "&:focus": { - backgroundColor: "$purple9", - color: "$white", - }, -}; + '&:focus': { + backgroundColor: '$purple9', + color: '$white' + } +} -const StyledItem = styled(DropdownMenuPrimitive.Item, { ...itemStyles }); +const StyledItem = styled(DropdownMenuPrimitive.Item, { ...itemStyles }) const StyledCheckboxItem = styled(DropdownMenuPrimitive.CheckboxItem, { - ...itemStyles, -}); + ...itemStyles +}) const StyledRadioItem = styled(DropdownMenuPrimitive.RadioItem, { - ...itemStyles, -}); + ...itemStyles +}) const StyledTriggerItem = styled(DropdownMenuPrimitive.TriggerItem, { '&[data-state="open"]': { - backgroundColor: "$purple9", - color: "$purple9", + backgroundColor: '$purple9', + color: '$purple9' }, - ...itemStyles, -}); + ...itemStyles +}) const StyledLabel = styled(DropdownMenuPrimitive.Label, { paddingLeft: 25, fontSize: 12, - lineHeight: "25px", - color: "$mauve11", -}); + lineHeight: '25px', + color: '$mauve11' +}) const StyledSeparator = styled(DropdownMenuPrimitive.Separator, { height: 1, - backgroundColor: "$mauve7", - margin: 5, -}); + backgroundColor: '$mauve7', + margin: 5 +}) const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, { - position: "absolute", + position: 'absolute', left: 0, width: 25, - display: "inline-flex", - alignItems: "center", - justifyContent: "center", -}); + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center' +}) const StyledArrow = styled(DropdownMenuPrimitive.Arrow, { - fill: "$mauve2", - ".dark &": { - fill: "$mauve5", - }, -}); + fill: '$mauve2', + '.dark &': { + fill: '$mauve5' + } +}) // Exports -export const DropdownMenu = DropdownMenuPrimitive.Root; -export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; -export const DropdownMenuContent = StyledContent; -export const DropdownMenuItem = StyledItem; -export const DropdownMenuCheckboxItem = StyledCheckboxItem; -export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; -export const DropdownMenuRadioItem = StyledRadioItem; -export const DropdownMenuItemIndicator = StyledItemIndicator; -export const DropdownMenuTriggerItem = StyledTriggerItem; -export const DropdownMenuLabel = StyledLabel; -export const DropdownMenuSeparator = StyledSeparator; -export const DropdownMenuArrow = StyledArrow; +export const DropdownMenu = DropdownMenuPrimitive.Root +export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger +export const DropdownMenuContent = StyledContent +export const DropdownMenuItem = StyledItem +export const DropdownMenuCheckboxItem = StyledCheckboxItem +export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup +export const DropdownMenuRadioItem = StyledRadioItem +export const DropdownMenuItemIndicator = StyledItemIndicator +export const DropdownMenuTriggerItem = StyledTriggerItem +export const DropdownMenuLabel = StyledLabel +export const DropdownMenuSeparator = StyledSeparator +export const DropdownMenuArrow = StyledArrow diff --git a/components/EditorNavigation.tsx b/components/EditorNavigation.tsx index 9c47c1a..74b4595 100644 --- a/components/EditorNavigation.tsx +++ b/components/EditorNavigation.tsx @@ -1,9 +1,4 @@ -import React, { - useState, - useEffect, - useRef, - ReactNode, -} from "react"; +import React, { useState, useEffect, useRef, ReactNode } from 'react' import { Share, DownloadSimple, @@ -15,120 +10,113 @@ import { CloudArrowUp, CaretDown, User, - FilePlus, -} from "phosphor-react"; -import Image from "next/image"; + FilePlus +} from 'phosphor-react' +import Image from 'next/image' import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuArrow, - DropdownMenuSeparator, -} from "./DropdownMenu"; -import NewWindow from "react-new-window"; -import { signOut, useSession } from "next-auth/react"; -import { useSnapshot } from "valtio"; -import toast from "react-hot-toast"; + DropdownMenuSeparator +} from './DropdownMenu' +import NewWindow from 'react-new-window' +import { signOut, useSession } from 'next-auth/react' +import { useSnapshot } from 'valtio' +import toast from 'react-hot-toast' -import { - syncToGist, - updateEditorSettings, - downloadAsZip, -} from "../state/actions"; -import state from "../state"; -import Box from "./Box"; -import Button from "./Button"; -import Container from "./Container"; +import { syncToGist, updateEditorSettings, downloadAsZip } from '../state/actions' +import state from '../state' +import Box from './Box' +import Button from './Button' +import Container from './Container' import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription, - DialogClose, -} from "./Dialog"; -import Flex from "./Flex"; -import Stack from "./Stack"; -import { Input, Label } from "./Input"; -import Tooltip from "./Tooltip"; -import { showAlert } from "../state/actions/showAlert"; - + DialogClose +} from './Dialog' +import Flex from './Flex' +import Stack from './Stack' +import { Input, Label } from './Input' +import Tooltip from './Tooltip' +import { showAlert } from '../state/actions/showAlert' const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => { - const snap = useSnapshot(state); - const [editorSettingsOpen, setEditorSettingsOpen] = useState(false); - const { data: session, status } = useSession(); - const [popup, setPopUp] = useState(false); - const [editorSettings, setEditorSettings] = useState(snap.editorSettings); - + const snap = useSnapshot(state) + const [editorSettingsOpen, setEditorSettingsOpen] = useState(false) + const { data: session, status } = useSession() + const [popup, setPopUp] = useState(false) + const [editorSettings, setEditorSettings] = useState(snap.editorSettings) + useEffect(() => { if (session && session.user && popup) { - setPopUp(false); + setPopUp(false) } - }, [session, popup]); - + }, [session, popup]) const showNewGistAlert = () => { - showAlert("Are you sure?", { + showAlert('Are you sure?', { body: ( <> - This action will create new public Github Gist from - your current saved files. You can delete gist anytime from your GitHub - Gists page. + This action will create new public Github Gist from your current saved + files. You can delete gist anytime from your GitHub Gists page. ), - cancelText: "Cancel", - confirmText: "Create new Gist", + cancelText: 'Cancel', + confirmText: 'Create new Gist', confirmPrefix: , - onConfirm: () => syncToGist(session, true), - }); - }; + onConfirm: () => syncToGist(session, true) + }) + } - const scrollRef = useRef(null); - const containerRef = useRef(null); + const scrollRef = useRef(null) + const containerRef = useRef(null) return ( - + { if (scrollRef.current) { - scrollRef.current.scrollLeft += e.deltaY; + scrollRef.current.scrollLeft += e.deltaY } }} > @@ -138,37 +126,35 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => { - - {status === "authenticated" ? ( + + {status === 'authenticated' ? ( ReactNode }) => { signOut()}> - {session?.user?.username} ( - {session?.user.name}) + {session?.user?.username} ({session?.user.name}) - window.open( - `http://gist.github.com/${session?.user.username}` - ) - } + onClick={() => window.open(`http://gist.github.com/${session?.user.username}`)} > Go to your Gist - signOut({ callbackUrl: "/" })}> + signOut({ callbackUrl: '/' })}> Log out @@ -200,48 +181,43 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => { ) : ( - )} @@ -250,7 +226,7 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => { onClick={downloadAsZip} outline size="sm" - css={{ alignItems: "center" }} + css={{ alignItems: 'center' }} > @@ -259,12 +235,10 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => { - + Download as ZIP { navigator.clipboard.writeText( `${window.location.origin}/develop/${snap.gistId}` - ); - toast.success("Copied share link to clipboard!"); + ) + toast.success('Copied share link to clipboard!') }} > Copy share link to clipboard { - syncToGist(session); + syncToGist(session) }} > Push to Gist { - showNewGistAlert(); + showNewGistAlert() }} > Create as a new Gist @@ -357,9 +326,7 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => { - {popup && !session ? ( - - ) : null} + {popup && !session ? : null} @@ -380,39 +347,33 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => { onChange={e => setEditorSettings(curr => ({ ...curr, - tabSize: Number(e.target.value), + tabSize: Number(e.target.value) })) } /> - + - - - + - ); -}; + ) +} -export default EditorNavigation; +export default EditorNavigation diff --git a/components/Flex.tsx b/components/Flex.tsx index c4cd396..eff9bf4 100644 --- a/components/Flex.tsx +++ b/components/Flex.tsx @@ -1,53 +1,53 @@ -import { styled } from "../stitches.config"; -import Box from "./Box"; +import { styled } from '../stitches.config' +import Box from './Box' const Flex = styled(Box, { - display: "flex", + display: 'flex', variants: { row: { true: { - flexDirection: "row", - }, + flexDirection: 'row' + } }, column: { true: { - flexDirection: "column", - }, + flexDirection: 'column' + } }, fluid: { true: { - width: "100%", - }, + width: '100%' + } }, align: { start: { - alignItems: "start", + alignItems: 'start' }, center: { - alignItems: "center", + alignItems: 'center' }, end: { - alignItems: "end", - }, + alignItems: 'end' + } }, justify: { start: { - justifyContent: "start", + justifyContent: 'start' }, center: { - justifyContent: "center", + justifyContent: 'center' }, end: { - justifyContent: "end", + justifyContent: 'end' }, - "space-between": { - justifyContent: "space-between", + 'space-between': { + justifyContent: 'space-between' }, - "space-around": { - justifyContent: "space-around", - }, - }, - }, -}); + 'space-around': { + justifyContent: 'space-around' + } + } + } +}) -export default Flex; +export default Flex diff --git a/components/Heading.tsx b/components/Heading.tsx index cb57fcd..5205368 100644 --- a/components/Heading.tsx +++ b/components/Heading.tsx @@ -1,16 +1,16 @@ -import { styled } from "../stitches.config"; +import { styled } from '../stitches.config' -const Heading = styled("span", { - fontFamily: "$heading", - lineHeight: "$heading", - fontWeight: "$heading", +const Heading = styled('span', { + fontFamily: '$heading', + lineHeight: '$heading', + fontWeight: '$heading', variants: { uppercase: { true: { - textTransform: "uppercase", - }, - }, - }, -}); + textTransform: 'uppercase' + } + } + } +}) -export default Heading; +export default Heading diff --git a/components/HooksEditor.tsx b/components/HooksEditor.tsx index 7b99b33..464221d 100644 --- a/components/HooksEditor.tsx +++ b/components/HooksEditor.tsx @@ -1,45 +1,43 @@ -import React, { useEffect, useRef } from "react"; -import { useSnapshot, ref } from "valtio"; -import type monaco from "monaco-editor"; -import { ArrowBendLeftUp } from "phosphor-react"; -import { useTheme } from "next-themes"; -import { useRouter } from "next/router"; +import React, { useEffect, useRef } from 'react' +import { useSnapshot, ref } from 'valtio' +import type monaco from 'monaco-editor' +import { ArrowBendLeftUp } from 'phosphor-react' +import { useTheme } from 'next-themes' +import { useRouter } from 'next/router' -import Box from "./Box"; -import Container from "./Container"; -import { createNewFile, saveFile } from "../state/actions"; -import { apiHeaderFiles } from "../state/constants"; -import state from "../state"; +import Box from './Box' +import Container from './Container' +import { createNewFile, saveFile } from '../state/actions' +import { apiHeaderFiles } from '../state/constants' +import state from '../state' -import EditorNavigation from "./EditorNavigation"; -import Text from "./Text"; -import { MonacoServices } from "@codingame/monaco-languageclient"; -import { createLanguageClient, createWebSocket } from "../utils/languageClient"; -import { listen } from "@codingame/monaco-jsonrpc"; -import ReconnectingWebSocket from "reconnecting-websocket"; +import EditorNavigation from './EditorNavigation' +import Text from './Text' +import { MonacoServices } from '@codingame/monaco-languageclient' +import { createLanguageClient, createWebSocket } from '../utils/languageClient' +import { listen } from '@codingame/monaco-jsonrpc' +import ReconnectingWebSocket from 'reconnecting-websocket' -import docs from "../xrpl-hooks-docs/docs"; -import Monaco from "./Monaco"; -import { saveAllFiles } from "../state/actions/saveFile"; -import { Tab, Tabs } from "./Tabs"; -import { renameFile } from "../state/actions/createNewFile"; +import docs from '../xrpl-hooks-docs/docs' +import Monaco from './Monaco' +import { saveAllFiles } from '../state/actions/saveFile' +import { Tab, Tabs } from './Tabs' +import { renameFile } from '../state/actions/createNewFile' const checkWritable = (filename?: string): boolean => { if (apiHeaderFiles.find(file => file === filename)) { - return false; + return false } - return true; -}; + return true +} -const validateWritability = ( - editor: monaco.editor.IStandaloneCodeEditor -) => { - const filename = editor.getModel()?.uri.path.split("/").pop(); - const isWritable = checkWritable(filename); - editor.updateOptions({ readOnly: !isWritable }); -}; +const validateWritability = (editor: monaco.editor.IStandaloneCodeEditor) => { + const filename = editor.getModel()?.uri.path.split('/').pop() + const isWritable = checkWritable(filename) + editor.updateOptions({ readOnly: !isWritable }) +} -let decorations: { [key: string]: string[] } = {}; +let decorations: { [key: string]: string[] } = {} const setMarkers = (monacoE: typeof monaco) => { // Get all the markers that are active at the moment, @@ -50,10 +48,10 @@ const setMarkers = (monacoE: typeof monaco) => { // Filter out the markers that are hooks specific .filter( marker => - typeof marker?.code === "string" && + typeof marker?.code === 'string' && // Take only markers that starts with "hooks-" - marker?.code?.includes("hooks-") - ); + marker?.code?.includes('hooks-') + ) // Get the active model (aka active file you're editing) // const model = monacoE.editor?.getModel( @@ -62,15 +60,13 @@ const setMarkers = (monacoE: typeof monaco) => { // console.log(state.active); // Add decoration (aka extra hoverMessages) to markers in the // exact same range (location) where the markers are - const models = monacoE.editor.getModels(); + const models = monacoE.editor.getModels() models.forEach(model => { decorations[model.id] = model?.deltaDecorations( decorations?.[model.id] || [], markers .filter(marker => - marker?.resource.path - .split("/") - .includes(`${state.files?.[state.active]?.name}`) + marker?.resource.path.split('/').includes(`${state.files?.[state.active]?.name}`) ) .map(marker => ({ range: new monacoE.Range( @@ -86,47 +82,45 @@ const setMarkers = (monacoE: typeof monaco) => { // /xrpl-hooks-docs/xrpl-hooks-docs-files.json file // which was generated from rst files - (typeof marker.code === "string" && - docs[marker?.code]?.toString()) || - "", + (typeof marker.code === 'string' && docs[marker?.code]?.toString()) || '', supportHtml: true, - isTrusted: true, - }, - }, + isTrusted: true + } + } })) - ); - }); -}; + ) + }) +} const HooksEditor = () => { - const editorRef = useRef(); - const monacoRef = useRef(); - const subscriptionRef = useRef(null); - const snap = useSnapshot(state); - const router = useRouter(); - const { theme } = useTheme(); + const editorRef = useRef() + const monacoRef = useRef() + const subscriptionRef = useRef(null) + const snap = useSnapshot(state) + const router = useRouter() + const { theme } = useTheme() useEffect(() => { - if (editorRef.current) validateWritability(editorRef.current); - }, [snap.active]); + if (editorRef.current) validateWritability(editorRef.current) + }, [snap.active]) useEffect(() => { return () => { - subscriptionRef?.current?.close(); - }; - }, []); + subscriptionRef?.current?.close() + } + }, []) useEffect(() => { if (monacoRef.current) { - setMarkers(monacoRef.current); + setMarkers(monacoRef.current) } - }, [snap.active]); + }, [snap.active]) useEffect(() => { return () => { - saveAllFiles(); - }; - }, []); + saveAllFiles() + } + }, []) - const file = snap.files[snap.active]; + const file = snap.files[snap.active] const renderNav = () => ( { extensionRequired onCreateNewTab={createNewFile} onCloseTab={idx => state.files.splice(idx, 1)} - onRenameTab={(idx, nwName, oldName = "") => renameFile(oldName, nwName)} + onRenameTab={(idx, nwName, oldName = '') => renameFile(oldName, nwName)} headerExtraValidation={{ regex: /^[A-Za-z0-9_-]+[.][A-Za-z0-9]{1,4}$/g, - error: - 'Filename can contain only characters from a-z, A-Z, 0-9, "_" and "-"', + error: 'Filename can contain only characters from a-z, A-Z, 0-9, "_" and "-"' }} > {snap.files.map((file, index) => { - return ; + return })} - ); + ) return ( @@ -177,39 +170,39 @@ const HooksEditor = () => { file.language, monaco.Uri.parse(`file:///work/c/${file.name}`) ) - ); + ) } // create the web socket if (!subscriptionRef.current) { monaco.languages.register({ - id: "c", - extensions: [".c", ".h"], - aliases: ["C", "c", "H", "h"], - mimetypes: ["text/plain"], - }); - MonacoServices.install(monaco); + id: 'c', + extensions: ['.c', '.h'], + aliases: ['C', 'c', 'H', 'h'], + mimetypes: ['text/plain'] + }) + MonacoServices.install(monaco) const webSocket = createWebSocket( - process.env.NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT || "" - ); - subscriptionRef.current = webSocket; + process.env.NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT || '' + ) + subscriptionRef.current = webSocket // listen when the web socket is opened listen({ webSocket: webSocket as WebSocket, onConnection: connection => { // create and start the language client - const languageClient = createLanguageClient(connection); - const disposable = languageClient.start(); + const languageClient = createLanguageClient(connection) + const disposable = languageClient.start() connection.onClose(() => { try { - disposable.dispose(); + disposable.dispose() } catch (err) { - console.log("err", err); + console.log('err', err) } - }); - }, - }); + }) + } + }) } // editor.updateOptions({ @@ -219,75 +212,68 @@ const HooksEditor = () => { // ...snap.editorSettings, // }); if (!state.editorCtx) { - state.editorCtx = ref(monaco.editor); + state.editorCtx = ref(monaco.editor) } }} onMount={(editor, monaco) => { - editorRef.current = editor; - monacoRef.current = monaco; + editorRef.current = editor + monacoRef.current = monaco editor.updateOptions({ glyphMargin: true, lightbulb: { - enabled: true, - }, - }); - editor.addCommand( - monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, - () => { - saveFile(); + enabled: true } - ); + }) + editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => { + saveFile() + }) // When the markers (errors/warnings from clangd language server) change // Lets improve the markers by adding extra content to them from related // md files monaco.editor.onDidChangeMarkers(() => { if (monacoRef.current) { - setMarkers(monacoRef.current); + setMarkers(monacoRef.current) } - }); + }) // Hacky way to hide Peek menu editor.onContextMenu(e => { - const host = - document.querySelector(".shadow-root-host"); + const host = document.querySelector('.shadow-root-host') - const contextMenuItems = - host?.shadowRoot?.querySelectorAll("li.action-item"); + const contextMenuItems = host?.shadowRoot?.querySelectorAll('li.action-item') contextMenuItems?.forEach(k => { // If menu item contains "Peek" lets hide it - if (k.querySelector(".action-label")?.textContent === "Peek") { + if (k.querySelector('.action-label')?.textContent === 'Peek') { // @ts-expect-error - k["style"].display = "none"; + k['style'].display = 'none' } - }); - }); + }) + }) - validateWritability(editor); + validateWritability(editor) }} - theme={theme === "dark" ? "dark" : "light"} + theme={theme === 'dark' ? 'dark' : 'light'} /> ) : ( {!snap.loading && router.isReady && ( - + - + Click the link above to create your file @@ -298,7 +284,7 @@ const HooksEditor = () => { )} - ); -}; + ) +} -export default HooksEditor; +export default HooksEditor diff --git a/components/Input.tsx b/components/Input.tsx index 47dbda3..3470d12 100644 --- a/components/Input.tsx +++ b/components/Input.tsx @@ -1,169 +1,165 @@ -import React from "react"; -import { styled } from "../stitches.config"; -import * as LabelPrim from '@radix-ui/react-label'; +import React from 'react' +import { styled } from '../stitches.config' +import * as LabelPrim from '@radix-ui/react-label' -export const Input = styled("input", { +export const Input = styled('input', { // Reset - appearance: "none", - borderWidth: "0", - boxSizing: "border-box", - fontFamily: "inherit", - outline: "none", - width: "100%", - flex: "1", - backgroundColor: "$mauve4", - display: "inline-flex", - alignItems: "center", - justifyContent: "center", - borderRadius: "$sm", - px: "$2", - fontSize: "$md", + appearance: 'none', + borderWidth: '0', + boxSizing: 'border-box', + fontFamily: 'inherit', + outline: 'none', + width: '100%', + flex: '1', + backgroundColor: '$mauve4', + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + borderRadius: '$sm', + px: '$2', + fontSize: '$md', lineHeight: 1, - color: "$mauve12", + color: '$mauve12', boxShadow: `0 0 0 1px $colors$mauve8`, height: 35, - WebkitTapHighlightColor: "rgba(0,0,0,0)", - "&::before": { - boxSizing: "border-box", + WebkitTapHighlightColor: 'rgba(0,0,0,0)', + '&::before': { + boxSizing: 'border-box' }, - "&::after": { - boxSizing: "border-box", + '&::after': { + boxSizing: 'border-box' }, - fontVariantNumeric: "tabular-nums", + fontVariantNumeric: 'tabular-nums', - "&:-webkit-autofill": { - boxShadow: "inset 0 0 0 1px $colors$blue6, inset 0 0 0 100px $colors$blue3", + '&:-webkit-autofill': { + boxShadow: 'inset 0 0 0 1px $colors$blue6, inset 0 0 0 100px $colors$blue3' }, - "&:-webkit-autofill::first-line": { - fontFamily: "$untitled", - color: "$mauve12", + '&:-webkit-autofill::first-line': { + fontFamily: '$untitled', + color: '$mauve12' }, - "&:focus": { + '&:focus': { boxShadow: `0 0 0 1px $colors$mauve10`, - "&:-webkit-autofill": { - boxShadow: `0 0 0 1px $colors$mauve10`, - }, + '&:-webkit-autofill': { + boxShadow: `0 0 0 1px $colors$mauve10` + } }, - "&::placeholder": { - color: "$mauve9", + '&::placeholder': { + color: '$mauve9' }, - "&:disabled": { - pointerEvents: "none", - backgroundColor: "$mauve2", - color: "$mauve8", - cursor: "not-allowed", - "&::placeholder": { - color: "$mauve7", - }, + '&:disabled': { + pointerEvents: 'none', + backgroundColor: '$mauve2', + color: '$mauve8', + cursor: 'not-allowed', + '&::placeholder': { + color: '$mauve7' + } }, - "&:read-only": { - backgroundColor: "$mauve2", - color: "$text", + '&:read-only': { + backgroundColor: '$mauve2', + color: '$text', opacity: 0.8, - "&:focus": { - boxShadow: "inset 0px 0px 0px 1px $colors$mauve7", - }, + '&:focus': { + boxShadow: 'inset 0px 0px 0px 1px $colors$mauve7' + } }, variants: { size: { sm: { - height: "$5", - fontSize: "$1", - lineHeight: "$sizes$4", - "&:-webkit-autofill::first-line": { - fontSize: "$1", - }, + height: '$5', + fontSize: '$1', + lineHeight: '$sizes$4', + '&:-webkit-autofill::first-line': { + fontSize: '$1' + } }, md: { - height: "$8", - fontSize: "$1", - lineHeight: "$sizes$5", - "&:-webkit-autofill::first-line": { - fontSize: "$1", - }, + height: '$8', + fontSize: '$1', + lineHeight: '$sizes$5', + '&:-webkit-autofill::first-line': { + fontSize: '$1' + } }, lg: { - height: "$12", - fontSize: "$2", - lineHeight: "$sizes$6", - "&:-webkit-autofill::first-line": { - fontSize: "$3", - }, - }, + height: '$12', + fontSize: '$2', + lineHeight: '$sizes$6', + '&:-webkit-autofill::first-line': { + fontSize: '$3' + } + } }, variant: { ghost: { - boxShadow: "none", - backgroundColor: "transparent", - "@hover": { - "&:hover": { - boxShadow: "inset 0 0 0 1px $colors$mauve7", - }, + boxShadow: 'none', + backgroundColor: 'transparent', + '@hover': { + '&:hover': { + boxShadow: 'inset 0 0 0 1px $colors$mauve7' + } }, - "&:focus": { - backgroundColor: "$loContrast", - boxShadow: `0 0 0 1px $colors$mauve10`, + '&:focus': { + backgroundColor: '$loContrast', + boxShadow: `0 0 0 1px $colors$mauve10` }, - "&:disabled": { - backgroundColor: "transparent", - }, - "&:read-only": { - backgroundColor: "transparent", + '&:disabled': { + backgroundColor: 'transparent' }, + '&:read-only': { + backgroundColor: 'transparent' + } }, deep: { - backgroundColor: "$deep", - boxShadow: "none", - }, + backgroundColor: '$deep', + boxShadow: 'none' + } }, state: { invalid: { - boxShadow: "inset 0 0 0 1px $colors$crimson7", - "&:focus": { - boxShadow: - "inset 0px 0px 0px 1px $colors$crimson8, 0px 0px 0px 1px $colors$crimson8", - }, + boxShadow: 'inset 0 0 0 1px $colors$crimson7', + '&:focus': { + boxShadow: 'inset 0px 0px 0px 1px $colors$crimson8, 0px 0px 0px 1px $colors$crimson8' + } }, valid: { - boxShadow: "inset 0 0 0 1px $colors$grass7", - "&:focus": { - boxShadow: - "inset 0px 0px 0px 1px $colors$grass8, 0px 0px 0px 1px $colors$grass8", - }, - }, + boxShadow: 'inset 0 0 0 1px $colors$grass7', + '&:focus': { + boxShadow: 'inset 0px 0px 0px 1px $colors$grass8, 0px 0px 0px 1px $colors$grass8' + } + } }, cursor: { default: { - cursor: "default", - "&:focus": { - cursor: "text", - }, + cursor: 'default', + '&:focus': { + cursor: 'text' + } }, text: { - cursor: "text", - }, - }, + cursor: 'text' + } + } }, defaultVariants: { - size: "md", - }, -}); + size: 'md' + } +}) // eslint-disable-next-line react/display-name -const ReffedInput = React.forwardRef< - HTMLInputElement, - React.ComponentProps ->((props, ref) => ); - -export default ReffedInput; +const ReffedInput = React.forwardRef>( + (props, ref) => +) +export default ReffedInput const LabelRoot = (props: LabelPrim.LabelProps) => export const Label = styled(LabelRoot, { display: 'inline-block', mb: '$1' -}) \ No newline at end of file +}) diff --git a/components/Link.tsx b/components/Link.tsx index fbd9e0b..86c5e1e 100644 --- a/components/Link.tsx +++ b/components/Link.tsx @@ -1,8 +1,8 @@ -import { styled } from "../stitches.config"; +import { styled } from '../stitches.config' -const StyledLink = styled("a", { - color: "CurrentColor", - textDecoration: "underline", +const StyledLink = styled('a', { + color: 'CurrentColor', + textDecoration: 'underline', cursor: 'pointer', variants: { highlighted: { @@ -11,6 +11,6 @@ const StyledLink = styled("a", { } } } -}); +}) -export default StyledLink; +export default StyledLink diff --git a/components/LogBox.tsx b/components/LogBox.tsx index 1411cb4..cc20cd7 100644 --- a/components/LogBox.tsx +++ b/components/LogBox.tsx @@ -1,30 +1,23 @@ -import { - useRef, - useLayoutEffect, - ReactNode, - FC, - useState, - useCallback, -} from "react"; -import { IconProps, Notepad, Prohibit } from "phosphor-react"; -import useStayScrolled from "react-stay-scrolled"; -import NextLink from "next/link"; +import { useRef, useLayoutEffect, ReactNode, FC, useState, useCallback } from 'react' +import { IconProps, Notepad, Prohibit } from 'phosphor-react' +import useStayScrolled from 'react-stay-scrolled' +import NextLink from 'next/link' -import Container from "./Container"; -import LogText from "./LogText"; -import state, { ILog } from "../state"; -import { Pre, Link, Heading, Button, Text, Flex, Box } from "."; -import regexifyString from "regexify-string"; -import { useSnapshot } from "valtio"; -import { AccountDialog } from "./Accounts"; +import Container from './Container' +import LogText from './LogText' +import state, { ILog } from '../state' +import { Pre, Link, Heading, Button, Text, Flex, Box } from '.' +import regexifyString from 'regexify-string' +import { useSnapshot } from 'valtio' +import { AccountDialog } from './Accounts' interface ILogBox { - title: string; - clearLog?: () => void; - logs: ILog[]; - renderNav?: () => ReactNode; - enhanced?: boolean; - Icon?: FC; + title: string + clearLog?: () => void + logs: ILog[] + renderNav?: () => ReactNode + enhanced?: boolean + Icon?: FC } const LogBox: FC = ({ @@ -34,40 +27,40 @@ const LogBox: FC = ({ children, renderNav, enhanced, - Icon = Notepad, + Icon = Notepad }) => { - const logRef = useRef(null); - const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef); + const logRef = useRef(null) + const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef) useLayoutEffect(() => { - stayScrolled(); - }, [stayScrolled, logs]); + stayScrolled() + }, [stayScrolled, logs]) return ( = ({ css={{ fontWeight: 300, m: 0, - fontSize: "11px", - color: "$mauve12", - px: "$3", - textTransform: "uppercase", - alignItems: "center", - display: "inline-flex", - gap: "$3", + fontSize: '11px', + color: '$mauve12', + px: '$3', + textTransform: 'uppercase', + alignItems: 'center', + display: 'inline-flex', + gap: '$3' }} > {title} @@ -95,7 +88,7 @@ const LogBox: FC = ({ > {renderNav?.()} - + {clearLog && ( - - - - @@ -405,7 +363,7 @@ const Navigation = () => { - ); -}; + ) +} -export default Navigation; +export default Navigation diff --git a/components/PanelBox.tsx b/components/PanelBox.tsx index 544c927..b638db8 100644 --- a/components/PanelBox.tsx +++ b/components/PanelBox.tsx @@ -1,30 +1,30 @@ -import { styled } from "../stitches.config"; -import Heading from "./Heading"; -import Text from "./Text"; +import { styled } from '../stitches.config' +import Heading from './Heading' +import Text from './Text' -const PanelBox = styled("div", { - display: "flex", - flexDirection: "column", - border: "1px solid $colors$mauve6", - backgroundColor: "$mauve2", - padding: "$3", - borderRadius: "$sm", - fontWeight: "lighter", - height: "auto", - cursor: "pointer", - flex: "1 1 0px", - "&:hover": { - border: "1px solid $colors$mauve9", +const PanelBox = styled('div', { + display: 'flex', + flexDirection: 'column', + border: '1px solid $colors$mauve6', + backgroundColor: '$mauve2', + padding: '$3', + borderRadius: '$sm', + fontWeight: 'lighter', + height: 'auto', + cursor: 'pointer', + flex: '1 1 0px', + '&:hover': { + border: '1px solid $colors$mauve9' }, [`& ${Heading}`]: { - fontWeight: "lighter", - mb: "$2", + fontWeight: 'lighter', + mb: '$2' }, [`& ${Text}`]: { - fontWeight: "lighter", - color: "$mauve10", - fontSize: "$sm", - }, -}); + fontWeight: 'lighter', + color: '$mauve10', + fontSize: '$sm' + } +}) -export default PanelBox; +export default PanelBox diff --git a/components/Popover.tsx b/components/Popover.tsx index 65b6231..3fa767e 100644 --- a/components/Popover.tsx +++ b/components/Popover.tsx @@ -1,92 +1,89 @@ -import React, { ReactNode } from "react"; -import * as PopoverPrimitive from "@radix-ui/react-popover"; -import { styled, keyframes } from "../stitches.config"; +import React, { ReactNode } from 'react' +import * as PopoverPrimitive from '@radix-ui/react-popover' +import { styled, keyframes } from '../stitches.config' const slideUpAndFade = keyframes({ - "0%": { opacity: 0, transform: "translateY(2px)" }, - "100%": { opacity: 1, transform: "translateY(0)" }, -}); + '0%': { opacity: 0, transform: 'translateY(2px)' }, + '100%': { opacity: 1, transform: 'translateY(0)' } +}) const slideRightAndFade = keyframes({ - "0%": { opacity: 0, transform: "translateX(-2px)" }, - "100%": { opacity: 1, transform: "translateX(0)" }, -}); + '0%': { opacity: 0, transform: 'translateX(-2px)' }, + '100%': { opacity: 1, transform: 'translateX(0)' } +}) const slideDownAndFade = keyframes({ - "0%": { opacity: 0, transform: "translateY(-2px)" }, - "100%": { opacity: 1, transform: "translateY(0)" }, -}); + '0%': { opacity: 0, transform: 'translateY(-2px)' }, + '100%': { opacity: 1, transform: 'translateY(0)' } +}) const slideLeftAndFade = keyframes({ - "0%": { opacity: 0, transform: "translateX(2px)" }, - "100%": { opacity: 1, transform: "translateX(0)" }, -}); + '0%': { opacity: 0, transform: 'translateX(2px)' }, + '100%': { opacity: 1, transform: 'translateX(0)' } +}) const StyledContent = styled(PopoverPrimitive.Content, { borderRadius: 4, - padding: "$3 $3", + padding: '$3 $3', fontSize: 12, lineHeight: 1, - color: "$text", - backgroundColor: "$background", + color: '$text', + backgroundColor: '$background', boxShadow: - "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)", - "@media (prefers-reduced-motion: no-preference)": { - animationDuration: "400ms", - animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)", - willChange: "transform, opacity", + '0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)', + '@media (prefers-reduced-motion: no-preference)': { + animationDuration: '400ms', + animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)', + willChange: 'transform, opacity', '&[data-state="open"]': { '&[data-side="top"]': { animationName: slideDownAndFade }, '&[data-side="right"]': { animationName: slideLeftAndFade }, '&[data-side="bottom"]': { animationName: slideUpAndFade }, - '&[data-side="left"]': { animationName: slideRightAndFade }, - }, + '&[data-side="left"]': { animationName: slideRightAndFade } + } }, - ".dark &": { - backgroundColor: "$mauve5", - boxShadow: - "0px 5px 38px -2px rgba(22, 23, 24, 1), 0px 10px 20px 0px rgba(22, 23, 24, 1)", - }, -}); + '.dark &': { + backgroundColor: '$mauve5', + boxShadow: '0px 5px 38px -2px rgba(22, 23, 24, 1), 0px 10px 20px 0px rgba(22, 23, 24, 1)' + } +}) const StyledArrow = styled(PopoverPrimitive.Arrow, { - fill: "$colors$mauve2", - ".dark &": { - fill: "$mauve5", - }, -}); + fill: '$colors$mauve2', + '.dark &': { + fill: '$mauve5' + } +}) const StyledClose = styled(PopoverPrimitive.Close, { - all: "unset", - fontFamily: "inherit", - borderRadius: "100%", + all: 'unset', + fontFamily: 'inherit', + borderRadius: '100%', height: 25, width: 25, - display: "inline-flex", - alignItems: "center", - justifyContent: "center", - color: "$text", - position: "absolute", + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + color: '$text', + position: 'absolute', top: 5, - right: 5, -}); + right: 5 +}) // Exports -export const PopoverRoot = PopoverPrimitive.Root; -export const PopoverTrigger = PopoverPrimitive.Trigger; -export const PopoverContent = StyledContent; -export const PopoverArrow = StyledArrow; -export const PopoverClose = StyledClose; +export const PopoverRoot = PopoverPrimitive.Root +export const PopoverTrigger = PopoverPrimitive.Trigger +export const PopoverContent = StyledContent +export const PopoverArrow = StyledArrow +export const PopoverClose = StyledClose interface IPopover { - content: string | ReactNode; - open?: boolean; - defaultOpen?: boolean; - onOpenChange?: (open: boolean) => void; + content: string | ReactNode + open?: boolean + defaultOpen?: boolean + onOpenChange?: (open: boolean) => void } -const Popover: React.FC< - IPopover & React.ComponentProps -> = ({ +const Popover: React.FC> = ({ children, content, open, @@ -94,16 +91,12 @@ const Popover: React.FC< onOpenChange, ...rest }) => ( - + {children} {content} -); +) -export default Popover; +export default Popover diff --git a/components/Pre.tsx b/components/Pre.tsx index ae42326..b5bc1b3 100644 --- a/components/Pre.tsx +++ b/components/Pre.tsx @@ -1,15 +1,15 @@ -import { styled } from "../stitches.config"; +import { styled } from '../stitches.config' -const Pre = styled("span", { +const Pre = styled('span', { m: 0, - wordBreak: "break-all", + wordBreak: 'break-all', fontFamily: '$monospace', whiteSpace: 'pre-wrap', variants: { fluid: { true: { - width: "100%", - }, + width: '100%' + } }, line: { true: { @@ -21,7 +21,7 @@ const Pre = styled("span", { display: 'block' } } - }, -}); + } +}) -export default Pre; +export default Pre diff --git a/components/RunScript/index.tsx b/components/RunScript/index.tsx index c2ff32d..1ebd716 100644 --- a/components/RunScript/index.tsx +++ b/components/RunScript/index.tsx @@ -1,40 +1,35 @@ -import { Play, X } from "phosphor-react"; -import { - HTMLInputTypeAttribute, - useCallback, - useEffect, - useState, -} from "react"; -import state, { IAccount, IFile, ILog } from "../../state"; -import Button from "../Button"; -import Box from "../Box"; -import Input, { Label } from "../Input"; -import Stack from "../Stack"; +import { Play, X } from 'phosphor-react' +import { HTMLInputTypeAttribute, useCallback, useEffect, useState } from 'react' +import state, { IAccount, IFile, ILog } from '../../state' +import Button from '../Button' +import Box from '../Box' +import Input, { Label } from '../Input' +import Stack from '../Stack' import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription, - DialogClose, -} from "../Dialog"; -import Flex from "../Flex"; -import { useSnapshot } from "valtio"; -import Select from "../Select"; -import Text from "../Text"; -import { saveFile } from "../../state/actions/saveFile"; -import { getErrors, getTags } from "../../utils/comment-parser"; -import toast from "react-hot-toast"; + DialogClose +} from '../Dialog' +import Flex from '../Flex' +import { useSnapshot } from 'valtio' +import Select from '../Select' +import Text from '../Text' +import { saveFile } from '../../state/actions/saveFile' +import { getErrors, getTags } from '../../utils/comment-parser' +import toast from 'react-hot-toast' const generateHtmlTemplate = (code: string, data?: Record) => { - let processString: string | undefined; - const process = { env: { NODE_ENV: "production" } } as any; + let processString: string | undefined + const process = { env: { NODE_ENV: 'production' } } as any if (data) { Object.keys(data).forEach(key => { - process.env[key] = data[key]; - }); + process.env[key] = data[key] + }) } - processString = JSON.stringify(process); + processString = JSON.stringify(process) return ` @@ -66,7 +61,7 @@ const generateHtmlTemplate = (code: string, data?: Record) => { } - var process = '${processString || "{}"}'; + var process = '${processString || '{}'}'; process = JSON.parse(process); window.process = process @@ -85,112 +80,107 @@ const generateHtmlTemplate = (code: string, data?: Record) => { - `; -}; + ` +} type Fields = Record< string, { - name: string; - value: string; - type?: "Account" | `Account.${keyof IAccount}` | HTMLInputTypeAttribute; - description?: string; - required?: boolean; + name: string + value: string + type?: 'Account' | `Account.${keyof IAccount}` | HTMLInputTypeAttribute + description?: string + required?: boolean } ->; +> const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => { - const snap = useSnapshot(state); - const [templateError, setTemplateError] = useState(""); - const [fields, setFields] = useState({}); - const [iFrameCode, setIframeCode] = useState(""); - const [isDialogOpen, setIsDialogOpen] = useState(false); + const snap = useSnapshot(state) + const [templateError, setTemplateError] = useState('') + const [fields, setFields] = useState({}) + const [iFrameCode, setIframeCode] = useState('') + const [isDialogOpen, setIsDialogOpen] = useState(false) const getFields = useCallback(() => { - const inputTags = ["input", "param", "arg", "argument"]; + const inputTags = ['input', 'param', 'arg', 'argument'] const tags = getTags(content) .filter(tag => inputTags.includes(tag.tag)) - .filter(tag => !!tag.name); + .filter(tag => !!tag.name) let _fields = tags.map(tag => ({ name: tag.name, - value: tag.default || "", + value: tag.default || '', type: tag.type, description: tag.description, - required: !tag.optional, - })); + required: !tag.optional + })) const fields: Fields = _fields.reduce((acc, field) => { - acc[field.name] = field; - return acc; - }, {} as Fields); + acc[field.name] = field + return acc + }, {} as Fields) - const error = getErrors(content); - if (error) setTemplateError(error.message); - else setTemplateError(""); + const error = getErrors(content) + if (error) setTemplateError(error.message) + else setTemplateError('') - return fields; - }, [content]); + return fields + }, [content]) const runScript = useCallback(() => { try { - let data: any = {}; + let data: any = {} Object.keys(fields).forEach(key => { - data[key] = fields[key].value; - }); - const template = generateHtmlTemplate(content, data); + data[key] = fields[key].value + }) + const template = generateHtmlTemplate(content, data) - setIframeCode(template); + setIframeCode(template) - state.scriptLogs = [ - { type: "success", message: "Started running..." }, - ]; + state.scriptLogs = [{ type: 'success', message: 'Started running...' }] } catch (err) { state.scriptLogs = [ ...snap.scriptLogs, // @ts-expect-error - { type: "error", message: err?.message || "Could not parse template" }, - ]; + { type: 'error', message: err?.message || 'Could not parse template' } + ] } - }, [content, fields, snap.scriptLogs]); + }, [content, fields, snap.scriptLogs]) useEffect(() => { const handleEvent = (e: any) => { - if (e.data.type === "log" || e.data.type === "error") { + if (e.data.type === 'log' || e.data.type === 'error') { const data: ILog[] = e.data.args.map((msg: any) => ({ type: e.data.type, - message: typeof msg === "string" ? msg : JSON.stringify(msg, null, 2), - })); - state.scriptLogs = [...snap.scriptLogs, ...data]; + message: typeof msg === 'string' ? msg : JSON.stringify(msg, null, 2) + })) + state.scriptLogs = [...snap.scriptLogs, ...data] } - }; - window.addEventListener("message", handleEvent); - return () => window.removeEventListener("message", handleEvent); - }, [snap.scriptLogs]); + } + window.addEventListener('message', handleEvent) + return () => window.removeEventListener('message', handleEvent) + }, [snap.scriptLogs]) useEffect(() => { - const defaultFields = getFields() || {}; - setFields(defaultFields); - }, [content, setFields, getFields]); + const defaultFields = getFields() || {} + setFields(defaultFields) + }, [content, setFields, getFields]) const accOptions = snap.accounts?.map(acc => ({ ...acc, label: acc.name, - value: acc.address, - })); + value: acc.address + })) - const isDisabled = Object.values(fields).some( - field => field.required && !field.value - ); + const isDisabled = Object.values(fields).some(field => field.required && !field.value) const handleRun = useCallback(() => { - if (isDisabled) - return toast.error("Please fill in all the required fields."); + if (isDisabled) return toast.error('Please fill in all the required fields.') - state.scriptLogs = []; - runScript(); - setIsDialogOpen(false); - }, [isDisabled, runScript]); + state.scriptLogs = [] + runScript() + setIsDialogOpen(false) + }, [isDisabled, runScript]) return ( <> @@ -199,8 +189,8 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => { - @@ -308,14 +287,14 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => { @@ -324,14 +303,10 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => { {iFrameCode && ( -