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

package/runtime/utils.test.js

@@ -1,116 +0,0 @@
-import { waitFor } from '@testing-library/react';
-import {
-  camelCaseObject,
-  convertKeyNames,
-  getQueryParameters,
-  modifyObjectKeys,
-  snakeCaseObject,
-} from '.';
-
-describe('modifyObjectKeys', () => {
-  it('should use the provided modify function to change all keys in and object and its children', () => {
-    function meowKeys(key) {
-      return `${key}Meow`;
-    }
-
-    const result = modifyObjectKeys(
-      {
-        one: undefined,
-        two: null,
-        three: '',
-        four: 0,
-        five: NaN,
-        six: [1, 2, { seven: 'woof' }],
-        eight: { nine: { ten: 'bark' }, eleven: true },
-      },
-      meowKeys,
-    );
-
-    expect(result).toEqual({
-      oneMeow: undefined,
-      twoMeow: null,
-      threeMeow: '',
-      fourMeow: 0,
-      fiveMeow: NaN,
-      sixMeow: [1, 2, { sevenMeow: 'woof' }],
-      eightMeow: { nineMeow: { tenMeow: 'bark' }, elevenMeow: true },
-    });
-  });
-});
-
-describe('camelCaseObject', () => {
-  it('should make everything camelCase', () => {
-    const result = camelCaseObject({
-      what_now: 'brown cow',
-      but_who: { says_you_people: 'okay then', but_how: { will_we_even_know: 'the song is over' } },
-      'dot.dot.dot': 123,
-    });
-
-    expect(result).toEqual({
-      whatNow: 'brown cow',
-      butWho: { saysYouPeople: 'okay then', butHow: { willWeEvenKnow: 'the song is over' } },
-      dotDotDot: 123,
-    });
-  });
-});
-
-describe('snakeCaseObject', () => {
-  it('should make everything snake_case', () => {
-    const result = snakeCaseObject({
-      whatNow: 'brown cow',
-      butWho: { saysYouPeople: 'okay then', butHow: { willWeEvenKnow: 'the song is over' } },
-      'dot.dot.dot': 123,
-    });
-
-    expect(result).toEqual({
-      what_now: 'brown cow',
-      but_who: { says_you_people: 'okay then', but_how: { will_we_even_know: 'the song is over' } },
-      dot_dot_dot: 123,
-    });
-  });
-});
-
-describe('convertKeyNames', () => {
-  it('should replace the specified keynames', () => {
-    const result = convertKeyNames(
-      {
-        one: { two: { three: 'four' } },
-        five: 'six',
-      },
-      {
-        two: 'blue',
-        five: 'alive',
-        seven: 'heaven',
-      },
-    );
-
-    expect(result).toEqual({
-      one: { blue: { three: 'four' } },
-      alive: 'six',
-    });
-  });
-});
-
-describe('getQueryParameters', () => {
-  it('should use window location by default', () => {
-    expect(global.location.search).toEqual('');
-    expect(getQueryParameters()).toEqual({});
-  });
-
-  it('should make an empty object with no query string', () => {
-    expect(getQueryParameters('')).toEqual({});
-  });
-
-  it('should make an object with one key value pair', () => {
-    expect(getQueryParameters('?foo=bar')).toEqual({
-      foo: 'bar',
-    });
-  });
-
-  it('should make an object with one key value pair', () => {
-    expect(getQueryParameters('?foo=bar&baz=1')).toEqual({
-      foo: 'bar',
-      baz: '1',
-    });
-  });
-});

package/shell/DefaultLayout.tsx

@@ -1,18 +0,0 @@
-import { Slot } from '../runtime';
-import DefaultMain from './DefaultMain';
-
-export default function DefaultLayout() {
-  return (
-    <div className="d-flex flex-column min-vh-100">
-      <div className="flex-grow-0 flex-shrink-0">
-        <Slot id="org.openedx.frontend.slot.header.main.v1" />
-      </div>
-      <div id="main-content" className="flex-grow-1">
-        <Slot id="org.openedx.frontend.slot.content.main.v1" layout={DefaultMain} />
-      </div>
-      <div className="flex-grow-0 flex-shrink-0">
-        <Slot id="org.openedx.frontend.slot.footer.main.v1" />
-      </div>
-    </div>
-  );
-}

package/shell/DefaultMain.tsx

@@ -1,7 +0,0 @@
-import { Outlet } from 'react-router';
-
-export default function DefaultMain() {
-  return (
-    <Outlet />
-  );
-}

package/shell/Logo.test.tsx

@@ -1,32 +0,0 @@
-import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
-import Logo from './Logo';
-
-describe('Logo component', () => {
-  it('renders the image with default URL when no props are provided', async () => {
-    const { getByRole, queryByRole } = render(<Logo />);
-    const image = getByRole('img');
-    expect(image).toHaveAttribute('src', 'https://edx-cdn.org/v3/default/logo.svg');
-    const link = queryByRole('link');
-    expect(link).toBeNull();
-  });
-
-  it('renders the image with provided imageUrl', () => {
-    const testUrl = 'https://example.com/test-logo.svg';
-    const { getByRole, queryByRole } = render(<Logo imageUrl={testUrl} />);
-    const image = getByRole('img');
-    expect(image).toHaveAttribute('src', testUrl);
-    const link = queryByRole('link');
-    expect(link).toBeNull();
-  });
-
-  it('renders the image wrapped in a Hyperlink when destinationUrl is provided', () => {
-    const testDestinationUrl = 'https://example.com';
-    const { getByRole } = render(<Logo destinationUrl={testDestinationUrl} />);
-    const link = getByRole('link');
-    expect(link).toHaveAttribute('href', testDestinationUrl);
-    const image = getByRole('img');
-    expect(image).toBeInTheDocument();
-    expect(image).toHaveAttribute('src', 'https://edx-cdn.org/v3/default/logo.svg');
-  });
-});

