diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml new file mode 100644 index 00000000..2edc8b05 --- /dev/null +++ b/.github/workflows/lint.yml @@ -0,0 +1,27 @@ +name: Lint Web Embeds + +on: + push: + paths: + - 'web-embeds/**' + pull_request: + paths: + - 'web-embeds/**' + +jobs: + lint: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v2 + + - name: Set up Node.js + uses: actions/setup-node@v1 + with: + node-version: '16' + + - name: Install Dependencies + run: cd web-embeds && yarn install + + - name: Run Lint + run: cd web-embeds && yarn lint diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 00000000..31935f95 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,9 @@ +{ + "recommendations": [ + "dbaeumer.vscode-eslint", + "github.vscode-pull-request-github", + "eamodio.gitlens", + "esbenp.prettier-vscode", + "meganrogge.template-string-converter" + ] +} diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..c6db4c64 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:3000", + "webRoot": "${workspaceFolder}/app" + } + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..f11fda63 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,20 @@ +{ + "prettier.trailingComma": "es5", + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.tabSize": 2, + "eslint.validate": [ + "javascript", + "javascriptreact", + "typescript", + "typescriptreact" + ], + "[javascriptreact]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit", + "source.fixAll.prettier": "explicit" + }, + "prettier.requireConfig": true +} diff --git a/package.json b/package.json index 485c628e..ca826392 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,6 @@ "packages": [ "packages/*" ], - "nohoist": [] + "nohoist": [ ] } } diff --git a/web-embeds/.eslintignore b/web-embeds/.eslintignore new file mode 100644 index 00000000..824d3f24 --- /dev/null +++ b/web-embeds/.eslintignore @@ -0,0 +1,4 @@ +node_modules/ +build/ + +widget/ diff --git a/web-embeds/.eslintrc.js b/web-embeds/.eslintrc.js new file mode 100644 index 00000000..f0cc0776 --- /dev/null +++ b/web-embeds/.eslintrc.js @@ -0,0 +1,49 @@ +module.exports = { + extends: ["react-app", "plugin:prettier/recommended"], + plugins: ["simple-import-sort", "import"], + rules: { + "import/first": "error", + "import/newline-after-import": "error", + "import/no-duplicates": "error", + "import/order": [ + "error", + { + groups: [ + ["external", "builtin"], + "internal", + ["sibling", "parent"], + "index", + ], + pathGroups: [ + { + pattern: "@(react|react-native)", + group: "external", + position: "before", + }, + { + pattern: "@src/**", + group: "internal", + }, + ], + pathGroupsExcludedImportTypes: ["internal", "react"], + "newlines-between": "always", + alphabetize: { + order: "asc", + caseInsensitive: true, + }, + }, + ], + "lines-around-comment": [ + "error", + { + allowArrayStart: true, + allowBlockStart: true, + allowClassStart: true, + allowObjectStart: true, + beforeBlockComment: true, + beforeLineComment: true, + }, + ], + "spaced-comment": ["error", "always"], + }, +}; diff --git a/web-embeds/.prettierignore b/web-embeds/.prettierignore new file mode 100644 index 00000000..ae59894a --- /dev/null +++ b/web-embeds/.prettierignore @@ -0,0 +1,6 @@ +node_modules + +/build +.env + +widget \ No newline at end of file diff --git a/web-embeds/.prettierrc b/web-embeds/.prettierrc new file mode 100644 index 00000000..63c660cd --- /dev/null +++ b/web-embeds/.prettierrc @@ -0,0 +1,5 @@ +{ + "semi": true, + "singleQuote": false, + "trailingComma": "es5" +} diff --git a/web-embeds/README.md b/web-embeds/README.md index e463e219..db482887 100644 --- a/web-embeds/README.md +++ b/web-embeds/README.md @@ -13,7 +13,6 @@ Follow the steps below to deploy your apollos-embeds: `https://cdn.jsdelivr.net/npm/@apollosproject/apollos-embeds@latest/widget/index.js, https://cdn.jsdelivr.net/npm/@apollosproject/apollos-embeds@latest/widget/index.css, https://cdn.jsdelivr.net/npm/@apollosproject/apollos-embeds` - ## Manual 1. Update the package version in the `package.json` file. diff --git a/web-embeds/craco.config.js b/web-embeds/craco.config.js index ce0753ee..dcc14469 100644 --- a/web-embeds/craco.config.js +++ b/web-embeds/craco.config.js @@ -3,15 +3,15 @@ module.exports = { webpack: { configure: (webpackConfig, { env, paths }) => { // Override JavaScript file names - webpackConfig.output.filename = 'static/js/index.js'; - webpackConfig.output.chunkFilename = 'static/js/[name].chunk.js'; + webpackConfig.output.filename = "static/js/index.js"; + webpackConfig.output.chunkFilename = "static/js/[name].chunk.js"; // Override CSS file names in production - if (env === 'production') { + if (env === "production") { webpackConfig.plugins.forEach((plugin) => { - if (plugin.constructor.name === 'MiniCssExtractPlugin') { - plugin.options.filename = 'static/css/index.css'; - plugin.options.chunkFilename = 'static/css/[name].chunk.css'; + if (plugin.constructor.name === "MiniCssExtractPlugin") { + plugin.options.filename = "static/css/index.css"; + plugin.options.chunkFilename = "static/css/[name].chunk.css"; } }); } @@ -21,10 +21,10 @@ module.exports = { }, style: { postcss: { - plugins: [require('autoprefixer')], + plugins: [require("autoprefixer")], }, }, babel: { - presets: ['@babel/preset-react'], + presets: ["@babel/preset-react"], }, }; diff --git a/web-embeds/package.json b/web-embeds/package.json index c3ec9623..e9a3cdad 100644 --- a/web-embeds/package.json +++ b/web-embeds/package.json @@ -3,6 +3,10 @@ "description": "Apollos React embed widgets", "version": "0.1.24", "license": "MIT", + "eslintIgnore": [ + "/node_modules", + "/build" + ], "dependencies": { "@algolia/autocomplete-js": "^1.9.2", "@algolia/autocomplete-plugin-query-suggestions": "^1.9.2", @@ -28,6 +32,7 @@ "color": "^4.2.3", "date-fns": "^2.29.3", "dompurify": "^2.4.3", + "eslint-plugin-prettier": "^5.1.3", "graphql": "^16.6.0", "lodash": "^4.17.21", "moment": "^2.29.1", @@ -55,7 +60,9 @@ "dev": "craco start", "build": "node scripts/build.js", "test": "craco test", - "bump": "npm version patch && yarn build && git add . && git commit -m 'version bump' && git push && git push --tags && npm publish" + "bump": "npm version patch && yarn build && git add . && git commit -m 'version bump' && git push && git push --tags && npm publish", + "format": "prettier --write .", + "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint ." }, "eslintConfig": { "extends": [ @@ -80,7 +87,12 @@ "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/runtime": "^7.22.5", "babel-plugin-module-resolver": "^5.0.0", - "babel-plugin-styled-components": "^2.1.4" + "babel-plugin-styled-components": "^2.1.4", + "eslint": "^8.45.0", + "eslint-config-prettier": "^8.8.0", + "eslint-config-react-app": "^7.0.1", + "eslint-plugin-simple-import-sort": "^10.0.0", + "prettier": "^3.0.0" }, "targets": { "global": { diff --git a/web-embeds/public/index.html b/web-embeds/public/index.html index f231eb63..94a2e7ba 100644 --- a/web-embeds/public/index.html +++ b/web-embeds/public/index.html @@ -1,19 +1,21 @@ - + - -
- - - - - - - - - -