@openedx/frontend-base 1.0.0-alpha.12 → 1.0.0-alpha.13

package/runtime/react/CurrentAppProvider.tsx

@@ -1,46 +0,0 @@
-import { ReactNode, useMemo, useState } from 'react';
-
-import { getAppConfig } from '../config';
-import { CONFIG_CHANGED } from '../constants';
-
-import CurrentAppContext from './CurrentAppContext';
-import { useSiteEvent } from './hooks';
-
-interface CurrentAppProviderProps {
-  appId: string,
-  children: ReactNode,
-}
-
-/**
- * A wrapper component for React-based micro-frontends to initialize a number of common data/
- * context providers.
- *
- * ```
- * <CurrentAppProvider appId="my.app">
- *   <HelloWorld />
- * </CurrentAppProvider>
- * ```
- *
- * This will provide the following to HelloWorld:
- * - A `CurrentAppContext` provider for React context data.
- *
- * @param {Object} props
- * @memberof module:React
- */
-export default function CurrentAppProvider({ appId, children }: CurrentAppProviderProps) {
-  const [appConfig, setAppConfig] = useState(getAppConfig(appId));
-
-  useSiteEvent(CONFIG_CHANGED, () => {
-    setAppConfig(getAppConfig(appId));
-  });
-
-  const appContextValue = useMemo(() => ({
-    appConfig,
-  }), [appConfig]);
-
-  return (
-    <CurrentAppContext.Provider value={appContextValue}>
-      {children}
-    </CurrentAppContext.Provider>
-  );
-}

package/runtime/react/Divider.tsx

@@ -1,5 +0,0 @@
-export default function Divider() {
-  return (
-    <hr className="w-100 my-2" />
-  );
-}

package/runtime/react/ErrorBoundary.jsx

@@ -1,47 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import { logError } from '../logging';
-
-import ErrorPage from './ErrorPage';
-
-/**
- * Error boundary component used to log caught errors and display the error page.
- *
- * @memberof module:React
- * @extends {Component}
- */
-class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError() {
-    // Update state so the next render will show the fallback UI.
-    return { hasError: true };
-  }
-
-  componentDidCatch(error, info) {
-    logError(error, { stack: info.componentStack });
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return this.props.fallbackComponent || <ErrorPage />;
-    }
-    return this.props.children;
-  }
-}
-
-ErrorBoundary.propTypes = {
-  children: PropTypes.node,
-  fallbackComponent: PropTypes.node,
-};
-
-ErrorBoundary.defaultProps = {
-  children: null,
-  fallbackComponent: undefined,
-};
-
-export default ErrorBoundary;

package/runtime/react/ErrorBoundary.test.jsx

@@ -1,83 +0,0 @@
-import { render } from '@testing-library/react';
-
-import ErrorBoundary from './ErrorBoundary';
-import { initializeMockApp } from '..';
-
-describe('ErrorBoundary', () => {
-  let logError = jest.fn();
-
-  beforeEach(async () => {
-    // This is a gross hack to suppress error logs in the invalid parentSelector test
-    jest.spyOn(console, 'error');
-    global.console.error.mockImplementation(() => { });
-
-    const { loggingService } = initializeMockApp();
-    logError = loggingService.logError;
-  });
-
-  afterEach(() => {
-    global.console.error.mockRestore();
-    jest.clearAllMocks();
-  });
-
-  it('should render children if no error', () => {
-    const component = (
-      <ErrorBoundary>
-        <div>Yay</div>
-      </ErrorBoundary>
-    );
-    const { container: wrapper } = render(component);
-
-    const element = wrapper.querySelector('div');
-    expect(element.textContent).toEqual('Yay');
-  });
-
-  it('should render ErrorPage if it has an error', () => {
-    const ExplodingComponent = () => {
-      throw new Error('booyah');
-    };
-
-    const component = (
-      <ErrorBoundary>
-        <ExplodingComponent />
-      </ErrorBoundary>
-    );
-
-    render(component);
-
-    expect(logError).toHaveBeenCalledTimes(1);
-    expect(logError).toHaveBeenCalledWith(
-      new Error('booyah'),
-      expect.objectContaining({
-        stack: expect.stringContaining('ExplodingComponent'),
-      }),
-    );
-  });
-  it('should render the fallback component when an error occurs', () => {
-    function FallbackComponent() {
-      return <div data-testid="fallback-component">Oops, something went wrong!</div>;
-    }
-    function ComponentError() {
-      throw new Error('An error occurred during the click event!');
-    }
-    const wrapper = render(
-      <ErrorBoundary fallbackComponent={<FallbackComponent />}>
-        <ComponentError />
-      </ErrorBoundary>,
-    );
-
-    expect(wrapper.queryByTestId('fallback-component')).toBeInTheDocument();
-  });
-
-  it('should render the ErrorPage fallbackComponent is null', () => {
-    function ComponentError() {
-      throw new Error('An error occurred during the click event!');
-    }
-    const wrapper = render(
-      <ErrorBoundary fallbackComponent={null}>
-        <ComponentError />
-      </ErrorBoundary>,
-    );
-    expect(wrapper.queryByTestId('error-page')).toBeInTheDocument();
-  });
-});

