@codecademy/codebytes 1.0.4-alpha.18ad182ab.0 → 1.0.4-alpha.41a141e2a.0

package/.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "extends": [
+    "plugin:@nrwl/nx/react",
+    "../../.eslintrc.json",
+    "../../eslint-nx"
+  ],
+  "ignorePatterns": ["!**/*", "dist"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ],
+  "rules": {
+    //     // These rules could be useful, but we haven"t gotten around to enabling them here
+    //     // See WEB-2 for general tracking.
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unsafe-call": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-unsafe-assignment": "off",
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/no-unsafe-return": "off",
+    "@typescript-eslint/restrict-plus-operands": "off",
+    "@typescript-eslint/restrict-template-expressions": "off",
+    "import/no-extraneous-dependencies": "off"
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [1.0.4-alpha.41a141e2a.0](https://github.com/codecademy-engineering/mono/compare/@codecademy/codebytes@1.0.3...@codecademy/codebytes@1.0.4-alpha.41a141e2a.0) (2022-11-28)
+
+**Note:** Version bump only for package @codecademy/codebytes
+
+
+
+
+
+See https://github.com/codecademy-engineering/mono/releases

package/babel.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  extends: '../../babel.defaults.js',
+  presets: [
+    [
+      '@nrwl/react/babel',
+      {
+        runtime: 'automatic',
+        useBuiltIns: 'entry',
+      },
+    ],
+  ],
+  plugins: [
+    [
+      '@emotion/babel-plugin',
+      {
+        sourceMap: true,
+        autoLabel: 'always',
+        labelFormat: '[local]',
+      },
+    ],
+  ],
+};

package/jest.config.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+
+import path from 'path';
+
+import base from '../../jest.config.base';
+
+export default base('codebytes', {
+  transform: {
+    '\\.(j|t)sx?$': [
+      'babel-jest',
+      {
+        configFile: require.resolve(path.join(__dirname, './babel.config.js')),
+        cwd: __dirname,
+      },
+    ],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  moduleNameMapper: {
+    '@codecademy/tracking': '../tracking/src/index.ts',
+  },
+});

package/package.json

@@ -1,21 +1,16 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Editor",
-  "version": "1.0.4-alpha.18ad182ab.0",
+  "version": "1.0.4-alpha.41a141e2a.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
-    "@codecademy/tracking": "1.0.3-alpha.18ad182ab.0",
+    "@codecademy/tracking": "1.0.3-alpha.41a141e2a.0",
     "@monaco-editor/react": "^4.4.5",
     "js-base64": "^3.6.0",
     "jsuri": "^1.3.1",
     "react-resize-observer": "^1.1.1"
   },
-  "files": [
-    "dist/**"
-  ],
   "license": "MIT",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
   "peerDependencies": {
     "@codecademy/gamut": "*",
     "@codecademy/gamut-icons": "*",
@@ -39,5 +34,5 @@
     "dist/**/[A-Z]**/[A-Z]*.js",
     "dist/**/[A-Z]**/index.js"
   ],
-  "gitHead": "8fe77177836e97a90673fd488b974b678951d89f"
+  "gitHead": "67b9eea25d4713f12e4847b2ff1e62b64707f91c"
 }

