Skip to content

Commit 5b55cea

Browse files
ghengeveldghengeveld
committed
Avoid React.FC, improve types and fix lint errors
1 parent 836fbf7 commit 5b55cea

18 files changed

Lines changed: 214 additions & 212 deletions

‎src/components/AvatarList.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { ComponentProps, FunctionComponent } from 'react';
1+
import React, { ComponentProps } from 'react';
22
import { styled } from '@storybook/theming';
33

44
import { Avatar, sizes } from './Avatar';
@@ -52,7 +52,7 @@ const Users = styled.ul`
5252
}
5353
`;
5454

55-
export interface AvatarListProps {
55+
interface AvatarListProps {
5656
isLoading: boolean;
5757
users: {
5858
id: string;
@@ -64,7 +64,7 @@ export interface AvatarListProps {
6464
}
6565

6666
// Either pass the full list of users, or a userCount if known
67-
export const AvatarList: FunctionComponent<AvatarListProps & ComponentProps<typeof Users>> = ({
67+
export const AvatarList = ({
6868
isLoading = false,
6969
users = [
7070
{ id: 'loading', avatarUrl: null, name: 'loading' },
@@ -74,7 +74,7 @@ export const AvatarList: FunctionComponent<AvatarListProps & ComponentProps<type
7474
userCount = null,
7575
size = 'medium',
7676
...props
77-
}) => {
77+
}: AvatarListProps & ComponentProps<typeof Users>) => {
7878
const count = userCount || users.length;
7979

8080
return (

‎src/components/ButtonAction.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { ComponentProps, FC } from 'react';
1+
import React, { ComponentProps, ReactNode } from 'react';
22
import { styled } from '@storybook/theming';
33
import { transparentize } from 'polished';
44
import { typography, color } from './shared/styles';
@@ -9,7 +9,7 @@ import WithTooltip from './tooltip/WithTooltip';
99

1010
interface ButtonActionProps {
1111
icon: IconType;
12-
children?: string;
12+
children?: ReactNode;
1313
isActive?: boolean;
1414
isLoading?: boolean;
1515
loadingText?: string | null;
@@ -58,15 +58,15 @@ const StyledButton = styled.button<ButtonStylingProps>`
5858
}
5959
`;
6060

61-
export const ButtonAction: FC<ButtonActionProps & ComponentProps<typeof InsideButtonAction>> = ({
61+
export const ButtonAction = ({
6262
children,
6363
icon,
6464
isActive = false,
6565
isLoading = false,
6666
loadingText = null,
6767
tooltip,
6868
...rest
69-
}) => {
69+
}: ButtonActionProps & ComponentProps<typeof InsideButtonAction>) => {
7070
if (tooltip)
7171
return (
7272
<WithTooltip tooltip={<TooltipNote note={tooltip} />} hasChrome={false} tagName="span">
@@ -94,15 +94,15 @@ export const ButtonAction: FC<ButtonActionProps & ComponentProps<typeof InsideBu
9494
);
9595
};
9696

97-
const InsideButtonAction: FC<ButtonActionProps & ComponentProps<typeof StyledButton>> = ({
97+
const InsideButtonAction = ({
9898
children,
9999
icon,
100100
isActive = false,
101101
isLoading = false,
102102
loadingText = null,
103103
tooltip,
104104
...rest
105-
}) => (
105+
}: ButtonActionProps & ComponentProps<typeof StyledButton>) => (
106106
<StyledButton isActive={isActive} isLoading={isLoading} {...rest}>
107107
{icon && !isLoading && <Icon icon={icon} />}
108108
{isLoading && (

‎src/components/CodeSnippets.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -115,10 +115,7 @@ function SnippetList({ snippets }: { snippets: SnippetType[] }) {
115115
);
116116
}
117117

118-
export function CodeSnippets({
119-
snippets,
120-
...rest
121-
}: Props & ComponentProps<typeof Wrapper> & { children?: never }) {
118+
export function CodeSnippets({ snippets, ...rest }: Props & ComponentProps<typeof Wrapper>) {
122119
return (
123120
<Wrapper {...rest}>
124121
<Background>

‎src/components/Input.tsx‎

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import React, {
55
useState,
66
forwardRef,
77
ReactNode,
8-
FC,
98
ComponentProps,
109
MutableRefObject,
1110
} from 'react';
@@ -18,15 +17,15 @@ import WithTooltip from './tooltip/WithTooltip';
1817
import { TooltipMessage } from './tooltip/TooltipMessage';
1918

2019
// prettier-ignore
21-
const Label = styled.label<Pick<Props, 'appearance'>>`
20+
const Label = styled.label<Pick<PureInputProps, 'appearance'>>`
2221
font-weight: ${props => props.appearance !== 'code' && typography.weight.bold};
2322
font-family: ${props => props.appearance === 'code' && typography.type.code };
2423
font-size: ${props => props.appearance === 'code' ? typography.size.s1 - 1 : typography.size.s2 }px;
2524
line-height: ${props => props.appearance === 'code' ? 16 : 20 }px;
2625
`;
2726

2827
// prettier-ignore
29-
const LabelWrapper = styled.div<Pick<Props, 'hideLabel'>>`
28+
const LabelWrapper = styled.div<Pick<PureInputProps, 'hideLabel'>>`
3029
margin-bottom: 8px;
3130
3231
${props => props.hideLabel && css`
@@ -64,7 +63,7 @@ const InputEl = styled.input`
6463
&:-webkit-autofill { -webkit-box-shadow: 0 0 0 3em ${color.lightest} inset; }
6564
`;
6665

67-
const getStackLevelStyling = (props: Pick<Props, 'error' | 'stackLevel'>) => {
66+
const getStackLevelStyling = (props: Pick<PureInputProps, 'error' | 'stackLevel'>) => {
6867
const radius = 4;
6968
const stackLevelDefinedStyling = css`
7069
position: relative;
@@ -107,7 +106,7 @@ const getStackLevelStyling = (props: Pick<Props, 'error' | 'stackLevel'>) => {
107106

108107
// prettier-ignore
109108
const InputWrapper = styled.div<
110-
Pick<Props, 'error' | 'stackLevel' | 'appearance' | 'startingType' | 'icon'>
109+
Pick<PureInputProps, 'error' | 'stackLevel' | 'appearance' | 'startingType' | 'icon'>
111110
>`
112111
display: inline-block;
113112
position: relative;
@@ -228,7 +227,7 @@ const InputWrapper = styled.div<
228227
`}
229228
`;
230229
// prettier-ignore
231-
const InputContainer = styled.div<Pick<Props, 'orientation'>>`
230+
const InputContainer = styled.div<Pick<PureInputProps, 'orientation'>>`
232231
${props => props.orientation === 'horizontal' && css`
233232
display: table-row;
234233
@@ -272,7 +271,7 @@ const getErrorMessage = ({
272271
error,
273272
value,
274273
lastErrorValue,
275-
}: Pick<Props, 'error' | 'value' | 'lastErrorValue'>) => {
274+
}: Pick<PureInputProps, 'error' | 'value' | 'lastErrorValue'>) => {
276275
let errorMessage = typeof error === 'function' ? error(value) : error;
277276
if (lastErrorValue) {
278277
if (value !== lastErrorValue) {
@@ -282,8 +281,30 @@ const getErrorMessage = ({
282281
return errorMessage;
283282
};
284283

285-
// FC<Props & ComponentProps<typeof InputEl>>
286-
export const PureInput = forwardRef<HTMLInputElement, Props & ComponentProps<typeof InputEl>>(
284+
interface PureInputProps {
285+
id: string;
286+
value?: string;
287+
appearance?: 'default' | 'pill' | 'code' | 'tertiary';
288+
errorTooltipPlacement?: ComponentProps<typeof WithTooltip>['placement'];
289+
stackLevel?: 'top' | 'middle' | 'bottom';
290+
label: string;
291+
hideLabel?: boolean;
292+
orientation?: 'vertical' | 'horizontal';
293+
icon?: ComponentProps<typeof Icon>['icon'];
294+
error?: ReactNode | ((value: PureInputProps['value']) => ReactNode);
295+
suppressErrorMessage?: boolean;
296+
className?: string;
297+
lastErrorValue?: string;
298+
startingType?: string;
299+
type?: string;
300+
onActionClick?: (ev: React.MouseEvent<HTMLElement>) => void;
301+
startFocused?: boolean;
302+
}
303+
304+
export const PureInput = forwardRef<
305+
HTMLInputElement,
306+
PureInputProps & ComponentProps<typeof InputEl>
307+
>(
287308
(
288309
{
289310
id,
@@ -379,26 +400,7 @@ export const PureInput = forwardRef<HTMLInputElement, Props & ComponentProps<typ
379400
);
380401
}
381402
);
382-
383-
interface Props {
384-
id: string;
385-
value?: string;
386-
appearance?: 'default' | 'pill' | 'code' | 'tertiary';
387-
errorTooltipPlacement?: ComponentProps<typeof WithTooltip>['placement'];
388-
stackLevel?: 'top' | 'middle' | 'bottom';
389-
label: string;
390-
hideLabel?: boolean;
391-
orientation?: 'vertical' | 'horizontal';
392-
icon?: ComponentProps<typeof Icon>['icon'];
393-
error?: ReactNode | Function;
394-
suppressErrorMessage?: boolean;
395-
className?: string;
396-
lastErrorValue?: string;
397-
startingType?: string;
398-
type?: string;
399-
onActionClick?: (ev: React.MouseEvent<HTMLElement>) => void;
400-
startFocused?: boolean;
401-
}
403+
PureInput.displayName = 'PureInput';
402404

403405
export const Input = forwardRef<HTMLInputElement, ComponentProps<typeof PureInput>>(
404406
({ type: startingType, startFocused, ...rest }, ref) => {
@@ -427,7 +429,7 @@ export const Input = forwardRef<HTMLInputElement, ComponentProps<typeof PureInpu
427429
inputRef.current.focus();
428430
didFocusOnStart.current = true;
429431
}
430-
}, [inputRef, didFocusOnStart]);
432+
}, [inputRef, startFocused, didFocusOnStart]);
431433

432434
return (
433435
<PureInput
@@ -440,3 +442,4 @@ export const Input = forwardRef<HTMLInputElement, ComponentProps<typeof PureInpu
440442
);
441443
}
442444
);
445+
Input.displayName = 'Input';

‎src/components/Link.tsx‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { forwardRef } from 'react';
1+
import React, { ComponentProps, forwardRef } from 'react';
22
import { styled, css } from '@storybook/theming';
33
import { darken } from 'polished';
44

@@ -174,28 +174,29 @@ const LinkComponentPicker = forwardRef<HTMLAnchorElement | HTMLButtonElement, Li
174174
);
175175
LinkComponentPicker.displayName = 'LinkComponentPicker';
176176

177-
export const Link = forwardRef<HTMLAnchorElement | HTMLButtonElement, LinkProps>(
178-
({ children, withArrow, ...rest }, ref) => {
179-
const content = (
180-
<>
181-
<LinkInner withArrow={withArrow}>
182-
{children}
183-
{withArrow && <Icon icon="arrowright" />}
184-
</LinkInner>
185-
</>
186-
);
187-
188-
return (
189-
<StyledLink
190-
as={LinkComponentPicker}
191-
ref={ref as React.ForwardedRef<HTMLAnchorElement>}
192-
{...rest}
193-
>
194-
{content}
195-
</StyledLink>
196-
);
197-
}
198-
);
177+
export const Link = forwardRef<
178+
HTMLAnchorElement | HTMLButtonElement,
179+
LinkProps & ComponentProps<typeof StyledLink>
180+
>(({ children, withArrow, ...rest }, ref) => {
181+
const content = (
182+
<>
183+
<LinkInner withArrow={withArrow}>
184+
{children}
185+
{withArrow && <Icon icon="arrowright" />}
186+
</LinkInner>
187+
</>
188+
);
189+
190+
return (
191+
<StyledLink
192+
as={LinkComponentPicker}
193+
ref={ref as React.ForwardedRef<HTMLAnchorElement>}
194+
{...rest}
195+
>
196+
{content}
197+
</StyledLink>
198+
);
199+
});
199200
Link.displayName = 'Link';
200201

201202
Link.defaultProps = {

‎src/components/LinkTabs.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { ComponentProps, FC } from 'react';
1+
import React, { ComponentProps } from 'react';
22
import { styled, css } from '@storybook/theming';
33
import type { StyledComponent } from '@storybook/theming';
44

@@ -59,16 +59,16 @@ type ItemProps = {
5959
label: string;
6060
} & ComponentProps<typeof Tab>;
6161

62-
interface Props {
62+
interface LinkTabsProps {
6363
isLoading?: boolean;
6464
items: ItemProps[];
6565
}
6666

67-
export const LinkTabs: FC<Props & ComponentProps<typeof Wrapper>> = ({
67+
export const LinkTabs = ({
6868
isLoading = false,
6969
items = [],
7070
...props
71-
}) => (
71+
}: LinkTabsProps & ComponentProps<typeof Wrapper>) => (
7272
<Wrapper {...props}>
7373
{items.map(({ key, label, ...item }) => (
7474
<li key={key}>

‎src/components/OutlineCTA.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { ComponentProps, FC, ReactNode } from 'react';
1+
import React, { ReactNode } from 'react';
22
import { styled } from '@storybook/theming';
33

44
import { breakpoint, color, spacing, typography } from './shared/styles';

‎src/components/Select.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { ComponentProps, FC, FunctionComponent, ReactNode } from 'react';
1+
import React, { ComponentProps, FunctionComponent, ReactNode } from 'react';
22
import { styled, css } from '@storybook/theming';
3-
import { color, typography, spacing } from './shared/styles';
3+
import { color, typography } from './shared/styles';
44
import { jiggle } from './shared/animation';
55
import { Icon } from './Icon';
66
import { Spinner } from './Spinner';

‎src/components/ShadowBoxCTA.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { ComponentProps, FC, ReactNode } from 'react';
1+
import React, { ComponentProps, ReactNode } from 'react';
22
import { styled } from '@storybook/theming';
33

44
import { breakpoint, spacing, typography } from './shared/styles';
@@ -55,18 +55,18 @@ const Action = styled.div`
5555
}
5656
`;
5757

58-
interface Props {
58+
interface ShadowBoxCTAProps {
5959
headingText: ReactNode;
6060
messageText?: ReactNode;
6161
action: ReactNode;
6262
}
6363

64-
export const ShadowBoxCTA: FC<Props & ComponentProps<typeof ShadowBoxCTAWrapper>> = ({
64+
export const ShadowBoxCTA = ({
6565
action,
6666
headingText,
6767
messageText,
6868
...rest
69-
}) => (
69+
}: ShadowBoxCTAProps & ComponentProps<typeof ShadowBoxCTAWrapper>) => (
7070
<ShadowBoxCTAWrapper {...rest}>
7171
<TextWrapper>
7272
<HeadingText>{headingText}</HeadingText>

0 commit comments

Comments
 (0)