@opencraft/frontend-plugin-sandbox 1.1.0 → 1.2.0-alpha.0

package/.github/workflows/npm-package-for-pr.yaml

@@ -35,7 +35,7 @@ jobs:
           message: |
             You can install this into an MFE using:
             ```bash
-            RUN --mount=type=cache,target=/root/.npm,sharing=shared npm install 'https://github.com/open-craft/frontend-plugin-sandbox-headers-and-footers/archive/refs/heads/${{ github.head_ref }}.tar.gz'
+            RUN --mount=type=cache,target=/root/.npm,sharing=shared npm install 'https://github.com/open-craft/frontend-plugin-sandbox/archive/refs/heads/${{ github.head_ref }}.tar.gz'
             ```
 
             You can test this on a local tutor environment using the following plugin code:
@@ -45,8 +45,8 @@ jobs:
                     f"mfe-dockerfile-post-npm-install-MFE_NAME",
                 """
                 RUN --mount=type=cache,target=/root/.npm,sharing=shared npm install '@edx/frontend-component-header@latest'
-                ADD https://api.github.com/repos/open-craft/frontend-plugin-sandbox-headers-and-footers/git/refs/heads/${{ github.head_ref }} /tmp/gitref
-                RUN --mount=type=cache,target=/root/.npm,sharing=shared npm install 'https://github.com/open-craft/frontend-plugin-sandbox-headers-and-footers/archive/refs/heads/${{ github.head_ref }}.tar.gz'
+                ADD https://api.github.com/repos/open-craft/frontend-plugin-sandbox/git/refs/heads/${{ github.head_ref }} /tmp/gitref
+                RUN --mount=type=cache,target=/root/.npm,sharing=shared npm install 'https://github.com/open-craft/frontend-plugin-sandbox/archive/refs/heads/${{ github.head_ref }}.tar.gz'
                 """,
                 )
             )

package/.nvmrc

@@ -1 +1 @@
-20
+24

package/README.md

@@ -9,13 +9,13 @@ This repo contains plug-in code for OpenCraft's sandboxes.
 The package can be installed from npm using:
 
 ```bash
-npm install @opencraft/frontend-plugin-sandbox-headers-and-footers
+npm install @opencraft/frontend-plugin-sandbox
 ```
 
 Or to install from GitHub directly:
 
 ```bash
-npm install 'git+https://github.com/open-craft/frontend-plugin-sandbox-headers-and-footers.git#branch_tag_or_commit'
+npm install 'git+https://github.com/open-craft/frontend-plugin-sandbox.git#branch_tag_or_commit'
 ```
 
 ## Usage
