@openedx/frontend-base 1.0.0-alpha.0

package/shell/Shell.tsx

@@ -0,0 +1,18 @@
+import {
+  SiteProvider,
+  Slot
+} from '../runtime';
+import { useActiveRouteRoleWatcher, useTrackColorSchemeChoice } from '../runtime/react/hooks';
+
+import DefaultLayout from './DefaultLayout';
+
+export default function Shell() {
+  useActiveRouteRoleWatcher();
+  useTrackColorSchemeChoice();
+
+  return (
+    <SiteProvider>
+      <Slot id="org.openedx.frontend.slot.layout.main.v1" layout={DefaultLayout} />
+    </SiteProvider>
+  );
+}

package/shell/app.scss

@@ -0,0 +1,149 @@
+@use "@openedx/paragon/scss/core/core.scss";
+
+.flex-basis-0 {
+  flex-basis: 0 !important;
+}
+
+.gap-0 {
+  gap: 0px;
+}
+
+.gap-1 {
+  gap: 4px;
+}
+
+.gap-1\.5 {
+  gap: 6px;
+}
+
+.gap-2 {
+  gap: 8px;
+}
+
+.gap-2\.5 {
+  gap: 12px;
+}
+
+.gap-3 {
+  gap: 16px;
+}
+
+.gap-3\.5 {
+  gap: 20px;
+}
+
+.gap-4 {
+  gap: 24px;
+}
+
+.gap-4\.5 {
+  gap: 32px;
+}
+
+.gap-5 {
+  gap: 48px;
+}
+
+.gap-5\.5 {
+  gap: 64px;
+}
+
+.gap-6 {
+  gap: 80px;
+}
+
+.row-gap-0 {
+  row-gap: 0px;
+}
+
+.row-gap-1 {
+  row-gap: 4px;
+}
+
+.row-gap-1\.5 {
+  row-gap: 6px;
+}
+
+.row-gap-2 {
+  row-gap: 8px;
+}
+
+.row-gap-2\.5 {
+  row-gap: 12px;
+}
+
+.row-gap-3 {
+  row-gap: 16px;
+}
+
+.row-gap-3\.5 {
+  row-gap: 20px;
+}
+
+.row-gap-4 {
+  row-gap: 24px;
+}
+
+.row-gap-4\.5 {
+  row-gap: 32px;
+}
+
+.row-gap-5 {
+  row-gap: 48px;
+}
+
+.row-gap-5\.5 {
+  row-gap: 64px;
+}
+
+.row-gap-6 {
+  row-gap: 80px;
+}
+
+.column-gap-0 {
+  column-gap: 0px;
+}
+
+.column-gap-1 {
+  column-gap: 4px;
+}
+
+.column-gap-1\.5 {
+  column-gap: 6px;
+}
+
+.column-gap-2 {
+  column-gap: 8px;
+}
+
+.column-gap-2\.5 {
+  column-gap: 12px;
+}
+
+.column-gap-3 {
+  column-gap: 16px;
+}
+
+.column-gap-3\.5 {
+  column-gap: 20px;
+}
+
+.column-gap-4 {
+  column-gap: 24px;
+}
+
+.column-gap-4\.5 {
+  column-gap: 32px;
+}
+
+.column-gap-5 {
+  column-gap: 48px;
+}
+
+.column-gap-5\.5 {
+  column-gap: 64px;
+}
+
+.column-gap-6 {
+  column-gap: 80px;
+}

package/shell/app.ts

@@ -0,0 +1,24 @@
+import { WidgetOperationTypes } from '../runtime';
+import { App } from '../types';
+import { Footer } from './footer';
+import { Header } from './header';
+
+const app: App = {
+  appId: 'org.openedx.frontend.app.shell',
+  slots: [
+    {
+      slotId: 'org.openedx.frontend.slot.header.main.v1',
+      id: 'org.openedx.frontend.widget.header.main.v1',
+      op: WidgetOperationTypes.APPEND,
+      component: Header,
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.footer.main.v1',
+      id: 'org.openedx.frontend.widget.footer.main.v1',
+      op: WidgetOperationTypes.APPEND,
+      component: Footer,
+    },
+  ]
+};
+
+export default app;

