feat: adds support for loading external theme CSS for MFEs #689

dcoa · 2024-05-10T06:26:11Z

Description:

This PR updates the original one #440 closer to the master branch and adds some extra tests.

Please read the original PR for additional context.

Warning

The dist folder is included in the PR for testing purposes and will be removed before the merge.
The PR should update the Paragon version once the official release is launched.

Merge checklist:

Consider running your code modifications in the included example app within frontend-platform. This can be done by running npm start and opening http://localhost:8080.
Consider testing your code modifications in another local micro-frontend using local aliases configured via the module.config.js file in frontend-build.
Verify your commit title/body conforms to the conventional commits format (e.g., fix, feat) and is appropriate for your code change. Consider whether your code is a breaking change, and modify your commit accordingly.

Post merge:

After the build finishes for the merged commit, verify the new release has been pushed to NPM.

openedx-webhooks · 2024-05-10T06:26:16Z

Thanks for the pull request, @dcoa!

This repository is currently maintained by @openedx/committers-frontend.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

codecov · 2024-05-10T06:28:42Z

Codecov Report

Attention: Patch coverage is 85.71429% with 47 lines in your changes missing coverage. Please review.

Project coverage is 84.14%. Comparing base (b0774f2) to head (1cff3e4).
Report is 2 commits behind head on master.

Files with missing lines	Patch %	Lines
src/react/hooks/paragon/useParagonThemeVariants.js	81.57%	19 Missing and 2 partials ⚠️
src/react/hooks/paragon/useParagonThemeCore.js	80.95%	15 Missing and 1 partial ⚠️
src/react/hooks/paragon/useParagonTheme.js	92.59%	4 Missing ⚠️
src/config.js	66.66%	2 Missing ⚠️
src/react/hooks/paragon/useParagonThemeUrls.js	94.28%	2 Missing ⚠️
src/react/reducers.js	84.61%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #689      +/-   ##
==========================================
+ Coverage   83.41%   84.14%   +0.73%     
==========================================
  Files          40       48       +8     
  Lines        1073     1394     +321     
  Branches      197      291      +94     
==========================================
+ Hits          895     1173     +278     
- Misses        166      206      +40     
- Partials       12       15       +3

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

GlugovGrGlib · 2024-05-11T06:59:39Z

docs/how_tos/theming.md

@@ -0,0 +1,204 @@
+# Theming support with `@edx/paragon` and `@edx/brand`


we need to refactor @edx/ to @openedx/ in docs, as since December npm packages for @openedx/paragon, @openedx/frontend-build, @openedx/frontend-plugin-framework, @openedx/brand-openedx
are published in the scope of @openedx/

@brian-smith-tcril I couldn't find frontend-platform among npm published packages, shouldn't it be published with @openedx scope as well?
https://www.npmjs.com/search?q=%40openedx

I think that one is still only published to the @edx scope. I agree it would be good to make the switch but it hasn't made it to the top of the priority list yet.

GlugovGrGlib · 2024-05-11T07:08:34Z

package.json

-    "@openedx/frontend-build": "14.0.3",
-    "@openedx/paragon": "22.3.2",
+    "@openedx/frontend-build": "github:edunext/frontend-build#dcoa/design-tokens-support",
+    "@openedx/paragon": "npm:@openedx/paragon@^22.0.0-alpha.25",


It might worth to wait for the Paragon sync PR to be merged, so we won't downgrade paragon requirements, and still will be able to use the latest version of paragon.

PKulkoRaccoonGang · 2024-05-20T10:24:21Z

@dcoa I'm getting an error during build related to the env.config.js file

SyntaxError: Unexpected token 'export'

I tried to solve it by changing the export to module.exports = { config }; I succeeded, but the content of the example application is not rendered on http://localhost:8080.

Have you encountered such a problem?

dcoa · 2024-05-21T11:12:36Z

@PKulkoRaccoonGang this is related to frontend-build changes, I'm checking right now

This line is making that the app is not rendering in frontend-platform https://github.com/openedx/frontend-build/pull/546/files#diff-22e13ddf245ea4fa81ca4d686dddf46fa9cbf70fbbff99991cccbf0c8ff82316R175

