From a2b13730086621a1b7c11d7542131d6295c9ed58 Mon Sep 17 00:00:00 2001 From: Guilherme Leme Date: Wed, 19 Jun 2024 12:34:32 -0300 Subject: [PATCH] [add-lint-and-ci] - added lint, ci and boilerplate for plugin building --- .eslintignore | 2 + .eslintrc | 44 ++++++++++ .../bigbluebutton-html-plugin-sdk-issue.md | 52 +++++++++++ .github/ISSUE_TEMPLATE/config.yml | 11 +++ .github/PULL_REQUEST_TEMPLATE.md | 36 ++++++++ .github/actions/merge-branches/action.yml | 20 +++++ .github/config.yml | 1 - .github/stale.yml | 19 ++++ .../automated-tests-publish-results.yml | 88 +++++++++++++++++++ .github/workflows/check-merge-conflict.yml | 26 ++++++ .github/workflows/ts-code-compilation.yml | 21 +++++ .github/workflows/ts-code-validation.yml | 22 +++++ package.json | 72 +++++++++++++++ tsconfig.json | 14 +++ webpack.config.js | 43 +++++++++ 15 files changed, 470 insertions(+), 1 deletion(-) create mode 100644 .eslintignore create mode 100644 .eslintrc create mode 100644 .github/ISSUE_TEMPLATE/bigbluebutton-html-plugin-sdk-issue.md create mode 100644 .github/ISSUE_TEMPLATE/config.yml create mode 100644 .github/PULL_REQUEST_TEMPLATE.md create mode 100644 .github/actions/merge-branches/action.yml create mode 100644 .github/stale.yml create mode 100644 .github/workflows/automated-tests-publish-results.yml create mode 100644 .github/workflows/check-merge-conflict.yml create mode 100644 .github/workflows/ts-code-compilation.yml create mode 100644 .github/workflows/ts-code-validation.yml create mode 100644 package.json create mode 100644 tsconfig.json create mode 100644 webpack.config.js diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..f06235c --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +node_modules +dist diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..9b94b63 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,44 @@ + +{ + "root": true, + "parser": "@typescript-eslint/parser", + "extends": [ + "airbnb", + "eslint:recommended", + "plugin:@typescript-eslint/eslint-recommended", + "plugin:@typescript-eslint/recommended" + ], + "parserOptions": { + "ecmaVersion": 2020 + }, + "plugins": [ + "@typescript-eslint", + "react", + "jsx-a11y", + "import" + ], + "env": { + "es6": true, + "node": true, + "browser": true + }, + "rules": { + "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }], + "no-shadow": "off", + "@typescript-eslint/no-shadow": "warn", + "import/prefer-default-export": "off", + "no-underscore-dangle": 0, + "import/extensions": [2, "never"], + "import/no-absolute-path": 0, + "import/no-unresolved": 0, + "import/no-extraneous-dependencies": 1, + "react/prop-types": 1, + "jsx-a11y/no-access-key": 0, + "react/jsx-props-no-spreading": "off", + "max-classes-per-file": "off", + "class-methods-use-this": "off" + }, + "globals": { + "browser": "writable" + } + } diff --git a/.github/ISSUE_TEMPLATE/bigbluebutton-html-plugin-sdk-issue.md b/.github/ISSUE_TEMPLATE/bigbluebutton-html-plugin-sdk-issue.md new file mode 100644 index 0000000..bbedd1d --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bigbluebutton-html-plugin-sdk-issue.md @@ -0,0 +1,52 @@ +--- +name: BBB-Plugin-SDK +about: Template for creating BBB-Plugin-SDK Issue (SDK to create plugins for Bigbluebutton). +title: '' +labels: 'module: client' +assignees: '' + +--- + + + +**Describe the bug** +A clear and concise description of what the bug is. + +**To Reproduce** +Steps to reproduce the behavior: +1. Go to '...' +2. Click on '....' +3. Scroll down to '....' +4. See error + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Actual behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**BBB version, plugin in which The bug happened and SDK version:** +BigBlueButton continually evolves. Providing the version/build helps us to pinpoint when an issue was introduced. +Example: +$ sudo bbb-conf --check | grep BigBlueButton +BigBlueButton Server 2.2.2 (1816) + +The SDK version is mentioned in the package.json file of the plugin, so search for "bigbluebutton-html-plugin-sdk" inside that file. + +**Desktop (please complete the following information):** + - OS: [e.g. Windows, Mac] + - Browser [e.g. Chrome, Safari] + - Version [e.g. 22] + +**Smartphone (please complete the following information):** + - Device: [e.g. iPhone6] + - OS: [e.g. iOS8.1] + - Browser [e.g. stock browser, Safari] + - Version [e.g. 22] + +**Additional context** +Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 0000000..793cc44 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,11 @@ +blank_issues_enabled: false +contact_links: + - name: BigBlueButton GitHub Repository + url: https://github.com/bigbluebutton/bigbluebutton + about: Everything BigBlueButton (in case you are looking for something different than plugin sdk) + - name: Looking for commercial support in building/maintaining plugins + url: https://bigbluebutton.org/commercial-support + about: List of companies offering commercial BigBlueButton support + - name: BigBlueButton Developers Mailing List: + url: https://groups.google.com/forum/#!forum/bigbluebutton-dev + about: Ask questions and share experiences with other BigBlueButton developers (including about plugins). \ No newline at end of file diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..96969e2 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,36 @@ + + +### What does this PR do? + + + +### Closes Issue(s) + +Closes # + + +### Motivation + + + +### More + + +- [ ] Added/updated documentation diff --git a/.github/actions/merge-branches/action.yml b/.github/actions/merge-branches/action.yml new file mode 100644 index 0000000..ea8fc99 --- /dev/null +++ b/.github/actions/merge-branches/action.yml @@ -0,0 +1,20 @@ +name: Merge branches +on: + workflow_call: + +runs: + using: "composite" + steps: + - name: Checkout ${{ github.event.pull_request.base.ref || 'master' }} + uses: actions/checkout@v4 + with: + ref: ${{ github.event.pull_request.base.ref || '' }} + fetch-depth: 0 # Fetch all history + - name: Merge pr-${{ github.event.number }} into ${{ github.event.pull_request.base.ref }} + if: github.event_name == 'pull_request' + shell: bash + run: | + git config user.name "BBB Automated Tests" + git config user.email "tests@bigbluebutton.org" + git config pull.rebase false + git pull origin pull/${{ github.event.number }}/head:${{ github.head_ref }} \ No newline at end of file diff --git a/.github/config.yml b/.github/config.yml index 8773ba9..5a893c6 100644 --- a/.github/config.yml +++ b/.github/config.yml @@ -5,4 +5,3 @@ newPRWelcomeComment: > Thank you for this contribution! Could you please confirm if you already sent in the signed Contributor License Agreement? See https://docs.bigbluebutton.org/support/faq.html#why-do-i-need-to-sign-a-contributor-license-agreement-to-contribute-source-code Thanks in advance! - diff --git a/.github/stale.yml b/.github/stale.yml new file mode 100644 index 0000000..fd63948 --- /dev/null +++ b/.github/stale.yml @@ -0,0 +1,19 @@ +# Number of days of inactivity before an issue becomes stale +daysUntilStale: 270 +# Number of days of inactivity before a stale issue is closed +daysUntilClose: 90 +# Issues with these labels will never be considered stale +exemptLabels: + - "status: accepted" + - "status: verify" + - "target: security" + - "type: discussion" +# Label to use when marking an issue as stale +staleLabel: "status: stale" +# Comment to post when marking an issue as stale. Set to `false` to disable +markComment: > + This issue has been automatically marked as stale because it has not had + recent activity. It will be closed if no further activity occurs. Thank you + for your contributions. +# Comment to post when closing a stale issue. Set to `false` to disable +closeComment: false diff --git a/.github/workflows/automated-tests-publish-results.yml b/.github/workflows/automated-tests-publish-results.yml new file mode 100644 index 0000000..08a4f6a --- /dev/null +++ b/.github/workflows/automated-tests-publish-results.yml @@ -0,0 +1,88 @@ +name: Automated tests - publish results +on: + workflow_run: + workflows: + - Automated tests + types: + - completed + +jobs: + get-pr-data: + runs-on: ubuntu-latest + if: ${{ github.event.workflow_run.event == 'pull_request' }} + outputs: + pr-number: ${{ steps.set-env.outputs.pr-number }} + workflow-id: ${{ steps.set-env.outputs.workflow-id }} + steps: + # https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#using-data-from-the-triggering-workflow + - name: Download artifact + uses: actions/github-script@v6 + with: + script: | + let allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({ + owner: context.repo.owner, + repo: context.repo.repo, + run_id: context.payload.workflow_run.id, + }); + + let matchArtifact = allArtifacts.data.artifacts.filter((artifact) => { + return artifact.name == "pr-comment-data" + })[0]; + let download = await github.rest.actions.downloadArtifact({ + owner: context.repo.owner, + repo: context.repo.repo, + artifact_id: matchArtifact.id, + archive_format: 'zip', + }); + let fs = require('fs'); + fs.writeFileSync(`${process.env.GITHUB_WORKSPACE}/pr-comment-data.zip`, Buffer.from(download.data)); + - name: Unzip artifact + run: unzip pr-comment-data.zip + - name: Set env variables + id: set-env + run: | + echo "pr-number=$(cat ./pr_number)" >> $GITHUB_OUTPUT + echo "workflow-id=$(cat ./workflow_id)" >> $GITHUB_OUTPUT + comment-pr: + runs-on: ubuntu-latest + permissions: + pull-requests: write + needs: get-pr-data + steps: + - name: Find Comment + uses: peter-evans/find-comment@v2 + id: fc + with: + issue-number: ${{ needs.get-pr-data.outputs.pr-number }} + comment-author: "github-actions[bot]" + body-includes: Automated tests Summary + - name: Remove previous comment + if: steps.fc.outputs.comment-id != '' + uses: actions/github-script@v6 + with: + script: | + github.rest.issues.deleteComment({ + owner: context.repo.owner, + repo: context.repo.repo, + comment_id: ${{ steps.fc.outputs.comment-id }} + }) + - name: Passing tests comment + if: ${{ github.event.workflow_run.conclusion == 'success' }} + uses: peter-evans/create-or-update-comment@v2 + with: + issue-number: ${{ needs.get-pr-data.outputs.pr-number }} + body: | +

Automated tests Summary

+

:white_check_mark: All the CI tests have passed!

+ - name: Failing tests comment + if: ${{ github.event.workflow_run.conclusion == 'failure' }} + uses: peter-evans/create-or-update-comment@v2 + with: + issue-number: ${{ needs.get-pr-data.outputs.pr-number }} + body: | +

Automated tests Summary

+

:rotating_light: Test workflow has failed

+ + ___ + + [Click here](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ needs.get-pr-data.outputs.workflow-id }}) to check the action test reports diff --git a/.github/workflows/check-merge-conflict.yml b/.github/workflows/check-merge-conflict.yml new file mode 100644 index 0000000..e857e90 --- /dev/null +++ b/.github/workflows/check-merge-conflict.yml @@ -0,0 +1,26 @@ +name: Merge conflict check +on: + push: + pull_request_target: + types: + - opened + - synchronize + +permissions: + contents: read + +jobs: + main: + permissions: + pull-requests: write # for eps1lon/actions-label-merge-conflict to label PRs + runs-on: ubuntu-latest + steps: + - name: Check for dirty pull requests + uses: eps1lon/actions-label-merge-conflict@v3 + with: + dirtyLabel: "status: conflict" + repoToken: "${{ secrets.GITHUB_TOKEN }}" + commentOnDirty: | + This pull request has conflicts ☹ + Please resolve those so we can review the pull request. + Thanks. diff --git a/.github/workflows/ts-code-compilation.yml b/.github/workflows/ts-code-compilation.yml new file mode 100644 index 0000000..8c351fc --- /dev/null +++ b/.github/workflows/ts-code-compilation.yml @@ -0,0 +1,21 @@ +name: Typescript - compile code +on: [pull_request] +permissions: + contents: read +jobs: + ts-code-compilation: + runs-on: ubuntu-22.04 + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 1 + - name: Merge branches + uses: ./.github/actions/merge-branches + - name: install node + uses: actions/setup-node@v4 + with: + node-version: 20.x + - name: run npm install + run: npm install + - name: typescript code compilation + run: npx tsc diff --git a/.github/workflows/ts-code-validation.yml b/.github/workflows/ts-code-validation.yml new file mode 100644 index 0000000..b9fa8e8 --- /dev/null +++ b/.github/workflows/ts-code-validation.yml @@ -0,0 +1,22 @@ +name: Typescript - validate code (eslint) +on: [pull_request] + +permissions: + contents: read +jobs: + ts-code-validation: + runs-on: ubuntu-22.04 + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 1 + - name: Merge branches + uses: ./.github/actions/merge-branches + - name: install node + uses: actions/setup-node@v4 + with: + node-version: 20.x + - name: run npm install + run: npm install + - name: typescript code validation with eslint + run: npm run lint diff --git a/package.json b/package.json new file mode 100644 index 0000000..23b22c4 --- /dev/null +++ b/package.json @@ -0,0 +1,72 @@ +{ + "name": "", + "version": "0.1.0", + "private": true, + "main": "./src/index.tsx", + "dependencies": { + "@testing-library/react": "^13.4.0", + "@testing-library/user-event": "^13.5.0", + "@types/node": "^20.3.1", + "@types/react": "^18.2.13", + "@types/react-dom": "^18.2.6", + "babel-plugin-syntax-dynamic-import": "^6.18.0", + "bigbluebutton-html-plugin-sdk": "0.0.52", + "styled-components": "^5.3.3", + "path": "^0.12.7", + "react-chat-elements": "^12.0.14", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-modal": "^3.16.1" + }, + "scripts": { + "build-bundle": "webpack --mode production", + "start": "webpack serve --mode development", + "build:watch": "rm -rf dist && tsc -w --module CommonJS", + "lint": "eslint ./src/*", + "lint:fix": "npm run lint -- --fix", + "lint:watch": "watch 'yarn lint'" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "devDependencies": { + "@babel/core": "^7.21.8", + "@babel/preset-env": "^7.21.5", + "@babel/preset-react": "^7.18.6", + "@types/react-modal": "^3.16.0", + "babel-loader": "^9.1.2", + "css-loader": "^6.7.4", + "style-loader": "^3.3.3", + "ts-loader": "^9.4.3", + "webpack": "^5.83.1", + "webpack-cli": "^5.1.1", + "webpack-dev-server": "^4.15.1", + "@types/node": "^20.4.4", + "@types/react": "^18.2.15", + "@types/react-dom": "^18.2.7", + "@types/styled-components": "^5.1.26", + "@typescript-eslint/eslint-plugin": "^6.2.0", + "@typescript-eslint/parser": "^6.2.0", + "eslint": "^8.45.0", + "eslint-config-airbnb": "^19.0.4", + "eslint-config-airbnb-base": "^15.0.0", + "eslint-plugin-import": "^2.27.5", + "eslint-plugin-jsx-a11y": "^6.7.1", + "eslint-plugin-react": "^7.33.0", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-watch": "^8.0.0", + "lint-staged": "11.2.0", + "react-dom": "^18.2.0", + "typescript": "^5.1.6", + "watch": "^1.0.2" + } +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..2316cb6 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "outDir": "./dist/", + "noImplicitAny": true, + "module": "es6", + "target": "es5", + "jsx": "react", + "allowJs": true, + "moduleResolution": "node" + }, + "paths": { + "*": ["node_modules/@types/*", "node_modules/*"] + } +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..a71a6a5 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,43 @@ +module.exports = { + entry: './src/index.tsx', + output: { + filename: '.js', + library: '', + libraryTarget: 'umd', + publicPath: '/static/', + globalObject: 'this', + }, + devServer: { + allowedHosts: 'all', + port: 4701, + host: 'localhost', + hot: false, + liveReload: false, + client: { + overlay: false, + }, + }, + module: { + rules: [ + { + test: /\.(js|jsx)$/, + exclude: /node_modules/, + use: { + loader: 'babel-loader', + }, + }, + { + test: /\.css$/, + use: ['style-loader', 'css-loader'], + }, + { + test: /\.tsx?$/, + use: 'ts-loader', + exclude: /node_modules/, + }, + ], + }, + resolve: { + extensions: ['.js', '.jsx', '.tsx', '.ts'], + }, +};