Skip to content

Commit 5534010

Browse files
Mohamed-HashemMohamed-Hashem
committed
Fix TypeScript errors and add missing dependencies
- Fixed JSX namespace errors in Icon components (React 19 compatibility) - Added @types/prop-types dependency - Added React Compiler dependencies to eslint-local-rules - Fixed all Icon components to use React.JSX.IntrinsicElements - Added proper TypeScript types to all Icon component props
1 parent eef8e30 commit 5534010

19 files changed

+160
-135
lines changed

‎eslint-local-rules/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@
66
"scripts": {
77
"test": "node __tests__/lint-markdown-code-blocks.test.js"
88
},
9+
"dependencies": {
10+
"@babel/core": "^7.12.9",
11+
"@babel/parser": "^7.12.9",
12+
"babel-plugin-react-compiler": "^1.0.0",
13+
"eslint": "^7.0.0"
14+
},
915
"devDependencies": {
1016
"eslint-mdx": "^2"
1117
}

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"@types/mdx-js__react": "^1.5.2",
5858
"@types/node": "22.10.7",
5959
"@types/parse-numeric-range": "^0.0.1",
60+
"@types/prop-types": "^15.7.15",
6061
"@types/react": "19.2.2",
6162
"@types/react-dom": "^19.2.2",
6263
"@typescript-eslint/eslint-plugin": "^5.36.2",

‎src/components/Icon/IconCanary.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
* Copyright (c) Facebook, Inc. and its affiliates.
1010
*/
1111

12-
import {memo} from 'react';
12+
import React, {memo} from 'react';
1313