package/runtime/react/ErrorPage.jsx

@@ -1,72 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Button, Container, Row, Col,
-} from '@openedx/paragon';
-
-import { useSiteEvent } from './hooks';
-import {
-  FormattedMessage,
-  IntlProvider,
-  getMessages,
-  getLocale,
-  LOCALE_CHANGED,
-} from '../i18n';
-
-/**
- * An error page that displays a generic message for unexpected errors.  Also contains a "Try
- * Again" button to refresh the page.
- *
- * @memberof module:React
- * @extends {Component}
- */
-function ErrorPage({
-  message = null,
-}) {
-  const [locale, setLocale] = useState(getLocale());
-
-  useSiteEvent(LOCALE_CHANGED, () => {
-    setLocale(getLocale());
-  });
-
-  /* istanbul ignore next */
-  const reload = () => {
-    global.location.reload();
-  };
-
-  return (
-    <IntlProvider locale={locale} messages={getMessages()}>
-      <Container fluid className="py-5 justify-content-center align-items-start text-center" data-testid="error-page">
-        <Row>
-          <Col>
-            <p className="text-muted">
-              <FormattedMessage
-                id="unexpected.error.message.text"
-                defaultMessage="An unexpected error occurred. Please click the button below to refresh the page."
-                description="error message when an unexpected error occurs"
-              />
-            </p>
-            {message && (
-              <div role="alert" className="my-4">
-                <p>{message}</p>
-              </div>
-            )}
-            <Button onClick={reload}>
-              <FormattedMessage
-                id="unexpected.error.button.text"
-                defaultMessage="Try again"
-                description="text for button that tries to reload the app by refreshing the page"
-              />
-            </Button>
-          </Col>
-        </Row>
-      </Container>
-    </IntlProvider>
-  );
-}
-
-ErrorPage.propTypes = {
-  message: PropTypes.string,
-};
-
-export default ErrorPage;

package/runtime/react/SiteProvider.test.jsx

@@ -1,66 +0,0 @@
-import { render } from '@testing-library/react';
-import { initialize } from '../initialize';
-import SiteProvider from './SiteProvider';
-
-jest.mock('../auth', () => ({
-  configureAuth: () => { },
-  getAuthenticatedUser: () => null,
-  fetchAuthenticatedUser: () => null,
-  getAuthenticatedHttpClient: () => ({}),
-  AUTHENTICATED_USER_CHANGED: 'user_changed',
-}));
-
-jest.mock('../analytics', () => ({
-  configureAnalytics: () => { },
-  identifyAnonymousUser: jest.fn(),
-  identifyAuthenticatedUser: jest.fn(),
-}));
-
-jest.mock('./hooks', () => ({
-  ...jest.requireActual('./hooks'),
-  useTrackColorSchemeChoice: jest.fn(),
-}));
-
-describe('SiteProvider', () => {
-  beforeEach(async () => {
-    await initialize({
-      loggingService: jest.fn(() => ({
-        logError: jest.fn(),
-        logInfo: jest.fn(),
-      })),
-      messages: {
-        ar: {},
-        'es-419': {},
-        fr: {},
-        'zh-cn': {},
-        ca: {},
-        he: {},
-        id: {},
-        'ko-kr': {},
-        pl: {},
-        'pt-br': {},
-        ru: {},
-        th: {},
-        uk: {},
-        'fa-ir': {},
-        fa: {},
-      },
-    });
-  });
-
-  it('should render its children with a router', () => {
-    const component = (
-      <SiteProvider>
-        <div className="child">Child One</div>
-        <div className="child">Child Two</div>
-      </SiteProvider>
-    );
-
-    const wrapper = render(component);
-    const list = wrapper.container.querySelectorAll('div.child');
-
-    expect(list.length).toEqual(2);
-    expect(list[0].textContent).toEqual('Child One');
-    expect(list[1].textContent).toEqual('Child Two');
-  });
-});

