@codecademy/codebytes 0.1.1-alpha.db68a2.0 → 0.2.1-alpha.33f7ab.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.db68a2.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.1.0...@codecademy/codebytes@0.1.1-alpha.db68a2.0) (2021-12-21)
+### [0.2.1-alpha.33f7ab.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.2.1-alpha.33f7ab.0) (2022-01-06)
 
 **Note:** Version bump only for package @codecademy/codebytes
 
@@ -11,6 +11,15 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+## [0.2.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.1.0...@codecademy/codebytes@0.2.0) (2022-01-04)
+
+
+### Features
+
+* **Codebytes:** add editor and drawers disc 351 ([#14](https://github.com/Codecademy/client-modules/issues/14)) ([e84e265](https://github.com/Codecademy/client-modules/commit/e84e265e4cf4bf8360830ebf2dbea930ab503c9c))
+
+
+
 ## 0.1.0 (2021-12-17)
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.1.1-alpha.db68a2.0",
+  "version": "0.2.1-alpha.33f7ab.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -23,8 +23,13 @@
     "@codecademy/gamut": "*",
     "@codecademy/gamut-icons": "*",
     "@codecademy/gamut-styles": "*",
+    "@codecademy/variance": "*",
     "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0"
+    "@emotion/styled": "^11.3.0",
+    "@loadable/component": "^5.13.1",
+    "monaco-editor": "0.20.0",
+    "react-monaco-editor": "0.34.0",
+    "react-resize-observer": "1.1.1"
   },
   "scripts": {
     "verify": "tsc --noEmit",
@@ -38,10 +43,12 @@
   "devDependencies": {
     "@emotion/jest": "^11.3.0",
     "@testing-library/dom": "^7.31.2",
-    "@testing-library/react": "^11.0.4"
+    "@testing-library/react": "^11.0.4",
+    "@types/loadable__component": "^5.13.2",
+    "monaco-editor-webpack-plugin": "1.9.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0418b8a6fda0efc860f1b0f454957fca092213ea"
+  "gitHead": "1cb6b81296330124c9d611c5727680f3a3090b56"
 }

package/src/MonacoEditor/colorsDark.ts

@@ -0,0 +1,54 @@
+// DO NOT CHANGE ANYTHING HERE
+// This file is part of the Codebytes MVP and only includes basic configuration around theming for the SimpleMonacoEditor component
+// We are working on a monaco package in client-modules that has more configuration around themes and languages
+// Monaco as a shared package RFC https://www.notion.so/codecademy/Monaco-editor-as-a-shared-package-1f4484db165b4abc8394c3556451ef6a
+
+import { colors, editorColors } from '@codecademy/gamut-styles';
+
+const darkTheme = {
+  blue: editorColors.blue,
+  deepPurple: editorColors.deepPurple,
+  gray: editorColors.gray,
+  green: editorColors.green,
+  orange: editorColors.orange,
+  purple: editorColors.purple,
+  red: editorColors.red,
+  white: colors.white,
+  yellow: editorColors.yellow,
+};
+
+export const syntax = {
+  attribute: darkTheme.green,
+  annotation: darkTheme.red,
+  atom: darkTheme.deepPurple,
+  basic: darkTheme.white,
+  comment: darkTheme.gray,
+  constant: darkTheme.orange,
+  decoration: darkTheme.red,
+  invalid: darkTheme.red,
+  key: darkTheme.blue,
+  keyword: darkTheme.purple,
+  number: darkTheme.red,
+  operator: darkTheme.red,
+  predefined: darkTheme.white,
+  property: darkTheme.red,
+  regexp: darkTheme.green,
+  string: darkTheme.yellow,
+  tag: darkTheme.red,
+  text: darkTheme.orange,
+  value: darkTheme.yellow,
+  variable: darkTheme.green,
+};
+
+export const ui = {
+  background: '#211E2F',
+  text: darkTheme.white,
+  indent: {
+    active: '#393b41',
+    inactive: '#494b51',
+  },
+};
+
+export type SyntaxColors = typeof syntax;
+
+export type UIColors = typeof ui;

package/src/MonacoEditor/index.tsx

@@ -0,0 +1,53 @@
+// DO NOT CHANGE ANYTHING HERE
+// This component is part of the Codebytes MVP and only includes basic configuration around theming
+// We are working on a monaco package in client-modules that has more configuration around themes and languages
+// Monaco as a shared package RFC https://www.notion.so/codecademy/Monaco-editor-as-a-shared-package-1f4484db165b4abc8394c3556451ef6a
+
+import loadable from '@loadable/component';
+import React, { useCallback, useRef } from 'react';
+import MonacoEditor from 'react-monaco-editor';
+import ResizeObserver from 'react-resize-observer';
+
+import { dark } from './theme';
+import { Monaco } from './types';
+
+const ReactMonacoEditor = loadable(() => import('react-monaco-editor'));
+
+export type SimpleMonacoEditorProps = {
+  value: string;
+  language: string;
+  onChange?: (value: string) => void;
+};
+
+export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
+  value,
+  language,
+  onChange,
+}) => {
+  const editorRef = useRef<MonacoEditor>(null);
+  const editorWillMount = useCallback((monaco: Monaco) => {
+    monaco.editor.defineTheme('dark', dark);
+    monaco.editor.setTheme('dark');
+  }, []);
+  return (
+    <>
+      <ResizeObserver
+        onResize={({ height, width }) => {
+          editorRef.current?.editor?.layout({
+            height,
+            width,
+          });
+        }}
+      />
+      <ReactMonacoEditor
+        ref={editorRef}
+        editorWillMount={editorWillMount}
+        onChange={onChange}
+        options={{ minimap: { enabled: false } }}
+        theme="dark"
+        value={value}
+        language={language}
+      />
+    </>
+  );
+};

