chore(tsconfig): add configs directory and ts configuration

.changeset/long-tables-sit.md

@@ -0,0 +1,8 @@
+---
+"@aws-amplify/ui-react-core": patch
+"@aws-amplify/ui-react-native": patch
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui": patch
+---
+
+chore(tsconfig): add configs directory and ts configuration

docs/package.json

@@ -28,7 +28,7 @@
     "@mdx-js/react": "^2.1.0",
     "@moxy/next-compile-node-modules": "^2.1.1",
     "@xstate/inspect": "^0.4.1",
-    "aws-amplify": "^5.0.1",
+    "aws-amplify": "^5.0.16",
     "classnames": "^2.3.1",
     "countries-list": "^2.6.1",
     "dotenv": "^16.0.0",

packages/configs/README.md

@@ -0,0 +1,66 @@
+# Overview
+
+Base Configuration files for platform (example `@aws-amplify/ui-vue`) and utility packages (example `@aws-amplify/ui-react-core`) in the Amplify UI monorepo.
+
+## Package Types
+
+There are currently 3 types of packages that Amplify UI supports:
+
+- **Utility Packages:** Packages shared across all platforms
+
+  - `@aws-amplify/ui`
+
+- **React Utility Packages:** Non-UI React utilites and hooks shared between React and React Native platform packages
+
+  - `@aws-amplify/ui-react-core`
+
+- **Platform UI Packages:**
+  - `@aws-amplify/ui-angular`
+  - `@aws-amplify/ui-react`
+  - `@aws-amplify/ui-react-native`
+  - `@aws-amplify/ui-vue`
+
+## Typescript
+
+To prevent drift between the `compilerOptions` of the _tsconfig.json_ files in the Amplify UI monorepo as more packages are added, base Typescript `compilerOptions` configurations are stored within the [ts](./ts) directory. The **[Base Config](./ts/base.json)** is extended directly or indirectly in all platform and utility packages.
+
+- Utility package _tsconfig.json_ files directly use the **[Base Config](./ts/base.json)**
+- React UI/React Utility package _tsconfig.json_ files use the **[React Base Config](./ts/react.json)**, extends from the **Base Config**
+- React Native UI package _tsconfig.json_ files use the **[React Native Base Config](./ts/react-native.json)**, extends from the **Base Config**
+
+A basic visualization of the extension hierarchy:
+
+```tree
+base.json
+├── react.json
+└── react-native.json
+```
+
+### Strict Mode
+
+All packages are in TS strict mode by default unless opted out at the package configuration level.
+
+### Usage of _tsconfig.dist.json_
+
+To allow type support and linting in _\_\_tests\_\__ and _\_\_mocks\_\__ directories during development, package level _tsconfig.json_ include all _.ts_ and _.tsx_ files. For builds, package level _tsconfig.dist.json_ files extend from their sibling _tsconfig.json_ file overriding the `excludes` value with the _\_\_tests\_\__ and _\_\_mocks\_\__ directories.
+
+**Example:**
+
+_react-core/tsconfig.json_
+
+```json
+{
+  "extends": "../configs/ts/react.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}
+```
+
+_react-core/tsconfig.dist.json_
+
+```json
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__mocks__", "**/__tests__"]
+}
+```

packages/configs/ts/base.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "declaration": true,
+    "esModuleInterop": true,
+    "importHelpers": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "target": "es6"
+  }
+}

packages/configs/ts/react-native.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "skipLibCheck": true,
+    "target": "esnext"
+  }
+}

packages/configs/ts/react.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}

packages/react-core/package.json

@@ -44,7 +44,6 @@
     "@types/jest": "^26.0.23",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.13",
-    "@types/react-native": "^0.63.45",
     "@types/react-test-renderer": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",

packages/react-core/rollup.config.js

@@ -1,36 +1,42 @@
-// rollup.config.js
 import { defineConfig } from 'rollup';
 import typescript from '@rollup/plugin-typescript';
 import externals from 'rollup-plugin-node-externals';
 