package/runtime/react/SiteProvider.tsx

@@ -1,101 +0,0 @@
-import { ReactNode, useMemo, useState } from 'react';
-
-import { AUTHENTICATED_USER_CHANGED, getAuthenticatedUser } from '../auth';
-import { getSiteConfig } from '../config';
-import { CONFIG_CHANGED } from '../constants';
-import {
-  getLocale,
-  getMessages,
-  IntlProvider,
-  LOCALE_CHANGED,
-} from '../i18n';
-
-import CombinedAppProvider from './CombinedAppProvider';
-import ErrorBoundary from './ErrorBoundary';
-import SiteContext from './SiteContext';
-import { SELECTED_THEME_VARIANT_KEY } from './constants';
-import {
-  useTheme,
-  useSiteEvent,
-  useTrackColorSchemeChoice
-} from './hooks';
-import { themeActions } from './reducers';
-
-interface SiteProviderProps {
-  children: ReactNode,
-}
-
-/**
- * A wrapper component for React-based micro-frontends to initialize a number of common data/
- * context providers.
- *
- * ```
- * subscribe(SITE_READY, () => {
- *   ReactDOM.render(
- *     <SiteProvider>
- *       <HelloWorld />
- *     </SiteProvider>
- *   )
- * });
- * ```
- *
- * This will provide the following to HelloWorld:
- * - An error boundary as described above.
- * - An `SiteContext` provider for React context data.
- * - IntlProvider for @edx/frontend-i18n internationalization
- * - A theme manager for Paragon.
- *
- * @param {Object} props
- * @memberof module:React
- */
-export default function SiteProvider({ children }: SiteProviderProps) {
-  const [siteConfig, setSiteConfig] = useState(getSiteConfig());
-  const [authenticatedUser, setAuthenticatedUser] = useState(getAuthenticatedUser());
-  const [locale, setLocale] = useState(getLocale());
-
-  useSiteEvent(AUTHENTICATED_USER_CHANGED, () => {
-    setAuthenticatedUser(getAuthenticatedUser());
-  });
-
-  useSiteEvent(CONFIG_CHANGED, () => {
-    setSiteConfig(getSiteConfig());
-  });
-
-  useSiteEvent(LOCALE_CHANGED, () => {
-    setLocale(getLocale());
-  });
-
-  useTrackColorSchemeChoice();
-  const [themeState, themeDispatch] = useTheme();
-
-  const siteContextValue = useMemo(() => ({
-    authenticatedUser,
-    siteConfig,
-    locale,
-    theme: {
-      state: themeState,
-      setThemeVariant: (themeVariant: string) => {
-        themeDispatch(themeActions.setThemeVariant(themeVariant));
-
-        // Persist selected theme variant to localStorage.
-        window.localStorage.setItem(SELECTED_THEME_VARIANT_KEY, themeVariant);
-      },
-    },
-  }), [authenticatedUser, siteConfig, locale, themeState, themeDispatch]);
-
-  if (!themeState?.isThemeLoaded) {
-    return null;
-  }
-
-  return (
-    <IntlProvider locale={locale} messages={getMessages()}>
-      <ErrorBoundary>
-        <SiteContext.Provider value={siteContextValue}>
-          <CombinedAppProvider>
-            {children}
-          </CombinedAppProvider>
-        </SiteContext.Provider>
-      </ErrorBoundary>
-    </IntlProvider>
-  );
-}

package/runtime/react/hooks/theme/useTheme.test.ts

