diff --git a/.github/workflows/github-pages-publish.yml b/.github/workflows/github-pages-publish.yml new file mode 100644 index 000000000000..0d8ffe9c4cf6 --- /dev/null +++ b/.github/workflows/github-pages-publish.yml @@ -0,0 +1,35 @@ +name: Deploy static content to Pages + +on: + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + with: + ref: gh-pages + - name: Setup Pages + uses: actions/configure-pages@v5 + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + # Upload entire repository + path: '.' + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.github/workflows/publish-demos.yml b/.github/workflows/publish-demos.yml new file mode 100644 index 000000000000..2eb12172935f --- /dev/null +++ b/.github/workflows/publish-demos.yml @@ -0,0 +1,218 @@ +name: Publish Demos to GH Pages + +on: + workflow_dispatch: + +jobs: + build-devextreme: + runs-on: ubuntu-latest + name: Build DevExtreme + timeout-minutes: 20 + + steps: + - name: Get sources + uses: actions/checkout@v4 + + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + + - name: Restore npm cache + uses: actions/cache@v4 + with: + path: '**/node_modules' + key: ${{ runner.os }}-node-modules-${{ hashFiles('package-lock.json') }} + restore-keys: ${{ runner.os }}-node-modules + + - name: DevExtreme - Install packages + run: npm install --no-audit --no-fund + + - name: DevExtreme - Build-all + env: + BUILD_TEST_INTERNAL_PACKAGE: true + run: npm run all:build + + - name: Move packages + run: | + mv ./packages/devextreme/artifacts/npm/devextreme/*.tgz ./devextreme-installer.tgz + mv ./packages/devextreme/artifacts/npm/devextreme-dist/*.tgz ./devextreme-dist-installer.tgz + mv ./packages/devextreme-angular/npm/dist/*.tgz ./devextreme-angular-installer.tgz + mv ./packages/devextreme-react/npm/*.tgz ./devextreme-react-installer.tgz + mv ./packages/devextreme-vue/npm/*.tgz ./devextreme-vue-installer.tgz + + - name: Copy build artifacts + uses: actions/upload-artifact@v4 + with: + name: devextreme-sources + path: | + devextreme-installer.tgz + devextreme-dist-installer.tgz + devextreme-angular-installer.tgz + devextreme-react-installer.tgz + devextreme-vue-installer.tgz + retention-days: 1 + + publish-ES: + runs-on: ubuntu-latest + needs: [build-devextreme] + steps: + - name: Get sources + uses: actions/checkout@v4 + + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + + - name: Install Dependencies + run: npm install + + - name: Download devextreme sources + uses: actions/download-artifact@v4 + with: + name: devextreme-sources + + # NOTE: workaround due to wrappers are incorrect NPM packages now + - name: Install wrappers packages + run: | + rm -rf node_modules/devextreme node_modules/devextreme-dist node_modules/devextreme-angular node_modules/devextreme-react node_modules/devextreme-vue + mkdir node_modules/devextreme node_modules/devextreme-dist node_modules/devextreme-angular node_modules/devextreme-react node_modules/devextreme-vue + tar -xzf devextreme-installer.tgz -C node_modules/devextreme + mv node_modules/devextreme/package/* node_modules/devextreme + tar -xzf devextreme-dist-installer.tgz -C node_modules/devextreme-dist + mv node_modules/devextreme-dist/package/* node_modules/devextreme-dist + tar -xzf devextreme-angular-installer.tgz -C node_modules/devextreme-angular + mv node_modules/devextreme-angular/package/* node_modules/devextreme-angular + tar -xzf devextreme-react-installer.tgz -C node_modules/devextreme-react + mv node_modules/devextreme-react/package/* node_modules/devextreme-react + tar -xzf devextreme-vue-installer.tgz -C node_modules/devextreme-vue + mv node_modules/devextreme-vue/package/* node_modules/devextreme-vue + + - name: Prepare configs + working-directory: apps/demos + run: npm run prepare-js + + - name: Copy metadata + working-directory: apps/demos + run: npm run make-demos-bundle -- --copy-metadata + + - name: Prepare React demo bundles + working-directory: apps/demos + run: npm run make-demos-bundle -- --framework React + + - name: Prepare Vue demo bundles + working-directory: apps/demos + run: npm run make-demos-bundle -- --framework Vue + + - name: Save publish-demos directory for ES as an artifact + uses: actions/upload-artifact@v3 + with: + name: publish-demos + path: ./apps/demos/publish-demos + + publish-angular: + runs-on: ubuntu-latest + needs: [build-devextreme] + strategy: + fail-fast: false + matrix: + include: + - name: Check generated demos (1/10) + command: CONSTEL=1/10 npm run make-demos-bundle -- --framework Angular + - name: Check generated demos (2/10) + command: CONSTEL=2/10 npm run make-demos-bundle -- --framework Angular + - name: Check generated demos (3/10) + command: CONSTEL=3/10 npm run make-demos-bundle -- --framework Angular + - name: Check generated demos (4/10) + command: CONSTEL=4/10 npm run make-demos-bundle -- --framework Angular + - name: Check generated demos (5/10) + command: CONSTEL=5/10 npm run make-demos-bundle -- --framework Angular + - name: Check generated demos (6/10) + command: CONSTEL=6/10 npm run make-demos-bundle -- --framework Angular + - name: Check generated demos (7/10) + command: CONSTEL=7/10 npm run make-demos-bundle -- --framework Angular + - name: Check generated demos (8/10) + command: CONSTEL=8/10 npm run make-demos-bundle -- --framework Angular + - name: Check generated demos (9/10) + command: CONSTEL=9/10 npm run make-demos-bundle -- --framework Angular + - name: Check generated demos (10/10) + command: CONSTEL=10/10 npm run make-demos-bundle -- --framework Angular + steps: + - name: Checkout code + uses: actions/checkout@v3 + + - name: Setup Node.js v18 + uses: actions/setup-node@v3 + with: + node-version: 18 + + - name: Install Dependencies + run: npm install + + - name: Download devextreme sources + uses: actions/download-artifact@v4 + with: + name: devextreme-sources + + # NOTE: workaround due to wrappers are incorrect NPM packages now + - name: Install wrappers packages + run: | + rm -rf node_modules/devextreme node_modules/devextreme-dist node_modules/devextreme-angular node_modules/devextreme-react node_modules/devextreme-vue + mkdir node_modules/devextreme node_modules/devextreme-dist node_modules/devextreme-angular node_modules/devextreme-react node_modules/devextreme-vue + tar -xzf devextreme-installer.tgz -C node_modules/devextreme + mv node_modules/devextreme/package/* node_modules/devextreme + tar -xzf devextreme-dist-installer.tgz -C node_modules/devextreme-dist + mv node_modules/devextreme-dist/package/* node_modules/devextreme-dist + tar -xzf devextreme-angular-installer.tgz -C node_modules/devextreme-angular + mv node_modules/devextreme-angular/package/* node_modules/devextreme-angular + tar -xzf devextreme-react-installer.tgz -C node_modules/devextreme-react + mv node_modules/devextreme-react/package/* node_modules/devextreme-react + tar -xzf devextreme-vue-installer.tgz -C node_modules/devextreme-vue + mv node_modules/devextreme-vue/package/* node_modules/devextreme-vue + + - name: Prepare configs + working-directory: apps/demos + run: npm run prepare-js + + - name: Copy metadata + working-directory: apps/demos + run: npm run make-demos-bundle -- --copy-metadata + + - name: Update angular.json + working-directory: apps/demos + run: npm run update-angular-json + + - name: Create angular entryPoints to compile faster + working-directory: apps/demos + run: npm run launch-ngcc + + - name: Prepare Angular demo bundles + working-directory: apps/demos + run: | + ${{ matrix.command }} + + - name: Angular post process index.html + working-directory: apps/demos + run: npm run post-process-angular + + - name: Save publish-demos directory for Angular as an artifact + uses: actions/upload-artifact@v3 + with: + name: publish-demos + path: ./apps/demos/publish-demos + + deploy: + runs-on: ubuntu-latest + needs: [build-devextreme, publish-ES, publish-angular] + steps: + - name: Download publish-demos artifact + uses: actions/download-artifact@v3 + with: + name: publish-demos + path: ./apps/demos/publish-demos + - name: Deploy to gh-pages + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./apps/demos/publish-demos diff --git a/.github/workflows/run-testcafe-on-gh-pages.yml b/.github/workflows/run-testcafe-on-gh-pages.yml new file mode 100644 index 000000000000..b088b28e3058 --- /dev/null +++ b/.github/workflows/run-testcafe-on-gh-pages.yml @@ -0,0 +1,82 @@ +name: Test demos from gh-pages branch before publishing + +on: + workflow_dispatch: + +jobs: + testcafe: + strategy: + fail-fast: false + matrix: + CONSTEL: [react(1/4), react(2/4), react(3/4), react(4/4), vue(1/4), vue(2/4), vue(3/4), vue(4/4), angular(1/4), angular(2/4), angular(3/4), angular(4/4)] + THEME: ['generic.light', 'material.blue.light', 'fluent.blue.light'] + + + runs-on: ubuntu-latest + name: testcafe-${{ matrix.CONSTEL }}-${{ matrix.THEME }} + timeout-minutes: 60 + env: + TARGET_BRANCH: ${{ github.ref_name }} + + steps: + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + + - name: Checkout gh-pages branch + uses: actions/checkout@v4 + with: + ref: gh-pages + path: gh-pages + + - name: Run Web Server + working-directory: gh-pages + run: | + python -m http.server 8080 & + python -m http.server 8081 & + python -m http.server 8082 & + python -m http.server 8083 & + + - name: Checkout main branch + uses: actions/checkout@v2 + with: + ref: ${{ env.TARGET_BRANCH }} + path: devextreme + + - name: Console.log ls + run: ls -al & cd gh-pages & ls -al + + - name: Setup Chrome + uses: ./devextreme/.github/actions/setup-chrome + with: + chrome-version: '121.0.6167.160' + + - name: DevExtreme - Install packages + working-directory: devextreme + run: npm install --no-audit --no-fund + + - name: Run TestCafe tests + working-directory: devextreme/apps/demos + env: + CHANGEDFILEINFOSPATH: changed-files.json + BROWSERS: chrome:headless --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl="swiftshader" --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning + #DEBUG: hammerhead:*,testcafe:* + CONCURRENCY: 4 + TCQUARANTINE: true + CONSTEL: ${{ matrix.CONSTEL }} + THEME: ${{ matrix.THEME }} + ISGITHUBDEMOS: true + # DISABLE_DEMO_TEST_SETTINGS: all # Uncomment to ignore all the visualtestrc.json settings + # DISABLE_DEMO_TEST_SETTINGS: ignore # Uncomment to ignore the `ignore` field + # DISABLE_DEMO_TEST_SETTINGS: comparison-options # Uncomment to ignore the `comparison-options` field + CI_ENV: true # The `ignore` field in the visualtestrc.json should be disabled when running test locally + run: npx nx test-testcafe + + - name: Copy screenshots artifacts + if: ${{ failure() }} + uses: actions/upload-artifact@v3 + with: + name: screenshots + path: ${{ github.workspace }}/devextreme/apps/demos/testing/artifacts/compared-screenshots/**/* + if-no-files-found: ignore diff --git a/apps/demos/.gitignore b/apps/demos/.gitignore index 685d92e7c2d8..149033c3dfae 100644 --- a/apps/demos/.gitignore +++ b/apps/demos/.gitignore @@ -32,3 +32,6 @@ Demos/**/tsconfig.json .DS_Store publish-demos + +.angular +angular.json diff --git a/apps/demos/.prettierignore b/apps/demos/.prettierignore index 8fae406a6007..244b69139b66 100644 --- a/apps/demos/.prettierignore +++ b/apps/demos/.prettierignore @@ -9,3 +9,4 @@ .github publish-demos coverage +utils/**/template.html diff --git a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/detail-view/detail-view.component.ts b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/detail-view/detail-view.component.ts index aa633de9a1d7..c68dd2252a2f 100644 --- a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/detail-view/detail-view.component.ts +++ b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/detail-view/detail-view.component.ts @@ -12,8 +12,8 @@ if (window && window.config.packageConfigPaths) { @Component({ selector: 'detail-view', - templateUrl: `.${modulePrefix}/detail-view/detail-view.component.html`, - styleUrls: [`.${modulePrefix}/detail-view/detail-view.component.css`], + templateUrl: `.${modulePrefix && (modulePrefix + '/detail-view')}/detail-view.component.html`, + styleUrls: [`.${modulePrefix && (modulePrefix + '/detail-view')}/detail-view.component.css`], providers: [], }) export class DetailViewComponent implements AfterViewInit { diff --git a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/Angular/app/app.component.css index 83672d4146a3..6de8c74885b6 100644 --- a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/Angular/app/app.component.css +++ b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/Angular/app/app.component.css @@ -4,7 +4,7 @@ line-height: 0; } -::ng-deep .long-title h3 { +::ng-deep #long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; diff --git a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/Angular/app/app.component.html index 14c7c7600640..c82812c97524 100644 --- a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/Angular/app/app.component.html +++ b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/Angular/app/app.component.html @@ -1,4 +1,4 @@ -
+

