@codecademy/codebytes 0.1.1-alpha.19caf8.0 → 0.1.1-alpha.675361.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [0.1.1-alpha.19caf8.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.1.0...@codecademy/codebytes@0.1.1-alpha.19caf8.0) (2021-12-21)
+### [0.1.1-alpha.675361.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.1.0...@codecademy/codebytes@0.1.1-alpha.675361.0) (2022-01-03)
 
 **Note:** Version bump only for package @codecademy/codebytes
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.1.1-alpha.19caf8.0",
+  "version": "0.1.1-alpha.675361.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -23,6 +23,7 @@
     "@codecademy/gamut": "*",
     "@codecademy/gamut-icons": "*",
     "@codecademy/gamut-styles": "*",
+    "@codecademy/variance": "*",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0"
   },
@@ -43,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5df74cc4516c8894a448ede333784ca4deb371e7"
+  "gitHead": "d9c4df33e1b24cd2f123e939a0e4c2279096ba36"
 }

package/src/api.ts

@@ -0,0 +1,28 @@
+import type { languageOption } from './consts';
+
+interface Response {
+  stderr: string;
+  stdout: string;
+  exit_code: number;
+}
+
+interface PostSnippetData {
+  language: languageOption;
+  code: string;
+}
+
+export const postSnippet = async (
+  data: PostSnippetData,
+  snippetsBaseUrl?: string
+): Promise<Response> => {
+  const snippetsEndpoint = `https://${snippetsBaseUrl}/snippets`;
+
+  const response = await fetch(snippetsEndpoint, {
+    method: 'POST',
+    body: JSON.stringify(data),
+    headers: {
+      'x-codecademy-user-id': 'codebytes-anon-user',
+    },
+  });
+  return response.json();
+};

package/src/drawers.tsx

@@ -19,7 +19,7 @@ const Drawer = styled(FlexBox)<{ open?: boolean; hideOnClose?: boolean }>`
   position: relative;
   ${({ open, hideOnClose }) => `
     flex-basis: ${open ? '100%' : '0%'};
-    ${!open && hideOnClose ? 'visibility: hidden;' : ''}
+    visibility: ${!open && hideOnClose ? 'hidden' : 'visible'};
     transition: flex-basis 0.2s ${
       open ? 'ease-out' : 'ease-in, visibility 0s 0.2s'
     };
