@codecademy/codebytes 0.3.0 → 0.3.1-alpha.9e2320.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.3.1-alpha.9e2320.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.3.1-alpha.9e2320.0) (2022-01-14)
+
+**Note:** Version bump only for package @codecademy/codebytes
+
+
+
+
+
 ## [0.3.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.3.0) (2022-01-12)
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.3.0",
+  "version": "0.3.1-alpha.9e2320.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7845d303c2191ed8d56b06edbd6aae9741d68aeb"
+  "gitHead": "d87dd11aab216ef63dfb2be65087dac8f1c69ee3"
 }

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 = {
+  cpp,
+  csharp,
+  golang,
+  javascript,
+  php,
+  python,
+  ruby,
+  scheme,
+} as const;

package/src/editor.tsx

@@ -13,6 +13,7 @@ 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,7 +40,7 @@ type EditorProps = {
   language: languageOption;
   text: string;
   onChange: (text: string) => void;
-  onCopy?: (text: string, language: string) => void;
+  on?: CodebytesChangeHandlerMap;
   snippetsBaseUrl?: string;
 };
 
@@ -47,7 +48,7 @@ export const Editor: React.FC<EditorProps> = ({
   language,
   text,
   hideCopyButton,
-  onCopy,
+  on = {},
   onChange,
   snippetsBaseUrl,
 }) => {
@@ -60,7 +61,7 @@ export const Editor: React.FC<EditorProps> = ({
         .writeText(text)
         // eslint-disable-next-line no-console
         .catch(() => console.error('Failed to copy'));
-      onCopy?.(text, language);
+      on.copy?.(text, language);
       setIsCodeByteCopied(true);
     }
   };
@@ -80,6 +81,7 @@ export const Editor: React.FC<EditorProps> = ({
     };
     setStatus('waiting');
     setOutput('');
+    on.run?.();
 
     try {
       const response = await postSnippet(data, snippetsBaseUrl);

package/src/index.tsx

@@ -5,18 +5,10 @@ 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';
-
-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;
-}
+import { LanguageSelection } from './languageSelection';
+import { CodeByteEditorProps } from './types';
 
 const editorStates = states({
   isIFrame: { height: '100vh' },
@@ -42,14 +34,14 @@ const EditorContainer = styled(Background)<EditorStyleProps>(
 
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
-  language,
+  language: initialLanguage,
   hideCopyButton,
-  onCopy,
   isIFrame = false,
+  on = {},
   snippetsBaseUrl = process.env.CONTAINER_API_BASE,
-  onTextChange,
 }) => {
   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}>
@@ -60,19 +52,32 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           target="_blank"
           rel="noreferrer"
           aria-label="visit codecademy.com"
+          onClick={() => on.logoClick?.()}
         />
       </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);
+            on.edit?.(newText, language);
+          }}
+          on={on}
+          snippetsBaseUrl={snippetsBaseUrl}
+        />
+      ) : (
+        <LanguageSelection
+          onChange={(newLanguage) => {
+            const newText: string =
+              text || (newLanguage ? helloWorld[newLanguage] : '');
+            setLanguage(newLanguage);
+            setText(newText);
+            on.languageChange?.(newText, newLanguage);
+          }}
+        />
+      )}
     </EditorContainer>
   );
 };

package/src/languageSelection.tsx

@@ -0,0 +1,26 @@
+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';
+
+export type LanguageSelectionProps = {
+  onChange: (newLanguage: languageOption) => void;
+};
+
+export const LanguageSelection: React.FC<LanguageSelectionProps> = ({
+  onChange,
+}) => {
+  return (
+    <ColorMode mode="dark" flex={1} px={16} pt={48}>
+      <Text mb={16}>Which language do you want to code in?</Text>
+      <Select
+        id="language-select"
+        aria-label="Select a language"
+        options={languageOptions}
+        onChange={(e) => onChange(e.target.value as languageOption)}
+      />
+    </ColorMode>
+  );
+};

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;
+}