build: align tsconfigs (#2132)

packages/core/.eslintrc.js

@@ -17,7 +17,7 @@ const commonRules = {
   "no-underscore-dangle": "off",
   "import/prefer-default-export": "off",
   "no-plusplus": "off",
-  "react/react-in-jsx-scope": 0,
+  "react/react-in-jsx-scope": "error",
   "react/no-danger": "error",
   "react/jsx-one-expression-per-line": "off",
   "react/prop-types": 0,
@@ -110,6 +110,19 @@ module.exports = {
         "react-hooks/rules-of-hooks": "off",
         "react/jsx-key": "off"
       }
+    },
+    // TODO This entire block should be removed and fixed, unless we move to React 17+
+    {
+      files: [
+        "**/__stories__/**/*.{js,jsx,ts,tsx}",
+        "src/storybook/stand-alone-documentaion/**/*.{js,jsx,ts,tsx}",
+        "src/storybook/patterns/**/*.{js,jsx,ts,tsx}",
+        "src/storybook/components/**/*.{js,jsx,ts,tsx}",
+        "src/storybook/decorators/**/*.{js,jsx,ts,tsx}"
+      ],
+      rules: {
+        "react/react-in-jsx-scope": "off"
+      }
     }
   ],
   env: {

packages/core/.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import * as VibeComponents from "../src/components/index";
+import * as VibeComponents from "../src/components";
 import * as VibeComponentsNext from "../src/next";
-import * as VibeIcons from "../src/components/Icon/Icons/index";
+import * as VibeIcons from "../src/components/Icon/Icons";
 import { Preview } from "@storybook/react";
 import isChromatic from "chromatic/isChromatic";
 import { DocsContainer, DocsPage, Unstyled } from "@storybook/blocks";
@@ -25,7 +25,6 @@ import {
   UsageGuidelines,
   withMemoryStats,
   RelatedComponent,
-  MultipleStoryElementsWrapper,
   StorybookLink
 } from "vibe-storybook-components";
 import CanvasWrapper from "../src/storybook/components/canvas-wrapper/CanvasWrapper";
@@ -147,7 +146,7 @@ const preview: Preview = {
       }
     }
   },
-  
+
   loaders: isChromatic() && document.fonts ? [fontLoader] : []
 };
 

packages/core/.storybook/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "resolveJsonModule": true
+  },
+  "include": ["**/*.ts", "**/*.tsx", "**/*.json"]
+}

packages/core/plop/component/index.js