package/shell/babel.config.js

@@ -0,0 +1,3 @@
+const config = require('../tools/babel/babel.config');
+
+module.exports = config;

package/shell/dev/devFooter/app.tsx

@@ -0,0 +1,43 @@
+import { Button } from '@openedx/paragon';
+import { LayoutOperationTypes, WidgetOperationTypes } from '../../../runtime';
+import { App, } from '../../../types';
+import LinkMenuItem from '../../menus/LinkMenuItem';
+
+const app: App = {
+  appId: 'org.openedx.frontend.app.dev.footer',
+  slots: [
+    {
+      slotId: 'org.openedx.frontend.slot.footer.desktopTop.v1',
+      id: 'footer.booyah.revealed',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <Button>I are button</Button>
+      )
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.footer.desktopTop.v1',
+      op: LayoutOperationTypes.OPTIONS,
+      options: {
+        label: 'I Reveal Buttons',
+      }
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.footer.desktopTop.v1',
+      id: 'footer.booyah.revealed.linky',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <Button>I Are Another Button</Button>
+      )
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.footer.desktopCenterLink1.v1',
+      id: 'footer.booyah.centerLinks.first.1',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <LinkMenuItem label="Link 1" url="#" />
+      )
+    },
+  ]
+};
+
+export default app;

package/shell/dev/devFooter/index.ts

@@ -0,0 +1 @@
+export { default as devFooterApp } from './app';

package/shell/dev/devHeader/BarContext.tsx

@@ -0,0 +1,13 @@
+import { createContext, Dispatch, SetStateAction } from 'react';
+
+interface BarContextInterface {
+  bar: string,
+  setBar: Dispatch<SetStateAction<string>>,
+};
+
+const BarContext = createContext<BarContextInterface>({
+  bar: '',
+  setBar: () => { }
+});
+
+export default BarContext;

package/shell/dev/devHeader/BarLink.tsx

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import { Icon } from '@openedx/paragon';
+import { CrisisAlert } from '@openedx/paragon/icons';
+
+import BarContext from './BarContext';
+
+export default function BarLink() {
+  const { bar } = useContext(BarContext);
+
+  return (
+    <div className="d-flex">
+      <Icon src={CrisisAlert} className="mr-2" />
+      <span>{bar}</span>
+    </div>
+  );
+}

package/shell/dev/devHeader/BarProvider.tsx

@@ -0,0 +1,25 @@
+import { ReactNode, useMemo, useState } from 'react';
+import BarContext from './BarContext';
+
+function getBar() {
+  return 'Bar';
+}
+
+interface BarProviderProps {
+  children?: ReactNode,
+}
+
+export default function BarProvider({ children }: BarProviderProps) {
+  const [bar, setBar] = useState(getBar());
+
+  const barContextValue = useMemo(() => ({
+    bar,
+    setBar,
+  }), [bar, setBar]);
+
+  return (
+    <BarContext.Provider value={barContextValue}>
+      {children}
+    </BarContext.Provider>
+  );
+};

package/shell/dev/devHeader/CoursesLink.tsx

@@ -0,0 +1,16 @@
+import { Icon } from '@openedx/paragon';
+import { BookOpen } from '@openedx/paragon/icons';
+
+import { useWidgetOptions } from '../../../runtime';
+
+export default function CoursesLink() {
+  const options = useWidgetOptions();
+  const title = typeof options.title === 'string' ? options.title : 'Courses';
+
+  return (
+    <div className="d-flex">
+      <Icon src={BookOpen} className="mr-2" />
+      <span>{title}</span>
+    </div>
+  );
+}

