@codecademy/codebytes 0.2.1-alpha.5fb230.0 → 0.2.1-alpha.698aa0.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.5fb230.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.2.1-alpha.5fb230.0) (2022-01-11)
+### [0.2.1-alpha.698aa0.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.2.1-alpha.698aa0.0) (2022-01-14)
 
 **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/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('../../jest.config.base')('codebytes');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.2.1-alpha.5fb230.0",
+  "version": "0.2.1-alpha.698aa0.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -40,13 +40,16 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@codecademy/gamut-tests": "*",
     "@emotion/jest": "^11.3.0",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/react": "^11.0.4",
-    "@types/loadable__component": "^5.13.2"
+    "@testing-library/react-hooks": "3.2.1",
+    "@testing-library/user-event": "13.1.1",
+    "monaco-editor-webpack-plugin": "1.9.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1d7c7131bb2c8e8147bf9927c71bb07816fa7c29"
+  "gitHead": "f917e691cdb230843eb6093f49863073469d9700"
 }

package/src/MonacoEditor/index.tsx

@@ -25,11 +25,14 @@ export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
   onChange,
 }) => {
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
-  const editorOnMount = useCallback((editor: ThemedEditor, monaco: Monaco) => {
-    editorRef.current = editor;
-    monaco.editor.defineTheme('dark', dark);
-    monaco.editor.setTheme('dark');
-  }, []);
+  const editorWillMount = useCallback(
+    (editor: ThemedEditor, monaco: Monaco) => {
+      editorRef.current = editor;
+      monaco.editor.defineTheme('dark', dark);
+      monaco.editor.setTheme('dark');
+    },
+    []
+  );
   return (
     <>
       <ResizeObserver
@@ -41,7 +44,7 @@ export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
         }}
       />
       <ReactMonacoEditor
-        onMount={editorOnMount}
+        onMount={editorWillMount}
         onChange={onChange}
         options={{ minimap: { enabled: false } }}
         theme="vs-dark"

package/src/__tests__/codebyte-test.tsx

@@ -0,0 +1,71 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { CodeByteEditor } from '..';
+import { helloWorld, validLanguages } from '../consts';
+
+const mockEditorTestId = 'mock-editor-test-id';
+
+jest.mock('react-resize-observer');
+// This is a super simplified mock capable of render value and trigger onChange.
+jest.mock('../MonacoEditor', () => ({
+  SimpleMonacoEditor: ({
+    value,
+    onChange,
+  }: {
+    value: string;
+    onChange?: (value: string) => void;
+  }) => (
+    <>
+      {value}
+      <input
+        data-testid={mockEditorTestId}
+        type="text"
+        onChange={(e) => {
+          onChange?.(e.target.value);
+        }}
+        value={value}
+      />
+    </>
+  ),
+}));
+
+const renderWrapper = setupRtl(CodeByteEditor, {});
+
+describe('CodeBytes', () => {
+  it('has a language-specific "hello world" program defined for each language', () => {
+    validLanguages.forEach((language) => {
+      expect(helloWorld[language]).toBeDefined();
+    });
+  });
+
+  it('initializes with a language-specific "hello world" program when there is no language prop', () => {
+    const { view } = renderWrapper();
+    const selectedLanguage = view.getByRole('combobox') as Element;
+    userEvent.selectOptions(selectedLanguage, ['javascript']);
+    view.getByText(helloWorld.javascript!);
+  });
+
+  it('initializes with a language-specific "hello world" program when there is a language prop but no text prop', () => {
+    const { view } = renderWrapper({ language: 'javascript' });
+    view.getByText(helloWorld.javascript!);
+  });
+
+  it('initializes with deserialized text when there is a text prop but no language prop', () => {
+    const testString = 'yes hello';
+    const { view } = renderWrapper({ text: testString });
+    const selectedLanguage = view.getByRole('combobox') as Element;
+    userEvent.selectOptions(selectedLanguage, ['javascript']);
+    view.getByText(testString);
+  });
+
+  it('initializes with deserialized text when there is both a language and text prop', () => {
+    const testString = 'yes hello';
+    const { view } = renderWrapper({
+      text: testString,
+      language: 'javascript',
+    });
+    view.getByText(testString);
+  });
+});

package/src/editor.tsx

@@ -9,11 +9,11 @@ import { CopyIcon } from '@codecademy/gamut-icons';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
-import { CodebytesChangeHandlerMap } from '.';
 import { postSnippet } from './api';
 import type { languageOption } from './consts';
 import { Drawers } from './drawers';
 import { SimpleMonacoEditor } from './MonacoEditor';
