@openedx/paragon 23.19.0 → 23.19.2

package/README.md

@@ -514,10 +514,34 @@ Paragon components can have different behavior in the MFE environment. `example`
 
 Steps to install the `example` app.
 
+To set up the example app with a local Tutor installation, you'll need to configure a Tutor plugin to handle CORS settings
+
+Prerequisites.
+
+Before running the example app, ensure you have a local Tutor installation configured.
+1. Create a new file (i.e. `paragon-example-app.py`) in your tutor plugins folder (`tutor plugins printroot` to get the path).
+2. Add the following content to the paragon-example-app.py file:
+```
+from tutor import hooks
+
+hooks.Filters.ENV_PATCHES.add_item(
+  (
+    "openedx-lms-development-settings",
+    """
+CORS_ORIGIN_WHITELIST.append("http://localhost:8080")
+LOGIN_REDIRECT_WHITELIST.append("http://localhost:8080")
+CSRF_TRUSTED_ORIGINS.append("http://localhost:8080")
+    """
+    )
+)
+```
+3. Enable the plugin: `tutor plugins enable paragon-example-app`
+4. Apply configuration changes: `tutor config save` && `tutor dev restart`
+
+Running the Example App:
 1. `npm install` to install dependencies.
-2. Launch any devstack. It is required for MFE to login into the system and set up configs.
-3. `npm run start-example-mfe` to start the app.
-4. Go to the `example/src/MyComponent.jsx` and use Paragon components inside the MFE environment.
+2. `npm run example:start` to start the app.
+3. Go to the `example/src/MyComponent.jsx` and use Paragon components inside the MFE environment.
 
 ## Semantic Release
 

package/dist/i18n/transifex-formatter.js

@@ -0,0 +1,3 @@
+exports.format = (messages) => Object.fromEntries(
+  Object.entries(messages).map(([id, { defaultMessage }]) => [id, defaultMessage])
+);

package/dist/theme-urls.json

@@ -1,5 +1,11 @@
 {
   "themeUrls": {
+    "core": {
+      "paths": {
+        "default": "./core.css",
+        "minified": "./core.min.css"
+      }
+    },
     "defaults": {
       "light": "light"
     },
@@ -10,12 +16,6 @@
           "minified": "./light.min.css"
         }
       }
-    },
-    "core": {
-      "paths": {
-        "default": "./core.css",
-        "minified": "./core.min.css"
-      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "23.19.0",
+  "version": "23.19.2",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -45,8 +45,7 @@
     "example:start": "npm start --workspace=example",
     "example:start:with-theme": "npm run start:with-theme --workspace=example",
     "generate-changelog": "node generate-changelog.js",
-    "i18n_compile": "formatjs compile-folder --format transifex ./src/i18n/messages ./src/i18n/messages",
-    "i18n_extract": "formatjs extract 'src/**/*.{jsx,js,tsx,ts}' --out-file ./src/i18n/transifex_input.json --ignore='**/*.d.ts' --format transifex",
+    "i18n_extract": "formatjs extract 'src/**/*.{jsx,js,tsx,ts}' --out-file ./src/i18n/transifex_input.json --ignore='**/*.d.ts' --format ./src/i18n/transifex-formatter.js",
     "type-check": "tsc --noEmit && tsc --project www --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
     "build-types": "tsc --emitDeclarationOnly",

package/src/Container/README.md

@@ -18,28 +18,28 @@ The base container to contain, pad, and center content in the viewport. This com
 
 ```jsx live
 <div style={{ overflowX: 'auto' }}>
-    <div style={{ width: '1500px', border: 'solid 3px red' }}>
-        <Container className="bg-danger-300 my-4">
+    <div style={{ width: '1500px', border: 'solid 3px var(--pgn-color-danger-700)' }}>
+        <Container className="bg-danger-700 text-white my-4">
           The content in this container doesn't have a max width
         </Container>
         
-        <Container size="xl" className="bg-danger-300 my-4">
+        <Container size="xl" className="bg-danger-700 text-white my-4">
           The content in this container won't exceed the extra large width.
         </Container>
         
-        <Container size="lg" className="bg-danger-300 mb-4">
+        <Container size="lg" className="bg-danger-700 text-white mb-4">
           The content in this container won't exceed the large width.
         </Container>
         
-        <Container size="md" className="bg-danger-300 mb-4">
+        <Container size="md" className="bg-danger-700 text-white mb-4">
           The content in this container won't exceed the medium width.
         </Container>
         
-        <Container size="sm" className="bg-danger-300 mb-4">
+        <Container size="sm" className="bg-danger-700 text-white mb-4">
           The content in this container won't exceed the small width.
         </Container>
         
-        <Container size="xs" className="bg-danger-300 mb-4">
+        <Container size="xs" className="bg-danger-700 text-white mb-4">
           The content in this container won't exceed the extra small width.
         </Container>
     </div>

package/src/i18n/transifex-formatter.js

@@ -0,0 +1,3 @@
+exports.format = (messages) => Object.fromEntries(
+  Object.entries(messages).map(([id, { defaultMessage }]) => [id, defaultMessage])
+);