+// common config settings
+const input = ['src/index.ts'];
+const sourceMap = false;
+const tsconfig = 'tsconfig.dist.json';
+
+const esmOutputDir = 'dist/esm';
+
 const config = defineConfig([
   // CJS config
   {
-    input: ['src/index.ts'],
-    output: {
-      dir: 'dist',
-      format: 'cjs',
-      sourcemap: false,
-    },
+    input,
+    output: { dir: 'dist', format: 'cjs' },
     plugins: [
       externals({ include: /^@aws-amplify/ }),
-      typescript({ declarationDir: 'dist/types', sourceMap: false }),
+      typescript({ declarationDir: 'dist/types', sourceMap, tsconfig }),
     ],
   },
   // ESM config
   {
-    input: ['src/index.ts'],
+    input,
     output: {
-      dir: 'dist/esm',
+      dir: esmOutputDir,
       format: 'es',
       entryFileNames: '[name].mjs',
       preserveModules: true,
       preserveModulesRoot: 'src',
-      sourcemap: false,
     },
     plugins: [
       externals({ include: /^@aws-amplify/ }),
-      typescript({ outDir: 'dist/esm', declaration: false, sourceMap: false }),
+      typescript({
+        outDir: esmOutputDir,
+        declaration: false,
+        sourceMap,
+        tsconfig,
+      }),
     ],
   },
 ]);

packages/react-core/src/Authenticator/hooks/__tests__/utils.spec.tsx

