@openedx/frontend-base 1.0.0-alpha.0

package/shell/footer/app.tsx

@@ -0,0 +1,73 @@
+import { Slot, WidgetOperationTypes } from '../../runtime';
+import { App } from '../../types';
+import Logo from '../Logo';
+import CopyrightNotice from './CopyrightNotice';
+import LabeledLinkColumn from './LabeledLinkColumn';
+import LanguageMenu from './LanguageMenu';
+
+const app: App = {
+  appId: 'org.openedx.frontend.app.footer',
+  slots: [
+    // Center links
+    {
+      slotId: 'org.openedx.frontend.slot.footer.desktopCenterLinks.v1',
+      id: 'org.openedx.frontend.widget.footer.desktopCenterLink1.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <Slot id="org.openedx.frontend.slot.footer.desktopCenterLink1.v1" layout={LabeledLinkColumn} />
+      ),
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.footer.desktopCenterLinks.v1',
+      id: 'org.openedx.frontend.widget.footer.desktopCenterLink2.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <Slot id="org.openedx.frontend.slot.footer.desktopCenterLink2.v1" layout={LabeledLinkColumn} />
+      ),
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.footer.desktopCenterLinks.v1',
+      id: 'org.openedx.frontend.widget.footer.desktopCenterLink3.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <Slot id="org.openedx.frontend.slot.footer.desktopCenterLink3.v1" layout={LabeledLinkColumn} />
+      ),
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.footer.desktopCenterLinks.v1',
+      id: 'org.openedx.frontend.widget.footer.desktopCenterLink4.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <Slot id="org.openedx.frontend.slot.footer.desktopCenterLink4.v1" layout={LabeledLinkColumn} />
+      ),
+    },
+
+    // Left Links
+    {
+      slotId: 'org.openedx.frontend.slot.footer.desktopLeftLinks.v1',
+      id: 'org.openedx.frontend.widget.footer.desktopLeftLinksLogo.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: <Logo />,
+    },
+
+    // Right Links
+    {
+      slotId: 'org.openedx.frontend.slot.footer.desktopRightLinks.v1',
+      id: 'org.openedx.frontend.widget.footer.desktopRightLinksLanguageMenu.v1',
+      op: WidgetOperationTypes.APPEND,
+      component: LanguageMenu,
+    },
+
+    // Copyright Notice
+    {
+      slotId: 'org.openedx.frontend.slot.footer.desktopLegalNotices.v1',
+      id: 'org.openedx.frontend.widget.footer.desktopCopyrightNotice.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <CopyrightNotice />
+      ),
+    }
+  ]
+};
+
+export default app;

package/shell/footer/data/api.ts

@@ -0,0 +1,48 @@
+import {
+  getAuthenticatedHttpClient,
+  getAuthenticatedUser,
+  getSiteConfig,
+  updateLocale
+} from '../../../runtime';
+
+export async function updateSiteLanguage(locale: string) {
+  const user = getAuthenticatedUser();
+
+  if (user !== null) {
+    const { username } = getAuthenticatedUser();
+    await patchUserPreferences(username, locale);
+  }
+  await postSetlang(locale);
+
+  updateLocale();
+}
+
+async function patchUserPreferences(username: string, locale: string) {
+  await getAuthenticatedHttpClient().patch(
+    `${getSiteConfig().lmsBaseUrl}/api/user/v1/preferences/${username}`,
+    {
+      'pref-lang': locale
+    },
+    {
+      headers: {
+        'Content-Type': 'application/merge-patch+json'
+      },
+    }
+  );
+}
+
+async function postSetlang(locale: string) {
+  const formData = new FormData();
+  formData.append('language', locale);
+
+  await getAuthenticatedHttpClient().post(
+    `${getSiteConfig().lmsBaseUrl}/i18n/setlang/`,
+    formData,
+    {
+      headers: {
+        Accept: 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+      },
+    }
+  );
+}

package/shell/footer/index.ts

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

package/shell/header/AuthenticatedMenu.tsx