@@ -58,7 +58,7 @@ module.exports = plop => {
       },
       {
         type: "append",
-        path: "src/components/index.js",
+        path: "src/components/index.ts",
         pattern: /(\n$)/gm,
         separator: "",
         template:

packages/core/rollup.config.js

@@ -77,9 +77,8 @@ export default {
       extensions: [...EXTENSIONS, ".json", ".css"]
     }),
     typescript({
-      tsconfig: path.join(ROOT_PATH, "tsconfig.esm.json"),
       tsconfigOverride: {
-        exclude: ["**/__tests__", "**/__stories__"]
+        exclude: ["**/__tests__", "**/__stories__", path.join(SRC_PATH, "storybook")]
       }
     }),
     babel({

packages/core/scripts/build-utils.js

@@ -49,7 +49,7 @@ function buildComponentsTypesIndexFile() {
 function buildStorybookComponentsIndexFile() {
   const imports = ["import 'vibe-storybook-components/index.css';"];
   const exports = ["export * from 'vibe-storybook-components'"];
-  convertExportsToFile(imports.concat(exports), "storybook/index.js");
+  convertExportsToFile(imports.concat(exports), "storybook/index.ts");
 }
 
 module.exports = {

packages/core/src/components/Accordion/AccordionItem/__tests__/accordionItem-tests.test.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import Accordion from "../../Accordion/Accordion";
 import AccordionItem from "../AccordionItem";

packages/core/src/components/AttentionBox/AttentionBoxLink/AttentionBoxLink.tsx

@@ -1,9 +1,9 @@
-import { FC } from "react";
+import React from "react";
 import styles from "./AttentionBoxLink.module.scss";
 import Link, { LinkProps } from "../../Link/Link";
 import cx from "classnames";
 
-const AttentionBoxLink: FC<LinkProps> = ({
+const AttentionBoxLink: React.FC<LinkProps> = ({
   href,
   text,
   // TODO: use Link's target default in next major

packages/core/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import cx from "classnames";
 import styles from "./StickyCategoryHeader.module.scss";
 import comboboxStyles from "../../Combobox.module.scss";

packages/core/src/components/Counter/__tests__/counter-snapshot-tests.test.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import renderer from "react-test-renderer";
 import Counter from "../Counter";
 

packages/core/src/components/Counter/__tests__/counter-tests.test.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { render } from "@testing-library/react";
 import Counter from "../Counter";
 

packages/core/src/components/DatePicker/YearPicker/YearsList.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Button from "../../Button/Button";
 import styles from "./YearPicker.module.scss";
 

packages/core/src/components/Dialog/__tests__/Dialog.test.js

@@ -1,3 +1,4 @@
+import React from "react";
 import userEvent from "@testing-library/user-event";
 import { render, screen } from "@testing-library/react";
 import Dialog from "../Dialog";

packages/core/src/components/Dropdown/components/ChildrenContent/ChildrenContent.jsx

@@ -1,6 +1,6 @@
+import React, { useCallback } from "react";
 import Avatar from "../../../Avatar/Avatar";
 import Icon from "../../../Icon/Icon";
-import { useCallback } from "react";
 import styles from "./ChildrenContent.module.scss";
 import { getTestId } from "../../../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../../../tests/constants";

packages/core/src/components/GridKeyboardNavigationContext/__tests__/GridKeyboardNavigationContext.test.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { act, cleanup, renderHook } from "@testing-library/react-hooks";
 import userEvent from "@testing-library/user-event";
 import { NavDirections } from "../../../hooks/useFullKeyboardListeners";

packages/core/src/components/Icon/__tests__/all-icons-tests.test.ts

@@ -27,7 +27,7 @@ describe("All icons", () => {
     });
     // Make sure all icons are also exported in allIcons
     if (missingIcons.length > 0) {
-      console.error("Missing exported icons in components/Icon/Icons/index.js", missingIcons);
+      console.error("Missing exported icons in components/Icon/Icons/index.ts", missingIcons);
     }
     expect(missingIcons).toEqual([]);
   });

packages/core/src/components/Label/Leg.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 const Leg = () => (
   <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path

packages/core/src/components/Label/__tests__/Label-tests.test.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { render, fireEvent, screen } from "@testing-library/react";
 import Label from "../Label";
 import { getTestId } from "../../../tests/test-ids-utils";

packages/core/src/components/Link/__tests__/link-snapshot-tests.test.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
+import React from "react";
 import renderer from "react-test-renderer";
 import Link from "../Link";
 

packages/core/src/components/Link/__tests__/link-tests.test.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import Link from "../Link";
 

packages/core/src/components/Menu/MenuDivider/MenuDivider.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { ComponentDefaultTestId, getTestId } from "../../../tests/test-ids-utils";
 import cx from "classnames";
 import Divider from "../../Divider/Divider";

packages/core/src/components/MultiStepIndicator/__tests__/multiStepIndicator-tests.test.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { fireEvent, render } from "@testing-library/react";
 import { act } from "@testing-library/react-hooks";
 import MultiStepIndicator, { Step } from "../MultiStepIndicator";

packages/core/src/components/RadioButton/__tests__/radioButton-snapshot-tests.test.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import renderer from "react-test-renderer";
 import RadioButton from "../RadioButton";
 

packages/core/src/components/RadioButton/__tests__/radioButton-tests.test.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { fireEvent, render, cleanup, screen } from "@testing-library/react";
 import RadioButton from "../RadioButton";
 

packages/core/src/components/Refable/__tests__/Refable.test.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { cleanup } from "@testing-library/react-hooks";
 import { fireEvent, render } from "@testing-library/react";
 import { Refable } from "../Refable";

packages/core/src/components/Tipseen/TipseenBasicContent.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import React from "react";
 import cx from "classnames";
 import TipseenTitle from "./TipseenTitle";
 import { VibeComponentProps } from "../../types";
@@ -13,7 +13,7 @@ export interface TipseenBasicContentProps extends VibeComponentProps {
   children?: ElementContent | ElementContent[];
 }
 
-const TipseenBasicContent: FC<TipseenBasicContentProps> = ({
+const TipseenBasicContent: React.FC<TipseenBasicContentProps> = ({
   title,
   children = null,
   titleClassName,

packages/core/src/components/Tipseen/TipseenImage.tsx

@@ -1,5 +1,5 @@
 import cx from "classnames";
-import { FC } from "react";
+import React from "react";
 import styles from "./TipseenImage.module.scss";
 import TipseenMedia from "./TipseenMedia/TipseenMedia";
 
@@ -12,7 +12,7 @@ export interface TipseenImageProps {
   tipseenMediaClassName?: string;
 }
 
-const TipseenImage: FC<TipseenImageProps> = ({ src, alt, className, tipseenMediaClassName }) => {
+const TipseenImage: React.FC<TipseenImageProps> = ({ src, alt, className, tipseenMediaClassName }) => {
   return (
     // TODO future breaking change where we remove the TipseenMedia component and we remove TipseenImage?
     <TipseenMedia className={tipseenMediaClassName}>

packages/core/tsconfig.base.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "lib": ["esnext", "dom"],
+    "target": "es6",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "jsx": "react",
+    "skipLibCheck": true,
+    "noImplicitAny": true,
+    "baseUrl": "."
+  }
+}

packages/core/tsconfig.cjs.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "CommonJS"
+  }
+}

packages/core/tsconfig.json

@@ -1,24 +1,14 @@
 {
-  "include": ["src/**/*", "types/**/*"],
+  "extends": "./tsconfig.base.json",
   "compilerOptions": {
-    "rootDirs": ["./src", "./.storybook"],
-    "lib": ["esnext", "dom"],
-    "allowJs": true,
-    "target": "es6",
-    "module": "CommonJS",
-    "sourceMap": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "declarationDir": "dist/types",
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
+    "module": "ESNext",
     "declaration": true,
-    "skipLibCheck": true,
-    "noImplicitAny": true,
-    "baseUrl": ".",
+    "declarationDir": "dist/types",
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "src",
     "allowSyntheticDefaultImports": true,
-    "jsx": "react-jsx",
-    "plugins": [{ "name": "typescript-plugin-css-modules" }],
-    "esModuleInterop": true
-  }
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
+  },
+  "include": ["src/**/*", "types/**/*"]
 }

packages/core/webpack.config.js

@@ -79,6 +79,7 @@ module.exports = () => {
             {
               loader: "ts-loader",
               options: {
+                configFile: "tsconfig.cjs.json",
                 onlyCompileBundledFiles: true
               }
             }