package/shell/dev/devHeader/FooContext.tsx

@@ -0,0 +1,13 @@
+import { createContext, Dispatch, SetStateAction } from 'react';
+
+interface FooContextInterface {
+  foo: string,
+  setFoo: Dispatch<SetStateAction<string>>,
+};
+
+const FooContext = createContext<FooContextInterface>({
+  foo: '',
+  setFoo: () => { }
+});
+
+export default FooContext;

package/shell/dev/devHeader/FooLink.tsx

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import { Icon } from '@openedx/paragon';
+import { Kitesurfing } from '@openedx/paragon/icons';
+
+import FooContext from './FooContext';
+
+export default function FooLink() {
+  const { foo } = useContext(FooContext);
+
+  return (
+    <div className="d-flex">
+      <Icon src={Kitesurfing} className="mr-2" />
+      <span>{foo}</span>
+    </div>
+  );
+}

package/shell/dev/devHeader/FooProvider.tsx

@@ -0,0 +1,25 @@
+import { ReactNode, useMemo, useState } from 'react';
+import FooContext from './FooContext';
+
+function getFoo() {
+  return 'Foo';
+}
+
+interface FooProviderProps {
+  children?: ReactNode,
+}
+
+export default function FooProvider({ children }: FooProviderProps) {
+  const [foo, setFoo] = useState(getFoo());
+
+  const fooContextValue = useMemo(() => ({
+    foo,
+    setFoo,
+  }), [foo, setFoo]);
+
+  return (
+    <FooContext.Provider value={fooContextValue}>
+      {children}
+    </FooContext.Provider>
+  );
+};

package/shell/dev/devHeader/app.tsx

@@ -0,0 +1,53 @@
+import { WidgetOperationTypes } from '../../../runtime';
+import { App } from '../../../types';
+import LinkMenuItem from '../../menus/LinkMenuItem';
+import CoursesLink from './CoursesLink';
+import FooLink from './FooLink';
+import BarLink from './BarLink';
+import providers from './providers';
+
+const app: App = {
+  appId: 'org.openedx.frontend.app.dev.header',
+  slots: [
+    {
+      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+      id: 'org.openedx.frontend.widget.slotShowcase.headerLink',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <LinkMenuItem
+          label={<CoursesLink />}
+          url="#"
+          variant="navLink"
+        />
+      )
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+      id: 'org.openedx.frontend.widget.slotShowcase.headerLink2a',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <LinkMenuItem
+          label={<FooLink />}
+          url="#"
+          variant="navLink"
+        />
+      )
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+      id: 'org.openedx.frontend.widget.slotShowcase.headerLink2b',
+      op: WidgetOperationTypes.APPEND,
+      condition: { authenticated: true },
+      element: (
+        <LinkMenuItem
+          label={<BarLink />}
+          url="#"
+          variant="navLink"
+        />
+      )
+    },
+  ],
+  providers
+};
+
+export default app;

package/shell/dev/devHeader/index.ts

@@ -0,0 +1 @@
+export { default as devHeaderApp } from './app';

package/shell/dev/devHeader/providers.tsx

@@ -0,0 +1,11 @@
+import { AppProvider } from '../../../types';
+
+import FooProvider from './FooProvider';
+import BarProvider from './BarProvider';
+
+const providers: AppProvider[] = [
+  FooProvider,
+  BarProvider,
+];
+
+export default providers;

package/shell/dev/devHome/HomePage.tsx