@@ -0,0 +1,32 @@
+import { DropdownButton } from '@openedx/paragon';
+import { Person } from '@openedx/paragon/icons';
+
+import {
+  Slot,
+  useAuthenticatedUser
+} from '../../runtime';
+
+interface AuthenticatedMenuProps {
+  className?: string,
+}
+
+export default function AuthenticatedMenu({ className }: AuthenticatedMenuProps) {
+  const authenticatedUser = useAuthenticatedUser();
+
+  // We're using '||' on purpose to detect an empty string, so ignore eslint's warning:
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+  const displayUserName = authenticatedUser?.name || authenticatedUser?.username;
+
+  const title = (
+    <div className="d-flex mr-2 align-items-center gap-2">
+      <Person />
+      {displayUserName}
+    </div>
+  );
+
+  return (
+    <DropdownButton size="sm" id="user-nav-dropdown" title={title} variant="outline-primary" className={className}>
+      <Slot id="org.openedx.frontend.slot.header.authenticatedMenu.v1" />
+    </DropdownButton>
+  );
+}

package/shell/header/Header.tsx

@@ -0,0 +1,17 @@
+import { Slot, useIntl } from '../../runtime';
+
+import messages from '../Shell.messages';
+
+export default function Header() {
+  const intl = useIntl();
+
+  return (
+    <header className="border-bottom py-2">
+      <nav className="py-2">
+        <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
+        <Slot id="org.openedx.frontend.slot.header.desktop.v1" />
+        <Slot id="org.openedx.frontend.slot.header.mobile.v1" />
+      </nav>
+    </header>
+  );
+}

package/shell/header/anonymous-menu/AnonymousMenu.tsx

@@ -0,0 +1,14 @@
+import classNames from 'classnames';
+import { Slot } from '../../../runtime';
+
+interface AnonymousMenuProps {
+  className?: string,
+}
+
+export default function AnonymousMenu({ className }: AnonymousMenuProps) {
+  return (
+    <div className={classNames('d-flex flex-nowrap align-items-center flex-shrink-0 gap-3', className)}>
+      <Slot id="org.openedx.frontend.slot.header.anonymousMenu.v1" />
+    </div>
+  );
+}

package/shell/header/anonymous-menu/LoginButton.tsx

@@ -0,0 +1,14 @@
+import { Button } from '@openedx/paragon';
+import { useSiteConfig, useIntl } from '../../../runtime';
+import messages from '../../Shell.messages';
+
+export default function LoginButton({ ...props }) {
+  const config = useSiteConfig();
+  const intl = useIntl();
+
+  return (
+    <Button size="sm" href={config.loginUrl} {...props}>
+      {intl.formatMessage(messages['header.user.menu.login'])}
+    </Button>
+  );
+}

package/shell/header/anonymous-menu/RegisterButton.tsx

@@ -0,0 +1,15 @@
+import { Button } from '@openedx/paragon';
+
+import { useSiteConfig, useIntl } from '../../../runtime';
+import messages from '../../Shell.messages';
+
+export default function RegisterButton({ ...props }) {
+  const config = useSiteConfig();
+  const intl = useIntl();
+
+  return (
+    <Button size="sm" variant="outline-primary" href={`${config.lmsBaseUrl}/register`} {...props}>
+      {intl.formatMessage(messages['header.user.menu.register'])}
+    </Button>
+  );
+}

package/shell/header/app.tsx

