@codecademy/codebytes 1.0.4-alpha.41a141e2a.0 → 1.0.4-alpha.4641cabd2.0

package/src/__tests__/codebyte.test.tsx

@@ -1,186 +0,0 @@
-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

@@ -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/src/__tests__/helpers.test.tsx

@@ -1,39 +0,0 @@
-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,
-    });
-  });
-});

package/src/__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/src/api.ts

@@ -1,28 +0,0 @@
-import type { LanguageOption } from './consts';
-
-interface Response {
-  stderr: string;
-  stdout: string;
-  exit_code: number;
-}
-
-interface PostSnippetData {
-  language: LanguageOption;
-  code: string;
-}
-
-export const postSnippet = async (
-  data: PostSnippetData,
-  snippetsBaseUrl?: string
-): Promise<Response> => {
-  const snippetsEndpoint = `https://${snippetsBaseUrl}/snippets`;
-
-  const response = await fetch(snippetsEndpoint, {
-    method: 'POST',
-    body: JSON.stringify(data),
-    headers: {
-      'x-codecademy-user-id': 'codebytes-anon-user',
-    },
-  });
-  return response.json();
-};

package/src/codeByteEditor.tsx

@@ -1,115 +0,0 @@
-import { Box, IconButton } from '@codecademy/gamut';
-import { FaviconIcon } from '@codecademy/gamut-icons';
-import { Background, system } from '@codecademy/gamut-styles';
-import { StyleProps } from '@codecademy/variance';
-import styled from '@emotion/styled';
-import React, { useEffect, useState } from 'react';
-
-import { helloWorld, LanguageOption } from './consts';
-import { Editor } from './editor';
-import { trackClick } from './helpers';
-import { useEverInView } from './helpers/useEverInView';
-import { LanguageSelection } from './languageSelection';
-import { trackUserImpression } from './libs/eventTracking';
-import { CodeByteEditorProps } from './types';
-
-const editorBaseStyles = system.css({
-  border: 1,
-  borderColor: 'gray-900',
-  display: 'flex',
-  flexDirection: 'column',
-  minHeight: '25rem',
-});
-
-const EditorContainer = styled(Background)<StyleProps<typeof editorBaseStyles>>(
-  editorBaseStyles
-);
-
-export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
-  text: initialText,
-  language: initialLanguage,
-  hideCopyButton = false,
-  snippetsBaseUrl,
-  onEdit,
-  onLanguageChange,
-  copyFormatter,
-  trackingData,
-  trackFirstEdit = false,
-  ...rest
-}) => {
-  const { everInView, ref } = useEverInView();
-
-  const getInitialText = () => {
-    if (initialText !== undefined) return initialText;
-    return initialLanguage ? helloWorld[initialLanguage] : '';
-  };
-
-  const [text, setText] = useState<string>(getInitialText());
-  const [language, setLanguage] = useState<LanguageOption>(
-    initialLanguage ?? ''
-  );
-  const [hasBeenEdited, setHasBeenEdited] = useState(false);
-
-  useEffect(() => {
-    if (everInView) {
-      trackUserImpression({
-        page_name: trackingData?.page_name ?? 'Unknown',
-        context: trackingData?.context ?? document.referrer,
-        target: 'codebyte',
-      });
-    }
-  }, [everInView, trackingData]);
-
-  return (
-    <EditorContainer
-      bg="black"
-      maxWidth="43rem"
-      {...rest}
-      overflow="hidden"
-      ref={ref}
-    >
-      <Box borderBottom={1} borderColor="gray-900" py={4} pl={8}>
-        <IconButton
-          icon={FaviconIcon}
-          variant="secondary"
-          href="https://www.codecademy.com/"
-          target="_blank"
-          rel="noreferrer"
-          aria-label="visit codecademy.com"
-          onClick={() => trackClick('logo', trackingData)}
-        />
-      </Box>
-      {language ? (
-        <Editor
-          language={language}
-          text={text}
-          hideCopyButton={hideCopyButton}
-          onChange={(newText: string) => {
-            setText(newText);
-            onEdit?.(newText, language);
-            if (trackFirstEdit && hasBeenEdited === false) {
-              setHasBeenEdited(true);
-              trackClick('edit', trackingData);
-            }
-          }}
-          snippetsBaseUrl={snippetsBaseUrl}
-          copyFormatter={copyFormatter}
-          trackingData={trackingData}
-        />
-      ) : (
-        <LanguageSelection
-          onChange={(newLanguage) => {
-            const newText: string =
-              text || (newLanguage ? helloWorld[newLanguage] : '');
-            setLanguage(newLanguage);
-            setText(newText);
-            trackClick('lang_select', trackingData);
-            onLanguageChange?.(newText, newLanguage);
-          }}
-        />
-      )}
-    </EditorContainer>
-  );
-};
-
-export default CodeByteEditor;

package/src/consts.ts