@@ -0,0 +1,28 @@
+import { Link } from 'react-router-dom';
+import { useIntl } from '../../../runtime';
+import { getUrlByRouteRole } from '../../../runtime/routing';
+import messages from './messages';
+
+export default function HomePage() {
+  const coursewareUrl = getUrlByRouteRole('courseware');
+  const dashboardUrl = getUrlByRouteRole('learnerDashboard');
+  const slotShowcaseUrl = getUrlByRouteRole('slotShowcase');
+  const intl = useIntl();
+
+  return (
+    <div className="p-3">
+      <p>{intl.formatMessage(messages.homeContent)}</p>
+      <ul>
+        {coursewareUrl !== null && (
+          <li><Link to={coursewareUrl}>Go to courseware page</Link></li>
+        )}
+        {dashboardUrl !== null && (
+          <li><Link to={dashboardUrl}>Go to dashboard page</Link></li>
+        )}
+        {slotShowcaseUrl !== null && (
+          <li><Link to={slotShowcaseUrl}>Go to slot showcase page</Link></li>
+        )}
+      </ul>
+    </div>
+  );
+}

package/shell/dev/devHome/app.ts

@@ -0,0 +1,18 @@
+import { App } from '../../../types';
+import HomePage from './HomePage';
+import messages from './i18n';
+
+const app: App = {
+  appId: 'org.openedx.frontend.app.dev.home',
+  routes: [{
+    path: '/',
+    id: 'dev.home',
+    Component: HomePage,
+    handle: {
+      role: 'home'
+    }
+  }],
+  messages,
+};
+
+export default app;

package/shell/dev/devHome/i18n/index.ts

@@ -0,0 +1,27 @@
+// Placeholder be overridden by `make pull_translations`
+export default {
+  ar: {},
+  'zh-hk': {},
+  'zh-cn': {},
+  uk: {},
+  'tr-tr': {},
+  th: {},
+  te: {},
+  ru: {},
+  'pt-pt': {},
+  'pt-br': {},
+  'it-it': {},
+  id: {},
+  hi: {},
+  he: {},
+  'fr-ca': {
+    'home.content': 'Home content in French.'
+  },
+  fa: {},
+  'es-es': {},
+  'es-419': {},
+  el: {},
+  'de-de': {},
+  da: {},
+  bo: {},
+};

package/shell/dev/devHome/index.ts

@@ -0,0 +1 @@
+export { default as devHomeApp } from './app';

package/shell/dev/devHome/messages.ts

@@ -0,0 +1,11 @@
+import { defineMessages } from '../../../runtime';
+
+const messages = defineMessages({
+  homeContent: {
+    id: 'home.content',
+    defaultMessage: 'Home page content.',
+    description: 'Content for the dev project home page.',
+  },
+});
+
+export default messages;

package/shell/dev/devUser/app.tsx

@@ -0,0 +1,24 @@
+import { WidgetOperationTypes } from '../../../runtime';
+import { App } from '../../../types';
+import LoginButton from '../../header/anonymous-menu/LoginButton';
+import RegisterButton from '../../header/anonymous-menu/RegisterButton';
+
+const app: App = {
+  appId: 'org.openedx.frontend.app.dev.user',
+  slots: [
+    {
+      slotId: 'org.openedx.frontend.slot.header.anonymousMenu.v1',
+      id: 'user.anonymousMenu.loginButton',
+      op: WidgetOperationTypes.APPEND,
+      component: LoginButton,
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.anonymousMenu.v1',
+      id: 'user.anonymousMenu.registerButton',
+      op: WidgetOperationTypes.APPEND,
+      component: RegisterButton,
+    },
+  ]
+};
+
+export default app;

package/shell/dev/devUser/index.ts

@@ -0,0 +1 @@
+export { default as devUserApp } from './app';

package/shell/dev/index.ts

@@ -0,0 +1,5 @@
+export { devFooterApp } from './devFooter';
+export { devHeaderApp } from './devHeader';
+export { devHomeApp } from './devHome';
+export { devUserApp } from './devUser';
+export { slotShowcaseApp } from './slotShowcase';

package/shell/dev/slotShowcase/HorizontalSlotLayout.tsx

