[Theming] Fix tsc output

package.json

@@ -8,6 +8,7 @@
     "dist",
     "lib",
     "lib/constants",
+    "lib/icons",
     "lib/utils"
   ],
   "types": "./lib/index.d.ts",
@@ -30,7 +31,7 @@
     "build:icons:deprecated": "svgr --expand-props none --template src/utils/svgToIconTemplate/index.js -d src/icons/ src/svgs/deprecated/",
     "build:icons:index": "create-index src/icons/",
     "build:rollup": "rollup -c",
-    "build:babel": "babel src -d lib --extensions '.js,.ts,.tsx'",
+    "build:babel": "babel src -d lib --extensions '.js,.ts,.tsx' --ignore '**/*.test.{js,ts,tsx}'",
     "build:svgs:index": "create-index src/svgs/ --recursive --update --extensions svg",
     "publish-package": "run-s build && yarn publish",
     "heroku-postbuild": "yarn run build:icons && yarn run build:icons:index && yarn run build-storybook",

shared/tsconfig.json

@@ -13,8 +13,8 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "paths": {
-      "emotion-theming": ["types/emotion-theming"],
-      "@emotion/styled": ["types/@emotion/styled"]
+      "emotion-theming": ["src/types/emotion-theming"],
+      "@emotion/styled": ["src/types/@emotion/styled"]
     },
     "resolveJsonModule": true,
     "skipLibCheck": true,

src/shared-components/accordion/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { Accordion } from './index';
 

src/shared-components/alert/test.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import TestRenderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { Alert } from './index';
 

src/shared-components/avatar/test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { Avatar } from '.';
 

src/shared-components/banner/test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import TestRenderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { Banner } from './index';
 

src/shared-components/button/components/linkButton/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import renderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { LinkButton } from './index';
 

src/shared-components/button/components/roundButton/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import renderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import CameraIcon from '../../../../svgs/icons/camera-icon.svg';
 

src/shared-components/button/components/textButton/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import renderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { TextButton } from './index';
 

src/shared-components/button/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import renderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 import { primaryTheme } from 'src/constants/themes';
 
 import CameraIcon from '../../svgs/icons/camera-icon.svg';

src/shared-components/callout/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { primaryTheme } from 'src/constants/themes';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import NeckGlyph from '../../svgs/glyphs/neck-glyph.svg';
 

src/shared-components/carousel/arrow/test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import Arrow from './index';
 

src/shared-components/carousel/test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { Carousel } from './index';
 

src/shared-components/chip/test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { Chip } from './index';
 

src/shared-components/container/test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { Container } from './index';
 

src/shared-components/dialogModal/test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { ModalTitle } from './style';
 

src/shared-components/dropdown/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { DesktopDropdown } from './desktopDropdown';
 import { MobileDropdown } from './mobileDropdown';

src/shared-components/field/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { MessageItem } from '../verificationMessages/style';
 

src/shared-components/immersiveModal/test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { ModalTitle } from './style';
 

src/shared-components/indicator/test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { Indicator } from './index';
 

src/shared-components/loadingSpinner/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { primaryTheme } from 'src/constants/themes';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { LoadingSpinner } from './index';
 

src/shared-components/optionButton/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import renderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import AcneGlyph from '../../svgs/glyphs/acne-glyph.svg';
 

src/shared-components/progressBar/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { primaryTheme } from 'src/constants/themes';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { ProgressBar } from './index';
 

src/shared-components/selectorButton/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import renderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import AcneOneGlyph from '../../svgs/glyphs/acne-one-glyph.svg';
 

src/shared-components/tabs/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { TabItem } from './style';
 

src/shared-components/toggle/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import renderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { Toggle } from './index';
 

src/shared-components/tooltip/test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { Tooltip } from './index';
 

src/shared-components/verificationMessages/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';
-import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
+import { decorateWithThemeProvider } from 'src/tests/decorateWithThemeProvider';
 
 import { VerificationMessages } from './index';
 

src/tests/README.md

@@ -0,0 +1,3 @@
+We write test helpers in `src/tests` instead of the `tests` directory at the root because in order for our TypeScript declaration files to not be deeply nested (e.g. `lib/src/constants`, instead of `lib/constants`, which is where we output our non-declaration source), `src` must be the "The longest common path of all non-declaration input files".
+
+See: https://www.typescriptlang.org/tsconfig#outDir and https://www.typescriptlang.org/tsconfig#rootDir

tests/utils/decorateWithThemeProvider.tsx → src/tests/decorateWithThemeProvider.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ThemeProvider } from 'emotion-theming';
 
-import { primaryTheme } from '../../src/constants/themes';
-import type { ThemeType } from '../../src/constants/themes/types';
+import { primaryTheme } from '../constants/themes';
+import type { ThemeType } from '../constants/themes/types';
 
 type PropsType = Record<string, unknown>;
 

types/@emotion/styled/index.ts → src/types/@emotion/styled/index.ts

@@ -9,7 +9,7 @@ import { ThemeType } from 'src/constants/themes/types';
 import styled, {
   CreateStyled,
   StyledComponent,
-} from '../../../node_modules/@emotion/styled';
+} from '../../../../node_modules/@emotion/styled';
 
 export default styled as CreateStyled<ThemeType>;
 

src/types/README.md

@@ -0,0 +1,3 @@
+We write global `types` in `src/types` instead of a `types` directory at the root because in order for our TypeScript declaration files to not be deeply nested (e.g. `lib/src/constants`, instead of `lib/constants`, which is where we output our non-declaration source), `src` must be the "The longest common path of all non-declaration input files".
+
+See: https://www.typescriptlang.org/tsconfig#outDir and https://www.typescriptlang.org/tsconfig#rootDir

types/emotion-theming/index.ts → src/types/emotion-theming/index.ts

@@ -9,7 +9,7 @@ import { ThemeType } from 'src/constants/themes/types';
 import {
   useTheme as useEmotionTheme,
   ThemeProvider,
-} from '../../node_modules/emotion-theming';
+} from '../../../node_modules/emotion-theming';
 
 export const useTheme = () => useEmotionTheme<ThemeType>();
 

src/types/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {},
+  "references": [
+    {
+      "path": "../src"
+    }
+  ]
+}

tests/setupTests.ts

@@ -1,15 +1,19 @@
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
 configure({ adapter: new Adapter() });
 
 window.matchMedia =
   window.matchMedia ||
   function () {
     return {
       matches: false,
+      dispatchEvent: () => false,
       addListener: () => undefined,
       removeListener: () => undefined,
+      media: '',
+      onchange: () => undefined,
+      addEventListener: () => undefined,
+      removeEventListener: () => undefined,
     };
   };

tsconfig.json

@@ -3,16 +3,13 @@
   "compilerOptions": {
     "baseUrl": "./",
     "declaration": true,
+    "declarationMap": true,
     "emitDeclarationOnly": true,
     "outDir": "lib",
-    "rootDirs": ["src"]
+    // The folder structure in outDir is based on "The longest common path of all non-declaration input files."
+    // To match our babel output, we need to compile everything in `src` without also nesting it in a folder named `src`.
+    // Setting the `rootDir` to `src` will guarantee this behavior, and raise compilation errors if violated.
+    "rootDir": "src"
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.js",
-    "src/**/*.tsx",
-    "tests/**/*.ts",
-    "tests/**/*.tsx",
-    "types/**/*.ts"
-  ]
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.tsx"]
 }