@codecademy/codebytes 0.6.1 → 0.6.3

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.6.3](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.2...@codecademy/codebytes@0.6.3) (2022-02-02)
+
+**Note:** Version bump only for package @codecademy/codebytes
+
+
+
+
+
+### [0.6.2](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.1...@codecademy/codebytes@0.6.2) (2022-02-02)
+
+**Note:** Version bump only for package @codecademy/codebytes
+
+
+
+
+
 ### [0.6.1](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.0...@codecademy/codebytes@0.6.1) (2022-02-01)
 
 **Note:** Version bump only for package @codecademy/codebytes

package/dist/MonacoEditor/colorsDark.d.ts

@@ -0,0 +1,32 @@
+export declare const syntax: {
+    attribute: "#b4d353";
+    annotation: "#e85d7f";
+    atom: "#cc7bc2";
+    basic: "#ffffff";
+    comment: "#939598";
+    constant: "#ff8973";
+    decoration: "#e85d7f";
+    invalid: "#e85d7f";
+    key: "#83fff5";
+    keyword: "#b3ccff";
+    number: "#e85d7f";
+    operator: "#e85d7f";
+    predefined: "#ffffff";
+    property: "#e85d7f";
+    regexp: "#b4d353";
+    string: "#ffe083";
+    tag: "#e85d7f";
+    text: "#ff8973";
+    value: "#ffe083";
+    variable: "#b4d353";
+};
+export declare const ui: {
+    background: string;
+    text: "#ffffff";
+    indent: {
+        active: string;
+        inactive: string;
+    };
+};
+export declare type SyntaxColors = typeof syntax;
+export declare type UIColors = typeof ui;

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

@@ -2,10 +2,8 @@
 // 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';