@@ -1,221 +0,0 @@
-import { act, fireEvent, renderHook } from '@testing-library/react';
-
-import useTheme from './useTheme';
-import * as config from '../../../config';
-import { logError } from '../../../logging';
-
-jest.mock('../../../logging');
-
-const baseSiteConfig = config.getSiteConfig();
-
-const theme = {
-  core: {
-    url: 'https://cdn.jsdelivr.net/npm/@openedx/brand@1.0.0/dist/core.min.css',
-  },
-  defaults: {
-    light: 'light',
-    dark: 'dark',
-  },
-  variants: {
-    light: {
-      url: 'https://cdn.jsdelivr.net/npm/@openedx/brand@1.0.0/dist/light.min.css',
-    },
-    dark: {
-      url: 'https://cdn.jsdelivr.net/npm/@openedx/brand@1.0.0/dist/dark.min.css',
-    },
-  },
-};
-
-let mockMediaQueryListEvent;
-const mockAddEventListener = jest.fn((_, fn) => fn(mockMediaQueryListEvent));
-const mockRemoveEventListener = jest.fn();
-
-Object.defineProperty(window, 'matchMedia', {
-  value: jest.fn(() => ({
-    addEventListener: mockAddEventListener,
-    removeEventListener: mockRemoveEventListener,
-    matches: mockMediaQueryListEvent.matches,
-  })),
-});
-
-Object.defineProperty(window, 'localStorage', {
-  value: {
-    getItem: jest.fn(),
-  },
-});
-
-describe('useTheme', () => {
-  beforeEach(() => {
-    document.head.innerHTML = '';
-    mockMediaQueryListEvent = { matches: true };
-    mockAddEventListener.mockClear();
-    mockRemoveEventListener.mockClear();
-    jest.mocked(window.localStorage.getItem).mockClear();
-  });
-
-  afterEach(() => {
-    jest.spyOn(config, 'getSiteConfig').mockRestore();
-  });
-
-  it.each([
-    ['dark', 'stylesheet', 'alternate stylesheet', true], // preference is dark
-    ['light', 'alternate stylesheet', 'stylesheet', false], // preference is light
-  ])(
-    'should configure theme variant for system preference %s and handle theme change events',
-    (initialPreference, expectedDarkRel, expectedLightRel, isDarkMediaMatch) => {
-      jest.spyOn(config, 'getSiteConfig').mockReturnValue({
-        ...baseSiteConfig,
-        theme
-      });
-      // Mock the matchMedia behavior to simulate system preference
-      mockMediaQueryListEvent = { matches: isDarkMediaMatch };
-      // Set up the hook and initial theme configuration
-      const { result, unmount } = renderHook(() => useTheme());
-      const themeLinks = document.head.querySelectorAll('link');
-
-      const checkThemeLinks = () => {
-        const darkLink: HTMLAnchorElement | null = document.head.querySelector('link[data-theme-variant="dark"]');
-        const lightLink: HTMLAnchorElement | null = document.head.querySelector('link[data-theme-variant="light"]');
-        expect(darkLink?.rel).toBe(expectedDarkRel);
-        expect(lightLink?.rel).toBe(expectedLightRel);
-      };
-
-      // Simulate initial theme configuration based on system preference
-      act(() => {
-        themeLinks.forEach((link) => fireEvent.load(link));
-      });
-
-      // Ensure matchMedia was called with the correct system preference
-      expect(window.matchMedia).toHaveBeenCalledWith('(prefers-color-scheme: dark)');
-      expect(mockAddEventListener).toHaveBeenCalled();
-
-      // Check initial theme setup
-      checkThemeLinks();
-      expect(result.current[0]).toEqual({
-        isThemeLoaded: true,
-        themeVariant: initialPreference,
-      });
-
-      unmount();
-      expect(mockRemoveEventListener).toHaveBeenCalled();
-    },
-  );
-
-  it('should configure theme variants according with user preference if is defined (localStorage)', () => {
-    jest.spyOn(config, 'getSiteConfig').mockReturnValue({
-      ...baseSiteConfig,
-      theme
-    });
-    jest.mocked(window.localStorage.getItem).mockReturnValue('light');
-    const { result, unmount } = renderHook(() => useTheme());
-    const themeLinks = document.head.querySelectorAll('link');
-    const darkLink: HTMLAnchorElement | null = document.head.querySelector('link[data-theme-variant="dark"]');
-    const lightLink: HTMLAnchorElement | null = document.head.querySelector('link[data-theme-variant="light"]');
-
-    act(() => {
-      themeLinks.forEach((link) => fireEvent.load(link));
-    });
-
-    expect(window.matchMedia).toHaveBeenCalledWith('(prefers-color-scheme: dark)');
-    expect(mockAddEventListener).toHaveBeenCalled();
-
-    expect(darkLink?.rel).toBe('alternate stylesheet');
-    expect(lightLink?.rel).toBe('stylesheet');
-    expect(result.current[0]).toEqual({ isThemeLoaded: true, themeVariant: 'light' });
-
-    unmount();
-    expect(mockRemoveEventListener).toHaveBeenCalled();
-  });
-
-  it('should define the theme variant as default if only 1 is configured', () => {
-    jest.spyOn(config, 'getSiteConfig').mockReturnValue({
-      ...baseSiteConfig,
-      theme: { ...theme, variants: { light: theme.variants.light } }
-    });
-    jest.mocked(window.localStorage.getItem).mockReturnValue('light');
-    const { result, unmount } = renderHook(() => useTheme());
-    const themeLinks = document.head.querySelectorAll('link');
-    const themeVariantLinks: NodeListOf<HTMLAnchorElement> | null = document.head.querySelectorAll('link[data-theme-variant]');
-
-    act(() => {
-      themeLinks.forEach((link) => fireEvent.load(link));
-    });
-
-    expect(themeVariantLinks.length).toBe(1);
-    expect((themeVariantLinks[0]).rel).toBe('stylesheet');
-    expect(result.current[0]).toEqual({ isThemeLoaded: true, themeVariant: 'light' });
-
-    unmount();
-    expect(mockRemoveEventListener).toHaveBeenCalled();
-  });
-
-  it('should not configure any theme if theme is undefined', () => {
-    const { result, unmount } = renderHook(() => useTheme());
-    const themeLinks = document.head.querySelectorAll('link');
-
-    expect(result.current[0]).toEqual({ isThemeLoaded: true, themeVariant: undefined });
-    expect(themeLinks.length).toBe(0);
-    unmount();
-  });
-
-  it('should return themeVariant undefined if a default variant cannot be configured', () => {
-    jest.spyOn(config, 'getSiteConfig').mockReturnValue({
-      ...baseSiteConfig,
-      theme: {
-        ...theme,
-        defaults: {
-          light: 'red'
-        },
-        variants: {
-          light: theme.variants.light,
-          green: { url: 'green-url' }
-        }
-      }
-    });
-    jest.mocked(window.localStorage.getItem).mockReturnValue(null);
-
-    const { result, unmount } = renderHook(() => useTheme());
-    const themeLinks = document.head.querySelectorAll('link');
-    const themeVariantLinks = document.head.querySelectorAll('link[data-theme-variant]');
-    act(() => {
-      themeLinks.forEach((link) => fireEvent.load(link));
-    });
-
-    expect(result.current[0]).toEqual({ isThemeLoaded: true, themeVariant: undefined });
-    expect(themeLinks.length).toBe(3);
-    themeVariantLinks.forEach((link: HTMLAnchorElement) => expect(link.rel).toBe('alternate stylesheet'));
-    unmount();
-  });
-
-  it('should log an error if the preferred theme variant cannot be set', async () => {
-    jest.spyOn(config, 'getSiteConfig').mockReturnValue({
-      ...baseSiteConfig,
-      theme: {
-        ...theme,
-        defaults: {
-          light: 'light',
-          dark: 'dark'
-        },
-        variants: {
-          light: theme.variants.light,
-          green: { url: 'green-url' }
-        }
-      }
-    });
-    jest.mocked(window.localStorage.getItem).mockReturnValue(null);
-
-    const { result, unmount } = renderHook(() => useTheme());
-    const themeLinks = document.head.querySelectorAll('link');
-    const themeVariantLinks = document.head.querySelectorAll('link[data-theme-variant]');
-
-    act(() => {
-      themeLinks.forEach((link) => fireEvent.load(link));
-    });
-
-    expect(result.current[0]).toEqual({ isThemeLoaded: true, themeVariant: 'dark' });
-    expect(logError).toHaveBeenCalled();
-    expect(themeVariantLinks.length).toBe(2);
-    themeVariantLinks.forEach((link: HTMLAnchorElement) => expect(link.rel).toBe('alternate stylesheet'));
-    unmount();
-  });
-});