1414
export const IconCanary = memo<
15-
JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
15+
React.JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
1616
>(function IconCanary(
1717
{className, title, size} = {
1818
className: undefined,

‎src/components/Icon/IconChevron.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,25 @@
99
* Copyright (c) Facebook, Inc. and its affiliates.
1010
*/
1111

12-
import {memo} from 'react';
12+
import React, {memo} from 'react';
1313
import cn from 'classnames';
1414

1515
export const IconChevron = memo<
16-
JSX.IntrinsicElements['svg'] & {
16+
React.JSX.IntrinsicElements['svg'] & {
1717
/**
1818
* The direction the arrow should point.
1919
* `start` and `end` are relative to the current locale.
2020
* for example, in LTR, `start` is left and `end` is right.
2121
*/
2222
displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
2323
}
24-
>(function IconChevron({className, displayDirection}) {
24+
>(function IconChevron({
25+
className,
26+
displayDirection,
27+
}: {
28+
className?: string;
29+
displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
30+
}) {
2531
const classes = cn(
2632
{
2733
'rotate-0': displayDirection === 'down',

‎src/components/Icon/IconCodeBlock.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
* Copyright (c) Facebook, Inc. and its affiliates.
1010
*/
1111

12-
import {memo} from 'react';
12+
import React, {memo} from 'react';
1313

14-
export const IconCodeBlock = memo<JSX.IntrinsicElements['svg']>(
15-
function IconCodeBlock({className}) {
14+
export const IconCodeBlock = memo<React.JSX.IntrinsicElements['svg']>(
15+
function IconCodeBlock({className}: {className?: string}) {
1616
return (
1717
<svg
1818
className={className}

‎src/components/Icon/IconCopy.tsx‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,31 @@
99
* Copyright (c) Facebook, Inc. and its affiliates.
1010
*/
1111

12-
import {memo} from 'react';
12+
import React, {memo} from 'react';
1313

14-
export const IconCopy = memo<JSX.IntrinsicElements['svg']>(function IconCopy({
15-
className,
16-
}) {
17-
return (
18-
<svg
19-
className={className}
20-
width="1em"
21-
height="1em"
22-
viewBox="0 0 18 18"
23-
fill="none"
24-
xmlns="http://www.w3.org/2000/svg">
25-
<path
26-
fillRule="evenodd"
27-
clipRule="evenodd"
28-
d="M5.40382 15.3671C5.03332 15.1901 4.70081 14.9381 4.42481 14.6286C4.34831 14.5431 4.23931 14.5001 4.12981 14.5206L3.66181 14.6081C3.33531 14.6691 3.02032 14.4361 2.96232 14.0876L1.30981 4.12512C1.28181 3.95662 1.31731 3.7861 1.40981 3.6456C1.50231 3.5051 1.64082 3.41162 1.79932 3.38162L3.22131 3.00012C3.37681 2.97062 3.48981 2.82761 3.48981 2.65961V1.9101C3.48981 1.8276 3.49381 1.74561 3.49931 1.66461C3.50931 1.53461 3.35181 1.57211 3.35181 1.57211L1.64381 2.0076C1.18481 2.0936 0.751316 2.32662 0.451316 2.70612C0.0808162 3.17362 -0.0686885 3.77259 0.0293115 4.36459L1.68231 14.3281C1.84531 15.3081 2.65031 16.0001 3.55631 16.0001C3.66531 16.0001 3.77631 15.9896 3.88731 15.9691L5.36632 15.6916C5.52332 15.6626 5.54982 15.4366 5.40382 15.3671ZM14.9331 4.55801H12.9116C12.1351 4.55801 11.5001 3.91502 11.5001 3.12952V1.06802C11.5001 0.480524 11.0196 0 10.4321 0H7.44161C6.36911 0 5.50011 0.879508 5.50011 1.96451V12.1665C5.50011 13.179 6.33412 14 7.36262 14H14.1371C15.1661 14 16.0001 13.179 16.0001 12.1665V5.625C16.0001 5.038 15.5201 4.55801 14.9331 4.55801Z"
29-
fill="currentColor"
30-
/>{' '}
31-
<path
32-
fillRule="evenodd"
33-
clipRule="evenodd"
34-
d="M12.5888 0.0914385C12.4493 0.00843847 12.5158 0.252449 12.5158 0.252449C12.5653 0.428449 12.5918 0.613451 12.5918 0.804451V2.90296C12.5918 3.17646 12.8158 3.40046 13.0903 3.40046H15.1718C15.3883 3.40046 15.5968 3.43495 15.7918 3.49845C15.7918 3.49845 15.9373 3.50844 15.9008 3.43494C15.8383 3.33744 15.7673 3.24494 15.6833 3.16044L12.8303 0.289467C12.7558 0.214467 12.6743 0.149438 12.5888 0.0914385Z"
35-
fill="currentColor"
36-
/>
37-
</svg>
38-
);
39-
});
14+
export const IconCopy = memo<React.JSX.IntrinsicElements['svg']>(
15+
function IconCopy({className}: {className?: string}) {
16+
return (
17+
<svg
18+
className={className}
19+
width="1em"
20+
height="1em"
21+
viewBox="0 0 18 18"
22+
fill="none"
23+
xmlns="http://www.w3.org/2000/svg">
24+
<path
25+
fillRule="evenodd"
26+
clipRule="evenodd"
27+
d="M5.40382 15.3671C5.03332 15.1901 4.70081 14.9381 4.42481 14.6286C4.34831 14.5431 4.23931 14.5001 4.12981 14.5206L3.66181 14.6081C3.33531 14.6691 3.02032 14.4361 2.96232 14.0876L1.30981 4.12512C1.28181 3.95662 1.31731 3.7861 1.40981 3.6456C1.50231 3.5051 1.64082 3.41162 1.79932 3.38162L3.22131 3.00012C3.37681 2.97062 3.48981 2.82761 3.48981 2.65961V1.9101C3.48981 1.8276 3.49381 1.74561 3.49931 1.66461C3.50931 1.53461 3.35181 1.57211 3.35181 1.57211L1.64381 2.0076C1.18481 2.0936 0.751316 2.32662 0.451316 2.70612C0.0808162 3.17362 -0.0686885 3.77259 0.0293115 4.36459L1.68231 14.3281C1.84531 15.3081 2.65031 16.0001 3.55631 16.0001C3.66531 16.0001 3.77631 15.9896 3.88731 15.9691L5.36632 15.6916C5.52332 15.6626 5.54982 15.4366 5.40382 15.3671ZM14.9331 4.55801H12.9116C12.1351 4.55801 11.5001 3.91502 11.5001 3.12952V1.06802C11.5001 0.480524 11.0196 0 10.4321 0H7.44161C6.36911 0 5.50011 0.879508 5.50011 1.96451V12.1665C5.50011 13.179 6.33412 14 7.36262 14H14.1371C15.1661 14 16.0001 13.179 16.0001 12.1665V5.625C16.0001 5.038 15.5201 4.55801 14.9331 4.55801Z"
28+
fill="currentColor"
29+
/>{' '}
30+
<path
31+
fillRule="evenodd"
32+
clipRule="evenodd"
33+
d="M12.5888 0.0914385C12.4493 0.00843847 12.5158 0.252449 12.5158 0.252449C12.5653 0.428449 12.5918 0.613451 12.5918 0.804451V2.90296C12.5918 3.17646 12.8158 3.40046 13.0903 3.40046H15.1718C15.3883 3.40046 15.5968 3.43495 15.7918 3.49845C15.7918 3.49845 15.9373 3.50844 15.9008 3.43494C15.8383 3.33744 15.7673 3.24494 15.6833 3.16044L12.8303 0.289467C12.7558 0.214467 12.6743 0.149438 12.5888 0.0914385Z"
34+
fill="currentColor"
35+
/>
36+
</svg>
37+
);
38+
}
39+
);

‎src/components/Icon/IconDeepDive.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
* Copyright (c) Facebook, Inc. and its affiliates.
1010
*/
1111

12-
import {memo} from 'react';
12+
import React, {memo} from 'react';
1313

14-
export const IconDeepDive = memo<JSX.IntrinsicElements['svg']>(
15-
function IconDeepDive({className}) {
14+
export const IconDeepDive = memo<React.JSX.IntrinsicElements['svg']>(
15+
function IconDeepDive({className}: {className?: string}) {
1616
return (
1717
<svg
1818
className={className}

‎src/components/Icon/IconDownload.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
* Copyright (c) Facebook, Inc. and its affiliates.
1010
*/
1111

12-
import {memo} from 'react';
12+
import React, {memo} from 'react';
1313

14-
export const IconDownload = memo<JSX.IntrinsicElements['svg']>(
15-
function IconDownload({className}) {
14+
export const IconDownload = memo<React.JSX.IntrinsicElements['svg']>(
15+
function IconDownload({className}: {className?: string}) {
1616
return (
1717
<svg
1818
width="1em"

‎src/components/Icon/IconError.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,21 @@
99
* Copyright (c) Facebook, Inc. and its affiliates.
1010
*/
1111

12-
import {memo} from 'react';
12+
import React, {memo} from 'react';
1313

14-
export const IconError = memo<JSX.IntrinsicElements['svg']>(function IconError({
15-
className,
16-
}) {
17-
return (
18-
<svg
19-
className={className}
20-
width="1.33em"
21-
height="1.33em"
22-
viewBox="0 0 24 24"
23-
xmlns="http://www.w3.org/2000/svg">
24-
<circle cx="10.1626" cy="9.99951" r="9.47021" fill="currentColor" />
25-
<path d="M6.22705 5.95996L14.2798 14.0127" stroke="white" />
26-
<path d="M14.2798 5.95996L6.22705 14.0127" stroke="white" />
27-
</svg>
28-
);
29-
});
14+
export const IconError = memo<React.JSX.IntrinsicElements['svg']>(
15+
function IconError({className}: {className?: string}) {
16+
return (
17+
<svg
18+
className={className}
19+
width="1.33em"
20+
height="1.33em"
21+
viewBox="0 0 24 24"
22+
xmlns="http://www.w3.org/2000/svg">
23+
<circle cx="10.1626" cy="9.99951" r="9.47021" fill="currentColor" />
24+
<path d="M6.22705 5.95996L14.2798 14.0127" stroke="white" />
25+
<path d="M14.2798 5.95996L6.22705 14.0127" stroke="white" />
26+
</svg>
27+
);
28+
}
29+
);

‎src/components/Icon/IconExperimental.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
* Copyright (c) Facebook, Inc. and its affiliates.
1010
*/
1111

12-
import {memo} from 'react';
12+
import React, {memo} from 'react';
1313

1414
export const IconExperimental = memo<
15-
JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
15+
React.JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
1616
>(function IconExperimental(
1717
{className, title, size} = {
1818
className: undefined,

0 commit comments

Comments
 (0)