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

package/src/__tests__/language-selection.test.tsx

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

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

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

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

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

package/src/editor.tsx

@@ -0,0 +1,162 @@
+import {
+  FillButton,
+  FlexBox,
+  Spinner,
+  TextButton,
+  ToolTip,
+} from '@codecademy/gamut';
+import { CopyIcon } from '@codecademy/gamut-icons';
+import { UserClickData } from '@codecademy/tracking';
+import styled from '@emotion/styled';
+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 { CodebytesCopyFormatter } from './types';
+
+const Output = styled.pre<{ hasError: boolean }>`
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0 1rem;
+  font-family: Monaco;
+  font-size: 0.875rem;
+  overflow: auto;
+  ${({ hasError, theme }) => `
+  color: ${hasError ? theme.colors.orange : theme.colors.text};
+  background-color: ${theme.colors['navy-900']};
+`}
+`;
+
+const CopyIconStyled = styled(CopyIcon)`
+  margin-right: 0.5rem;
+`;
+
+const DOCKER_SIGTERM = 143;
+
+type EditorProps = {
+  hideCopyButton: boolean;
+  language: LanguageOption;
+  text: string;
+  onChange: (text: string) => void;
+  snippetsBaseUrl?: string;
+  copyFormatter?: CodebytesCopyFormatter;
+  trackingData?: Omit<UserClickData, 'target'>;
+};
+
+export const Editor: React.FC<EditorProps> = ({
+  language,
+  text,
+  hideCopyButton,
+  onChange,
+  copyFormatter,
+  snippetsBaseUrl,
+  trackingData,
+}) => {
+  const [output, setOutput] = useState('');
+  const [status, setStatus] = useState<'ready' | 'waiting' | 'error'>('ready');
+  const [isCodeByteCopied, setIsCodeByteCopied] = useState(false);
+  const onCopyClick = () => {
+    if (!isCodeByteCopied) {
+      navigator.clipboard
+        .writeText(copyFormatter ? copyFormatter({ text, language }) : text)
+
+        // eslint-disable-next-line no-console
+        .catch(() => console.error('Failed to copy'));
+      setIsCodeByteCopied(true);
+      trackClick('copy', trackingData);
+    }
+  };
+
+  const setErrorStatusAndOutput = (message: string) => {
+    setOutput(message);
+    setStatus('error');
+  };
+
+  const handleSubmit = async () => {
+    if (text.trim().length === 0) {
+      return;
+    }
+    const data = {
+      language,
+      code: text,
+    };
+    setStatus('waiting');
+    setOutput('');
+    trackClick('run', trackingData);
+
+    try {
+      const response = await postSnippet(data, snippetsBaseUrl);
+      if (response.stderr.length > 0) {
+        setErrorStatusAndOutput(response.stderr);
+      } else if (response.exit_code === DOCKER_SIGTERM) {
+        setErrorStatusAndOutput(
+          'Your code took too long to return a result. Double check your code for any issues and try again!'
+        );
+      } else if (response.exit_code !== 0) {
+        setErrorStatusAndOutput('An unknown error occured.');
+      } else {
+        setOutput(response.stdout);
+        setStatus('ready');
+      }
+    } catch (error) {
+      setErrorStatusAndOutput('Error: ' + error);
+    }
+  };
+
+  return (
+    <>
+      <Drawers
+        leftChild={
+          <SimpleMonacoEditor
+            value={text}
+            language={language}
+            onChange={onChange}
+          />
+        }
+        rightChild={
+          <Output hasError={status === 'error'} aria-live="polite">
+            {output}
+          </Output>
+        }
+      />
+      <FlexBox
+        justifyContent={hideCopyButton ? 'flex-end' : 'space-between'}
+        pl={8}
+      >
+        {!hideCopyButton ? (
+          <ToolTip
+            id="codebyte-copied"
+            alignment="top-right"
+            target={
+              <TextButton
+                variant="secondary"
+                onClick={onCopyClick}
+                onBlur={() => setIsCodeByteCopied(false)}
+                data-testid="copy-codebyte-btn"
+              >
+                <CopyIconStyled aria-hidden="true" /> Copy Codebyte
+              </TextButton>
+            }
+          >
+            {isCodeByteCopied ? (
+              <span data-testid="copy-confirmation-tooltip" role="alert">
+                Copied!
+              </span>
+            ) : (
+              <span data-testid="copy-prompt-tooltip">
+                Copy to your clipboard
+              </span>
+            )}
+          </ToolTip>
+        ) : null}
+        <FillButton onClick={handleSubmit}>
+          {status === 'waiting' ? <Spinner /> : 'Run'}
+        </FillButton>
+      </FlexBox>
+    </>
+  );
+};

package/src/helpers/index.ts

@@ -0,0 +1,8 @@
+import { UserClickData } from '@codecademy/tracking';
+
+import { trackUserClick } from '../libs/eventTracking';
+
+export const trackClick = (
+  target: string,
+  trackingData?: Omit<UserClickData, 'target'>
+) => trackUserClick({ ...trackingData, target });

