@codecademy/codebytes 0.5.2-alpha.b9fc3a.0 → 0.6.2-alpha.0500c8.0

package/src/drawers.tsx

@@ -1,132 +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"
-          open={!isLeftOpen}
-          overflow="hidden"
-        >
-          {rightChild}
-        </Drawer>
-      </FlexBox>
-    </>
-  );
-};

package/src/editor.tsx

@@ -1,154 +0,0 @@
-import {
-  FillButton,
-  FlexBox,
-  Spinner,
-  TextButton,
-  ToolTip,
-} from '@codecademy/gamut';
-import { CopyIcon } from '@codecademy/gamut-icons';
-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';
-
-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.white};
-  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;
-  onCopy?: (text: string, language: string) => void;
-  snippetsBaseUrl?: string;
-};
-
-export const Editor: React.FC<EditorProps> = ({
-  language,
-  text,
-  hideCopyButton,
-  onChange,
-  onCopy,
-  snippetsBaseUrl,
-}) => {
-  const [output, setOutput] = useState('');
-  const [status, setStatus] = useState<'ready' | 'waiting' | 'error'>('ready');
-  const [isCodeByteCopied, setIsCodeByteCopied] = useState(false);
-  const onCopyClick = () => {
-    if (!isCodeByteCopied) {
-      navigator.clipboard
-        .writeText(text)
-        // eslint-disable-next-line no-console
-        .catch(() => console.error('Failed to copy'));
-      onCopy?.(text, language);
-      setIsCodeByteCopied(true);
-      trackClick('copy');
-    }
-  };
-
-  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');
-
-    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"
-            mode="dark"
-            target={
-              <TextButton
-                variant="secondary"
-                onClick={onCopyClick}
-                onBlur={() => setIsCodeByteCopied(false)}
-              >
-                <CopyIconStyled aria-hidden="true" /> Copy Codebyte
-              </TextButton>
-            }
-          >
-            {isCodeByteCopied ? (
-              <span role="alert">Copied!</span>
-            ) : (
-              <span>Copy to your clipboard</span>
-            )}
-          </ToolTip>
-        ) : null}
-        <FillButton onClick={handleSubmit}>
-          {status === 'waiting' ? <Spinner /> : 'Run'}
-        </FillButton>
-      </FlexBox>
-    </>
-  );
-};

package/src/helpers/index.ts

@@ -1,41 +0,0 @@
-import { trackUserClick } from '../libs/eventTracking';
-
-export type CodebyteOptions = {
-  clientName: string;
-  parentPage: string;
-  renderMode: string;
-};
-
-export enum CodebytesParams {
-  Language = 'lang',
-  Text = 'text',
-  CopyMode = 'copy-mode',
-  ClientName = 'client-name',
-  Page = 'page',
-  Mode = 'mode',
-}
-
-export const getOptions = (): CodebyteOptions => {
-  const currentUri = new URL(window.location.href);
-
-  return {
-    clientName:
-      currentUri.searchParams.get(CodebytesParams.ClientName) || 'Unknown',
-    parentPage:
-      currentUri.searchParams.get(CodebytesParams.Page) || document.referrer,
-    renderMode: currentUri.searchParams.get(CodebytesParams.Mode) || '',
-  };
-};
-
-export const trackClick = (target: string) => {
-  const options = getOptions();
-  const page_name = options.renderMode
-    ? `${options.clientName}_${options.renderMode}`
-    : options.clientName;
-
-  trackUserClick({
-    page_name,
-    context: options.parentPage,
-    target,
-  });
-};

package/src/index.tsx

@@ -1,109 +0,0 @@
-import { Box, IconButton } from '@codecademy/gamut';
-import { FaviconIcon } from '@codecademy/gamut-icons';
-import { Background, states, 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 { getOptions, trackClick } from './helpers';
-import { LanguageSelection } from './languageSelection';
-import { trackUserImpression } from './libs/eventTracking';
-import { CodeByteEditorProps } from './types';
-
-const editorStates = states({
-  isForums: { height: '100vh' },
-});
-
-const editorBaseStyles = system.css({
-  border: 1,
-  borderColor: 'gray-900',
-  display: 'flex',
-  flexDirection: 'column',
-  height: '25rem',
-  width: '43rem',
-  overflow: 'hidden',
-});
-export interface EditorStyleProps
-  extends StyleProps<typeof editorBaseStyles>,
-    StyleProps<typeof editorStates> {}
-
-const EditorContainer = styled(Background)<EditorStyleProps>(
-  editorBaseStyles,
-  editorStates
-);
-
-export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
-  text: initialText,
-  language: initialLanguage,
-  hideCopyButton,
-  isForums = false,
-  snippetsBaseUrl,
-  onEdit,
-  onLanguageChange,
-}) => {
-  const [text, setText] = useState<string>(initialText);
-  const [language, setLanguage] = useState<LanguageOption>(initialLanguage);
-  const [hasBeenEdited, setHasBeenEdited] = useState(false);
-
-  useEffect(() => {
-    const options = getOptions();
-    const page_name = options.renderMode
-      ? `${options.clientName}_${options.renderMode}`
-      : options.clientName;
-
-    trackUserImpression({
-      page_name,
-      context: options.parentPage,
-      target: 'codebyte',
-    });
-  }, []);
-
-  return (
-    <EditorContainer bg="black" as="main" isForums={isForums}>
-      <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')}
-        />
-      </Box>
-      {language ? (
-        <Editor
-          language={language}
-          text={text}
-          hideCopyButton={hideCopyButton}
-          onChange={(newText: string) => {
-            setText(newText);
-            onEdit?.(newText, language);
-
-            const { renderMode } = getOptions();
-            if (!renderMode && hasBeenEdited === false) {
-              setHasBeenEdited(true);
-              trackClick('edit');
-            }
-          }}
-          snippetsBaseUrl={snippetsBaseUrl}
-        />
-      ) : (
-        <LanguageSelection
-          onChange={(newLanguage) => {
-            const newText: string =
-              text || (newLanguage ? helloWorld[newLanguage] : '');
-            setLanguage(newLanguage);
-            setText(newText);
-            trackClick('lang_select');
-            onLanguageChange?.(newText, newLanguage);
-          }}
-        />
-      )}
-    </EditorContainer>
-  );
-};
-
-export default CodeByteEditor;

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,15 +0,0 @@
-import { LanguageOption } from './consts';
-
-interface CodebytesChangeHandler {
-  (text: string, language: LanguageOption): void;
-}
-export interface CodeByteEditorProps {
-  text: string;
-  language: LanguageOption;
-  hideCopyButton: boolean;
-  onCopy?: CodebytesChangeHandler;
-  isForums?: boolean;
-  snippetsBaseUrl?: string;
-  onEdit?: CodebytesChangeHandler;
-  onLanguageChange?: CodebytesChangeHandler;
-}

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["../../typings/*.d.ts", "./src/**/*.ts", "./src/**/*.tsx"],
-  "compilerOptions": {
-    "allowJs": true,
-    "outDir": "./dist"
-  }
-}