@openedx/frontend-base 1.0.0-alpha.9 → 1.0.0

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/index.ts

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

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/index.ts

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

@@ -1,31 +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',
-    '^@src/(.*)$': '<rootDir>/src/$1',
-  },
-  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);
-}

package/shell/public/index.html

@@ -1,10 +0,0 @@
-<!doctype html>
-<html lang="en-us">
-  <head>
-    <title>Shell Development Site</title>
-    <link rel="shortcut icon" href="https://edx-cdn.org/v3/default/favicon.ico" type="image/x-icon" />
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>

package/shell/router/createRouter.test.tsx

@@ -1,50 +0,0 @@
-import { createBrowserRouter } from 'react-router-dom';
-import { getBasename } from '../../runtime/initialize';
-import Shell from '../Shell';
-import createRouter from './createRouter';
-import getAppRoutes from './getAppRoutes';
-
-jest.mock('react-router-dom', () => ({
-  createBrowserRouter: jest.fn(),
-}));
-
-jest.mock('../../runtime/initialize', () => ({
-  getBasename: jest.fn(),
-}));
-
-jest.mock('../Shell', () => jest.fn());
-jest.mock('./getAppRoutes', () => jest.fn());
-
-describe('createRouter', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('should create a router with the correct configuration', () => {
-    const mockRoutes = [{ path: '/', element: <div>Home</div> }];
-    const mockBasename = '/base';
-
-    (getAppRoutes as jest.Mock).mockReturnValue(mockRoutes);
-    (getBasename as jest.Mock).mockReturnValue(mockBasename);
-    (createBrowserRouter as jest.Mock).mockReturnValue('fake router value');
-
-    const result = createRouter();
-
-    expect(getAppRoutes).toHaveBeenCalled();
-    expect(getBasename).toHaveBeenCalled();
-    expect(createBrowserRouter).toHaveBeenCalledWith(
-      [
-        {
-          Component: Shell,
-          children: mockRoutes,
-        },
-      ],
-      {
-        basename: mockBasename,
-      }
-    );
-
-    // Just proving we actually return the router from createBrowserRouter.
-    expect(result).toEqual('fake router value');
-  });
-});

package/shell/router/createRouter.ts

@@ -1,17 +0,0 @@
-import { createBrowserRouter } from 'react-router-dom';
-
-import { getBasename } from '../../runtime/initialize';
-import Shell from '../Shell';
-
-import getAppRoutes from './getAppRoutes';
-
-export default function createRouter() {
-  return createBrowserRouter([
-    {
-      Component: Shell,
-      children: getAppRoutes(),
-    }
-  ], {
-    basename: getBasename(),
-  });
-}

package/shell/router/getAppRoutes.test.tsx

@@ -1,59 +0,0 @@
-import { RouteObject } from 'react-router';
-import { getSiteConfig } from '../../runtime';
-import getAppRoutes from './getAppRoutes';
-
-jest.mock('../../runtime', () => ({
-  getSiteConfig: jest.fn(),
-}));
-
-describe('getAppRoutes', () => {
-  it('should return an empty array when no apps are configured', () => {
-    (getSiteConfig as jest.Mock).mockReturnValue({ apps: [] });
-
-    const routes = getAppRoutes();
-
-    expect(routes).toEqual([]);
-  });
-
-  it('should flatten and return routes from configured apps', () => {
-    const mockApps = [
-      {
-        routes: [
-          { path: '/page1', element: <div>Page 1</div> },
-          { path: '/page2', element: <div>Page 2</div> }
-        ]
-      },
-      {
-        routes: [
-          { path: '/page3', element: <div>Page 3</div> }
-        ]
-      },
-    ];
-
-    (getSiteConfig as jest.Mock).mockReturnValue({ apps: mockApps });
-
-    const routes = getAppRoutes();
-
-    expect(routes).toEqual([
-      { path: '/page1', element: <div>Page 1</div> },
-      { path: '/page2', element: <div>Page 2</div> },
-      { path: '/page3', element: <div>Page 3</div> }
-    ]);
-  });
-
-  it('should ignore apps without routes', () => {
-    const mockRoutes: RouteObject[] = [
-      { path: '/page1', element: <div>Page 1</div> },
-    ];
-    const mockApps = [
-      { routes: mockRoutes },
-      { slots: [] },
-    ];
-
-    (getSiteConfig as jest.Mock).mockReturnValue({ apps: mockApps });
-
-    const routes = getAppRoutes();
-
-    expect(routes).toEqual(mockRoutes);
-  });
-});

package/shell/router/getAppRoutes.ts