Country Area, Population, and GDP Structure

{ }; const App = () => ( +<> +
+

Country Area, Population, and GDP Structure

+
+ > @@ -59,12 +63,12 @@ const App = () => ( dataField="Population_Total" caption="Total" format="fixedPoint" - /> + /> + /> ( caption="Total, mln $" format="fixedPoint" sortOrder="desc" - /> + /> + /> + /> + /> + ); export default App; diff --git a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/React/index.html b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/React/index.html index 9a9b2c894e7d..312e8a90b68e 100644 --- a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/React/index.html +++ b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/React/index.html @@ -18,9 +18,6 @@
-
-

Country Area, Population, and GDP Structure

-
diff --git a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/React/styles.css b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/React/styles.css index a144f7f89598..ef198cf478c2 100644 --- a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/React/styles.css +++ b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/React/styles.css @@ -4,7 +4,7 @@ line-height: 0; } -.long-title h3 { +#long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; diff --git a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/ReactJs/App.js b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/ReactJs/App.js index 8a265746fadf..37121a49a35a 100644 --- a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/ReactJs/App.js +++ b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/ReactJs/App.js @@ -37,56 +37,61 @@ const onExporting = (e) => { }); }; const App = () => ( - - + +
+

Country Area, Population, and GDP Structure

+
+ + - - - - - - - - - + + + + + + + + + + - - +
+ ); export default App; diff --git a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/ReactJs/index.html b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/ReactJs/index.html index 620c24ea2347..b33d9b3ddf9d 100644 --- a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/ReactJs/index.html +++ b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/ReactJs/index.html @@ -38,9 +38,6 @@
-
-

Country Area, Population, and GDP Structure

-
diff --git a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/ReactJs/styles.css b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/ReactJs/styles.css index a144f7f89598..ef198cf478c2 100644 --- a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/ReactJs/styles.css +++ b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/ReactJs/styles.css @@ -4,7 +4,7 @@ line-height: 0; } -.long-title h3 { +#long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; diff --git a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/Vue/App.vue b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/Vue/App.vue index 3faef47dfc92..1b8d0f76e271 100644 --- a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/Vue/App.vue +++ b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/Vue/App.vue @@ -1,4 +1,7 @@