@openedx/frontend-base 1.0.0-alpha.2 → 1.0.0-alpha.21

package/shell/footer/app.tsx

@@ -1,73 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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/header/AuthenticatedMenu.tsx

@@ -1,32 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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="org.openedx.frontend.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="org.openedx.frontend.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="org.openedx.frontend.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

@@ -1,22 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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/mobile/MobileLayout.tsx

@@ -1,47 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,25 +0,0 @@
-// 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/jest.config.js

@@ -1,30 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

package/shell/menus/data/utils.ts

@@ -1,19 +0,0 @@
-import { isValidElement, ReactNode } from 'react';
-import { IntlShape, MessageDescriptor } from 'react-intl';
-
-import {
-  MenuItemName
-} from '../../../types';
-// A name can be a string or a react-intl MessageDescriptor.
-export function getItemLabel(label: MenuItemName, intl: IntlShape): ReactNode {
-  if (typeof label === 'string') {
-    return label;
-  }
-
-  if (isValidElement(label)) {
-    return label;
-  }
-
-  // If it's not a valid element, it's a MessageDescriptor.
-  return intl.formatMessage(label as MessageDescriptor);
-}