From 284a43f73737a70074cba0de661cfda0d07f4592 Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Fri, 24 Jan 2025 13:28:57 -0500 Subject: [PATCH] move LearningResourceExpanded to main (#1987) Not sure this ever really belonged in ol-components. It is very specific to the application. Immediate motivation is to more easily use posthog within the component. --- frontends/main/package.json | 1 + .../DifferingRunsTable.test.tsx | 10 +- .../DifferingRunsTable.tsx | 2 +- .../InfoSection.test.tsx | 36 +- .../LearningResourceDrawer}/InfoSection.tsx | 7 +- .../LearningResourceDrawer.test.tsx | 6 +- .../LearningResourceDrawer.tsx | 7 +- .../LearningResourceExpanded.test.tsx | 22 +- .../LearningResourceExpanded.tsx | 23 +- .../LearningResourceDrawer}/VideoFrame.tsx | 2 +- .../LearningResourceDrawer/testUtils.ts | 309 ++++++++++++++++++ frontends/ol-components/package.json | 1 - .../LearningResourceExpanded.stories.tsx | 272 --------------- frontends/ol-components/src/index.ts | 1 - frontends/ol-utilities/package.json | 1 - yarn.lock | 11 +- 16 files changed, 369 insertions(+), 342 deletions(-) rename frontends/{ol-components/src/components/LearningResourceExpanded => main/src/page-components/LearningResourceDrawer}/DifferingRunsTable.test.tsx (82%) rename frontends/{ol-components/src/components/LearningResourceExpanded => main/src/page-components/LearningResourceDrawer}/DifferingRunsTable.tsx (98%) rename frontends/{ol-components/src/components/LearningResourceExpanded => main/src/page-components/LearningResourceDrawer}/InfoSection.test.tsx (84%) rename frontends/{ol-components/src/components/LearningResourceExpanded => main/src/page-components/LearningResourceDrawer}/InfoSection.tsx (98%) rename frontends/{ol-components/src/components/LearningResourceExpanded => main/src/page-components/LearningResourceDrawer}/LearningResourceExpanded.test.tsx (95%) rename frontends/{ol-components/src/components/LearningResourceExpanded => main/src/page-components/LearningResourceDrawer}/LearningResourceExpanded.tsx (97%) rename frontends/{ol-components/src/components/LearningResourceExpanded => main/src/page-components/LearningResourceDrawer}/VideoFrame.tsx (93%) create mode 100644 frontends/main/src/page-components/LearningResourceDrawer/testUtils.ts delete mode 100644 frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.stories.tsx diff --git a/frontends/main/package.json b/frontends/main/package.json index 1febc42c73..61b8c2434c 100644 --- a/frontends/main/package.json +++ b/frontends/main/package.json @@ -23,6 +23,7 @@ "@tanstack/react-query": "^4.36.1", "api": "workspace:*", "formik": "^2.4.6", + "iso-639-1": "^3.1.4", "lodash": "^4.17.21", "next": "^15.0.2", "next-nprogress-bar": "^2.4.2", diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/DifferingRunsTable.test.tsx b/frontends/main/src/page-components/LearningResourceDrawer/DifferingRunsTable.test.tsx similarity index 82% rename from frontends/ol-components/src/components/LearningResourceExpanded/DifferingRunsTable.test.tsx rename to frontends/main/src/page-components/LearningResourceDrawer/DifferingRunsTable.test.tsx index e85ff2512d..8bf4029eca 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/DifferingRunsTable.test.tsx +++ b/frontends/main/src/page-components/LearningResourceDrawer/DifferingRunsTable.test.tsx @@ -1,20 +1,20 @@ import React from "react" import { screen, within } from "@testing-library/react" -import { courses } from "../LearningResourceCard/testUtils" -import InfoSectionV2 from "./InfoSection" +import { courses } from "./testUtils" +import InfoSection from "./InfoSection" import { DeliveryEnumDescriptions } from "api" -import { renderWithTheme } from "../../test-utils" +import { renderWithTheme } from "@/test-utils" describe("Differing runs comparison table", () => { test("Does not appear if data is the same", () => { const course = courses.multipleRuns.sameData - renderWithTheme() + renderWithTheme() expect(screen.queryByTestId("differing-runs-table")).toBeNull() }) test("Appears if data is different", () => { const course = courses.multipleRuns.differentData - renderWithTheme() + renderWithTheme() const differingRunsTable = screen.getByTestId("differing-runs-table") expect(differingRunsTable).toBeInTheDocument() const onlineLabels = within(differingRunsTable).getAllByText( diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/DifferingRunsTable.tsx b/frontends/main/src/page-components/LearningResourceDrawer/DifferingRunsTable.tsx similarity index 98% rename from frontends/ol-components/src/components/LearningResourceExpanded/DifferingRunsTable.tsx rename to frontends/main/src/page-components/LearningResourceDrawer/DifferingRunsTable.tsx index 9d132a9c2e..ce8319f562 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/DifferingRunsTable.tsx +++ b/frontends/main/src/page-components/LearningResourceDrawer/DifferingRunsTable.tsx @@ -1,6 +1,6 @@ import React from "react" import styled from "@emotion/styled" -import { theme } from "../ThemeProvider/ThemeProvider" +import { theme } from "ol-components" import { LearningResource } from "api" import { allRunsAreIdentical, diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.test.tsx b/frontends/main/src/page-components/LearningResourceDrawer/InfoSection.test.tsx similarity index 84% rename from frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.test.tsx rename to frontends/main/src/page-components/LearningResourceDrawer/InfoSection.test.tsx index 125a91f9d0..06383cfc32 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.test.tsx +++ b/frontends/main/src/page-components/LearningResourceDrawer/InfoSection.test.tsx @@ -1,7 +1,7 @@ import React from "react" import { screen, within } from "@testing-library/react" -import { courses } from "../LearningResourceCard/testUtils" -import InfoSectionV2 from "./InfoSection" +import { courses } from "./testUtils" +import InfoSection from "./InfoSection" import { formatRunDate } from "ol-utilities" import invariant from "tiny-invariant" import user from "@testing-library/user-event" @@ -12,7 +12,7 @@ const SEPARATOR = "|​" describe("Learning resource info section pricing", () => { test("Free course, no certificate", () => { - renderWithTheme() + renderWithTheme() screen.getByText("Free") expect(screen.queryByText("Paid")).toBeNull() @@ -22,7 +22,7 @@ describe("Learning resource info section pricing", () => { test("Free course, with certificate, one price", () => { renderWithTheme( - , + , ) screen.getByText("Free") @@ -33,7 +33,7 @@ describe("Learning resource info section pricing", () => { test("Free course, with certificate, price range", () => { renderWithTheme( - , + , ) screen.getByText("Free") @@ -44,7 +44,7 @@ describe("Learning resource info section pricing", () => { test("Unknown price, no certificate", () => { renderWithTheme( - , + , ) screen.getByText("Paid") @@ -55,7 +55,7 @@ describe("Learning resource info section pricing", () => { test("Unknown price, with certificate", () => { renderWithTheme( - , + , ) screen.getByText("Paid") @@ -67,9 +67,7 @@ describe("Learning resource info section pricing", () => { }) test("Paid course, no certificate", () => { - renderWithTheme( - , - ) + renderWithTheme() screen.getByText("$49") expect(screen.queryByText("Paid")).toBeNull() @@ -80,7 +78,7 @@ describe("Learning resource info section pricing", () => { test("Paid course, with certificate, one price", () => { renderWithTheme( - , + , ) screen.getByText("$49") @@ -91,7 +89,7 @@ describe("Learning resource info section pricing", () => { test("Paid course, with certificate, price range", () => { renderWithTheme( - , + , ) screen.getByText("$49 – $99") @@ -110,7 +108,7 @@ describe("Learning resource info section start date", () => { invariant(run) const runDate = formatRunDate(run, false) invariant(runDate) - renderWithTheme() + renderWithTheme() const section = screen.getByTestId("drawer-info-items") within(section).getByText("Starts:") @@ -123,7 +121,7 @@ describe("Learning resource info section start date", () => { invariant(run) const runDate = formatRunDate(run, true) invariant(runDate) - renderWithTheme() + renderWithTheme() const section = screen.getByTestId("drawer-info-items") const expectedDateText = `As taught in:${runDate}` @@ -145,7 +143,7 @@ describe("Learning resource info section start date", () => { .slice(0, 2) .join(SEPARATOR)}Show more` invariant(expectedDateText) - renderWithTheme() + renderWithTheme() const section = screen.getByTestId("drawer-info-items") within(section).getAllByText((_content, node) => { @@ -155,7 +153,7 @@ describe("Learning resource info section start date", () => { test("If data is different then dates, formats, locations and prices are not shown", () => { const course = courses.multipleRuns.differentData - renderWithTheme() + renderWithTheme() const section = screen.getByTestId("drawer-info-items") expect(within(section).queryByText("Starts:")).toBeNull() expect(within(section).queryByText("Price:")).toBeNull() @@ -166,7 +164,7 @@ describe("Learning resource info section start date", () => { test("Clicking the show more button should show more dates", async () => { const course = courses.multipleRuns.sameData const totalRuns = course.runs?.length ? course.runs.length : 0 - renderWithTheme() + renderWithTheme() const runDates = screen.getByTestId("drawer-run-dates") expect(runDates.children.length).toBe(3) @@ -179,7 +177,7 @@ describe("Learning resource info section start date", () => { describe("Learning resource info section format and location", () => { test("Multiple formats", () => { const course = courses.multipleFormats - renderWithTheme() + renderWithTheme() const section = screen.getByTestId("drawer-info-items") within(section).getAllByText((_content, node) => { @@ -193,7 +191,7 @@ describe("Learning resource info section format and location", () => { test("Single format", () => { const course = courses.singleFormat - renderWithTheme() + renderWithTheme() const section = screen.getByTestId("drawer-info-items") within(section).getAllByText((_content, node) => { diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx b/frontends/main/src/page-components/LearningResourceDrawer/InfoSection.tsx similarity index 98% rename from frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx rename to frontends/main/src/page-components/LearningResourceDrawer/InfoSection.tsx index 7a1267543e..3b68e7badb 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx +++ b/frontends/main/src/page-components/LearningResourceDrawer/InfoSection.tsx @@ -32,9 +32,8 @@ import { showStartAnytime, NoSSR, } from "ol-utilities" -import { theme } from "../ThemeProvider/ThemeProvider" +import { theme, Link } from "ol-components" import DifferingRunsTable from "./DifferingRunsTable" -import { Link } from "../Link/Link" const SeparatorContainer = styled.span({ padding: "0 8px", @@ -541,7 +540,7 @@ const InfoItem = ({ label, Icon, value }: InfoItemProps) => { ) } -const InfoSectionV2 = ({ resource }: { resource?: LearningResource }) => { +const InfoSection = ({ resource }: { resource?: LearningResource }) => { if (!resource) { return null } @@ -570,4 +569,4 @@ const InfoSectionV2 = ({ resource }: { resource?: LearningResource }) => { ) } -export default InfoSectionV2 +export default InfoSection diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx index 6460ba455a..faa1e76ba5 100644 --- a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx +++ b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx @@ -8,14 +8,14 @@ import { } from "@/test-utils" import LearningResourceDrawer from "./LearningResourceDrawer" import { urls, factories, setMockResponse } from "api/test-utils" -import { LearningResourceExpanded } from "ol-components" +import { LearningResourceExpanded } from "./LearningResourceExpanded" import { RESOURCE_DRAWER_QUERY_PARAM } from "@/common/urls" import { LearningResource, ResourceTypeEnum } from "api" import { makeUserSettings } from "@/test-utils/factories" import type { User } from "api/hooks/user" -jest.mock("ol-components", () => { - const actual = jest.requireActual("ol-components") +jest.mock("./LearningResourceExpanded", () => { + const actual = jest.requireActual("./LearningResourceExpanded") return { ...actual, LearningResourceExpanded: jest.fn(actual.LearningResourceExpanded), diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx index 56bb01aaea..230758ad01 100644 --- a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx +++ b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx @@ -1,9 +1,6 @@ import React, { Suspense, useEffect, useId, useMemo } from "react" -import { - RoutedDrawer, - LearningResourceExpanded, - imgConfigs, -} from "ol-components" +import { RoutedDrawer, imgConfigs } from "ol-components" +import { LearningResourceExpanded } from "./LearningResourceExpanded" import type { LearningResourceCardProps, RoutedDrawerProps, diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.test.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceExpanded.test.tsx similarity index 95% rename from frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.test.tsx rename to frontends/main/src/page-components/LearningResourceDrawer/LearningResourceExpanded.test.tsx index 41882b5c4d..1d47f49de0 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.test.tsx +++ b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceExpanded.test.tsx @@ -1,5 +1,4 @@ import React from "react" -import { BrowserRouter } from "react-router-dom" import { screen, within } from "@testing-library/react" import { @@ -11,10 +10,9 @@ import { ResourceTypeEnum } from "api" import { factories, setMockResponse, urls } from "api/test-utils" import invariant from "tiny-invariant" import type { LearningResource } from "api" -import { PLATFORM_LOGOS } from "../Logo/Logo" -import _ from "lodash" +import { PLATFORM_LOGOS } from "ol-components" import user from "@testing-library/user-event" -import { renderWithTheme } from "../../test-utils" +import { renderWithTheme } from "@/test-utils" const IMG_CONFIG: LearningResourceExpandedProps["imgConfig"] = { width: 385, @@ -33,15 +31,13 @@ const setup = (resource: LearningResource, isLearningPathEditor?: boolean) => { } setMockResponse.get(urls.userMe.get(), user) return renderWithTheme( - - - , + , ) } diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceExpanded.tsx similarity index 97% rename from frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx rename to frontends/main/src/page-components/LearningResourceDrawer/LearningResourceExpanded.tsx index fe2d3b894f..1704a4a799 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx +++ b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceExpanded.tsx @@ -1,6 +1,15 @@ import React, { useCallback, useEffect, useRef, useState } from "react" import styled from "@emotion/styled" -import Skeleton from "@mui/material/Skeleton" +import { + Skeleton, + theme, + PlatformLogo, + PLATFORM_LOGOS, + Link, + Input, + Typography, +} from "ol-components" +import type { ImageConfig, LearningResourceCardProps } from "ol-components" import { default as NextImage } from "next/image" import { ActionButton, @@ -23,16 +32,10 @@ import { RiShareLine, RiTwitterXLine, } from "@remixicon/react" -import type { ImageConfig } from "../../constants/imgConfigs" -import { theme } from "../ThemeProvider/ThemeProvider" -import { PlatformLogo, PLATFORM_LOGOS } from "../Logo/Logo" -import InfoSectionV2 from "./InfoSection" + +import InfoSection from "./InfoSection" import type { User } from "api/hooks/user" -import { LearningResourceCardProps } from "../LearningResourceCard/LearningResourceCard" import VideoFrame from "./VideoFrame" -import { Link } from "../Link/Link" -import { Input } from "../Input/Input" -import Typography from "@mui/material/Typography" const DRAWER_WIDTH = "900px" @@ -734,7 +737,7 @@ const LearningResourceExpanded: React.FC = ({ - + { + const resource = _makeResource(overrides) + if (resource.image) { + resource.image.url = + "https://ocw.mit.edu/courses/res-hso-001-mit-haystack-observatory-k12-stem-lesson-plans/mitres_hso_001.jpg" + } + if (resource.resource_type === ResourceTypeEnum.Video) { + resource.url = "https://www.youtube.com/watch?v=4A9bGL-_ilA" + } + return resource +} + +const resources = { + withoutImage: makeResource({ image: null }), + course: makeResource({ + resource_type: ResourceTypeEnum.Course, + }), + program: makeResource({ + resource_type: ResourceTypeEnum.Program, + }), + video: makeResource({ + resource_type: ResourceTypeEnum.Video, + url: "https://www.youtube.com/watch?v=-E9hf5RShzQ", + }), + videoPlaylist: makeResource({ + resource_type: ResourceTypeEnum.VideoPlaylist, + }), + podcast: makeResource({ + resource_type: ResourceTypeEnum.Podcast, + }), + podcastEpisode: makeResource({ + resource_type: ResourceTypeEnum.PodcastEpisode, + }), + learningPath: makeResource({ + resource_type: ResourceTypeEnum.LearningPath, + }), +} + +const sameDataRun = factories.learningResources.run({ + delivery: [ + { + code: DeliveryEnum.Online, + name: DeliveryEnumDescriptions.online, + }, + ], + resource_prices: [ + { amount: "0", currency: "USD" }, + { amount: "100", currency: "USD" }, + ], +}) +const courses = { + free: { + noCertificate: makeResource({ + resource_type: ResourceTypeEnum.Course, + runs: [factories.learningResources.run()], + free: true, + certification: false, + resource_prices: [{ amount: "0", currency: "USD" }], + }), + withCertificateOnePrice: makeResource({ + resource_type: ResourceTypeEnum.Course, + runs: [factories.learningResources.run()], + free: true, + certification: true, + certification_type: { + code: "completion", + name: "Certificate of Completion", + }, + resource_prices: [ + { amount: "0", currency: "USD" }, + { amount: "49", currency: "USD" }, + ], + }), + withCertificatePriceRange: makeResource({ + resource_type: ResourceTypeEnum.Course, + runs: [factories.learningResources.run()], + free: true, + certification: true, + certification_type: { + code: "completion", + name: "Certificate of Completion", + }, + resource_prices: [ + { amount: "0", currency: "USD" }, + { amount: "99", currency: "USD" }, + { amount: "49", currency: "USD" }, + ], + }), + multipleRuns: makeResource({ + resource_type: ResourceTypeEnum.Course, + runs: [ + factories.learningResources.run(), + factories.learningResources.run(), + factories.learningResources.run(), + factories.learningResources.run(), + ], + free: true, + certification: false, + prices: ["0"], + }), + anytime: makeResource({ + resource_type: ResourceTypeEnum.Course, + runs: [ + factories.learningResources.run({ + year: 2022, + semester: "Spring", + }), + ], + free: true, + certification: false, + prices: ["0"], + availability: "anytime", + }), + dated: makeResource({ + resource_type: ResourceTypeEnum.Course, + runs: [factories.learningResources.run()], + free: true, + certification: false, + prices: ["0"], + availability: "dated", + }), + }, + unknownPrice: { + noCertificate: makeResource({ + resource_type: ResourceTypeEnum.Course, + runs: [factories.learningResources.run()], + free: false, + certification: false, + resource_prices: [], + }), + withCertificate: makeResource({ + resource_type: ResourceTypeEnum.Course, + runs: [factories.learningResources.run()], + free: false, + certification: true, + certification_type: { + code: "completion", + name: "Certificate of Completion", + }, + resource_prices: [], + }), + }, + paid: { + withoutCertificate: makeResource({ + resource_type: ResourceTypeEnum.Course, + runs: [factories.learningResources.run()], + free: false, + certification: false, + resource_prices: [{ amount: "49", currency: "USD" }], + }), + withCerticateOnePrice: makeResource({ + resource_type: ResourceTypeEnum.Course, + runs: [factories.learningResources.run()], + free: false, + certification: true, + certification_type: { + code: "completion", + name: "Certificate of Completion", + }, + resource_prices: [{ amount: "49", currency: "USD" }], + }), + withCertificatePriceRange: makeResource({ + resource_type: ResourceTypeEnum.Course, + runs: [factories.learningResources.run()], + free: false, + certification: true, + certification_type: { + code: "completion", + name: "Certificate of Completion", + }, + resource_prices: [ + { amount: "49", currency: "USD" }, + { amount: "99", currency: "USD" }, + ], + }), + }, + start: { + anytime: makeResource({ + resource_type: ResourceTypeEnum.Course, + availability: "anytime", + }), + dated: makeResource({ + resource_type: ResourceTypeEnum.Course, + availability: "dated", + }), + }, + multipleRuns: { + sameData: makeResource({ + resource_type: ResourceTypeEnum.Course, + free: true, + certification: true, + runs: [ + factories.learningResources.run({ + delivery: sameDataRun.delivery, + resource_prices: sameDataRun.resource_prices, + location: sameDataRun.location, + }), + factories.learningResources.run({ + delivery: sameDataRun.delivery, + resource_prices: sameDataRun.resource_prices, + location: sameDataRun.location, + }), + factories.learningResources.run({ + delivery: sameDataRun.delivery, + resource_prices: sameDataRun.resource_prices, + location: sameDataRun.location, + }), + factories.learningResources.run({ + delivery: sameDataRun.delivery, + resource_prices: sameDataRun.resource_prices, + location: sameDataRun.location, + }), + ], + }), + differentData: makeResource({ + resource_type: ResourceTypeEnum.Course, + runs: [ + factories.learningResources.run({ + delivery: [ + { + code: DeliveryEnum.Online, + name: DeliveryEnumDescriptions.online, + }, + ], + resource_prices: [ + { amount: "0", currency: "USD" }, + { amount: "100", currency: "USD" }, + ], + }), + factories.learningResources.run({ + delivery: [ + { + code: DeliveryEnum.Online, + name: DeliveryEnumDescriptions.online, + }, + ], + resource_prices: [ + { amount: "0", currency: "USD" }, + { amount: "100", currency: "USD" }, + ], + }), + factories.learningResources.run({ + delivery: [ + { + code: DeliveryEnum.InPerson, + name: DeliveryEnumDescriptions.in_person, + }, + ], + resource_prices: [{ amount: "150", currency: "USD" }], + location: "Earth", + }), + factories.learningResources.run({ + delivery: [ + { + code: DeliveryEnum.InPerson, + name: DeliveryEnumDescriptions.in_person, + }, + ], + resource_prices: [{ amount: "150", currency: "USD" }], + location: "Earth", + }), + ], + }), + }, + multipleFormats: makeResource({ + resource_type: ResourceTypeEnum.Course, + location: "Earth", + delivery: [ + { + code: DeliveryEnum.Online, + name: DeliveryEnumDescriptions.online, + }, + { + code: DeliveryEnum.InPerson, + name: DeliveryEnumDescriptions.in_person, + }, + ], + runs: [ + factories.learningResources.run({ + delivery: sameDataRun.delivery, + resource_prices: sameDataRun.resource_prices, + location: sameDataRun.location, + }), + ], + }), + singleFormat: makeResource({ + resource_type: ResourceTypeEnum.Course, + delivery: [ + { + code: DeliveryEnum.Online, + name: DeliveryEnumDescriptions.online, + }, + ], + runs: [ + factories.learningResources.run({ + delivery: sameDataRun.delivery, + resource_prices: sameDataRun.resource_prices, + location: sameDataRun.location, + }), + ], + }), +} + +export { resources, courses } diff --git a/frontends/ol-components/package.json b/frontends/ol-components/package.json index 2007cb583c..4d262c2d26 100644 --- a/frontends/ol-components/package.json +++ b/frontends/ol-components/package.json @@ -29,7 +29,6 @@ "@types/tinycolor2": "^1.4.6", "api": "workspace:*", "classnames": "^2.5.1", - "iso-639-1": "^3.1.2", "lodash": "^4.17.21", "material-ui-popup-state": "^5.1.0", "next": "^15.0.2", diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.stories.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.stories.tsx deleted file mode 100644 index 1e1edaacf9..0000000000 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.stories.tsx +++ /dev/null @@ -1,272 +0,0 @@ -import React from "react" -import type { Meta, StoryObj } from "@storybook/react" -import { LearningResourceExpanded } from "./LearningResourceExpanded" -import { factories } from "api/test-utils" -import { ResourceTypeEnum as LRT } from "api" -import invariant from "tiny-invariant" -import Drawer from "@mui/material/Drawer" -import { BrowserRouter } from "react-router-dom" - -const _makeResource = factories.learningResources.resource - -const makeResource: typeof _makeResource = (overrides) => { - const resource = _makeResource(overrides) - invariant(resource.image) - resource.image.url = "/mitres_hso_001.jpg" - return resource -} - -const meta: Meta = { - title: "smoot-design/LearningResourceExpanded", - component: LearningResourceExpanded, - args: { - imgConfig: { - width: 385, - height: 200, - }, - }, - argTypes: { - resource: { - options: ["Loading", ...Object.values(LRT)], - mapping: { - Loading: undefined, - [LRT.Course]: makeResource({ resource_type: LRT.Course }), - [LRT.Program]: makeResource({ resource_type: LRT.Program }), - [LRT.Video]: makeResource({ - resource_type: LRT.Video, - url: "https://www.youtube.com/watch?v=-E9hf5RShzQ", - }), - [LRT.VideoPlaylist]: makeResource({ - resource_type: LRT.VideoPlaylist, - }), - [LRT.Podcast]: makeResource({ resource_type: LRT.Podcast }), - [LRT.PodcastEpisode]: makeResource({ - resource_type: LRT.PodcastEpisode, - }), - [LRT.LearningPath]: makeResource({ - resource_type: LRT.LearningPath, - }), - }, - }, - }, - render: (args) => { - return ( - - - - - - ) - }, -} - -export default meta - -type Story = StoryObj - -export const Course: Story = { - args: { - resource: makeResource({ - resource_type: LRT.Course, - runs: [factories.learningResources.run()], - }), - }, -} - -export const CourseMultipleRuns: Story = { - args: { - resource: makeResource({ - resource_type: LRT.Course, - runs: [ - factories.learningResources.run(), - factories.learningResources.run(), - factories.learningResources.run(), - ], - }), - }, -} - -export const LearningPath: Story = { - args: { - resource: makeResource({ resource_type: LRT.LearningPath }), - }, -} - -export const Program: Story = { - args: { - resource: makeResource({ resource_type: LRT.Program }), - }, -} - -export const Podcast: Story = { - args: { - resource: makeResource({ resource_type: LRT.Podcast }), - }, -} - -export const PodcastEpisode: Story = { - args: { - resource: makeResource({ resource_type: LRT.PodcastEpisode }), - }, -} - -export const Video: Story = { - args: { - resource: makeResource({ - resource_type: LRT.Video, - url: "https://www.youtube.com/watch?v=4A9bGL-_ilA", - }), - }, -} - -export const VideoPlaylist: Story = { - args: { - resource: makeResource({ - resource_type: LRT.VideoPlaylist, - }), - }, -} - -export const Loading: Story = { - args: { - resource: undefined, - }, -} - -export const PricingVariant1: Story = { - args: { - resource: makeResource({ - resource_type: LRT.Course, - title: "Free course with paid certificate option", - resource_prices: [ - { amount: "0", currency: "USD" }, - { amount: "49", currency: "USD" }, - ], - free: true, - certification: true, - }), - }, -} - -export const AsTaughtIn: Story = { - args: { - resource: makeResource({ - resource_type: LRT.Course, - availability: "anytime", - runs: [factories.learningResources.run()], - }), - }, -} - -export const AsTaughtInMultipleRuns: Story = { - args: { - resource: makeResource({ - resource_type: LRT.Course, - availability: "anytime", - runs: [ - factories.learningResources.run({ - semester: "Fall", - year: 2023, - }), - factories.learningResources.run(), - ], - }), - }, -} - -export const PricingVariant2: Story = { - args: { - resource: makeResource({ - resource_type: LRT.Course, - title: "Certificated course with range of prices", - prices: ["950", "999"], - free: false, - certification: true, - }), - }, -} - -export const PricingVariant3: Story = { - args: { - resource: makeResource({ - resource_type: LRT.Course, - title: "Course with range of prices, not certificated", - prices: ["950", "999"], - free: false, - certification: false, - }), - }, -} - -export const PricingVariant4: Story = { - args: { - resource: makeResource({ - resource_type: LRT.Course, - title: - "The course has a zero price option, but is marked not free (prices not ingested correctly)", - prices: ["0", "999"], - free: false, - certification: false, - }), - }, -} - -export const PricingVariant5: Story = { - args: { - resource: makeResource({ - resource_type: LRT.Course, - title: "Zero price returned, but free flag is false", - prices: ["0"], - free: false, - certification: false, - }), - }, -} - -export const PricingVariant6: Story = { - args: { - resource: makeResource({ - resource_type: LRT.Course, - title: "Free course, no certificate", - prices: ["0"], - free: true, - certification: false, - }), - }, -} - -export const PricingVariant7: Story = { - args: { - resource: makeResource({ - resource_type: LRT.Course, - title: "Course with no certificate, not free", - prices: ["500"], - free: false, - certification: false, - }), - }, -} - -export const PricingVariant8: Story = { - args: { - resource: makeResource({ - resource_type: LRT.Course, - title: "No prices available, no certificate, not free", - prices: [], - free: false, - certification: false, - }), - }, -} - -export const PricingVariant9: Story = { - args: { - resource: makeResource({ - resource_type: LRT.Course, - title: "No prices available, no certificate, free", - prices: [], - free: true, - certification: false, - }), - }, -} diff --git a/frontends/ol-components/src/index.ts b/frontends/ol-components/src/index.ts index 4a6fd38055..31c1ef6753 100644 --- a/frontends/ol-components/src/index.ts +++ b/frontends/ol-components/src/index.ts @@ -123,7 +123,6 @@ export * from "./components/LearningResourceCard/LearningResourceCard" export { LearningResourceListCard } from "./components/LearningResourceCard/LearningResourceListCard" export type { LearningResourceListCardProps } from "./components/LearningResourceCard/LearningResourceListCard" export * from "./components/LearningResourceCard/LearningResourceListCardCondensed" -export * from "./components/LearningResourceExpanded/LearningResourceExpanded" export * from "./components/LoadingSpinner/LoadingSpinner" export * from "./components/Logo/Logo" export * from "./components/NavDrawer/NavDrawer" diff --git a/frontends/ol-utilities/package.json b/frontends/ol-utilities/package.json index 1653bbba47..8a7deba262 100644 --- a/frontends/ol-utilities/package.json +++ b/frontends/ol-utilities/package.json @@ -21,7 +21,6 @@ "currency-symbol-map": "^5.1.0", "decimal.js-light": "^2.5.1", "html-entities": "^2.4.0", - "iso-639-1": "^3.1.0", "lodash": "^4.17.21", "moment": "^2.29.4", "qs": "^6.11.0", diff --git a/yarn.lock b/yarn.lock index 6a86ff229b..4609f287fd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11519,10 +11519,10 @@ __metadata: languageName: node linkType: hard -"iso-639-1@npm:^3.1.0, iso-639-1@npm:^3.1.2": - version: 3.1.3 - resolution: "iso-639-1@npm:3.1.3" - checksum: 10/a1fa0c5770fd6d70782b453c253fc352e260fc335a4a08b16d9cff33de4883c2f52cb5c85a41201412b7a5e5d558def2ca6d5a1fa42830bddf5e8365a8519c6a +"iso-639-1@npm:^3.1.4": + version: 3.1.4 + resolution: "iso-639-1@npm:3.1.4" + checksum: 10/864d1b4f5ea636493561fc800c88846882b8a280339a6be009f7f67092f8c193d2e1c150bd1f0a64de28466756694620d89e724b33d6ddf42ad804de3983b0e6 languageName: node linkType: hard @@ -12711,6 +12711,7 @@ __metadata: eslint-config-next: "npm:^14.2.7" formik: "npm:^2.4.6" http-proxy-middleware: "npm:^3.0.0" + iso-639-1: "npm:^3.1.4" jest: "npm:^29.7.0" jest-extended: "npm:^4.0.2" lodash: "npm:^4.17.21" @@ -14355,7 +14356,6 @@ __metadata: api: "workspace:*" classnames: "npm:^2.5.1" dotenv: "npm:^16.4.5" - iso-639-1: "npm:^3.1.2" lodash: "npm:^4.17.21" material-ui-popup-state: "npm:^5.1.0" next: "npm:^15.0.2" @@ -14412,7 +14412,6 @@ __metadata: currency-symbol-map: "npm:^5.1.0" decimal.js-light: "npm:^2.5.1" html-entities: "npm:^2.4.0" - iso-639-1: "npm:^3.1.0" lodash: "npm:^4.17.21" moment: "npm:^2.29.4" qs: "npm:^6.11.0"