@codecademy/codebytes 1.0.10-alpha.e553ea803e.0 → 1.0.10-alpha.e7df7dd1a4.0

package/dist/MonacoEditor/index.js

@@ -6,6 +6,9 @@ import ReactMonacoEditor from '@monaco-editor/react';
 import React, { useCallback, useRef } from 'react';
 import ResizeObserver from 'react-resize-observer';
 import { dark } from './theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export var SimpleMonacoEditor = function SimpleMonacoEditor(_ref) {
   var value = _ref.value,
       language = _ref.language,
@@ -16,27 +19,29 @@ export var SimpleMonacoEditor = function SimpleMonacoEditor(_ref) {
     monaco.editor.defineTheme('dark', dark);
     monaco.editor.setTheme('dark');
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
-    onResize: function onResize(_ref2) {
-      var _editorRef$current;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ResizeObserver, {
+      onResize: function onResize(_ref2) {
+        var _editorRef$current;
 
-      var height = _ref2.height,
-          width = _ref2.width;
-      (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.layout({
-        height: height,
-        width: width
-      });
-    }
-  }), /*#__PURE__*/React.createElement(ReactMonacoEditor, {
-    onMount: editorWillMount,
-    onChange: onChange,
-    options: {
-      minimap: {
-        enabled: false
+        var height = _ref2.height,
+            width = _ref2.width;
+        (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.layout({
+          height: height,
+          width: width
+        });
       }
-    },
-    theme: "vs-dark",
-    value: value,
-    language: language
-  }));
+    }), /*#__PURE__*/_jsx(ReactMonacoEditor, {
+      onMount: editorWillMount,
+      onChange: onChange,
+      options: {
+        minimap: {
+          enabled: false
+        }
+      },
+      theme: "vs-dark",
+      value: value,
+      language: language
+    })]
+  });
 };

package/dist/codeByteEditor.js

@@ -1,7 +1,11 @@
 import _styled from "@emotion/styled/base";
 var _excluded = ["text", "language", "hideCopyButton", "snippetsBaseUrl", "onEdit", "onLanguageChange", "copyFormatter", "trackingData", "trackFirstEdit"];
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -29,6 +33,8 @@ import { trackClick } from './helpers';
 import { useEverInView } from './helpers/useEverInView';
 import { LanguageSelection } from './languageSelection';
 import { trackUserImpression } from './libs/eventTracking';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var editorBaseStyles = system.css({
   border: 1,
   borderColor: 'gray-900',
@@ -91,51 +97,53 @@ export var CodeByteEditor = function CodeByteEditor(_ref) {
       });
     }
   }, [everInView, trackingData]);
