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

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/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/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',
-                ],
-            ],
-        },
-    },
-};

package/tools/dist/config-helpers/createConfig.js

@@ -1,13 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = createConfig;
-const webpack_merge_1 = require("webpack-merge");
-const getBaseConfig_1 = __importDefault(require("./getBaseConfig"));
-function createConfig(configType, configFragment = {}) {
-    const baseConfig = (0, getBaseConfig_1.default)(configType);
-    return (0, webpack_merge_1.merge)(baseConfig, configFragment);
-}
-;

package/tools/dist/config-helpers/createLintConfig.js

@@ -1,16 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = createLintConfig;
-const typescript_eslint_1 = __importDefault(require("typescript-eslint"));
-const types_1 = require("../types");
-const getBaseConfig_1 = __importDefault(require("./getBaseConfig"));
-function createLintConfig(...configs) {
-    const baseConfig = (0, getBaseConfig_1.default)(types_1.ConfigTypes.LINT);
-    return typescript_eslint_1.default.config({
-        extends: baseConfig,
-    }, ...configs);
-}
-;

package/tools/dist/config-helpers/getBaseConfig.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = getBaseConfig;
-const defaultConfigPaths_1 = require("../defaultConfigPaths");
-function getBaseConfig(configType) {
-    const configPaths = defaultConfigPaths_1.defaultConfigPaths[configType];
-    if (configPaths === undefined) {
-        throw new Error(`openedx: ${configType} is not a supported config type.`);
-    }
-    return require(require.resolve(configPaths[configPaths.length - 1]));
-}
-;

package/tools/dist/defaultConfigPaths.js

@@ -1,35 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultConfigPaths = void 0;
-const path_1 = __importDefault(require("path"));
-const types_1 = require("./types");
-// These config paths are tested in the order they're defined, so the last ones are the last fallback.
-exports.defaultConfigPaths = {
-    [types_1.ConfigTypes.BABEL]: [
-        path_1.default.resolve(process.cwd(), 'babel.config.js'),
-        path_1.default.resolve(__dirname, './babel/babel.config.js'),
-    ],
-    [types_1.ConfigTypes.WEBPACK_BUILD]: [
-        path_1.default.resolve(process.cwd(), 'webpack.config.build.js'),
-        path_1.default.resolve(__dirname, './webpack/webpack.config.build.js'),
-    ],
-    [types_1.ConfigTypes.WEBPACK_DEV]: [
-        path_1.default.resolve(process.cwd(), 'webpack.config.dev.js'),
-        path_1.default.resolve(__dirname, './webpack/webpack.config.dev.js'),
-    ],
-    [types_1.ConfigTypes.WEBPACK_DEV_SHELL]: [
-        path_1.default.resolve(process.cwd(), 'webpack.config.dev.shell.js'),
-        path_1.default.resolve(__dirname, './webpack/webpack.config.dev.shell.js'),
-    ],
-    [types_1.ConfigTypes.LINT]: [
-        path_1.default.resolve(process.cwd(), 'eslint.config.js'),
-        path_1.default.resolve(__dirname, './eslint/base.eslint.config.js'),
-    ],
-    [types_1.ConfigTypes.TEST]: [
-        path_1.default.resolve(process.cwd(), 'jest.config.js'),
-        path_1.default.resolve(__dirname, './jest/jest.config.js'),
-    ],
-};

package/tools/dist/eslint/base.eslint.config.js