-
-const darkTheme = {
+var darkTheme = {
   blue: editorColors.blue,
   deepPurple: editorColors.deepPurple,
   gray: editorColors.gray,
@@ -14,10 +12,9 @@ const darkTheme = {
   purple: editorColors.purple,
   red: editorColors.red,
   white: colors.white,
-  yellow: editorColors.yellow,
+  yellow: editorColors.yellow
 };
-
-export const syntax = {
+export var syntax = {
   attribute: darkTheme.green,
   annotation: darkTheme.red,
   atom: darkTheme.deepPurple,
@@ -37,18 +34,13 @@ export const syntax = {
   tag: darkTheme.red,
   text: darkTheme.orange,
   value: darkTheme.yellow,
-  variable: darkTheme.green,
+  variable: darkTheme.green
 };
-
-export const ui = {
+export var ui = {
   background: '#211E2F',
   text: darkTheme.white,
   indent: {
     active: '#393b41',
-    inactive: '#494b51',
-  },
-};
-
-export type SyntaxColors = typeof syntax;
-
-export type UIColors = typeof ui;
+    inactive: '#494b51'
+  }
+};

package/dist/MonacoEditor/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type SimpleMonacoEditorProps = {
+    value: string;
+    language: string;
+    onChange?: (value: string) => void;
+};
+export declare const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps>;

package/dist/MonacoEditor/index.js

@@ -0,0 +1,42 @@
+// 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 from '@monaco-editor/react';
+import React, { useCallback, useRef } from 'react';
+import ResizeObserver from 'react-resize-observer';
+import { dark } from './theme';
+export var SimpleMonacoEditor = function SimpleMonacoEditor(_ref) {
+  var value = _ref.value,
+      language = _ref.language,
+      onChange = _ref.onChange;
+  var editorRef = useRef(null);
+  var editorWillMount = useCallback(function (editor, monaco) {
+    editorRef.current = editor;
+    monaco.editor.defineTheme('dark', dark);
+    monaco.editor.setTheme('dark');
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: function onResize(_ref2) {
+      var _editorRef$current;
+
+      var height = _ref2.height,
+          width = _ref2.width;
+      (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.layout({
+        height: height,
+        width: width
+      });
+    }
+  }), /*#__PURE__*/React.createElement(ReactMonacoEditor, {
+    onMount: editorWillMount,
+    onChange: onChange,
+    options: {
+      minimap: {
+        enabled: false
+      }
+    },
+    theme: "vs-dark",
+    value: value,
+    language: language
+  }));
+};

package/dist/MonacoEditor/theme.d.ts

@@ -0,0 +1,2 @@
+import type * as monaco from 'monaco-editor';
+export declare const dark: monaco.editor.IStandaloneThemeData;

package/dist/MonacoEditor/theme.js

@@ -0,0 +1,122 @@
+// 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 * as darkColors from './colorsDark';
+
+var c = function c(color) {
+  return color.substr(1);
+};
+
+var theme = function theme(_ref) {
+  var ui = _ref.ui,
+      syntax = _ref.syntax;
+  return {
+    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
+    }
+  };
+};
+
+export var dark = theme(darkColors);

package/dist/MonacoEditor/types.d.ts

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

package/dist/__tests__/codebyte-test.d.ts

@@ -0,0 +1 @@
+import './mocks';

package/dist/__tests__/codebyte-test.js

@@ -0,0 +1,195 @@
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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';
+var mockEditorTestId = 'mock-editor-test-id'; // This is a super simplified mock capable of render value and trigger onChange.
+
+jest.mock('../MonacoEditor', function () {
+  return {
+    SimpleMonacoEditor: function SimpleMonacoEditor(_ref) {
+      var value = _ref.value,
+          _onChange = _ref.onChange;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, value, /*#__PURE__*/React.createElement("input", {
+        "data-testid": mockEditorTestId,
+        type: "text",
+        onChange: function onChange(e) {
+          _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
+        },
+        value: value
+      }));
+    }
+  };
+});
+var renderWrapper = setupRtl(CodeByteEditor, {});
+
+var renderWrapperWith = function renderWrapperWith(_ref2) {
+  var mode = _ref2.mode,
+      rest = _objectWithoutProperties(_ref2, ["mode"]);
+
+  var url = new URL(window.location.href);
+  var text = rest.text,
+      language = rest.language;
+
+  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', function () {
+  var initialUrl = window.location.href;
+  afterEach(function () {
+    window.history.replaceState(null, '', initialUrl);
+    trackClick.mockReset();
+    trackUserImpression.mockReset();
+  });
+  it('has a language-specific "hello world" program defined for each language', function () {
+    validLanguages.forEach(function (language) {
+      expect(helloWorld[language]).toBeDefined();
+    });
+  });
+  it('initializes with a language-specific "hello world" program when there is no language prop', function () {
+    var _renderWrapper = renderWrapper(),
+        view = _renderWrapper.view;
+
+    var selectedLanguage = view.getByRole('combobox');
+    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', function () {
+    var _renderWrapper2 = renderWrapper({
+      language: 'javascript'
+    }),
+        view = _renderWrapper2.view;
+
+    view.getByText(helloWorld.javascript);
+  });
+  it('initializes with deserialized text when there is a text prop but no language prop', function () {
+    var testString = 'yes hello';
+
+    var _renderWrapper3 = renderWrapper({
+      text: testString
+    }),
+        view = _renderWrapper3.view;
+
+    var selectedLanguage = view.getByRole('combobox');
+    userEvent.selectOptions(selectedLanguage, ['javascript']);
+    view.getByText(testString);
+  });
+  it('initializes with deserialized text when there is both a language and text prop', function () {
+    var testString = 'yes hello';
+
+    var _renderWrapper4 = renderWrapper({
+      text: testString,
+      language: 'javascript'
+    }),
+        view = _renderWrapper4.view;
+
+    view.getByText(testString);
+  });
+  describe('Change Handlers', function () {
+    it('triggers onEdit on text edit', function () {
+      var onEdit = jest.fn();
+
+      var _renderWrapper5 = renderWrapper({
+        text: '',
+        language: 'javascript',
+        onEdit: onEdit
+      }),
+          view = _renderWrapper5.view;
+
+      var editor = view.getByTestId(mockEditorTestId);
+      userEvent.type(editor, 'dog');
+      expect(onEdit).toHaveBeenCalledTimes(3);
+      expect(onEdit).toHaveBeenLastCalledWith('dog', 'javascript');
+    });
+    it('triggers onLanguageChange on language selection', function () {
+      var onLanguageChange = jest.fn();
+
+      var _renderWrapper6 = renderWrapper({
+        onLanguageChange: onLanguageChange
+      }),
+          view = _renderWrapper6.view;
+
+      var selectedLanguage = view.getByRole('combobox');
+      userEvent.selectOptions(selectedLanguage, ['javascript']);
+      expect(onLanguageChange).toHaveBeenCalledWith("console.log('Hello world!');", 'javascript');
+    });
+  });
+  describe('Tracking', function () {
+    it('triggers trackClick on clicking the logo', function () {
+      var _renderWrapper7 = renderWrapper({}),
+          view = _renderWrapper7.view;
+
+      var logo = view.getByLabelText('visit codecademy.com');
+      userEvent.click(logo);
+      expect(trackClick).toHaveBeenCalledWith('logo');
+    });
+    it('triggers trackClick on language selection', function () {
+      var _renderWrapper8 = renderWrapper(),
+          view = _renderWrapper8.view;
+
+      var selectedLanguage = view.getByRole('combobox');
+      userEvent.selectOptions(selectedLanguage, ['javascript']);
+      expect(trackClick).toHaveBeenCalledWith('lang_select');
+    });
+    it('triggers trackClick for the first edit in view mode', function () {
+      var testString = 'original-value';
+
+      var _renderWrapper9 = renderWrapper({
+        text: testString,
+        language: 'javascript'
+      }),
+          view = _renderWrapper9.view;
+
+      var editor = view.getByTestId(mockEditorTestId);
+      userEvent.type(editor, 'd');
+      expect(trackClick).toHaveBeenCalledWith('edit');
+    });
+    it('triggers trackUserImpression for view mode', function () {
+      renderWrapperWith({
+        text: 'some-value',
+        language: 'javascript'
+      });
+      expect(trackUserImpression).toHaveBeenCalledWith({
+        page_name: 'forum',
+        context: 'https://discuss.codecademy.com/some-interesting/post',
+        target: 'codebyte'
+      });
+    });
+    it('triggers trackUserImpression for compose mode', function () {
+      renderWrapperWith({
+        text: 'some-value',
+        language: 'javascript',
+        mode: 'compose'
+      });
+      expect(trackUserImpression).toHaveBeenCalledWith({
+        page_name: 'forum_compose',
+        context: 'https://discuss.codecademy.com/some-interesting/post',
+        target: 'codebyte'
+      });
+    });
+  });
+});