@@ -0,0 +1,142 @@
+import { WidgetOperationTypes } from '../../runtime';
+import { App } from '../../types';
+import Logo from '../Logo';
+import LinkMenuItem from '../menus/LinkMenuItem';
+import ProfileLinkMenuItem from '../menus/ProfileLinkMenuItem';
+import AnonymousMenu from './anonymous-menu/AnonymousMenu';
+import AuthenticatedMenu from './AuthenticatedMenu';
+import DesktopLayout from './desktop/DesktopLayout';
+import PrimaryNavLinks from './desktop/PrimaryNavLinks';
+import SecondaryNavLinks from './desktop/SecondaryNavLinks';
+import MobileLayout from './mobile/MobileLayout';
+import MobileNavLinks from './mobile/MobileNavLinks';
+
+import messages from '../Shell.messages';
+
+const config: App = {
+  appId: 'org.openedx.frontend.app.header',
+  slots: [
+
+    // Layouts
+    {
+      slotId: 'org.openedx.frontend.slot.header.desktop.v1',
+      id: 'org.openedx.frontend.widget.header.desktopLayout.v1',
+      op: WidgetOperationTypes.APPEND,
+      component: DesktopLayout
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.mobile.v1',
+      id: 'org.openedx.frontend.widget.header.mobileLayout.v1',
+      op: WidgetOperationTypes.APPEND,
+      component: MobileLayout
+    },
+
+    // Desktop
+    {
+      slotId: 'org.openedx.frontend.slot.header.desktopLeft.v1',
+      id: 'org.openedx.frontend.widget.header.desktopLogo.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: <Logo />,
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.desktopLeft.v1',
+      id: 'org.openedx.frontend.widget.header.desktopPrimaryLinks.v1',
+      op: WidgetOperationTypes.APPEND,
+      component: PrimaryNavLinks
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.desktopRight.v1',
+      id: 'org.openedx.frontend.widget.header.desktopSecondaryLinks.v1',
+      op: WidgetOperationTypes.APPEND,
+      component: SecondaryNavLinks
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.desktopRight.v1',
+      id: 'org.openedx.frontend.widget.header.desktopAuthenticatedMenu.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: <AuthenticatedMenu />,
+      condition: {
+        authenticated: true,
+      }
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.authenticatedMenu.v1',
+      id: 'org.openedx.frontend.widget.header.desktopAuthenticatedMenuProfile.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <ProfileLinkMenuItem
+          label={messages['header.user.menu.profile']}
+          role="profile"
+          variant="dropdownItem"
+        />
+      )
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.authenticatedMenu.v1',
+      id: 'org.openedx.frontend.widget.header.desktopAuthenticatedMenuAccount.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <LinkMenuItem
+          label={messages['header.user.menu.account']}
+          role="account"
+          variant="dropdownItem"
+        />
+      )
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.authenticatedMenu.v1',
+      id: 'org.openedx.frontend.widget.header.desktopAuthenticatedMenuLogout.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <LinkMenuItem
+          label={messages['header.user.menu.logout']}
+          role="logout"
+          variant="dropdownItem"
+        />
+      )
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.desktopRight.v1',
+      id: 'org.openedx.frontend.widget.header.desktopAnonymousMenu.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: <AnonymousMenu />,
+      condition: {
+        authenticated: false,
+      }
+    },
+
+    // Mobile
+    {
+      slotId: 'org.openedx.frontend.slot.header.mobileCenter.v1',
+      id: 'org.openedx.frontend.widget.header.mobileLogo.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: <Logo />,
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.mobileMenu.v1',
+      id: 'org.openedx.frontend.widget.header.mobileMenuLinks.v1',
+      op: WidgetOperationTypes.APPEND,
+      component: MobileNavLinks
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.mobileRight.v1',
+      id: 'org.openedx.frontend.widget.header.mobileAuthenticatedMenu.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: <AuthenticatedMenu />,
+      condition: {
+        authenticated: true,
+      }
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.mobileRight.v1',
+      id: 'org.openedx.frontend.widget.header.mobileAnonymousMenu.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: <AnonymousMenu />,
+      condition: {
+        authenticated: false,
+      }
+    },
+  ]
+};
+
+export default config;

package/shell/header/desktop/DesktopLayout.tsx

@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+import { useMediaQuery } from 'react-responsive';
+import { Slot } from '../../../runtime';
+
+export default function DesktopLayout() {
+  const isMobile = useMediaQuery({ maxWidth: 768 });
+
+  return (
+    <div className={classNames(
+      'align-items-center justify-content-between px-3',
+      isMobile ? 'd-none' : 'd-flex'
+    )}
+    >
+      <div className="d-flex flex-grow-1 align-items-center">
+        <Slot id="org.openedx.frontend.slot.header.desktopLeft.v1" />
+      </div>
+      <div className="d-flex align-items-center">
+        <Slot id="org.openedx.frontend.slot.header.desktopRight.v1" />
+      </div>
+    </div>
+  );
+}

package/shell/header/desktop/PrimaryNavLinks.tsx

@@ -0,0 +1,10 @@
+import { Nav } from '@openedx/paragon';
+import { Slot } from '../../../runtime';
+
+export default function PrimaryNavLinks() {
+  return (
+    <Nav className="flex-nowrap align-items-center">
+      <Slot id="org.openedx.frontend.slot.header.primaryLinks.v1" />
+    </Nav>
+  );
+}

package/shell/header/desktop/SecondaryNavLinks.tsx