@@ -24,7 +24,7 @@ This project exposes all slots and their configuration to simplify testing. You
 can add the following to your `env.config.tsx` file to enable all the slots.
 
 ```jsx
-import { slotSettings } from "@opencraft/frontend-plugin-sandbox-headers-and-footers";
+import { slotSettings } from "@opencraft/frontend-plugin-sandbox";
 
 const config = {
     pluginSlots: slotSettings,
@@ -47,7 +47,7 @@ for mfe_app in ["account", "discussions", "learner-dashboard", "learning", "prof
             f"mfe-dockerfile-post-npm-install-{mfe_app}",
             """
     RUN --mount=type=cache,target=/root/.npm,sharing=shared npm install '@edx/frontend-component-header@latest'
-    RUN --mount=type=cache,target=/root/.npm,sharing=shared npm install '@opencraft/frontend-plugin-sandbox-headers-and-footers'
+    RUN --mount=type=cache,target=/root/.npm,sharing=shared npm install '@opencraft/frontend-plugin-sandbox'
     """,
         )
     )
@@ -55,9 +55,9 @@ for mfe_app in ["account", "discussions", "learner-dashboard", "learning", "prof
         (
             f"mfe-env-config-runtime-definitions-{mfe_app}",
             """
-        const { WhiteLogo, MenuWrapper, SandboxFooter } = await import(
+        const { MenuWrapper, SandboxFooter } = await import(
             /* webpackFetchPriority: "eager" */
-            '@opencraft/frontend-plugin-sandbox-headers-and-footers'
+            '@opencraft/frontend-plugin-sandbox'
         );
         """,
         )
@@ -87,20 +87,6 @@ for mfe_app in ["account", "discussions", "learner-dashboard", "learning", "prof
                   },
                 }""",
             ),
-            (
-                mfe_app,
-                "org.openedx.frontend.layout.header_logo.v1",
-                """
-            {
-              op: PLUGIN_OPERATIONS.Insert,
-              widget: {
-                id: 'custom_logo',
-                type: DIRECT_PLUGIN,
-                RenderWidget: WhiteLogo,
-              },
-
-            }""",
-            ),
             (
                 mfe_app,
                 "org.openedx.frontend.layout.header_desktop_user_menu.v1",
@@ -129,7 +115,7 @@ hooks.Filters.ENV_PATCHES.add_item(
         (
             f"mfe-env-config-runtime-definitions-catalog",
             """
-            const { CatalogBanner } = await import('@opencraft/frontend-plugin-sandbox-headers-and-footers');
+            const { CatalogBanner } = await import('@opencraft/frontend-plugin-sandbox');
             """,
         )
     )

package/dist/components/CatalogBanner.js

@@ -1,34 +1,34 @@
-import React from "react";
-import { Image, Row, Stack } from "@openedx/paragon";
-import bannerBg from "../assets/banner-bg.png";
+import React from 'react';
+import { Image, Row, Stack } from '@openedx/paragon';
+import bannerBg from '../assets/banner-bg.png';
 export const CatalogBanner = () => /*#__PURE__*/React.createElement(Row, {
   direction: "horizontal",
   className: "bg-primary"
 }, /*#__PURE__*/React.createElement(Stack, {
-  direct: "vertical",
+  direction: "vertical",
   className: "justify-content-center px-6",
   style: {
-    maxWidth: "55rem"
+    maxWidth: '55rem'
   }
 }, /*#__PURE__*/React.createElement("h1", {
   className: "display-2 text-light-100"
 }, "You\u2019re viewing a live", /*#__PURE__*/React.createElement("span", {
   className: "text-brand-500"
-}, " Open edX® "), "demo"), /*#__PURE__*/React.createElement("p", {
+}, ' Open edX® '), "demo"), /*#__PURE__*/React.createElement("p", {
   className: "h4 text-light-100 "
 }, "OpenClass is a demo site by OpenCraft where you can explore the Open edX platform as a learner or course author.")), /*#__PURE__*/React.createElement(Stack, {
   className: "justify-content-end",
   style: {
-    backgroundImg: "url(../assets/banner-bg.png)"
+    backgroundImage: 'url(../assets/banner-bg.png)'
   }
 }, /*#__PURE__*/React.createElement(Image, {
   src: bannerBg,
   style: {
-    height: "100%",
-    width: "100%",
-    maxHeight: "550px",
-    objectFit: "contain",
-    objectPosition: "right top"
+    height: '100%',
+    width: '100%',
+    maxHeight: '550px',
+    objectFit: 'contain',
+    objectPosition: 'right top'
   },
   alt: "illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
 })));

package/dist/components/CatalogBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatalogBanner.js","names":["React","Image","Row","Stack","bannerBg","CatalogBanner","createElement","direction","className","direct","style","maxWidth","backgroundImg","src","height","width","maxHeight","objectFit","objectPosition","alt"],"sources":["../../src/components/CatalogBanner.tsx"],"sourcesContent":["import React from \"react\";\nimport { Image, Row, Stack } from \"@openedx/paragon\";\nimport bannerBg from \"../assets/banner-bg.png\";\n\nexport const CatalogBanner = () => (\n    <Row\n        direction=\"horizontal\"\n        className=\"bg-primary\"\n    >\n        <Stack\n            direct=\"vertical\"\n            className=\"justify-content-center px-6\"\n            style={{ maxWidth: \"55rem\" }}\n        >\n            <h1 className=\"display-2 text-light-100\">\n                You’re viewing a live\n                <span className=\"text-brand-500\">\n                    {\" Open edX® \"}\n                </span>\n                demo\n            </h1>\n            <p className=\"h4 text-light-100 \">\n                OpenClass is a demo site by OpenCraft where you can explore the\n                Open edX platform as a learner or course author.\n            </p>\n        </Stack>\n        <Stack\n            className=\"justify-content-end\"\n            style={{\n                backgroundImg: \"url(../assets/banner-bg.png)\",\n            }}\n        >\n            <Image\n                src={bannerBg}\n                style={{\n                    height: \"100%\",\n                    width: \"100%\",\n                    maxHeight: \"550px\",\n                    objectFit: \"contain\",\n                    objectPosition: \"right top\",\n                }}\n                alt=\"illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant\"\n            />\n        </Stack>\n    </Row>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,GAAG,EAAEC,KAAK,QAAQ,kBAAkB;AACpD,OAAOC,QAAQ,MAAM,yBAAyB;AAE9C,OAAO,MAAMC,aAAa,GAAGA,CAAA,kBACzBL,KAAA,CAAAM,aAAA,CAACJ,GAAG;EACAK,SAAS,EAAC,YAAY;EACtBC,SAAS,EAAC;AAAY,gBAEtBR,KAAA,CAAAM,aAAA,CAACH,KAAK;EACFM,MAAM,EAAC,UAAU;EACjBD,SAAS,EAAC,6BAA6B;EACvCE,KAAK,EAAE;IAAEC,QAAQ,EAAE;EAAQ;AAAE,gBAE7BX,KAAA,CAAAM,aAAA;EAAIE,SAAS,EAAC;AAA0B,GAAC,4BAErC,eAAAR,KAAA,CAAAM,aAAA;EAAME,SAAS,EAAC;AAAgB,GAC3B,aACC,CAAC,QAEP,CAAC,eACLR,KAAA,CAAAM,aAAA;EAAGE,SAAS,EAAC;AAAoB,GAAC,kHAG/B,CACA,CAAC,eACRR,KAAA,CAAAM,aAAA,CAACH,KAAK;EACFK,SAAS,EAAC,qBAAqB;EAC/BE,KAAK,EAAE;IACHE,aAAa,EAAE;EACnB;AAAE,gBAEFZ,KAAA,CAAAM,aAAA,CAACL,KAAK;EACFY,GAAG,EAAET,QAAS;EACdM,KAAK,EAAE;IACHI,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE,MAAM;IACbC,SAAS,EAAE,OAAO;IAClBC,SAAS,EAAE,SAAS;IACpBC,cAAc,EAAE;EACpB,CAAE;EACFC,GAAG,EAAC;AAA2I,CAClJ,CACE,CACN,CACR","ignoreList":[]}
+{"version":3,"file":"CatalogBanner.js","names":["React","Image","Row","Stack","bannerBg","CatalogBanner","createElement","direction","className","style","maxWidth","backgroundImage","src","height","width","maxHeight","objectFit","objectPosition","alt"],"sources":["../../src/components/CatalogBanner.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, Row, Stack } from '@openedx/paragon';\nimport bannerBg from '../assets/banner-bg.png';\n\nexport const CatalogBanner = () => (\n  <Row\n    direction=\"horizontal\"\n    className=\"bg-primary\"\n  >\n    <Stack\n      direction=\"vertical\"\n      className=\"justify-content-center px-6\"\n      style={{ maxWidth: '55rem' }}\n    >\n      <h1 className=\"display-2 text-light-100\">\n        You’re viewing a live\n        <span className=\"text-brand-500\">\n          {' Open edX® '}\n        </span>\n        demo\n      </h1>\n      <p className=\"h4 text-light-100 \">\n        OpenClass is a demo site by OpenCraft where you can explore the\n        Open edX platform as a learner or course author.\n      </p>\n    </Stack>\n    <Stack\n      className=\"justify-content-end\"\n      style={{\n        backgroundImage: 'url(../assets/banner-bg.png)',\n      }}\n    >\n      <Image\n        src={bannerBg}\n        style={{\n          height: '100%',\n          width: '100%',\n          maxHeight: '550px',\n          objectFit: 'contain',\n          objectPosition: 'right top',\n        }}\n        alt=\"illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant\"\n      />\n    </Stack>\n  </Row>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,GAAG,EAAEC,KAAK,QAAQ,kBAAkB;AACpD,OAAOC,QAAQ,MAAM,yBAAyB;AAE9C,OAAO,MAAMC,aAAa,GAAGA,CAAA,kBAC3BL,KAAA,CAAAM,aAAA,CAACJ,GAAG;EACFK,SAAS,EAAC,YAAY;EACtBC,SAAS,EAAC;AAAY,gBAEtBR,KAAA,CAAAM,aAAA,CAACH,KAAK;EACJI,SAAS,EAAC,UAAU;EACpBC,SAAS,EAAC,6BAA6B;EACvCC,KAAK,EAAE;IAAEC,QAAQ,EAAE;EAAQ;AAAE,gBAE7BV,KAAA,CAAAM,aAAA;EAAIE,SAAS,EAAC;AAA0B,GAAC,4BAEvC,eAAAR,KAAA,CAAAM,aAAA;EAAME,SAAS,EAAC;AAAgB,GAC7B,aACG,CAAC,QAEL,CAAC,eACLR,KAAA,CAAAM,aAAA;EAAGE,SAAS,EAAC;AAAoB,GAAC,kHAG/B,CACE,CAAC,eACRR,KAAA,CAAAM,aAAA,CAACH,KAAK;EACJK,SAAS,EAAC,qBAAqB;EAC/BC,KAAK,EAAE;IACLE,eAAe,EAAE;EACnB;AAAE,gBAEFX,KAAA,CAAAM,aAAA,CAACL,KAAK;EACJW,GAAG,EAAER,QAAS;EACdK,KAAK,EAAE;IACLI,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE,MAAM;IACbC,SAAS,EAAE,OAAO;IAClBC,SAAS,EAAE,SAAS;IACpBC,cAAc,EAAE;EAClB,CAAE;EACFC,GAAG,EAAC;AAA2I,CAChJ,CACI,CACJ,CACN","ignoreList":[]}

package/dist/components/DropDownToggler.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownToggler.js","names":["React","useContext","Avatar","DesktopUserMenuTogglePropTypes","AppContext","DropDownToggler","avatar","authenticatedUser","createElement","size","src","alt","username","propTypes"],"sources":["../../src/components/DropDownToggler.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport Avatar from '@edx/frontend-component-header/dist/Avatar';\nimport { DesktopUserMenuTogglePropTypes } from '@edx/frontend-component-header/dist/desktop-header/DesktopUserMenuToggle';\nimport { AppContext } from '@edx/frontend-platform/react';\nimport { AppContextInterface } from '../types';\n\nexport const DropDownToggler = ({ avatar }): { avatar: string } => {\n  const { authenticatedUser } = useContext<AppContextInterface>(AppContext);\n  return (\n    <Avatar size=\"1.5em\" src={avatar} alt={authenticatedUser.username} />\n  );\n};\n\nDropDownToggler.propTypes = DesktopUserMenuTogglePropTypes;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,4CAA4C;AAC/D,SAASC,8BAA8B,QAAQ,0EAA0E;AACzH,SAASC,UAAU,QAAQ,8BAA8B;AAGzD,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC;AAAO,CAAC,KAAyB;EACjE,MAAM;IAAEC;EAAkB,CAAC,GAAGN,UAAU,CAAsBG,UAAU,CAAC;EACzE,oBACEJ,KAAA,CAAAQ,aAAA,CAACN,MAAM;IAACO,IAAI,EAAC,OAAO;IAACC,GAAG,EAAEJ,MAAO;IAACK,GAAG,EAAEJ,iBAAiB,CAACK;EAAS,CAAE,CAAC;AAEzE,CAAC;AAEDP,eAAe,CAACQ,SAAS,GAAGV,8BAA8B","ignoreList":[]}
+{"version":3,"file":"DropDownToggler.js","names":["React","useContext","Avatar","DesktopUserMenuTogglePropTypes","AppContext","DropDownToggler","avatar","authenticatedUser","createElement","size","src","alt","username","propTypes"],"sources":["../../src/components/DropDownToggler.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport Avatar from '@edx/frontend-component-header/dist/Avatar';\nimport { DesktopUserMenuTogglePropTypes } from '@edx/frontend-component-header/dist/desktop-header/DesktopUserMenuToggle';\nimport { AppContext } from '@edx/frontend-platform/react';\n\nexport const DropDownToggler = ({ avatar }) => {\n  const { authenticatedUser } = useContext(AppContext);\n  return (\n    <Avatar size=\"1.5em\" src={avatar} alt={authenticatedUser.username} />\n  );\n};\n\nDropDownToggler.propTypes = DesktopUserMenuTogglePropTypes;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,4CAA4C;AAC/D,SAASC,8BAA8B,QAAQ,0EAA0E;AACzH,SAASC,UAAU,QAAQ,8BAA8B;AAEzD,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC;AAAO,CAAC,KAAK;EAC7C,MAAM;IAAEC;EAAkB,CAAC,GAAGN,UAAU,CAACG,UAAU,CAAC;EACpD,oBACEJ,KAAA,CAAAQ,aAAA,CAACN,MAAM;IAACO,IAAI,EAAC,OAAO;IAACC,GAAG,EAAEJ,MAAO;IAACK,GAAG,EAAEJ,iBAAiB,CAACK;EAAS,CAAE,CAAC;AAEzE,CAAC;AAEDP,eAAe,CAACQ,SAAS,GAAGV,8BAA8B","ignoreList":[]}

package/dist/components/MenuWrapper.js

@@ -17,7 +17,7 @@ export const MenuWrapper = ({
     size: "1.5rem"
   }), /*#__PURE__*/React.createElement("div", {
     className: "pl-2 align-self-center"
-  }, authenticatedUser.username))), /*#__PURE__*/React.createElement("div", {
+  }, authenticatedUser?.username || 'Account'))), /*#__PURE__*/React.createElement("div", {
     className: "dropdown-divider"
   }), component);
 };

package/dist/components/MenuWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuWrapper.js","names":["React","useContext","AppContext","Avatar","MenuWrapper","component","authenticatedUser","createElement","Fragment","className","role","size","username"],"sources":["../../src/components/MenuWrapper.tsx"],"sourcesContent":["import React, { ReactElement, useContext } from 'react';\nimport { AppContext } from '@edx/frontend-platform/react';\nimport Avatar from '@edx/frontend-component-header/dist/Avatar';\nimport { AppContextInterface } from '../types';\n\nexport const MenuWrapper = ({ component }: { component: ReactElement }) => {\n  const { authenticatedUser } = useContext<AppContextInterface>(AppContext);\n  return (\n    <>\n      <div className=\"dropdown-header profile-label\" role=\"heading\" aria-level={1}>\n        <div className=\"d-flex\">\n          <Avatar size=\"1.5rem\" />\n          <div className=\"pl-2 align-self-center\">{authenticatedUser.username}</div>\n        </div>\n      </div>\n      <div className=\"dropdown-divider\" />\n      {component}\n    </>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AACvD,SAASC,UAAU,QAAQ,8BAA8B;AACzD,OAAOC,MAAM,MAAM,4CAA4C;AAG/D,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAAEC;AAAuC,CAAC,KAAK;EACzE,MAAM;IAAEC;EAAkB,CAAC,GAAGL,UAAU,CAAsBC,UAAU,CAAC;EACzE,oBACEF,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAQ,QAAA,qBACER,KAAA,CAAAO,aAAA;IAAKE,SAAS,EAAC,+BAA+B;IAACC,IAAI,EAAC,SAAS;IAAC,cAAY;EAAE,gBAC1EV,KAAA,CAAAO,aAAA;IAAKE,SAAS,EAAC;EAAQ,gBACrBT,KAAA,CAAAO,aAAA,CAACJ,MAAM;IAACQ,IAAI,EAAC;EAAQ,CAAE,CAAC,eACxBX,KAAA,CAAAO,aAAA;IAAKE,SAAS,EAAC;EAAwB,GAAEH,iBAAiB,CAACM,QAAc,CACtE,CACF,CAAC,eACNZ,KAAA,CAAAO,aAAA;IAAKE,SAAS,EAAC;EAAkB,CAAE,CAAC,EACnCJ,SACD,CAAC;AAEP,CAAC","ignoreList":[]}
+{"version":3,"file":"MenuWrapper.js","names":["React","useContext","AppContext","Avatar","MenuWrapper","component","authenticatedUser","createElement","Fragment","className","role","size","username"],"sources":["../../src/components/MenuWrapper.tsx"],"sourcesContent":["import React, { ReactElement, useContext } from 'react';\nimport { AppContext } from '@edx/frontend-platform/react';\nimport Avatar from '@edx/frontend-component-header/dist/Avatar';\n\nexport const MenuWrapper = ({ component }: { component: ReactElement }) => {\n  const { authenticatedUser } = useContext(AppContext);\n  return (\n    <>\n      <div className=\"dropdown-header profile-label\" role=\"heading\" aria-level={1}>\n        <div className=\"d-flex\">\n          <Avatar size=\"1.5rem\" />\n          <div className=\"pl-2 align-self-center\">{authenticatedUser?.username || 'Account'}</div>\n        </div>\n      </div>\n      <div className=\"dropdown-divider\" />\n      {component}\n    </>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AACvD,SAASC,UAAU,QAAQ,8BAA8B;AACzD,OAAOC,MAAM,MAAM,4CAA4C;AAE/D,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAAEC;AAAuC,CAAC,KAAK;EACzE,MAAM;IAAEC;EAAkB,CAAC,GAAGL,UAAU,CAACC,UAAU,CAAC;EACpD,oBACEF,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAQ,QAAA,qBACER,KAAA,CAAAO,aAAA;IAAKE,SAAS,EAAC,+BAA+B;IAACC,IAAI,EAAC,SAAS;IAAC,cAAY;EAAE,gBAC1EV,KAAA,CAAAO,aAAA;IAAKE,SAAS,EAAC;EAAQ,gBACrBT,KAAA,CAAAO,aAAA,CAACJ,MAAM;IAACQ,IAAI,EAAC;EAAQ,CAAE,CAAC,eACxBX,KAAA,CAAAO,aAAA;IAAKE,SAAS,EAAC;EAAwB,GAAEH,iBAAiB,EAAEM,QAAQ,IAAI,SAAe,CACpF,CACF,CAAC,eACNZ,KAAA,CAAAO,aAAA;IAAKE,SAAS,EAAC;EAAkB,CAAE,CAAC,EACnCJ,SACD,CAAC;AAEP,CAAC","ignoreList":[]}

package/dist/index.js

@@ -1,24 +1,13 @@
+// @ts-ignore
 import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-import { WhiteLogo } from './components/WhiteLogo';
 import { MenuWrapper } from './components/MenuWrapper';
 import { SandboxFooter } from './components/SandboxFooter';
 import { DropDownToggler } from './components/DropDownToggler';
 import { CatalogBanner } from './components/CatalogBanner';
-export { WhiteLogo, MenuWrapper, SandboxFooter, DropDownToggler, CatalogBanner };
+export { MenuWrapper, SandboxFooter, DropDownToggler, CatalogBanner };
 // Example slot settings you can use in your deployment. You may be able to import these
 // for quick development usage.
 export const slotSettings = {
-  logo_slot: {
-    keepDefault: false,
-    plugins: [{
-      op: PLUGIN_OPERATIONS.Insert,
-      widget: {
-        id: 'custom_logo',
-        type: DIRECT_PLUGIN,
-        RenderWidget: WhiteLogo
-      }
-    }]
-  },
   'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {
     keepDefault: false,
     plugins: [{
@@ -59,7 +48,7 @@ export const slotSettings = {
       }
     }]
   },
-  "org.openedx.frontend.catalog.home_page.banner": {
+  'org.openedx.frontend.catalog.home_page.banner': {
     plugins: [{
       op: PLUGIN_OPERATIONS.Hide,
       widgetId: 'default_contents'

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DIRECT_PLUGIN","PLUGIN_OPERATIONS","WhiteLogo","MenuWrapper","SandboxFooter","DropDownToggler","CatalogBanner","slotSettings","logo_slot","keepDefault","plugins","op","Insert","widget","id","type","RenderWidget","desktop_user_menu_slot","Wrap","widgetId","wrapper","mobile_user_menu_slot","footer_slot","Hide"],"sources":["../src/index.ts"],"sourcesContent":["import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';\nimport { WhiteLogo } from './components/WhiteLogo';\nimport { MenuWrapper } from './components/MenuWrapper';\nimport { SandboxFooter } from './components/SandboxFooter';\nimport { DropDownToggler } from './components/DropDownToggler';\nimport { CatalogBanner } from './components/CatalogBanner';\nexport {\n  WhiteLogo, MenuWrapper, SandboxFooter, DropDownToggler, CatalogBanner\n};\n// Example slot settings you can use in your deployment. You may be able to import these\n// for quick development usage.\nexport const slotSettings = {\n  logo_slot: {\n    keepDefault: false,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_logo',\n          type: DIRECT_PLUGIN,\n          RenderWidget: WhiteLogo,\n        },\n      },\n    ],\n  },\n  'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {\n    keepDefault: false,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_desktop_toggle',\n          type: DIRECT_PLUGIN,\n          RenderWidget: DropDownToggler,\n        },\n      },\n    ],\n  },\n  desktop_user_menu_slot: {\n    keepDefault: true,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Wrap,\n        widgetId: 'default_contents',\n        wrapper: MenuWrapper,\n      },\n    ],\n  },\n  mobile_user_menu_slot: {\n    keepDefault: true,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Wrap,\n        widgetId: 'default_contents',\n        wrapper: MenuWrapper,\n      },\n    ],\n  },\n  footer_slot: {\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Hide,\n        widgetId: 'default_contents',\n      },\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_footer',\n          type: DIRECT_PLUGIN,\n          RenderWidget: SandboxFooter,\n        },\n      },\n    ],\n  },\n  \"org.openedx.frontend.catalog.home_page.banner\": {\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Hide,\n        widgetId: 'default_contents',\n      },\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_catalog_banner',\n          type: DIRECT_PLUGIN,\n          RenderWidget: CatalogBanner,\n        },\n      },\n    ],\n  }\n};\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,iBAAiB,QAAQ,oCAAoC;AACrF,SAASC,SAAS,QAAQ,wBAAwB;AAClD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SACEJ,SAAS,EAAEC,WAAW,EAAEC,aAAa,EAAEC,eAAe,EAAEC,aAAa;AAEvE;AACA;AACA,OAAO,MAAMC,YAAY,GAAG;EAC1BC,SAAS,EAAE;IACTC,WAAW,EAAE,KAAK;IAClBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAEV,iBAAiB,CAACW,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,aAAa;QACjBC,IAAI,EAAEf,aAAa;QACnBgB,YAAY,EAAEd;MAChB;IACF,CAAC;EAEL,CAAC;EACD,gEAAgE,EAAE;IAChEO,WAAW,EAAE,KAAK;IAClBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAEV,iBAAiB,CAACW,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,uBAAuB;QAC3BC,IAAI,EAAEf,aAAa;QACnBgB,YAAY,EAAEX;MAChB;IACF,CAAC;EAEL,CAAC;EACDY,sBAAsB,EAAE;IACtBR,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAEV,iBAAiB,CAACiB,IAAI;MAC1BC,QAAQ,EAAE,kBAAkB;MAC5BC,OAAO,EAAEjB;IACX,CAAC;EAEL,CAAC;EACDkB,qBAAqB,EAAE;IACrBZ,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAEV,iBAAiB,CAACiB,IAAI;MAC1BC,QAAQ,EAAE,kBAAkB;MAC5BC,OAAO,EAAEjB;IACX,CAAC;EAEL,CAAC;EACDmB,WAAW,EAAE;IACXZ,OAAO,EAAE,CACP;MACEC,EAAE,EAAEV,iBAAiB,CAACsB,IAAI;MAC1BJ,QAAQ,EAAE;IACZ,CAAC,EACD;MACER,EAAE,EAAEV,iBAAiB,CAACW,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,eAAe;QACnBC,IAAI,EAAEf,aAAa;QACnBgB,YAAY,EAAEZ;MAChB;IACF,CAAC;EAEL,CAAC;EACD,+CAA+C,EAAE;IAC/CM,OAAO,EAAE,CACP;MACEC,EAAE,EAAEV,iBAAiB,CAACsB,IAAI;MAC1BJ,QAAQ,EAAE;IACZ,CAAC,EACD;MACER,EAAE,EAAEV,iBAAiB,CAACW,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,uBAAuB;QAC3BC,IAAI,EAAEf,aAAa;QACnBgB,YAAY,EAAEV;MAChB;IACF,CAAC;EAEL;AACF,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["DIRECT_PLUGIN","PLUGIN_OPERATIONS","MenuWrapper","SandboxFooter","DropDownToggler","CatalogBanner","slotSettings","keepDefault","plugins","op","Insert","widget","id","type","RenderWidget","desktop_user_menu_slot","Wrap","widgetId","wrapper","mobile_user_menu_slot","footer_slot","Hide"],"sources":["../src/index.ts"],"sourcesContent":["// @ts-ignore\nimport { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';\nimport { MenuWrapper } from './components/MenuWrapper';\nimport { SandboxFooter } from './components/SandboxFooter';\nimport { DropDownToggler } from './components/DropDownToggler';\nimport { CatalogBanner } from './components/CatalogBanner';\n\nexport {\n  MenuWrapper, SandboxFooter, DropDownToggler, CatalogBanner,\n};\n// Example slot settings you can use in your deployment. You may be able to import these\n// for quick development usage.\nexport const slotSettings = {\n  'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {\n    keepDefault: false,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_desktop_toggle',\n          type: DIRECT_PLUGIN,\n          RenderWidget: DropDownToggler,\n        },\n      },\n    ],\n  },\n  desktop_user_menu_slot: {\n    keepDefault: true,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Wrap,\n        widgetId: 'default_contents',\n        wrapper: MenuWrapper,\n      },\n    ],\n  },\n  mobile_user_menu_slot: {\n    keepDefault: true,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Wrap,\n        widgetId: 'default_contents',\n        wrapper: MenuWrapper,\n      },\n    ],\n  },\n  footer_slot: {\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Hide,\n        widgetId: 'default_contents',\n      },\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_footer',\n          type: DIRECT_PLUGIN,\n          RenderWidget: SandboxFooter,\n        },\n      },\n    ],\n  },\n  'org.openedx.frontend.catalog.home_page.banner': {\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Hide,\n        widgetId: 'default_contents',\n      },\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_catalog_banner',\n          type: DIRECT_PLUGIN,\n          RenderWidget: CatalogBanner,\n        },\n      },\n    ],\n  },\n};\n"],"mappings":"AAAA;AACA,SAASA,aAAa,EAAEC,iBAAiB,QAAQ,oCAAoC;AACrF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SACEH,WAAW,EAAEC,aAAa,EAAEC,eAAe,EAAEC,aAAa;AAE5D;AACA;AACA,OAAO,MAAMC,YAAY,GAAG;EAC1B,gEAAgE,EAAE;IAChEC,WAAW,EAAE,KAAK;IAClBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACS,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,uBAAuB;QAC3BC,IAAI,EAAEb,aAAa;QACnBc,YAAY,EAAEV;MAChB;IACF,CAAC;EAEL,CAAC;EACDW,sBAAsB,EAAE;IACtBR,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACe,IAAI;MAC1BC,QAAQ,EAAE,kBAAkB;MAC5BC,OAAO,EAAEhB;IACX,CAAC;EAEL,CAAC;EACDiB,qBAAqB,EAAE;IACrBZ,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACe,IAAI;MAC1BC,QAAQ,EAAE,kBAAkB;MAC5BC,OAAO,EAAEhB;IACX,CAAC;EAEL,CAAC;EACDkB,WAAW,EAAE;IACXZ,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACoB,IAAI;MAC1BJ,QAAQ,EAAE;IACZ,CAAC,EACD;MACER,EAAE,EAAER,iBAAiB,CAACS,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,eAAe;QACnBC,IAAI,EAAEb,aAAa;QACnBc,YAAY,EAAEX;MAChB;IACF,CAAC;EAEL,CAAC;EACD,+CAA+C,EAAE;IAC/CK,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACoB,IAAI;MAC1BJ,QAAQ,EAAE;IACZ,CAAC,EACD;MACER,EAAE,EAAER,iBAAiB,CAACS,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,uBAAuB;QAC3BC,IAAI,EAAEb,aAAa;QACnBc,YAAY,EAAET;MAChB;IACF,CAAC;EAEL;AACF,CAAC","ignoreList":[]}

package/dist/types.d.js

@@ -1,2 +1,2 @@
-export {};
+
 //# sourceMappingURL=types.d.js.map

package/dist/types.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.js","names":[],"sources":["../src/types.d.ts"],"sourcesContent":["export interface AppContextInterface {\n  config: {\n    LMS_BASE_URL: string,\n    LOGO_WHITE_URL: string,\n    SITE_NAME: string,\n  },\n  authenticatedUser: {\n    username: string,\n  }\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.d.js","names":[],"sources":["../src/types.d.ts"],"sourcesContent":["declare module '*.png';\n"],"mappings":"","ignoreList":[]}

package/package.json

@@ -1,43 +1,43 @@
 {
-  "name": "@opencraft/frontend-plugin-sandbox",
-  "version": "1.1.0",
-  "description": "Plugin for custom components in OpenCraft's sandboxes",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/open-craft/frontend-plugin-sandbox.git"
-  },
-  "browserslist": [
-    "extends @edx/browserslist-config"
-  ],
-  "main": "dist/index.js",
-  "author": "OpenCraft",
-  "license": "AGPL-3.0",
-  "homepage": "https://github.com/open-craft/frontend-plugin-sandbox#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "bugs": {
-    "url": "https://github.com/open-craft/frontend-plugin-sandbox/issues"
-  },
-  "peerDependencies": {
-    "@edx/frontend-component-header": ">=6.6.0",
-    "@edx/frontend-platform": ">=7.0.0",
-    "@openedx/frontend-build": ">=13.0.0",
-    "@openedx/frontend-plugin-framework": "^1.2.1",
-    "@openedx/paragon": "^23.14.2",
-    "@types/react": ">=17.0.39",
-    "classnames": "*",
-    "react": ">=17.0.0"
-  },
-  "devDependencies": {
-    "@edx/browserslist-config": "^1.1.1",
-    "@openedx/frontend-build": "^14.2.0"
-  },
-  "scripts": {
-    "postinstall": "npm run build",
-    "build": "fedx-scripts babel -x .ts,.tsx src --out-dir dist --source-maps --ignore **/*.test.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files",
-    "lint": "fedx-scripts eslint --ext .ts --ext .tsx src/",
-    "lint:fix": "fedx-scripts eslint --fix --ext .ts --ext .tsx src/",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
-  }
-}
+    "name": "@opencraft/frontend-plugin-sandbox",
+    "version": "1.2.0-alpha.0",
+    "description": "Plugin for custom headers and footers in OpenCraft's sandboxes",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/open-craft/frontend-plugin-sandbox.git"
+    },
+    "browserslist": [
+        "extends @edx/browserslist-config"
+    ],
+    "main": "dist/index.js",
+    "scripts": {
+        "postinstall": "pnpm run build",
+        "build": "fedx-scripts babel -x .ts,.tsx src --out-dir dist --source-maps --ignore **/*.test.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files",
+        "lint": "fedx-scripts eslint --ext .ts --ext .tsx src/",
+        "lint:fix": "fedx-scripts eslint --fix --ext .ts --ext .tsx src/",
+        "test": "fedx-scripts jest --coverage --passWithNoTests"
+    },
+    "author": "OpenCraft",
+    "license": "AGPL-3.0",
+    "homepage": "https://github.com/open-craft/frontend-plugin-sandbox#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "bugs": {
+        "url": "https://github.com/open-craft/frontend-plugin-sandbox/issues"
+    },
+    "peerDependencies": {
+        "@edx/frontend-component-header": ">=6.6.0",
+        "@edx/frontend-platform": ">=8.0.0",
+        "@openedx/frontend-plugin-framework": ">=1.2.1",
+        "@openedx/paragon": ">=23.14.2",
+        "@types/react": "^18.0.0",
+        "classnames": "*",
+        "react": "^18.0.0"
+    },
+    "devDependencies": {
+        "@edx/browserslist-config": ">=1.1.1",
+        "@openedx/frontend-build": ">=14.6.6",
+        "typescript": "^5.2.0"
+    }
+}

package/src/components/CatalogBanner.tsx

@@ -1,46 +1,46 @@
-import React from "react";
-import { Image, Row, Stack } from "@openedx/paragon";
-import bannerBg from "../assets/banner-bg.png";
+import React from 'react';
+import { Image, Row, Stack } from '@openedx/paragon';
+import bannerBg from '../assets/banner-bg.png';
 
 export const CatalogBanner = () => (
-    <Row
-        direction="horizontal"
-        className="bg-primary"
+  <Row
+    direction="horizontal"
+    className="bg-primary"
+  >
+    <Stack
+      direction="vertical"
+      className="justify-content-center px-6"
+      style={{ maxWidth: '55rem' }}
     >
-        <Stack
-            direct="vertical"
-            className="justify-content-center px-6"
-            style={{ maxWidth: "55rem" }}
-        >
-            <h1 className="display-2 text-light-100">
-                You’re viewing a live
-                <span className="text-brand-500">
-                    {" Open edX® "}
-                </span>
-                demo
-            </h1>
-            <p className="h4 text-light-100 ">
-                OpenClass is a demo site by OpenCraft where you can explore the
-                Open edX platform as a learner or course author.
-            </p>
-        </Stack>
-        <Stack
-            className="justify-content-end"
-            style={{
-                backgroundImg: "url(../assets/banner-bg.png)",
-            }}
-        >
-            <Image
-                src={bannerBg}
-                style={{
-                    height: "100%",
-                    width: "100%",
-                    maxHeight: "550px",
-                    objectFit: "contain",
-                    objectPosition: "right top",
-                }}
-                alt="illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
-            />
-        </Stack>
-    </Row>
+      <h1 className="display-2 text-light-100">
+        You’re viewing a live
+        <span className="text-brand-500">
+          {' Open edX® '}
+        </span>
+        demo
+      </h1>
+      <p className="h4 text-light-100 ">
+        OpenClass is a demo site by OpenCraft where you can explore the
+        Open edX platform as a learner or course author.
+      </p>
+    </Stack>
+    <Stack
+      className="justify-content-end"
+      style={{
+        backgroundImage: 'url(../assets/banner-bg.png)',
+      }}
+    >
+      <Image
+        src={bannerBg}
+        style={{
+          height: '100%',
+          width: '100%',
+          maxHeight: '550px',
+          objectFit: 'contain',
+          objectPosition: 'right top',
+        }}
+        alt="illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
+      />
+    </Stack>
+  </Row>
 );

package/src/components/DropDownToggler.tsx

@@ -2,10 +2,9 @@ import React, { useContext } from 'react';
 import Avatar from '@edx/frontend-component-header/dist/Avatar';
 import { DesktopUserMenuTogglePropTypes } from '@edx/frontend-component-header/dist/desktop-header/DesktopUserMenuToggle';
 import { AppContext } from '@edx/frontend-platform/react';
-import { AppContextInterface } from '../types';
 
-export const DropDownToggler = ({ avatar }): { avatar: string } => {
-  const { authenticatedUser } = useContext<AppContextInterface>(AppContext);
+export const DropDownToggler = ({ avatar }) => {
+  const { authenticatedUser } = useContext(AppContext);
   return (
     <Avatar size="1.5em" src={avatar} alt={authenticatedUser.username} />
   );

package/src/components/MenuWrapper.tsx

@@ -1,16 +1,15 @@
 import React, { ReactElement, useContext } from 'react';
 import { AppContext } from '@edx/frontend-platform/react';
 import Avatar from '@edx/frontend-component-header/dist/Avatar';
-import { AppContextInterface } from '../types';
 
 export const MenuWrapper = ({ component }: { component: ReactElement }) => {
-  const { authenticatedUser } = useContext<AppContextInterface>(AppContext);
+  const { authenticatedUser } = useContext(AppContext);
   return (
     <>
       <div className="dropdown-header profile-label" role="heading" aria-level={1}>
         <div className="d-flex">
           <Avatar size="1.5rem" />
-          <div className="pl-2 align-self-center">{authenticatedUser.username}</div>
+          <div className="pl-2 align-self-center">{authenticatedUser?.username || 'Account'}</div>
         </div>
       </div>
       <div className="dropdown-divider" />

package/src/index.ts

@@ -1,28 +1,15 @@
 import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-import { WhiteLogo } from './components/WhiteLogo';
 import { MenuWrapper } from './components/MenuWrapper';
 import { SandboxFooter } from './components/SandboxFooter';
 import { DropDownToggler } from './components/DropDownToggler';
 import { CatalogBanner } from './components/CatalogBanner';
+
 export {
-  WhiteLogo, MenuWrapper, SandboxFooter, DropDownToggler, CatalogBanner
+  MenuWrapper, SandboxFooter, DropDownToggler, CatalogBanner,
 };
 // Example slot settings you can use in your deployment. You may be able to import these
 // for quick development usage.
 export const slotSettings = {
-  logo_slot: {
-    keepDefault: false,
-    plugins: [
-      {
-        op: PLUGIN_OPERATIONS.Insert,
-        widget: {
-          id: 'custom_logo',
-          type: DIRECT_PLUGIN,
-          RenderWidget: WhiteLogo,
-        },
-      },
-    ],
-  },
   'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {
     keepDefault: false,
     plugins: [
@@ -72,7 +59,7 @@ export const slotSettings = {
       },
     ],
   },
-  "org.openedx.frontend.catalog.home_page.banner": {
+  'org.openedx.frontend.catalog.home_page.banner': {
     plugins: [
       {
         op: PLUGIN_OPERATIONS.Hide,
@@ -87,5 +74,5 @@ export const slotSettings = {
         },
       },
     ],
-  }
+  },
 };

package/src/types.d.ts

@@ -1,10 +1 @@
-export interface AppContextInterface {
-  config: {
-    LMS_BASE_URL: string,
-    LOGO_WHITE_URL: string,
-    SITE_NAME: string,
-  },
-  authenticatedUser: {
-    username: string,
-  }
-}
+declare module '*.png';

package/tsconfig.json

@@ -1,13 +1,23 @@
 {
-  "extends": "@edx/typescript-config",
   "compilerOptions": {
-    "jsx": "react",
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
     "outDir": "dist",
-    "baseUrl": "./src",
-    "paths": {
-      "*": ["*"]
-    }
+    "skipLibCheck": true
   },
-  "include": ["*.js", ".eslintrc.js", "src/**/*", ],
-  "exclude": ["dist", "node_modules"]
+  "include": ["src/**/*"],
+  "exclude": ["dist/*", "node_modules/*"]
 }

package/src/components/WhiteLogo.tsx

@@ -1,16 +0,0 @@
-import React, { useContext } from 'react';
-import { AppContext } from '@edx/frontend-platform/react';
-import { ensureConfig } from '@edx/frontend-platform';
-
-ensureConfig([
-  'LOGO_WHITE_URL',
-], 'White Header Logo');
-
-export const WhiteLogo = () => {
-  const { config } = useContext<AppContextInterface>(AppContext);
-  return (
-    <a className="logo" href={`${config.LMS_BASE_URL}/dashboard`}>
-      <img className="d-block" src={config.LOGO_WHITE_URL} alt={config.SITE_NAME} />
-    </a>
-  );
-};