package/project.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/codebytes/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nrwl/web:rollup",
+      "outputs": ["dist/libs/codebytes"],
+      "options": {
+        "outputPath": "dist/libs/codebytes",
+        "tsConfig": "libs/codebytes/tsconfig.json",
+        "project": "libs/codebytes/package.json",
+        "entryFile": "libs/codebytes/src/index.ts",
+        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+        "updateBuildableProjectDepsInPackageJson": true,
+        "compiler": "babel",
+        "format": ["esm", "cjs"],
+        "assets": [
+          {
+            "glob": "libs/codebytes/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "publish-build": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "commands": [],
+        "parallel": false
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": ["libs/codebytes/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/libs/codebytes"],
+      "options": {
+        "jestConfig": "libs/codebytes/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "dependsOn": ["^build"]
+    }
+  }
+}

package/{dist/MonacoEditor/colorsDark.js → src/MonacoEditor/colorsDark.ts}

@@ -2,8 +2,10 @@
 // This file is part of the Codebytes MVP and only includes basic configuration around theming for the SimpleMonacoEditor component
 // We are working on a monaco package in client-modules that has more configuration around themes and languages
 // Monaco as a shared package RFC https://www.notion.so/codecademy/Monaco-editor-as-a-shared-package-1f4484db165b4abc8394c3556451ef6a
+
 import { colors, editorColors } from '@codecademy/gamut-styles';
-var darkTheme = {
+
+const darkTheme = {
   blue: editorColors.blue,
   deepPurple: editorColors.deepPurple,
   gray: editorColors.gray,
@@ -12,9 +14,10 @@ var darkTheme = {
   purple: editorColors.purple,
   red: editorColors.red,
   white: colors.white,
-  yellow: editorColors.yellow
+  yellow: editorColors.yellow,
 };
-export var syntax = {
+
+export const syntax = {
   attribute: darkTheme.green,
   annotation: darkTheme.red,
   atom: darkTheme.deepPurple,
@@ -34,13 +37,18 @@ export var syntax = {
   tag: darkTheme.red,
   text: darkTheme.orange,
   value: darkTheme.yellow,
-  variable: darkTheme.green
+  variable: darkTheme.green,
 };
-export var ui = {
+
+export const ui = {
   background: '#211E2F',
   text: darkTheme.white,
   indent: {
     active: '#393b41',
-    inactive: '#494b51'
-  }
-};
+    inactive: '#494b51',
+  },
+};
+
+export type SyntaxColors = typeof syntax;
+
+export type UIColors = typeof ui;

package/src/MonacoEditor/index.tsx

@@ -0,0 +1,56 @@
+// DO NOT CHANGE ANYTHING HERE
+// This component is part of the Codebytes MVP and only includes basic configuration around theming
+// We are working on a monaco package in client-modules that has more configuration around themes and languages
+// Monaco as a shared package RFC https://www.notion.so/codecademy/Monaco-editor-as-a-shared-package-1f4484db165b4abc8394c3556451ef6a
+
+import ReactMonacoEditor, { EditorProps, OnMount } from '@monaco-editor/react';
+import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+import React, { useCallback, useRef } from 'react';
+import ResizeObserver from 'react-resize-observer';
+
+import { dark } from './theme';
+import { Monaco } from './types';
+
+export type SimpleMonacoEditorProps = {
+  value: string;
+  language: string;
+  onChange?: EditorProps['onChange'];
+};
+
+type ThemedEditor = Parameters<OnMount>[0];
+
+export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
+  value,
+  language,
+  onChange,
+}) => {
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const editorWillMount = useCallback(
+    (editor: ThemedEditor, monaco: Monaco) => {
+      editorRef.current = editor;
+      monaco.editor.defineTheme('dark', dark);
+      monaco.editor.setTheme('dark');
+    },
+    []
+  );
+  return (
+    <>
+      <ResizeObserver
+        onResize={({ height, width }) => {
+          editorRef.current?.layout({
+            height,
+            width,
+          });
+        }}
+      />
+      <ReactMonacoEditor
+        onMount={editorWillMount}
+        onChange={onChange}
+        options={{ minimap: { enabled: false } }}
+        theme="vs-dark"
+        value={value}
+        language={language}
+      />
+    </>
+  );
+};

package/src/MonacoEditor/theme.ts

@@ -0,0 +1,65 @@
+// DO NOT CHANGE ANYTHING HERE
+// This file is part of the Codebytes MVP and only includes basic configuration around theming for the SimpleMonacoEditor component
+// We are working on a monaco package in client-modules that has more configuration around themes and languages
+// Monaco as a shared package RFC https://www.notion.so/codecademy/Monaco-editor-as-a-shared-package-1f4484db165b4abc8394c3556451ef6a
+
+import type * as monaco from 'monaco-editor';
+
+import * as darkColors from './colorsDark';
+
+const c = (color: string) => color.substr(1);
+
+const theme = ({
+  ui,
+  syntax,
+}: {
+  ui: darkColors.UIColors;
+  syntax: darkColors.SyntaxColors;
+}): monaco.editor.IStandaloneThemeData => ({
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    // Base
+    { token: '', foreground: c(syntax.basic) },
+    { token: 'regexp', foreground: c(syntax.regexp) },
+    { token: 'annotation', foreground: c(syntax.annotation) },
+    { token: 'type', foreground: c(syntax.annotation) },
+    { token: 'doctype', foreground: c(syntax.comment) },
+    { token: 'delimiter', foreground: c(syntax.decoration) },
+    { token: 'invalid', foreground: c(syntax.invalid) },
+    { token: 'emphasis', fontStyle: 'italic' },
+    { token: 'strong', fontStyle: 'bold' },
+    { token: 'variable', foreground: c(syntax.variable) },
+    { token: 'variable.predefined', foreground: c(syntax.variable) },
+    { token: 'constant', foreground: c(syntax.constant) },
+    { token: 'comment', foreground: c(syntax.comment) },
+    { token: 'number', foreground: c(syntax.number) },
+    { token: 'number.hex', foreground: c(syntax.number) },
+    { token: 'keyword.directive', foreground: c(syntax.comment) },
+    { token: 'include', foreground: c(syntax.comment) },
+    { token: 'key', foreground: c(syntax.property) },
+    { token: 'attribute.name', foreground: c(syntax.attribute) },
+    { token: 'attribute.name-numeric', foreground: c(syntax.string) },
+    { token: 'attribute.value', foreground: c(syntax.property) },
+    { token: 'attribute.value.number', foreground: c(syntax.number) },
+    { token: 'string', foreground: c(syntax.string) },
+    { token: 'string.yaml', foreground: c(syntax.string) },
+    { token: 'tag', foreground: c(syntax.tag) },
+    { token: 'tag.id.jade', foreground: c(syntax.tag) },
+    { token: 'tag.class.jade', foreground: c(syntax.tag) },
+    { token: 'metatag', foreground: c(syntax.comment) },
+    { token: 'attribute.value.unit', foreground: c(syntax.string) },
+    { token: 'keyword', foreground: c(syntax.keyword) },
+    { token: 'keyword.flow', foreground: c(syntax.keyword) },
+  ],
+  colors: {
+    'editor.background': ui.background,
+    'editor.foreground': ui.text,
+    'editorIndentGuide.background': ui.indent.inactive,
+    'editorIndentGuide.activeBackground': ui.indent.active,
+    'editorWhitespace.foreground': syntax.comment,
+    'editorLineNumber.foreground': '#9FA2AC',
+  },
+});
+
+export const dark = theme(darkColors);

package/src/MonacoEditor/types.ts

@@ -0,0 +1 @@
+export type Monaco = typeof import('monaco-editor');

package/src/__tests__/codebyte.test.tsx

@@ -0,0 +1,186 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+import { act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { CodeByteEditor } from '..';
+import { helloWorld, validLanguages } from '../consts';
+import { trackClick } from '../helpers';
+import { trackUserImpression } from '../libs/eventTracking';
+
+const mockEditorTestId = 'mock-editor-test-id';
+
+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(),
+}));
+jest.mock('../helpers/useEverInView', () => ({
+  useEverInView: () => ({
+    everInView: true,
+    ref: () => null,
+  }),
+}));
+
+// 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, {});
+
+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', async () => {
+    const { view } = renderWrapper();
+    const selectedLanguage = view.getByRole('combobox') as Element;
+    await act(async () => {
+      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', async () => {
+    const testString = 'yes hello';
+    const { view } = renderWrapper({ text: testString });
+    const selectedLanguage = view.getByRole('combobox') as Element;
+    await act(async () => {
+      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', async () => {
+      const onEdit = jest.fn();
+      const { view } = renderWrapper({
+        text: '',
+        language: 'javascript',
+        onEdit,
+      });
+
+      const editor = view.getByTestId(mockEditorTestId);
+      await act(async () => {
+        userEvent.type(editor, 'dog');
+      });
+      expect(onEdit).toHaveBeenCalledTimes(3);
+      expect(onEdit).toHaveBeenLastCalledWith('g', 'javascript');
+    });
+
+    it('triggers onLanguageChange on language selection', async () => {
+      const onLanguageChange = jest.fn();
+      const { view } = renderWrapper({
+        onLanguageChange,
+      });
+
+      const selectedLanguage = view.getByRole('combobox') as Element;
+      await act(async () => {
+        userEvent.selectOptions(selectedLanguage, ['javascript']);
+      });
+      expect(onLanguageChange).toHaveBeenCalledWith(
+        "console.log('Hello world!');",
+        'javascript'
+      );
+    });
+  });
+
+  describe('Tracking', () => {
+    it('triggers trackClick on clicking the logo', async () => {
+      const { view } = renderWrapper({});
+      const logo = view.getByLabelText('visit codecademy.com');
+      await act(async () => {
+        userEvent.click(logo);
+      });
+      expect(trackClick).toHaveBeenCalledWith('logo', undefined);
+    });
+
+    it('triggers trackClick on language selection', async () => {
+      const { view } = renderWrapper();
+      const selectedLanguage = view.getByRole('combobox') as Element;
+      await act(async () => {
+        userEvent.selectOptions(selectedLanguage, ['javascript']);
+      });
+      expect(trackClick).toHaveBeenCalledWith('lang_select', undefined);
+    });
+
+    it('triggers trackClick for the first edit', async () => {
+      const testString = 'original-value';
+      const { view } = renderWrapper({
+        text: testString,
+        language: 'javascript',
+        trackFirstEdit: true,
+      });
+
+      const editor = view.getByTestId(mockEditorTestId);
+      await act(async () => {
+        userEvent.type(editor, 'd');
+      });
+      expect(trackClick).toHaveBeenCalledWith('edit', undefined);
+    });
+
+    it('triggers trackUserImpression', () => {
+      renderWrapper({
+        text: 'some-value',
+        language: 'javascript',
+        trackingData: {
+          page_name: 'forum_compose',
+          context: 'https://discuss.codecademy.com/some-interesting/post',
+        },
+      });
+
+      expect(trackUserImpression).toHaveBeenCalledWith({
+        page_name: 'forum_compose',
+        context: 'https://discuss.codecademy.com/some-interesting/post',
+        target: 'codebyte',
+      });
+    });
+  });
+});

