@codecademy/codebytes 0.3.1-alpha.cef935.0 → 0.4.1-alpha.10e614.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.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)
+### [0.4.1-alpha.10e614.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.4.0...@codecademy/codebytes@0.4.1-alpha.10e614.0) (2022-01-25)
 
 **Note:** Version bump only for package @codecademy/codebytes
 
@@ -11,6 +11,15 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+## [0.4.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.4.0) (2022-01-21)
+
+
+### Features
+
+* **Codebytes:** move language selection component disc 354 ([#17](https://github.com/Codecademy/client-modules/issues/17)) ([040553d](https://github.com/Codecademy/client-modules/commit/040553dcc7867b6e331712365bcc19ea2df306d5))
+
+
+
 ## [0.3.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.3.0) (2022-01-12)
 
 

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.3.1-alpha.cef935.0",
+  "version": "0.4.1-alpha.10e614.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -23,10 +23,13 @@
     "@codecademy/gamut": "*",
     "@codecademy/gamut-icons": "*",
     "@codecademy/gamut-styles": "*",
+    "@codecademy/tracking": "0.18.0",
     "@codecademy/variance": "*",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@monaco-editor/react": "4.3.1",
+    "js-base64": "^3.6.0",
+    "jsuri": "^1.3.1",
     "monaco-editor": ">= 0.25.0 < 1",
     "react-resize-observer": "1.1.1"
   },
@@ -40,13 +43,18 @@
   },
   "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",
+    "@types/jsuri": "^1.3.30",
+    "@types/loadable__component": "^5.13.2",
+    "monaco-editor-webpack-plugin": "1.9.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0f05e194904faae9337cdbd57e84382acc355a92"
+  "gitHead": "02a804d14e940229bbd875ebadefaffa798d77c7"
 }

package/src/__tests__/codebyte-test.tsx

