Skip to content

Commit f97aefd

Browse files
wahidrahimwahidrahim
authored
fix: remove references to FC (#37)
* refactor: update Badge component * refactor: update Box component * refactor: update Button component * refactor: update Chips component * refactor: update Collapsable component * refactor: update DatePicker component * refactor: update Drawer component * refactor: update DropZone component * refactor: update Flex component * refactor: update Grid component * refactor: update Heading component * refactor: update InfoBox component * refactor: update Notification component * refactor: update Page component * refactor: update ProgressBar component * refactor: update Radio component * refactor: update Select component * refactor: update TabBar component * refactor: update Table component * refactor: update TableBatchActions component * refactor: update TableCheckbox component * refactor: update TableEditableCell component * refactor: update TablePagination component * refactor: update Text component * refactor: update PolyThemeProvider component * fix: set children as any in Tooltip component * refactor: update ProfilePicture and SelectCard component
1 parent 2319928 commit f97aefd

29 files changed

Lines changed: 259 additions & 242 deletions

File tree

‎src/components/Badge/Badge.tsx‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC, ComponentType } from 'react';
1+
import { ComponentType, PropsWithChildren } from 'react';
22
import styled from 'styled-components';
33
import { Box } from '../Box';
44

@@ -12,14 +12,14 @@ enum IconPosition {
1212
Right = 'right',
1313
}
1414

15-
export type BadgeProps = {
15+
export type BadgeProps = PropsWithChildren<{
1616
variant: BadgeVariant;
1717
margin?: string;
1818
display?: Display;
1919
icon?: ComponentType;
2020
iconPosition?: 'left' | 'right';
2121
size?: 's' | 'l';
22-
};
22+
}>;
2323

