Fix components package tsconfig (#44177)

* Fix tsconfig to include all the TS files for typechecking.

* Create a dedicated file for build

* Fix TS errors in the files which are now type checked

* Exclude stories from build

* Use the explicit inclusion for build

Author: manzoorwanijk

projects/js-packages/components/changelog/fix-components-tsconfig

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+TypeScript: Fix config to include all the TS files for type checking.

projects/js-packages/components/components/jetpack-footer/test/component.tsx

@@ -1,6 +1,6 @@
 import { jest } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 import JetpackFooter from '../index.tsx';
 
 describe( 'JetpackFooter', () => {

projects/js-packages/components/components/pricing-card/test/component.tsx

@@ -4,6 +4,7 @@
 /* eslint-disable testing-library/no-manual-cleanup */
 
 import { jest } from '@jest/globals';
+// @ts-expect-error /pure subpath apparently exists
 import { render, screen, cleanup } from '@testing-library/react/pure';
 import PricingCard from '../index.tsx';
 

projects/js-packages/components/components/radio-control/index.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import styles from './styles.module.scss';
 import type { FC, ReactNode } from 'react';
 
-interface RadioControlProps {
+export interface RadioControlProps {
 	/** The current value. */
 	selected: string;
 

projects/js-packages/components/components/status/index.tsx

@@ -4,7 +4,7 @@ import Text from '../text/index.tsx';
 import styles from './style.module.scss';
 import type { JSX } from 'react';
 
-interface StatusProps {
+export interface StatusProps {
 	status?: 'active' | 'error' | 'inactive' | 'action' | 'initializing';
 	label?: string;
 	className?: string;

projects/js-packages/components/components/testimonials/test/component.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 import Testimonials from '../index.tsx';
 import { Testimonial } from '../testimonial.tsx';
 

projects/js-packages/components/components/toggle-control/index.tsx

@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import styles from './styles.module.scss';
 import type { FC, ReactNode } from 'react';
 
-interface ToggleControlProps {
+export interface ToggleControlProps {
 	/** Whether or not the toggle is currently enabled. */
 	checked?: boolean;
 

projects/js-packages/components/package.json

@@ -90,7 +90,7 @@
 	"scripts": {
 		"build": "pnpm run clean && pnpm run compile-ts",
 		"clean": "rm -rf build/",
-		"compile-ts": "tsc --pretty",
+		"compile-ts": "tsc --pretty --project tsconfig.build.json",
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest",
 		"test-coverage": "pnpm run test --coverage",
 		"typecheck": "tsc --noEmit"

projects/js-packages/components/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+	"extends": "./tsconfig.json",
+	"include": [ "./index.ts", "./tools/jp-redirect/index.ts" ]
+}

projects/js-packages/components/tsconfig.json

@@ -1,8 +1,7 @@
 {
 	"extends": "jetpack-js-tools/tsconfig.tsc.json",
-	"include": [ "./index.ts", "./tools/jp-redirect/index.ts" ],
+	"include": [ "./index.ts", "./components", "./lib", "./tools" ],
 	"compilerOptions": {
-		"typeRoots": [ "./node_modules/@types/" ],
 		"sourceMap": false,
 		"outDir": "./build/",
 		"target": "es2022",