feat: add vscode extension

.vscode/extensions.json

@@ -4,6 +4,7 @@
     "esbenp.prettier-vscode",
     "firsttris.vscode-jest-runner",
     "dbaeumer.vscode-eslint",
-    "stylelint.vscode-stylelint"
+    "stylelint.vscode-stylelint",
+    "xiejay97.react-devui"
   ]
 }

jest.config.ts

@@ -0,0 +1,5 @@
+import { getJestProjects } from '@nrwl/jest';
+
+export default {
+  projects: getJestProjects(),
+};

jest.preset.js

@@ -1,3 +1,3 @@
-const nxPreset = require('@nrwl/jest/preset');
+const nxPreset = require('@nrwl/jest/preset').default;
 
 module.exports = { ...nxPreset };

package.json

@@ -61,20 +61,21 @@
     "@nrwl/tao": "14.5.6",
     "@nrwl/web": "14.5.6",
     "@nrwl/workspace": "14.5.6",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "13.3.0",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^13.3.0",
     "@types/fs-extra": "^9.0.13",
-    "@types/jest": "^28.1.6",
+    "@types/glob": "^7.2.0",
+    "@types/jest": "^27.4.1",
     "@types/lodash": "^4.14.182",
     "@types/marked": "^4.0.3",
+    "@types/mocha": "^9.1.1",
     "@types/node": "^18.7.3",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "@types/vscode": "^1.70.0",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
-    "babel-jest": "^28.1.3",
-    "dotenv": "^16.0.1",
+    "@vscode/test-electron": "^2.1.5",
+    "babel-jest": "^27.5.1",
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
@@ -86,9 +87,12 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-tsdoc": "^0.2.16",
     "fs-extra": "^10.1.0",
+    "glob": "^8.0.3",
     "husky": "^8.0.1",
-    "jest": "^28.1.3",
+    "jest": "^27.5.1",
     "lerna": "^5.4.2",
+    "mocha": "^10.0.0",
+    "nx": "14.5.6",
     "postcss-html": "^1.5.0",
     "postcss-markdown": "^1.2.0",
     "prettier": "^2.7.1",
@@ -101,7 +105,7 @@
     "stylelint-config-recommended-scss": "^7.0.0",
     "stylelint-config-standard": "^27.0.0",
     "stylelint-scss": "^4.3.0",
-    "ts-jest": "^28.0.8",
+    "ts-jest": "^27.1.4",
     "ts-node": "^10.9.1",
     "typescript": "~4.7.4",
     "yaml-front-matter": "^4.1.1"

packages/hooks/jest.config.ts

@@ -6,5 +6,4 @@ export default {
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/packages/hooks',
-  setupFilesAfterEnv: ['../../jest.setup.js'],
 };

packages/hooks/project.json

@@ -43,9 +43,7 @@
       "outputs": ["coverage/packages/hooks"],
       "options": {
         "jestConfig": "packages/hooks/jest.config.ts",
-        "passWithNoTests": true,
-        "codeCoverage": true,
-        "coverageReporters": ["clover", "json", "lcov", "text"]
+        "passWithNoTests": true
       }
     }
   }

packages/hooks/tsconfig.spec.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node", "@testing-library/jest-dom"]
+    "types": ["jest", "node"]
   },
   "include": [
     "jest.config.ts",

packages/icons/jest.config.ts

@@ -5,6 +5,6 @@ export default {
     '^.+\\.[tj]sx?$': 'babel-jest',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  collectCoverageFrom: ['!./dist/**'],
   coverageDirectory: '../../coverage/packages/icons',
-  setupFilesAfterEnv: ['../../jest.setup.js'],
 };

packages/icons/project.json

@@ -43,9 +43,7 @@
       "outputs": ["coverage/packages/icons"],
       "options": {
         "jestConfig": "packages/icons/jest.config.ts",
-        "passWithNoTests": true,
-        "codeCoverage": true,
-        "coverageReporters": ["clover", "json", "lcov", "text"]
+        "passWithNoTests": true
       }
     }
   }

packages/icons/tsconfig.spec.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node", "@testing-library/jest-dom"]
+    "types": ["jest", "node"]
   },
   "include": [
     "jest.config.ts",

packages/site/jest.config.ts

@@ -7,5 +7,4 @@ export default {
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/packages/site',
-  setupFilesAfterEnv: ['../../jest.setup.js'],
 };

packages/site/project.json

@@ -92,9 +92,7 @@
       "outputs": ["coverage/packages/site"],
       "options": {
         "jestConfig": "packages/site/jest.config.ts",
-        "passWithNoTests": true,
-        "codeCoverage": true,
-        "coverageReporters": ["clover", "json", "lcov", "text"]
+        "passWithNoTests": true
       }
     }
   }