@@ -1,64 +0,0 @@
-// key = language param to send to snippets service
-// val = label in language selection drop down
-export const LanguageOptions = {
-  '': 'Select a language',
-  cpp: 'C++',
-  csharp: 'C#',
-  golang: 'Go',
-  javascript: 'JavaScript',
-  php: 'PHP',
-  python: 'Python 3',
-  ruby: 'Ruby',
-  scheme: 'Scheme',
-};
-
-export type LanguageOption = keyof typeof LanguageOptions;
-
-export const validLanguages = Object.keys(LanguageOptions).filter(
-  (option) => !!option
-) as Exclude<LanguageOption, ''>[];
-
-const cpp = `#include <iostream>
-int main() {
-  std::cout << "Hello world!";
-  return 0;
-}`;
-
-const csharp = `namespace HelloWorld {
-  class Hello {
-    static void Main(string[] args) {
-      System.Console.WriteLine("Hello world!");
-    }
-  }
-}`;
-
-const golang = `package main
-import "fmt"
-func main() {
-  fmt.Println("Hello world!")
-}`;
-
-const javascript = "console.log('Hello world!');";
-
-const php = `<?php
-  echo "Hello world!";
-?>`;
-
-const python = "print('Hello world!')";
-
-const ruby = 'puts "Hello world!"';
-
-const scheme = `(begin
-  (display "Hello world!")
-  (newline))`;
-
-export const helloWorld = {
-  cpp,
-  csharp,
-  golang,
-  javascript,
-  php,
-  python,
-  ruby,
-  scheme,
-} as const;

package/src/drawers.tsx

@@ -1,133 +0,0 @@
-import { FlexBox, IconButton } from '@codecademy/gamut';
-import {
-  ArrowChevronLeftIcon,
-  ArrowChevronRightIcon,
-} from '@codecademy/gamut-icons';
-import styled from '@emotion/styled';
-import React, { useState } from 'react';
-
-const DrawerLabel = styled.span`
-  padding: 0.875rem 0.5rem;
-`;
-
-const LeftDrawerIcon = styled(ArrowChevronLeftIcon)<{ open?: boolean }>`
-  transition: transform 0.2s ease-in-out;
-`;
-const RightDrawerIcon = LeftDrawerIcon.withComponent(ArrowChevronRightIcon);
-
-const Drawer = styled(FlexBox)<{ open?: boolean; hideOnClose?: boolean }>`
-  position: relative;
-  ${({ open, hideOnClose }) => `
-    flex-basis: ${open ? '100%' : '0%'};
-    visibility: ${!open && hideOnClose ? 'hidden' : 'visible'};
-    transition: flex-basis 0.2s ${
-      open ? 'ease-out' : 'ease-in, visibility 0s 0.2s'
-    };
-
-    ${LeftDrawerIcon}, ${RightDrawerIcon} {
-      transform: rotateZ(${open ? '0' : '180'}deg)};
-    }
-  `}
-`;
-
-export type DrawersProps = {
-  leftChild: React.ReactNode;
-  rightChild: React.ReactNode;
-};
-
-export const Drawers: React.FC<DrawersProps> = ({ leftChild, rightChild }) => {
-  const [open, setOpen] = useState<'left' | 'right' | 'both'>('both');
-
-  let ariaLabelCodeButton = 'hide code';
-  let ariaLabelOutputButton = 'hide output';
-  let isLeftOpen = false;
-  let isRightOpen = false;
-
-  if (open === 'left') {
-    ariaLabelCodeButton = ariaLabelOutputButton = 'show output';
-    isLeftOpen = true;
-  } else if (open === 'right') {
-    ariaLabelCodeButton = ariaLabelOutputButton = 'show code';
-    isRightOpen = true;
-  }
-
-  return (
-    <>
-      <FlexBox>
-        <Drawer
-          open={!isRightOpen}
-          alignItems="center"
-          flexWrap="nowrap"
-          textAlign="left"
-          borderRight={1}
-          borderColor="gray-900"
-          px={8}
-        >
-          <IconButton
-            icon={LeftDrawerIcon}
-            variant="secondary"
-            size="small"
-            onClick={() =>
-              setOpen((state) => (state === 'both' ? 'right' : 'both'))
-            }
-            aria-label={ariaLabelCodeButton}
-            aria-controls="code-drawer"
-            aria-expanded={!isRightOpen}
-          />
-          <DrawerLabel id="code-drawer-label">Code</DrawerLabel>
-        </Drawer>
-        <Drawer
-          open={!isLeftOpen}
-          alignItems="center"
-          flexWrap="nowrap"
-          justifyContent="flex-end"
-          px={8}
-        >
-          <DrawerLabel id="output-drawer-label">Output</DrawerLabel>
-          <IconButton
-            icon={RightDrawerIcon}
-            variant="secondary"
-            size="small"
-            onClick={() =>
-              setOpen((state) => (state === 'both' ? 'left' : 'both'))
-            }
-            aria-label={ariaLabelOutputButton}
-            aria-controls="output-drawer"
-            aria-expanded={!isLeftOpen}
-          />
-        </Drawer>
-      </FlexBox>
-      <FlexBox
-        flexGrow={1}
-        borderY={1}
-        borderColor="gray-900"
-        alignItems="stretch"
-        overflow="hidden"
-      >
-        <Drawer
-          hideOnClose
-          id="code-drawer"
-          aria-labelledby="code-drawer-label"
-          open={!isRightOpen}
-          flexGrow={0}
-          overflow="hidden"
-          borderColor="gray-900"
-          borderStyleRight="solid"
-          borderWidthRight="thin"
-        >
-          {leftChild}
-        </Drawer>
-        <Drawer
-          hideOnClose
-          id="output-drawer"
-          aria-labelledby="output-drawer-label"
-          role="region"
-          open={!isLeftOpen}
-          overflow="hidden"
-        >
-          {rightChild}
-        </Drawer>
-      </FlexBox>
-    </>
-  );
-};