@codecademy/codebytes 0.0.2-alpha.d83a50.0 → 0.1.1-alpha.675361.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### 0.0.2-alpha.d83a50.0 (2021-12-17)
+### [0.1.1-alpha.675361.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.1.0...@codecademy/codebytes@0.1.1-alpha.675361.0) (2022-01-03)
 
 **Note:** Version bump only for package @codecademy/codebytes
+
+
+
+
+
+## 0.1.0 (2021-12-17)
+
+
+### Features
+
+* **Codebytes:** move codebytes parent disc 351 ([#11](https://github.com/Codecademy/client-modules/issues/11)) ([30edd2b](https://github.com/Codecademy/client-modules/commit/30edd2b7a0e50c27d3adcf231b56441b8e8f6b81))

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.0.2-alpha.d83a50.0",
+  "version": "0.1.1-alpha.675361.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -23,17 +23,9 @@
     "@codecademy/gamut": "*",
     "@codecademy/gamut-icons": "*",
     "@codecademy/gamut-styles": "*",
+    "@codecademy/variance": "*",
     "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "@storybook/addon-a11y": "6.3.4",
-    "@storybook/addon-actions": "6.3.4",
-    "@storybook/addon-controls": "6.3.4",
-    "@storybook/addon-docs": "6.3.4",
-    "@storybook/addon-essentials": "6.3.4",
-    "@storybook/addon-links": "6.3.4",
-    "@storybook/addons": "6.3.4",
-    "@storybook/react": "6.3.4",
-    "@storybook/theming": "6.3.4"
+    "@emotion/styled": "^11.3.0"
   },
   "scripts": {
     "verify": "tsc --noEmit",
@@ -41,28 +33,16 @@
     "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",
-    "lernaBuildTask": "yarn build",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build:watch": "yarn build && onchange ./src -- yarn build:compile && yarn build:types"
   },
   "license": "MIT",
   "devDependencies": {
     "@emotion/jest": "^11.3.0",
-    "@storybook/addon-a11y": "^6.4.4",
-    "@storybook/addon-actions": "^6.4.4",
-    "@storybook/addon-controls": "^6.4.4",
-    "@storybook/addon-docs": "^6.4.4",
-    "@storybook/addon-essentials": "^6.4.4",
-    "@storybook/addon-links": "^6.4.4",
-    "@storybook/addons": "^6.4.4",
-    "@storybook/react": "^6.4.4",
-    "@storybook/theming": "^6.4.4",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/react": "^11.0.4"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3e1e0013158d73c6f50cd60cd7cc71bbfa2008a5"
+  "gitHead": "d9c4df33e1b24cd2f123e939a0e4c2279096ba36"
 }

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/consts.ts

@@ -0,0 +1,15 @@
+// key = language param to send to snippets service
+// val = label in language selection drop down
+export const languageOptions = {
+  '': 'Select your language',
+  cpp: 'C++',
+  csharp: 'C#',
+  golang: 'Go',
+  javascript: 'JavaScript',
+  php: 'PHP',
+  python: 'Python 3',
+  ruby: 'Ruby',
+  scheme: 'Scheme',
+};
+
+export type languageOption = keyof typeof languageOptions;

package/src/drawers.tsx

@@ -0,0 +1,132 @@
+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,10 +1,150 @@
-import React from 'react';
+import {
+  FillButton,
+  FlexBox,
+  Spinner,
+  TextButton,
+  ToolTip,
+} from '@codecademy/gamut';
+import { CopyIcon } from '@codecademy/gamut-icons';
+import { theme } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
+import React, { useState } from 'react';
+
+import { postSnippet } from './api';
+import type { languageOption } from './consts';
+import { Drawers } from './drawers';
+
+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 }) => `
+  color: ${hasError ? theme.colors.orange : theme.colors.white};
+  background-color: ${theme.colors['gray-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;
+  // eslint-disable-next-line react/no-unused-prop-types
+  onChange: (
+    text: string
+  ) => void /* TODO: Add onChange behavior in DISC-353 */;
+  onCopy?: (text: string, language: string) => void;
+  snippetsBaseUrl?: string;
 };
 
-export const Editor: React.FC<EditorProps> = ({ text, onChange }) => {
-  return <textarea value={text} onChange={(e) => onChange(e.target.value)} />;
+export const Editor: React.FC<EditorProps> = ({
+  language,
+  text,
+  hideCopyButton,
+  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
+      ); /* TODO: pass in onCopyBBCodeblock behavior from the future version we migrate to Next.js  */
+      setIsCodeByteCopied(true);
+    }
+  };
+
+  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('');
+
+    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={<div>{text}</div>}
+        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/index.tsx

@@ -1,24 +1,79 @@
+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, { useState } from 'react';
 
+import { languageOption } from './consts';
 import { Editor } from './editor';
 
+const editorStates = states({
+  isIFrame: { 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 interface CodeByteEditorProps {
   text: string;
+  language: languageOption;
+  hideCopyButton: boolean;
+  onCopy?: (text: string, language: string) => void;
+  isIFrame?: boolean;
+  snippetsBaseUrl?: string;
+  onTextChange?: (text: string) => void;
 }
 
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
+  language,
+  hideCopyButton,
+  onCopy,
+  isIFrame = false,
+  snippetsBaseUrl = process.env.CONTAINER_API_BASE,
+  onTextChange,
 }) => {
   const [text, setText] = useState<string>(initialText);
   return (
-    <>
+    <EditorContainer bg="black" as="main" isIFrame={isIFrame}>
+      <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"
+        />
+      </Box>
       <Editor
+        language={language}
         text={text}
+        hideCopyButton={hideCopyButton}
         onChange={(newText: string) => {
           setText(newText);
+          onTextChange?.(newText);
         }}
+        onCopy={onCopy}
+        snippetsBaseUrl={snippetsBaseUrl}
       />
-    </>
+    </EditorContainer>
   );
 };
 

package/src/theme.d.ts

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

package/src/editor.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-declare type EditorProps = {
-    text: string;
-    onChange: (text: string) => void;
-};
-export declare const Editor: React.FC<EditorProps>;
-export {};

package/src/index.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface CodeByteEditorProps {
-    text: string;
-}
-export declare const CodeByteEditor: React.FC<CodeByteEditorProps>;
-export default CodeByteEditor;