package/shell/Logo.tsx

@@ -1,28 +0,0 @@
-import { IntlProvider } from 'react-intl';
-import { Hyperlink, Image } from '@openedx/paragon';
-
-interface LogoProps {
-  imageUrl?: string,
-  destinationUrl?: string,
-}
-
-export default function Logo({
-  imageUrl = 'https://edx-cdn.org/v3/default/logo.svg',
-  destinationUrl
-}: LogoProps) {
-  const image = (
-    <Image src={imageUrl} style={{ maxHeight: '2rem' }} />
-  );
-
-  if (destinationUrl === undefined) {
-    return image;
-  }
-
-  return (
-    <IntlProvider locale="en">
-      <Hyperlink destination={destinationUrl} className="p-0">
-        {image}
-      </Hyperlink>
-    </IntlProvider>
-  );
-}

package/shell/Shell.messages.ts

@@ -1,61 +0,0 @@
-import { defineMessages } from '../runtime';
-
-const messages = defineMessages({
-  'header.user.menu.dashboard': {
-    id: 'header.user.menu.dashboard',
-    defaultMessage: 'Dashboard',
-    description: 'Link to the user dashboard',
-  },
-  'header.user.menu.logout': {
-    id: 'header.user.menu.logout',
-    defaultMessage: 'Logout',
-    description: 'Logout link',
-  },
-  'header.user.menu.profile': {
-    id: 'header.user.menu.profile',
-    defaultMessage: 'Profile',
-    description: 'Link to the user profile',
-  },
-  'header.user.menu.account': {
-    id: 'header.user.menu.account',
-    defaultMessage: 'Account',
-    description: 'Link to account settings',
-  },
-  'header.user.menu.order.history': {
-    id: 'header.user.menu.order.history',
-    defaultMessage: 'Order History',
-    description: 'Link to order history',
-  },
-  'header.user.menu.login': {
-    id: 'header.user.menu.login',
-    defaultMessage: 'Login',
-    description: 'Login link',
-  },
-  'header.user.menu.register': {
-    id: 'header.user.menu.register',
-    defaultMessage: 'Sign Up',
-    description: 'Link to registration',
-  },
-  skipNavLink: {
-    id: 'header.navigation.skipNavLink',
-    defaultMessage: 'Skip to main content.',
-    description: 'A link used by screen readers to allow users to skip to the main content of the page.',
-  },
-  footerPoweredBy: {
-    id: 'footer.powered.by',
-    defaultMessage: 'Powered by Open edX',
-    description: 'Alt text for the \'Powered by Open edX\' logo displayed in the footer.',
-  },
-  footerTrademarkNotice: {
-    id: 'footer.trademark.notice',
-    defaultMessage: 'edX and Open edX are registered trademarks of edX LLC.',
-    description: 'A legal notice that "edX LLC" owns the trademarks on "edX" and "Open edX".  Please do not translate these three proper names.'
-  },
-  'footer.revealLinks.more': {
-    id: 'footer.revealLinks.more',
-    defaultMessage: 'More',
-    description: 'Text for a button that reveals more links and content in the footer.',
-  }
-});
-
-export default messages;

package/shell/Shell.tsx

@@ -1,18 +0,0 @@
-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/__mocks__/file.js

@@ -1 +0,0 @@
-export default 'FileMock';

package/shell/__mocks__/svg.js

@@ -1 +0,0 @@
-export default 'SvgURL';

package/shell/__mocks__/universal-cookie.js

@@ -1,6 +0,0 @@
-const mockCookiesImplementation = {
-  get: jest.fn(),
-  remove: jest.fn(),
-};
-
-module.exports = () => mockCookiesImplementation;

package/shell/app.ts

@@ -1,38 +0,0 @@
-import { WidgetOperationTypes } from '../runtime';
-import { App } from '../types';
-import { Footer } from './footer';
-import { Header } from './header';
-
-const inactive = [
-  'org.openedx.frontend.role.login',
-  'org.openedx.frontend.role.register',
-  'org.openedx.frontend.role.resetPassword',
-  'org.openedx.frontend.role.confirmPassword',
-  'org.openedx.frontend.role.welcome'
-];
-
-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,
-      condition: {
-        inactive,
-      }
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.footer.main.v1',
-      id: 'org.openedx.frontend.widget.footer.main.v1',
-      op: WidgetOperationTypes.APPEND,
-      component: Footer,
-      condition: {
-        inactive,
-      }
-    },
-  ]
-};
-
-export default app;

package/shell/dev/devFooter/app.tsx

@@ -1,43 +0,0 @@
-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/devHeader/BarContext.tsx

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

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

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

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

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

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

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

@@ -1,53 +0,0 @@
-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/providers.tsx

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

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

@@ -1,18 +0,0 @@
-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: 'org.openedx.frontend.route.dev.home',
-    Component: HomePage,
-    handle: {
-      role: 'org.openedx.frontend.role.devHome'
-    }
-  }],
-  messages,
-};
-
-export default app;

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

@@ -1,27 +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': {
-    'home.content': 'Home content in French.'
-  },
-  fa: {},
-  'es-es': {},
-  'es-419': {},
-  el: {},
-  'de-de': {},
-  da: {},
-  bo: {},
-};

package/shell/dev/devHome/messages.ts

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