@openedx/frontend-app-learner-dashboard 1.0.0-alpha.1 → 1.0.0-alpha.11

package/package.json

@@ -1,14 +1,20 @@
 {
   "name": "@openedx/frontend-app-learner-dashboard",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.11",
   "description": "",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edx/frontend-app-learner-dashboard.git"
+    "url": "git+https://github.com/openedx/frontend-app-learner-dashboard.git"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./app.scss": "./dist/app.scss"
   },
-  "main": "src/index.ts",
   "files": [
-    "/src"
+    "/dist"
+  ],
+  "workspaces": [
+    "packages/*"
   ],
   "browserslist": [
     "extends @edx/browserslist-config"
@@ -17,13 +23,27 @@
     "*.css",
     "*.scss"
   ],
+  "atlasTranslations": {
+    "path": "translations/frontend-app-learner-dashboard/src/i18n/messages",
+    "dependencies": [
+      "@openedx/frontend-base"
+    ]
+  },
   "scripts": {
+    "build": "make build",
+    "build:packages": "make build-packages",
+    "clean": "make clean",
+    "clean:packages": "make clean-packages",
     "dev": "PORT=1996 PUBLIC_PATH=/learner-dashboard openedx dev",
+    "dev:site": "make dev-site",
+    "dev:packages": "make dev-packages",
     "i18n_extract": "openedx formatjs extract",
     "lint": "openedx lint .",
     "lint:fix": "openedx lint --fix .",
-    "snapshot": "openedx test --updateSnapshot",
-    "test": "openedx test --coverage --passWithNoTests"
+    "prepack": "npm run clean && npm run build",
+    "test": "openedx test --coverage --passWithNoTests",
+    "translations:pull": "openedx translations:pull",
+    "watch:build": "nodemon --exec 'npm run build'"
   },
   "author": "Open edX",
   "license": "AGPL-3.0",
@@ -41,44 +61,38 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@redux-devtools/extension": "3.3.0",
-    "@reduxjs/toolkit": "^2.0.0",
     "classnames": "^2.3.1",
-    "filesize": "^10.0.0",
     "font-awesome": "4.7.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "prop-types": "15.8.1",
-    "react-share": "^4.4.0",
-    "redux-logger": "3.0.6",
-    "redux-thunk": "2.4.2",
-    "reselect": "^4.0.0"
+    "react-share": "^5.2.2"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.5.0",
-    "@edx/react-unit-test-utils": "^4.0.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.14",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-expect-message": "^1.1.3",
     "jest-when": "^3.6.0",
+    "nodemon": "^3.1.14",
     "react-dev-utils": "^12.0.0",
-    "react-test-renderer": "^18.3.1",
-    "redux-mock-store": "^1.5.4"
+    "tsc-alias": "^1.8.16",
+    "turbo": "^2.8.20"
   },
   "peerDependencies": {
-    "@openedx/frontend-base": "^1.0.0-alpha.1",
-    "@openedx/paragon": "^22",
+    "@openedx/frontend-base": "^1.0.0-alpha || 0.0.0-dev",
+    "@openedx/paragon": "^23",
     "@tanstack/react-query": "^5",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "react": "^18",
     "react-dom": "^18",
-    "react-redux": "^8",
     "react-router": "^6",
-    "react-router-dom": "^6",
-    "redux": "^4"
+    "react-router-dom": "^6"
   }
 }

package/src/Main.jsx

@@ -1,20 +0,0 @@
-import { Provider as ReduxProvider } from 'react-redux';
-import { CurrentAppProvider, PageWrap } from '@openedx/frontend-base';
-
-import { appId } from './constants';
-import store from './data/store';
-import Dashboard from './containers/Dashboard';
-
-import './app.scss';
-
-const Main = () => (
-  <CurrentAppProvider appId={appId}>
-    <ReduxProvider store={store}>
-      <PageWrap>
-        <Dashboard />
-      </PageWrap>
-    </ReduxProvider>
-  </CurrentAppProvider>
-);
-
-export default Main;

package/src/__mocks__/file.js

@@ -1 +0,0 @@
-module.exports = 'FileMock';

