add codebytes parent component

.gitignore

@@ -50,3 +50,6 @@ packages/gamut-styles/demo-styles
 
 # Automatic report....json files
 report*.json
+
+# Ignore gamut directory
+packages/gamut

packages/codebytes/CodeByteEditor/consts.ts

@@ -0,0 +1,67 @@
+// 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;
+
+export const validLanguages = Object.keys(languageOptions).filter(
+  (option) => !!option
+) as 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: { [key in languageOption]?: string } = {
+  cpp,
+  csharp,
+  golang,
+  javascript,
+  php,
+  python,
+  ruby,
+  scheme,
+};

packages/codebytes/CodeByteEditor/editor.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {
+  Box
+} from '@codecademy/gamut';
+import type { languageOption } from './consts';
+
+export type CopyButtonMode = 'hide' | undefined;
+
+type EditorProps = {
+  copyButtonMode?: CopyButtonMode;
+  language: languageOption;
+  text: string;
+  onChange: Function;
+};
+
+export const Editor: React.FC<EditorProps> = ({
+  text
+}) => {
+  return (
+      <Box>{text}</Box>
+  );
+};

packages/codebytes/CodeByteEditor/index.tsx

@@ -0,0 +1,37 @@
+
+import { Background, system } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
+import React, { useState } from 'react';
+
+
+import type { languageOption } from './consts';
+
+interface CodeByteEditorProps {
+  on?: Record<CodebyteEvent, Function>
+}
+
+type CodebyteEvent = 'edit' | 'language_select' | 'copy' | 'run';
+
+export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({language, text: initialText, copyButtonMode}) => {
+  const [text, setText] = useState<string>(initialText);
+
+  const [hasBeenEdited, setHasBeenEdited] = useState(false);
+  return (
+    <>
+        <Editor
+          language={language}
+          text={text}
+          copyButtonMode={copyButtonMode}
+          onChange={(newText: string) => {
+            setText(newText);
+            const { renderMode } = getOptions();
+            if (!renderMode && hasBeenEdited === false) {
+              setHasBeenEdited(true);
+            }
+          }}
+      />
+    </>
+  );
+};
+
+export default CodeByteEditor;