package/dist/__tests__/editor-test.d.ts

@@ -0,0 +1 @@
+import './mocks';

package/dist/__tests__/editor-test.js

@@ -0,0 +1,147 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+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', function () {
+  return {
+    SimpleMonacoEditor: function SimpleMonacoEditor(_ref) {
+      var value = _ref.value;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, value);
+    }
+  };
+});
+var renderWrapper = setupRtl(Editor, {
+  hideCopyButton: false,
+  language: 'javascript',
+  text: 'hello world',
+  onChange: jest.fn(),
+  snippetsBaseUrl: ''
+});
+Object.defineProperty(navigator, 'clipboard', {
+  value: {
+    writeText: jest.fn().mockImplementation(function () {
+      return Promise.resolve();
+    })
+  }
+});
+describe('Editor', function () {
+  global.fetch = jest.fn();
+  afterEach(function () {
+    global.fetch.mockClear();
+  });
+  it('shows a prompt tooltip when the CodeByte has __not__ been copied via the button', function () {
+    var _renderWrapper = renderWrapper(),
+        view = _renderWrapper.view;
+
+    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', function () {
+    var _renderWrapper2 = renderWrapper(),
+        view = _renderWrapper2.view;
+
+    var copyBtn = view.getByTestId('copy-codebyte-btn');
+    userEvent.click(copyBtn);
+    expect(view.queryByTestId('copy-prompt-tooltip')).toBeFalsy();
+    view.getByTestId('copy-confirmation-tooltip');
+  });
+  it('hides the copy codebyte button if hideCopyButton prop is true"', function () {
+    var _renderWrapper3 = renderWrapper({
+      hideCopyButton: true
+    }),
+        view = _renderWrapper3.view;
+
+    expect(view.queryByTestId('copy-codebyte-btn')).toBeNull();
+  });
+  it('shows the copy codebyte button if hideCopyButton prop is not set', function () {
+    var _renderWrapper4 = renderWrapper(),
+        view = _renderWrapper4.view;
+
+    view.getByTestId('copy-codebyte-btn');
+  });
+  describe('Change Handlers', function () {
+    it('triggers onCopy upon clicking the copy button', function () {
+      var onCopy = jest.fn();
+
+      var _renderWrapper5 = renderWrapper({
+        onCopy: onCopy
+      }),
+          view = _renderWrapper5.view;
+
+      var copyButton = view.getByTestId('copy-codebyte-btn');
+      userEvent.click(copyButton);
+      expect(onCopy).toHaveBeenCalled();
+    });
+  });
+  describe('Tracking', function () {
+    it('tracks clicks on the run button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _renderWrapper6, view, runButton;
+
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              global.fetch.mockResolvedValue({
+                json: function json() {
+                  return Promise.resolve({
+                    stderr: [],
+                    exit_code: 0,
+                    stdout: ''
+                  });
+                }
+              });
+              _renderWrapper6 = renderWrapper({
+                onChange: jest.fn(),
+                text: 'test',
+                language: 'javascript'
+              }), view = _renderWrapper6.view;
+              runButton = view.getByText('Run');
+              _context2.next = 5;
+              return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+                return _regeneratorRuntime.wrap(function _callee$(_context) {
+                  while (1) {
+                    switch (_context.prev = _context.next) {
+                      case 0:
+                        userEvent.click(runButton);
+
+                      case 1:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }
+                }, _callee);
+              })));
+
+            case 5:
+              expect(trackClick).toHaveBeenCalledWith('run');
+
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    it('tracks clicks on the copy codebyte button', function () {
+      var _renderWrapper7 = renderWrapper({
+        onChange: jest.fn(),
+        text: 'test',
+        language: 'javascript'
+      }),
+          view = _renderWrapper7.view;
+
+      var copyButton = view.getByTestId('copy-codebyte-btn');
+      userEvent.click(copyButton);
+      expect(trackClick).toHaveBeenCalledWith('copy');
+    });
+  });
+});

package/dist/__tests__/helpers-test.d.ts

@@ -0,0 +1 @@
+export {};