package/src/__mocks__/svg.js

@@ -1 +0,0 @@
-module.exports = 'SvgURL';

package/src/__snapshots__/App.test.jsx.snap

@@ -1,83 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`App router component component initialize failure snapshot 1`] = `
-<Fragment>
-  <div>
-    <AppWrapper>
-      <main
-        id="main"
-      >
-        <Alert
-          variant="danger"
-        >
-          <ErrorPage
-            message="If you experience repeated failures, please email support at test-support-url"
-          />
-        </Alert>
-      </main>
-    </AppWrapper>
-  </div>
-</Fragment>
-`;
-
-exports[`App router component component no network failure snapshot 1`] = `
-<Fragment>
-  <div>
-    <AppWrapper>
-      <main
-        id="main"
-      >
-        <Dashboard />
-      </main>
-    </AppWrapper>
-  </div>
-</Fragment>
-`;
-
-exports[`App router component component no network failure with optimizely project id snapshot 1`] = `
-<Fragment>
-  <div>
-    <AppWrapper>
-      <main
-        id="main"
-      >
-        <Dashboard />
-      </main>
-    </AppWrapper>
-  </div>
-</Fragment>
-`;
-
-exports[`App router component component no network failure with optimizely url snapshot 1`] = `
-<Fragment>
-  <div>
-    <AppWrapper>
-      <main
-        id="main"
-      >
-        <Dashboard />
-      </main>
-    </AppWrapper>
-  </div>
-</Fragment>
-`;
-
-exports[`App router component component refresh failure snapshot 1`] = `
-<Fragment>
-  <div>
-    <AppWrapper>
-      <main
-        id="main"
-      >
-        <Alert
-          variant="danger"
-        >
-          <ErrorPage
-            message="If you experience repeated failures, please email support at test-support-url"
-          />
-        </Alert>
-      </main>
-    </AppWrapper>
-  </div>
-</Fragment>
-`;

package/src/__snapshots__/index.test.jsx.snap

@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
-<UNDEFINED>
-  <ErrorPage
-    message="test-error-message"
-  />
-</UNDEFINED>
-`;
-
-exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<UNDEFINED>
-  <SiteProvider
-    store={
-      {
-        "redux": "store",
-      }
-    }
-  >
-    <NoticesWrapper>
-      <Routes>
-        <Route
-          element={
-            <PageWrap>
-              <App />
-            </PageWrap>
-          }
-          path="/"
-        />
-        <Route
-          element={
-            <Navigate
-              replace={true}
-              to="/"
-            />
-          }
-          path="*"
-        />
-      </Routes>
-    </NoticesWrapper>
-  </SiteProvider>
-</UNDEFINED>
-`;

package/src/app.scss

@@ -1,41 +0,0 @@
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
-
-$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
-
-#learnerDashboardRoot {
-  main {
-    flex-grow: 1;
-  }
-
-  // Removing a odd 1.5 scaling on checkboxes.:
-  input[type=checkbox] {
-    transform: none;
-  }
-
-  .text-ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .alert.alert-info .alert-icon {
-    color: black;
-  }
-
-  #paragon-portal-root {
-    .pgn__modal-layer {
-      .pgn__modal-close-container {
-        right: 1rem !important;
-      }
-    }
-    .confirm-modal .pgn__modal-body {
-      overflow: hidden;
-    }
-  }
-}

package/src/app.ts

@@ -1,23 +0,0 @@
-import { App } from '@openedx/frontend-base';
-import { appId } from './constants';
-import routes from './routes';
-import providers from './providers';
-import messages from './i18n';
-import slots from './slots';
-
-const app: App = {
-  appId,
-  routes,
-  providers,
-  messages,
-  slots,
-  config: {
-    LEARNING_BASE_URL: 'http://apps.local.openedx.io:2000',
-    ENABLE_PROGRAMS: false,
-    ECOMMERCE_BASE_URL: '',
-    ORDER_HISTORY_URL: '',
-    SUPPORT_URL: '',
-  }
-};
-
-export default app;

