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

package/src/editor.tsx

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

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

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

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

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

package/src/helpers/useIntersection.ts

@@ -1,35 +0,0 @@
-import { RefObject, useEffect, useState } from 'react';
-
-export const useIntersection = (
-  ref: RefObject<HTMLElement>,
-  options: IntersectionObserverInit
-): IntersectionObserverEntry | null => {
-  const [
-    intersectionObserverEntry,
-    setIntersectionObserverEntry,
-  ] = useState<IntersectionObserverEntry | null>(null);
-
-  useEffect(() => {
-    if (ref.current && typeof IntersectionObserver === 'function') {
-      const handler = (entries: IntersectionObserverEntry[]) => {
-        setIntersectionObserverEntry(entries[0]);
-      };
-
-      const observer = new IntersectionObserver(handler, {
-        threshold: options.threshold,
-        root: options.root,
-        rootMargin: options.rootMargin,
-      });
-      observer.observe(ref.current);
-
-      return () => {
-        setIntersectionObserverEntry(null);
-        observer.disconnect();
-      };
-    }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    return () => {};
-  }, [ref, options.threshold, options.root, options.rootMargin]);
-
-  return intersectionObserverEntry;
-};

package/src/languageSelection.tsx

@@ -1,26 +0,0 @@
-import { Select, Text } from '@codecademy/gamut';
-import { ColorMode } from '@codecademy/gamut-styles';
-import React from 'react';
-
-import type { LanguageOption } from './consts';
-import { LanguageOptions } from './consts';
-
-export type LanguageSelectionProps = {
-  onChange: (newLanguage: LanguageOption) => void;
-};
-
-export const LanguageSelection: React.FC<LanguageSelectionProps> = ({
-  onChange,
-}) => {
-  return (
-    <ColorMode mode="dark" flex={1} px={16} pt={48}>
-      <Text mb={16}>Which language do you want to code in?</Text>
-      <Select
-        id="language-select"
-        aria-label="Select a language"
-        options={LanguageOptions}
-        onChange={(e) => onChange(e.target.value as LanguageOption)}
-      />
-    </ColorMode>
-  );
-};

package/src/libs/eventTracking.ts

@@ -1,18 +0,0 @@
-import { createTracker } from '@codecademy/tracking';
-
-const IS_DEV = process.env.NODE_ENV === 'development';
-
-// TODO: confirm tracking details and implementation DISC-447
-const tracker = createTracker({
-  apiBaseUrl:
-    typeof window === 'undefined'
-      ? 'https://www.codecademy.com'
-      : window.location.origin,
-  verbose: IS_DEV,
-});
-
-export const {
-  click: trackUserClick,
-  visit: trackUserVisit,
-  impression: trackUserImpression,
-} = tracker;

package/src/types.ts

@@ -1,30 +0,0 @@
-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 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/tsconfig.json

@@ -1,27 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "esModuleInterop": true,
-    "jsx": "react",
-    "allowJs": true,
-    "declaration": true,
-    "noUnusedParameters": false,
-    "sourceMap": true,
-    "strictFunctionTypes": false,
-    "strictPropertyInitialization": false
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": [
-    "./dist",
-    "jest.config.ts",
-    "**/*.spec.ts",
-    "**/*.test.ts",
-    "**/*.spec.tsx",
-    "**/*.test.tsx",
-    "**/*.spec.js",
-    "**/*.test.js",
-    "**/*.spec.jsx",
-    "**/*.test.jsx"
-  ]
-}

package/tsconfig.spec.json

@@ -1,21 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node"]
-  },
-  "include": [
-    "jest.config.ts",
-    "**/*.test.ts",
-    "**/*.spec.ts",
-    "**/*.test.tsx",
-    "**/*.spec.tsx",
-    "**/*.test.js",
-    "**/*.spec.js",
-    "**/*.test.jsx",
-    "**/*.spec.jsx",
-    "**/*.d.ts",
-    "src/__tests__/mocks.ts"
-  ]
-}