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

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 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)
+
+**Note:** Version bump only for package @codecademy/codebytes
+
+
+
+
+
 ## 0.1.0 (2021-12-17)
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.1.0",
+  "version": "0.1.1-alpha.19caf8.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9bec617580c724567d6339a6cb1e753fa4e19ca"
+  "gitHead": "5df74cc4516c8894a448ede333784ca4deb371e7"
 }

package/src/consts.ts

@@ -0,0 +1,15 @@
+// key = language param to send to snippets service
+// val = label in language selection drop down
+export const languageOptions = {
+  '': 'Select your language',
+  cpp: 'C++',
+  csharp: 'C#',
+  golang: 'Go',
+  javascript: 'JavaScript',
+  php: 'PHP',
+  python: 'Python 3',
+  ruby: 'Ruby',
+  scheme: 'Scheme',
+};
+
+export type languageOption = keyof typeof languageOptions;

package/src/drawers.tsx

@@ -0,0 +1,128 @@
+import { FlexBox, IconButton } from '@codecademy/gamut';
+import {
+  ArrowChevronLeftIcon,
+  ArrowChevronRightIcon,
+} from '@codecademy/gamut-icons';
+import styled from '@emotion/styled';
+import React, { useState } from 'react';
+
+const DrawerLabel = styled.span`
+  padding: 0.875rem 0.5rem;
+`;
+
+const LeftDrawerIcon = styled(ArrowChevronLeftIcon)<{ open?: boolean }>`
+  transition: transform 0.2s ease-in-out;
+`;
+const RightDrawerIcon = LeftDrawerIcon.withComponent(ArrowChevronRightIcon);
+
+const Drawer = styled(FlexBox)<{ open?: boolean; hideOnClose?: boolean }>`
+  position: relative;
+  ${({ open, hideOnClose }) => `
+    flex-basis: ${open ? '100%' : '0%'};
+    ${!open && hideOnClose ? 'visibility: hidden;' : ''}
+    transition: flex-basis 0.2s ${
+      open ? 'ease-out' : 'ease-in, visibility 0s 0.2s'
+    };
+
+    ${LeftDrawerIcon}, ${RightDrawerIcon} {
+      transform: rotateZ(${open ? '0' : '180'}deg)};
+    }
+  `}
+`;
+
+export type DrawersProps = {
+  leftChild: React.ReactNode;
+  rightChild: React.ReactNode;
+};
+
+export const Drawers: React.FC<DrawersProps> = ({ leftChild, rightChild }) => {
+  const [show, setShow] = useState<'left' | 'right' | 'both'>('both');
+
+  let buttonLabelL = 'hide code';
+  let buttonLabelR = 'hide output';
+
+  if (show === 'left') {
+    buttonLabelL = buttonLabelR = 'show output';
+  } else if (show === 'right') {
+    buttonLabelL = buttonLabelR = 'show code';
+  }
+
+  return (
+    <>
+      <FlexBox>
+        <Drawer
+          open={show !== 'right'}
+          alignItems="center"
+          flexWrap="nowrap"
+          textAlign="left"
+          borderRight="1"
+          borderColor="gray-900"
+          px="8"
+        >
+          <IconButton
+            icon={LeftDrawerIcon}
+            variant="secondary"
+            size="small"
+            onClick={() =>
+              setShow((state) => (state === 'both' ? 'right' : 'both'))
+            }
+            aria-label={buttonLabelL}
+            aria-controls="code-drawer"
+            aria-expanded={show !== 'right'}
+          />
+          <DrawerLabel id="code-drawer-label">Code</DrawerLabel>
+        </Drawer>
+        <Drawer
+          open={show !== 'left'}
+          alignItems="center"
+          flexWrap="nowrap"
+          justifyContent="flex-end"
+          px="8"
+        >
+          <DrawerLabel id="output-drawer-label">Output</DrawerLabel>
+          <IconButton
+            icon={RightDrawerIcon}
+            variant="secondary"
+            size="small"
+            onClick={() =>
+              setShow((state) => (state === 'both' ? 'left' : 'both'))
+            }
+            aria-label={buttonLabelR}
+            aria-controls="output-drawer"
+            aria-expanded={show !== 'left'}
+          />
+        </Drawer>
+      </FlexBox>
+      <FlexBox
+        flexGrow={1}
+        borderY="1"
+        borderColor="gray-900"
+        alignItems="stretch"
+        overflow="hidden"
+      >
+        <Drawer
+          hideOnClose
+          id="code-drawer"
+          aria-labelledby="code-drawer-label"
+          open={show !== 'right'}
+          flexGrow={0}
+          overflow="hidden"
+          borderColor="gray-900"
+          borderStyleRight="solid"
+          borderWidthRight="thin"
+        >
+          {leftChild}
+        </Drawer>
+        <Drawer
+          hideOnClose
+          id="output-drawer"
+          aria-labelledby="output-drawer-label"
+          open={show !== 'left'}
+          overflow="hidden"
+        >
+          {rightChild}
+        </Drawer>
+      </FlexBox>
+    </>
+  );
+};