@@ -0,0 +1,10 @@
+import { Nav } from '@openedx/paragon';
+import { Slot } from '../../../runtime';
+
+export default function SecondaryNavLinks() {
+  return (
+    <Nav className="flex-nowrap">
+      <Slot id="org.openedx.frontend.slot.header.secondaryLinks.v1" />
+    </Nav>
+  );
+}

package/shell/header/index.ts

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

package/shell/header/mobile/MobileLayout.tsx

@@ -0,0 +1,47 @@
+import { Button, Nav } from '@openedx/paragon';
+import { MenuIcon } from '@openedx/paragon/icons';
+import classNames from 'classnames';
+import { useCallback, useState } from 'react';
+import { FocusOn } from 'react-focus-on';
+import { useMediaQuery } from 'react-responsive';
+import { Slot } from '../../../runtime';
+
+export default function MobileLayout() {
+  const isMobile = useMediaQuery({ maxWidth: 768 });
+  const [mobileOpen, setMobileOpen] = useState<boolean>(false);
+
+  const handleMobileButtonClick = useCallback(() => {
+    setMobileOpen((value) => !value);
+  }, []);
+
+  return (
+    <>
+      <div
+        className={classNames(
+          'align-items-center justify-content-between pr-3 booyah',
+          isMobile ? 'd-flex' : 'd-none',
+        )}
+      >
+        <div className="d-flex flex-grow-1 flex-basis-0 justify-content-start align-items-center">
+          <Button onClick={handleMobileButtonClick} variant="outline">
+            <MenuIcon />
+          </Button>
+          <Slot id="org.openedx.frontend.slot.header.mobileLeft.v1" />
+        </div>
+        <div className="d-flex flex-grow-1 flex-basis-0 justify-content-center align-items-center">
+          <Slot id="org.openedx.frontend.slot.header.mobileCenter.v1" />
+        </div>
+        <div className="d-flex flex-grow-1 flex-basis-0 justify-content-end align-items-center">
+          <Slot id="org.openedx.frontend.slot.header.mobileRight.v1" />
+        </div>
+      </div>
+      {mobileOpen && (
+        <FocusOn onClickOutside={() => setMobileOpen(false)} onEscapeKey={() => setMobileOpen(false)}>
+          <Nav className="flex-column">
+            <Slot id="org.openedx.frontend.slot.header.mobileMenuLinks.v1" />
+          </Nav>
+        </FocusOn>
+      )}
+    </>
+  );
+}

package/shell/header/mobile/MobileNavLinks.tsx

@@ -0,0 +1,10 @@
+import { Nav } from '@openedx/paragon';
+import { Slot } from '../../../runtime';
+
+export default function MobileNavLinks() {
+  return (
+    <Nav className="flex-column">
+      <Slot id="org.openedx.frontend.slot.header.mobileMenuLinks.v1" />
+    </Nav>
+  );
+}

package/shell/i18n/index.ts

@@ -0,0 +1,25 @@
+// 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': {},
+  fa: {},
+  'es-es': {},
+  'es-419': {},
+  el: {},
+  'de-de': {},
+  da: {},
+  bo: {},
+};

package/shell/index.ts

@@ -0,0 +1,7 @@
+export { default as DefaultLayout } from './DefaultLayout';
+export { default as DefaultMain } from './DefaultMain';
+export { default as shellApp } from './app';
+export { Footer, footerApp } from './footer';
+export { Header, headerApp } from './header';
+export { default as LinkMenuItem } from './menus/LinkMenuItem';
+export { default as NavDropdownMenuSlot } from './menus/NavDropdownMenuSlot';

package/shell/jest.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  setupFilesAfterEnv: [
+    './setupTest.js',
+  ],
+  moduleNameMapper: {
+    '\\.svg$': '<rootDir>/__mocks__/svg.js',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/file.js',
+    '\\.(css|scss)$': require.resolve('identity-obj-proxy'),
+    'site.config': '<rootDir>/site.config.test.tsx',
+  },
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
+  collectCoverageFrom: [
+    '<rootDir>/**/*.{js,jsx,ts,tsx}',
+  ],
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    'setupTest.js',
+  ],
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@openedx|@edx)/)',
+  ],
+  testPathIgnorePatterns: [
+    '/site.config.test.tsx',
+    '/node_modules/',
+    '/dist/',
+  ],
+};