package/src/components/Banner.jsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Alert } from '@openedx/paragon';
-import { Info } from '@openedx/paragon/icons';
-
-export const Banner = ({
-  children, variant, icon, className,
-}) => (
-  <Alert variant={variant} className={className} icon={icon}>
-    {children}
-  </Alert>
-);
-Banner.defaultProps = {
-  icon: Info,
-  variant: 'info',
-  className: 'mb-0',
-};
-Banner.propTypes = {
-  variant: PropTypes.string,
-  icon: PropTypes.func,
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
-
-export default Banner;

package/src/components/Banner.test.jsx

@@ -1,27 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { Alert } from '@openedx/paragon';
-
-import Banner from './Banner';
-
-describe('Banner', () => {
-  const props = {
-    children: 'Hello, world!',
-  };
-  describe('snapshot', () => {
-    test('renders default banner', () => {
-      const wrapper = shallow(<Banner {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('renders with variants', () => {
-      const wrapper = shallow(<Banner {...props} variant="success" />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-
-      expect(wrapper.instance.findByType(Alert)[0].props.variant).toEqual('success');
-    });
-    test('renders with custom class', () => {
-      const wrapper = shallow(<Banner {...props} className="custom-class" />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-  });
-});

package/src/components/__snapshots__/Banner.test.jsx.snap

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Banner snapshot renders default banner 1`] = `
-<Alert
-  className="mb-0"
-  icon={[MockFunction icons.Info]}
-  variant="info"
->
-  Hello, world!
-</Alert>
-`;
-
-exports[`Banner snapshot renders with custom class 1`] = `
-<Alert
-  className="custom-class"
-  icon={[MockFunction icons.Info]}
-  variant="info"
->
-  Hello, world!
-</Alert>
-`;
-
-exports[`Banner snapshot renders with variants 1`] = `
-<Alert
-  className="mb-0"
-  icon={[MockFunction icons.Info]}
-  variant="success"
->
-  Hello, world!
-</Alert>
-`;

package/src/constants.ts

@@ -1 +0,0 @@
-export const appId = 'org.openedx.frontend.app.learnerDashboard';

package/src/containers/CourseCard/CourseCard.scss

@@ -1,75 +0,0 @@
-@import "@openedx/paragon/scss/core/core";
-
-.course-card {
-  .card {
-    .pgn__card-wrapper-image-cap.vertical {
-      display: flex;
-      min-height: $card-image-vertical-max-height;
-    }
-    .pgn__card-image-cap {
-      border-bottom-left-radius: 0 !important;
-    }
-    .overflow-visible {
-      overflow: visible;
-    }
-    .pgn__card-header-content {
-      margin-top: 1.5rem;
-    }
-    .pgn__card-footer {
-      flex-wrap: nowrap;
-
-      &.vertical {
-        flex-direction: column;
-      }
-
-      .pgn__action-row {
-        align-self: flex-end;
-        white-space: nowrap;
-      }
-    }
-
-    .course-card-verify-ribbon-container {
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      text-align: center;
-
-      .badge {
-        border-radius: 0;
-      }
-
-      > img {
-        width: 40px;
-        z-index: 1000;
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
-    }
-  }
-
-  .course-card-banners {
-    > .alert {
-      border-radius: 0;
-      box-shadow: none;
-      padding: map-get($spacers, 3) map-get($spacers, 4);
-
-      &:last-of-type {
-        border-bottom-left-radius: $alert-border-radius;
-        border-bottom-right-radius: $alert-border-radius;
-      }
-    }
-
-    .related-programs-banner {
-      .related-programs-list-container {
-        list-style: none;
-        display: inline;
-
-        > li {
-          line-height: 1rem;
-        }
-      }
-    }
-  }
-}

package/src/containers/CourseCard/__snapshots__/index.test.jsx.snap

@@ -1,111 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CourseCard component snapshot: collapsed 1`] = `
-<div
-  className="mb-4.5 course-card"
-  data-testid="CourseCard"
-  id="test-card-id"
->
-  <Card
-    orientation="vertical"
-  >
-    <div
-      className="d-flex flex-column w-100"
-    >
-      <div>
-        <CourseCardImage
-          cardId="test-card-id"
-          orientation="horizontal"
-        />
-        <Card.Body>
-          <Card.Header
-            actions={
-              <CourseCardMenu
-                cardId="test-card-id"
-              />
-            }
-            title={
-              <CourseCardTitle
-                cardId="test-card-id"
-              />
-            }
-          />
-          <Card.Section
-            className="pt-0"
-          >
-            <CourseCardDetails
-              cardId="test-card-id"
-            />
-          </Card.Section>
-          <Card.Footer
-            orientation="vertical"
-          >
-            <CourseCardActions
-              cardId="test-card-id"
-            />
-          </Card.Footer>
-        </Card.Body>
-      </div>
-      <CourseCardBanners
-        cardId="test-card-id"
-      />
-    </div>
-  </Card>
-</div>
-`;
-
-exports[`CourseCard component snapshot: not collapsed 1`] = `
-<div
-  className="mb-4.5 course-card"
-  data-testid="CourseCard"
-  id="test-card-id"
->
-  <Card
-    orientation="horizontal"
-  >
-    <div
-      className="d-flex flex-column w-100"
-    >
-      <div
-        className="d-flex"
-      >
-        <CourseCardImage
-          cardId="test-card-id"
-          orientation="horizontal"
-        />
-        <Card.Body>
-          <Card.Header
-            actions={
-              <CourseCardMenu
-                cardId="test-card-id"
-              />
-            }
-            title={
-              <CourseCardTitle
-                cardId="test-card-id"
-              />
-            }
-          />
-          <Card.Section
-            className="pt-0"
-          >
-            <CourseCardDetails
-              cardId="test-card-id"
-            />
-          </Card.Section>
-          <Card.Footer
-            orientation="horizontal"
-          >
-            <CourseCardActions
-              cardId="test-card-id"
-            />
-          </Card.Footer>
-        </Card.Body>
-      </div>
-      <CourseCardBanners
-        cardId="test-card-id"
-      />
-    </div>
-  </Card>
-</div>
-`;

package/src/containers/CourseCard/components/CourseCardActions/ActionButton/__snapshots__/index.test.jsx.snap

@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ActionButton snapshot is collapsed 1`] = `
-<Button
-  arbitary="props"
-  size="sm"
-/>
-`;
-
-exports[`ActionButton snapshot is not collapsed 1`] = `
-<Button
-  arbitary="props"
-/>
-`;

package/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.js

@@ -1,8 +0,0 @@
-import { useWindowSize, breakpoints } from '@openedx/paragon';
-
-export const useIsCollapsed = () => {
-  const { width } = useWindowSize();
-  return width < breakpoints.medium.maxWidth && width > breakpoints.small.maxWidth;
-};
-
-export default useIsCollapsed;

package/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.test.js

@@ -1,21 +0,0 @@
-import { useWindowSize, breakpoints } from '@openedx/paragon';
-import useIsCollapsed from './hooks';
-
-describe('useIsCollapsed', () => {
-  it('returns true only when it is between medium and small', () => {
-    // make sure all three breakpoints gap is large enough for test
-    expect(
-      (breakpoints.large.maxWidth - 1)
-      > (breakpoints.medium.maxWidth - 1)
-      && (breakpoints.medium.maxWidth - 1)
-      > (breakpoints.small.maxWidth - 1),
-    ).toBe(true);
-
-    useWindowSize.mockReturnValue({ width: breakpoints.large.maxWidth - 1 });
-    expect(useIsCollapsed()).toEqual(false);
-    useWindowSize.mockReturnValue({ width: breakpoints.medium.maxWidth - 1 });
-    expect(useIsCollapsed()).toEqual(true);
-    useWindowSize.mockReturnValue({ width: breakpoints.small.maxWidth - 1 });
-    expect(useIsCollapsed()).toEqual(false);
-  });
-});

package/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Button } from '@openedx/paragon';
-
-import useIsCollapsed from './hooks';
-
-export const ActionButton = (props) => {
-  const isSmall = useIsCollapsed();
-  return (
-    <Button
-      {...props}
-      {...isSmall && { size: 'sm' }}
-    />
-  );
-};
-
-export default ActionButton;