If you remove it, you will be able to see the app.

Update

I made an update to webpack dev config for example app and is working now.

PKulkoRaccoonGang

@dcoa This looks great! I have already started working on Update openedx/frontend-app-discussions. I left a few questions about the operation of some features and the code in general.

PKulkoRaccoonGang · 2024-05-24T13:28:17Z

docs/how_tos/theming.md

+`@openedx/frontend-platform` supports both `light` (required) and `dark` (optional) theme variants. The choice of which theme variant should be applied on page load is based on the following preference cascade:
+
+1. **Get theme preference from localStorage.** Supports persisting and loading the user's preference for their selected theme variant, until cleared.
+1. **Detect user system settings.** Rely on the `prefers-color-scheme` media query to detect if the user's system indicates a preference for dark mode. If so, use the default dark theme variant, if one is configured.


[question]: Is there now support for adding a dark/light theme (or other custom themes) when using locally installed Paragon CSS?

For example:

@use "@openedx/paragon/dist/core.min.css" as paragonCore; @use "@openedx/paragon/dist/light.min.css" as paragonLight; @use "@openedx/paragon/dist/dark.min.css" as paragonDark;

This works great using JS and MFE runtime configurations, but I have not been able to test it for local themes.

The hook will fallback in the installed themes files if the URL is not provided or is not working.

If you define only the CSS inside SCSS file you can use the prefers-color-scheme to support dark/light modes. But you can not create a custom switch.

Thank you! It would be great to explicitly indicate exactly how it is possible to use different imports for a light/dark theme in the documentation. I plan to do this in the migration documentation and for Paragon.

For example:

@use "@openedx/paragon/dist/core.min.css" as paragonCore; @import url('@openedx/paragon/dist/light.min.css') (prefers-color-scheme: light); @import url('@my-brand/dark.min.css') (prefers-color-scheme: dark);

100% agree that the information in your example should be part of the Paragon and migration documents.

This is a different approach, the explanation of how to use variants is below, in the title Basic theme URL configuration.

I will improve one of the examples to use dark mode, to make it more explicit.

PKulkoRaccoonGang · 2024-05-24T13:44:54Z

docs/how_tos/theming.md

+
+### Falling back to styles installed in consuming application
+
+If any of the configured external `PARAGON_THEME_URLS` fail to load for whatever reason (e.g., CDN is down, URL is incorrectly configured), `@openedx/paragon` will attempt to fallback to the relevant files installed in `node_modules` from the consuming application.


When trying to make sure that if all themes are not loaded successfully, themes from the local version of Paragon will be loaded, I encountered the following problems:

@PKulkoRaccoonGang thanks for the feedback, the fallback url was missing the publicPath I solved it.

We don’t receive undefined, but I couldn’t load styles from the locally installed Paragon package in node_modules. Could you check if getParagonThemeCss works correctly in a PR related to a frontend-build?

The problem here is related to tutor-mfe, they define BASE_URL as the MFE_HOST (you can see here) thing that is not 100% true in dev mode because the URL needs the PORT that is specific for each MFE (you can see here )

You can add in the settings:

MFE_CONFIG_OVERRIDES = { "discussions": { "BASE_URL": "http://apps.local.edly.io:2002" } }

PKulkoRaccoonGang · 2024-05-24T13:49:56Z

docs/how_tos/theming.md

+### Basic theme URL configuration
+
+Paragon supports 2 mechanisms for configuring the Paragon theme urls:
+* JavaScript-based configuration via `env.config.js`


[question]: This approach works great in MFE, but I encountered a problem in frontend-build/example, unfortunately, the styles are not loading for me. Is everything working correctly?

For example: I tried adding a Button component with Paragon and noticed that the styles with Paragon were not being applied to this component

PKulkoRaccoonGang · 2024-05-24T13:53:22Z

docs/how_tos/theming.md