@@ -7,7 +7,7 @@ import {
   INVALID_OVERRIDES,
   INVALID_SIGN_IN_OVERRIDES,
   OVERRIDES,
-} from '../__mock__/components';
+} from '../__mocks__/components';
 
 describe('isComponentRouteKey', () => {
   it.each(COMPONENT_ROUTE_KEYS)('returns true for a %s value', (route) => {

packages/react-core/src/Authenticator/hooks/useAuthenticatorRoute/__tests__/useAuthenticatorRoute.spec.ts

@@ -2,7 +2,7 @@ import { renderHook } from '@testing-library/react-hooks';
 
 import { RenderNothing } from '../../../../components';
 import { COMPONENT_ROUTE_KEYS } from '../../constants';
-import { DEFAULTS } from '../../__mock__/components';
+import { DEFAULTS } from '../../__mocks__/components';
 import { mockUseAuthenticatorOutput } from '../../useAuthenticator/__mock__/useAuthenticator';
 import { useAuthenticator } from '../../useAuthenticator';
 

packages/react-core/src/Authenticator/hooks/useAuthenticatorRoute/__tests__/utils.spec.ts

@@ -6,7 +6,7 @@ import {
 } from '../../types';
 import { UseAuthenticator } from '../../useAuthenticator/types';
 
-import { DEFAULTS } from '../../__mock__/components';
+import { DEFAULTS } from '../../__mocks__/components';
 import {
   mockMachineContext,
   mockUseAuthenticatorOutput,

packages/react-core/tsconfig.dist.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__mocks__", "**/__tests__"]
+}

packages/react-core/tsconfig.json

@@ -1,18 +1,5 @@
 {
-  "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "baseUrl": ".",
-    "declaration": true,
-    "esModuleInterop": true,
-    "importHelpers": true,
-    "jsx": "react",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noImplicitAny": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "target": "es6"
-  },
+  "extends": "../configs/ts/react.json",
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules"]
 }

packages/react-native/src/Authenticator/common/DefaultContainer/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet, ViewStyle } from 'react-native';
-import { StrictTheme } from 'src/theme';
+import { StrictTheme } from '../../../theme';
 
 import { ContainerStyles, InnerContainerStyles } from './types';
 

packages/react-native/tsconfig.json

@@ -1,19 +1,8 @@
 {
+  "extends": "../configs/ts/react-native.json",
   "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "baseUrl": ".",
-    "declaration": true,
-    "esModuleInterop": true,
-    "importHelpers": true,
-    "jsx": "react-native",
-    "noImplicitAny": true,
-    "module": "esnext",
-    "moduleResolution": "node",
     "outDir": "./dist",
-    "rootDir": "src",
-    "skipLibCheck": true,
-    "strict": true,
-    "target": "esnext"
+    "rootDir": "src"
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules"]

packages/react/.eslintrc.js

@@ -44,7 +44,7 @@ module.exports = {
       files: ['**/*.spec.*', '**/*.test.*'],
       parser: '@typescript-eslint/parser',
       parserOptions: {
-        project: ['./tsconfig.dev.json'],
+        project: ['./tsconfig.json'],
       },
       plugins: ['@typescript-eslint', 'jest'],
       rules: {

packages/react/package.json

@@ -39,7 +39,7 @@
     "dev": "tsup --watch",
     "dev:build": "tsup",
     "clean": "rimraf dist node_modules",
-    "lint": "tsc --noEmit --project tsconfig.dev.json && eslint src --ext .js,.ts,.tsx",
+    "lint": "tsc --noEmit && eslint src --ext .js,.ts,.tsx",
     "test": "yarn test:unit && yarn test:esm",
     "test:esm": "node --input-type=module --eval 'import \"@aws-amplify/ui-react\"'",
     "test:watch": "yarn test:unit:watch",

packages/react/rollup.config.js

@@ -1,39 +1,46 @@
-// rollup.config.js
 import { defineConfig } from 'rollup';
 import typescript from '@rollup/plugin-typescript';
 import { terser } from 'rollup-plugin-terser';
 import styles from 'rollup-plugin-styles';
 import externals from 'rollup-plugin-node-externals';
 
+// common config settings
+const input = ['src/index.ts', 'src/internal.ts'];
+const sourceMap = false;
+const tsconfig = 'tsconfig.dist.json';
+
 const config = defineConfig([
   // CJS config
   {
-    input: ['src/index.tsx', 'src/internal.tsx'],
+    input,
     output: {
       dir: 'dist',
       format: 'cjs',
-      sourcemap: false,
     },
     plugins: [
       externals({ include: /^@aws-amplify/ }),
-      typescript({ declarationDir: 'dist/types', sourceMap: false }),
+      typescript({ declarationDir: 'dist/types', sourceMap, tsconfig }),
       terser(),
     ],
   },
   // ESM config
   {
-    input: ['src/index.tsx', 'src/internal.tsx'],
+    input,
     output: {
       dir: 'dist/esm',
       format: 'es',
       entryFileNames: '[name].mjs',
       preserveModules: true,
       preserveModulesRoot: 'src',
-      sourcemap: false,
     },
     plugins: [
       externals({ include: /^@aws-amplify/ }),
-      typescript({ outDir: 'dist/esm', declaration: false, sourceMap: false }),
+      typescript({
+        outDir: 'dist/esm',
+        declaration: false,
+        sourceMap,
+        tsconfig,
+      }),
       terser(),
     ],
   },

packages/react/tsconfig.dist.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__mocks__", "**/__tests__"]
+}

packages/react/tsconfig.json

@@ -1,17 +1,10 @@
 {
+  "extends": "../configs/ts/react.json",
   "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "baseUrl": ".",
-    "declaration": true,
-    "esModuleInterop": true,
-    "importHelpers": true,
-    "jsx": "react",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "rootDir": "./src",
+    "noImplicitAny": false,
     "skipLibCheck": true,
-    "target": "es6"
+    "strict": false
   },
-  "exclude": ["node_modules", "src/**/*.test.ts", "src/**/*.test.tsx"],
-  "include": ["src/**/*.ts", "src/**/*.tsx"]
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
 }

packages/ui/.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
     node: true,
   },
   extends: ['eslint:recommended'],
+  ignorePatterns: ['dist'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 2020,