2424
const sizeMap: Record<string, CSSPropertiesExtended> = {
2525
l: {
@@ -68,26 +68,30 @@ const renderIconContainer = (icon: ComponentType, variant: BadgeVariant) => (
6868
</IconContainer>
6969
);
7070

71-
export const Badge: FC<BadgeProps> = ({
72-
display = 'inline-block',
73-
size = 'l',
74-
variant = 'default',
75-
icon,
76-
iconPosition,
77-
children,
78-
...props
79-
}) => (
80-
<Component variant={variant} display={display} size={size} {...props}>
81-
{icon && (!iconPosition || iconPosition === IconPosition.Left) && (
82-
<Box display="inline-block" variant="raw" margin="0 8px 0 0">
83-
{renderIconContainer(icon, variant)}
84-
</Box>
85-
)}
86-
{children}
87-
{icon && iconPosition === IconPosition.Right && (
88-
<Box display="inline-block" variant="raw" margin="0 0 0 8px">
89-
{renderIconContainer(icon, variant)}
90-
</Box>
91-
)}
92-
</Component>
93-
);
71+
export function Badge(badgeProps: BadgeProps) {
72+
const {
73+
display = 'inline-block',
74+
size = 'l',
75+
variant = 'default',
76+
icon,
77+
iconPosition,
78+
children,
79+
...props
80+
} = badgeProps;
81+
82+
return (
83+
<Component variant={variant} display={display} size={size} {...props}>
84+
{icon && (!iconPosition || iconPosition === IconPosition.Left) && (
85+
<Box display="inline-block" variant="raw" margin="0 8px 0 0">
86+
{renderIconContainer(icon, variant)}
87+
</Box>
88+
)}
89+
{children}
90+
{icon && iconPosition === IconPosition.Right && (
91+
<Box display="inline-block" variant="raw" margin="0 0 0 8px">
92+
{renderIconContainer(icon, variant)}
93+
</Box>
94+
)}
95+
</Component>
96+
);
97+
}

‎src/components/Box/Box.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { FC } from 'react';
1+
import { PropsWithChildren } from 'react';
22
import styled from 'styled-components';
33

44
import { Display, Shadow, Radius } from '../../theme/types';
55
import { getMargin, getBorder } from '../../theme/utils';
66

77
export type BoxVariant = 'raw' | 'basic' | 'border' | 'shadow';
88

9-
export type BoxProps = {
9+
export type BoxProps = PropsWithChildren<{
1010
variant: BoxVariant;
1111
margin?: string;
1212
padding?: string;
@@ -19,7 +19,7 @@ export type BoxProps = {
1919
width?: number | string;
2020
height?: number | string;
2121
maxWidth?: number;
22-
};
22+
}>;
2323

2424
const Component = styled.div<BoxProps>(
2525
({
@@ -50,6 +50,6 @@ const Component = styled.div<BoxProps>(
5050
}),
5151
);
5252

53-
export const Box: FC<BoxProps> = (props) => {
54-
return <Component {...props} />;
55-
};
53+
export function Box(boxProps: BoxProps) {
54+
return <Component {...boxProps} />;
55+
}

‎src/components/Button/Button.tsx‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC, ComponentType } from 'react';
1+
import { ComponentType, PropsWithChildren } from 'react';
22
import styled from 'styled-components';
33

44
import { getMargin } from '../../theme/utils';
@@ -16,7 +16,7 @@ enum IconPosition {
1616
Right = 'right',
1717
}
1818

19-
export type ButtonProps = {
19+
export type ButtonProps = PropsWithChildren<{
2020
variant: ButtonVariant;
2121
margin?: string;
2222
id?: string;
@@ -26,7 +26,7 @@ export type ButtonProps = {
2626
icon?: ComponentType;
2727
iconPosition?: 'left' | 'right';
2828
onClick?: () => void;
29-
};
29+
}>;
3030

3131
const sizeMap: Record<string, Record<string, string>> = {
3232
s: {
@@ -84,22 +84,26 @@ const renderIconContainer = (
8484
</IconContainer>
8585
);
8686

87-
export const Button: FC<ButtonProps> = ({
88-
type = 'button',
89-
size = 'm',
90-
icon,
91-
iconPosition,
92-
children,
93-
variant,
94-
...props
95-
}) => (
96-
<Component size={size} type={type} variant={variant} {...props}>
97-
{icon &&
98-
(!iconPosition || iconPosition === IconPosition.Left) &&
99-
renderIconContainer(icon, variant, iconPosition)}
100-
{children}
101-
{icon &&
102-
iconPosition === IconPosition.Right &&
103-
renderIconContainer(icon, variant, iconPosition)}
104-
</Component>
105-
);
87+
export function Button(buttonProps: ButtonProps) {
88+
const {
89+
type = 'button',
90+
size = 'm',
91+
icon,
92+
iconPosition,
93+
children,
94+
variant,
95+
...props
96+
} = buttonProps;
97+
98+
return (
99+
<Component size={size} type={type} variant={variant} {...props}>
100+
{icon &&
101+
(!iconPosition || iconPosition === IconPosition.Left) &&
102+
renderIconContainer(icon, variant, iconPosition)}
103+
{children}
104+
{icon &&
105+
iconPosition === IconPosition.Right &&
106+
renderIconContainer(icon, variant, iconPosition)}
107+
</Component>
108+
);
109+
}

‎src/components/Chips/Chips.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
1-
import { FC } from 'react';
1+
import { PropsWithChildren } from 'react';
22
import styled from 'styled-components';
33
import { Flex } from '../Flex';
44

55
export type ChipsVariant = 'default';
66

7-
export type ChipsProps = {
7+
export type ChipsProps = PropsWithChildren<{
88
text: string;
99
number: number;
1010
variant: 'default';
11-
};
11+
}>;
1212

1313
const Component = styled(Flex)<any>(({ theme, variant }) => ({
1414
...(theme.CHIPS[variant] || {}),
1515
}));
1616

17-
export const Chips: FC<ChipsProps> = (props) => {
18-
const { text, number } = props;
17+
export function Chips(chipsProps: ChipsProps) {
18+
const { text, number, ...props } = chipsProps;
19+
1920
return (
2021
<Component {...props}>
2122
{text}
2223
<div className="number">{number}</div>
2324
</Component>
2425
);
25-
};
26+
}

‎src/components/Collapsable/Collapsable.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC, useState } from 'react';
1+
import { useState } from 'react';
22
import { COLLAPSABLE } from '../../theme/definitions/blue';
33
import { polyIcons } from '../../theme';
44
import { Box, BoxVariant, BoxProps } from '../Box';
@@ -16,15 +16,16 @@ export type CollapsableProps = BoxProps & {
1616
iconVariant?: 'default' | 'transparent';
1717
};
1818

19-
export const Collapsable: FC<CollapsableProps> = ({
20-
title,
21-
defaultOpen,
22-
clickable = true,
23-
onClick,
24-
children,
25-
iconVariant = 'default',
26-
...restProps
27-
}) => {
19+
export function Collapsable(collapsableProps: CollapsableProps) {
20+
const {
21+
title,
22+
defaultOpen,
23+
clickable = true,
24+
onClick,
25+
children,
26+
iconVariant = 'default',
27+
...restProps
28+
} = collapsableProps;
2829
const [isOpen, setIsOpen] = useState(defaultOpen || false);
2930

3031
const toggle = () => {
@@ -74,4 +75,4 @@ export const Collapsable: FC<CollapsableProps> = ({
7475
)}
7576
</Box>
7677
);
77-
};
78+
}

‎src/components/DatePicker/DatePicker.tsx‎

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC, useState, forwardRef, ComponentType } from 'react';
1+
import { useState, forwardRef, ComponentType, PropsWithChildren } from 'react';
22
import styled from 'styled-components';
33
import moment from 'moment';
44
import DateInputComponent from 'react-day-picker/DayPickerInput';
@@ -35,12 +35,12 @@ export type DatePickerProps = {
3535
dayPickerProps?: Partial<DayPickerProps>;
3636
};
3737

38-
export type OverlayComponentProps = {
38+
export type OverlayComponentProps = PropsWithChildren<{
3939
noExpiryOption: boolean;
4040
noExpiryCopy: string;
4141
handleNoExpiry: () => void;
4242
variant: BoxVariant;
43-
};
43+
}>;
4444

4545
const Overlay = styled(Box)(({ theme }) => ({
4646
...(theme.DATEPICKER || {}),
@@ -51,38 +51,39 @@ const Overlay = styled(Box)(({ theme }) => ({
5151
const formatDate = (date: Date | string, dateFormat: string) =>
5252
moment(date).format(dateFormat);
5353

54-
const OverlayComponent: FC<OverlayComponentProps> = ({
55-
children,
56-
noExpiryOption,
57-
noExpiryCopy,
58-
handleNoExpiry,
59-
...overlayProps
60-
}) => (
61-
<Overlay {...overlayProps}>
62-
<Flex variant="raw" dir="column" align="center">
63-
{children}
64-
{noExpiryOption && (
65-
<Button variant="tertiary" margin="s 0 0 0" onClick={handleNoExpiry}>
66-
{noExpiryCopy}
67-
</Button>
68-
)}
69-
</Flex>
70-
</Overlay>
71-
);
54+
export function OverlayComponent(overlayProps: OverlayComponentProps) {
55+
const { children, noExpiryOption, noExpiryCopy, handleNoExpiry, ...props } =
56+
overlayProps;
57+
58+
return (
59+
<Overlay {...props}>
60+
<Flex variant="raw" dir="column" align="center">
61+
{children}
62+
{noExpiryOption && (
63+
<Button variant="tertiary" margin="s 0 0 0" onClick={handleNoExpiry}>
64+
{noExpiryCopy}
65+
</Button>
66+
)}
67+
</Flex>
68+
</Overlay>
69+
);
70+
}
71+
72+
export function DatePicker(datePickerProps: DatePickerProps) {
73+
const {
74+
value,
75+
onChange,
76+
minDate,
77+
maxDate,
78+
hasIcon,
79+
noExpiryOption,
80+
noExpiryCopy = 'No expiry',
81+
dateFormat = 'MM/DD/YYYY',
82+
placeholder = 'mm/dd/yyyy',
83+
dayPickerProps = {},
84+
...inputProps
85+
} = datePickerProps;
7286

73-
export const DatePicker: FC<DatePickerProps> = ({
74-
value,
75-
onChange,
76-
minDate,
77-
maxDate,
78-
hasIcon,
79-
noExpiryOption,
80-
noExpiryCopy = 'No expiry',
81-
dateFormat = 'MM/DD/YYYY',
82-
placeholder = 'mm/dd/yyyy',
83-
dayPickerProps = {},
84-
...inputProps
85-
}) => {
8687
const isNoExpiry =
8788
noExpiryOption &&
8889
(value === undefined || value === null || value === noExpiryCopy);
@@ -153,4 +154,4 @@ export const DatePicker: FC<DatePickerProps> = ({
153154
)}
154155
/>
155156
);
156-
};
157+
}

‎src/components/Drawer/Drawer.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { FC } from 'react';
21
import styled from 'styled-components';
32

43
import { Box, BoxProps } from '../Box';
@@ -55,13 +54,13 @@ const Component = styled(Box)<any>(
5554
},
5655
);
5756

58-
export const Drawer: FC<DrawerProps> = ({
59-
hasOverlay = true,
60-
isOpen,
61-
...props
62-
}) => (
63-
<>
64-
{isOpen && hasOverlay && <Overlay variant="raw" />}
65-
<Component isOpen={isOpen} {...props} />
66-
</>
67-
);
57+
export function Drawer(drawerProps: DrawerProps) {
58+
const { hasOverlay = true, isOpen, ...props } = drawerProps;
59+
60+
return (
61+
<>
62+
{isOpen && hasOverlay && <Overlay variant="raw" />}
63+
<Component isOpen={isOpen} {...props} />
64+
</>
65+
);
66+
}

0 commit comments

Comments
 (0)