npm - @opencraft/frontend-plugin-sandbox - Versions diffs - 1.1.0 - Mend

@opencraft/frontend-plugin-sandbox 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/.github/workflows/npm-package-for-pr.yaml +56 -0
package/.nvmrc +1 -0
package/README.md +163 -0
package/babel.config.js +6 -0
package/dist/assets/banner-bg.png +0 -0
package/dist/components/CatalogBanner.js +35 -0
package/dist/components/CatalogBanner.js.map +1 -0
package/dist/components/DropDownToggler.js +18 -0
package/dist/components/DropDownToggler.js.map +1 -0
package/dist/components/MenuWrapper.js +24 -0
package/dist/components/MenuWrapper.js.map +1 -0
package/dist/components/SandboxFooter.js +35 -0
package/dist/components/SandboxFooter.js.map +1 -0
package/dist/components/WhiteLogo.js +18 -0
package/dist/components/WhiteLogo.js.map +1 -0
package/dist/index.js +76 -0
package/dist/index.js.map +1 -0
package/dist/types.d.js +2 -0
package/dist/types.d.js.map +1 -0
package/package.json +43 -0
package/src/assets/banner-bg.png +0 -0
package/src/components/CatalogBanner.tsx +46 -0
package/src/components/DropDownToggler.tsx +14 -0
package/src/components/MenuWrapper.tsx +20 -0
package/src/components/SandboxFooter.tsx +25 -0
package/src/components/WhiteLogo.tsx +16 -0
package/src/index.ts +91 -0
package/src/types.d.ts +10 -0
package/tsconfig.json +13 -0

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

