From 31edde1071327b9221b9293efd1266452e42655d Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Mon, 27 May 2024 13:34:09 +0300 Subject: [PATCH 1/7] feat: implementation of Paragon design tokens refactor: code refactoring feat: necessary dependencies added refactor: corrected lint refactor: corrected sh refactor: added logs refactor: added temp frontend-platform dist refactor: updated run-build-for-gh-deps.sh refactor: corrected run-build-for-gh-deps.sh refactor: fixing the problem refactor: changed run build command feat: added header refactor: added dark theme and footer refactor: code refactoring --- .env.development | 2 + env.config.js | 25 ++++++ package.json | 2 +- run-build-for-gh-deps.sh | 100 +++++++++++++++++++++++ src/components/NavigationBar/navBar.scss | 17 ++-- src/components/TinyMCEEditor.jsx | 2 +- src/index.scss | 43 +++++----- 7 files changed, 155 insertions(+), 36 deletions(-) create mode 100644 env.config.js create mode 100644 run-build-for-gh-deps.sh diff --git a/.env.development b/.env.development index ae4b3cee5..84efc7037 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,5 @@ +# APP_ID='frontend-app-discussions' +# MFE_CONFIG_API_URL='http://localhost:18000/api/mfe_config/v1' NODE_ENV='development' PORT=2002 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload' diff --git a/env.config.js b/env.config.js new file mode 100644 index 000000000..21a322793 --- /dev/null +++ b/env.config.js @@ -0,0 +1,25 @@ +module.exports = { + PARAGON_THEME_URLS: { + core: { + urls: { + default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/core.min.css', + }, + }, + defaults: { + light: 'light', + dark: 'dark', + }, + variants: { + light: { + urls: { + default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/light.min.css', + }, + }, + dark: { + urls: { + default: 'https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css', + }, + }, + }, + }, +}; diff --git a/package.json b/package.json index aae2dd3ab..8730a0b96 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "extends @edx/browserslist-config" ], "scripts": { - "build": "fedx-scripts webpack", + "build": "sh run-build-for-gh-deps.sh", "i18n_extract": "fedx-scripts formatjs extract", "lint": "fedx-scripts eslint --ext .js --ext .jsx .", "lint:fix": "fedx-scripts eslint --ext .js --ext .jsx . --fix", diff --git a/run-build-for-gh-deps.sh b/run-build-for-gh-deps.sh new file mode 100644 index 000000000..dc0db9036 --- /dev/null +++ b/run-build-for-gh-deps.sh @@ -0,0 +1,100 @@ +#!/bin/bash + +log() { + echo "=============================== $1 ===============================" +} + +run_command() { + echo "\$ $1" + eval $1 +} + +log "Starting deployment script" +run_command "pwd" + +# frontend-platform +log "Processing frontend-platform" +run_command "cd node_modules/@edx/" || exit +log "Current directory: $(pwd)" +run_command "rm -rf frontend-platform" +run_command "mkdir frontend-platform" || exit +run_command "ls -l" +run_command "git clone -b Peter_Kulko/design-tokens-support --single-branch https://github.com/raccoongang/frontend-platform.git frontend-platform-temp" +run_command "cd frontend-platform-temp" || exit +log "Current directory: $(pwd)" +run_command "cat package.json" || exit +run_command "ls -l" +run_command "cp -r dist/. ../frontend-platform/" || exit +run_command "cd .." || exit +run_command "ls -l" +log "Current directory: $(pwd)" +run_command "rm -rf frontend-platform-temp" +run_command "cd frontend-platform" || exit +run_command "ls -l" +run_command "cd ../../.." +log "Current directory: $(pwd)" + +# frontend-build +log "Processing frontend-build" +run_command "cd node_modules/@openedx/" || exit +log "Current directory: $(pwd)" +run_command "rm -rf frontend-build" +run_command "git clone -b dcoa/design-tokens-support --single-branch https://github.com/eduNEXT/frontend-build.git" +run_command "cd frontend-build" || exit +log "Current directory: $(pwd)" +run_command "npm ci" +run_command "cd ../../.." || exit +log "Current directory: $(pwd)" + +# paragon +log "Processing paragon" +run_command "ls -l" +run_command "cd node_modules/@openedx/" || exit +log "Current directory: $(pwd)" +run_command "rm -rf paragon" +run_command "mkdir -p paragon" +run_command "cd paragon" || exit +log "Current directory: $(pwd)" +run_command "npm pack @openedx/paragon@23.0.0-alpha.2" +run_command "tar -xzf openedx-paragon-23.0.0-alpha.2.tgz --strip-components=1" +run_command "rm openedx-paragon-23.0.0-alpha.2.tgz" +run_command "cd ../../.." || exit +log "Current directory: $(pwd)" + +# frontend-component-header +log "Processing frontend-component-header" +run_command "cd node_modules/@edx/" || exit +log "Current directory: $(pwd)" +run_command "rm -rf frontend-component-header" +run_command "mkdir frontend-component-header" || exit +run_command "git clone -b Peter_Kulko/support-design-tokens --single-branch https://github.com/PKulkoRaccoonGang/frontend-component-header.git frontend-component-header-temp" +run_command "cd frontend-component-header-temp" || exit +log "Current directory: $(pwd)" +run_command "cp -r dist ../frontend-component-header/" || exit +run_command "cp -r package.json ../frontend-component-header/" || exit +run_command "cd .." +run_command "rm -rf frontend-component-header-temp" +run_command "cd ../.." || exit +log "Current directory: $(pwd)" + +# frontend-component-footer +log "Processing frontend-component-footer" +run_command "cd node_modules/@edx/" || exit +log "Current directory: $(pwd)" +run_command "rm -rf frontend-component-footer" +run_command "mkdir frontend-component-footer" || exit +run_command "git clone -b Peter_Kulko/support-design-tokens --single-branch https://github.com/PKulkoRaccoonGang/frontend-component-footer.git frontend-component-footer-temp" +run_command "cd frontend-component-footer-temp" || exit +log "Current directory: $(pwd)" +run_command "cp -r dist ../frontend-component-footer/" || exit +run_command "cp -r package.json ../frontend-component-footer/" || exit +run_command "cd .." +run_command "rm -rf frontend-component-footer-temp" +run_command "cd ../.." || exit +log "Current directory: $(pwd)" + +# webpack +log "Running webpack" +run_command "fedx-scripts webpack" + +log "Deployment script finished." diff --git a/src/components/NavigationBar/navBar.scss b/src/components/NavigationBar/navBar.scss index 04f01950b..f6862732f 100755 --- a/src/components/NavigationBar/navBar.scss +++ b/src/components/NavigationBar/navBar.scss @@ -1,8 +1,3 @@ -@import "~@edx/brand/paragon/fonts.scss"; -@import "~@edx/brand/paragon/variables.scss"; -@import "~@openedx/paragon/scss/core/core.scss"; -@import "~@edx/brand/paragon/overrides.scss"; - $fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome"; @@ -12,13 +7,13 @@ $fa-font-path: "~font-awesome/fonts"; .nav a, .nav button { &:hover { - background-color: $light-400; + background-color: var(--pgn-color-light-400); } } .nav a { &:not(.active):hover { - background-color: $light-400; + background-color: var(--pgn-color-light-400); border-bottom: none; } } @@ -30,7 +25,7 @@ $fa-font-path: "~font-awesome/fonts"; .nav-link { border-bottom: 4px solid transparent; border-top: 4px solid transparent; - color: $gray-700; + color: var(--pgn-color-gray-700); // temporary until we can remove .btn class from dropdowns border-left: 0; @@ -40,9 +35,9 @@ $fa-font-path: "~font-awesome/fonts"; &:hover, &:focus, &.active { - font-weight: $font-weight-normal; - color: $primary-500; - border-bottom-color: $primary-500; + font-weight: var(--pgn-typography-font-weight-normal); + color: var(--pgn-color-primary-500); + border-bottom-color: var(--pgn-color-primary-500); } } } diff --git a/src/components/TinyMCEEditor.jsx b/src/components/TinyMCEEditor.jsx index 510adf17e..65eb1a73c 100644 --- a/src/components/TinyMCEEditor.jsx +++ b/src/components/TinyMCEEditor.jsx @@ -35,7 +35,7 @@ import 'tinymce/plugins/charmap'; import 'tinymce/plugins/paste'; /* eslint import/no-webpack-loader-syntax: off */ // eslint-disable-next-line import/no-unresolved -import edxBrandCss from '!!raw-loader!sass-loader!../index.scss'; +import edxBrandCss from '!!raw-loader!../index.scss'; // eslint-disable-next-line import/no-unresolved import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.css'; // eslint-disable-next-line import/no-unresolved diff --git a/src/index.scss b/src/index.scss index 99c8a0a65..ec3e63db0 100755 --- a/src/index.scss +++ b/src/index.scss @@ -1,7 +1,4 @@ -@import "~@edx/brand/paragon/fonts.scss"; -@import "~@edx/brand/paragon/variables.scss"; -@import "~@openedx/paragon/scss/core/core.scss"; -@import "~@edx/brand/paragon/overrides.scss"; +@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints; @import "~@edx/frontend-component-footer/dist/footer"; @import "~@edx/frontend-component-header/dist/index"; @@ -41,23 +38,23 @@ body, } .text-staff-color { - color: $warning-700; + color: var(--pgn-color-warning-700); } .outline-staff-color { - outline: $warning-700 solid 2px; + outline: var(--pgn-color-warning-700) solid 2px; } .text-TA-color { - color: $success-700; + color: var(--pgn-color-success-700); } .outline-TA-color { - outline: $success-700 solid 2px; + outline: var(--pgn-color-success-700) solid 2px; } .outline-anonymous { - outline: $light-400 solid 2px; + outline: var(--pgn-color-light-400) solid 2px; } .font-size-8 { @@ -173,7 +170,7 @@ body, } .learner > a:hover { - background-color: $light-300; + background-color: var(--pgn-color-light-300); } .py-10px { @@ -252,12 +249,12 @@ header { } .border-light-400-2 { - border: 2px solid $light-400 !important; + border: 2px solid var(--pgn-color-light-400) !important; border-width: 2px !important; } .border-primary-500-2 { - border: 2px solid $primary-500 !important; + border: 2px solid var(--pgn-color-primary-500) !important; border-width: 2px !important; } @@ -383,8 +380,8 @@ header { } .btn-icon.btn-icon-primary:hover { - background-color: $light-300 !important; - color: $primary-500 !important + background-color: var(--pgn-color-light-300) !important; + color: var(--pgn-color-primary-500) !important } @@ -427,38 +424,38 @@ header { } .hover-button:hover { - background-color: $light-300 !important; + background-color: var(--pgn-color-light-300) !important; height: 36px !important; border: none !important; } .btn-tertiary:hover { - background-color: $light-300 !important; + background-color: var(--pgn-color-light-300) !important; } .nav-button-group { .nav-link { &:hover { - background-color: $light-300 !important; + background-color: var(--pgn-color-light-300) !important; } } .nav-link.active, .show>.nav-link { - background-color: $primary-500 !important; + background-color: var(--pgn-color-primary-500) !important; } } .course-tabs-navigation { .nav a { &:hover { - background-color: $light-300 !important;; + background-color: var(--pgn-color-light-300) !important;; } } } .btn-tertiary:disabled { - color: $gray-700 !important; + color: var(--pgn-color-gray-700) !important; background-color: transparent !important; } @@ -535,14 +532,14 @@ code { .post-preview, .discussion-comments { blockquote { - border-left: 2px solid $gray-200; + border-left: 2px solid var(--pgn-color-gray-200); margin-left: 1.5rem; padding-left: 1rem; } } .add-comment-btn { - border: 1px solid $light-300 !important; + border: 1px solid var(--pgn-color-light-300) !important; } .icon-size-24 { @@ -588,7 +585,7 @@ code { } th, td { - border: 1px dashed $gray-200; + border: 1px dashed var(--pgn-color-gray-200); padding: 0.4rem; white-space: nowrap; } From 12359827aab43c28b9c5a42721d5c8372862d377 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Sun, 30 Jun 2024 19:16:22 +0300 Subject: [PATCH 2/7] refactor: code refactoring --- .env.development | 2 -- 1 file changed, 2 deletions(-) diff --git a/.env.development b/.env.development index 84efc7037..ae4b3cee5 100644 --- a/.env.development +++ b/.env.development @@ -1,5 +1,3 @@ -# APP_ID='frontend-app-discussions' -# MFE_CONFIG_API_URL='http://localhost:18000/api/mfe_config/v1' NODE_ENV='development' PORT=2002 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload' From c3f68116a52331d093d5d84da3a99dd4d9e88d5c Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Sun, 30 Jun 2024 19:21:29 +0300 Subject: [PATCH 3/7] feat: added inline CSS --- env.config.js | 25 ------------------------- src/index.scss | 2 ++ 2 files changed, 2 insertions(+), 25 deletions(-) delete mode 100644 env.config.js diff --git a/env.config.js b/env.config.js deleted file mode 100644 index 21a322793..000000000 --- a/env.config.js +++ /dev/null @@ -1,25 +0,0 @@ -module.exports = { - PARAGON_THEME_URLS: { - core: { - urls: { - default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/core.min.css', - }, - }, - defaults: { - light: 'light', - dark: 'dark', - }, - variants: { - light: { - urls: { - default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/light.min.css', - }, - }, - dark: { - urls: { - default: 'https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css', - }, - }, - }, - }, -}; diff --git a/src/index.scss b/src/index.scss index ec3e63db0..17a7e7565 100755 --- a/src/index.scss +++ b/src/index.scss @@ -1,3 +1,5 @@ +@use "@openedx/paragon/dist/core.min.css" as paragonCore; +@use "@openedx/paragon/dist/light.min.css" as paragonLight; @use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints; @import "~@edx/frontend-component-footer/dist/footer"; From 115d744f101c5380d67dc4cb49e3ab0c075b6939 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Sun, 30 Jun 2024 21:47:57 +0300 Subject: [PATCH 4/7] feat: mfe runtime configurations --- src/index.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/index.scss b/src/index.scss index 17a7e7565..ec3e63db0 100755 --- a/src/index.scss +++ b/src/index.scss @@ -1,5 +1,3 @@ -@use "@openedx/paragon/dist/core.min.css" as paragonCore; -@use "@openedx/paragon/dist/light.min.css" as paragonLight; @use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints; @import "~@edx/frontend-component-footer/dist/footer"; From d4d0e5b108a2a1c2467668660c62fdef0d0584dd Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 4 Jul 2024 00:40:44 +0300 Subject: [PATCH 5/7] fix: fixed CommentsView color --- src/discussions/post-comments/comments/CommentsView.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/discussions/post-comments/comments/CommentsView.jsx b/src/discussions/post-comments/comments/CommentsView.jsx index fd82fe75a..64ea327e9 100644 --- a/src/discussions/post-comments/comments/CommentsView.jsx +++ b/src/discussions/post-comments/comments/CommentsView.jsx @@ -92,7 +92,7 @@ const CommentsView = ({ threadType }) => { variant="plain" block="true" className="card mb-4 px-0 border-0 py-10px mt-2 font-style font-weight-500 - line-height-24 text-primary-500" + line-height-24 text-primary-500 bg-white" onClick={handleAddResponse} data-testid="add-response" > From c63db8f20509765657e9cf69bcf61b973f17faa1 Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Mon, 22 Jul 2024 12:47:24 +0300 Subject: [PATCH 6/7] refactor: replaced fe platform dist --- run-build-for-gh-deps.sh | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/run-build-for-gh-deps.sh b/run-build-for-gh-deps.sh index dc0db9036..e6518f4f6 100644 --- a/run-build-for-gh-deps.sh +++ b/run-build-for-gh-deps.sh @@ -1,5 +1,7 @@ #!/bin/bash +# TODO: This file is temporary and will be removed after testing + log() { echo "=============================== $1 ===============================" } @@ -19,7 +21,7 @@ log "Current directory: $(pwd)" run_command "rm -rf frontend-platform" run_command "mkdir frontend-platform" || exit run_command "ls -l" -run_command "git clone -b Peter_Kulko/design-tokens-support --single-branch https://github.com/raccoongang/frontend-platform.git frontend-platform-temp" +run_command "git clone -b dcoa/design-tokens-support --single-branch https://github.com/eduNEXT/frontend-platform.git frontend-platform-temp" run_command "cd frontend-platform-temp" || exit log "Current directory: $(pwd)" run_command "cat package.json" || exit From 5c82405924c0fa489fb5b07e1a69fc80a40c52b0 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 27 Feb 2025 19:18:40 +0200 Subject: [PATCH 7/7] chore: updated run-build-for-gh-deps.sh --- run-build-for-gh-deps.sh | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/run-build-for-gh-deps.sh b/run-build-for-gh-deps.sh index e6518f4f6..3b440e431 100644 --- a/run-build-for-gh-deps.sh +++ b/run-build-for-gh-deps.sh @@ -41,7 +41,7 @@ log "Processing frontend-build" run_command "cd node_modules/@openedx/" || exit log "Current directory: $(pwd)" run_command "rm -rf frontend-build" -run_command "git clone -b dcoa/design-tokens-support --single-branch https://github.com/eduNEXT/frontend-build.git" +run_command "git clone -b master --single-branch https://github.com/openedx/frontend-build.git" run_command "cd frontend-build" || exit log "Current directory: $(pwd)" run_command "npm ci" @@ -57,9 +57,9 @@ run_command "rm -rf paragon" run_command "mkdir -p paragon" run_command "cd paragon" || exit log "Current directory: $(pwd)" -run_command "npm pack @openedx/paragon@23.0.0-alpha.2" -run_command "tar -xzf openedx-paragon-23.0.0-alpha.2.tgz --strip-components=1" -run_command "rm openedx-paragon-23.0.0-alpha.2.tgz" +run_command "npm pack @openedx/paragon@23.4.0" +run_command "tar -xzf openedx-paragon-23.4.0.tgz --strip-components=1" +run_command "rm openedx-paragon-23.4.0.tgz" run_command "cd ../../.." || exit log "Current directory: $(pwd)"