package/src/MonacoEditor/theme.ts

@@ -0,0 +1,64 @@
+// DO NOT CHANGE ANYTHING HERE
+// This file is part of the Codebytes MVP and only includes basic configuration around theming for the SimpleMonacoEditor component
+// We are working on a monaco package in client-modules that has more configuration around themes and languages
+// Monaco as a shared package RFC https://www.notion.so/codecademy/Monaco-editor-as-a-shared-package-1f4484db165b4abc8394c3556451ef6a
+
+import type * as monaco from 'monaco-editor';
+
+import * as darkColors from './colorsDark';
+
+const c = (color: string) => color.substr(1);
+
+const theme = ({
+  ui,
+  syntax,
+}: {
+  ui: darkColors.UIColors;
+  syntax: darkColors.SyntaxColors;
+}): monaco.editor.IStandaloneThemeData => ({
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    // Base
+    { token: '', foreground: c(syntax.basic) },
+    { token: 'regexp', foreground: c(syntax.regexp) },
+    { token: 'annotation', foreground: c(syntax.annotation) },
+    { token: 'type', foreground: c(syntax.annotation) },
+    { token: 'doctype', foreground: c(syntax.comment) },
+    { token: 'delimiter', foreground: c(syntax.decoration) },
+    { token: 'invalid', foreground: c(syntax.invalid) },
+    { token: 'emphasis', fontStyle: 'italic' },
+    { token: 'strong', fontStyle: 'bold' },
+    { token: 'variable', foreground: c(syntax.variable) },
+    { token: 'variable.predefined', foreground: c(syntax.variable) },
+    { token: 'constant', foreground: c(syntax.constant) },
+    { token: 'comment', foreground: c(syntax.comment) },
+    { token: 'number', foreground: c(syntax.number) },
+    { token: 'number.hex', foreground: c(syntax.number) },
+    { token: 'keyword.directive', foreground: c(syntax.comment) },
+    { token: 'include', foreground: c(syntax.comment) },
+    { token: 'key', foreground: c(syntax.property) },
+    { token: 'attribute.name', foreground: c(syntax.attribute) },
+    { token: 'attribute.name-numeric', foreground: c(syntax.string) },
+    { token: 'attribute.value', foreground: c(syntax.property) },
+    { token: 'attribute.value.number', foreground: c(syntax.number) },
+    { token: 'string', foreground: c(syntax.string) },
+    { token: 'string.yaml', foreground: c(syntax.string) },
+    { token: 'tag', foreground: c(syntax.tag) },
+    { token: 'tag.id.jade', foreground: c(syntax.tag) },
+    { token: 'tag.class.jade', foreground: c(syntax.tag) },
+    { token: 'metatag', foreground: c(syntax.comment) },
+    { token: 'attribute.value.unit', foreground: c(syntax.string) },
+    { token: 'keyword', foreground: c(syntax.keyword) },
+    { token: 'keyword.flow', foreground: c(syntax.keyword) },
+  ],
+  colors: {
+    'editor.background': ui.background,
+    'editor.foreground': ui.text,
+    'editorIndentGuide.background': ui.indent.inactive,
+    'editorIndentGuide.activeBackground': ui.indent.active,
+    'editorWhitespace.foreground': syntax.comment,
+  },
+});
+
+export const dark = theme(darkColors);