package/src/editor.tsx

@@ -1,10 +1,162 @@
-import React from 'react';
+import {
+  FillButton,
+  FlexBox,
+  Spinner,
+  TextButton,
+  ToolTip,
+} from '@codecademy/gamut';
+import { CopyIcon } from '@codecademy/gamut-icons';
+import { theme } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
+import React, { useState } from 'react';
+
+import type { languageOption } from './consts';
+import { Drawers } from './drawers';
+
+const Output = styled.pre<{ hasError: boolean }>`
+  width: 100%;
+  height: 20rem;
+  margin: 0;
+  padding: 0 1rem;
+  font-family: Monaco;
+  font-size: 0.875rem;
+  overflow: auto;
+  ${({ hasError }) => `
+  color: ${hasError ? theme.colors.orange : theme.colors.white};
+  background-color: ${theme.colors['gray-900']};
+`}
+`;
+
+const CopyIconStyled = styled(CopyIcon)`
+  margin-right: 0.5rem;
+`;
+
+const DOCKER_SIGTERM = 143;
 
 type EditorProps = {
+  hideCopyButton: boolean;
+  language: languageOption;
   text: string;
-  onChange: (text: string) => void;
+  // eslint-disable-next-line react/no-unused-prop-types
+  onChange: (text: string) => void /* Will use in upcoming pr */;
+  onCopy?: (text: string, language: string) => void;
 };
 
-export const Editor: React.FC<EditorProps> = ({ text, onChange }) => {
-  return <textarea value={text} onChange={(e) => onChange(e.target.value)} />;
+interface Response {
+  stderr: string;
+  stdout: string;
+  exit_code: number;
+}
+
+export const Editor: React.FC<EditorProps> = ({
+  language,
+  text,
+  hideCopyButton,
+  onCopy,
+}) => {
+  const [output, setOutput] = useState('');
+  const [status, setStatus] = useState<'ready' | 'waiting' | 'error'>('ready');
+  const [isCodeByteCopied, setIsCodeByteCopied] = useState(false);
+  const onCopyClick = () => {
+    if (!isCodeByteCopied) {
+      navigator.clipboard
+        .writeText(text)
+        // eslint-disable-next-line no-console
+        .catch(() => console.error('Failed to copy'));
+      onCopy?.(
+        text,
+        language
+      ); /* TODO: pass in onCopyBBCodeblock behavior from static sites */
+      setIsCodeByteCopied(true);
+    }
+  };
+
+  const setErrorStatusAndOutput = (message: string) => {
+    setOutput(message);
+    setStatus('error');
+  };
+
+  const handleSubmit = () => {
+    if (text.trim().length === 0) {
+      return;
+    }
+    const data = {
+      language,
+      code: text,
+    };
+    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);
+      });
+  };
+
+  return (
+    <>
+      <Drawers
+        leftChild={<div>{text}</div>}
+        rightChild={
+          <Output hasError={status === 'error'} aria-live="polite">
+            {output}
+          </Output>
+        }
+      />
+      <FlexBox
+        justifyContent={hideCopyButton ? 'flex-end' : 'space-between'}
+        pl="8"
+      >
+        {!hideCopyButton ? (
+          <ToolTip
+            id="codebyte-copied"
+            alignment="top-right"
+            mode="dark"
+            target={
+              <TextButton
+                variant="secondary"
+                onClick={onCopyClick}
+                onBlur={() => setIsCodeByteCopied(false)}
+              >
+                <CopyIconStyled aria-hidden="true" /> Copy Codebyte
+              </TextButton>
+            }
+          >
+            {isCodeByteCopied ? (
+              <span role="alert">Copied!</span>
+            ) : (
+              <span>Copy to your clipboard</span>
+            )}
+          </ToolTip>
+        ) : null}
+        <FillButton onClick={handleSubmit}>
+          {status === 'waiting' ? <Spinner /> : 'Run'}
+        </FillButton>
+      </FlexBox>
+    </>
+  );
 };

package/src/index.tsx

@@ -1,23 +1,58 @@
+import { Box, IconButton } from '@codecademy/gamut';
+import { FaviconIcon } from '@codecademy/gamut-icons';
+import { Background, system } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
+import { languageOption } from './consts';
 import { Editor } from './editor';
 
 export interface CodeByteEditorProps {
   text: string;
+  language: languageOption;
+  hideCopyButton: boolean;
 }
 
+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,
 }) => {
   const [text, setText] = useState<string>(initialText);
   return (
     <>
-      <Editor
-        text={text}
-        onChange={(newText: string) => {
-          setText(newText);
-        }}
-      />
+      <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>
     </>
   );
 };