@@ -0,0 +1,210 @@
+import './mocks';
+
+import { setupRtl } from '@codecademy/gamut-tests';
+import userEvent from '@testing-library/user-event';
+import { encode } from 'js-base64';
+import React from 'react';
+
+import { CodeByteEditor } from '..';
+import { helloWorld, validLanguages } from '../consts';
+import { trackClick } from '../helpers';
+import { trackUserImpression } from '../libs/eventTracking';
+import { CodeByteEditorProps } from '../types';
+
+const mockEditorTestId = 'mock-editor-test-id';
+
+// 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, {});
+
+type RenderWrapperWithProps = CodeByteEditorProps & { mode?: string };
+
+const renderWrapperWith = ({ mode, ...rest }: RenderWrapperWithProps) => {
+  const url = new URL(window.location.href);
+
+  const { text, language } = rest;
+  if (text) {
+    url.searchParams.set('text', encode(text));
+  }
+  if (language) {
+    url.searchParams.set('lang', language);
+  }
+  url.searchParams.set('client-name', 'forum');
+  url.searchParams.set(
+    'page',
+    'https://discuss.codecademy.com/some-interesting/post'
+  );
+  if (mode) {
+    url.searchParams.set('mode', mode);
+  }
+  window.history.replaceState({}, '', url.toString());
+
+  return renderWrapper(rest);
+};
+
+describe('CodeBytes', () => {
+  const initialUrl = window.location.href;
+
+  afterEach(() => {
+    window.history.replaceState(null, '', initialUrl);
+    (trackClick as any).mockReset();
+    (trackUserImpression as any).mockReset();
+  });
+
+  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);
+  });
+
+  describe('Change Handlers', () => {
+    it('triggers onEdit on text edit', () => {
+      const onEdit = jest.fn();
+      const { view } = renderWrapper({
+        text: '',
+        language: 'javascript',
+        onEdit,
+      });
+
+      const editor = view.getByTestId(mockEditorTestId);
+      userEvent.type(editor, 'dog');
+
+      expect(onEdit).toHaveBeenCalledTimes(3);
+      expect(onEdit).toHaveBeenLastCalledWith('dog', 'javascript');
+    });
+
+    it('triggers onLanguageChange on language selection', () => {
+      const onLanguageChange = jest.fn();
+      const { view } = renderWrapper({
+        onLanguageChange,
+      });
+
+      const selectedLanguage = view.getByRole('combobox') as Element;
+      userEvent.selectOptions(selectedLanguage, ['javascript']);
+
+      expect(onLanguageChange).toHaveBeenCalledWith(
+        "console.log('Hello world!');",
+        'javascript'
+      );
+    });
+  });
+
+  describe('Tracking', () => {
+    it('triggers trackClick on clicking the logo', () => {
+      const { view } = renderWrapper({});
+      const logo = view.getByLabelText('visit codecademy.com');
+      userEvent.click(logo);
+      expect(trackClick).toHaveBeenCalledWith('logo');
+    });
+
+    it('triggers trackClick on language selection', () => {
+      const { view } = renderWrapper();
+      const selectedLanguage = view.getByRole('combobox') as Element;
+      userEvent.selectOptions(selectedLanguage, ['javascript']);
+      expect(trackClick).toHaveBeenCalledWith('lang_select');
+    });
+
+    it('triggers trackClick for the first edit in view mode', () => {
+      const testString = 'original-value';
+      const { view } = renderWrapper({
+        text: testString,
+        language: 'javascript',
+      });
+
+      const editor = view.getByTestId(mockEditorTestId);
+      userEvent.type(editor, 'd');
+
+      expect(trackClick).toHaveBeenCalledWith('edit');
+    });
+
+    it('triggers trackUserImpression for view mode', () => {
+      renderWrapperWith({
+        text: 'some-value',
+        language: 'javascript',
+        isForums: true,
+      });
+
+      expect(trackUserImpression).toHaveBeenCalledWith({
+        page_name: 'forum',
+        context: 'https://discuss.codecademy.com/some-interesting/post',
+        target: 'codebyte',
+      });
+    });
+
+    it('triggers trackUserImpression for compose mode', () => {
+      renderWrapperWith({
+        text: 'some-value',
+        language: 'javascript',
+        mode: 'compose',
+        isForums: true,
+      });
+
+      expect(trackUserImpression).toHaveBeenCalledWith({
+        page_name: 'forum_compose',
+        context: 'https://discuss.codecademy.com/some-interesting/post',
+        target: 'codebyte',
+      });
+    });
+
+    it('does not trigger a trackUserImpression when not isForum is false', () => {
+      renderWrapperWith({
+        text: 'some-value',
+        language: 'javascript',
+        mode: 'compose',
+        isForums: false,
+      });
+
+      expect(trackUserImpression).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/__tests__/editor-test.tsx

@@ -0,0 +1,113 @@
+import './mocks';
+
+import { setupRtl } from '@codecademy/gamut-tests';
+import { act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { Editor } from '../editor';
+import { trackClick } from '../helpers';
+
+jest.mock('../MonacoEditor', () => ({
+  SimpleMonacoEditor: ({ value }: { value: string }) => <>{value}</>,
+}));
+
+const renderWrapper = setupRtl(Editor, {
+  hideCopyButton: false,
+  language: 'javascript',
+  text: 'hello world',
+  onChange: jest.fn(),
+  snippetsBaseUrl: '',
+});
+
+Object.defineProperty(navigator, 'clipboard', {
+  value: {
+    writeText: jest.fn(),
+  },
+});
+
+describe('Editor', () => {
+  (global as any).fetch = jest.fn();
+  afterEach(() => {
+    (global as any).fetch.mockClear();
+  });
+
+  it('shows a prompt tooltip when the CodeByte has __not__ been copied via the button', () => {
+    const { view } = renderWrapper();
+    expect(view.queryByTestId('copy-confirmation-tooltip')).toBeFalsy();
+    view.getByTestId('copy-prompt-tooltip');
+  });
+
+  it('shows a confirmation tooltip when the CodeByte has been copied via the button', () => {
+    const { view } = renderWrapper();
+    const copyBtn = view.getByTestId('copy-codebyte-btn');
+    userEvent.click(copyBtn as HTMLButtonElement);
+    expect(view.queryByTestId('copy-prompt-tooltip')).toBeFalsy();
+    view.getByTestId('copy-confirmation-tooltip');
+  });
+
+  it('hides the copy codebyte button if hideCopyButton prop is true"', () => {
+    const { view } = renderWrapper({
+      hideCopyButton: true,
+    });
+    expect(view.queryByTestId('copy-codebyte-btn')).toBeNull();
+  });
+
+  it('shows the copy codebyte button if hideCopyButton prop is not set', () => {
+    const { view } = renderWrapper();
+
+    view.getByTestId('copy-codebyte-btn');
+  });
+
+  describe('Change Handlers', () => {
+    it('triggers onCopy upon clicking the copy button', () => {
+      const onCopy = jest.fn();
+      const { view } = renderWrapper({
+        onCopy,
+      });
+
+      const copyButton = view.getByTestId('copy-codebyte-btn');
+      userEvent.click(copyButton);
+
+      expect(onCopy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Tracking', () => {
+    it('tracks clicks on the run button', async () => {
+      (global as any).fetch.mockResolvedValue({
+        json: () =>
+          Promise.resolve({
+            stderr: [],
+            exit_code: 0,
+            stdout: '',
+          }),
+      });
+      const { view } = renderWrapper({
+        onChange: jest.fn(),
+        text: 'test',
+        language: 'javascript',
+      });
+
+      const runButton = view.getByText('Run');
+      await act(async () => {
+        userEvent.click(runButton);
+      });
+
+      expect(trackClick).toHaveBeenCalledWith('run');
+    });
+
+    it('tracks clicks on the copy codebyte button', () => {
+      const { view } = renderWrapper({
+        onChange: jest.fn(),
+        text: 'test',
+        language: 'javascript',
+      });
+
+      const copyButton = view.getByTestId('copy-codebyte-btn');
+      userEvent.click(copyButton);
+
+      expect(trackClick).toHaveBeenCalledWith('copy');
+    });
+  });
+});

package/src/__tests__/helpers-test.tsx

@@ -0,0 +1,121 @@
+import { encode } from 'js-base64';
+
+import { CodebytesParams, getOptions, trackClick } from '../helpers';
+import { trackUserClick } from '../libs/eventTracking';
+
+jest.mock('../libs/eventTracking');
+
+const initialUrl = window.location.href;
+const resetCodebytesParams = () =>
+  window.history.replaceState(null, '', initialUrl);
+type SetCodebytesParamsProps = Record<CodebytesParams, string>;
+const setCodebytesParams = (params: SetCodebytesParamsProps) => {
+  if (params.text) {
+    params.text = encode(params.text);
+  }
+
+  const url = new URL(window.location.href);
+  Object.entries(params).forEach(([key, value]) => {
+    url.searchParams.set(key, value);
+  });
+
+  window.history.replaceState({}, '', url.toString());
+};
+
+describe('getOptions', () => {
+  afterEach(() => {
+    resetCodebytesParams();
+  });
+
+  it('parses props out of the window locations', () => {
+    const text = `
+    const msg = 'Sup?';
+    console.log(msg);
+    `.trim();
+    setCodebytesParams({
+      lang: 'javascript',
+      text,
+      'copy-mode': '',
+      'client-name': 'forum',
+      page: 'https://discuss.codecademy.com/some-interesting/post',
+      mode: 'compose',
+    });
+
+    expect(getOptions()).toEqual({
+      clientName: 'forum',
+      parentPage: 'https://discuss.codecademy.com/some-interesting/post',
+      renderMode: 'compose',
+    });
+  });
+});
+
+describe('trackClick', () => {
+  afterEach(() => {
+    resetCodebytesParams();
+    (trackUserClick as any).mockReset();
+  });
+
+  it('proxies to trackUserClick setting the page_name, context, and target', () => {
+    const target = 'foobar';
+    setCodebytesParams({
+      lang: 'javascript',
+      text: `
+      const msg = 'Sup?';
+      console.log(msg);
+      `.trim(),
+      'copy-mode': '',
+      'client-name': 'forum',
+      page: 'https://discuss.codecademy.com/some-interesting/post',
+      mode: '',
+    });
+    trackClick(target);
+    expect(trackUserClick).toHaveBeenCalledWith({
+      page_name: 'forum',
+      context: 'https://discuss.codecademy.com/some-interesting/post',
+      target,
+    });
+  });
+
+  it('defaults the client name to "Unknown"', () => {
+    const target = 'foobar';
+    setCodebytesParams({
+      lang: 'javascript',
+      text: `
+      const msg = 'Sup?';
+      console.log(msg);
+      `.trim(),
+      'copy-mode': '',
+      'client-name': '',
+      page: 'https://discuss.codecademy.com/some-interesting/post',
+      mode: '',
+    });
+    trackClick(target);
+    expect(trackUserClick).toHaveBeenCalledWith({
+      page_name: 'Unknown',
+      context: 'https://discuss.codecademy.com/some-interesting/post',
+      target,
+    });
+  });
+
+  it('embeds the render mode into the page_name', () => {
+    const mode = 'compose';
+    const target = 'foobar';
+    setCodebytesParams({
+      lang: 'javascript',
+      text: `
+      const msg = 'Sup?';
+      console.log(msg);
+      `.trim(),
+      'copy-mode': '',
+      'client-name': 'forum',
+      page: 'https://discuss.codecademy.com/some-interesting/post',
+      mode,
+    });
+    trackClick(target);
+    expect(trackUserClick).toHaveBeenCalledWith({
+      page_name: `forum_${mode}`,
+      context: 'https://discuss.codecademy.com/some-interesting/post',
+      target,
+    });
+  });
+});

package/src/__tests__/language-selection-test.tsx

@@ -0,0 +1,14 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+
+import { LanguageSelection } from '../languageSelection';
+
+const renderWrapper = setupRtl(LanguageSelection, {
+  onChange: () => null,
+});
+
+describe('LanguageSelection', () => {
+  it('has placeholder text', () => {
+    const { view } = renderWrapper();
+    view.getByText('Which language do you want to code in?');
+  });
+});

package/src/__tests__/mocks.ts

@@ -0,0 +1,8 @@
+jest.mock('react-resize-observer');
+jest.mock('../libs/eventTracking');
+jest.mock('../helpers', () => ({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  ...jest.requireActual('../helpers'),
+  trackClick: jest.fn(),
+}));

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 Exclude<LanguageOption, ''>[];
 
 const cpp = `#include <iostream>
 int main() {
@@ -52,7 +52,7 @@ const scheme = `(begin
   (display "Hello world!")
   (newline))`;
 
-export const helloWorld: { [key in languageOption]?: string } = {
+export const helloWorld = {
   cpp,
   csharp,
   golang,
@@ -61,4 +61,4 @@ export const helloWorld: { [key in languageOption]?: string } = {
   python,
   ruby,
   scheme,
-};
+} as const;

package/src/editor.tsx

@@ -10,10 +10,11 @@ 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 { trackClick } from './helpers';
 import { SimpleMonacoEditor } from './MonacoEditor';
-import { CodebytesChangeHandlerMap } from './types';
+import { CodebytesChangeHandler } from './types';
 
 const Output = styled.pre<{ hasError: boolean }>`
   width: 100%;
@@ -37,32 +38,33 @@ const DOCKER_SIGTERM = 143;
 
 type EditorProps = {
   hideCopyButton: boolean;
-  language: languageOption;
+  language: LanguageOption;
   text: string;
   onChange: (text: string) => void;
-  on?: CodebytesChangeHandlerMap;
+  onCopy?: (text: string, language: string) => void;
   snippetsBaseUrl?: string;
+  onCopy?: CodebytesChangeHandler;
 };
 
 export const Editor: React.FC<EditorProps> = ({
   language,
   text,
   hideCopyButton,
-  on = {},
   onChange,
+  onCopy,
   snippetsBaseUrl,
+  onCopy,
 }) => {
   const [output, setOutput] = useState('');
   const [status, setStatus] = useState<'ready' | 'waiting' | 'error'>('ready');
   const [isCodeByteCopied, setIsCodeByteCopied] = useState(false);
   const onCopyClick = () => {
     if (!isCodeByteCopied) {
-      navigator.clipboard
-        .writeText(text)
-        // eslint-disable-next-line no-console
-        .catch(() => console.error('Failed to copy'));
-      on.copy?.(text, language);
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      navigator.clipboard.writeText(text);
       setIsCodeByteCopied(true);
+      trackClick('copy');
+      onCopy?.(text, language);
     }
   };
 
@@ -81,7 +83,7 @@ export const Editor: React.FC<EditorProps> = ({
     };
     setStatus('waiting');
     setOutput('');
-    on.run?.();
+    trackClick('run');
 
     try {
       const response = await postSnippet(data, snippetsBaseUrl);
@@ -132,15 +134,20 @@ export const Editor: React.FC<EditorProps> = ({
                 variant="secondary"
                 onClick={onCopyClick}
                 onBlur={() => setIsCodeByteCopied(false)}
+                data-testid="copy-codebyte-btn"
               >
                 <CopyIconStyled aria-hidden="true" /> Copy Codebyte
               </TextButton>
             }
           >
             {isCodeByteCopied ? (
-              <span role="alert">Copied!</span>
+              <span data-testid="copy-confirmation-tooltip" role="alert">
+                Copied!
+              </span>
             ) : (
-              <span>Copy to your clipboard</span>
+              <span data-testid="copy-prompt-tooltip">
+                Copy to your clipboard
+              </span>
             )}
           </ToolTip>
         ) : null}

package/src/helpers/index.ts

@@ -0,0 +1,43 @@
+import Uri from 'jsuri';
+
+import { trackUserClick } from '../libs/eventTracking';
+
+export type CodebyteOptions = {
+  clientName: string;
+  parentPage: string;
+  renderMode: string;
+};
+
+export enum CodebytesParams {
+  Language = 'lang',
+  Text = 'text',
+  CopyMode = 'copy-mode',
+  ClientName = 'client-name',
+  Page = 'page',
+  Mode = 'mode',
+}
+
+export const getOptions = (): CodebyteOptions => {
+  const currentUri = new Uri(window.location.href);
+
+  return {
+    clientName:
+      currentUri.getQueryParamValue(CodebytesParams.ClientName) || 'Unknown',
+    parentPage:
+      currentUri.getQueryParamValue(CodebytesParams.Page) || document.referrer,
+    renderMode: currentUri.getQueryParamValue(CodebytesParams.Mode) || '',
+  };
+};
+
+export const trackClick = (target: string) => {
+  const options = getOptions();
+  const page_name = options.renderMode
+    ? `${options.clientName}_${options.renderMode}`
+    : options.clientName;
+
+  trackUserClick({
+    page_name,
+    context: options.parentPage,
+    target,
+  });
+};

package/src/index.tsx

@@ -3,15 +3,17 @@ 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 { helloWorld, LanguageOption } from './consts';
 import { Editor } from './editor';
+import { getOptions, trackClick } from './helpers';
 import { LanguageSelection } from './languageSelection';
+import { trackUserImpression } from './libs/eventTracking';
 import { CodeByteEditorProps } from './types';
 
 const editorStates = states({
-  isIFrame: { height: '100vh' },
+  isForums: { height: '100vh' },
 });
 
 const editorBaseStyles = system.css({
@@ -35,15 +37,42 @@ const EditorContainer = styled(Background)<EditorStyleProps>(
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
   language: initialLanguage,
-  hideCopyButton,
-  isIFrame = false,
-  on = {},
+  hideCopyButton = false,
+  isForums = false,
   snippetsBaseUrl = process.env.CONTAINER_API_BASE,
+  onEdit,
+  onLanguageChange,
+  onCopy,
 }) => {
-  const [text, setText] = useState<string>(initialText);
-  const [language, setLanguage] = useState<languageOption>(initialLanguage);
+  const [text, setText] = useState<string>(initialText ?? '');
+  const [language, setLanguage] = useState<LanguageOption>(
+    initialLanguage ?? ''
+  );
+  const [hasBeenEdited, setHasBeenEdited] = useState(false);
+
+  useEffect(() => {
+    if (isForums) {
+      const options = getOptions();
+      const page_name = options.renderMode
+        ? `${options.clientName}_${options.renderMode}`
+        : options.clientName;
+
+      trackUserImpression({
+        page_name,
+        context: options.parentPage,
+        target: 'codebyte',
+      });
+    }
+  }, [isForums]);
+
+  useEffect(() => {
+    if (language) {
+      setText(initialText ?? (helloWorld[language] || ''));
+    }
+  }, [language, initialText]);
+
   return (
-    <EditorContainer bg="black" as="main" isIFrame={isIFrame}>
+    <EditorContainer bg="black" as="main" isForums={isForums}>
       <Box borderBottom={1} borderColor="gray-900" py={4} pl={8}>
         <IconButton
           icon={FaviconIcon}
@@ -52,7 +81,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           target="_blank"
           rel="noreferrer"
           aria-label="visit codecademy.com"
-          onClick={() => on.logoClick?.()}
+          onClick={() => trackClick('logo')}
         />
       </Box>
       {language ? (
@@ -62,18 +91,26 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           hideCopyButton={hideCopyButton}
           onChange={(newText: string) => {
             setText(newText);
-            on.edit?.(newText, language);
+            onEdit?.(newText, language);
+            const { renderMode } = getOptions();
+            if (!renderMode && hasBeenEdited === false) {
+              setHasBeenEdited(true);
+              trackClick('edit');
+            }
           }}
-          on={on}
           snippetsBaseUrl={snippetsBaseUrl}
+          onCopy={onCopy}
         />
       ) : (
         <LanguageSelection
           onChange={(newLanguage) => {
-            const newText: string = text || helloWorld[newLanguage] || '';
+            const newText: string =
+              text || (newLanguage ? helloWorld[newLanguage] : '');
             setLanguage(newLanguage);
             setText(newText);
-            on.languageChange?.(newText, newLanguage);
+            onLanguageChange?.(newText, newLanguage);
+            trackClick('lang_select');
+            onLanguageChange?.(newText, newLanguage);
           }}
         />
       )}

package/src/languageSelection.tsx

@@ -1,45 +1,26 @@
-import { Select } from '@codecademy/gamut';
-import { Background } from '@codecademy/gamut-styles';
-import styled from '@emotion/styled';
+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';
-
-const StyledSelect = styled(Select)`
-  margin-top: 1rem;
-  color: ${({ theme }) => theme.colors.text};
-  select {
-    color: ${({ theme }) => theme.colors.text};
-    background-color: ${({ theme }) => theme.colors.black};
-
-    &:hover,
-    &:active,
-    &:focus {
-      border-color: ${({ theme }) => theme.colors.primary};
-    }
-    &:focus {
-      box-shadow: inset 0 0 0 1px ${({ theme }) => theme.colors.primary};
-    }
-  }
-`;
+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> = ({
   onChange,
 }) => {
   return (
-    <Background bg="black" flex={1} px={16} pt={48}>
-      Which language do you want to code in?
-      <StyledSelect
+    <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)}
+        options={LanguageOptions}
+        onChange={(e) => onChange(e.target.value as LanguageOption)}
       />
-    </Background>
+    </ColorMode>
   );
 };

package/src/libs/eventTracking.ts

@@ -0,0 +1,16 @@
+import { createTracker } from '@codecademy/tracking';
+
+const IS_DEV = process.env.NODE_ENV === 'development';
+const API_BASE_URL =
+  process.env.GATSBY_MONOLITH_API_BASE || 'https://www.codecademy.com';
+
+const tracker = createTracker({
+  apiBaseUrl: API_BASE_URL,
+  verbose: IS_DEV,
+});
+
+export const {
+  click: trackUserClick,
+  visit: trackUserVisit,
+  impression: trackUserImpression,
+} = tracker;

package/src/types.ts

@@ -1,20 +1,17 @@
-import { languageOption } from './consts';
+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 CodebytesChangeHandler {
+  (text: string, language: LanguageOption): 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;
+  text?: string;
+  language?: LanguageOption;
+  hideCopyButton?: boolean;
+  onCopy?: CodebytesChangeHandler;
+  isForums?: boolean;
+  snippetsBaseUrl?: string;
+  onEdit?: CodebytesChangeHandler;
+  onLanguageChange?: CodebytesChangeHandler;
 }