package/shell/menus/LinkMenuItem.tsx

@@ -0,0 +1,64 @@
+import { Dropdown, Hyperlink, NavDropdown, NavLink } from '@openedx/paragon';
+import { useIntl } from 'react-intl';
+
+import { getUrlByRouteRole } from '../../runtime/routing';
+import {
+  MenuItemName
+} from '../../types';
+import {
+  getItemLabel
+} from './data/utils';
+
+interface LinkMenuItemProps {
+  label: MenuItemName,
+  role?: string,
+  url?: string,
+  variant?: 'hyperlink' | 'navLink' | 'navDropdownItem' | 'dropdownItem',
+}
+
+export default function LinkMenuItem({ label, role, url, variant = 'hyperlink' }: LinkMenuItemProps) {
+  const intl = useIntl();
+  const finalLabel = getItemLabel(label, intl);
+
+  let finalUrl: string | null | undefined;
+  if (role !== undefined) {
+    finalUrl = getUrlByRouteRole(role);
+  } else if (url !== undefined) {
+    finalUrl = url;
+  }
+
+  // The URL will only be null if the item is an "app" menu item, and if the app is not loaded.
+  // We automatically hide the link if this is the case.
+  if (!finalUrl) {
+    return null;
+  }
+
+  if (variant === 'hyperlink') {
+    return (
+      <Hyperlink destination={finalUrl}>
+        {finalLabel}
+      </Hyperlink>
+    );
+  } else if (variant === 'navLink') {
+    return (
+      <NavLink href={finalUrl}>
+        {finalLabel}
+      </NavLink>
+    );
+  } else if (variant === 'navDropdownItem') {
+    return (
+      <NavDropdown.Item href={finalUrl}>
+        {finalLabel}
+      </NavDropdown.Item>
+    );
+  } else if (variant === 'dropdownItem') {
+    return (
+      <Dropdown.Item href={finalUrl}>
+        {finalLabel}
+      </Dropdown.Item>
+    );
+  }
+
+  // Just return null if the item is something we haven't accounted for above.
+  return null;
+}

package/shell/menus/NavDropdownMenuSlot.tsx

@@ -0,0 +1,29 @@
+import { NavDropdown } from '@openedx/paragon';
+import { useIntl } from 'react-intl';
+
+import { useLayoutOptionsForId, useWidgetsForId } from '../../runtime';
+import {
+  MenuItemName
+} from '../../types';
+import {
+  getItemLabel
+} from './data/utils';
+
+interface DropdownMenuSlotProps {
+  id: string,
+  label: MenuItemName,
+}
+
+export default function DropdownMenuSlot({ id, label }: DropdownMenuSlotProps) {
+  const intl = useIntl();
+  const options = useLayoutOptionsForId(id);
+  const widgets = useWidgetsForId(id);
+
+  const finalLabel = getItemLabel(options.label ?? label, intl);
+
+  return (
+    <NavDropdown key={id} title={finalLabel} id={`${id}-dropdown`}>
+      {widgets}
+    </NavDropdown>
+  );
+}

package/shell/menus/ProfileLinkMenuItem.tsx

@@ -0,0 +1,33 @@
+import { useAuthenticatedUser } from '../../runtime';
+import { getUrlByRouteRole } from '../../runtime/routing';
+import { MenuItemName } from '../../types';
+
+import LinkMenuItem from './LinkMenuItem';
+
+interface ProfileLinkMenuItemProps {
+  label: MenuItemName,
+  role: string,
+  variant?: 'hyperlink' | 'navLink' | 'navDropdownItem' | 'dropdownItem',
+}
+
+export default function ProfileLinkMenuItem({ label, role, variant = 'hyperlink' }: ProfileLinkMenuItemProps) {
+  const authenticatedUser = useAuthenticatedUser();
+  let baseUrl = getUrlByRouteRole(role);
+
+  if (!baseUrl)
+    return null;
+
+  if (baseUrl.endsWith('/')) {
+    baseUrl = baseUrl.slice(0, -1);
+  }
+
+  const url = `${baseUrl}/u/${authenticatedUser?.username}`;
+
+  return (
+    <LinkMenuItem
+      label={label}
+      url={url}
+      variant={variant}
+    />
+  );
+}