@grafana/ui lib now contains one components, seperate lint & tsc steps

jest.config.js

@@ -6,7 +6,9 @@ module.exports = {
   },
   "moduleDirectories": ["node_modules", "public"],
   "roots": [
-    "<rootDir>/public"
+    "<rootDir>/public/app",
+    "<rootDir>/public/test",
+    "<rootDir>packages"
   ],
   "testRegex": "(\\.|/)(test)\\.(jsx?|tsx?)$",
   "moduleFileExtensions": [

package.json

@@ -109,7 +109,8 @@
     "watch": "webpack --progress --colors --watch --mode development --config scripts/webpack/webpack.dev.js",
     "build": "grunt build",
     "test": "grunt test",
-    "lint": "tslint -c tslint.json --project tsconfig.json",
+    "tslint": "tslint -c tslint.json --project tsconfig.json",
+    "typecheck": "tsc --noEmit",
     "jest": "jest --notify --watch",
     "api-tests": "jest --notify --watch --config=tests/api/jest.js",
     "precommit": "lint-staged && grunt precommit"

packages/grafana-ui/package.json

@@ -4,11 +4,23 @@
   "description": "",
   "main": "src/index.ts",
   "scripts": {
-    "test": "tsc --noEmit"
+    "tslint": "tslint -c tslint.json --project tsconfig.json",
+    "typecheck": "tsc --noEmit"
   },
   "author": "",
   "license": "ISC",
+  "dependencies": {
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-popper": "^1.3.0",
+    "react-highlight-words": "0.11.0",
+    "@torkelo/react-select": "2.1.1",
+    "react-transition-group": "^2.2.1",
+    "react-virtualized": "^9.21.0"
+  },
   "devDependencies": {
+    "@types/jest": "^23.3.2",
+    "@types/react": "^16.7.6",
     "typescript": "^3.2.2"
   }
 }

packages/grafana-ui/src/components/DeleteButton/DeleteButton.test.tsx

 import React from 'react';