packages/site/tsconfig.spec.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node", "@testing-library/jest-dom"]
+    "types": ["jest", "node"]
   },
   "files": ["../../node_modules/@nrwl/react/typings/cssmodule.d.ts", "../../node_modules/@nrwl/react/typings/image.d.ts"],
   "include": [

packages/ui/components/button/Button.spec.tsx

@@ -0,0 +1,26 @@
+import type { DButtonProps } from './Button';
+import type { RenderResult } from '@testing-library/react';
+
+import { render } from '@testing-library/react';
+
+import { PREFIX } from '../../__tests__';
+import { DButton } from './Button';
+
+describe('DButton', () => {
+  let buttonRender: (props: DButtonProps) => RenderResult;
+  let buttonEl: HTMLElement;
+
+  beforeEach(() => {
+    buttonRender = (props) => {
+      const renderResult = render(<DButton data-testid="button" {...props} />);
+      buttonEl = renderResult.getByTestId('button');
+      return renderResult;
+    };
+  });
+
+  it('should `dType` work', () => {
+    const type = 'secondary';
+    buttonRender({ dType: type });
+    expect(buttonEl.classList.contains(`${PREFIX}button--${type}`)).toBeTruthy();
+  });
+});

packages/ui/components/index.ts

@@ -10,7 +10,7 @@ export { DAlert } from './alert';
 export type { DAnchorProps } from './anchor';
 export { DAnchor } from './anchor';
 
-export type { DAutoCompleteProps } from './auto-complete';
+export { DAutoCompleteProps } from './auto-complete';
 export { DAutoComplete } from './auto-complete';
 
 export type { DAvatarProps } from './avatar';

packages/ui/jest.config.ts

@@ -5,6 +5,8 @@ export default {
     '^.+\\.[tj]sx?$': 'babel-jest',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  collectCoverage: true,
+  collectCoverageFrom: ['./components/**'],
+  coverageReporters: ['clover', 'json', 'lcov', 'text'],
   coverageDirectory: '../../coverage/packages/ui',
-  setupFilesAfterEnv: ['../../jest.setup.js'],
 };

packages/ui/project.json

@@ -48,9 +48,7 @@
       "outputs": ["coverage/packages/ui"],
       "options": {
         "jestConfig": "packages/ui/jest.config.ts",
-        "passWithNoTests": true,
-        "codeCoverage": true,
-        "coverageReporters": ["clover", "json", "lcov", "text"]
+        "passWithNoTests": true
       }
     }
   }

packages/ui/tsconfig.lib.json

@@ -8,7 +8,6 @@
   "files": ["../../node_modules/@nrwl/react/typings/cssmodule.d.ts", "../../node_modules/@nrwl/react/typings/image.d.ts"],
   "exclude": [
     "jest.config.ts",
-    "src/tests/**",
     "**/*.spec.ts",
     "**/*.test.ts",
     "**/*.spec.tsx",

packages/ui/tsconfig.spec.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node", "@testing-library/jest-dom"]
+    "types": ["jest", "node"]
   },
   "include": [
     "jest.config.ts",

packages/utils/jest.config.ts

@@ -6,5 +6,4 @@ export default {
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/packages/utils',
-  setupFilesAfterEnv: ['../../jest.setup.js'],
 };

packages/utils/project.json

@@ -43,9 +43,7 @@
       "outputs": ["coverage/packages/utils"],
       "options": {
         "jestConfig": "packages/utils/jest.config.ts",
-        "passWithNoTests": true,
-        "codeCoverage": true,
-        "coverageReporters": ["clover", "json", "lcov", "text"]
+        "passWithNoTests": true
       }
     }
   }

packages/utils/tsconfig.spec.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node", "@testing-library/jest-dom"]
+    "types": ["jest", "node"]
   },
   "include": [
     "jest.config.ts",

packages/vscode-extension/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@nrwl/web/babel",
+      {
+        "useBuiltIns": "usage"
+      }
+    ]
+  ]
+}

packages/vscode-extension/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/vscode-extension/.vscodeignore

@@ -0,0 +1,10 @@
+.vscode/**
+.vscode-test/**
+src/**
+.gitignore
+.yarnrc
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts

packages/vscode-extension/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Change Log
+
+All notable changes to the "react-devui" extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+
+- Initial release

packages/vscode-extension/README.md

@@ -0,0 +1,3 @@
+# React DevUI
+
+This is the extension for React DevUI development.

packages/vscode-extension/extension.ts

@@ -0,0 +1,30 @@
+import * as vscode from 'vscode';
+
+import { createTerminal, getJestConfigPath } from './utils';
+
+export function activate(context: vscode.ExtensionContext) {
+  console.log('Congratulations, your extension "react-devui" is now active!');
+
+  const disposables = [
+    vscode.commands.registerCommand('run_jest', (uri) => {
+      const [jestConfigPath, folderPath] = getJestConfigPath(uri.path);
+      const terminal = createTerminal('react-devui:jest');
+      terminal.sendText(
+        String.raw`yarn jest "${uri.path}" --config='${jestConfigPath}' --collectCoverageFrom='[".${folderPath.replace(
+          /\.test\.|\.spec\./,
+          '.'
+        )}"]'`
+      );
+    }),
+    vscode.commands.registerCommand('run_jest_folder', (uri) => {
+      const [jestConfigPath, folderPath] = getJestConfigPath(uri.path);
+      const terminal = createTerminal('react-devui:jest');
+      terminal.sendText(String.raw`yarn jest "${uri.path}" --config='${jestConfigPath}' --collectCoverageFrom='[".${folderPath}/**"]'`);
+    }),
+  ];
+
+  context.subscriptions.push(...disposables);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export function deactivate() {}