@opencraft/frontend-plugin-sandbox 1.2.0-alpha.1 → 1.2.0-alpha.3

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

@@ -10,17 +10,20 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v6
+        with:
+          version: 11
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
           node-version: '24'
-          cache: 'npm'
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
       - name: Build
-        run: npm run build
+        run: pnpm run build
       - name: Pack package
-        run: npm pack
+        run: pnpm pack
       - name: Upload package
         id: upload-package
         uses: actions/upload-artifact@v7

package/dist/components/CatalogBanner.js

@@ -1,12 +1,16 @@
 import React from 'react';
-import { Image, Row, Stack } from '@openedx/paragon';
+import { Image, Row, Col, 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(Col, {
+  xl: 7,
+  xs: 12,
+  className: "d-flex align-content-middle"
 }, /*#__PURE__*/React.createElement(Stack, {
   direction: "vertical",
-  className: "justify-content-center px-6",
+  className: "justify-content-center px-6 py-lg-6 py-5 my-lg-4",
   style: {
     maxWidth: '55rem'
   }
@@ -16,20 +20,20 @@ export const CatalogBanner = () => /*#__PURE__*/React.createElement(Row, {
   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: {
-    backgroundImage: 'url(../assets/banner-bg.png)'
-  }
+}, "OpenClass is a demo site by OpenCraft where you can explore the Open edX platform as a learner or course author."))), /*#__PURE__*/React.createElement(Col, {
+  xl: 5,
+  xs: 12,
+  className: "d-flex align-content-middle"
+}, /*#__PURE__*/React.createElement(Stack, {
+  className: "justify-content-lg-end justify-content-center"
 }, /*#__PURE__*/React.createElement(Image, {
   src: bannerBg,
+  className: "mt-lg-6",
   style: {
     height: '100%',
     width: '100%',
-    maxHeight: '550px',
-    objectFit: 'contain',
-    objectPosition: 'right top'
+    objectFit: "contain"
   },
   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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"CatalogBanner.js","names":["React","Image","Row","Col","Stack","bannerBg","CatalogBanner","createElement","direction","className","xl","xs","style","maxWidth","src","height","width","objectFit","alt"],"sources":["../../src/components/CatalogBanner.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, Row, Col, 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    <Col xl={7} xs={12} className={\"d-flex align-content-middle\"}>\n        <Stack\n          direction=\"vertical\"\n          className=\"justify-content-center px-6 py-lg-6 py-5 my-lg-4\"\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    </Col>\n    <Col xl={5} xs={12} className={\"d-flex align-content-middle\"}>\n        <Stack\n          className=\"justify-content-lg-end justify-content-center\"\n        >\n          <Image\n            src={bannerBg}\n            className=\"mt-lg-6\"\n            style={{\n              height: '100%',\n              width: '100%',\n              objectFit: \"contain\",\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      </Col>\n  </Row>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,GAAG,EAAEC,GAAG,EAAEC,KAAK,QAAQ,kBAAkB;AACzD,OAAOC,QAAQ,MAAM,yBAAyB;AAE9C,OAAO,MAAMC,aAAa,GAAGA,CAAA,kBAC3BN,KAAA,CAAAO,aAAA,CAACL,GAAG;EACFM,SAAS,EAAC,YAAY;EACtBC,SAAS,EAAC;AAAY,gBAEtBT,KAAA,CAAAO,aAAA,CAACJ,GAAG;EAACO,EAAE,EAAE,CAAE;EAACC,EAAE,EAAE,EAAG;EAACF,SAAS,EAAE;AAA8B,gBACzDT,KAAA,CAAAO,aAAA,CAACH,KAAK;EACJI,SAAS,EAAC,UAAU;EACpBC,SAAS,EAAC,kDAAkD;EAC5DG,KAAK,EAAE;IAAEC,QAAQ,EAAE;EAAQ;AAAE,gBAE7Bb,KAAA,CAAAO,aAAA;EAAIE,SAAS,EAAC;AAA0B,GAAC,4BAEvC,eAAAT,KAAA,CAAAO,aAAA;EAAME,SAAS,EAAC;AAAgB,GAC7B,aACG,CAAC,QAEL,CAAC,eACLT,KAAA,CAAAO,aAAA;EAAGE,SAAS,EAAC;AAAoB,GAAC,kHAG/B,CACE,CACN,CAAC,eACNT,KAAA,CAAAO,aAAA,CAACJ,GAAG;EAACO,EAAE,EAAE,CAAE;EAACC,EAAE,EAAE,EAAG;EAACF,SAAS,EAAE;AAA8B,gBACzDT,KAAA,CAAAO,aAAA,CAACH,KAAK;EACJK,SAAS,EAAC;AAA+C,gBAEzDT,KAAA,CAAAO,aAAA,CAACN,KAAK;EACJa,GAAG,EAAET,QAAS;EACdI,SAAS,EAAC,SAAS;EACnBG,KAAK,EAAE;IACLG,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE,MAAM;IACbC,SAAS,EAAE;EACb,CAAE;EACFC,GAAG,EAAC;AAA2I,CAChJ,CACI,CACJ,CACJ,CACN","ignoreList":[]}

package/dist/components/DropDownToggler.js

@@ -11,7 +11,7 @@ export const DropDownToggler = ({
   return /*#__PURE__*/React.createElement(Avatar, {
     size: "1.5em",
     src: avatar,
-    alt: authenticatedUser.username
+    alt: authenticatedUser?.username || 'Account'
   });
 };
 DropDownToggler.propTypes = DesktopUserMenuTogglePropTypes;

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';\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":[]}
+{"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 || 'Account'} />\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,EAAEK,QAAQ,IAAI;EAAU,CAAE,CAAC;AAEvF,CAAC;AAEDP,eAAe,CAACQ,SAAS,GAAGV,8BAA8B","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencraft/frontend-plugin-sandbox",
-  "version": "1.2.0-alpha.1",
+  "version": "1.2.0-alpha.3",
   "description": "Plugin for custom headers and footers in OpenCraft's sandboxes",
   "repository": {
     "type": "git",
@@ -34,7 +34,6 @@
     "typescript": "^5.2.0"
   },
   "scripts": {
-    "prepublish": "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/",

package/pnpm-workspace.yaml

@@ -0,0 +1,13 @@
+allowBuilds:
+  '@bundled-es-modules/glob': false
+  '@parcel/watcher': false
+  core-js: false
+  core-js-pure: false
+  sharp: false
+  style-dictionary: false
+  unrs-resolver: false
+blockExoticSubdeps: true
+# Supply chain security configuration. See https://pnpm.io/supply-chain-security for more information.
+minimumReleaseAge: 4320 # 3 days
+trustPolicy: no-downgrade
+trustPolicyIgnoreAfter: 43200 # 30 days

package/src/components/CatalogBanner.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, Row, Stack } from '@openedx/paragon';
+import { Image, Row, Col, Stack } from '@openedx/paragon';
 import bannerBg from '../assets/banner-bg.png';
 
 export const CatalogBanner = () => (
@@ -7,40 +7,40 @@ export const CatalogBanner = () => (
     direction="horizontal"
     className="bg-primary"
   >
-    <Stack
-      direction="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={{
-        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>
+    <Col xl={7} xs={12} className={"d-flex align-content-middle"}>
+        <Stack
+          direction="vertical"
+          className="justify-content-center px-6 py-lg-6 py-5 my-lg-4"
+          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>
+    </Col>
+    <Col xl={5} xs={12} className={"d-flex align-content-middle"}>
+        <Stack
+          className="justify-content-lg-end justify-content-center"
+        >
+          <Image
+            src={bannerBg}
+            className="mt-lg-6"
+            style={{
+              height: '100%',
+              width: '100%',
+              objectFit: "contain",
+            }}
+            alt="illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
+          />
+        </Stack>
+      </Col>
   </Row>
 );

package/src/components/DropDownToggler.tsx

@@ -6,7 +6,7 @@ import { AppContext } from '@edx/frontend-platform/react';
 export const DropDownToggler = ({ avatar }) => {
   const { authenticatedUser } = useContext(AppContext);
   return (
-    <Avatar size="1.5em" src={avatar} alt={authenticatedUser.username} />
+    <Avatar size="1.5em" src={avatar} alt={authenticatedUser?.username || 'Account'} />
   );
 };