-import DeleteButton from './DeleteButton';
+import { DeleteButton } from './DeleteButton';
 import { shallow } from 'enzyme';
 
 describe('DeleteButton', () => {
-  let wrapper;
-  let deleted;
+  let wrapper: any;
+  let deleted: any;
 
   beforeAll(() => {
     deleted = false;
@@ -12,7 +12,8 @@ describe('DeleteButton', () => {
     function deleteItem() {
       deleted = true;
     }
-    wrapper = shallow(<DeleteButton onConfirmDelete={() => deleteItem()} />);
+
+    wrapper = shallow(<DeleteButton onConfirm={() => deleteItem()} />);
   });
 
   it('should show confirm delete when clicked', () => {

packages/grafana-ui/src/components/DeleteButton/DeleteButton.tsx

-import React, { PureComponent } from 'react';
+import React, { PureComponent, SyntheticEvent } from 'react';
 
 interface Props {
-  onConfirm();
+  onConfirm(): void;
 }
 
 interface State {
@@ -13,7 +13,7 @@ export class DeleteButton extends PureComponent<Props, State> {
     showConfirm: false,
   };
 
-  onClickDelete = event => {
+  onClickDelete = (event: SyntheticEvent) => {
     if (event) {
       event.preventDefault();
     }
@@ -23,7 +23,7 @@ export class DeleteButton extends PureComponent<Props, State> {
     });
   };
 
-  onClickCancel = event => {
+  onClickCancel = (event: SyntheticEvent) => {
     if (event) {
       event.preventDefault();
     }

packages/grafana-ui/tsconfig.json

 {
+  "extends": "../../tsconfig.json",
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx"
@@ -6,30 +7,11 @@
   "exclude": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsc"
-  },
   "compilerOptions": {
-    "moduleResolution": "node",
-    "target": "es5",
-    "lib": ["es6", "dom"],
-    "jsx": "react",
+    "rootDir": ".",
     "module": "esnext",
     "outDir": "dist",
-    "declaration": false,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "importHelpers": true,
-    "noEmitHelpers": true,
-    "removeComments": false,
-    "inlineSourceMap": false,
-    "sourceMap": true,
-    "noEmitOnError": false,
-    "emitDecoratorMetadata": false,
-    "experimentalDecorators": true,
     "declaration": true,
-    "declarationDir": "./dist/types",
     "noImplicitAny": true,
     "strictNullChecks": true
   }

packages/grafana-ui/tslint.json

+{
+  "extends": "../../tslint.json"
+}

public/app/features/teams/__snapshots__/TeamList.test.tsx.snap

@@ -124,7 +124,7 @@ exports[`Render should render teams table 1`] = `
               className="text-right"
             >
               <DeleteButton
-                onConfirmDelete={[Function]}
+                onConfirm={[Function]}
               />
             </td>
           </tr>
@@ -174,7 +174,7 @@ exports[`Render should render teams table 1`] = `
               className="text-right"
             >
               <DeleteButton
-                onConfirmDelete={[Function]}
+                onConfirm={[Function]}
               />
             </td>
           </tr>
@@ -224,7 +224,7 @@ exports[`Render should render teams table 1`] = `
               className="text-right"
             >
               <DeleteButton
-                onConfirmDelete={[Function]}
+                onConfirm={[Function]}
               />
             </td>
           </tr>
@@ -274,7 +274,7 @@ exports[`Render should render teams table 1`] = `
               className="text-right"
             >
               <DeleteButton
-                onConfirmDelete={[Function]}
+                onConfirm={[Function]}
               />
             </td>
           </tr>
@@ -324,7 +324,7 @@ exports[`Render should render teams table 1`] = `
               className="text-right"
             >
               <DeleteButton
-                onConfirmDelete={[Function]}
+                onConfirm={[Function]}
               />
             </td>
           </tr>

public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap

@@ -204,7 +204,7 @@ exports[`Render should render team members 1`] = `
             className="text-right"
           >
             <DeleteButton
-              onConfirmDelete={[Function]}
+              onConfirm={[Function]}
             />
           </td>
         </tr>
@@ -229,7 +229,7 @@ exports[`Render should render team members 1`] = `
             className="text-right"
           >
             <DeleteButton
-              onConfirmDelete={[Function]}
+              onConfirm={[Function]}
             />
           </td>
         </tr>
@@ -254,7 +254,7 @@ exports[`Render should render team members 1`] = `
             className="text-right"
           >
             <DeleteButton
-              onConfirmDelete={[Function]}
+              onConfirm={[Function]}
             />
           </td>
         </tr>
@@ -279,7 +279,7 @@ exports[`Render should render team members 1`] = `
             className="text-right"
           >
             <DeleteButton
-              onConfirmDelete={[Function]}
+              onConfirm={[Function]}
             />
           </td>
         </tr>
@@ -304,7 +304,7 @@ exports[`Render should render team members 1`] = `
             className="text-right"
           >
             <DeleteButton
-              onConfirmDelete={[Function]}
+              onConfirm={[Function]}
             />
           </td>
         </tr>
@@ -441,7 +441,7 @@ exports[`Render should render team members when sync enabled 1`] = `
             className="text-right"
           >
             <DeleteButton
-              onConfirmDelete={[Function]}
+              onConfirm={[Function]}
             />
           </td>
         </tr>
@@ -482,7 +482,7 @@ exports[`Render should render team members when sync enabled 1`] = `
             className="text-right"
           >
             <DeleteButton
-              onConfirmDelete={[Function]}
+              onConfirm={[Function]}
             />
           </td>
         </tr>
@@ -523,7 +523,7 @@ exports[`Render should render team members when sync enabled 1`] = `
             className="text-right"
           >
             <DeleteButton
-              onConfirmDelete={[Function]}
+              onConfirm={[Function]}
             />
           </td>
         </tr>
@@ -564,7 +564,7 @@ exports[`Render should render team members when sync enabled 1`] = `
             className="text-right"
           >
             <DeleteButton
-              onConfirmDelete={[Function]}
+              onConfirm={[Function]}
             />
           </td>
         </tr>
@@ -605,7 +605,7 @@ exports[`Render should render team members when sync enabled 1`] = `
             className="text-right"
           >
             <DeleteButton
-              onConfirmDelete={[Function]}
+              onConfirm={[Function]}
             />
           </td>
         </tr>

scripts/grunt/default_task.js

@@ -15,10 +15,20 @@ module.exports = function (grunt) {
     'no-only-tests'
   ]);
 
+  grunt.registerTask('tslint', [
+    'newer:exec:tslintPackages',
+    'newer:exec:tslintRoot',
+  ]);
+
+  grunt.registerTask('typecheck', [
+    'newer:exec:typecheckPackages',
+    'newer:exec:typecheckRoot',
+  ]);
+
   grunt.registerTask('precommit', [
-    'sasslint',
-    'newer:exec:tslint',
-    'newer:exec:tsc',
+    'newer:sasslint',
+    'typecheck',
+    'tslint',
     'no-only-tests'
   ]);
 

scripts/grunt/options/exec.js

@@ -2,12 +2,20 @@ module.exports = function (config, grunt) {
   'use strict';
 
   return {
-    tslint: {
-      command: 'node ./node_modules/tslint/lib/tslintCli.js -c tslint.json --project ./tsconfig.json',
+    tslintPackages: {
+      command: 'yarn workspaces run tslint',
+      src: ['packages/**/*.ts*'],
+    },
+    tslintRoot: {
+      command: 'yarn run tslint',
       src: ['public/app/**/*.ts*'],
     },
-    tsc: {
-      command: 'yarn tsc --noEmit',
+    typecheckPackages: {
+      command: 'yarn workspaces run typecheck',
+      src: ['packages/**/*.ts*'],
+    },
+    typecheckRoot: {
+      command: 'yarn run typecheck',
       src: ['public/app/**/*.ts*'],
     },
     jest: 'node ./node_modules/jest-cli/bin/jest.js --maxWorkers 2',

scripts/grunt/options/sasslint.js

@@ -4,6 +4,7 @@ module.exports = function(config) {
     options: {
       configFile: 'public/sass/.sass-lint.yml',
     },
+    // src: ['public/sass#<{(||)}>#*'],
     target: [
       'public/sass/*.scss',
       'public/sass/components/*.scss',

scripts/grunt/options/tslint.js

-module.exports = function(config, grunt) {
-  'use strict'
-  // dummy to avoid template compile error
-  return {
-    source: {
-      files: {
-        src: ""
-      }
-    }
-  };
-};