From 031edadf4c117b99a4bcbb16dc04b0fbdfb1d357 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 2 Dec 2024 20:57:14 +1300 Subject: [PATCH 1/6] chore: linting fixes --- .eslintrc.js | 9 ++ package.json | 5 +- .../src/components/button/Button.stories.ts | 22 ---- .../src/components/button/Button.test.tsx | 29 ----- .../src/components/button/Button.tsx | 16 --- .../src/components/button/index.ts | 2 - .../src/components/index.ts | 3 - .../src/components/text/Text.stories.tsx | 15 ++- .../src/components/text/Text.tsx | 6 +- packages/design-tokens/package.json | 1 + .../stories/BrandColors.stories.tsx | 7 +- .../design-tokens/stories/Shadows.stories.tsx | 9 +- .../stories/ThemeColors.stories.tsx | 8 +- .../stories/Typography.stories.tsx | 19 +-- .../ColorSwatch/ColorSwatch.stories.tsx | 1 + .../components/ColorSwatch/ColorSwatch.tsx | 18 +-- .../ColorSwatchGroup.stories.tsx | 1 + .../ColorSwatchGroup/ColorSwatchGroup.tsx | 122 ++++++++++-------- packages/design-tokens/stories/types/mdx.d.ts | 15 +++ packages/design-tokens/tsconfig.json | 13 +- yarn.lock | 1 + 21 files changed, 158 insertions(+), 164 deletions(-) delete mode 100644 packages/design-system-react/src/components/button/Button.stories.ts delete mode 100644 packages/design-system-react/src/components/button/Button.test.tsx delete mode 100644 packages/design-system-react/src/components/button/Button.tsx delete mode 100644 packages/design-system-react/src/components/button/index.ts create mode 100644 packages/design-tokens/stories/types/mdx.d.ts diff --git a/.eslintrc.js b/.eslintrc.js index d5ab2140..9ec62499 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -36,6 +36,15 @@ module.exports = { rules: { '@typescript-eslint/no-explicit-any': 'error', '@typescript-eslint/no-shadow': ['error', { allow: ['Text'] }], + '@typescript-eslint/consistent-type-imports': [ + 'error', + { + prefer: 'type-imports', + disallowTypeAnnotations: true, + fixStyle: 'separate-type-imports', + }, + ], + '@typescript-eslint/no-import-type-side-effects': 'error', }, }, { diff --git a/package.json b/package.json index afeea008..af0ff167 100644 --- a/package.json +++ b/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", diff --git a/packages/design-system-react/src/components/button/Button.stories.ts b/packages/design-system-react/src/components/button/Button.stories.ts deleted file mode 100644 index 1f116be4..00000000 --- a/packages/design-system-react/src/components/button/Button.stories.ts +++ /dev/null @@ -1,22 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; - -import { Button } from './Button'; - -// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export -const meta: Meta = { - title: 'React Components/Button', - component: Button, - tags: ['autodocs'], - args: { onClick: fn() }, -}; - -export default meta; -type Story = StoryObj; - -// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -export const Default: Story = { - args: { - children: 'Button', - }, -}; diff --git a/packages/design-system-react/src/components/button/Button.test.tsx b/packages/design-system-react/src/components/button/Button.test.tsx deleted file mode 100644 index 7cca64f5..00000000 --- a/packages/design-system-react/src/components/button/Button.test.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; -import { Button } from './Button'; - -describe('Button Component', () => { - it('renders children correctly', () => { - render(); - expect(screen.getByText('Click Me')).toBeInTheDocument(); - }); - - it('applies the correct classes', () => { - const { container } = render(); - expect(container.firstChild).toHaveClass( - 'px-4 h-8 rounded-full bg-primary-default text-primary-inverse', - ); - }); - - it('handles click events', () => { - const handleClick = jest.fn(); - render(); - fireEvent.click(screen.getByText('Click')); - expect(handleClick).toHaveBeenCalledTimes(1); - }); - - it('passes additional props to the button element', () => { - render(); - expect(screen.getByLabelText('custom-button')).toBeInTheDocument(); - }); -}); diff --git a/packages/design-system-react/src/components/button/Button.tsx b/packages/design-system-react/src/components/button/Button.tsx deleted file mode 100644 index 3fe78771..00000000 --- a/packages/design-system-react/src/components/button/Button.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -export interface ButtonProps - extends React.ButtonHTMLAttributes { - /** Button contents */ - children: React.ReactNode; -} - -export const Button = ({ children, ...props }: ButtonProps) => ( - -); diff --git a/packages/design-system-react/src/components/button/index.ts b/packages/design-system-react/src/components/button/index.ts deleted file mode 100644 index fa3c8a51..00000000 --- a/packages/design-system-react/src/components/button/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Button } from './Button'; -export type { ButtonProps } from './Button'; diff --git a/packages/design-system-react/src/components/index.ts b/packages/design-system-react/src/components/index.ts index cf85173b..ffeb08ee 100644 --- a/packages/design-system-react/src/components/index.ts +++ b/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'; diff --git a/packages/design-system-react/src/components/text/Text.stories.tsx b/packages/design-system-react/src/components/text/Text.stories.tsx index d228a32d..9c14e324 100644 --- a/packages/design-system-react/src/components/text/Text.stories.tsx +++ b/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 = { title: 'React Components/Text', component: Text, @@ -167,7 +168,13 @@ export const AsChild: Story = { Text rendered as span - diff --git a/packages/design-system-react/src/components/text/Text.tsx b/packages/design-system-react/src/components/text/Text.tsx index e276b709..c1a15526 100644 --- a/packages/design-system-react/src/components/text/Text.tsx +++ b/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 = ({ variant = TextVariant.BodyMd, diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index f5405a5a..045d5fac 100644 --- a/packages/design-tokens/package.json +++ b/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", diff --git a/packages/design-tokens/stories/BrandColors.stories.tsx b/packages/design-tokens/stories/BrandColors.stories.tsx index f52d3b34..9927d8d2 100644 --- a/packages/design-tokens/stories/BrandColors.stories.tsx +++ b/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 = { title: 'Design Tokens/Color/Brand Colors', diff --git a/packages/design-tokens/stories/Shadows.stories.tsx b/packages/design-tokens/stories/Shadows.stories.tsx index 74000970..6efb5acd 100644 --- a/packages/design-tokens/stories/Shadows.stories.tsx +++ b/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 = ({ children, diff --git a/packages/design-tokens/stories/ThemeColors.stories.tsx b/packages/design-tokens/stories/ThemeColors.stories.tsx index 77b4960c..93e204e9 100644 --- a/packages/design-tokens/stories/ThemeColors.stories.tsx +++ b/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(); diff --git a/packages/design-tokens/stories/Typography.stories.tsx b/packages/design-tokens/stories/Typography.stories.tsx index 2ca73fff..ccb8aeb2 100644 --- a/packages/design-tokens/stories/Typography.stories.tsx +++ b/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 = { title: 'Design Tokens/Typography/Typography', parameters: { docs: { page: README, }, }, -} as Meta; +}; +export default meta; export const FontFamily: StoryFn = (...args) => { const styles = { displayMD: { diff --git a/packages/design-tokens/stories/components/ColorSwatch/ColorSwatch.stories.tsx b/packages/design-tokens/stories/components/ColorSwatch/ColorSwatch.stories.tsx index 6d6217f8..442cb2b2 100644 --- a/packages/design-tokens/stories/components/ColorSwatch/ColorSwatch.stories.tsx +++ b/packages/design-tokens/stories/components/ColorSwatch/ColorSwatch.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; + import { ColorSwatch } from './ColorSwatch'; const meta: Meta = { diff --git a/packages/design-tokens/stories/components/ColorSwatch/ColorSwatch.tsx b/packages/design-tokens/stories/components/ColorSwatch/ColorSwatch.tsx index 2b950b4f..0f68e49b 100644 --- a/packages/design-tokens/stories/components/ColorSwatch/ColorSwatch.tsx +++ b/packages/design-tokens/stories/components/ColorSwatch/ColorSwatch.tsx @@ -1,8 +1,10 @@ -import React, { FunctionComponent } from 'react'; -import { lightTheme } from '../../../src'; import { Text, TextVariant } from '@metamask/design-system-react'; +import type { FunctionComponent } from 'react'; +import React from 'react'; + +import { lightTheme } from '../../../src'; -interface ColorSwatchProps { +type ColorSwatchProps = { /** * The color of the swatch */ @@ -27,7 +29,7 @@ interface ColorSwatchProps { * The name of the color */ name?: string; -} +}; export const ColorSwatch: FunctionComponent = ({ color, @@ -42,8 +44,8 @@ export const ColorSwatch: FunctionComponent = ({
@@ -56,9 +58,9 @@ export const ColorSwatch: FunctionComponent = ({ }} > - {`${name}`} + {name ?? ''} - {`${color}`} + {color ?? ''}
); diff --git a/packages/design-tokens/stories/components/ColorSwatchGroup/ColorSwatchGroup.stories.tsx b/packages/design-tokens/stories/components/ColorSwatchGroup/ColorSwatchGroup.stories.tsx index cab16267..e4e411f6 100644 --- a/packages/design-tokens/stories/components/ColorSwatchGroup/ColorSwatchGroup.stories.tsx +++ b/packages/design-tokens/stories/components/ColorSwatchGroup/ColorSwatchGroup.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; + import { ColorSwatchGroup } from './ColorSwatchGroup'; const meta: Meta = { diff --git a/packages/design-tokens/stories/components/ColorSwatchGroup/ColorSwatchGroup.tsx b/packages/design-tokens/stories/components/ColorSwatchGroup/ColorSwatchGroup.tsx index 85161593..9bfbd701 100644 --- a/packages/design-tokens/stories/components/ColorSwatchGroup/ColorSwatchGroup.tsx +++ b/packages/design-tokens/stories/components/ColorSwatchGroup/ColorSwatchGroup.tsx @@ -1,10 +1,11 @@ +import { Text, TextVariant } from '@metamask/design-system-react'; import React from 'react'; -import { Theme } from '../../test-utils/useJsonColor'; + import { getContrastYIQ } from '../../test-utils/getContrastYIQ'; -import { ColorSwatch } from '..'; -import { Text, TextVariant } from '@metamask/design-system-react'; +import type { Theme } from '../../test-utils/useJsonColor'; +import { ColorSwatch } from '../ColorSwatch'; -interface ColorSwatchGroupProps { +type ColorSwatchGroupProps = { /** * The color object */ @@ -13,19 +14,25 @@ interface ColorSwatchGroupProps { * The color of text background that contains the name of the color defaults to background.default */ textBackgroundColor?: string; - /** Hex code value of the theme (light or dark mode) this is used to help determine the text color of each swatch when opacity is involved + /** + * Hex code value of the theme (light or dark mode) this is used to help determine the text color of each swatch when opacity is involved * Default is light theme #ffffff */ theme?: string | undefined; -} +}; -function toCamelCase(str: string) { +/** + * Converts a string to camelCase format, handling special cases for numeric suffixes + * @param str - Input string to be converted to camelCase + * @returns The string in camelCase format, preserving numeric suffixes + */ +function toCamelCase(str: string): string { // Check if the string contains a dash followed by a number, if so, skip modification - if (/\-\d+%$/.test(str)) { + if (/-\d+%$/u.test(str)) { return str; } - return str.replace(/-([a-z])/gi, function (g) { - return (g[1] ?? '').toUpperCase(); + return str.replace(/-([a-z])/gu, (_, g) => { + return g.toUpperCase(); }); } @@ -40,17 +47,22 @@ export const ColorSwatchGroup: React.FC = ({ // Function to extract numbers and sort them numerically const sortShadesNumerically = (a: string, b: string) => { - const numberPattern = /\d+/; // Matches digits in the shade identifier - const numberA = parseInt(a.match(numberPattern)?.[0] || '0', 10); - const numberB = parseInt(b.match(numberPattern)?.[0] || '0', 10); + const numberPattern = /\d+/u; // Matches digits in the shade identifier + const numberA = parseInt(a.match(numberPattern)?.[0] ?? '0', 10); + const numberB = parseInt(b.match(numberPattern)?.[0] ?? '0', 10); return numberA - numberB; }; const renderSwatches = () => { return Object.entries(swatchData).map(([category, colors]) => { - if (colors.value) { + type ColorDetail = { + value: string; + description?: string; + }; + + if ('value' in colors) { // For single color entries like white and black - const { value, description } = colors as any; // TypeScript workaround + const { value, description } = colors as ColorDetail; return (
= ({
); - } else { - // For grouped color entries with shades - const colorKeys = Object.keys(colors) - .filter((key) => !/\-\d+%$/.test(key)) - .map((key) => ({ - originalKey: key, - camelCaseKey: toCamelCase(key), - })); + } - const sortedColorKeys = colorKeys.sort((a, b) => - sortShadesNumerically(a.camelCaseKey, b.camelCaseKey), - ); + // For grouped color entries with shades + const colorKeys = Object.keys(colors) + .filter((key) => !/-\d+%$/u.test(key)) + .map((key) => ({ + originalKey: key, + camelCaseKey: toCamelCase(key), + })); - return ( -
- - {category} - -
- {sortedColorKeys.map(({ originalKey, camelCaseKey }) => { - const colorDetails = colors[originalKey]; - const { value = '', description } = colorDetails || {}; - return ( -
- - {description && {description}} -
- ); - })} -
+ const sortedColorKeys = colorKeys.sort((a, b) => + sortShadesNumerically(a.camelCaseKey, b.camelCaseKey), + ); + + return ( +
+ + {category} + +
+ {sortedColorKeys.map(({ originalKey, camelCaseKey }) => { + const colorDetails = colors[originalKey]; + const { value = '', description } = colorDetails || {}; + return ( +
+ + {description && {description}} +
+ ); + })}
- ); - } +
+ ); }); }; diff --git a/packages/design-tokens/stories/types/mdx.d.ts b/packages/design-tokens/stories/types/mdx.d.ts new file mode 100644 index 00000000..8c3d1679 --- /dev/null +++ b/packages/design-tokens/stories/types/mdx.d.ts @@ -0,0 +1,15 @@ +/** + * @file This file is used to define the types for the MDX files in the stories directory. + */ +declare module '*.mdx' { + import type { ComponentType, ReactNode } from 'react'; + + type MdxModule = { + readonly default: ComponentType; + readonly meta?: Record; + readonly toc?: { url: string; content: ReactNode }[]; + }; + + const content: MdxModule; + export default content; +} diff --git a/packages/design-tokens/tsconfig.json b/packages/design-tokens/tsconfig.json index af167d92..5dcb8fbe 100644 --- a/packages/design-tokens/tsconfig.json +++ b/packages/design-tokens/tsconfig.json @@ -3,8 +3,17 @@ "compilerOptions": { "resolveJsonModule": true, "esModuleInterop": true, - "types": ["node", "jest"] + "jsx": "react", + "types": ["react", "node", "jest"], + "paths": { + "@metamask/design-system-react": ["../design-system-react/src"] + } }, - "include": ["src/**/*.ts", "src/**/*.json"], + "include": [ + "src/**/*.ts", + "src/**/*.json", + "stories/**/*.tsx", + "stories/**/*.ts" + ], "references": [] } diff --git a/yarn.lock b/yarn.lock index 66c8bf59..00478957 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3281,6 +3281,7 @@ __metadata: dependencies: "@metamask/auto-changelog": "npm:^3.4.4" "@metamask/design-system-react": "workspace:^" + "@storybook/react": "npm:^8.3.5" "@ts-bridge/cli": "npm:^0.5.1" "@types/jest": "npm:^27.4.1" "@types/node": "npm:^16.18.54" From 6da1a97eb6268d4cc54133038987da2be202c9ad Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 3 Dec 2024 09:52:45 +1300 Subject: [PATCH 2/6] chore: reverting lint rule that already exists --- .eslintrc.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 9ec62499..2fc88e05 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -36,14 +36,6 @@ module.exports = { rules: { '@typescript-eslint/no-explicit-any': 'error', '@typescript-eslint/no-shadow': ['error', { allow: ['Text'] }], - '@typescript-eslint/consistent-type-imports': [ - 'error', - { - prefer: 'type-imports', - disallowTypeAnnotations: true, - fixStyle: 'separate-type-imports', - }, - ], '@typescript-eslint/no-import-type-side-effects': 'error', }, }, From b4dd256cc00842339450b4024f4a2340c25693df Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 3 Dec 2024 09:54:53 +1300 Subject: [PATCH 3/6] chore: adding eslint disable for better readability to eslintrc file --- .eslintrc.js | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintrc.js b/.eslintrc.js index 2fc88e05..3b32d8f9 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,3 +1,4 @@ +/* eslint-disable import/unambiguous */ module.exports = { root: true, extends: ['@metamask/eslint-config', '@metamask/eslint-config-nodejs'], From ba39d3fd516cea53ce90b8ede761d4f1acabea9e Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 3 Dec 2024 13:47:21 +1300 Subject: [PATCH 4/6] chore: update to eslintrc file --- .eslintrc.js | 1 - 1 file changed, 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 3b32d8f9..80a5a987 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -37,7 +37,6 @@ module.exports = { rules: { '@typescript-eslint/no-explicit-any': 'error', '@typescript-eslint/no-shadow': ['error', { allow: ['Text'] }], - '@typescript-eslint/no-import-type-side-effects': 'error', }, }, { From 4fb1b7ef8c62ffea0eec3fc92e80b71ab8c40d7b Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 3 Dec 2024 14:18:08 +1300 Subject: [PATCH 5/6] chore: linting updates after icon merge --- packages/design-system-react/.eslintrc.js | 19 ++++++++++++++++++ .../src/components/icon/Icon.stories.tsx | 3 ++- .../src/components/icon/Icon.test.tsx | 20 +++++++++++-------- .../src/components/icon/Icon.tsx | 3 ++- packages/design-system-react/tsconfig.json | 2 +- 5 files changed, 36 insertions(+), 11 deletions(-) create mode 100644 packages/design-system-react/.eslintrc.js diff --git a/packages/design-system-react/.eslintrc.js b/packages/design-system-react/.eslintrc.js new file mode 100644 index 00000000..cc4a3868 --- /dev/null +++ b/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'], + }, + }, + ], +}; diff --git a/packages/design-system-react/src/components/icon/Icon.stories.tsx b/packages/design-system-react/src/components/icon/Icon.stories.tsx index e034d656..483176c7 100644 --- a/packages/design-system-react/src/components/icon/Icon.stories.tsx +++ b/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'; diff --git a/packages/design-system-react/src/components/icon/Icon.test.tsx b/packages/design-system-react/src/components/icon/Icon.test.tsx index ed852420..c627dcec 100644 --- a/packages/design-system-react/src/components/icon/Icon.test.tsx +++ b/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( , ); - 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(); - 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( , ); - 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(); + const { container } = render( + , + ); expect(consoleSpy).toHaveBeenCalledWith('Icon name is required'); expect(container.firstChild).toBeNull(); }); diff --git a/packages/design-system-react/src/components/icon/Icon.tsx b/packages/design-system-react/src/components/icon/Icon.tsx index 3aaef621..c73f08c7 100644 --- a/packages/design-system-react/src/components/icon/Icon.tsx +++ b/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 = ({ name, diff --git a/packages/design-system-react/tsconfig.json b/packages/design-system-react/tsconfig.json index c38463b4..742ba485 100644 --- a/packages/design-system-react/tsconfig.json +++ b/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"] } From 425d17f39f38aac736ab57ebd96af51cb4a908d7 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 3 Dec 2024 14:34:14 +1300 Subject: [PATCH 6/6] chore: component template fix --- .../create-component/ComponentName/ComponentName.stories.tsx | 2 +- .../create-component/ComponentName/ComponentName.test.tsx | 4 ++-- .../scripts/create-component/ComponentName/ComponentName.tsx | 3 ++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/design-system-react/scripts/create-component/ComponentName/ComponentName.stories.tsx b/packages/design-system-react/scripts/create-component/ComponentName/ComponentName.stories.tsx index 39fd8f9f..2a1e78b1 100644 --- a/packages/design-system-react/scripts/create-component/ComponentName/ComponentName.stories.tsx +++ b/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'; diff --git a/packages/design-system-react/scripts/create-component/ComponentName/ComponentName.test.tsx b/packages/design-system-react/scripts/create-component/ComponentName/ComponentName.test.tsx index 0ed3f649..aa5e30b3 100644 --- a/packages/design-system-react/scripts/create-component/ComponentName/ComponentName.test.tsx +++ b/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', () => { diff --git a/packages/design-system-react/scripts/create-component/ComponentName/ComponentName.tsx b/packages/design-system-react/scripts/create-component/ComponentName/ComponentName.tsx index f7391727..d5f22ef2 100644 --- a/packages/design-system-react/scripts/create-component/ComponentName/ComponentName.tsx +++ b/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 = ({ children,