@@ -1,113 +0,0 @@
-"use strict";
-// @ts-check
-const { fixupPluginRules } = require('@eslint/compat');
-const eslint = require('@eslint/js');
-const formatjs = require('eslint-plugin-formatjs');
-const jest = require('eslint-plugin-jest');
-const jsxA11y = require('eslint-plugin-jsx-a11y');
-const react = require('eslint-plugin-react');
-const reactHooks = require('eslint-plugin-react-hooks');
-const globals = require('globals');
-const tseslint = require('typescript-eslint');
-const stylistic = require('@stylistic/eslint-plugin');
-module.exports = tseslint.config(eslint.configs.recommended, ...tseslint.configs.stylisticTypeChecked, ...tseslint.configs.recommended, stylistic.configs['recommended-flat'], {
-    ignores: [
-        'coverage/*',
-        'dist/*',
-        'node_modules/*',
-        '**/__mocks__/*',
-        '**/__snapshots__/*',
-    ],
-}, {
-    languageOptions: {
-        parserOptions: {
-            projectService: true,
-        }
-    }
-}, {
-    languageOptions: {
-        ...(react.configs.flat !== undefined ? react.configs.flat.recommended.languageOptions : {}),
-        globals: {
-            ...globals.browser,
-            ...globals.node,
-            ...globals.jest,
-            newrelic: 'readonly',
-        },
-    },
-    plugins: {
-        jest,
-        // Type assertion is workaround for incorrect TypeScript
-        // types in eslint-plugin-react
-        //
-        // TODO: Remove when types are fixed in eslint-plugin-react
-        // - https://github.com/jsx-eslint/eslint-plugin-react/issues/3838
-        react: /** @type {import('eslint').ESLint.Plugin} */ (react),
-        'react-hooks': fixupPluginRules(reactHooks),
-        formatjs,
-        'jsx-a11y': jsxA11y,
-    },
-    settings: {
-        react: {
-            version: 'detect',
-        }
-    }
-}, {
-    rules: {
-        // For some reasons the 'flat' key in react.configs is optional, so Typescript complains if
-        // we don't guard using it.  But... it exists in the export, so something's odd with their types.
-        ...(react.configs.flat !== undefined ? react.configs.flat.recommended.rules : {}),
-        ...(react.configs.flat !== undefined ? react.configs.flat['jsx-runtime'].rules : {}),
-        ...reactHooks.configs.recommended.rules,
-        '@typescript-eslint/no-explicit-any': 'off',
-        '@typescript-eslint/non-nullable-type-assertion-style': 'off',
-        'react/no-array-index-key': 'error',
-        'formatjs/enforce-description': ['error', 'literal'],
-        'jsx-a11y/label-has-associated-control': ['error', {
-                labelComponents: [],
-                labelAttributes: [],
-                controlComponents: [],
-                assert: 'htmlFor',
-                depth: 25,
-            }],
-        // https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/340#issuecomment-338424908
-        'jsx-a11y/anchor-is-valid': ['error', {
-                components: ['Link'],
-                specialLink: ['to'],
-            }],
-        '@typescript-eslint/no-unused-vars': ['error', {
-                caughtErrors: 'none',
-            }],
-        '@typescript-eslint/no-empty-function': 'off',
-        '@typescript-eslint/prefer-nullish-coalescing': 'off',
-        '@stylistic/semi': ['error', 'always', { omitLastInOneLineBlock: true, omitLastInOneLineClassBody: true }],
-        '@stylistic/quotes': ['error', 'single', {
-                avoidEscape: true,
-                allowTemplateLiterals: true,
-            }],
-        '@stylistic/comma-dangle': 'off',
-        '@stylistic/quote-props': ['error', 'as-needed'],
-        '@stylistic/arrow-parens': 'off',
-        '@stylistic/jsx-one-expression-per-line': 'off',
-        '@stylistic/multiline-ternary': 'off',
-        '@stylistic/brace-style': ['error', '1tbs'],
-        '@stylistic/member-delimiter-style': ['error', {
-                multiline: {
-                    delimiter: 'comma',
-                    requireLast: true,
-                },
-                singleline: {
-                    delimiter: 'comma',
-                    requireLast: false,
-                }
-            }],
-    },
-}, {
-    files: [
-        'babel.config.js',
-        'jest.config.js',
-        'eslint.config.js'
-    ],
-    rules: {
-        '@typescript-eslint/no-require-imports': 'off'
-    }
-});

package/tools/dist/index.js

@@ -1,12 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBaseConfig = exports.createLintConfig = exports.createConfig = void 0;
-var createConfig_1 = require("./config-helpers/createConfig");
-Object.defineProperty(exports, "createConfig", { enumerable: true, get: function () { return __importDefault(createConfig_1).default; } });
-var createLintConfig_1 = require("./config-helpers/createLintConfig");
-Object.defineProperty(exports, "createLintConfig", { enumerable: true, get: function () { return __importDefault(createLintConfig_1).default; } });
-var getBaseConfig_1 = require("./config-helpers/getBaseConfig");
-Object.defineProperty(exports, "getBaseConfig", { enumerable: true, get: function () { return __importDefault(getBaseConfig_1).default; } });

package/tools/dist/types.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CommandTypes = exports.ConfigTypes = void 0;
-var ConfigTypes;
-(function (ConfigTypes) {
-    ConfigTypes["BABEL"] = "babel";
-    ConfigTypes["WEBPACK_BUILD"] = "webpack-build";
-    ConfigTypes["WEBPACK_DEV"] = "webpack-dev";
-    ConfigTypes["WEBPACK_DEV_SHELL"] = "webpack-dev-shell";
-    ConfigTypes["LINT"] = "lint";
-    ConfigTypes["TEST"] = "test";
-})(ConfigTypes || (exports.ConfigTypes = ConfigTypes = {}));
-var CommandTypes;
-(function (CommandTypes) {
-    CommandTypes["LINT"] = "lint";
-    CommandTypes["TEST"] = "test";
-    CommandTypes["BUILD"] = "build";
-    CommandTypes["DEV_SHELL"] = "dev:shell";
-    CommandTypes["DEV"] = "dev";
-    CommandTypes["FORMAT_JS"] = "formatjs";
-    CommandTypes["SERVE"] = "serve";
-    CommandTypes["HELP"] = "help";
-})(CommandTypes || (exports.CommandTypes = CommandTypes = {}));