@codecademy/codebytes 0.1.1-alpha.ddee0b.0 → 0.2.1-alpha.20333e.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.ddee0b.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.1.0...@codecademy/codebytes@0.1.1-alpha.ddee0b.0) (2022-01-03)
+### [0.2.1-alpha.20333e.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.2.1-alpha.20333e.0) (2022-01-11)
 
 **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.ddee0b.0",
+  "version": "0.2.1-alpha.20333e.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -25,7 +25,10 @@
     "@codecademy/gamut-styles": "*",
     "@codecademy/variance": "*",
     "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0"
+    "@emotion/styled": "^11.3.0",
+    "@monaco-editor/react": "4.3.1",
+    "monaco-editor": ">= 0.25.0 < 1",
+    "react-resize-observer": "1.1.1"
   },
   "scripts": {
     "verify": "tsc --noEmit",
@@ -39,10 +42,11 @@
   "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"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a32b92d7fe89f0553729f4d82d9965e1d56340ec"
+  "gitHead": "6e9e6706acf142e4f1cb09d1455b72beca3168fb"
 }

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,56 @@
+// 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 ReactMonacoEditor, { OnMount } from '@monaco-editor/react';
+import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+import React, { useCallback, useRef } from 'react';
+import ResizeObserver from 'react-resize-observer';
+
+import { dark } from './theme';
+import { Monaco } from './types';
+
+export type SimpleMonacoEditorProps = {
+  value: string;
+  language: string;
+  onChange?: (value: string) => void;
+};
+
+type ThemedEditor = Parameters<OnMount>[0];
+
+export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
+  value,
+  language,
+  onChange,
+}) => {
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const editorWillMount = useCallback(
+    (editor: ThemedEditor, monaco: Monaco) => {
+      editorRef.current = editor;
+      monaco.editor.defineTheme('dark', dark);
+      monaco.editor.setTheme('dark');
+    },
+    []
+  );
+  return (
+    <>
+      <ResizeObserver
+        onResize={({ height, width }) => {
+          editorRef.current?.layout({
+            height,
+            width,
+          });
+        }}
+      />
+      <ReactMonacoEditor
+        onMount={editorWillMount}
+        onChange={onChange}
+        options={{ minimap: { enabled: false } }}
+        theme="vs-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

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

@@ -13,3 +13,52 @@ export const languageOptions = {
 };
 
 export type languageOption = keyof typeof languageOptions;
+
+export const validLanguages = Object.keys(languageOptions).filter(
+  (option) => !!option
+) as languageOption[];
+
+const cpp = `#include <iostream>
+int main() {
+  std::cout << "Hello world!";
+  return 0;
+}`;
+
+const csharp = `namespace HelloWorld {
+  class Hello {
+    static void Main(string[] args) {
+      System.Console.WriteLine("Hello world!");
+    }
+  }
+}`;
+
+const golang = `package main
+import "fmt"
+func main() {
+  fmt.Println("Hello world!")
+}`;
+
+const javascript = "console.log('Hello world!');";
+
+const php = `<?php
+  echo "Hello world!";
+?>`;
+
+const python = "print('Hello world!')";
+
+const ruby = 'puts "Hello world!"';
+
+const scheme = `(begin
+  (display "Hello world!")
+  (newline))`;
+
+export const helloWorld: { [key in languageOption]?: string } = {
+  cpp,
+  csharp,
+  golang,
+  javascript,
+  php,
+  python,
+  ruby,
+  scheme,
+};

package/src/editor.tsx

@@ -6,13 +6,13 @@ import {
   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 { postSnippet } from './api';
 import type { languageOption } from './consts';
 import { Drawers } from './drawers';
+import { SimpleMonacoEditor } from './MonacoEditor';
 
 const Output = styled.pre<{ hasError: boolean }>`
   width: 100%;
@@ -22,9 +22,9 @@ const Output = styled.pre<{ hasError: boolean }>`
   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: ${theme.colors['navy-900']};
 `}
 `;
 
@@ -38,10 +38,7 @@ type EditorProps = {
   hideCopyButton: boolean;
   language: languageOption;
   text: string;
-  // eslint-disable-next-line react/no-unused-prop-types
-  onChange: (
-    text: string
-  ) => void /* TODO: Add onChange behavior in DISC-353 */;
+  onChange: (text: string) => void;
   onCopy?: (text: string, language: string) => void;
   snippetsBaseUrl?: string;
 };
@@ -51,6 +48,7 @@ export const Editor: React.FC<EditorProps> = ({
   text,
   hideCopyButton,
   onCopy,
+  onChange,
   snippetsBaseUrl,
 }) => {
   const [output, setOutput] = useState('');
@@ -62,10 +60,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 the future version we migrate to Next.js  */
+      onCopy?.(text, language);
       setIsCodeByteCopied(true);
     }
   };
@@ -108,7 +103,13 @@ export const Editor: React.FC<EditorProps> = ({
   return (
     <>
       <Drawers
-        leftChild={<div>{text}</div>}
+        leftChild={
+          <SimpleMonacoEditor
+            value={text}
+            language={language}
+            onChange={onChange}
+          />
+        }
         rightChild={
           <Output hasError={status === 'error'} aria-live="polite">
             {output}

package/src/index.tsx

@@ -5,8 +5,21 @@ import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
-import { languageOption } from './consts';
+import { helloWorld, languageOption } from './consts';
 import { Editor } from './editor';
+import { LanguageSelection } from './languageSelection';
+
+type ChangeHandler = (text: string, language: languageOption) => void;
+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. */;
+  onEdit?: ChangeHandler;
+  onLanguageChange?: ChangeHandler;
+}
 
 const editorStates = states({
   isIFrame: { height: '100vh' },
@@ -30,26 +43,17 @@ const EditorContainer = styled(Background)<EditorStyleProps>(
   editorStates
 );
 
-export interface CodeByteEditorProps {
-  text: string;
-  language: languageOption;
-  hideCopyButton: boolean;
-  onCopy?: (text: string, language: string) => void;
-  isIFrame?: boolean;
-  snippetsBaseUrl?: string;
-  onTextChange?: (text: string) => void;
-}
-
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
-  language,
+  language: initialLanguage,
   hideCopyButton,
   onCopy,
   isIFrame = false,
   snippetsBaseUrl = process.env.CONTAINER_API_BASE,
-  onTextChange,
+  onEdit,
 }) => {
   const [text, setText] = useState<string>(initialText);
+  const [language, setLanguage] = useState<languageOption>(initialLanguage);
   return (
     <EditorContainer bg="black" as="main" isIFrame={isIFrame}>
       <Box borderBottom={1} borderColor="gray-900" py={4} pl={8}>
@@ -62,17 +66,34 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           aria-label="visit codecademy.com"
         />
       </Box>
-      <Editor
-        language={language}
-        text={text}
-        hideCopyButton={hideCopyButton}
-        onChange={(newText: string) => {
-          setText(newText);
-          onTextChange?.(newText);
-        }}
-        onCopy={onCopy}
-        snippetsBaseUrl={snippetsBaseUrl}
-      />
+      {language ? (
+        <Editor
+          language={language}
+          text={text}
+          hideCopyButton={hideCopyButton}
+          onChange={(newText: string) => {
+            setText(newText);
+            onEdit?.(
+              newText,
+              language
+            ); /* TODO: in DISC-355 update component to use an object that contains all change handlers */
+          }}
+          onCopy={onCopy}
+          snippetsBaseUrl={snippetsBaseUrl}
+        />
+      ) : (
+        <LanguageSelection
+          onChange={(newLanguage) => {
+            const newText: string = text || helloWorld[newLanguage] || '';
+            setLanguage(newLanguage);
+            setText(newText);
+            onLanguageChange?.(
+              newText,
+              newLanguage
+            ); /* TODO: in DISC-355 update component to use an object that contains all change handlers */
+          }}
+        />
+      )}
     </EditorContainer>
   );
 };

package/src/languageSelection.tsx

@@ -0,0 +1,45 @@
+import { Select } from '@codecademy/gamut';
+import { Background } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
+import React from 'react';
+
+import type { languageOption } from './consts';
+import { languageOptions } from './consts';
+
+const StyledSelect = styled(Select)`
+  margin-top: 1rem;
+  color: ${({ theme }) => theme.colors.text};
+  select {
+    color: ${({ theme }) => theme.colors.text};
+    background-color: ${({ theme }) => theme.colors.black};
+
+    &:hover,
+    &:active,
+    &:focus {
+      border-color: ${({ theme }) => theme.colors.primary};
+    }
+    &:focus {
+      box-shadow: inset 0 0 0 1px ${({ theme }) => theme.colors.primary};
+    }
+  }
+`;
+
+export type LanguageSelectionProps = {
+  onChange: (newLanguage: languageOption) => void;
+};
+
+export const LanguageSelection: React.FC<LanguageSelectionProps> = ({
+  onChange,
+}) => {
+  return (
+    <Background bg="black" flex={1} px={16} pt={48}>
+      Which language do you want to code in?
+      <StyledSelect
+        id="language-select"
+        aria-label="Select your language"
+        options={languageOptions}
+        onChange={(e) => onChange(e.target.value as languageOption)}
+      />
+    </Background>
+  );
+};

package/src/theme.d.ts

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