-  return /*#__PURE__*/React.createElement(EditorContainer, _extends({
+  return /*#__PURE__*/_jsxs(EditorContainer, _objectSpread(_objectSpread({
     bg: "black",
     maxWidth: "43rem"
-  }, rest, {
+  }, rest), {}, {
     overflow: "hidden",
-    ref: ref
-  }), /*#__PURE__*/React.createElement(Box, {
-    borderBottom: 1,
-    borderColor: "gray-900",
-    py: 4,
-    pl: 8
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    icon: FaviconIcon,
-    variant: "secondary",
-    href: "https://www.codecademy.com/",
-    target: "_blank",
-    rel: "noreferrer",
-    "aria-label": "visit codecademy.com",
-    onClick: function onClick() {
-      return trackClick('logo', trackingData);
-    }
-  })), language ? /*#__PURE__*/React.createElement(Editor, {
-    language: language,
-    text: text,
-    hideCopyButton: hideCopyButton,
-    onChange: function onChange(newText) {
-      setText(newText);
-      onEdit === null || onEdit === void 0 ? void 0 : onEdit(newText, language);
-
-      if (trackFirstEdit && hasBeenEdited === false) {
-        setHasBeenEdited(true);
-        trackClick('edit', trackingData);
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(Box, {
+      borderBottom: 1,
+      borderColor: "gray-900",
+      py: 4,
+      pl: 8,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        icon: FaviconIcon,
+        variant: "secondary",
+        href: "https://www.codecademy.com/",
+        target: "_blank",
+        rel: "noreferrer",
+        "aria-label": "visit codecademy.com",
+        onClick: function onClick() {
+          return trackClick('logo', trackingData);
+        }
+      })
+    }), language ? /*#__PURE__*/_jsx(Editor, {
+      language: language,
+      text: text,
+      hideCopyButton: hideCopyButton,
+      onChange: function onChange(newText) {
+        setText(newText);
+        onEdit === null || onEdit === void 0 ? void 0 : onEdit(newText, language);
+
+        if (trackFirstEdit && hasBeenEdited === false) {
+          setHasBeenEdited(true);
+          trackClick('edit', trackingData);
+        }
+      },
+      snippetsBaseUrl: snippetsBaseUrl,
+      copyFormatter: copyFormatter,
+      trackingData: trackingData
+    }) : /*#__PURE__*/_jsx(LanguageSelection, {
+      onChange: function onChange(newLanguage) {
+        var newText = text || (newLanguage ? helloWorld[newLanguage] : '');
+        setLanguage(newLanguage);
+        setText(newText);
+        trackClick('lang_select', trackingData);
+        onLanguageChange === null || onLanguageChange === void 0 ? void 0 : onLanguageChange(newText, newLanguage);
       }
-    },
-    snippetsBaseUrl: snippetsBaseUrl,
-    copyFormatter: copyFormatter,
-    trackingData: trackingData
-  }) : /*#__PURE__*/React.createElement(LanguageSelection, {
-    onChange: function onChange(newLanguage) {
-      var newText = text || (newLanguage ? helloWorld[newLanguage] : '');
-      setLanguage(newLanguage);
-      setText(newText);
-      trackClick('lang_select', trackingData);
-      onLanguageChange === null || onLanguageChange === void 0 ? void 0 : onLanguageChange(newText, newLanguage);
-    }
+    })]
   }));
 };
 export default CodeByteEditor;

package/dist/drawers.js