@@ -1,21 +0,0 @@
-import { RouteObject } from 'react-router';
-
-import { getSiteConfig } from '../../runtime';
-import { App } from '../../types';
-
-export default function getAppRoutes() {
-  const { apps } = getSiteConfig();
-
-  let routes: RouteObject[] = [];
-
-  if (apps) {
-    apps.forEach(
-      (app: App) => {
-        if (Array.isArray(app.routes)) {
-          routes = routes.concat(app.routes);
-        }
-      }
-    );
-  }
-  return routes;
-}

package/shell/setupTest.js

@@ -1,13 +0,0 @@
-import '@testing-library/jest-dom';
-import siteConfig from 'site.config';
-import { mergeSiteConfig } from '../runtime';
-
-jest.mock('universal-cookie', () => {
-  const mCookie = {
-    get: jest.fn(),
-    remove: jest.fn(),
-  };
-  return jest.fn(() => mCookie);
-});
-
-mergeSiteConfig(siteConfig);

package/shell/site.config.dev.tsx

@@ -1,49 +0,0 @@
-import { EnvironmentTypes, SiteConfig } from '../types';
-import { devFooterApp, devHeaderApp, devHomeApp, devUserApp, slotShowcaseApp } from './dev';
-import { footerApp, headerApp, shellApp } from '.';
-
-import './app.scss';
-
-const siteConfig: SiteConfig = {
-  apps: [
-    shellApp,
-    headerApp,
-    footerApp,
-    devUserApp,
-    devHomeApp,
-    devHeaderApp,
-    devFooterApp,
-    slotShowcaseApp,
-  ],
-
-  externalRoutes: [
-    {
-      role: 'org.openedx.frontend.role.profile',
-      url: 'http://apps.local.openedx.io:1995/profile/'
-    },
-    {
-      role: 'org.openedx.frontend.role.account',
-      url: 'http://apps.local.openedx.io:1997/account/'
-    },
-    {
-      role: 'org.openedx.frontend.role.logout',
-      url: 'http://local.openedx.io:8000/logout'
-    },
-  ],
-
-  // General
-  siteId: 'shell',
-  siteName: 'My Open edX Site',
-  baseUrl: 'http://apps.local.openedx.io:8080',
-  environment: EnvironmentTypes.DEVELOPMENT,
-
-  // Frontend URLs
-  loginUrl: 'http://local.openedx.io:8000/login',
-  logoutUrl: 'http://local.openedx.io:8000/logout',
-
-  // API URLs
-  lmsBaseUrl: 'http://local.openedx.io:8000',
-  mfeConfigApiUrl: 'http://apps.local.openedx.io:8080/api/mfe_config/v1',
-};
-
-export default siteConfig;

package/shell/site.config.test.tsx

@@ -1,16 +0,0 @@
-import { EnvironmentTypes, SiteConfig } from '../types';
-
-const siteConfig: SiteConfig = {
-  siteId: 'test',
-  siteName: 'Open edX',
-  baseUrl: 'http://localhost:8080',
-  lmsBaseUrl: 'http://localhost:18000',
-  loginUrl: 'http://localhost:18000/login',
-  logoutUrl: 'http://localhost:18000/logout',
-
-  environment: EnvironmentTypes.TEST,
-  apps: [],
-  segmentKey: 'segment_whoa',
-};
-
-export default siteConfig;

package/shell/site.tsx

@@ -1,41 +0,0 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { RouterProvider } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-
-import {
-  SITE_INIT_ERROR,
-  SITE_READY,
-  initialize,
-  subscribe
-} from '../runtime';
-import { addAppConfigs } from '../runtime/config';
-import { addAppMessages } from '../runtime/i18n';
-import messages from './i18n';
-import createRouter from './router/createRouter';
-
-subscribe(SITE_READY, async () => {
-  const queryClient = new QueryClient();
-  const router = createRouter();
-
-  addAppConfigs();
-  addAppMessages();
-
-  const root = createRoot(document.getElementById('root') as HTMLElement);
-  root.render(
-    <StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
-      </QueryClientProvider>
-    </StrictMode>
-  );
-});
-
-subscribe(SITE_INIT_ERROR, (error) => {
-  const root = createRoot(document.getElementById('root') as HTMLElement);
-  root.render(<div>{error.message}</div>);
-});
-
-initialize({
-  messages,
-});

package/tools/dist/babel/babel.config.js

@@ -1,28 +0,0 @@
-"use strict";
-/**
- * This Babel configuration file is for Jest.  The Webpack build does not use Babel.
- */
-module.exports = {
-    presets: [
-        [
-            require.resolve('@babel/preset-env'), {
-                targets: { node: 'current' },
-            },
-        ],
-        [
-            require.resolve('@babel/preset-react'), {
-                runtime: 'automatic',
-            },
-        ],
-        require.resolve('@babel/preset-typescript'),
-    ],
-    env: {
-        i18n: {
-            plugins: [
-                [
-                    'formatjs',
-                ],
-            ],
-        },
-    },
-};