From 97d4b0d3846deac033d604a7ceab41f3b6aade54 Mon Sep 17 00:00:00 2001 From: Arvindan Date: Wed, 6 Oct 2021 15:36:53 +0530 Subject: [PATCH] refactor: move lint scripts to the root package.json and lint fixes --- .eslintignore | 12 +++- .eslintrc.js | 49 +++++++++----- .stylelintignore | 15 +++-- package-lock.json | 5 +- package.json | 29 +++++++-- .../crayons-core/customElementDocGenerator.ts | 32 +++++++--- packages/crayons-core/gulpfile.js | 64 +++++++++++-------- packages/crayons-core/package.json | 18 ------ packages/crayons-datatable/package.json | 18 ------ 9 files changed, 139 insertions(+), 103 deletions(-) diff --git a/.eslintignore b/.eslintignore index 6f3ee8d2e..fc870c9d8 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,10 @@ -src/**/*.stories.tsx -node_modules/ \ No newline at end of file +node_modules/ +packages/**/dist/ +packages/**/react/ +packages/**/.vuepress/ +packages/**/loader/ +packages/**/node_modules/ +packages/**/www/ +packages/**/crayons-react/ +docs/ +packages/**/src/**/*.stories.tsx \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js index 5afbf7123..3779f5c73 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,6 +1,6 @@ module.exports = { root: true, - parser: '@typescript-eslint/parser', + extends: ['eslint:recommended'], parserOptions: { ecmaVersion: 'latest', // Allows for the parsing of modern ECMAScript features sourceType: 'module', // Allows for the use of imports @@ -8,24 +8,43 @@ module.exports = { ecmaFeatures: { jsx: true, }, - project: './tsconfig.json', }, env: { browser: true, - jest: true, + amd: true, node: true, }, - extends: [ - 'plugin:vue/essential', - 'plugin:@typescript-eslint/eslint-recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:jsx-a11y/recommended', - 'plugin:prettier/recommended', + overrides: [ + { + files: ['**/*.ts', '**/*.tsx'], + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaVersion: 'latest', // Allows for the parsing of modern ECMAScript features + sourceType: 'module', // Allows for the use of imports + useJSXTextNode: true, + ecmaFeatures: { + jsx: true, + }, + project: './tsconfig.json', + }, + env: { + browser: true, + jest: true, + node: true, + }, + extends: [ + 'plugin:vue/essential', + 'plugin:@typescript-eslint/eslint-recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:jsx-a11y/recommended', + 'plugin:prettier/recommended', + ], + plugins: ['@typescript-eslint', 'jsx-a11y'], + rules: { + '@typescript-eslint/no-unused-vars': 0, + 'react/no-jsx-bind': 0, + 'jsx-quotes': [1, 'prefer-single'], + }, + }, ], - plugins: ['@typescript-eslint', 'jsx-a11y'], - rules: { - '@typescript-eslint/no-unused-vars': 0, - 'react/no-jsx-bind': 0, - 'jsx-quotes': [1, 'prefer-single'], - }, }; diff --git a/.stylelintignore b/.stylelintignore index 797ead3ed..1b0276c05 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1,6 +1,9 @@ -**/*.js -**/*.ts -**/*.tsx -node_modules -packages/**/node_modules - +node_modules/ +packages/**/dist/ +packages/**/react/ +packages/**/loader/ +packages/**/node_modules/ +packages/**/www/ +packages/**/crayons-react/ +docs/ +packages/**/src/**/*.stories.tsx \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 5e0e87f7a..8a152ee82 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,6 +37,7 @@ "html-to-react": "^1.4.5", "husky": "^4.2.3", "kill-port": "^1.6.1", + "lint-staged": "^10.5.4", "lit-html": "^1.3.0", "prepend-file": "^2.0.0", "prettier": "^2.4.1", @@ -47521,7 +47522,6 @@ "gulp": "^4.0.2", "jest": "24.9.0", "jest-cli": "24.9.0", - "lint-staged": "^10.5.4", "node-sass": "^5.0.0", "npm-run-all": "^4.1.5", "plop": "^2.7.4", @@ -47576,7 +47576,6 @@ "gulp": "^4.0.2", "jest": "24.9.0", "jest-cli": "24.9.0", - "lint-staged": "^10.5.4", "node-sass": "^5.0.0", "npm-run-all": "^4.1.5", "plop": "^2.7.4", @@ -49207,7 +49206,6 @@ "gulp": "^4.0.2", "jest": "24.9.0", "jest-cli": "24.9.0", - "lint-staged": "^10.5.4", "moment-mini": "^2.24.0", "node-sass": "^5.0.0", "npm-run-all": "^4.1.5", @@ -60191,7 +60189,6 @@ "gulp": "^4.0.2", "jest": "24.9.0", "jest-cli": "24.9.0", - "lint-staged": "^10.5.4", "moment-mini": "^2.24.0", "node-sass": "^5.0.0", "npm-run-all": "^4.1.5", diff --git a/package.json b/package.json index 43b62442f..dbeb90efe 100644 --- a/package.json +++ b/package.json @@ -12,13 +12,18 @@ ], "scripts": { "build": "lerna run build --stream && npm run build:storybook", - "release": "lerna publish --no-commit-hooks --dist-tag latest", - "test": "lerna run test --stream", - "lint:fix": "lerna run lint:fix --stream", - "lint": "lerna run lint --stream", "build:storybook": "rimraf storybook-dist && npm run storybook:build", + "code-sanity": "npm run lint", + "release": "lerna publish --no-commit-hooks --dist-tag latest", + "lint": "npm run lint:ts && npm run lint:styles", + "lint:fix": "npm run lint:ts:fix && npm run lint:styles", + "lint:styles": "stylelint '**/*.scss' '**/.vuepress/**/*.vue'", + "lint:ts": "eslint .", + "lint:ts:fix": "eslint . --fix", + "lint-staged": "lint-staged", "storybook:build": "build-storybook -c docs/.storybook -o docs/storybook-dist", - "storybook": "start-storybook -p 9001 -c docs/.storybook" + "storybook": "start-storybook -p 9001 -c docs/.storybook", + "test": "lerna run test --stream" }, "keywords": [], "author": "", @@ -46,6 +51,7 @@ "html-to-react": "^1.4.5", "husky": "^4.2.3", "kill-port": "^1.6.1", + "lint-staged": "^10.5.4", "lit-html": "^1.3.0", "prepend-file": "^2.0.0", "prettier": "^2.4.1", @@ -69,7 +75,18 @@ "hooks": { "pre-push": "npm run test", "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true", - "pre-commit": "lerna run precommit --concurrency 1 --stream && npm run test" + "pre-commit": "npm run lint-staged && npm run test" } + }, + "lint-staged": { + "**/*.{css,scss}": [ + "stylelint" + ], + "**/.vuepress/**/*.vue": [ + "stylelint" + ], + "*.{js,ts,tsx,jsx}": [ + "eslint --fix" + ] } } diff --git a/packages/crayons-core/customElementDocGenerator.ts b/packages/crayons-core/customElementDocGenerator.ts index 65d14ac0d..957653528 100644 --- a/packages/crayons-core/customElementDocGenerator.ts +++ b/packages/crayons-core/customElementDocGenerator.ts @@ -4,12 +4,19 @@ * This generator implements this standard, which is used by Storybook to display * documentation. */ -export async function generateJsonDocs(config, compilerCtx, _buildCtx, docsData) { - const jsonOutputTargets = config.outputTargets.filter(isOutputTargetCustomElementDocsJson); +export async function generateJsonDocs( + config, + compilerCtx, + _buildCtx, + docsData +) { + const jsonOutputTargets = config.outputTargets.filter( + isOutputTargetCustomElementDocsJson + ); const { components, ...docsDataWithoutComponents } = docsData; const json = { ...docsDataWithoutComponents, - tags: components.map(cmp => ({ + tags: components.map((cmp) => ({ filePath: cmp.filePath, encapsulation: cmp.encapsulation, tag: cmp.tag, @@ -18,24 +25,24 @@ export async function generateJsonDocs(config, compilerCtx, _buildCtx, docsData) description: cmp.docs, docsTags: cmp.docsTags, usage: cmp.usage, - properties: cmp.props.map(prop => ({ + properties: cmp.props.map((prop) => ({ ...prop, description: prop.docs, })), - attributes: cmp.props.map(prop => ({ + attributes: cmp.props.map((prop) => ({ ...prop, name: prop.attr, defaultValue: prop.default, description: prop.docs, })), methods: cmp.methods, - events: cmp.events.map(e => ({ + events: cmp.events.map((e) => ({ ...e, name: e.event, description: e.docs, type: e.detail, })), - cssProperties: cmp.styles.map(style => ({ + cssProperties: cmp.styles.map((style) => ({ ...style, description: style.docs, })), @@ -59,6 +66,13 @@ function isOutputTargetCustomElementDocsJson(o) { return o.name === 'custom-element-docs'; } -export async function writeDocsOutput(compilerCtx, jsonContent: string, root: string) { - return compilerCtx.fs.writeFile(`${root}/src/custom-elements.json`, jsonContent); +export async function writeDocsOutput( + compilerCtx, + jsonContent: string, + root: string +) { + return compilerCtx.fs.writeFile( + `${root}/src/custom-elements.json`, + jsonContent + ); } diff --git a/packages/crayons-core/gulpfile.js b/packages/crayons-core/gulpfile.js index 1f5c929da..106352807 100644 --- a/packages/crayons-core/gulpfile.js +++ b/packages/crayons-core/gulpfile.js @@ -2,35 +2,49 @@ const fs = require('fs').promises; const path = require('path'); const buildIconsJson = async () => { - const iconComponentPath = './src/components/icon'; - const iconAssetsDir = '/icon-assets'; - const iconAssetsPath = '/icon-assets/icons'; - const iconsJsonFile = 'icons.json'; - - const iconsJson = {}; - const getIconsJson = async () => { - try { - const allSvgFiles = await fs.readdir(path.join(iconComponentPath, iconAssetsPath)); - for (const svgFile of allSvgFiles) { - const svgFilePath = path.join(iconComponentPath, iconAssetsPath, svgFile); - const svgContent = await fs.readFile(svgFilePath); - - const svgName = path.parse(svgFile).name; - iconsJson[svgName] = svgContent.toString(); - } - return iconsJson; - } catch (ex) { - throw ex; - } - }; + const iconComponentPath = './src/components/icon'; + const iconAssetsDir = '/icon-assets'; + const iconAssetsPath = '/icon-assets/icons'; + const iconsJsonFile = 'icons.json'; + const iconsJson = {}; + const getIconsJson = async () => { try { - const iconsJson = await getIconsJson(); - fs.writeFile(path.join(iconComponentPath,iconAssetsDir, iconsJsonFile), JSON.stringify(iconsJson)); - console.log(`Succesfully written ${iconsJsonFile}`); + const allSvgFiles = await fs.readdir( + path.join(iconComponentPath, iconAssetsPath) + ); + for (const svgFile of allSvgFiles) { + const svgFilePath = path.join( + iconComponentPath, + iconAssetsPath, + svgFile + ); + const svgContent = await fs.readFile(svgFilePath); + + const svgName = path.parse(svgFile).name; + iconsJson[svgName] = svgContent.toString(); + } + return iconsJson; } catch (ex) { - console.error(`Exception occured while building ${iconsJsonFile}: ${JSON.stringify(ex)}`); + console.error( + `Exception occured while reading svg files : ${JSON.stringify(ex)}` + ); + throw ex; } + }; + + try { + const iconsJson = await getIconsJson(); + fs.writeFile( + path.join(iconComponentPath, iconAssetsDir, iconsJsonFile), + JSON.stringify(iconsJson) + ); + console.log(`Succesfully written ${iconsJsonFile}`); + } catch (ex) { + console.error( + `Exception occured while building ${iconsJsonFile}: ${JSON.stringify(ex)}` + ); + } }; exports.default = buildIconsJson; diff --git a/packages/crayons-core/package.json b/packages/crayons-core/package.json index fadbc3e9e..f2a628381 100644 --- a/packages/crayons-core/package.json +++ b/packages/crayons-core/package.json @@ -37,13 +37,7 @@ "docs:build": "vuepress build .", "docs:dev": "npm run build:components && vuepress dev .", "generate": "plop", - "lint:styles": "stylelint 'src/**/*.scss' '.vuepress/**/*.vue'", - "lint:ts": "eslint 'src'", - "lint:ts:fix": "eslint 'src' --fix", - "lint": "npm run lint:ts && npm run lint:styles", - "lint:fix": "npm run lint:ts:fix && npm run lint:styles", "local": "stencil build --dev --watch", - "precommit": "lint-staged", "prestart": "kill-port 3333", "semantic-release": "semantic-release", "start": "stencil build --dev --watch --serve --port=3333", @@ -77,7 +71,6 @@ "gulp": "^4.0.2", "jest": "24.9.0", "jest-cli": "24.9.0", - "lint-staged": "^10.5.4", "node-sass": "^5.0.0", "npm-run-all": "^4.1.5", "plop": "^2.7.4", @@ -104,17 +97,6 @@ "dependencies": { "moment-mini": "^2.24.0" }, - "lint-staged": { - "src/**/*.{css,scss}": [ - "stylelint" - ], - ".vuepress/**/*.vue": [ - "stylelint" - ], - "src/**/*.{js,ts,tsx,jsx}": [ - "eslint --fix" - ] - }, "publishConfig": { "access": "public" }, diff --git a/packages/crayons-datatable/package.json b/packages/crayons-datatable/package.json index 80e42e3ff..fe640eac2 100644 --- a/packages/crayons-datatable/package.json +++ b/packages/crayons-datatable/package.json @@ -37,13 +37,7 @@ "docs:build": "vuepress build .", "docs:dev": "npm run build:components && vuepress dev .", "generate": "plop", - "lint:styles": "stylelint 'src/**/*.scss' '.vuepress/**/*.vue'", - "lint:ts": "eslint 'src'", - "lint:ts:fix": "eslint 'src' --fix", - "lint": "npm run lint:ts && npm run lint:styles", - "lint:fix": "npm run lint:ts:fix && npm run lint:styles", "local": "stencil build --dev --watch", - "precommit": "lint-staged", "prestart": "kill-port 3334", "semantic-release": "semantic-release", "start": "stencil build --dev --watch --serve --port=3334", @@ -77,7 +71,6 @@ "gulp": "^4.0.2", "jest": "24.9.0", "jest-cli": "24.9.0", - "lint-staged": "^10.5.4", "node-sass": "^5.0.0", "npm-run-all": "^4.1.5", "plop": "^2.7.4", @@ -105,17 +98,6 @@ "@freshworks/crayons": "file:../crayons-core", "moment-mini": "^2.24.0" }, - "lint-staged": { - "src/**/*.{css,scss}": [ - "stylelint" - ], - ".vuepress/**/*.vue": [ - "stylelint" - ], - "src/**/*.{js,ts,tsx,jsx}": [ - "eslint --fix" - ] - }, "publishConfig": { "access": "public" },