@@ -0,0 +1,11 @@
+import { useWidgets } from '../../../runtime';
+
+export default function HorizontalSlotLayout() {
+  const widgets = useWidgets();
+
+  return (
+    <div className="d-flex gap-3">
+      {widgets}
+    </div>
+  );
+}

package/shell/dev/slotShowcase/LayoutWithOptions.tsx

@@ -0,0 +1,17 @@
+import { useLayoutOptions, useWidgets } from '../../../runtime';
+
+export default function LayoutWithOptions() {
+  const widgets = useWidgets();
+  const options = useLayoutOptions();
+
+  const title = typeof options.title === 'string' ? options.title : 'Foo';
+
+  return (
+    <>
+      <div>Layout Title: <strong>{title}</strong></div>
+      <div>
+        {widgets}
+      </div>
+    </>
+  );
+}

package/shell/dev/slotShowcase/SlotShowcasePage.tsx

@@ -0,0 +1,66 @@
+import { Slot } from '../../../runtime';
+import HorizontalSlotLayout from './HorizontalSlotLayout';
+import LayoutWithOptions from './LayoutWithOptions';
+
+export default function SlotShowcasePage() {
+  return (
+    <div className="p-3">
+      <h1>Slot Showcase</h1>
+
+      <p>As a best practice, widgets should pass additional props (<code>...props</code>) to their rendered HTMLElement. This accomplishes two things:</p>
+      <ul>
+        <li>It allows custom layouts to add <code>className</code> and <code>style</code> props as necessary for the layout.</li>
+        <li>It allows widgets to be effectively &quot;wrapped&quot; by a parent component to alter their behavior.</li>
+      </ul>
+
+      <h3>Simple slot with default layout</h3>
+      <p>This slot has no opinionated layout, it just renders its children.</p>
+      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseSimple" />
+
+      <h3>Simple slot with default content and props</h3>
+      <p>This slot has default content, and it exposes a slot prop to widgets.</p>
+      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseSimpleWithDefaultContent" aSlotProp="hello!">
+        <div>Look, I&apos;m default content!</div>
+      </Slot>
+
+      <h2>UI Layout Operations</h2>
+
+      <h3>Slot with custom layout</h3>
+      <p>This slot uses a horizontal flexbox layout from a component.</p>
+      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseCustom" layout={HorizontalSlotLayout} />
+      <p>This slot uses a horizontal flexbox layout from a JSX element.</p>
+      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseCustom" layout={<HorizontalSlotLayout />} />
+
+      <h3>Slot with override custom layout</h3>
+      <p>This slot uses a horizontal flexbox layout, but it was added by a layout replace operation.</p>
+      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseCustomConfig" />
+
+      <h3>Slot with layout options</h3>
+      <p>These slots use a custom layout that takes options.  The first shows the default title, the second shows it set to &quot;Bar&quot;</p>
+      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault" layout={LayoutWithOptions} />
+      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions" layout={LayoutWithOptions} />
+
+      <h2>UI Widget Operations</h2>
+
+      <h3>Slot with prepended element</h3>
+      <p>This slot has a prepended element (and two appended elements).</p>
+      <Slot id="org.openedx.frontend.slot.dev.slotShowcasePrepending" />
+
+      <h3>Slot with inserted elements</h3>
+      <p>This slot has elements inserted before and after the second element. Also note that the insert operations are declared <em>before</em> the related element is declared, but can still insert themselves relative to it.</p>
+      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseInserting" />
+
+      <h3>Slot with replaced element</h3>
+      <p>This slot has an element replacing element two.</p>
+      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseReplacing" />
+
+      <h3>Slot with removed element</h3>
+      <p>This slot has removed element two (<code>WidgetOperationTypes.REMOVE</code>).</p>
+      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseRemoving" />
+
+      <h3>Slot with widget with options.</h3>
+      <p>Both widgets accept options.  The first shows the default title, the second shows it set to &quot;Bar&quot;</p>
+      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseWidgetOptions" />
+    </div>
+  );
+}