@codecademy/codebytes 0.2.1-alpha.cfe771.0 → 0.3.1-alpha.b79ad6.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.2.1-alpha.cfe771.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.2.1-alpha.cfe771.0) (2022-01-07)
+### [0.3.1-alpha.b79ad6.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.3.1-alpha.b79ad6.0) (2022-01-13)
 
 **Note:** Version bump only for package @codecademy/codebytes
 
@@ -11,6 +11,15 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+## [0.3.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.3.0) (2022-01-12)
+
+
+### Features
+
+* **Codebytes:** add simple monaco editor disc 353 ([#16](https://github.com/Codecademy/client-modules/issues/16)) ([eec98ba](https://github.com/Codecademy/client-modules/commit/eec98ba9aad45f07fb5f3417e3da1e1935985deb))
+
+
+
 ## [0.2.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.1.0...@codecademy/codebytes@0.2.0) (2022-01-04)
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.2.1-alpha.cfe771.0",
+  "version": "0.3.1-alpha.b79ad6.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -26,9 +26,8 @@
     "@codecademy/variance": "*",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "@loadable/component": "^5.13.1",
-    "monaco-editor": "0.20.0",
-    "react-monaco-editor": "0.34.0",
+    "@monaco-editor/react": "4.3.1",
+    "monaco-editor": ">= 0.25.0 < 1",
     "react-resize-observer": "1.1.1"
   },
   "scripts": {
@@ -44,11 +43,10 @@
     "@emotion/jest": "^11.3.0",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/react": "^11.0.4",
-    "@types/loadable__component": "^5.13.2",
-    "monaco-editor-webpack-plugin": "1.9.1"
+    "@types/loadable__component": "^5.13.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "152cbfee536dbc4fb1ac52fcd4ee6a82f25def61"
+  "gitHead": "11c60da316a1e033c4b9bc45914733c0b93a0ade"
 }

package/src/MonacoEditor/index.tsx

@@ -3,48 +3,51 @@
 // 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 ReactMonacoEditor, { OnMount } from '@monaco-editor/react';
+import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
 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;
 };
 
+type ThemedEditor = Parameters<OnMount>[0];
+
 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');
-  }, []);
+  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?.editor?.layout({
+          editorRef.current?.layout({
             height,
             width,
           });
         }}
       />
       <ReactMonacoEditor
-        ref={editorRef}
-        editorWillMount={editorWillMount}
+        onMount={editorWillMount}
         onChange={onChange}
         options={{ minimap: { enabled: false } }}
-        theme="dark"
+        theme="vs-dark"
         value={value}
         language={language}
       />

package/src/consts.ts

@@ -1,7 +1,7 @@
 // key = language param to send to snippets service
 // val = label in language selection drop down
 export const languageOptions = {
-  '': 'Select your language',
+  '': 'Select a language',
   cpp: 'C++',
   csharp: 'C#',
   golang: 'Go',
@@ -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,7 +6,6 @@ import {
   ToolTip,
 } from '@codecademy/gamut';
 import { CopyIcon } from '@codecademy/gamut-icons';
-import { colors } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
@@ -25,7 +24,7 @@ const Output = styled.pre<{ hasError: boolean }>`
   overflow: auto;
   ${({ hasError, theme }) => `
   color: ${hasError ? theme.colors.orange : theme.colors.white};
-  background-color: ${colors['gray-900']};
+  background-color: ${theme.colors['navy-900']};
 `}
 `;
 
@@ -39,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;
 };

package/src/index.tsx

@@ -5,17 +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 CodebytesChangeHandler = (text: string, language: languageOption) => void;
 
 export interface CodeByteEditorProps {
   text: string;
   language: languageOption;
   hideCopyButton: boolean;
-  onCopy?: (text: string, language: string) => void;
+  onCopy?: CodebytesChangeHandler;
   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;
+  snippetsBaseUrl?: string;
+  onEdit?: CodebytesChangeHandler;
+  onLanguageChange?: CodebytesChangeHandler;
 }
 
 const editorStates = states({
@@ -42,14 +46,15 @@ const EditorContainer = styled(Background)<EditorStyleProps>(
 
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
-  language,
+  language: initialLanguage,
   hideCopyButton,
-  onCopy,
   isIFrame = false,
-  snippetsBaseUrl = '',
-  onTextChange,
+  snippetsBaseUrl = process.env.CONTAINER_API_BASE,
+  onEdit,
+  onLanguageChange,
 }) => {
   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 +67,27 @@ 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);
+          }}
+          snippetsBaseUrl={snippetsBaseUrl}
+        />
+      ) : (
+        <LanguageSelection
+          onChange={(newLanguage) => {
+            const newText: string = text || helloWorld[newLanguage] || '';
+            setLanguage(newLanguage);
+            setText(newText);
+            onLanguageChange?.(newText, newLanguage);
+          }}
+        />
+      )}
     </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 a language"
+        options={languageOptions}
+        onChange={(e) => onChange(e.target.value as languageOption)}
+      />
+    </Background>
+  );
+};