chore: linting fixes (#261)

## **Description**

This pull request implements several important TypeScript and linting
improvements to enhance code quality and developer experience. Key
changes include:

- Added `.tsx` extension to ESLint configuration to ensure proper
linting of React TypeScript components
- Configured TypeScript path alias for `@metamask/design-system-react`
to enable direct imports and proper IDE support
- Enforced `import type` syntax through ESLint to prevent runtime errors
in `.mjs` files
- Updated TypeScript configuration to include the `stories` folder and
its files for design-tokens
- Ran `prettier` to apply consistent formatting across all affected
files

These changes collectively improve code maintainability, type safety,
and development workflow efficiency.

## **Related issues**

Fixes: N/A

## **Manual testing steps**

1. Run `yarn lint` and ensure there are no TypeScript linting errors
2. Run `yarn prettier .` to verify that all files adhere to the
formatting rules

## **Pre-merge author checklist**

- [x] Followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] Completed this PR template
- [x] Verified the linting and formatting updates
- [x] Applied appropriate labels as per [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)

## **Pre-merge reviewer checklist**

- [ ] Manually tested the PR to confirm no regressions
- [ ] Verified all linting and formatting changes
- [ ] Confirmed that the updates improve code maintainability

Author: georgewrmarshall

.eslintrc.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/unambiguous */
 module.exports = {
   root: true,
   extends: ['@metamask/eslint-config', '@metamask/eslint-config-nodejs'],

package.json

@@ -21,10 +21,11 @@
     "create-component:react": "yarn workspace @metamask/design-system-react create-component",
     "create-package": "ts-node scripts/create-package",
     "lint": "yarn lint:eslint && yarn lint:misc --check && yarn constraints && yarn lint:dependencies",
+    "lint:clear-cache": "rimraf .eslintcache",
     "lint:dependencies": "depcheck && yarn dedupe --check",
     "lint:dependencies:fix": "depcheck && yarn dedupe",
-    "lint:eslint": "eslint . --cache --ext js,cjs,mjs,ts",
-    "lint:fix": "yarn lint:eslint --fix && yarn lint:misc --write && yarn constraints --fix && yarn lint:dependencies:fix",
+    "lint:eslint": "eslint . --cache --ext js,cjs,mjs,ts,tsx",
+    "lint:fix": "yarn lint:clear-cache && yarn lint:eslint --fix && yarn lint:misc --write && yarn constraints --fix && yarn lint:dependencies:fix",
     "lint:misc": "prettier '**/*.json' '**/*.md' '!**/CHANGELOG.old.md' '**/*.yml' '!.yarnrc.yml' '!merged-packages/**' --ignore-path .prettierignore",
     "prepack": "./scripts/prepack.sh",
     "prepare-preview-builds": "./scripts/prepare-preview-builds.sh",

packages/design-system-react/.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  env: {
+    browser: true,
+    node: false,
+  },
+  rules: {
+    'no-restricted-globals': 'off',
+  },
+  overrides: [
+    {
+      files: ['**/*.{ts,tsx}'],
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json'],
+      },
+    },
+  ],
+};

packages/design-system-react/scripts/create-component/ComponentName/ComponentName.stories.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+
 import { ComponentName } from './ComponentName';
 import README from './README.mdx';
 

packages/design-system-react/scripts/create-component/ComponentName/ComponentName.test.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
+import React from 'react';
+
 import { ComponentName } from './ComponentName';
-import '@testing-library/jest-dom';
 
 describe('ComponentName Component', () => {
   it('renders children correctly', () => {

packages/design-system-react/scripts/create-component/ComponentName/ComponentName.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+
 import { twMerge } from '../../utils/tw-merge';
-import { ComponentNameProps } from './ComponentName.types';
+import type { ComponentNameProps } from './ComponentName.types';
 
 export const ComponentName: React.FC<ComponentNameProps> = ({
   children,