+import { CodebytesChangeHandlerMap } from './types';
 
 const Output = styled.pre<{ hasError: boolean }>`
   width: 100%;
@@ -39,10 +39,8 @@ type EditorProps = {
   hideCopyButton: boolean;
   language: languageOption;
   text: string;
-
-  // eslint-disable-next-line react/no-unused-prop-types
   onChange: (text: string) => void;
-  on?: Pick<CodebytesChangeHandlerMap, 'copy' | 'run'>;
+  on?: CodebytesChangeHandlerMap;
   snippetsBaseUrl?: string;
 };
 
@@ -50,7 +48,7 @@ export const Editor: React.FC<EditorProps> = ({
   language,
   text,
   hideCopyButton,
-  on,
+  on = {},
   onChange,
   snippetsBaseUrl,
 }) => {
@@ -63,7 +61,7 @@ export const Editor: React.FC<EditorProps> = ({
         .writeText(text)
         // eslint-disable-next-line no-console
         .catch(() => console.error('Failed to copy'));
-      on?.copy?.(text, language);
+      on.copy?.(text, language);
       setIsCodeByteCopied(true);
     }
   };
@@ -83,7 +81,7 @@ export const Editor: React.FC<EditorProps> = ({
     };
     setStatus('waiting');
     setOutput('');
-    on?.run?.();
+    on.run?.();
 
     try {
       const response = await postSnippet(data, snippetsBaseUrl);

package/src/index.tsx

@@ -3,29 +3,13 @@ import { FaviconIcon } from '@codecademy/gamut-icons';
 import { Background, states, system } from '@codecademy/gamut-styles';
 import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { helloWorld, languageOption } from './consts';
 import { Editor } from './editor';
 import { LanguageSelection } from './languageSelection';
 
-type CodebytesChangeHandler = (text: string, language: languageOption) => void;
-export type CodebytesChangeHandlerMap = {
-  logoClick?: () => void;
-  edit?: CodebytesChangeHandler;
-  languageChange?: CodebytesChangeHandler;
-  copy?: CodebytesChangeHandler;
-  run?: () => void;
-};
-
-export interface CodeByteEditorProps {
-  text: string;
-  language: languageOption;
-  hideCopyButton: boolean;
-  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. */;
-  on?: CodebytesChangeHandlerMap;
-}
+import { CodeByteEditorProps } from './types';
 
 const editorStates = states({
   isIFrame: { height: '100vh' },
@@ -52,13 +36,23 @@ const EditorContainer = styled(Background)<EditorStyleProps>(
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
   language: initialLanguage,
-  hideCopyButton,
+  hideCopyButton = false,
   isIFrame = false,
-  on,
+  on = {},
   snippetsBaseUrl = process.env.CONTAINER_API_BASE,
 }) => {
-  const [text, setText] = useState<string>(initialText);
-  const [language, setLanguage] = useState<languageOption>(initialLanguage);
+  const [text, setText] = useState<string>(initialText ?? '');
+  const [language, setLanguage] = useState<languageOption>(
+    initialLanguage ?? ''
+  );
+
+  /* Resetting the state when the props change. If the language changes and the text is not provided output helloworld  */
+  useEffect(() => {
+    if (language) {
+      setText(initialText ?? (helloWorld[language] || ''));
+    }
+  }, [language, initialText]);
+
   return (
     <EditorContainer bg="black" as="main" isIFrame={isIFrame}>
       <Box borderBottom={1} borderColor="gray-900" py={4} pl={8}>
@@ -69,7 +63,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           target="_blank"
           rel="noreferrer"
           aria-label="visit codecademy.com"
-          onClick={() => on?.logoClick?.()}
+          onClick={() => on.logoClick?.()}
         />
       </Box>
       {language ? (
@@ -79,7 +73,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           hideCopyButton={hideCopyButton}
           onChange={(newText: string) => {
             setText(newText);
-            on?.edit?.(newText, language);
+            on.edit?.(newText, language);
           }}
           on={on}
           snippetsBaseUrl={snippetsBaseUrl}
@@ -90,7 +84,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
             const newText: string = text || helloWorld[newLanguage] || '';
             setLanguage(newLanguage);
             setText(newText);
-            on?.languageChange?.(newText, newLanguage);
+            on.languageChange?.(newText, newLanguage);
           }}
         />
       )}

package/src/languageSelection.tsx

@@ -36,7 +36,7 @@ export const LanguageSelection: React.FC<LanguageSelectionProps> = ({
       Which language do you want to code in?
       <StyledSelect
         id="language-select"
-        aria-label="Select your language"
+        aria-label="Select a language"
         options={languageOptions}
         onChange={(e) => onChange(e.target.value as languageOption)}
       />

package/src/types.ts

@@ -0,0 +1,20 @@
+import { languageOption } from './consts';
+
+type CodebytesChangeHandler = (text: string, language: languageOption) => void;
+
+export type CodebytesChangeHandlerMap = {
+  logoClick?: () => void;
+  edit?: CodebytesChangeHandler;
+  languageChange?: CodebytesChangeHandler;
+  copy?: CodebytesChangeHandler;
+  run?: () => void;
+};
+
+export interface CodeByteEditorProps {
+  text: string;
+  language: languageOption;
+  hideCopyButton: boolean;
+  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. */;
+  on?: CodebytesChangeHandlerMap;
+}