Fix eslint linting for typescript and include .ts and .tsx files in b…

…uild configs

.babelrc

@@ -11,7 +11,9 @@
       {
         "extensions": [
           ".js",
-          ".jsx"
+          ".jsx",
+          ".ts",
+          ".tsx"
         ],
         "root": [
           "./src"

.eslintignore

@@ -2,3 +2,4 @@
 /coverage
 /build
 **/*.test.jsx
+**/*.test.tsx

.eslintrc

@@ -1,11 +1,26 @@
 {
-  "extends": "airbnb",
+  "extends": [
+    "airbnb",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/errors"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "import"
+  ],
   "env": {
     "browser": true,
     "es6": true,
     "jest": true
   },
-  "parser": "@typescript/eslint-parser",
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
   "rules": {
     "arrow-parens": ["error", "as-needed"],
     "func-names": ["error", "never"],
@@ -28,6 +43,7 @@
     "react/jsx-indent": [1, "tab"],
     "react/jsx-indent-props": [1, "tab"],
     "react/jsx-one-expression-per-line": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }],
     "react/require-default-props": 0,
     "react/sort-comp": [1, {
       "order": [
@@ -37,15 +53,24 @@
         "everything-else"
       ]}
     ],
-
     "jsx-a11y/click-events-have-key-events": 0,
     "jsx-a11y/no-static-element-interactions": 1,
     "jsx-a11y/label-has-associated-control": ["error", {
       "required": {
         "some": ["nesting", "id"]
       }
     }],
-    "no-use-before-define": ["error", { "functions": false, "classes": true }]
+    "no-use-before-define": ["error", { "functions": false, "classes": true }],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ]
   },
   "globals": {
     "document": false,

.storybook/main.js

@@ -1,7 +1,7 @@
 const path = require('path');
 
 module.exports = {
-  stories: ['../**/*.story.jsx'],
+  stories: ['../**/*.story.@(jsx|tsx)'],
 
   addons: [
     '@storybook/addon-links',
@@ -35,7 +35,7 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['.jsx', '.js'],
+    extensions: ['.jsx', '.js', '.tsx', '.ts'],
   },
 
   features: {

package.json

@@ -11,8 +11,8 @@
     "test:watch": "cross-env ENV=test jest --watch",
     "clean-test": "cross-env ENV=test jest --no-cache --updateSnapshot --coverage",
     "clear-tests": "jest --clear-cache -- -u",
-    "lint:js": "eslint src/**/*.(jsx|tsx)",
-    "lint:js:fix": "eslint --fix src/**/*.(jsx|tsx)",
+    "lint:js": "eslint src/**/*.{jsx,tsx}",
+    "lint:js:fix": "eslint --fix src/**/*.{jsx,tsx}",
     "lint:css": "stylelint src/components/**/*.scss",
     "lint:css:fix": "stylelint --fix src/components/**/*.scss",
     "deploy": "npm publish"
@@ -91,6 +91,7 @@
     "style-loader": "~4.0.0",
     "stylelint": "~16.3.1",
     "stylelint-config-standard-scss": "~13.1.0",
+    "typescript-eslint": "^7.12.0",
     "webpack": "~5.91.0",
     "webpack-cli": "~5.1.4"
   },

rollup.config.js

@@ -39,8 +39,6 @@ export default [{
 			extensions: ['js', '.jsx', '.tsx', '.ts'],
 		}),
 		terser(),
-		typescript({
-			jsx: 'React'
-		})
+		typescript(),
 	],
 }];

src/components/Table/index.tsx

@@ -2,13 +2,13 @@ import React, { forwardRef, ReactNode } from 'react';
 
 interface TableElementProps {
 	className?: string,
-  children:  ReactNode
+  children: ReactNode
 }
 
 export interface TableProps extends TableElementProps {
 	caption?: string,
 	dataNoteRefs?: string,
-};
+}
 
 interface TableCellProps {
 	className?: string,
@@ -20,7 +20,7 @@ interface TableCellProps {
 	align?: 'left' | 'center' | 'right',
 	indentationLevel?: '1' | '2' | '3'
 	children?: ReactNode | string | number,
-};
+}
 
 export const TableHead = forwardRef<HTMLTableSectionElement, TableElementProps>(({ className, children }, ref) => <thead className={className} ref={ref}>{children}</thead>);
 
@@ -31,45 +31,63 @@ export const TableFooter = forwardRef<HTMLTableSectionElement, TableElementProps
 export const TableRow = forwardRef<HTMLTableRowElement, TableElementProps>(({ className, children }, ref) => <tr className={className} ref={ref}>{children}</tr>);
 
 export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(({ className, children, type, rowSpan, colSpan, scope, headers, align, indentationLevel }, ref) => {
-	const tableCellProps: TableCellProps = {
-    className: `${className ?? ''}${indentationLevel ? ` level${indentationLevel}`: ''}${align ? ` align-${align}` : ''}`,
-    rowSpan,
-    colSpan,
-    scope,
-    headers,
-  };
+	const tableCellClasses: string = `${className ?? ''}${indentationLevel ? ` level${indentationLevel}` : ''}${align ? ` align-${align}` : ''}`;
+
+	if (type === 'th') {
+		return (
+			<th
+				className={tableCellClasses}
+				colSpan={colSpan}
+				rowSpan={rowSpan}
+				scope={scope}
+				headers={headers}
+				ref={ref}
+			>
+				{children}
+			</th>
+		);
+	}
 
-  if (type === 'th') return <th {...tableCellProps} ref={ref}>{children}</th>
-  if (type === 'td') return <td {...tableCellProps} ref={ref}>{children}</td>
+	if (type === 'td') {
+		return (
+			<td
+				className={tableCellClasses}
+				colSpan={colSpan}
+				rowSpan={rowSpan}
+				headers={headers}
+				ref={ref}
+			>
+				{children}
+			</td>
+		);
+	}
+	return undefined;
 });
 
 TableCell.defaultProps = {
-  type: "td"
-}
+	type: 'td',
+};
 
 const Table = forwardRef<HTMLTableElement, TableProps>(({
 	className,
 	caption,
 	dataNoteRefs,
 	children,
-	}, ref) => {
-
-	return (
-		<div className="ssb-table-wrapper">
-			<table className={`ssb-table${className ? ` ${className}` : ''}`} ref={ref}>
-				{caption && (
-					<caption data-noterefs={dataNoteRefs}>
-						<div className="caption-wrapper">
-							<div className="caption-text-wrapper">
-								{caption}
-							</div>
+}, ref) => (
+	<div className="ssb-table-wrapper">
+		<table className={`ssb-table${className ? ` ${className}` : ''}`} ref={ref}>
+			{caption && (
+				<caption data-noterefs={dataNoteRefs}>
+					<div className="caption-wrapper">
+						<div className="caption-text-wrapper">
+							{caption}
 						</div>
-					</caption>
-				)}
-				{children}
-			</table>
-		</div>
-	);
-});
+					</div>
+				</caption>
+			)}
+			{children}
+		</table>
+	</div>
+));
 
 export default Table;