@openedx/frontend-base 1.0.0-alpha.4 → 1.0.0-alpha.41

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;

package/shell/dev/devUser/app.tsx

@@ -1,24 +0,0 @@
-import { WidgetOperationTypes } from '../../../runtime';
-import { App } from '../../../types';
-import LoginButton from '../../header/anonymous-menu/LoginButton';
-import RegisterButton from '../../header/anonymous-menu/RegisterButton';
-
-const app: App = {
-  appId: 'org.openedx.frontend.app.dev.user',
-  slots: [
-    {
-      slotId: 'org.openedx.frontend.slot.header.anonymousMenu.v1',
-      id: 'user.anonymousMenu.loginButton',
-      op: WidgetOperationTypes.APPEND,
-      component: LoginButton,
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.anonymousMenu.v1',
-      id: 'user.anonymousMenu.registerButton',
-      op: WidgetOperationTypes.APPEND,
-      component: RegisterButton,
-    },
-  ]
-};
-
-export default app;

package/shell/dev/slotShowcase/HorizontalSlotLayout.tsx

@@ -1,11 +0,0 @@
-import { useWidgets } from '../../../runtime';
-
-export default function HorizontalSlotLayout() {
-  const widgets = useWidgets();
-
-  return (
-    <div className="d-flex gap-3">
-      {widgets}
-    </div>
-  );
-}

package/shell/dev/slotShowcase/LayoutWithOptions.tsx

@@ -1,17 +0,0 @@
-import { useLayoutOptions, useWidgets } from '../../../runtime';
-
-export default function LayoutWithOptions() {
-  const widgets = useWidgets();
-  const options = useLayoutOptions();
-
-  const title = typeof options.title === 'string' ? options.title : 'Foo';
-
-  return (
-    <>
-      <div>Layout Title: <strong>{title}</strong></div>
-      <div>
-        {widgets}
-      </div>
-    </>
-  );
-}

package/shell/dev/slotShowcase/SlotShowcasePage.tsx

@@ -1,66 +0,0 @@
-import { Slot } from '../../../runtime';
-import HorizontalSlotLayout from './HorizontalSlotLayout';
-import LayoutWithOptions from './LayoutWithOptions';
-
-export default function SlotShowcasePage() {
-  return (
-    <div className="p-3">
-      <h1>Slot Showcase</h1>
-
-      <p>As a best practice, widgets should pass additional props (<code>...props</code>) to their rendered HTMLElement. This accomplishes two things:</p>
-      <ul>
-        <li>It allows custom layouts to add <code>className</code> and <code>style</code> props as necessary for the layout.</li>
-        <li>It allows widgets to be effectively &quot;wrapped&quot; by a parent component to alter their behavior.</li>
-      </ul>
-
-      <h3>Simple slot with default layout</h3>
-      <p>This slot has no opinionated layout, it just renders its children.</p>
-      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseSimple" />
-
-      <h3>Simple slot with default content and props</h3>
-      <p>This slot has default content, and it exposes a slot prop to widgets.</p>
-      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseSimpleWithDefaultContent" aSlotProp="hello!">
-        <div>Look, I&apos;m default content!</div>
-      </Slot>
-
-      <h2>UI Layout Operations</h2>
-
-      <h3>Slot with custom layout</h3>
-      <p>This slot uses a horizontal flexbox layout from a component.</p>
-      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseCustom" layout={HorizontalSlotLayout} />
-      <p>This slot uses a horizontal flexbox layout from a JSX element.</p>
-      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseCustom" layout={<HorizontalSlotLayout />} />
-
-      <h3>Slot with override custom layout</h3>
-      <p>This slot uses a horizontal flexbox layout, but it was added by a layout replace operation.</p>
-      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseCustomConfig" />
-
-      <h3>Slot with layout options</h3>
-      <p>These slots use a custom layout that takes options.  The first shows the default title, the second shows it set to &quot;Bar&quot;</p>
-      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault" layout={LayoutWithOptions} />
-      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions" layout={LayoutWithOptions} />
-
-      <h2>UI Widget Operations</h2>
-
-      <h3>Slot with prepended element</h3>
-      <p>This slot has a prepended element (and two appended elements).</p>
-      <Slot id="org.openedx.frontend.slot.dev.slotShowcasePrepending" />
-
-      <h3>Slot with inserted elements</h3>
-      <p>This slot has elements inserted before and after the second element. Also note that the insert operations are declared <em>before</em> the related element is declared, but can still insert themselves relative to it.</p>
-      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseInserting" />
-
-      <h3>Slot with replaced element</h3>
-      <p>This slot has an element replacing element two.</p>
-      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseReplacing" />
-
-      <h3>Slot with removed element</h3>
-      <p>This slot has removed element two (<code>WidgetOperationTypes.REMOVE</code>).</p>
-      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseRemoving" />
-
-      <h3>Slot with widget with options.</h3>
-      <p>Both widgets accept options.  The first shows the default title, the second shows it set to &quot;Bar&quot;</p>
-      <Slot id="org.openedx.frontend.slot.dev.slotShowcaseWidgetOptions" />
-    </div>
-  );
-}

package/shell/dev/slotShowcase/WidgetWithOptions.tsx

@@ -1,11 +0,0 @@
-import { useWidgetOptions } from '../../../runtime';
-
-export default function WidgetWithOptions() {
-  const options = useWidgetOptions();
-
-  const title = typeof options.title === 'string' ? options.title : 'Foo';
-
-  return (
-    <div>{title}</div>
-  );
-}