fix(components): Import Ant components by their fully qualified name

babel-plugin-import doesn't work for dependencies that reside inside vendors bundle, so they need to
be explicitly imported by their fully qualified name. This sucks, so we at least need an tslint rule
in the future.

package.json

@@ -108,6 +108,9 @@
       "!**/*.d.ts"
     ],
     "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$",
+    "moduleNameMapper": {
+      "\\.less": "<rootDir>/../tools/styleMock.js"
+    },
     "moduleFileExtensions": [
       "ts",
       "tsx",

src/components/Form.tsx

@@ -2,7 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Resource, Form as HALForm } from '@optics/hal-client';
 import { Data, Schema } from '@optics/hal-client/dist/Form';
-import { Form as AntForm, Button } from 'antd';
+
+import AntForm from 'antd/lib/form';
+import 'antd/lib/form/style';
+
+import Button from 'antd/lib/button';
+import 'antd/lib/button/style';
+
 import { FormProps as AntFormProps, WrappedFormUtils } from 'antd/lib/form/Form';
 import { FormItemProps as AntFormItemProps } from 'antd/lib/form/FormItem';
 

src/components/LoginForm.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Resource, Form as HALForm } from '@optics/hal-client';
-import { Alert, Button } from 'antd';
-import { AlertProps } from 'antd/lib/alert';
+
+import Alert, { AlertProps } from 'antd/lib/alert';
+import 'antd/lib/button/style';
+import Button from 'antd/lib/button';
 import { ButtonProps } from 'antd/lib/button/button';
+import 'antd/lib/button/style';
 
 import { Form as FormComponent } from './Form';
 import { SchemaFields } from './SchemaFields';

src/containers/Login.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { Row } from 'antd';
 import { Resource } from '@optics/hal-client';
 import { Transition, TargetState } from '@uirouter/react';
 
+import Row from 'antd/lib/row';
+import 'antd/lib/row/style';
+
 import { CredentialStore } from '../CredentialStore';
 import { LoginForm } from '../components/LoginForm';
 

src/ui-router.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { UIRouterReact, servicesPlugin, pushStateLocationPlugin } from '@uirouter/react';
 import { UIRouterRx } from '@uirouter/rx';
-import notification from 'antd/lib/notification';
 import * as paramTypes from './ui-router/paramTypes';
+
+import notification from 'antd/lib/notification';
 import 'antd/lib/notification/style';
 
 export const buildRouter = (): UIRouterReact => {

tools/styleMock.js

@@ -0,0 +1,3 @@
+// Allows jest to handle *.scss imports by returning an empty module
+
+module.exports = {};

tsconfig.json

@@ -16,6 +16,7 @@
   ],
   "exclude": [
     "**/*.spec.ts",
-    "**/*.spec.tsx"
+    "**/*.spec.tsx",
+    "**/__mocks__/*"
   ]
 }