package/src/helpers/useEverInView.test.ts

@@ -0,0 +1,29 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useEverInView } from './useEverInView';
+
+const mockUseIntersection = jest.fn();
+
+jest.mock('./useIntersection', () => ({
+  get useIntersection() {
+    return mockUseIntersection;
+  },
+}));
+
+const ref = { current: null };
+
+describe('useEverInView', () => {
+  it('returns true after inView becomes false after true', async () => {
+    mockUseIntersection.mockReturnValueOnce(null);
+    const { result, rerender } = renderHook(() => useEverInView());
+    expect(result.current).toEqual({ everInView: false, ref });
+
+    mockUseIntersection.mockReturnValueOnce({ isIntersecting: true });
+    rerender();
+    expect(result.current).toEqual({ everInView: true, ref });
+
+    mockUseIntersection.mockReturnValueOnce({ isIntersecting: false });
+    rerender();
+    expect(result.current).toEqual({ everInView: true, ref });
+  });
+});

package/src/helpers/useEverInView.ts

@@ -0,0 +1,28 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { useIntersection } from './useIntersection';
+
+// Set either rootMargin or threshold for your use case. The threshold
+// will determine the amount of the element that needs to come into the viewport
+// before the useEverInView hook is triggered. The rootMargin will determine the
+// size of the root element's bounding box.
+// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_options
+export const useEverInView = (rootMargin = '0px', threshold = 0.2) => {
+  const ref = useRef(null);
+  const [everInView, setEverInView] = useState(false);
+
+  const intersection = useIntersection(ref, {
+    root: null,
+    rootMargin,
+    threshold,
+  });
+
+  const inView = intersection?.isIntersecting;
+  useEffect(() => {
+    if (inView) {
+      setEverInView(true);
+    }
+  }, [inView]);
+
+  return { everInView: Boolean(everInView || inView), ref };
+};

package/src/helpers/useIntersection.test.ts

@@ -0,0 +1,87 @@
+import { act, renderHook } from '@testing-library/react-hooks/dom';
+
+import { useIntersection } from './useIntersection';
+
+const originalIntersectionObserver = window.IntersectionObserver;
+const mockObserve = jest.fn();
+const mockDisconnect = jest.fn();
+const mockIntersectionObserver = jest.fn();
+const mockIntersectionObserverInstance = {
+  observe: mockObserve,
+  disconnect: mockDisconnect,
+};
+const ref = { current: document.createElement('div') };
+const options = {
+  root: null,
+  rootMargin: '0px',
+  threshold: 0.2,
+};
+
+beforeEach(() => {
+  mockIntersectionObserver.mockReturnValue(mockIntersectionObserverInstance);
+  window.IntersectionObserver = mockIntersectionObserver;
+});
+
+afterEach(() => {
+  window.IntersectionObserver = originalIntersectionObserver;
+});
+
+describe('useIntersection', () => {
+  test('intersection observer is not called', async () => {
+    // We render useIntersection with ref.current = null,
+    // which should prevent our hook from calling intersectionObserver.
+    const hook = renderHook(() => useIntersection({ current: null }, options));
+    expect(mockObserve).not.toHaveBeenCalled();
+
+    hook.unmount();
+    expect(mockDisconnect).not.toHaveBeenCalled();
+  });
+
+  test('intersection observer is called', async () => {
+    // We render useIntersection with ref.current = HTMLdivElement,
+    // which should make our hook call intersectionObserver.
+    const hook = renderHook(() => useIntersection(ref, options));
+    expect(mockObserve).toHaveBeenCalledWith(ref.current);
+
+    hook.unmount();
+    expect(mockDisconnect).toHaveBeenCalled();
+  });
+
+  it('returns the IntersectionObserverEntry from the callback', async () => {
+    const fakeIntersectionObserverEntry = {};
+    let handler: Function = () => {
+      return null;
+    };
+
+    // We mock the insersectionObserver Implementation
+    // to grab the handler, which allows us to simulate
+    // the element getting scrolled into view.
+    mockIntersectionObserver.mockImplementationOnce((cb) => {
+      handler = cb;
+
+      return mockIntersectionObserverInstance;
+    });
+    const { result, rerender, unmount } = renderHook(() =>
+      useIntersection(ref, options)
+    );
+
+    // Element hasn't been scrolled into view and therefore
+    // results.current should be null.
+    expect(result.current).toBeNull();
+
+    // Simulate element being scrolled into view
+    act(() => {
+      handler([fakeIntersectionObserverEntry]);
+    });
+    expect(result.current).toEqual(fakeIntersectionObserverEntry);
+
+    // We expect the results to remain the same after a rerender
+    rerender();
+    expect(result.current).toEqual(fakeIntersectionObserverEntry);
+
+    // The results should be null after unmounting.
+    unmount();
+    rerender();
+    expect(result.current).toBeNull();
+  });
+});