+
+```shell
+https://cdn.jsdelivr.net/npm/@openedx/paragon@$paragonVersion/dist/core.min.css
+https://cdn.jsdelivr.net/npm/@openedx/paragon@$paragonVersion/dist/light.min.css


[question]: Is it worth adding an example of importing in SCSS format here? This also applies to the local import example @openedx/brand-openedx

For example:

@use "@openedx/paragon/dist/core.min.css" as paragonCore; @use "@openedx/paragon/dist/light.min.css" as paragonLight;

No, because the main intention here is to identify the version and load the external resource compatible with that specific version.

For example, my app has paragon 23.0.0-alpha.2, then the hook will replace $paragonVersion .

This is the definition
https://cdn.jsdelivr.net/npm/@openedx/paragon@$paragonVersion/dist/core.min.css

after processing
https://cdn.jsdelivr.net/npm/@openedx/paragon@$23.0.0-alpha.2/dist/core.min.css

Thanks for the explanation 💯

PKulkoRaccoonGang · 2024-05-24T14:06:19Z

src/react/hooks/paragon/useParagonThemeCore.test.js

+    global.PARAGON_THEME = {
+      paragon: {
+        version: '1.0.0',
+        themeUrls: {
+          core: {
+            fileName: 'core.min.css',
+          },
+          defaults: {
+            light: 'light',
+          },
+          variants: {
+            light: {
+              fileName: 'light.min.css',
+            },
+          },
+        },
+      },
+    };


[nit]: We also use this configuration for the test in the file src/react/hooks/paragon/useParagonThemeVariants.test.js
I suggest putting this code into a separate file and reusing it to test both hooks

I can get rid of this understanding that is being exported by frontend-build (including for testing)

Note: Once the frontend-build PR has been merged we need to update the devDependencies and peerDependencies

PKulkoRaccoonGang · 2024-05-24T14:19:39Z

src/react/hooks/paragon/useParagonThemeUrls.test.js

+    });
+
+    it('returns expected object when configuration is valid (both Paragon + brand)', () => {
+      const config = {


[optional]: I suggest reusing the config constant, which refers to an object with the necessary configuration for tests in this file. This will allow us to get rid of code duplication. What do you think?

I prefer leaving this section as it is. The important part here is PARAGON_THEME_URLS, which changes in each test. It's easier to understand this way, I think.

Good, I agree with you, thanks

src/react/hooks/paragon/useParagonThemeUrls.js

src/react/AppProvider.test.jsx

PKulkoRaccoonGang · 2024-05-24T14:32:38Z

src/react/AppProvider.test.jsx

+    });
+
+    it('calls useParagonTheme', () => {
+      const Component = (


[question]: Can we declare a global Сomponent constant for a block with paragon theme and brand tests and reuse it in tests?

I can declare the global component but this test doesn't cover the useParagonTheme behavior so it is not necessary to declare paragon theme and brand. This is focused on the setThemeVariant function and the theme state.

src/react/hooks/paragon/useParagonThemeUrls.js

brian-smith-tcril

Overall this is looking great! I left a suggestion to clarify the documentation is referring to design tokens, and a few comments noting PRs that need to land before this can.

Thank you so much for this!

brian-smith-tcril · 2024-07-30T15:54:21Z

docs/how_tos/theming.md

@@ -0,0 +1,250 @@
+# Theming support with `@openedx/paragon` and `@openedx/brand-openedx`


Suggested change

# Theming support with `@openedx/paragon` and `@openedx/brand-openedx`

# Theming support with `@openedx/paragon` and `@openedx/brand-openedx`

> [!IMPORTANT]

> This document describes theming with design tokens.

> Information on theming MFEs that do not yet have design tokens support:

> * https://github.com/openedx/brand-openedx

> Information on the design tokens project:

> * https://github.com/openedx/paragon/blob/master/docs/decisions/0019-scaling-styles-with-design-tokens.rst

> * https://github.com/openedx/paragon/tree/alpha?tab=readme-ov-file#design-tokens

package.json

brian-smith-tcril · 2024-07-30T16:05:17Z

package.json

@@ -76,7 +77,7 @@
  },
  "peerDependencies": {
    "@openedx/frontend-build": ">= 14.0.0",
-    "@openedx/paragon": ">= 21.5.7 < 23.0.0",
+    "@openedx/paragon": " 23.0.0-alpha.1 || >= 21.5.7 < 23.0.0",


Note
Waiting on Paragon alpha to be merged to master

…nts hook

dcoa · 2025-01-28T05:02:49Z

Hi @brian-smith-tcril, I updated the peerDependencies (limited to < 24) and rebased the code to master, in that way we can start the final review :)

brian-smith-tcril · 2025-01-28T15:23:03Z

That's wonderful news @dcoa!

I'm more than happy to start on the code side of the final review here!

Is there still a PR to an MFE (using Paragon 22) somewhere? Having a sandbox up that verifies this won't break anything when it lands makes merging this a lot less scary!

dcoa · 2025-01-28T21:29:34Z

@brian-smith-tcril we have this one openedx/frontend-app-discussions#731 but is not updated, if you can help me with that or if you prefer I can open a new one.

brian-smith-tcril · 2025-01-30T16:03:42Z

@brian-smith-tcril we have this one openedx/frontend-app-discussions#731 but is not updated, if you can help me with that or if you prefer I can open a new one.

That works! I'd be happy to update that one (or open a new one if updating it becomes a pain)

Edit: created openedx/frontend-app-discussions#750 (it seems to be working as expected)

brian-smith-tcril

Overall this is looking awesome! Super happy to see all the puzzle pieces coming together!

I left a few comments in there, mostly just notes in places where naming/comments don't make what's happening entirely clear.

Thank you so much for this!

.env.development

brian-smith-tcril · 2025-01-30T19:41:07Z

.gitignore

@@ -2,7 +2,6 @@
 .idea
 .vscode
 coverage
-dist


Just a reminder to myself that this needs to be changed back before this PR can land.

env.config.js

example/index.jsx

package.json

src/react/hooks/paragon/useParagonThemeVariants.js

brian-smith-tcril · 2025-01-31T17:38:50Z

src/react/hooks/paragon/useParagonThemeVariants.js

+  useEffect(() => {
+    // Call `onLoad` once both the paragon and brand theme variant are loaded.
+    if (isParagonThemeVariantLoaded && isBrandThemeVariantLoaded) {
+      onLoad();
+    }
+  }, [isParagonThemeVariantLoaded, isBrandThemeVariantLoaded, onLoad]);


Same note here about naming/description as my comment on useParagonThemeCore

src/react/hooks/paragon/useParagonThemeVariants.js

brian-smith-tcril · 2025-01-31T18:04:12Z

src/react/hooks/paragon/utils.js

+  return url.replaceAll(wildcardKeyword, localVersion);
+};
+
+export const isEmptyObject = (obj) => !obj || Object.keys(obj).length === 0;


It looks like someone did some investigation into performance of different ways to test for empty objects in js (https://stackoverflow.com/a/59787784) and found that using for-in is the fastest

Suggested change

export const isEmptyObject = (obj) => !obj || Object.keys(obj).length === 0;

export const isEmptyObject = (obj) => {

for (var i in obj) {

return false;

}

return true;

}

I don't think this is a required change at all, more just something fun I found when looking into it!

src/react/hooks/paragon/useParagonThemeVariants.js

src/config.js

adamstankiewicz · 2025-02-03T17:08:43Z

src/react/hooks/paragon/useParagonTheme.js

+ * @returns An array containing 2 elements: 1) an object containing the app
+ *  theme state, and 2) a dispatch function to mutate the app theme state.
+ */
+const useParagonTheme = (config) => {


[nit/consideration] Likely could simplify the usage of this hook slightly, as I believe getConfig could be called directly within this hook, where appropriate, versus needing to pass the config object as a function parameter.

For example, would it make sense to call getConfig within useParagonThemeUrls directly instead of passing config variable around?

Yeah, I think this make sense because the configuration variables tend to be loaded at the init (ideally once) and not change during the user navigation. I will made the suggested change.

adamstankiewicz · 2025-02-03T17:13:18Z

src/react/AppProvider.jsx

+  if (!paragonThemeState?.isThemeLoaded) {
+    return null;
+  }


[sanity check] Given when this code path is executed, the entire MFE app is rendered as a blank white screen, I'm wondering if we have sufficient observability for when we return null here, after any actual async loading has finished/resolved.

For example, if there's an issue with the CDN and we also fail to fallback to using the CSS source files from the locally installed @openedx/paragon and @edx/brand packages, and the MFE returns a blank white screen, will we sufficiently get alerted to it via logError, etc.?

adamstankiewicz · 2025-02-03T17:17:47Z

src/react/hooks/paragon/useParagonThemeCore.js

+  useEffect(() => {
+    // Call `onLoad` once both the paragon and brand theme core are loaded.
+    if (isParagonThemeCoreLoaded && isBrandThemeCoreLoaded) {
+      onLoad();
+    }
+  }, [isParagonThemeCoreLoaded, isBrandThemeCoreLoaded, onLoad]);


Would something like resolve or complete be more generically applicable to the cases of legit loading vs the other scenarios "loading" was set truthy?

For example

setIsParagonThemeCoreResolved and onResolve

setIsParagonThemeCoreComplete and onComplete

Rationale: indicates that the async process is "done" vs. "loaded".

adamstankiewicz · 2025-02-03T17:19:05Z

src/react/hooks/paragon/useParagonThemeCore.js

+          logError(`Failed to load core theme CSS from ${url}`);
+          if (isFallbackThemeUrl) {
+            logError(`Could not load core theme CSS from ${url} or fallback URL. Aborting.`);


[curious] Any concerns around having two logError function calls within the same code path? I.e., if isFallbackThemeUrl is truthy here, would we have logged basically the same error twice (with slightly differing error messages)?

adamstankiewicz · 2025-02-03T17:20:22Z

src/react/hooks/paragon/useParagonThemeCore.js

+            if (isBrandOverride) {
+              setIsBrandThemeCoreLoaded(true);
+            } else {
+              setIsParagonThemeCoreLoaded(true);


[curious] Do we want to ensure coverage on the critical code paths within useParagonThemeCore, e.g. around loading? There's a few CodeCov annotations about missing coverage.

Yes, working on the overall coverage :)

adamstankiewicz · 2025-02-03T17:22:16Z

src/react/hooks/paragon/useParagonThemeVariants.js

+          logError(`Failed to load theme variant (${themeVariant}) CSS from ${value.urls.default}`);
+          if (isFallbackThemeUrl) {
+            logError(`Could not load theme variant (${themeVariant}) CSS from fallback URL. Aborting.`);


[curious] Similar question as above, regarding potential for calling logError twice for largely the same error, when isFallbackThemeUrl is truthy. Should we only call logError once in this case?

adamstankiewicz · 2025-02-03T17:22:46Z

src/react/hooks/paragon/useParagonThemeVariants.js

+          logError(`Failed to load theme variant (${themeVariant}) CSS from ${value.urls.default}`);
+          if (isFallbackThemeUrl) {
+            logError(`Could not load theme variant (${themeVariant}) CSS from fallback URL. Aborting.`);
+            if (isBrandOverride) {


Similar question around test coverage on some of the uncovered code paths within this hook.

adamstankiewicz · 2025-02-03T17:27:33Z

src/react/index.js

@@ -13,4 +13,5 @@ export { default as ErrorBoundary } from './ErrorBoundary';
 export { default as ErrorPage } from './ErrorPage';
 export { default as LoginRedirect } from './LoginRedirect';
 export { default as PageWrap } from './PageWrap';
-export { useAppEvent } from './hooks';
+export { useAppEvent, useParagonTheme } from './hooks';
+export { paragonThemeActions } from './reducers';


[sanity check / clarification] Can you expand on why we've want to export paragonThemeActions to consumers? I believe the intent for consumers to manage switching theme variants is to use the paragonTheme.setThemeVariant function exposed within AppContext?

When will consumers use the exported paragonThemeActions?

I can't think of a specific case where exporting paragonThemeActions would be necessary, if the AppContext is already exporting the main function to change the theme. In that context, useParagonTheme could be remove from the export list, as the current state is also exported by the context.

brian-smith-tcril · 2025-02-04T17:00:38Z

src/config.js

@@ -137,6 +137,16 @@ function extractRegex(envVar) {
  return undefined;
 }

+function parseParagonThemeUrls(paragonUrlsJson) {


I think it makes sense to check for a falsy value before trying to parse. Not having process.env.PARAGON_THEME_URLS set is not an error state, but should still return {}.

Then, assuming we make it past the falsy check, we can go into the try/catch. It would also be good to log errors that we catch in there.

I think specifically checking for err being a SyntaxError exception (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#exceptions) would be good. So something like

try { return JSON.parse(paragonUrlsJson); } catch (err) { if (err instanceof SyntaxError) { // log something about not being able to parse the json and it possibly being invalid. // maybe also log something about what to expect themes to look like when {} is returned return {}; } else { // not sure what to do here, if we're getting a different error type maybe we should just throw it? } }

…r Paragon hooks

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label May 10, 2024

dcoa force-pushed the dcoa/design-tokens-support branch from aee582b to e81b549 Compare May 11, 2024 00:23

dcoa requested a review from brian-smith-tcril May 11, 2024 00:49

dcoa changed the title ~~[WIP] feat: adds support for loading external theme CSS for MFEs~~ feat: adds support for loading external theme CSS for MFEs May 11, 2024

dcoa requested a review from adamstankiewicz May 11, 2024 00:49

GlugovGrGlib reviewed May 11, 2024

View reviewed changes

dcoa force-pushed the dcoa/design-tokens-support branch from 5b4c843 to ed293e3 Compare May 14, 2024 00:44

dcoa force-pushed the dcoa/design-tokens-support branch from 9ebae07 to 94e4a62 Compare May 23, 2024 23:06

dcoa mentioned this pull request May 24, 2024

Finalize work on PR 440 (https://github.com/openedx/frontend-platform/pull/440) openedx/paragon#3061

Open

PKulkoRaccoonGang reviewed May 24, 2024

View reviewed changes

dcoa force-pushed the dcoa/design-tokens-support branch 4 times, most recently from a6a9211 to 229d79a Compare June 3, 2024 03:24

dcoa force-pushed the dcoa/design-tokens-support branch 3 times, most recently from 06fc4e6 to 837858e Compare June 26, 2024 02:24

brian-smith-tcril mentioned this pull request Jul 29, 2024

chore: test build and platform updates openedx/frontend-app-discussions#731

Closed

4 tasks

brian-smith-tcril reviewed Jul 30, 2024

View reviewed changes

dcoa force-pushed the dcoa/design-tokens-support branch from 2565f02 to ae5b53f Compare August 12, 2024 10:09

bra-i-am mentioned this pull request Aug 12, 2024

refactor: update pkg with the latest updates of upstream eduNEXT/frontend-platform#8

Merged

1 task

dcoa added 7 commits January 28, 2025 15:09

refactor: create isEmptyObject and fallbackThemeUrl utils

cc6ee75

test: refactor testing fot app provider, theme core hook, theme varia…

0463238

…nts hook

docs: improve themening documentation

f003cf7

chore: update dependencies and regenerate package-lock

30dae98

temp: add dist folder for testing purposes

02f0c10

refactor: allow env PARAGON_THEME_URLS definition

d1e3db0

test: regenerate dist folder for testing

f3e31d1

dcoa force-pushed the dcoa/design-tokens-support branch from 92c3c83 to 1f90ea5 Compare January 28, 2025 04:12

refactor: update paragon version and scss to use css variables

e7eaffe

dcoa force-pushed the dcoa/design-tokens-support branch from 1f90ea5 to e7eaffe Compare January 28, 2025 04:26

test: update dist folder for testing

29364e3

brian-smith-tcril mentioned this pull request Jan 30, 2025

chore: test build and platform updates openedx/frontend-app-discussions#750

Draft

brian-smith-tcril reviewed Jan 31, 2025

View reviewed changes

dcoa force-pushed the dcoa/design-tokens-support branch from 4204364 to 45642c7 Compare February 3, 2025 10:37

brian-smith-tcril reviewed Feb 3, 2025

View reviewed changes

src/react/hooks/paragon/useParagonThemeVariants.js Outdated Show resolved Hide resolved

adamstankiewicz reviewed Feb 3, 2025

View reviewed changes

refactor: clean up unnecessary changes

54c6e00

dcoa force-pushed the dcoa/design-tokens-support branch from 45642c7 to 54c6e00 Compare February 4, 2025 04:07

refactor: create a function to parse the JSON env for paragon

bc22970

dcoa force-pushed the dcoa/design-tokens-support branch from b2d3856 to bc22970 Compare February 4, 2025 06:08

brian-smith-tcril reviewed Feb 4, 2025

View reviewed changes

refactor: use getConfig diractly in useParagonUrls

8300338

dcoa force-pushed the dcoa/design-tokens-support branch from a29f484 to 8300338 Compare February 5, 2025 01:17

dcoa added 2 commits February 6, 2025 15:35

refactor: validate paragonUrlsJson and remove direct module export fo…

e3211d9

…r Paragon hooks

test: increase coverage useParagonTheme

1cff3e4

dcoa force-pushed the dcoa/design-tokens-support branch from 2179fbf to 1cff3e4 Compare February 6, 2025 05:34

		@@ -0,0 +1,204 @@
		# Theming support with `@edx/paragon` and `@edx/brand`


		### Falling back to styles installed in consuming application

		If any of the configured external `PARAGON_THEME_URLS` fail to load for whatever reason (e.g., CDN is down, URL is incorrectly configured), `@openedx/paragon` will attempt to fallback to the relevant files installed in `node_modules` from the consuming application.

		@@ -0,0 +1,250 @@
		# Theming support with `@openedx/paragon` and `@openedx/brand-openedx`

-# Theming support with `@openedx/paragon` and `@openedx/brand-openedx`
+# Theming support with `@openedx/paragon` and `@openedx/brand-openedx`
+> [!IMPORTANT]
+> This document describes theming with design tokens.
+> Information on theming MFEs that do not yet have design tokens support:
+> * https://github.com/openedx/brand-openedx
+> Information on the design tokens project:
+> * https://github.com/openedx/paragon/blob/master/docs/decisions/0019-scaling-styles-with-design-tokens.rst
+> * https://github.com/openedx/paragon/tree/alpha?tab=readme-ov-file#design-tokens

-export const isEmptyObject = (obj) => !obj || Object.keys(obj).length === 0;
+export const isEmptyObject = (obj) => {
+ for (var i in obj) {
+   return false;
+ }
+ return true;
+}

feat: adds support for loading external theme CSS for MFEs #689

Are you sure you want to change the base?

feat: adds support for loading external theme CSS for MFEs #689

Conversation

dcoa commented May 10, 2024 • edited Loading

openedx-webhooks commented May 10, 2024 • edited Loading

🔘 Get product approval

🔘 Provide context

🔘 Get a green build

Where can I find more information?

When can I expect my changes to be merged?

codecov bot commented May 10, 2024 • edited Loading

Codecov Report

GlugovGrGlib May 11, 2024 • edited Loading

Choose a reason for hiding this comment

GlugovGrGlib May 11, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PKulkoRaccoonGang commented May 20, 2024

dcoa commented May 21, 2024 • edited Loading

PKulkoRaccoonGang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dcoa May 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dcoa Jun 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dcoa May 28, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brian-smith-tcril left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dcoa commented Jan 28, 2025

brian-smith-tcril commented Jan 28, 2025

dcoa commented Jan 28, 2025

brian-smith-tcril commented Jan 30, 2025 • edited Loading

brian-smith-tcril left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dcoa Feb 4, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dcoa Feb 6, 2025 • edited Loading

Choose a reason for hiding this comment

brian-smith-tcril Feb 4, 2025 • edited Loading

Choose a reason for hiding this comment

dcoa commented May 10, 2024 •

edited

Loading

openedx-webhooks commented May 10, 2024 •

edited

Loading

codecov bot commented May 10, 2024 •

edited

Loading

GlugovGrGlib May 11, 2024 •

edited

Loading

GlugovGrGlib May 11, 2024 •

edited

Loading

dcoa commented May 21, 2024 •

edited

Loading

dcoa May 27, 2024 •

edited

Loading

dcoa Jun 1, 2024 •

edited

Loading

dcoa May 28, 2024 •

edited

Loading

brian-smith-tcril commented Jan 30, 2025 •

edited

Loading

dcoa Feb 4, 2025 •

edited

Loading

dcoa Feb 6, 2025 •

edited

Loading

brian-smith-tcril Feb 4, 2025 •

edited

Loading