@codecademy/codebytes 0.7.3 → 0.7.4-alpha.1a54e4.0

package/dist/libs/eventTracking.js

@@ -1,5 +1,5 @@
 import { createTracker } from '@codecademy/tracking';
-var IS_DEV = process.env['NODE_ENV'] === 'development'; // TODO: confirm tracking details and implementation DISC-447
+var IS_DEV = process.env.NODE_ENV === 'development'; // TODO: confirm tracking details and implementation DISC-447
 
 var tracker = createTracker({
   apiBaseUrl: typeof window === 'undefined' ? 'https://www.codecademy.com' : window.location.origin,

package/dist/theme.d.ts

@@ -0,0 +1,4 @@
+import { CoreTheme } from '@codecademy/gamut-styles';
+declare module '@emotion/react' {
+  export interface Theme extends CoreTheme {}
+}

package/dist/types.d.ts

@@ -0,0 +1,22 @@
+import { BackgroundProps } from '@codecademy/gamut-styles';
+import { UserClickData } from '@codecademy/tracking';
+import { LanguageOption } from './consts';
+export interface CodebytesChangeHandler {
+    (text: string, language: LanguageOption): void;
+}
+export interface CodebytesCopyFormatterParams {
+    text: string;
+    language: LanguageOption;
+}
+export declare type CodebytesCopyFormatter = ({ text, language, }: CodebytesCopyFormatterParams) => string;
+export interface CodeByteEditorProps extends Omit<BackgroundProps, 'bg'> {
+    text?: string;
+    language?: LanguageOption;
+    hideCopyButton?: boolean;
+    copyFormatter?: CodebytesCopyFormatter;
+    snippetsBaseUrl?: string;
+    onEdit?: CodebytesChangeHandler;
+    onLanguageChange?: CodebytesChangeHandler;
+    trackingData?: Omit<UserClickData, 'target'>;
+    trackFirstEdit?: boolean;
+}

package/dist/types.js

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

package/package.json

@@ -1,21 +1,20 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.7.3",
+  "version": "0.7.4-alpha.1a54e4.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
-  "dependencies": {
-    "@codecademy/tracking": "0.23.4",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "js-base64": "^3.6.0",
-    "jsuri": "^1.3.1"
-  },
-  "files": [
-    "dist/**"
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "dist/**/[A-Z]**/[A-Z]*.js",
+    "dist/**/[A-Z]**/index.js"
   ],
-  "license": "MIT",
-  "main": "./dist/index.js",
   "module": "./dist/index.js",
+  "main": "./dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Codecademy/client-modules.git"
+  },
   "peerDependencies": {
     "@codecademy/gamut": "*",
     "@codecademy/gamut-icons": "*",
@@ -25,18 +24,45 @@
     "react": ">=16.8.1",
     "react-dom": ">=16.8.1"
   },
-  "publishConfig": {
-    "access": "public"
+  "dependencies": {
+    "@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"
   },
-  "repository": "git@github.com:Codecademy/client-modules.git",
   "scripts": {
-    "build:watch": "yarn build:clean && yarn build:compile && yarn build:types && onchange ./src -- yarn build:compile && yarn build:types"
+    "verify": "tsc --noEmit",
+    "build:compile": "babel ./src --out-dir ./dist --copy-files --extensions \".ts,.tsx\"",
+    "build:clean": "rm -rf dist",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build": "yarn build:clean && yarn build:compile && yarn build:types",
+    "build:watch": "yarn build && onchange ./src -- yarn build:compile && yarn build:types"
   },
-  "sideEffects": [
-    "**/*.css",
-    "**/*.scss",
-    "dist/**/[A-Z]**/[A-Z]*.js",
-    "dist/**/[A-Z]**/index.js"
+  "license": "MIT",
+  "devDependencies": {
+    "@codecademy/gamut": "*",
+    "@codecademy/gamut-icons": "*",
+    "@codecademy/gamut-styles": "*",
+    "@codecademy/gamut-tests": "*",
+    "@codecademy/tracking": "0.25.1-alpha.1a54e4.0",
+    "@codecademy/variance": "*",
+    "@emotion/jest": "^11.3.0",
+    "@testing-library/dom": "^7.31.2",
+    "@testing-library/react": "^11.0.4",
+    "@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"
+  },
+  "files": [
+    "dist/**"
   ],
-  "gitHead": "af57b29fc3cc19e1a1bdee0033a6de2d98f89e73"
+  "gitHead": "4a0521b0b5a28071423bb6f61f2f14ac1a8da09c"
 }

package/dist/__tests__/codebyte.test.tsx

@@ -1,179 +0,0 @@
-import { setupRtl } from '@codecademy/gamut-tests';
-import { act } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-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(),
-}));
-
-// 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('dog', '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/dist/__tests__/editor.test.tsx

@@ -1,108 +0,0 @@
-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/dist/__tests__/language-selection.test.tsx

@@ -1,14 +0,0 @@
-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/dist/theme.d.js

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