fix: [email protected] --> [email protected] & update imports (#709)

Author: Matt Goo

docs/best-practices.md

@@ -14,3 +14,22 @@ By not including the font icon inside your CSS file, it reduces the file size. B
 ### Use with MDC Ripple
 
 If you load your font icons with a [Ripple](../packages/ripple) with the above method, you will need to set the height and width of the icons. This is because MDC Ripple calculates the ripple size from the initial height/width.
+
+### Importing packages
+
+References:
+-  https://stackoverflow.com/questions/29596714/new-es6-syntax-for-importing-commonjs-amd-modules-i-e-import-foo-require
+- https://github.com/basarat/typescript-book/blob/master/docs/project/external-modules.md
+- https://github.com/Microsoft/TypeScript/issues/2242#issuecomment-92218146
+- https://github.com/Microsoft/TypeScript/issues/2242#issuecomment-83694181
+
+Since `[email protected]` is exporting `default`, we should be importing as such:
+```ts
+// referenced in https://github.com/basarat/typescript-book/blob/master/docs/project/external-modules.md#default-exportsimports
+import classnames from 'classnames';
+```
+
+In other cases where we import modules that do not use `default`, we should import like:
+```ts
+import * as classnames from 'classnames';
+```

packages/button/index.tsx

@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 import * as Ripple from '@material/react-ripple';
 
 const BUTTON_CLASS_NAME = 'mdc-button__icon';

packages/button/package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@material/button": "^0.43.0",
     "@material/react-ripple": "^0.10.0",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
     "react": "^16.4.2"
   },
   "publishConfig": {

packages/card/ActionButtons.tsx

@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 
 type ChildType = React.ReactElement<React.HTMLProps<HTMLButtonElement|HTMLAnchorElement>>;
 

packages/card/ActionIcons.tsx

@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 
 type ChildType = React.ReactElement<React.HTMLProps<HTMLImageElement|HTMLOrSVGElement>>;
 

packages/card/Actions.tsx

@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 
 export interface ActionsProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;

packages/card/Media.tsx

@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 
 export interface MediaProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;

packages/card/PrimaryContent.tsx

@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 import * as Ripple from '@material/react-ripple';
 
 export interface PrimaryContentBaseProps extends React.HTMLProps<HTMLDivElement>, Ripple.InjectedProps<HTMLDivElement>{

packages/card/index.tsx

@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 import ActionButtons from './ActionButtons';
 import ActionIcons from './ActionIcons';
 import Actions from './Actions';

packages/card/package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@material/card": "^0.41.0",
     "@material/react-ripple": "^0.10.0",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
     "react": "^16.4.2"
   },
   "publishConfig": {