package/src/MonacoEditor/types.ts

@@ -0,0 +1 @@
+export type Monaco = typeof import('monaco-editor');

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/consts.ts

@@ -1,15 +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;
+  '': '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

@@ -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

@@ -6,24 +6,26 @@ import {
   ToolTip,
 } from '@codecademy/gamut';
 import { CopyIcon } from '@codecademy/gamut-icons';
-import { theme } from '@codecademy/gamut-styles';
+import { colors } 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';
+import { SimpleMonacoEditor } from './MonacoEditor';
 
 const Output = styled.pre<{ hasError: boolean }>`
   width: 100%;
-  height: 20rem;
+  height: 100%;
   margin: 0;
   padding: 0 1rem;
   font-family: Monaco;
   font-size: 0.875rem;
   overflow: auto;
-  ${({ hasError }) => `
+  ${({ hasError, theme }) => `
   color: ${hasError ? theme.colors.orange : theme.colors.white};
-  background-color: ${theme.colors['gray-900']};
+  background-color: ${colors['gray-900']};
 `}
 `;
 
@@ -38,21 +40,20 @@ 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,
+  onChange,
+  snippetsBaseUrl,
 }) => {
   const [output, setOutput] = useState('');
   const [status, setStatus] = useState<'ready' | 'waiting' | 'error'>('ready');
@@ -63,10 +64,7 @@ export const Editor: React.FC<EditorProps> = ({
         .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 */
+      onCopy?.(text, language);
       setIsCodeByteCopied(true);
     }
   };
@@ -76,7 +74,7 @@ export const Editor: React.FC<EditorProps> = ({
     setStatus('error');
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     if (text.trim().length === 0) {
       return;
     }
@@ -87,40 +85,35 @@ 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 (
     <>
       <Drawers
-        leftChild={<div>{text}</div>}
+        leftChild={
+          <SimpleMonacoEditor
+            value={text}
+            language={language}
+            onChange={onChange}
+          />
+        }
         rightChild={
           <Output hasError={status === 'error'} aria-live="polite">
             {output}
@@ -129,7 +122,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,6 +1,7 @@
 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';
 
@@ -11,49 +12,68 @@ export interface CodeByteEditorProps {
   text: string;
   language: languageOption;
   hideCopyButton: boolean;
+  onCopy?: (text: string, language: string) => void;
+  isIFrame?: boolean;
+  snippetsBaseUrl?: string /* TODO in DISC-353: Determine best way to host and include snippets endpoint for both staging and production in both the monolith and next.js repo. */;
+  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',
-  })
+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 const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
   language,
   hideCopyButton,
+  onCopy,
+  isIFrame = false,
+  snippetsBaseUrl = '',
+  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,4 @@
+import { CoreTheme } from '@codecademy/gamut-styles';
+declare module '@emotion/react' {
+  export interface Theme extends CoreTheme {}
+}

package/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["../../typings/*.d.ts", "./src/**/*.ts", "./src/**/*.tsx"]
-}
+}