@@ -0,0 +1,56 @@
+name: Build NPM package and upload as artifact to PR for testing
+on:
+  pull_request:
+jobs:
+  build-and-pack:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Pack package
+        run: npm pack
+      - name: Upload package
+        id: upload-package
+        uses: actions/upload-artifact@v7
+        with:
+          name: frontend-plugin-sandbox-pr${{ github.event.pull_request.number }}
+          path: "*.tgz"
+          archive: false
+          retention-days: 21
+      - name: Comment with link to artifact
+        uses: thollander/actions-comment-pull-request@v3
+        with:
+          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'
+            ```
+            You can test this on a local tutor environment using the following plugin code:
+            ```python
+            hooks.Filters.ENV_PATCHES.add_item(
+                (
+                    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'
+                """,
+                )
+            )
+            ```
+            If you face issues with installing from GitHub, you can install the packaged tgz file available [here](${{ steps.upload-package.outputs.artifact-url }}).
+          comment-tag: artifact-link

package/.nvmrc ADDED Viewed

	@@ -0,0 +1 @@
1	+ 20

package/README.md ADDED Viewed

@@ -0,0 +1,163 @@
+# frontend-plugin-sandbox
+## Purpose
+This repo contains plug-in code for OpenCraft's sandboxes.
+## Installation
+The package can be installed from npm using:
+```bash
+npm install @opencraft/frontend-plugin-sandbox-headers-and-footers
+```
+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'
+```
+## Usage
+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";
+const config = {
+    pluginSlots: slotSettings,
+};
+export default config;
+```
+For installation using Tutor you can use the following code as reference:
+```python
+from tutor import hooks
+from tutormfe.hooks import PLUGIN_SLOTS
+for mfe_app in ["account", "discussions", "learner-dashboard", "learning", "profile", "catalog"]:
+    hooks.Filters.ENV_PATCHES.add_item(
+        (
+            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'
+    """,
+        )
+    )
+    hooks.Filters.ENV_PATCHES.add_item(
+        (
+            f"mfe-env-config-runtime-definitions-{mfe_app}",
+            """
+        const { WhiteLogo, MenuWrapper, SandboxFooter } = await import(
+            /* webpackFetchPriority: "eager" */
+            '@opencraft/frontend-plugin-sandbox-headers-and-footers'
+        );
+        """,
+        )
+    )
+    PLUGIN_SLOTS.add_items(
+        [
+            (
+                mfe_app,
+                "org.openedx.frontend.layout.footer.v1",
+                """
+                    {
+                      op: PLUGIN_OPERATIONS.Hide,
+                      widgetId: 'default_contents',
+                    }""",
+            ),
+            (
+                mfe_app,
+                "org.openedx.frontend.layout.footer.v1",
+                """
+                {
+                  op: PLUGIN_OPERATIONS.Insert,
+                  widget: {
+                    id: 'custom_footer',
+                    type: DIRECT_PLUGIN,
+                    RenderWidget: SandboxFooter,
+                  },
+                }""",
+            ),
+            (
+                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",
+                """
+            {
+              op: PLUGIN_OPERATIONS.Wrap,
+              widgetId: 'default_contents',
+              wrapper: MenuWrapper,
+            }""",
+            ),
+            (
+                mfe_app,
+                "org.openedx.frontend.layout.header_mobile_user_menu.v1",
+                """
+            {
+              op: PLUGIN_OPERATIONS.Wrap,
+              widgetId: 'default_contents',
+              wrapper: MenuWrapper,
+            }""",
+            ),
+        ]
+    )
+hooks.Filters.ENV_PATCHES.add_item(
+        (
+            f"mfe-env-config-runtime-definitions-catalog",
+            """
+            const { CatalogBanner } = await import('@opencraft/frontend-plugin-sandbox-headers-and-footers');
+            """,
+        )
+    )
+PLUGIN_SLOTS.add_items(
+        [
+            (
+                "catalog",
+                "org.openedx.frontend.catalog.home_page.banner",
+                """
+                    {
+                      op: PLUGIN_OPERATIONS.Hide,
+                      widgetId: 'default_contents',
+                    }""",
+            ), (
+                "catalog",
+                "org.openedx.frontend.catalog.home_page.banner",
+                """
+                    {
+                      op: PLUGIN_OPERATIONS.Insert,
+                      widget: {
+                        id: "opencraft_banner",
+                        type: DIRECT_PLUGIN,
+                        RenderWidget: CatalogBanner,
+                      },
+                    }""",
+            ),
+        ]
+)
+```

package/babel.config.js ADDED Viewed

@@ -0,0 +1,6 @@
+const { createConfig } = require('@openedx/frontend-build');
+const config = createConfig('babel-preserve-modules');
+config.presets.push('@babel/preset-typescript');
+module.exports = config;

package/dist/assets/banner-bg.png ADDED Viewed

Binary file

package/dist/components/CatalogBanner.js ADDED Viewed

@@ -0,0 +1,35 @@
+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",
+  className: "justify-content-center px-6",
+  style: {
+    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", {
+  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)"
+  }
+}, /*#__PURE__*/React.createElement(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"
+})));
+//# sourceMappingURL=CatalogBanner.js.map

package/dist/components/CatalogBanner.js.map ADDED Viewed

@@ -0,0 +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":[]}

package/dist/components/DropDownToggler.js ADDED Viewed

@@ -0,0 +1,18 @@
+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';
+export const DropDownToggler = ({
+  avatar
+}) => {
+  const {
+    authenticatedUser
+  } = useContext(AppContext);
+  return /*#__PURE__*/React.createElement(Avatar, {
+    size: "1.5em",
+    src: avatar,
+    alt: authenticatedUser.username
+  });
+};
+DropDownToggler.propTypes = DesktopUserMenuTogglePropTypes;
+//# sourceMappingURL=DropDownToggler.js.map

package/dist/components/DropDownToggler.js.map ADDED Viewed

@@ -0,0 +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":[]}

package/dist/components/MenuWrapper.js ADDED Viewed

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import { AppContext } from '@edx/frontend-platform/react';
+import Avatar from '@edx/frontend-component-header/dist/Avatar';
+export const MenuWrapper = ({
+  component
+}) => {
+  const {
+    authenticatedUser
+  } = useContext(AppContext);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "dropdown-header profile-label",
+    role: "heading",
+    "aria-level": 1
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex"
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    size: "1.5rem"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "pl-2 align-self-center"
+  }, authenticatedUser.username))), /*#__PURE__*/React.createElement("div", {
+    className: "dropdown-divider"
+  }), component);
+};
+//# sourceMappingURL=MenuWrapper.js.map

package/dist/components/MenuWrapper.js.map ADDED Viewed

@@ -0,0 +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":[]}

package/dist/components/SandboxFooter.js ADDED Viewed

@@ -0,0 +1,35 @@
+import React from 'react';
+export const SandboxFooter = () => /*#__PURE__*/React.createElement("footer", {
+  className: "sandbox-footer py-5 px-5"
+}, /*#__PURE__*/React.createElement("div", {
+  className: "d-flex pb-3 flex-column flex-md-row"
+}, /*#__PURE__*/React.createElement("div", {
+  className: "text-center"
+}, /*#__PURE__*/React.createElement("img", {
+  alt: "OpenCraft Logo",
+  className: "sandbox-logo pt-1",
+  src: "https://opencraft.com/wp-content/uploads/opencraft-logo.png"
+})), /*#__PURE__*/React.createElement("div", {
+  className: "pr-5 d-none d-md-block"
+}), /*#__PURE__*/React.createElement("div", {
+  className: "pt-3 d-block d-md-none"
+}), /*#__PURE__*/React.createElement("div", {
+  className: "align-self-top text-center text-md-left"
+}, "Hosted by ", /*#__PURE__*/React.createElement("a", {
+  href: "https://opencraft.com/"
+}, "OpenCraft."), /*#__PURE__*/React.createElement("br", null), "A verified Open edX\xAE partner."), /*#__PURE__*/React.createElement("div", {
+  className: "flex-grow-1 text-right d-none d-md-block"
+}, /*#__PURE__*/React.createElement("img", {
+  className: "openedx-logo",
+  alt: "Powered by Open edX",
+  src: "https://openedx.org/wp-content/uploads/2025/07/Powered-by-Open-edX-WHITE.png"
+}))), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("div", {
+  className: "text-center d-block d-md-none my-4"
+}, /*#__PURE__*/React.createElement("img", {
+  className: "openedx-logo",
+  alt: "Powered by Open edX",
+  src: "https://openedx.org/wp-content/uploads/2025/07/Powered-by-Open-edX-WHITE.png"
+})), /*#__PURE__*/React.createElement("div", {
+  className: "text-center text-md-left"
+}, /*#__PURE__*/React.createElement("small", null, "\xA9 OpenCraft 2025  |  edX and Open edX\xAE are trademarks of edX Inc")));
+//# sourceMappingURL=SandboxFooter.js.map

package/dist/components/SandboxFooter.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SandboxFooter.js","names":["React","SandboxFooter","createElement","className","alt","src","href"],"sources":["../../src/components/SandboxFooter.tsx"],"sourcesContent":["import React from 'react';\n\nexport const SandboxFooter = () => (\n <footer className=\"sandbox-footer py-5 px-5\">\n <div className=\"d-flex pb-3 flex-column flex-md-row\">\n <div className=\"text-center\">\n <img alt=\"OpenCraft Logo\" className=\"sandbox-logo pt-1\" src=\"https://opencraft.com/wp-content/uploads/opencraft-logo.png\" />\n </div>\n <div className=\"pr-5 d-none d-md-block\" />\n <div className=\"pt-3 d-block d-md-none\" />\n <div className=\"align-self-top text-center text-md-left\">\n Hosted by <a href=\"https://opencraft.com/\">OpenCraft.</a><br />\n A verified Open edX® partner.\n </div>\n <div className=\"flex-grow-1 text-right d-none d-md-block\">\n <img className=\"openedx-logo\" alt=\"Powered by Open edX\" src=\"https://openedx.org/wp-content/uploads/2025/07/Powered-by-Open-edX-WHITE.png\" />\n </div>\n </div>\n <hr />\n <div className=\"text-center d-block d-md-none my-4\">\n <img className=\"openedx-logo\" alt=\"Powered by Open edX\" src=\"https://openedx.org/wp-content/uploads/2025/07/Powered-by-Open-edX-WHITE.png\" />\n </div>\n <div className=\"text-center text-md-left\"><small>© OpenCraft 2025 | edX and Open edX® are trademarks of edX Inc</small></div>\n </footer>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAO,MAAMC,aAAa,GAAGA,CAAA,kBAC3BD,KAAA,CAAAE,aAAA;EAAQC,SAAS,EAAC;AAA0B,gBAC1CH,KAAA,CAAAE,aAAA;EAAKC,SAAS,EAAC;AAAqC,gBAClDH,KAAA,CAAAE,aAAA;EAAKC,SAAS,EAAC;AAAa,gBAC1BH,KAAA,CAAAE,aAAA;EAAKE,GAAG,EAAC,gBAAgB;EAACD,SAAS,EAAC,mBAAmB;EAACE,GAAG,EAAC;AAA6D,CAAE,CACxH,CAAC,eACNL,KAAA,CAAAE,aAAA;EAAKC,SAAS,EAAC;AAAwB,CAAE,CAAC,eAC1CH,KAAA,CAAAE,aAAA;EAAKC,SAAS,EAAC;AAAwB,CAAE,CAAC,eAC1CH,KAAA,CAAAE,aAAA;EAAKC,SAAS,EAAC;AAAyC,GAAC,YAC7C,eAAAH,KAAA,CAAAE,aAAA;EAAGI,IAAI,EAAC;AAAwB,GAAC,YAAa,CAAC,eAAAN,KAAA,CAAAE,aAAA,WAAK,CAAC,oCAE5D,CAAC,eACNF,KAAA,CAAAE,aAAA;EAAKC,SAAS,EAAC;AAA0C,gBACvDH,KAAA,CAAAE,aAAA;EAAKC,SAAS,EAAC,cAAc;EAACC,GAAG,EAAC,qBAAqB;EAACC,GAAG,EAAC;AAA8E,CAAE,CACzI,CACF,CAAC,eACNL,KAAA,CAAAE,aAAA,WAAK,CAAC,eACNF,KAAA,CAAAE,aAAA;EAAKC,SAAS,EAAC;AAAoC,gBACjDH,KAAA,CAAAE,aAAA;EAAKC,SAAS,EAAC,cAAc;EAACC,GAAG,EAAC,qBAAqB;EAACC,GAAG,EAAC;AAA8E,CAAE,CACzI,CAAC,eACNL,KAAA,CAAAE,aAAA;EAAKC,SAAS,EAAC;AAA0B,gBAACH,KAAA,CAAAE,aAAA,gBAAO,wEAAgF,CAAM,CACjI,CACT","ignoreList":[]}

package/dist/components/WhiteLogo.js ADDED Viewed

@@ -0,0 +1,18 @@
+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(AppContext);
+  return /*#__PURE__*/React.createElement("a", {
+    className: "logo",
+    href: `${config.LMS_BASE_URL}/dashboard`
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "d-block",
+    src: config.LOGO_WHITE_URL,
+    alt: config.SITE_NAME
+  }));
+};
+//# sourceMappingURL=WhiteLogo.js.map

package/dist/components/WhiteLogo.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"WhiteLogo.js","names":["React","useContext","AppContext","ensureConfig","WhiteLogo","config","createElement","className","href","LMS_BASE_URL","src","LOGO_WHITE_URL","alt","SITE_NAME"],"sources":["../../src/components/WhiteLogo.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { AppContext } from '@edx/frontend-platform/react';\nimport { ensureConfig } from '@edx/frontend-platform';\n\nensureConfig([\n 'LOGO_WHITE_URL',\n], 'White Header Logo');\n\nexport const WhiteLogo = () => {\n const { config } = useContext<AppContextInterface>(AppContext);\n return (\n <a className=\"logo\" href={`${config.LMS_BASE_URL}/dashboard`}>\n <img className=\"d-block\" src={config.LOGO_WHITE_URL} alt={config.SITE_NAME} />\n </a>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,UAAU,QAAQ,8BAA8B;AACzD,SAASC,YAAY,QAAQ,wBAAwB;AAErDA,YAAY,CAAC,CACX,gBAAgB,CACjB,EAAE,mBAAmB,CAAC;AAEvB,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAM;IAAEC;EAAO,CAAC,GAAGJ,UAAU,CAAsBC,UAAU,CAAC;EAC9D,oBACEF,KAAA,CAAAM,aAAA;IAAGC,SAAS,EAAC,MAAM;IAACC,IAAI,EAAE,GAAGH,MAAM,CAACI,YAAY;EAAa,gBAC3DT,KAAA,CAAAM,aAAA;IAAKC,SAAS,EAAC,SAAS;IAACG,GAAG,EAAEL,MAAM,CAACM,cAAe;IAACC,GAAG,EAAEP,MAAM,CAACQ;EAAU,CAAE,CAC5E,CAAC;AAER,CAAC","ignoreList":[]}

package/dist/index.js ADDED Viewed

@@ -0,0 +1,76 @@
+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 };
+// 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: [{
+      op: PLUGIN_OPERATIONS.Insert,
+      widget: {
+        id: 'custom_desktop_toggle',
+        type: DIRECT_PLUGIN,
+        RenderWidget: DropDownToggler
+      }
+    }]
+  },
+  desktop_user_menu_slot: {
+    keepDefault: true,
+    plugins: [{
+      op: PLUGIN_OPERATIONS.Wrap,
+      widgetId: 'default_contents',
+      wrapper: MenuWrapper
+    }]
+  },
+  mobile_user_menu_slot: {
+    keepDefault: true,
+    plugins: [{
+      op: PLUGIN_OPERATIONS.Wrap,
+      widgetId: 'default_contents',
+      wrapper: MenuWrapper
+    }]
+  },
+  footer_slot: {
+    plugins: [{
+      op: PLUGIN_OPERATIONS.Hide,
+      widgetId: 'default_contents'
+    }, {
+      op: PLUGIN_OPERATIONS.Insert,
+      widget: {
+        id: 'custom_footer',
+        type: DIRECT_PLUGIN,
+        RenderWidget: SandboxFooter
+      }
+    }]
+  },
+  "org.openedx.frontend.catalog.home_page.banner": {
+    plugins: [{
+      op: PLUGIN_OPERATIONS.Hide,
+      widgetId: 'default_contents'
+    }, {
+      op: PLUGIN_OPERATIONS.Insert,
+      widget: {
+        id: 'custom_catalog_banner',
+        type: DIRECT_PLUGIN,
+        RenderWidget: CatalogBanner
+      }
+    }]
+  }
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

@@ -0,0 +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":[]}

package/dist/types.d.js ADDED Viewed

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

package/dist/types.d.js.map ADDED Viewed

	@@ -0,0 +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":[]}

package/package.json ADDED Viewed

@@ -0,0 +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"
+  }
+}

package/src/assets/banner-bg.png ADDED Viewed

Binary file

package/src/components/CatalogBanner.tsx ADDED Viewed

@@ -0,0 +1,46 @@
+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"
+    >
+        <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>
+);

package/src/components/DropDownToggler.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+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);
+  return (
+    <Avatar size="1.5em" src={avatar} alt={authenticatedUser.username} />
+  );
+};
+DropDownToggler.propTypes = DesktopUserMenuTogglePropTypes;

package/src/components/MenuWrapper.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+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);
+  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>
+      </div>
+      <div className="dropdown-divider" />
+      {component}
+    </>
+  );
+};

package/src/components/SandboxFooter.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import React from 'react';
+export const SandboxFooter = () => (
+  <footer className="sandbox-footer py-5 px-5">
+    <div className="d-flex pb-3 flex-column flex-md-row">
+      <div className="text-center">
+        <img alt="OpenCraft Logo" className="sandbox-logo pt-1" src="https://opencraft.com/wp-content/uploads/opencraft-logo.png" />
+      </div>
+      <div className="pr-5 d-none d-md-block" />
+      <div className="pt-3 d-block d-md-none" />
+      <div className="align-self-top text-center text-md-left">
+        Hosted by <a href="https://opencraft.com/">OpenCraft.</a><br />
+        A verified Open edX&reg; partner.
+      </div>
+      <div className="flex-grow-1 text-right d-none d-md-block">
+        <img className="openedx-logo" alt="Powered by Open edX" src="https://openedx.org/wp-content/uploads/2025/07/Powered-by-Open-edX-WHITE.png" />
+      </div>
+    </div>
+    <hr />
+    <div className="text-center d-block d-md-none my-4">
+      <img className="openedx-logo" alt="Powered by Open edX" src="https://openedx.org/wp-content/uploads/2025/07/Powered-by-Open-edX-WHITE.png" />
+    </div>
+    <div className="text-center text-md-left"><small>&copy; OpenCraft 2025  |  edX and Open edX&reg; are trademarks of edX Inc</small></div>
+  </footer>
+);

package/src/components/WhiteLogo.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+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>
+  );
+};

package/src/index.ts ADDED Viewed

@@ -0,0 +1,91 @@
+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
+};
+// 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: [
+      {
+        op: PLUGIN_OPERATIONS.Insert,
+        widget: {
+          id: 'custom_desktop_toggle',
+          type: DIRECT_PLUGIN,
+          RenderWidget: DropDownToggler,
+        },
+      },
+    ],
+  },
+  desktop_user_menu_slot: {
+    keepDefault: true,
+    plugins: [
+      {
+        op: PLUGIN_OPERATIONS.Wrap,
+        widgetId: 'default_contents',
+        wrapper: MenuWrapper,
+      },
+    ],
+  },
+  mobile_user_menu_slot: {
+    keepDefault: true,
+    plugins: [
+      {
+        op: PLUGIN_OPERATIONS.Wrap,
+        widgetId: 'default_contents',
+        wrapper: MenuWrapper,
+      },
+    ],
+  },
+  footer_slot: {
+    plugins: [
+      {
+        op: PLUGIN_OPERATIONS.Hide,
+        widgetId: 'default_contents',
+      },
+      {
+        op: PLUGIN_OPERATIONS.Insert,
+        widget: {
+          id: 'custom_footer',
+          type: DIRECT_PLUGIN,
+          RenderWidget: SandboxFooter,
+        },
+      },
+    ],
+  },
+  "org.openedx.frontend.catalog.home_page.banner": {
+    plugins: [
+      {
+        op: PLUGIN_OPERATIONS.Hide,
+        widgetId: 'default_contents',
+      },
+      {
+        op: PLUGIN_OPERATIONS.Insert,
+        widget: {
+          id: 'custom_catalog_banner',
+          type: DIRECT_PLUGIN,
+          RenderWidget: CatalogBanner,
+        },
+      },
+    ],
+  }
+};

package/src/types.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+export interface AppContextInterface {
+  config: {
+    LMS_BASE_URL: string,
+    LOGO_WHITE_URL: string,
+    SITE_NAME: string,
+  },
+  authenticatedUser: {
+    username: string,
+  }
+}

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,13 @@
+{
+  "extends": "@edx/typescript-config",
+  "compilerOptions": {
+    "jsx": "react",
+    "outDir": "dist",
+    "baseUrl": "./src",
+    "paths": {
+      "*": ["*"]
+    }
+  },
+  "include": ["*.js", ".eslintrc.js", "src/**/*", ],
+  "exclude": ["dist", "node_modules"]
+}