@codecademy/codebytes 0.2.0 → 0.2.1-alpha.3da9ab.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.2.1-alpha.3da9ab.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.2.1-alpha.3da9ab.0) (2022-01-07)
+
+**Note:** Version bump only for package @codecademy/codebytes
+
+
+
+
+
 ## [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.0",
+  "version": "0.2.1-alpha.3da9ab.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -25,7 +25,11 @@
     "@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",
@@ -39,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": "db6be3e2ec6108c6eddb25c04097ed959c67db76"
+  "gitHead": "55fa9a0e726d555db29ddc01771ff7429e77549c"
 }

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

@@ -13,6 +13,7 @@ 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%;
@@ -51,6 +52,7 @@ export const Editor: React.FC<EditorProps> = ({
   text,
   hideCopyButton,
   onCopy,
+  onChange,
   snippetsBaseUrl,
 }) => {
   const [output, setOutput] = useState('');
@@ -105,7 +107,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,18 @@ 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 /* 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;
-}
-
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
-  language,
+  language: initialLanguage,
   hideCopyButton,
   onCopy,
   isIFrame = false,
   snippetsBaseUrl = '',
-  onTextChange,
+  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,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,46 @@
+import { Select } from '@codecademy/gamut';
+import { Background, themed } 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: ${themed('colors.text')};
+
+  select {
+    color: ${themed('colors.text')};
+    background-color: ${themed('colors.black')};
+
+    &:hover,
+    &:active,
+    &:focus {
+      border-color: ${themed('colors.primary')};
+    }
+    &:focus {
+      box-shadow: inset 0 0 0 1px ${themed('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}>
+      What language do you want to write?
+      <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 {}
 }