chore: linting fixes

.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,

packages/design-system-react/src/components/icon/Icon.stories.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
 import type { StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
 import { Icon } from './Icon';
 import { IconName, IconSize, IconColor } from './Icon.types';
 import README from './README.mdx';

packages/design-system-react/src/components/icon/Icon.test.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
+import React from 'react';
+
 import { Icon } from './Icon';
-import { IconName, IconSize, IconColor } from './Icon.types';
 import { ICON_SIZE_CLASS_MAP } from './Icon.constants';
+import { IconName, IconSize, IconColor } from './Icon.types';
+import type { IconProps } from './Icon.types';
 
 describe('Icon', () => {
   it('should render correctly', () => {
@@ -21,7 +23,7 @@ describe('Icon', () => {
           data-testid={`icon-${size}`}
         />,
       );
-      const icon = container.firstChild as HTMLElement;
+      const icon = container.firstChild;
       expect(icon).toHaveClass('inline-block');
       expect(icon).toHaveClass(ICON_SIZE_CLASS_MAP[size]);
     });
@@ -36,7 +38,7 @@ describe('Icon', () => {
           data-testid={`icon-${color}`}
         />,
       );
-      const icon = container.firstChild as HTMLElement;
+      const icon = container.firstChild;
       expect(icon).toHaveClass('inline-block');
       expect(icon).toHaveClass(color);
     });
@@ -46,14 +48,14 @@ describe('Icon', () => {
     const { container } = render(
       <Icon name={IconName.AddSquare} className="custom-class" />,
     );
-    const icon = container.firstChild as HTMLElement;
+    const icon = container.firstChild;
     expect(icon).toHaveClass('inline-block');
     expect(icon).toHaveClass('custom-class');
   });
 
   it('should have correct SVG attributes', () => {
     const { container } = render(<Icon name={IconName.AddSquare} />);
-    const svg = container.firstChild as SVGElement;
+    const svg = container.firstChild;
 
     expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg');
     expect(svg).toHaveAttribute('viewBox', '0 0 512 512');
@@ -65,7 +67,7 @@ describe('Icon', () => {
     const { container } = render(
       <Icon name={IconName.AddSquare} style={customStyle} />,
     );
-    const icon = container.firstChild as HTMLElement;
+    const icon = container.firstChild;
     expect(icon).toHaveStyle(customStyle);
   });
 });
@@ -86,7 +88,9 @@ describe('Icon error cases', () => {
   });
 
   it('should warn and return null when name prop is missing', () => {
-    const { container } = render(<Icon {...({} as any)} />);
+    const { container } = render(
+      <Icon {...({ name: undefined } as unknown as IconProps)} />,
+    );
     expect(consoleSpy).toHaveBeenCalledWith('Icon name is required');
     expect(container.firstChild).toBeNull();
   });

packages/design-system-react/src/components/icon/Icon.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+
 import { twMerge } from '../../utils/tw-merge';
+import { ICON_SIZE_CLASS_MAP } from './Icon.constants';
 import { IconSize, IconColor } from './Icon.types';
 import type { IconProps } from './Icon.types';
-import { ICON_SIZE_CLASS_MAP } from './Icon.constants';
 
 export const Icon: React.FC<IconProps> = ({
   name,

packages/design-system-react/src/components/index.ts

@@ -10,9 +10,6 @@ export {
 } from './text';
 export type { TextProps } from './text';
 
-export { Button } from './button';
-export type { ButtonProps } from './button';
-
 export { Icon } from './icon';
 export { IconName, IconSize, IconColor } from './icon';
 export type { IconProps } from './icon';

packages/design-system-react/src/components/text/Text.stories.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import React from 'react';
+
+import README from './README.mdx';
 import { Text } from './Text';
 import {
   TextVariant,
@@ -11,7 +12,7 @@ import {
   OverflowWrap,
   TextColor,
 } from './Text.types';
-import README from './README.mdx';
+
 const meta: Meta<typeof Text> = {
   title: 'React Components/Text',
   component: Text,
@@ -167,7 +168,13 @@ export const AsChild: Story = {
         <span>Text rendered as span</span>
       </Text>
       <Text asChild className="block">
-        <button type="button" onClick={action('button-clicked')}>
+        <button
+          type="button"
+          onClick={() => {
+            // eslint-disable-next-line no-alert, no-restricted-globals
+            alert('button-clicked');
+          }}
+        >
           Text rendered as button
         </button>
       </Text>

packages/design-system-react/src/components/text/Text.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
 import { Slot } from '@radix-ui/react-slot';
+import React from 'react';
+
 import { twMerge } from '../../utils/tw-merge';
-import { TextVariant, TextProps, TextColor } from './Text.types';
 import { TEXT_CLASS_MAP, TEXT_DEFAULT_TAG_MAP } from './Text.constants';
+import type { TextProps } from './Text.types';
+import { TextVariant, TextColor } from './Text.types';
 
 export const Text: React.FC<TextProps> = ({
   variant = TextVariant.BodyMd,

packages/design-system-react/tsconfig.json

@@ -13,5 +13,5 @@
     "lib": ["ES2020", "DOM"]
   },
   "references": [],
-  "include": ["./src", "./src/**/*.d.ts", "scripts/**/*"]
+  "include": ["./src", "./src/**/*.d.ts", "scripts/**/*", "jest.setup.ts"]
 }

packages/design-tokens/package.json

@@ -50,6 +50,7 @@
   "devDependencies": {
     "@metamask/auto-changelog": "^3.4.4",
     "@metamask/design-system-react": "workspace:^",
+    "@storybook/react": "^8.3.5",
     "@ts-bridge/cli": "^0.5.1",
     "@types/jest": "^27.4.1",
     "@types/node": "^16.18.54",

packages/design-tokens/stories/BrandColors.stories.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
 import { brandColor as brandColorJS } from '../src/js';
+import README from './BrandColors.mdx';
+import { ColorSwatchGroup, ColorSwatch } from './components';
 import {
   getCSSVariablesFromStylesheet,
   getContrastYIQ,
   useJsonColor,
 } from './test-utils';
-import { ColorSwatchGroup, ColorSwatch } from './components';
-import README from './BrandColors.mdx';
 
 const meta: Meta<typeof ColorSwatchGroup> = {
   title: 'Design Tokens/Color/Brand Colors',

packages/design-tokens/stories/Shadows.stories.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
 import { Text, TextColor } from '@metamask/design-system-react';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
 import README from './Shadows.mdx';
 
-interface ShadowSwatchProps {
+type ShadowSwatchProps = {
   children: React.ReactNode;
   className?: string;
-}
+};
 
 const ShadowSwatch: React.FC<ShadowSwatchProps> = ({
   children,

packages/design-tokens/stories/ThemeColors.stories.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
+
 import { lightTheme as lightThemeJS, darkTheme as darkThemeJS } from '../src';
-import brandColor from '../src/figma/brandColors.json';
 import { ColorSwatch, ColorSwatchGroup } from './components';
-import README from './ThemeColors.mdx';
 import {
   getCSSVariablesFromStylesheet,
   getContrastYIQ,
   getJSColors,
   useJsonColor,
 } from './test-utils';
+import README from './ThemeColors.mdx';
 
-export default {
+const meta = {
   title: 'Design Tokens/Color/Theme Colors',
   component: ColorSwatchGroup,
   parameters: {
@@ -20,6 +20,8 @@ export default {
   },
 };
 
+export default meta;
+
 export const FigmaLightTheme = {
   render: () => {
     const { lightTheme } = useJsonColor();

packages/design-tokens/stories/Typography.stories.tsx

@@ -1,26 +1,27 @@
+/* eslint-disable no-restricted-globals */
+
+import { Text } from '@metamask/design-system-react';
+import type { StoryFn, Meta } from '@storybook/react';
 import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { typography } from '../src/js/typography';
 
-import { fontSizes } from '../src/js/typography/fontSizes';
-import { lineHeights } from '../src/js/typography/lineHeights';
+import { typography } from '../src/js/typography';
 import { fontFamilies } from '../src/js/typography/fontFamilies';
+import { fontSizes } from '../src/js/typography/fontSizes';
 import { fontWeights } from '../src/js/typography/fontWeights';
 import { letterSpacing } from '../src/js/typography/letterSpacing';
-
-import { Text } from '@metamask/design-system-react';
-
+import { lineHeights } from '../src/js/typography/lineHeights';
 import README from './Typography.mdx';
 
-export default {
+const meta: Meta<typeof Text> = {
   title: 'Design Tokens/Typography/Typography',
   parameters: {
     docs: {
       page: README,
     },
   },
-} as Meta<typeof Text>;
+};
 
+export default meta;
 export const FontFamily: StoryFn<typeof Text> = (...args) => {
   const styles = {
     displayMD: {