adds src as a module directory and makes it work with rollup (Shopify#2380)

* adds src as a module directory and makes it work with the rollup

* fixes types imports

* restricts imports to node_modules and /src

* fixes ts lint

* fixes config and types import

Author: kvendrik

config/jest/config.json

@@ -9,7 +9,7 @@
     "\\.svg$": "<rootDir>/config/jest/transformers/svg.js",
     "\\.tsx?$": "<rootDir>/config/jest/transformers/typescript.js"
   },
-  "modulePaths": ["<rootDir>"],
+  "modulePaths": ["<rootDir>/src"],
   "moduleNameMapper": {
     "\\.(s?css)$": "identity-obj-proxy"
   },

config/rollup/index.js

@@ -58,6 +58,9 @@ export default function createRollupConfig({
         module: true,
         jsnext: true,
         main: true,
+        customResolveOptions: {
+          moduleDirectory: ['./', 'node_modules'],
+        },
       }),
       babel({
         include: '**/*.js',

playground/webpack.config.js

@@ -28,7 +28,7 @@ module.exports = {
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
-    modules: ['node_modules', path.resolve(__dirname, '..')],
+    modules: ['node_modules', path.resolve(__dirname, '..', 'src')],
     alias: {
       '@shopify/polaris': path.resolve(__dirname, '..', 'src'),
     },

shrink-ray-build/webpack.config.js

@@ -23,7 +23,7 @@ module.exports = {
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
-    modules: ['node_modules', path.resolve(__dirname, '..')],
+    modules: ['node_modules', path.resolve(__dirname, '..', 'src')],
     alias: {
       '@shopify/polaris': path.resolve(__dirname, '..', 'src'),
     },

src/components/AccountConnection/AccountConnection.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import {Action} from 'src/types';
-import {Avatar, buttonFrom, Card, Stack, TextStyle} from 'src/components';
+import {Action} from 'types';
+import {Avatar, buttonFrom, Card, Stack, TextStyle} from 'components';
 // eslint-disable-next-line shopify/strict-component-boundaries
-import SettingAction from 'src/components/SettingAction';
+import SettingAction from 'components/SettingAction';
 import * as styles from './AccountConnection.scss';
 
 export interface Props {

src/components/AccountConnection/tests/AccountConnection.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {noop} from '@shopify/javascript-utilities/other';
 import {mountWithAppProvider} from 'tests/utilities';
-import {Avatar, buttonFrom} from 'src/components';
+import {Avatar, buttonFrom} from 'components';
 import AccountConnection from '../AccountConnection';
 
 describe('<AccountConnection />', () => {

src/components/ActionList/components/Item/tests/Item.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {mountWithAppProvider} from 'tests/utilities';
-import {UnstyledLink} from 'src/components';
+import {UnstyledLink} from 'components';
 import Item from '../Item';
 
 describe('<Item />', () => {

src/components/Badge/tests/Badge.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {mountWithAppProvider} from 'tests/utilities';
-import {VisuallyHidden} from 'src/components';
+import {VisuallyHidden} from 'components';
 import Badge, {Status, Progress, PROGRESS_LABELS, STATUS_LABELS} from '..';
 
 describe('<Badge />', () => {

src/components/Banner/tests/Banner.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {mountWithAppProvider} from 'tests/utilities';
-import {Button, Icon, UnstyledLink, Heading} from 'src/components';
+import {Button, Icon, UnstyledLink, Heading} from 'components';
 import Banner from '..';
 
 import successIcon from '../icons/circle-check-mark.svg';

src/components/Breadcrumbs/tests/Breadcrumbs.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {noop} from '@shopify/javascript-utilities/other';
 import {mountWithAppProvider} from 'tests/utilities';
-import {CallbackAction, LinkAction} from 'src/types';
+import {CallbackAction, LinkAction} from 'types';
 import Breadcrumbs from '../Breadcrumbs';
 
 describe('<Breadcrumbs />', () => {