@codecademy/codebytes 0.3.1-alpha.c03268.0 → 0.3.1-alpha.cef935.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.c03268.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.3.1-alpha.c03268.0) (2022-01-13)
+### [0.3.1-alpha.cef935.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.3.1-alpha.cef935.0) (2022-01-13)
 
 **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.c03268.0",
+  "version": "0.3.1-alpha.cef935.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dada95362ee0c1c6a37ae427bb4639d51fe4db18"
+  "gitHead": "0f05e194904faae9337cdbd57e84382acc355a92"
 }

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%;
@@ -40,7 +40,7 @@ type EditorProps = {
   language: languageOption;
   text: string;
   onChange: (text: string) => void;
-  onCopy?: (text: string, language: string) => void;
+  on?: CodebytesChangeHandlerMap;
   snippetsBaseUrl?: string;
 };
 
@@ -48,7 +48,7 @@ export const Editor: React.FC<EditorProps> = ({
   language,
   text,
   hideCopyButton,
-  onCopy,
+  on = {},
   onChange,
   snippetsBaseUrl,
 }) => {
@@ -61,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);
     }
   };
@@ -81,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

@@ -8,19 +8,7 @@ import React, { useState } from 'react';
 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?: CodebytesChangeHandler;
-  isIFrame?: boolean;
-  snippetsBaseUrl?: string;
-  onEdit?: CodebytesChangeHandler;
-  onLanguageChange?: CodebytesChangeHandler;
-}
+import { CodeByteEditorProps } from './types';
 
 const editorStates = states({
   isIFrame: { height: '100vh' },
@@ -49,9 +37,8 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   language: initialLanguage,
   hideCopyButton,
   isIFrame = false,
+  on = {},
   snippetsBaseUrl = process.env.CONTAINER_API_BASE,
-  onEdit,
-  onLanguageChange,
 }) => {
   const [text, setText] = useState<string>(initialText);
   const [language, setLanguage] = useState<languageOption>(initialLanguage);
@@ -65,6 +52,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           target="_blank"
           rel="noreferrer"
           aria-label="visit codecademy.com"
+          onClick={() => on.logoClick?.()}
         />
       </Box>
       {language ? (
@@ -74,8 +62,9 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           hideCopyButton={hideCopyButton}
           onChange={(newText: string) => {
             setText(newText);
-            onEdit?.(newText, language);
+            on.edit?.(newText, language);
           }}
+          on={on}
           snippetsBaseUrl={snippetsBaseUrl}
         />
       ) : (
@@ -84,7 +73,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
             const newText: string = text || helloWorld[newLanguage] || '';
             setLanguage(newLanguage);
             setText(newText);
-            onLanguageChange?.(newText, newLanguage);
+            on.languageChange?.(newText, newLanguage);
           }}
         />
       )}

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