@codecademy/codebytes 0.3.1-alpha.2eff1d.0 → 0.3.1-alpha.35ce76.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.2eff1d.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.3.1-alpha.2eff1d.0) (2022-01-13)
+### [0.3.1-alpha.35ce76.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.3.1-alpha.35ce76.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.2eff1d.0",
+  "version": "0.3.1-alpha.35ce76.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"
   },
@@ -43,10 +46,11 @@
     "@emotion/jest": "^11.3.0",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/react": "^11.0.4",
+    "@types/jsuri": "^1.3.30",
     "@types/loadable__component": "^5.13.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7ceb6728e18a6fd6920b1b3fa8077e92d2b2d26d"
+  "gitHead": "9747292651ae6636cf986e0a619682c1468bfba3"
 }

package/src/consts.ts

@@ -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

@@ -12,8 +12,8 @@ import React, { useState } from 'react';
 import { postSnippet } from './api';
 import type { languageOption } from './consts';
 import { Drawers } from './drawers';
+import { trackClick } from './helpers';
 import { SimpleMonacoEditor } from './MonacoEditor';
-import { CodebytesChangeHandlerMap } from './types';
 
 const Output = styled.pre<{ hasError: boolean }>`
   width: 100%;
@@ -39,9 +39,7 @@ type EditorProps = {
   hideCopyButton: boolean;
   language: languageOption;
   text: string;
-
   onChange: (text: string) => void;
-  on?: CodebytesChangeHandlerMap;
   snippetsBaseUrl?: string;
 };
 
@@ -49,7 +47,6 @@ export const Editor: React.FC<EditorProps> = ({
   language,
   text,
   hideCopyButton,
-  on,
   onChange,
   snippetsBaseUrl,
 }) => {
@@ -62,7 +59,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);
+      trackClick('copy');
       setIsCodeByteCopied(true);
     }
   };
@@ -82,7 +79,7 @@ export const Editor: React.FC<EditorProps> = ({
     };
     setStatus('waiting');
     setOutput('');
-    on?.run?.();
+    trackClick('run');
 
     try {
       const response = await postSnippet(data, snippetsBaseUrl);

package/src/helpers/index.ts

@@ -0,0 +1,59 @@
+import { decode } from 'js-base64';
+import Uri from 'jsuri';
+
+import { languageOption, validLanguages } from '../consts';
+import { trackUserClick } from '../libs/eventTracking';
+
+export type CopyButtonMode = 'hide' | undefined;
+
+export type CodebyteOptions = {
+  language: languageOption;
+  text: string;
+  copyMode: CopyButtonMode;
+  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 {
+    language:
+      validLanguages.find(
+        (lang) =>
+          currentUri.getQueryParamValue(CodebytesParams.Language) === lang
+      ) ?? '',
+    text: decode(currentUri.getQueryParamValue(CodebytesParams.Text) ?? ''),
+    copyMode: currentUri
+      .getQueryParamValue(CodebytesParams.CopyMode)
+      ?.toLowerCase() as CopyButtonMode,
+    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,11 +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 { getOptions, trackClick } from './helpers';
 import { LanguageSelection } from './languageSelection';
+import { trackUserImpression } from './libs/eventTracking';
 import { CodeByteEditorProps } from './types';
 
 const editorStates = states({
@@ -37,11 +39,25 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   language: initialLanguage,
   hideCopyButton,
   isIFrame = false,
-  on,
   snippetsBaseUrl = process.env.CONTAINER_API_BASE,
 }) => {
   const [text, setText] = useState<string>(initialText);
   const [language, setLanguage] = useState<languageOption>(initialLanguage);
+  const [hasBeenEdited, setHasBeenEdited] = useState(false);
+
+  useEffect(() => {
+    const options = getOptions();
+    const page_name = options.renderMode
+      ? `${options.clientName}_${options.renderMode}`
+      : options.clientName;
+
+    trackUserImpression({
+      page_name,
+      context: options.parentPage,
+      target: 'codebyte',
+    });
+  }, []);
+
   return (
     <EditorContainer bg="black" as="main" isIFrame={isIFrame}>
       <Box borderBottom={1} borderColor="gray-900" py={4} pl={8}>
@@ -52,7 +68,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 +78,23 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           hideCopyButton={hideCopyButton}
           onChange={(newText: string) => {
             setText(newText);
-            on?.edit?.(newText, language);
+
+            const { renderMode } = getOptions();
+            if (!renderMode && hasBeenEdited === false) {
+              setHasBeenEdited(true);
+              trackClick('edit');
+            }
           }}
-          on={on}
           snippetsBaseUrl={snippetsBaseUrl}
         />
       ) : (
         <LanguageSelection
           onChange={(newLanguage) => {
-            const newText: string = text || helloWorld[newLanguage] || '';
+            const newText: string =
+              text || (newLanguage ? helloWorld[newLanguage] : '');
             setLanguage(newLanguage);
             setText(newText);
-            on?.languageChange?.(newText, newLanguage);
+            trackClick('lang_select');
           }}
         />
       )}

package/src/languageSelection.tsx

@@ -1,29 +1,10 @@
-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};
-    }
-  }
-`;
-
 export type LanguageSelectionProps = {
   onChange: (newLanguage: languageOption) => void;
 };
@@ -32,14 +13,14 @@ 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)}
       />
-    </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,9 @@
 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;
+  snippetsBaseUrl?: string;
 }