@@ -36,48 +36,52 @@ export type DrawersProps = {
 };
 
 export const Drawers: React.FC<DrawersProps> = ({ leftChild, rightChild }) => {
-  const [show, setShow] = useState<'left' | 'right' | 'both'>('both');
+  const [open, setOpen] = useState<'left' | 'right' | 'both'>('both');
 
-  let buttonLabelL = 'hide code';
-  let buttonLabelR = 'hide output';
+  let ariaLabelCodeButton = 'hide code';
+  let ariaLabelOutputButton = 'hide output';
+  let isLeftOpen = false;
+  let isRightOpen = false;
 
-  if (show === 'left') {
-    buttonLabelL = buttonLabelR = 'show output';
-  } else if (show === 'right') {
-    buttonLabelL = buttonLabelR = 'show code';
+  if (open === 'left') {
+    ariaLabelCodeButton = ariaLabelOutputButton = 'show output';
+    isLeftOpen = true;
+  } else if (open === 'right') {
+    ariaLabelCodeButton = ariaLabelOutputButton = 'show code';
+    isRightOpen = true;
   }
 
   return (
     <>
       <FlexBox>
         <Drawer
-          open={show !== 'right'}
+          open={!isRightOpen}
           alignItems="center"
           flexWrap="nowrap"
           textAlign="left"
-          borderRight="1"
+          borderRight={1}
           borderColor="gray-900"
-          px="8"
+          px={8}
         >
           <IconButton
             icon={LeftDrawerIcon}
             variant="secondary"
             size="small"
             onClick={() =>
-              setShow((state) => (state === 'both' ? 'right' : 'both'))
+              setOpen((state) => (state === 'both' ? 'right' : 'both'))
             }
-            aria-label={buttonLabelL}
+            aria-label={ariaLabelCodeButton}
             aria-controls="code-drawer"
-            aria-expanded={show !== 'right'}
+            aria-expanded={!isRightOpen}
           />
           <DrawerLabel id="code-drawer-label">Code</DrawerLabel>
         </Drawer>
         <Drawer
-          open={show !== 'left'}
+          open={!isLeftOpen}
           alignItems="center"
           flexWrap="nowrap"
           justifyContent="flex-end"
-          px="8"
+          px={8}
         >
           <DrawerLabel id="output-drawer-label">Output</DrawerLabel>
           <IconButton
@@ -85,17 +89,17 @@ export const Drawers: React.FC<DrawersProps> = ({ leftChild, rightChild }) => {
             variant="secondary"
             size="small"
             onClick={() =>
-              setShow((state) => (state === 'both' ? 'left' : 'both'))
+              setOpen((state) => (state === 'both' ? 'left' : 'both'))
             }
-            aria-label={buttonLabelR}
+            aria-label={ariaLabelOutputButton}
             aria-controls="output-drawer"
-            aria-expanded={show !== 'left'}
+            aria-expanded={!isLeftOpen}
           />
         </Drawer>
       </FlexBox>
       <FlexBox
         flexGrow={1}
-        borderY="1"
+        borderY={1}
         borderColor="gray-900"
         alignItems="stretch"
         overflow="hidden"
@@ -104,7 +108,7 @@ export const Drawers: React.FC<DrawersProps> = ({ leftChild, rightChild }) => {
           hideOnClose
           id="code-drawer"
           aria-labelledby="code-drawer-label"
-          open={show !== 'right'}
+          open={!isRightOpen}
           flexGrow={0}
           overflow="hidden"
           borderColor="gray-900"
@@ -117,7 +121,7 @@ export const Drawers: React.FC<DrawersProps> = ({ leftChild, rightChild }) => {
           hideOnClose
           id="output-drawer"
           aria-labelledby="output-drawer-label"
-          open={show !== 'left'}
+          open={!isLeftOpen}
           overflow="hidden"
         >
           {rightChild}

package/src/editor.tsx

@@ -10,12 +10,13 @@ import { theme } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
+import { postSnippet } from './api';
 import type { languageOption } from './consts';
 import { Drawers } from './drawers';
 
 const Output = styled.pre<{ hasError: boolean }>`
   width: 100%;
-  height: 20rem;
+  height: 100%;
   margin: 0;
   padding: 0 1rem;
   font-family: Monaco;
@@ -38,21 +39,19 @@ type EditorProps = {
   language: languageOption;
   text: string;
   // eslint-disable-next-line react/no-unused-prop-types
-  onChange: (text: string) => void /* Will use in upcoming pr */;
+  onChange: (
+    text: string
+  ) => void /* TODO: Add onChange behavior in DISC-353 */;
   onCopy?: (text: string, language: string) => void;
+  snippetsBaseUrl?: string;
 };
 
-interface Response {
-  stderr: string;
-  stdout: string;
-  exit_code: number;
-}
-
 export const Editor: React.FC<EditorProps> = ({
   language,
   text,
   hideCopyButton,
   onCopy,
+  snippetsBaseUrl,
 }) => {
   const [output, setOutput] = useState('');
   const [status, setStatus] = useState<'ready' | 'waiting' | 'error'>('ready');
@@ -66,7 +65,7 @@ export const Editor: React.FC<EditorProps> = ({
       onCopy?.(
         text,
         language
-      ); /* TODO: pass in onCopyBBCodeblock behavior from static sites */
+      ); /* TODO: pass in onCopyBBCodeblock behavior from the future version we migrate to Next.js  */
       setIsCodeByteCopied(true);
     }
   };
@@ -76,7 +75,7 @@ export const Editor: React.FC<EditorProps> = ({
     setStatus('error');
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     if (text.trim().length === 0) {
       return;
     }
@@ -87,34 +86,23 @@ export const Editor: React.FC<EditorProps> = ({
     setStatus('waiting');
     setOutput('');
 
-    const snippetsEndpoint =
-      'https://' + process.env.GATSBY_CONTAINER_API_BASE + '/snippets';
-
-    fetch(snippetsEndpoint, {
-      method: 'POST',
-      body: JSON.stringify(data),
-      headers: {
-        'x-codecademy-user-id': 'codebytes-anon-user',
-      },
-    })
-      .then((res) => res.json())
-      .then((response: Response) => {
-        if (response.stderr.length > 0) {
-          setErrorStatusAndOutput(response.stderr);
-        } else if (response.exit_code === DOCKER_SIGTERM) {
-          setErrorStatusAndOutput(
-            'Your code took too long to return a result. Double check your code for any issues and try again!'
-          );
-        } else if (response.exit_code !== 0) {
-          setErrorStatusAndOutput('An unknown error occured.');
-        } else {
-          setOutput(response.stdout);
-          setStatus('ready');
-        }
-      })
-      .catch((error) => {
-        setErrorStatusAndOutput('Error: ' + error);
-      });
+    try {
+      const response = await postSnippet(data, snippetsBaseUrl);
+      if (response.stderr.length > 0) {
+        setErrorStatusAndOutput(response.stderr);
+      } else if (response.exit_code === DOCKER_SIGTERM) {
+        setErrorStatusAndOutput(
+          'Your code took too long to return a result. Double check your code for any issues and try again!'
+        );
+      } else if (response.exit_code !== 0) {
+        setErrorStatusAndOutput('An unknown error occured.');
+      } else {
+        setOutput(response.stdout);
+        setStatus('ready');
+      }
+    } catch (error) {
+      setErrorStatusAndOutput('Error: ' + error);
+    }
   };
 
   return (
@@ -129,7 +117,7 @@ export const Editor: React.FC<EditorProps> = ({
       />
       <FlexBox
         justifyContent={hideCopyButton ? 'flex-end' : 'space-between'}
-        pl="8"
+        pl={8}
       >
         {!hideCopyButton ? (
           <ToolTip

package/src/index.tsx

@@ -1,59 +1,79 @@
 import { Box, IconButton } from '@codecademy/gamut';
 import { FaviconIcon } from '@codecademy/gamut-icons';
-import { Background, system } from '@codecademy/gamut-styles';
+import { Background, states, system } from '@codecademy/gamut-styles';
+import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
 import { languageOption } from './consts';
 import { Editor } from './editor';
 
+const editorStates = states({
+  isIFrame: { height: '100vh' },
+});
+
+const editorBaseStyles = system.css({
+  border: 1,
+  borderColor: 'gray-900',
+  display: 'flex',
+  flexDirection: 'column',
+  height: '25rem',
+  width: '43rem',
+  overflow: 'hidden',
+});
+export interface EditorStyleProps
+  extends StyleProps<typeof editorBaseStyles>,
+    StyleProps<typeof editorStates> {}
+
+const EditorContainer = styled(Background)<EditorStyleProps>(
+  editorBaseStyles,
+  editorStates
+);
+
 export interface CodeByteEditorProps {
   text: string;
   language: languageOption;
   hideCopyButton: boolean;
+  onCopy?: (text: string, language: string) => void;
+  isIFrame?: boolean;
+  snippetsBaseUrl?: string;
+  onTextChange?: (text: string) => void;
 }
 
-const EditorContainer = styled(Background)(
-  system.css({
-    border: '1',
-    borderColor: 'gray-900',
-    display: 'flex',
-    flexDirection: 'column',
-    height: '400px',
-    width: '688px',
-    overflow: 'hidden',
-  })
-);
-
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
   language,
   hideCopyButton,
+  onCopy,
+  isIFrame = false,
+  snippetsBaseUrl = process.env.CONTAINER_API_BASE,
+  onTextChange,
 }) => {
   const [text, setText] = useState<string>(initialText);
   return (
-    <>
-      <EditorContainer bg="black" as="main">
-        <Box borderBottom="1" borderColor="gray-900" py="4" pl="8">
-          <IconButton
-            icon={FaviconIcon}
-            variant="secondary"
-            href="https://www.codecademy.com/"
-            target="_blank"
-            rel="noreferrer"
-            aria-label="visit codecademy.com"
-          />
-        </Box>
-        <Editor
-          text={text}
-          onChange={(newText: string) => {
-            setText(newText);
-          }}
-          hideCopyButton={hideCopyButton}
-          language={language}
+    <EditorContainer bg="black" as="main" isIFrame={isIFrame}>
+      <Box borderBottom={1} borderColor="gray-900" py={4} pl={8}>
+        <IconButton
+          icon={FaviconIcon}
+          variant="secondary"
+          href="https://www.codecademy.com/"
+          target="_blank"
+          rel="noreferrer"
+          aria-label="visit codecademy.com"
         />
-      </EditorContainer>
-    </>
+      </Box>
+      <Editor
+        language={language}
+        text={text}
+        hideCopyButton={hideCopyButton}
+        onChange={(newText: string) => {
+          setText(newText);
+          onTextChange?.(newText);
+        }}
+        onCopy={onCopy}
+        snippetsBaseUrl={snippetsBaseUrl}
+      />
+    </EditorContainer>
   );
 };
 

package/src/theme.d.ts

@@ -0,0 +1,5 @@
+import { CoreTheme } from '@codecademy/gamut-styles';
+
+declare module '@emotion/react' {
+  export interface Theme extends CoreTheme {}
+}