@@ -17,6 +17,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { FlexBox, IconButton } from '@codecademy/gamut';
 import { ArrowChevronLeftIcon, ArrowChevronRightIcon } from '@codecademy/gamut-icons';
 import React, { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 
 var DrawerLabel = /*#__PURE__*/_styled("span", {
   target: "e1keub6a2",
@@ -80,70 +83,81 @@ export var Drawers = function Drawers(_ref2) {
     isRightOpen = true;
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FlexBox, null, /*#__PURE__*/React.createElement(Drawer, {
-    open: !isRightOpen,
-    alignItems: "center",
-    flexWrap: "nowrap",
-    textAlign: "left",
-    borderRight: 1,
-    borderColor: "gray-900",
-    px: 8
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    icon: LeftDrawerIcon,
-    variant: "secondary",
-    size: "small",
-    onClick: function onClick() {
-      return setOpen(function (state) {
-        return state === 'both' ? 'right' : 'both';
-      });
-    },
-    "aria-label": ariaLabelCodeButton,
-    "aria-controls": "code-drawer",
-    "aria-expanded": !isRightOpen
-  }), /*#__PURE__*/React.createElement(DrawerLabel, {
-    id: "code-drawer-label"
-  }, "Code")), /*#__PURE__*/React.createElement(Drawer, {
-    open: !isLeftOpen,
-    alignItems: "center",
-    flexWrap: "nowrap",
-    justifyContent: "flex-end",
-    px: 8
-  }, /*#__PURE__*/React.createElement(DrawerLabel, {
-    id: "output-drawer-label"
-  }, "hello"), /*#__PURE__*/React.createElement(IconButton, {
-    icon: RightDrawerIcon,
-    variant: "secondary",
-    size: "small",
-    onClick: function onClick() {
-      return setOpen(function (state) {
-        return state === 'both' ? 'left' : 'both';
-      });
-    },
-    "aria-label": ariaLabelOutputButton,
-    "aria-controls": "output-drawer",
-    "aria-expanded": !isLeftOpen
-  }))), /*#__PURE__*/React.createElement(FlexBox, {
-    flexGrow: 1,
-    borderY: 1,
-    borderColor: "gray-900",
-    alignItems: "stretch",
-    overflow: "hidden"
-  }, /*#__PURE__*/React.createElement(Drawer, {
-    hideOnClose: true,
-    id: "code-drawer",
-    "aria-labelledby": "code-drawer-label",
-    open: !isRightOpen,
-    flexGrow: 0,
-    overflow: "hidden",
-    borderColor: "gray-900",
-    borderStyleRight: "solid",
-    borderWidthRight: "thin"
-  }, leftChild), /*#__PURE__*/React.createElement(Drawer, {
-    hideOnClose: true,
-    id: "output-drawer",
-    "aria-labelledby": "output-drawer-label",
-    role: "region",
-    open: !isLeftOpen,
-    overflow: "hidden"
-  }, rightChild)));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(FlexBox, {
+      children: [/*#__PURE__*/_jsxs(Drawer, {
+        open: !isRightOpen,
+        alignItems: "center",
+        flexWrap: "nowrap",
+        textAlign: "left",
+        borderRight: 1,
+        borderColor: "gray-900",
+        px: 8,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          icon: LeftDrawerIcon,
+          variant: "secondary",
+          size: "small",
+          onClick: function onClick() {
+            return setOpen(function (state) {
+              return state === 'both' ? 'right' : 'both';
+            });
+          },
+          "aria-label": ariaLabelCodeButton,
+          "aria-controls": "code-drawer",
+          "aria-expanded": !isRightOpen
+        }), /*#__PURE__*/_jsx(DrawerLabel, {
+          id: "code-drawer-label",
+          children: "Code"
+        })]
+      }), /*#__PURE__*/_jsxs(Drawer, {
+        open: !isLeftOpen,
+        alignItems: "center",
+        flexWrap: "nowrap",
+        justifyContent: "flex-end",
+        px: 8,
+        children: [/*#__PURE__*/_jsx(DrawerLabel, {
+          id: "output-drawer-label",
+          children: "hello"
+        }), /*#__PURE__*/_jsx(IconButton, {
+          icon: RightDrawerIcon,
+          variant: "secondary",
+          size: "small",
+          onClick: function onClick() {
+            return setOpen(function (state) {
+              return state === 'both' ? 'left' : 'both';
+            });
+          },
+          "aria-label": ariaLabelOutputButton,
+          "aria-controls": "output-drawer",
+          "aria-expanded": !isLeftOpen
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(FlexBox, {
+      flexGrow: 1,
+      borderY: 1,
+      borderColor: "gray-900",
+      alignItems: "stretch",
+      overflow: "hidden",
+      children: [/*#__PURE__*/_jsx(Drawer, {
+        hideOnClose: true,
+        id: "code-drawer",
+        "aria-labelledby": "code-drawer-label",
+        open: !isRightOpen,
+        flexGrow: 0,
+        overflow: "hidden",
+        borderColor: "gray-900",
+        borderStyleRight: "solid",
+        borderWidthRight: "thin",
+        children: leftChild
+      }), /*#__PURE__*/_jsx(Drawer, {
+        hideOnClose: true,
+        id: "output-drawer",
+        "aria-labelledby": "output-drawer-label",
+        role: "region",
+        open: !isLeftOpen,
+        overflow: "hidden",
+        children: rightChild
+      })]
+    })]
+  });
 };

package/dist/editor.js

@@ -29,6 +29,9 @@ import { postSnippet } from './api';
 import { Drawers } from './drawers';
 import { trackClick } from './helpers';
 import { SimpleMonacoEditor } from './MonacoEditor';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 
 var Output = /*#__PURE__*/_styled("pre", {
   target: "e1lzxy8e1",
@@ -157,38 +160,47 @@ export var Editor = function Editor(_ref2) {
     };
   }();
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Drawers, {
-    leftChild: /*#__PURE__*/React.createElement(SimpleMonacoEditor, {
-      value: text,
-      language: language,
-      onChange: onChange
-    }),
-    rightChild: /*#__PURE__*/React.createElement(Output, {
-      hasError: status === 'error',
-      "aria-live": "polite"
-    }, output)
-  }), /*#__PURE__*/React.createElement(FlexBox, {
-    justifyContent: hideCopyButton ? 'flex-end' : 'space-between',
-    pl: 8
-  }, !hideCopyButton ? /*#__PURE__*/React.createElement(ToolTip, {
-    id: "codebyte-copied",
-    alignment: "top-right",
-    target: /*#__PURE__*/React.createElement(TextButton, {
-      variant: "secondary",
-      onClick: onCopyClick,
-      onBlur: function onBlur() {
-        return setIsCodeByteCopied(false);
-      },
-      "data-testid": "copy-codebyte-btn"
-    }, /*#__PURE__*/React.createElement(CopyIconStyled, {
-      "aria-hidden": "true"
-    }), " Copy Codebyte")
-  }, isCodeByteCopied ? /*#__PURE__*/React.createElement("span", {
-    "data-testid": "copy-confirmation-tooltip",
-    role: "alert"
-  }, "Copied!") : /*#__PURE__*/React.createElement("span", {
-    "data-testid": "copy-prompt-tooltip"
-  }, "Copy to your clipboard")) : null, /*#__PURE__*/React.createElement(FillButton, {
-    onClick: handleSubmit
-  }, status === 'waiting' ? /*#__PURE__*/React.createElement(Spinner, null) : 'Run')));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Drawers, {
+      leftChild: /*#__PURE__*/_jsx(SimpleMonacoEditor, {
+        value: text,
+        language: language,
+        onChange: onChange
+      }),
+      rightChild: /*#__PURE__*/_jsx(Output, {
+        hasError: status === 'error',
+        "aria-live": "polite",
+        children: output
+      })
+    }), /*#__PURE__*/_jsxs(FlexBox, {
+      justifyContent: hideCopyButton ? 'flex-end' : 'space-between',
+      pl: 8,
+      children: [!hideCopyButton ? /*#__PURE__*/_jsx(ToolTip, {
+        id: "codebyte-copied",
+        alignment: "top-right",
+        target: /*#__PURE__*/_jsxs(TextButton, {
+          variant: "secondary",
+          onClick: onCopyClick,
+          onBlur: function onBlur() {
+            return setIsCodeByteCopied(false);
+          },
+          "data-testid": "copy-codebyte-btn",
+          children: [/*#__PURE__*/_jsx(CopyIconStyled, {
+            "aria-hidden": "true"
+          }), " Copy Codebyte"]
+        }),
+        children: isCodeByteCopied ? /*#__PURE__*/_jsx("span", {
+          "data-testid": "copy-confirmation-tooltip",
+          role: "alert",
+          children: "Copied!"
+        }) : /*#__PURE__*/_jsx("span", {
+          "data-testid": "copy-prompt-tooltip",
+          children: "Copy to your clipboard"
+        })
+      }) : null, /*#__PURE__*/_jsx(FillButton, {
+        onClick: handleSubmit,
+        children: status === 'waiting' ? /*#__PURE__*/_jsx(Spinner, {}) : 'Run'
+      })]
+    })]
+  });
 };

