@codecademy/codebytes 0.3.1-alpha.405be7.0 → 0.3.1-alpha.517237.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.3.1-alpha.405be7.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.3.1-alpha.405be7.0) (2022-01-13)
+### [0.3.1-alpha.517237.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.3.1-alpha.517237.0) (2022-01-21)
 
 **Note:** Version bump only for package @codecademy/codebytes
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.3.1-alpha.405be7.0",
+  "version": "0.3.1-alpha.517237.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b0c7c52677bf95764fd29e9baa58a30761858f85"
+  "gitHead": "131b6bdaa97ebeffada14dc527bce7a9eb2db787"
 }

package/src/api.ts

@@ -1,4 +1,4 @@
-import type { languageOption } from './consts';
+import type { LanguageOption } from './consts';
 
 interface Response {
   stderr: string;
@@ -7,7 +7,7 @@ interface Response {
 }
 
 interface PostSnippetData {
-  language: languageOption;
+  language: LanguageOption;
   code: string;
 }
 

package/src/consts.ts

@@ -1,6 +1,6 @@
 // key = language param to send to snippets service
 // val = label in language selection drop down
-export const languageOptions = {
+export const LanguageOptions = {
   '': 'Select a language',
   cpp: 'C++',
   csharp: 'C#',
@@ -12,11 +12,11 @@ export const languageOptions = {
   scheme: 'Scheme',
 };
 
-export type languageOption = keyof typeof languageOptions;
+export type LanguageOption = keyof typeof LanguageOptions;
 
-export const validLanguages = Object.keys(languageOptions).filter(
+export const validLanguages = Object.keys(LanguageOptions).filter(
   (option) => !!option
-) as languageOption[];
+) as LanguageOption[];
 
 const cpp = `#include <iostream>
 int main() {

package/src/editor.tsx

@@ -10,7 +10,7 @@ import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
 import { postSnippet } from './api';
-import type { languageOption } from './consts';
+import type { LanguageOption } from './consts';
 import { Drawers } from './drawers';
 import { SimpleMonacoEditor } from './MonacoEditor';
 
@@ -36,7 +36,7 @@ const DOCKER_SIGTERM = 143;
 
 type EditorProps = {
   hideCopyButton: boolean;
-  language: languageOption;
+  language: LanguageOption;
   text: string;
   onChange: (text: string) => void;
   onCopy?: (text: string, language: string) => void;

package/src/index.tsx

@@ -5,15 +5,15 @@ import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
-import { helloWorld, languageOption } from './consts';
+import { helloWorld, LanguageOption } from './consts';
 import { Editor } from './editor';
 import { LanguageSelection } from './languageSelection';
 
-type CodebytesChangeHandler = (text: string, language: languageOption) => void;
+type CodebytesChangeHandler = (text: string, language: LanguageOption) => void;
 
 export interface CodeByteEditorProps {
   text: string;
-  language: languageOption;
+  language: LanguageOption;
   hideCopyButton: boolean;
   onCopy?: CodebytesChangeHandler;
   isIFrame?: boolean;
@@ -54,7 +54,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   onLanguageChange,
 }) => {
   const [text, setText] = useState<string>(initialText);
-  const [language, setLanguage] = useState<languageOption>(initialLanguage);
+  const [language, setLanguage] = useState<LanguageOption>(initialLanguage);
   return (
     <EditorContainer bg="black" as="main" isIFrame={isIFrame}>
       <Box borderBottom={1} borderColor="gray-900" py={4} pl={8}>
@@ -81,7 +81,8 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
       ) : (
         <LanguageSelection
           onChange={(newLanguage) => {
-            const newText: string = text || helloWorld[newLanguage] || '';
+            const newText: string =
+              text || (newLanguage ? helloWorld[newLanguage] : '');
             setLanguage(newLanguage);
             setText(newText);
             onLanguageChange?.(newText, newLanguage);

package/src/languageSelection.tsx

@@ -2,11 +2,11 @@ import { Select, Text } from '@codecademy/gamut';
 import { ColorMode } from '@codecademy/gamut-styles';
 import React from 'react';
 
-import type { languageOption } from './consts';
-import { languageOptions } from './consts';
+import type { LanguageOption } from './consts';
+import { LanguageOptions } from './consts';
 
 export type LanguageSelectionProps = {
-  onChange: (newLanguage: languageOption) => void;
+  onChange: (newLanguage: LanguageOption) => void;
 };
 
 export const LanguageSelection: React.FC<LanguageSelectionProps> = ({
@@ -18,8 +18,8 @@ export const LanguageSelection: React.FC<LanguageSelectionProps> = ({
       <Select
         id="language-select"
         aria-label="Select a language"
-        options={languageOptions}
-        onChange={(e) => onChange(e.target.value as languageOption)}
+        options={LanguageOptions}
+        onChange={(e) => onChange(e.target.value as LanguageOption)}
       />
     </ColorMode>
   );