package/src/__tests__/editor.test.tsx

@@ -0,0 +1,108 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+import { act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Editor } from '../editor';
+import { trackClick } from '../helpers';
+
+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(),
+}));
+
+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().mockImplementation(() => Promise.resolve()),
+  },
+});
+
+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', async () => {
+    const { view } = renderWrapper();
+    const copyBtn = view.getByTestId('copy-codebyte-btn');
+    await act(async () => {
+      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('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', undefined);
+    });
+
+    it('tracks clicks on the copy codebyte button', async () => {
+      const { view } = renderWrapper({
+        onChange: jest.fn(),
+        text: 'test',
+        language: 'javascript',
+      });
+
+      const copyButton = view.getByTestId('copy-codebyte-btn');
+      await act(async () => {
+        userEvent.click(copyButton);
+      });
+      expect(trackClick).toHaveBeenCalledWith('copy', undefined);
+    });
+  });
+});

package/src/__tests__/helpers.test.tsx

@@ -0,0 +1,39 @@
+import { trackClick } from '../helpers';
+import { trackUserClick } from '../libs/eventTracking';
+
+jest.mock('../libs/eventTracking');
+
+const initialUrl = window.location.href;
+const resetCodebytesParams = () =>
+  window.history.replaceState(null, '', initialUrl);
+
+describe('trackClick', () => {
+  afterEach(() => {
+    resetCodebytesParams();
+    (trackUserClick as any).mockReset();
+  });
+
+  it('tracks user click when tracking data is provided', () => {
+    const target = 'foobar';
+    const trackingData = {
+      page_name: 'forum',
+      context: 'https://discuss.codecademy.com/some-interesting/post',
+      target,
+    };
+
+    trackClick(target, trackingData);
+    expect(trackUserClick).toHaveBeenCalledWith({
+      page_name: 'forum',
+      context: 'https://discuss.codecademy.com/some-interesting/post',
+      target,
+    });
+  });
+
+  it('tracks user click when tracking data is not provided', () => {
+    const target = 'foobar';
+    trackClick(target);
+    expect(trackUserClick).toHaveBeenCalledWith({
+      target,
+    });
+  });
+});