package/dist/languageSelection.js

@@ -2,21 +2,25 @@ import { Select, Text } from '@codecademy/gamut';
 import { ColorMode } from '@codecademy/gamut-styles';
 import React from 'react';
 import { LanguageOptions } from './consts';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export var LanguageSelection = function LanguageSelection(_ref) {
   var _onChange = _ref.onChange;
-  return /*#__PURE__*/React.createElement(ColorMode, {
+  return /*#__PURE__*/_jsxs(ColorMode, {
     mode: "dark",
     flex: 1,
     px: 16,
-    pt: 48
-  }, /*#__PURE__*/React.createElement(Text, {
-    mb: 16
-  }, "Which language do you want to code in?"), /*#__PURE__*/React.createElement(Select, {
-    id: "language-select",
-    "aria-label": "Select a language",
-    options: LanguageOptions,
-    onChange: function onChange(e) {
-      return _onChange(e.target.value);
-    }
-  }));
+    pt: 48,
+    children: [/*#__PURE__*/_jsx(Text, {
+      mb: 16,
+      children: "Which language do you want to code in?"
+    }), /*#__PURE__*/_jsx(Select, {
+      id: "language-select",
+      "aria-label": "Select a language",
+      options: LanguageOptions,
+      onChange: function onChange(e) {
+        return _onChange(e.target.value);
+      }
+    })]
+  });
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Editor",
-  "version": "1.0.10-alpha.e553ea803e.0",
+  "version": "1.0.10-alpha.e7df7dd1a4.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@codecademy/tracking": "^1.0.7",
@@ -39,5 +39,5 @@
     "dist/**/[A-Z]**/[A-Z]*.js",
     "dist/**/[A-Z]**/index.js"
   ],
-  "gitHead": "928ed02d52609e691bc6f9e42dd4a7e1f39ae2d0"
+  "gitHead": "61a0197c464694724746d106b4c490d15a273794"
 }