GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-02 05:03:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #18598 from storybookjs/drop-emotion-10-types

Browse Source 
Future - Drop Emotion 10 types in lib/theming
This commit is contained in:
Norbert de Langen 2022-07-19 14:57:57 +02:00 committed by GitHub
commit e9655dfb92
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
110 changed files with 400 additions and 659 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
addons/a11y/src/components/A11YPanel.tsx
View File

@ -25,23 +25,23 @@ const Icon = styled(Icons)({
marginRight: 4,
});
const RotatingIcon = styled(Icon)<{}>(({ theme }) => ({
const RotatingIcon = styled(Icon)(({ theme }) => ({
animation: `${theme.animation.rotate360} 1s linear infinite;`,
}));
const Passes = styled.span<{}>(({ theme }) => ({
const Passes = styled.span(({ theme }) => ({
color: theme.color.positive,
}));
const Violations = styled.span<{}>(({ theme }) => ({
const Violations = styled.span(({ theme }) => ({
color: theme.color.negative,
}));
const Incomplete = styled.span<{}>(({ theme }) => ({
const Incomplete = styled.span(({ theme }) => ({
color: theme.color.warning,
}));
const Centered = styled.span<{}>({
const Centered = styled.span({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',

8
addons/a11y/src/components/Report/Elements.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import { styled } from '@storybook/theming';
@ -11,7 +11,7 @@ const Item = styled.li({
fontWeight: 600,
});
const ItemTitle = styled.span<{}>(({ theme }) => ({
const ItemTitle = styled.span(({ theme }) => ({
borderBottom: `1px solid ${theme.appBorderColor}`,
width: '100%',
display: 'flex',
@ -35,7 +35,7 @@ interface ElementProps {
type: RuleType;
}
const Element: FunctionComponent<ElementProps> = ({ element, type }) => {
const Element: FC<ElementProps> = ({ element, type }) => {
const { any, all, none } = element;
const rules = [...any, ...all, ...none];
const highlightToggleId = `${type}-${element.target[0]}`;
@ -58,7 +58,7 @@ interface ElementsProps {
type: RuleType;
}
export const Elements: FunctionComponent<ElementsProps> = ({ elements, type }) => (
export const Elements: FC<ElementsProps> = ({ elements, type }) => (
<ol>
{elements.map((element, index) => (
// eslint-disable-next-line react/no-array-index-key

4
addons/a11y/src/components/Report/Info.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import { styled } from '@storybook/theming';
import { Result } from 'axe-core';
@ -21,7 +21,7 @@ interface InfoProps {
item: Result;
}
export const Info: FunctionComponent<InfoProps> = ({ item }) => {
export const Info: FC<InfoProps> = ({ item }) => {
return (
<Wrapper>
<Description>{item.description}</Description>

7
addons/a11y/src/components/Report/Item.tsx
View File

@ -10,7 +10,7 @@ import { Tags } from './Tags';
import { RuleType } from '../A11YPanel';
import HighlightToggle from './HighlightToggle';
const Wrapper = styled.div<{}>(({ theme }) => ({
const Wrapper = styled.div(({ theme }) => ({
display: 'flex',
width: '100%',
borderBottom: `1px solid ${theme.appBorderColor}`,
@ -19,7 +19,7 @@ const Wrapper = styled.div<{}>(({ theme }) => ({
},
}));
const Icon = styled<any, any>(Icons)(({ theme }) => ({
const Icon = styled(Icons)(({ theme }) => ({
height: 10,
width: 10,
minWidth: 10,
@ -30,7 +30,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
display: 'inline-flex',
}));
const HeaderBar = styled.div<{}>(({ theme }) => ({
const HeaderBar = styled.div(({ theme }) => ({
padding: theme.layoutMargin,
paddingLeft: theme.layoutMargin - 3,
lineHeight: '20px',
@ -76,7 +76,6 @@ export const Item = (props: ItemProps) => {
<HeaderBar onClick={() => onToggle(!open)} role="button">
<Icon
icon="chevrondown"
size={10}
color="#9DA5AB"
style={{
transform: `rotate(${open ? 0 : -90}deg)`,

6
addons/a11y/src/components/Report/Rules.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import { styled } from '@storybook/theming';
import { Badge } from '@storybook/components';
import { CheckResult } from 'axe-core';
@ -51,7 +51,7 @@ const formatSeverityText = (severity: string) => {
return severity.charAt(0).toUpperCase().concat(severity.slice(1));
};
const Rule: FunctionComponent<RuleProps> = ({ rule }) => {
const Rule: FC<RuleProps> = ({ rule }) => {
let badgeType: any = null;
switch (rule.impact) {
case ImpactValue.CRITICAL:
@ -85,7 +85,7 @@ interface RulesProps {
rules: CheckResult[];
}
export const Rules: FunctionComponent<RulesProps> = ({ rules }) => {
export const Rules: FC<RulesProps> = ({ rules }) => {
return (
<List>
{rules.map((rule, index) => (

6
addons/a11y/src/components/Report/Tags.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import { styled } from '@storybook/theming';
import { TagValue } from 'axe-core';
@ -9,7 +9,7 @@ const Wrapper = styled.div({
margin: '12px 0',
});
const Item = styled.div<{}>(({ theme }) => ({
const Item = styled.div(({ theme }) => ({
margin: '0 6px',
padding: 5,
border: `1px solid ${theme.appBorderColor}`,
@ -20,7 +20,7 @@ interface TagsProps {
tags: TagValue[];
}
export const Tags: FunctionComponent<TagsProps> = ({ tags }) => {
export const Tags: FC<TagsProps> = ({ tags }) => {
return (
<Wrapper>
{tags.map((tag) => (

4
addons/a11y/src/components/Report/index.tsx
View File

@ -1,4 +1,4 @@
import React, { Fragment, FunctionComponent } from 'react';
import React, { Fragment, FC } from 'react';
import { Placeholder } from '@storybook/components';
import { Result } from 'axe-core';
import { Item } from './Item';
@ -10,7 +10,7 @@ export interface ReportProps {
type: RuleType;
}
export const Report: FunctionComponent<ReportProps> = ({ items, empty, type }) => (
export const Report: FC<ReportProps> = ({ items, empty, type }) => (
<Fragment>
{items && items.length ? (
items.map((item) => <Item item={item} key={`${type}:${item.id}`} type={type} />)

4
addons/a11y/src/components/Tabs.tsx
View File

@ -15,7 +15,7 @@ const Container = styled.div({
minHeight: '100%',
});
const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({
const HighlightToggleLabel = styled.label(({ theme }) => ({
cursor: 'pointer',
userSelect: 'none',
color: theme.color.dark,
@ -76,7 +76,7 @@ const Item = styled.button<{ active?: boolean }>(
const TabsWrapper = styled.div({});
const List = styled.div<{}>(({ theme }) => ({
const List = styled.div(({ theme }) => ({
boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
background: 'rgba(0, 0, 0, .05)',
display: 'flex',

9
addons/actions/src/components/ActionLogger/index.tsx
View File

@ -1,4 +1,4 @@
import React, { Fragment } from 'react';
import React, { FC, Fragment } from 'react';
import { styled, withTheme } from '@storybook/theming';
import type { Theme } from '@storybook/theming';
@ -8,11 +8,12 @@ import { ActionBar, ScrollArea } from '@storybook/components';
import { Action, InspectorContainer, Counter } from './style';
import { ActionDisplay } from '../../models';
export const Wrapper = styled(({ children, className }) => (
const UnstyledWrapped: FC<{ className?: string }> = ({ children, className }) => (
<ScrollArea horizontal vertical className={className}>
{children}
</ScrollArea>
))({
);
export const Wrapper = styled(UnstyledWrapped)({
margin: 0,
padding: '10px 5px 20px',
});
@ -36,7 +37,7 @@ interface ActionLoggerProps {
export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => (
<Fragment>
<Wrapper title="actionslogger">
<Wrapper>
{actions.map((action: ActionDisplay) => (
<Action key={action.id}>
{action.count > 1 && <Counter>{action.count}</Counter>}

2
addons/actions/src/components/ActionLogger/style.tsx
View File

@ -11,7 +11,7 @@ export const Action = styled.div({
whiteSpace: 'pre',
});
export const Counter = styled.div<{}>(({ theme }) => ({
export const Counter = styled.div(({ theme }) => ({
backgroundColor: opacify(0.5, theme.appBorderColor),
color: theme.color.inverseText,
fontSize: theme.typography.size.s1,

4
addons/backgrounds/src/containers/BackgroundSelector.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent, Fragment, useCallback, useMemo, memo } from 'react';
import React, { FC, Fragment, useCallback, useMemo, memo } from 'react';
import memoize from 'memoizerific';
import { useParameter, useGlobals } from '@storybook/api';
@ -71,7 +71,7 @@ const DEFAULT_BACKGROUNDS_CONFIG: BackgroundsParameter = {
values: [],
};
export const BackgroundSelector: FunctionComponent = memo(() => {
export const BackgroundSelector: FC = memo(() => {
const backgroundsConfig = useParameter<BackgroundsParameter>(
BACKGROUNDS_PARAM_KEY,
DEFAULT_BACKGROUNDS_CONFIG

4
addons/backgrounds/src/containers/GridSelector.tsx
View File

@ -1,11 +1,11 @@
import React, { FunctionComponent, memo } from 'react';
import React, { FC, memo } from 'react';
import { useGlobals, useParameter } from '@storybook/api';
import { Icons, IconButton } from '@storybook/components';
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
export const GridSelector: FunctionComponent = memo(() => {
export const GridSelector: FC = memo(() => {
const [globals, updateGlobals] = useGlobals();
const { grid } = useParameter(BACKGROUNDS_PARAM_KEY, {

8
addons/interactions/src/components/Interaction.tsx
View File

@ -17,7 +17,7 @@ const MethodCallWrapper = styled.div(() => ({
}));
const RowContainer = styled('div', {
shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop),
shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()),
})<{ call: Call; pausedAt: Call['id'] }>(
({ theme, call }) => ({
position: 'relative',
@ -61,9 +61,9 @@ const RowHeader = styled.div<{ disabled: boolean }>(({ theme, disabled }) => ({
'&:hover': disabled ? {} : { background: theme.background.hoverable },
}));
const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].includes(prop) })<
React.ButtonHTMLAttributes<HTMLButtonElement> & { call: Call }
>(({ theme, disabled, call }) => ({
const RowLabel = styled('button', {
shouldForwardProp: (prop) => !['call'].includes(prop.toString()),
})<React.ButtonHTMLAttributes<HTMLButtonElement> & { call: Call }>(({ theme, disabled, call }) => ({
flex: 1,
display: 'grid',
background: 'none',

8
addons/jest/src/components/Message.tsx
View File

@ -1,4 +1,4 @@
import React, { Fragment, FunctionComponent } from 'react';
import React, { Fragment, FC } from 'react';
import { styled } from '@storybook/theming';
const positiveConsoleRegex = /\[32m(.*?)\[39m/;
@ -20,7 +20,7 @@ class TestDetail {
stackTrace: string;
}
const StackTrace = styled.pre<{}>(({ theme }) => ({
const StackTrace = styled.pre(({ theme }) => ({
background: theme.color.lighter,
paddingTop: 4,
paddingBottom: 4,
@ -37,7 +37,7 @@ const Results = styled.div({
marginRight: 30,
});
const Description = styled.div<{}>(({ theme }) => ({
const Description = styled.div(({ theme }) => ({
paddingBottom: 10,
paddingTop: 10,
borderBottom: theme.appBorderColor,
@ -136,7 +136,7 @@ interface MessageProps {
msg: string;
}
export const Message: FunctionComponent<MessageProps> = (props) => {
export const Message: FC<MessageProps> = (props) => {
const { msg } = props;
const detail: TestDetail = getTestDetail(msg);

13
addons/jest/src/components/Panel.tsx
View File

@ -1,4 +1,4 @@
import React, { Fragment } from 'react';
import React, { FC, Fragment } from 'react';
import { styled, themes, convert } from '@storybook/theming';
import { ScrollArea, TabsState, Link, Placeholder } from '@storybook/components';
import { SizeMe } from 'react-sizeme';
@ -41,7 +41,11 @@ const SuiteHead = styled.div({
marginTop: 15,
});
const SuiteTotals = styled(({ result, className, width }) => (
const UnstyledSuiteTotals: FC<{
result: Test['result'];
className?: string;
width: number;
}> = ({ result, className, width }) => (
<div className={className}>
<Fragment>
{width > 325 && result.assertionResults ? (
@ -57,7 +61,8 @@ const SuiteTotals = styled(({ result, className, width }) => (
) : null}
</Fragment>
</div>
))(({ theme }) => ({
);
const SuiteTotals = styled(UnstyledSuiteTotals)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
color: theme.color.dark,
@ -69,7 +74,7 @@ const SuiteTotals = styled(({ result, className, width }) => (
}));
const SuiteProgressPortion = styled.div<{ color: any; progressPercent: number }>(
({ theme, color, progressPercent }) => ({
({ color, progressPercent }) => ({
height: 6,
top: 3,
width: `${progressPercent}%`,

3
addons/jest/src/components/Result.tsx
View File

@ -29,7 +29,7 @@ const HeaderBar = styled.div<{ status: string }>(({ theme, status }) => ({
},
}));
const Icon = styled<any, any>(Icons)(({ theme }) => ({
const Icon = styled(Icons)(({ theme }) => ({
height: 10,
width: 10,
minWidth: 10,
@ -66,7 +66,6 @@ export function Result(props: ResultProps) {
{status === `failed` ? (
<Icon
icon="chevrondown"
size={10}
color={convert(themes.light).color.mediumdark}
style={{
transform: `rotate(${isOpen ? 0 : -90}deg)`,

2
addons/jest/src/hoc/provideJestResult.tsx
View File

@ -15,6 +15,8 @@ export interface Test {
name: string;
result: {
status: string;
startTime?: number;
endTime?: number;
assertionResults: AssertionResult[];
};
}

8
addons/viewport/src/Tool.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable no-fallthrough */
import React, { Fragment, ReactNode, useEffect, useRef, FunctionComponent, memo } from 'react';
import React, { Fragment, ReactNode, useEffect, useRef, FC, memo } from 'react';
import memoize from 'memoizerific';
import { styled, Global, Theme, withTheme } from '@storybook/theming';
@ -82,7 +82,7 @@ const ActiveViewportSize = styled.div(() => ({
display: 'inline-flex',
}));
const ActiveViewportLabel = styled.div<{}>(({ theme }) => ({
const ActiveViewportLabel = styled.div(({ theme }) => ({
display: 'inline-block',
textDecoration: 'none',
padding: 10,
@ -101,7 +101,7 @@ const IconButtonWithLabel = styled(IconButton)(() => ({
alignItems: 'center',
}));
const IconButtonLabel = styled.div<{}>(({ theme }) => ({
const IconButtonLabel = styled.div(({ theme }) => ({
fontSize: theme.typography.size.s2 - 1,
marginLeft: 10,
}));
@ -123,7 +123,7 @@ const getStyles = (
return isRotated ? flip(result) : result;
};
export const ViewportTool: FunctionComponent = memo(
export const ViewportTool: FC = memo(
withTheme(({ theme }: { theme: Theme }) => {
const {
viewports = MINIMAL_VIEWPORTS,

2
docs/snippets/common/custom-docs-page.ts-component.ts.mdx
View File

@ -3,7 +3,7 @@
import React from 'react';
export const CustomDocumentationComponent: React.VFC<{}> = () => {
export const CustomDocumentationComponent: React.VFC = () => {
return (
<div>
<h1>Replacing DocsPage with a custom component</h1>

4
examples/cra-ts-essentials/src/App.tsx
View File

@ -1,8 +1,8 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import logo from './logo.svg';
import './App.css';
const App: FunctionComponent<{}> = () => {
const App: FC = () => {
return (
<div className="App">
<header className="App-header">

4
examples/cra-ts-kitchen-sink/src/App.tsx
View File

@ -1,8 +1,8 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import logo from './logo.svg';
import './App.css';
const App: FunctionComponent = () => {
const App: FC = () => {
return (
<div className="App">
<header className="App-header">

4
examples/cra-ts-kitchen-sink/src/components/Button.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
export type Type = 'default' | 'action';
@ -24,7 +24,7 @@ interface Props {
type?: Type;
}
const Button: FunctionComponent<Props> = ({ children, type = 'default', onClick }) => {
const Button: FC<Props> = ({ children, type = 'default', onClick }) => {
return (
<button type="button" onClick={onClick}>
{type}: {children}

4
examples/cra-ts-kitchen-sink/src/stories/Button.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
interface ButtonProps {
/**
@ -20,7 +20,7 @@ interface ButtonProps {
/**
* The world's most _basic_ button
*/
export const Button: FunctionComponent<ButtonProps> = ({ children, onClick }) => (
export const Button: FC<ButtonProps> = ({ children, onClick }) => (
<button onClick={onClick} type="button">
{children}
</button>

4
examples/cra-ts-kitchen-sink/src/stories/docgen-tests/DocgenTS.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable react/button-has-type */
import React, { FC, FunctionComponent, SyntheticEvent } from 'react';
import React, { FC, SyntheticEvent } from 'react';
interface ButtonProps {
/**
@ -33,7 +33,7 @@ ButtonFC.defaultProps = {
/**
* Button functional component (FunctionComponent)
*/
export const ButtonFunctionComponent: FunctionComponent<ButtonProps> = ({ onClick, children }) => (
export const ButtonFunctionComponent: FC<ButtonProps> = ({ onClick, children }) => (
<button onClick={onClick}>{children}</button>
);
ButtonFunctionComponent.defaultProps = {

4
examples/official-storybook/components/TsButton.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
export type Type = 'default' | 'action';
@ -15,7 +15,7 @@ interface Props {
type?: Type;
}
const Button: FunctionComponent<Props> = ({ children, type = 'default', onClick }) => {
const Button: FC<Props> = ({ children, type = 'default', onClick }) => {
return (
<button type="button" onClick={onClick}>
{type}: {children}

8
lib/api/src/index.tsx
View File

@ -1,7 +1,7 @@
import React, {
Component,
Fragment,
FunctionComponent,
FC,
ReactElement,
ReactNode,
useCallback,
@ -284,7 +284,7 @@ class ManagerProvider extends Component<ManagerProviderProps, State> {
// of our modules) does not cause Reach Router's LocationProvider to update with
// the correct path. Calling navigate inside on an effect does not have the
// same problem. See https://github.com/reach/router/issues/404
const EffectOnMount: FunctionComponent<{
const EffectOnMount: FC<{
children: ReactElement;
effect: () => void;
}> = ({ children, effect }) => {
@ -294,7 +294,7 @@ const EffectOnMount: FunctionComponent<{
interface ManagerConsumerProps<P = unknown> {
filter?: (combo: Combo) => P;
children: FunctionComponent<P> | ReactNode;
children: FC<P> | ReactNode;
}
const defaultFilter = (c: Combo) => c;
@ -319,7 +319,7 @@ function ManagerConsumer<P = Combo>({
}, [c.state]);
return useMemo(() => {
const Child = renderer.current as FunctionComponent<P>;
const Child = renderer.current as FC<P>;
return <Child {...data} />;
}, l);

4
lib/blocks/src/blocks/Description.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent, useContext } from 'react';
import React, { FC, useContext } from 'react';
import { str } from '@storybook/docs-tools';
import { Description, DescriptionProps as PureDescriptionProps } from '../components';
@ -70,7 +70,7 @@ ${extractComponentDescription(target) || ''}
}
};
const DescriptionContainer: FunctionComponent<DescriptionProps> = (props) => {
const DescriptionContainer: FC<DescriptionProps> = (props) => {
const context = useContext(DocsContext);
const { markdown } = getDescriptionProps(props, context);
return markdown ? <Description markdown={markdown} /> : null;

4
lib/blocks/src/blocks/DocsStory.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import deprecate from 'util-deprecate';
import { dedent } from 'ts-dedent';
import { Subheading } from './Subheading';
@ -17,7 +17,7 @@ const warnStoryDescription = deprecate(
`
);
export const DocsStory: FunctionComponent<DocsStoryProps> = ({
export const DocsStory: FC<DocsStoryProps> = ({
id,
name,
expanded = true,

4
lib/blocks/src/blocks/Heading.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import { H2 } from '@storybook/components';
import { HeaderMdx } from './mdx';
@ -7,7 +7,7 @@ export interface HeadingProps {
disableAnchor?: boolean;
}
export const Heading: FunctionComponent<HeadingProps> = ({ children, disableAnchor }) => {
export const Heading: FC<HeadingProps> = ({ children, disableAnchor }) => {
if (disableAnchor || typeof children !== 'string') {
return <H2>{children}</H2>;
}

4
lib/blocks/src/blocks/Stories.tsx
View File

@ -1,4 +1,4 @@
import React, { useContext, FunctionComponent } from 'react';
import React, { useContext, FC } from 'react';
import { DocsContext } from './DocsContext';
import { DocsStory } from './DocsStory';
import { Heading } from './Heading';
@ -9,7 +9,7 @@ interface StoriesProps {
includePrimary?: boolean;
}
export const Stories: FunctionComponent<StoriesProps> = ({ title, includePrimary = false }) => {
export const Stories: FC<StoriesProps> = ({ title, includePrimary = false }) => {
const { componentStories } = useContext(DocsContext);
let stories: DocsStoryProps[] = componentStories();

4
lib/blocks/src/blocks/Story.tsx
View File

@ -1,5 +1,5 @@
import React, {
FunctionComponent,
FC,
ReactNode,
ElementType,
ComponentProps,
@ -82,7 +82,7 @@ export const getStoryProps = <TFramework extends AnyFramework>(
};
};
const Story: FunctionComponent<StoryProps> = (props) => {
const Story: FC<StoryProps> = (props) => {
const context = useContext(DocsContext);
const storyRef = useRef();
const storyId = getStoryId(props, context);

4
lib/blocks/src/blocks/Subheading.tsx
View File

@ -1,9 +1,9 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import { H3 } from '@storybook/components';
import { HeaderMdx } from './mdx';
import { HeadingProps } from './Heading';
export const Subheading: FunctionComponent<HeadingProps> = ({ children, disableAnchor }) => {
export const Subheading: FC<HeadingProps> = ({ children, disableAnchor }) => {
if (disableAnchor || typeof children !== 'string') {
return <H3>{children}</H3>;
}

4
lib/blocks/src/blocks/Wrapper.tsx
View File

@ -1,5 +1,5 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
export const Wrapper: FunctionComponent = ({ children }) => (
export const Wrapper: FC = ({ children }) => (
<div style={{ fontFamily: 'sans-serif' }}>{children}</div>
);

4
lib/blocks/src/components/ArgsTable/ArgValue.tsx
View File

@ -51,7 +51,7 @@ const Text = styled.span<{ simple?: boolean }>(codeCommon, ({ theme, simple = fa
}),
}));
const ExpandButton = styled.button<{}>(({ theme }) => ({
const ExpandButton = styled.button(({ theme }) => ({
fontFamily: theme.typography.fonts.mono,
color: theme.color.secondary,
marginBottom: '4px',
@ -59,7 +59,7 @@ const ExpandButton = styled.button<{}>(({ theme }) => ({
border: 'none',
}));
const Expandable = styled.div<{}>(codeCommon, ({ theme }) => ({
const Expandable = styled.div(codeCommon, ({ theme }) => ({
fontFamily: theme.typography.fonts.mono,
color: theme.color.secondary,
fontSize: theme.typography.size.s1, // overrides codeCommon

12
lib/blocks/src/components/ArgsTable/SectionRow.tsx
View File

@ -27,13 +27,13 @@ const ExpanderIcon = styled(Icons)(({ theme }) => ({
display: 'inline-block',
}));
const FlexWrapper = styled.span<{}>(({ theme }) => ({
const FlexWrapper = styled.span(({ theme }) => ({
display: 'flex',
lineHeight: '20px',
alignItems: 'center',
}));
const Section = styled.td<{}>(({ theme }) => ({
const Section = styled.td(({ theme }) => ({
position: 'relative',
letterSpacing: '0.35em',
textTransform: 'uppercase',
@ -49,18 +49,18 @@ const Section = styled.td<{}>(({ theme }) => ({
},
}));
const Subsection = styled.td<{}>(({ theme }) => ({
const Subsection = styled.td(({ theme }) => ({
position: 'relative',
fontWeight: theme.typography.weight.bold,
fontSize: theme.typography.size.s2 - 1,
background: theme.background.content,
}));
const StyledTd = styled.td<{}>(({ theme }) => ({
const StyledTd = styled.td(({ theme }) => ({
position: 'relative',
}));
const StyledTr = styled.tr<{}>(({ theme }) => ({
const StyledTr = styled.tr(({ theme }) => ({
'&:hover > td': {
backgroundColor: `${theme.background.hoverable} !important`,
boxShadow: `${theme.color.mediumlight} 0 - 1px 0 0 inset`,
@ -68,7 +68,7 @@ const StyledTr = styled.tr<{}>(({ theme }) => ({
},
}));
const ClickIntercept = styled.button<{}>(() => ({
const ClickIntercept = styled.button(() => ({
// reset button style
background: 'none',
border: 'none',

4
lib/blocks/src/components/Description.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import Markdown from 'markdown-to-jsx';
import { components, ResetWrapper } from '@storybook/components';
@ -10,7 +10,7 @@ export interface DescriptionProps {
* A markdown description for a component, typically used to show the
* components docgen docs.
*/
export const Description: FunctionComponent<DescriptionProps> = ({ markdown }) => (
export const Description: FC<DescriptionProps> = ({ markdown }) => (
<ResetWrapper>
<Markdown options={{ forceBlock: true, overrides: components }}>{markdown}</Markdown>
</ResetWrapper>

12
lib/blocks/src/components/DocsPage.tsx
View File

@ -1,7 +1,7 @@
import React, { FC } from 'react';
import { transparentize } from 'polished';
import { styled, Theme } from '@storybook/theming';
import { withReset } from '@storybook/components';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
import React, { FC } from 'react';
const breakpoint = 600;
@ -10,7 +10,7 @@ export interface DocsPageProps {
subtitle?: string;
}
export const Title = styled.h1<{}>(withReset, ({ theme }: { theme: Theme }) => ({
export const Title = styled.h1(withReset, ({ theme }) => ({
color: theme.color.defaultText,
fontSize: theme.typography.size.m3,
fontWeight: theme.typography.weight.black,
@ -23,7 +23,7 @@ export const Title = styled.h1<{}>(withReset, ({ theme }: { theme: Theme }) => (
},
}));
export const Subtitle = styled.h2<{}>(withReset, ({ theme }: { theme: Theme }) => ({
export const Subtitle = styled.h2(withReset, ({ theme }) => ({
fontWeight: theme.typography.weight.regular,
fontSize: theme.typography.size.s3,
lineHeight: '20px',
@ -44,7 +44,7 @@ export const DocsContent = styled.div({
width: '100%',
});
export const DocsWrapper = styled.div<{}>(({ theme }) => ({
export const DocsWrapper = styled.div(({ theme }) => ({
background: theme.background.content,
display: 'flex',
justifyContent: 'center',

2
lib/blocks/src/components/EmptyBlock.tsx
View File

@ -3,7 +3,7 @@ import { transparentize } from 'polished';
import { styled } from '@storybook/theming';
import { withReset } from '@storybook/components';
const Wrapper = styled.div<{}>(withReset, ({ theme }) => ({
const Wrapper = styled.div(withReset, ({ theme }) => ({
backgroundColor: theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
borderRadius: theme.appBorderRadius,
border: `1px dashed ${theme.appBorderColor}`,

6
lib/blocks/src/components/Preview.tsx
View File

@ -1,7 +1,7 @@
import React, {
Children,
ClipboardEvent,
FunctionComponent,
FC,
ReactElement,
ReactNode,
useCallback,
@ -78,7 +78,7 @@ const ChildrenContainer = styled.div<PreviewProps & { layout: layout }>(
: {}
);
const StyledSource = styled(Source)<{}>(({ theme }) => ({
const StyledSource = styled(Source)(({ theme }) => ({
margin: 0,
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
@ -192,7 +192,7 @@ const getLayout = (children: ReactElement[]): layout => {
* items. The preview also shows the source for the component
* as a drop-down.
*/
export const Preview: FunctionComponent<PreviewProps> = ({
export const Preview: FC<PreviewProps> = ({
isLoading,
isColumn,
columns,

34
lib/blocks/src/components/Source.tsx
View File

@ -4,19 +4,23 @@ import { SyntaxHighlighter } from '@storybook/components';
import { EmptyBlock } from './EmptyBlock';
const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({
// DocBlocks-specific styling and overrides
fontSize: `${theme.typography.size.s2 - 1}px`,
lineHeight: '19px',
margin: '25px 0 40px',
borderRadius: theme.appBorderRadius,
boxShadow:
theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
'pre.prismjs': {
padding: 20,
background: 'inherit',
},
}));
const StyledSyntaxHighlighter: typeof SyntaxHighlighter = styled(SyntaxHighlighter)(
({ theme }) => ({
// DocBlocks-specific styling and overrides
fontSize: `${theme.typography.size.s2 - 1}px`,
lineHeight: '19px',
margin: '25px 0 40px',
borderRadius: theme.appBorderRadius,
boxShadow:
theme.base === 'light'
? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'
: 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
'pre.prismjs': {
padding: 20,
background: 'inherit',
},
})
);
export enum SourceError {
NO_STORY = 'There\u2019s no story here.',
@ -35,7 +39,7 @@ interface SourceCodeProps {
dark?: boolean;
}
const SourceSkeletonWrapper = styled.div<{}>(({ theme }) => ({
const SourceSkeletonWrapper = styled.div(({ theme }) => ({
background: theme.background.content,
borderRadius: theme.appBorderRadius,
border: `1px solid ${theme.appBorderColor}`,
@ -45,7 +49,7 @@ const SourceSkeletonWrapper = styled.div<{}>(({ theme }) => ({
padding: '20px 20px 20px 22px',
}));
const SourceSkeletonPlaceholder = styled.div<{}>(({ theme }) => ({
const SourceSkeletonPlaceholder = styled.div(({ theme }) => ({
animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
background: theme.appBorderColor,
height: 17,

2
lib/blocks/src/components/Title.tsx
View File

@ -3,7 +3,7 @@ import { withReset } from '@storybook/components';
const breakpoint = 600;
export const Title = styled.h1<{}>(withReset, ({ theme }: { theme: Theme }) => ({
export const Title = styled.h1(withReset, ({ theme }: { theme: Theme }) => ({
color: theme.color.defaultText,
fontSize: theme.typography.size.m3,
fontWeight: theme.typography.weight.black,

8
lib/blocks/src/components/Toolbar.tsx
View File

@ -1,4 +1,4 @@
import React, { Fragment, FunctionComponent, MouseEvent } from 'react';
import React, { Fragment, FC, MouseEvent } from 'react';
import { styled } from '@storybook/theming';
import {
FlexBar,
@ -28,7 +28,7 @@ interface LoadingProps {
export type ToolbarProps = BarProps & ZoomProps & EjectProps & LoadingProps;
const Zoom: FunctionComponent<ZoomProps> = ({ zoom, resetZoom }) => (
const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
<>
<IconButton
key="zoomin"
@ -63,7 +63,7 @@ const Zoom: FunctionComponent<ZoomProps> = ({ zoom, resetZoom }) => (
</>
);
const Eject: FunctionComponent<EjectProps> = ({ baseUrl, storyId }) => (
const Eject: FC<EjectProps> = ({ baseUrl, storyId }) => (
<IconButton
key="opener"
href={getStoryHref(baseUrl, storyId)}
@ -82,7 +82,7 @@ const Bar = styled(FlexBar)({
transition: 'transform .2s linear',
});
export const Toolbar: FunctionComponent<ToolbarProps> = ({
export const Toolbar: FC<ToolbarProps> = ({
isLoading,
storyId,
baseUrl,

8
lib/blocks/src/components/Typeset.tsx
View File

@ -1,10 +1,10 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import { transparentize } from 'polished';
import { styled } from '@storybook/theming';
import { withReset } from '@storybook/components';
import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
const Label = styled.div<{}>(({ theme }) => ({
const Label = styled.div(({ theme }) => ({
marginRight: 30,
fontSize: `${theme.typography.size.s1}px`,
color:
@ -26,7 +26,7 @@ const TypeSpecimen = styled.div({
'&:not(:last-child)': { marginBottom: '1rem' },
});
const Wrapper = styled.div<{}>(withReset, ({ theme }) => ({
const Wrapper = styled.div(withReset, ({ theme }) => ({
...getBlockBackgroundStyle(theme),
margin: '25px 0 40px',
padding: '30px 20px',
@ -43,7 +43,7 @@ export interface TypesetProps {
* Convenient styleguide documentation showing examples of type
* with different sizes and weights and configurable sample text.
*/
export const Typeset: FunctionComponent<TypesetProps> = ({
export const Typeset: FC<TypesetProps> = ({
fontFamily,
fontSizes,
fontWeight,

4
lib/blocks/src/controls/Files.tsx
View File

@ -1,4 +1,4 @@
import React, { ChangeEvent, FunctionComponent } from 'react';
import React, { ChangeEvent, FC } from 'react';
import { styled } from '@storybook/theming';
import { Form } from '@storybook/components';
import { ControlProps } from './types';
@ -20,7 +20,7 @@ function revokeOldUrls(urls: string[]) {
});
}
export const FilesControl: FunctionComponent<FilesControlProps> = ({
export const FilesControl: FC<FilesControlProps> = ({
onChange,
name,
accept = 'image/*',

11
lib/blocks/src/controls/Object.tsx
View File

@ -190,6 +190,7 @@ const RawButton = styled(IconButton)(({ theme }) => ({
color: theme.color.mediumdark,
fontSize: '9px',
fontWeight: 'bold',
textDecoration: 'none',
span: {
marginLeft: 3,
marginTop: 1,
@ -285,7 +286,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
id={getControlId(name)}
name={name}
defaultValue={value === null ? '' : JSON.stringify(value, null, 2)}
onBlur={(event: FocusEvent<HTMLInputElement>) => updateRaw(event.target.value)}
onBlur={(event: FocusEvent<HTMLTextAreaElement>) => updateRaw(event.target.value)}
placeholder="Edit JSON string..."
autoFocus={forceVisible}
valid={parseError ? 'error' : null}
@ -295,7 +296,13 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
return (
<Wrapper>
{['Object', 'Array'].includes(getObjectType(data)) && (
<RawButton onClick={() => setShowRaw((v) => !v)}>
<RawButton
href="#"
onClick={(e: SyntheticEvent) => {
e.preventDefault();
setShowRaw((v) => !v);
}}
>
<Icons icon={showRaw ? 'eyeclose' : 'eye'} />
<span>RAW</span>
</RawButton>

6
lib/components/src/ActionBar/ActionBar.tsx
View File

@ -1,8 +1,8 @@
import React, { FunctionComponent, MouseEvent } from 'react';
import React, { FC, MouseEvent } from 'react';
import { styled } from '@storybook/theming';
const Container = styled.div<{}>(({ theme }) => ({
const Container = styled.div(({ theme }) => ({
position: 'absolute',
bottom: 0,
right: 0,
@ -65,7 +65,7 @@ export interface ActionBarProps {
actionItems: ActionItem[];
}
export const ActionBar: FunctionComponent<ActionBarProps> = ({ actionItems, ...props }) => (
export const ActionBar: FC<ActionBarProps> = ({ actionItems, ...props }) => (
<Container {...props}>
{actionItems.map(({ title, className, onClick, disabled }, index: number) => (
// eslint-disable-next-line react/no-array-index-key

4
lib/components/src/Badge/Badge.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import { styled } from '@storybook/theming';
const BadgeWrapper = styled.div<BadgeProps>(
@ -66,6 +66,6 @@ export interface BadgeProps {
status: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
}
export const Badge: FunctionComponent<BadgeProps> = ({ ...props }) => {
export const Badge: FC<BadgeProps> = ({ ...props }) => {
return <BadgeWrapper {...props} />;
};

4
lib/components/src/Button/Button.tsx
View File

@ -1,4 +1,4 @@
import React, { forwardRef, FunctionComponent, ComponentProps, ReactNode } from 'react';
import React, { forwardRef, FC, ComponentProps, ReactNode } from 'react';
import { styled } from '@storybook/theming';
import { darken, lighten, rgba, transparentize } from 'polished';
@ -234,7 +234,7 @@ const ButtonWrapper = styled.button<{
const ButtonLink = ButtonWrapper.withComponent('a');
export const Button: FunctionComponent<ComponentProps<typeof ButtonWrapper>> = Object.assign(
export const Button: FC<ComponentProps<typeof ButtonWrapper>> = Object.assign(
forwardRef<
any,
{

92
lib/components/src/Loader/Loader.tsx
View File

@ -1,6 +1,6 @@
import global from 'global';
import { transparentize } from 'polished';
import React, { ComponentProps, FunctionComponent, useEffect, useState } from 'react';
import React, { ComponentProps, FC, useEffect, useState } from 'react';
import { styled, keyframes } from '@storybook/theming';
import { Icons } from '../icon/icon';
import { rotate360 } from '../shared/animation';
@ -106,55 +106,59 @@ interface LoaderProps {
size?: number;
}
export const PureLoader: FunctionComponent<LoaderProps & ComponentProps<typeof ProgressWrapper>> =
({ progress, error, size, ...props }) => {
if (error) {
return (
<ProgressWrapper aria-label={error.toString()} aria-live="polite" role="status" {...props}>
<ErrorIcon icon="lightningoff" />
<ProgressMessage>{error.message}</ProgressMessage>
</ProgressWrapper>
);
}
if (progress) {
const { value, modules } = progress;
let { message } = progress;
if (modules) message += ` ${modules.complete} / ${modules.total} modules`;
return (
<ProgressWrapper
aria-label="Content is loading..."
aria-live="polite"
aria-valuemin={0}
aria-valuemax={100}
aria-valuenow={value * 100}
aria-valuetext={message}
role="progressbar"
{...props}
>
<ProgressTrack>
<ProgressBar style={{ width: `${value * 100}%` }} />
</ProgressTrack>
<ProgressMessage>
{message}
{value < 1 && <Ellipsis key={message} />}
</ProgressMessage>
</ProgressWrapper>
);
}
export const PureLoader: FC<LoaderProps & ComponentProps<typeof ProgressWrapper>> = ({
progress,
error,
size,
...props
}) => {
if (error) {
return (
<LoaderWrapper
<ProgressWrapper aria-label={error.toString()} aria-live="polite" role="status" {...props}>
<ErrorIcon icon="lightningoff" />
<ProgressMessage>{error.message}</ProgressMessage>
</ProgressWrapper>
);
}
if (progress) {
const { value, modules } = progress;
let { message } = progress;
if (modules) message += ` ${modules.complete} / ${modules.total} modules`;
return (
<ProgressWrapper
aria-label="Content is loading..."
aria-live="polite"
role="status"
size={size}
aria-valuemin={0}
aria-valuemax={100}
aria-valuenow={value * 100}
aria-valuetext={message}
role="progressbar"
{...props}
/>
>
<ProgressTrack>
<ProgressBar style={{ width: `${value * 100}%` }} />
</ProgressTrack>
<ProgressMessage>
{message}
{value < 1 && <Ellipsis key={message} />}
</ProgressMessage>
</ProgressWrapper>
);
};
}
export const Loader: FunctionComponent<ComponentProps<typeof PureLoader>> = (props) => {
return (
<LoaderWrapper
aria-label="Content is loading..."
aria-live="polite"
role="status"
size={size}
{...props}
/>
);
};
export const Loader: FC<ComponentProps<typeof PureLoader>> = (props) => {
const [progress, setProgress] = useState(undefined);
const [error, setError] = useState(undefined);

6
lib/components/src/ScrollArea/ScrollArea.tsx
View File

@ -1,10 +1,10 @@
import React, { FunctionComponent, lazy, Suspense } from 'react';
import React, { FC, lazy, Suspense } from 'react';
import { styled } from '@storybook/theming';
const GlobalScrollAreaStyles = lazy(() => import('./GlobalScrollAreaStyles'));
const OverlayScrollbars = lazy(() => import('./OverlayScrollbars'));
const Scroller: FunctionComponent<ScrollAreaProps> = ({ horizontal, vertical, ...props }) => (
const Scroller: FC<ScrollAreaProps> = ({ horizontal, vertical, ...props }) => (
<Suspense fallback={<div {...props} />}>
<GlobalScrollAreaStyles />
<OverlayScrollbars options={{ scrollbars: { autoHide: 'leave' } }} {...props} />
@ -18,7 +18,7 @@ export interface ScrollAreaProps {
className?: string;
}
export const ScrollArea: FunctionComponent<ScrollAreaProps> = styled(Scroller)<ScrollAreaProps>(
export const ScrollArea: FC<ScrollAreaProps> = styled(Scroller)<ScrollAreaProps>(
({ vertical }) => (!vertical ? { overflowY: 'hidden' } : { overflowY: 'auto', height: '100%' }),
({ horizontal }) => (!horizontal ? { overflowX: 'hidden' } : { overflowX: 'auto', width: '100%' })
);

15
lib/components/src/bar/bar.tsx
View File

@ -1,4 +1,4 @@
import React, { Children, FunctionComponent } from 'react';
import React, { Children, ComponentProps, FC } from 'react';
import { styled } from '@storybook/theming';
import { ScrollArea } from '../ScrollArea/ScrollArea';
@ -37,11 +37,12 @@ const Side = styled.div<SideProps>(
);
Side.displayName = 'Side';
export const Bar = styled(({ children, className }) => (
const UnstyledBar: FC<ComponentProps<typeof ScrollArea>> = ({ children, className }) => (
<ScrollArea horizontal vertical={false} className={className}>
{children}
</ScrollArea>
))(
);
export const Bar = styled(UnstyledBar)<{ border?: boolean }>(
({ theme }) => ({
color: theme.barTextColor,
width: '100%',
@ -50,7 +51,7 @@ export const Bar = styled(({ children, className }) => (
overflow: 'auto',
overflowY: 'hidden',
}),
({ theme, border }) =>
({ theme, border = false }) =>
border
? {
boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
@ -76,11 +77,7 @@ export interface FlexBarProps {
backgroundColor?: string;
}
export const FlexBar: FunctionComponent<FlexBarProps> = ({
children,
backgroundColor,
...rest
}) => {
export const FlexBar: FC<FlexBarProps> = ({ children, backgroundColor, ...rest }) => {
const [left, right] = Children.toArray(children);
return (
<Bar {...rest}>

4
lib/components/src/brand/StorybookIcon.tsx
View File

@ -1,6 +1,6 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
export const StorybookIcon: FunctionComponent<{}> = ({ ...props }) => (
export const StorybookIcon: FC = ({ ...props }) => (
<svg viewBox="0 0 64 64" {...props}>
<title>Storybook icon</title>
<g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">

4
lib/components/src/brand/StorybookLogo.tsx
View File

@ -1,6 +1,6 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
export const StorybookLogo: FunctionComponent<{
export const StorybookLogo: FC<{
alt: string;
}> = ({ alt, ...props }) => (
<svg width="200px" height="40px" viewBox="0 0 200 40" {...props} role="img">

8
lib/components/src/form/field/field.tsx
View File

@ -1,7 +1,7 @@
import React, { FunctionComponent, ReactNode } from 'react';
import React, { FC, ReactNode } from 'react';
import { styled } from '@storybook/theming';
const Wrapper = styled.label<{}>(({ theme }) => ({
const Wrapper = styled.label(({ theme }) => ({
display: 'flex',
borderBottom: `1px solid ${theme.appBorderColor}`,
margin: '0 15px',
@ -12,7 +12,7 @@ const Wrapper = styled.label<{}>(({ theme }) => ({
},
}));
const Label = styled.span<{}>(({ theme }) => ({
const Label = styled.span(({ theme }) => ({
minWidth: 100,
fontWeight: theme.typography.weight.bold,
marginRight: 15,
@ -27,7 +27,7 @@ export interface FieldProps {
label?: ReactNode;
}
export const Field: FunctionComponent<FieldProps> = ({ label, children, ...props }) => (
export const Field: FC<FieldProps> = ({ label, children, ...props }) => (
<Wrapper {...props}>
{label ? (
<Label>

4
lib/components/src/form/input/input.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent, forwardRef, HTMLProps, SelectHTMLAttributes } from 'react';
import React, { FC, forwardRef, HTMLProps, SelectHTMLAttributes } from 'react';
import type { Theme, CSSObject } from '@storybook/theming';
import { styled } from '@storybook/theming';
@ -224,7 +224,7 @@ const ButtonStyled = styled(
},
});
export const Button: FunctionComponent<any> = Object.assign(
export const Button: FC<any> = Object.assign(
forwardRef<{}, {}>((props, ref) => (
<ButtonStyled {...props} {...{ tertiary: true, small: true, inForm: true }} ref={ref} />
)),

4
lib/components/src/spaced/Spaced.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import { styled } from '@storybook/theming';
const toNumber = (input: any) => (typeof input === 'number' ? input : Number(input));
@ -59,7 +59,7 @@ export interface SpacedProps {
outer?: number | boolean;
}
export const Spaced: FunctionComponent<SpacedProps> = ({ col, row, outer, children, ...rest }) => {
export const Spaced: FC<SpacedProps> = ({ col, row, outer, children, ...rest }) => {
const outerAmount = toNumber(typeof outer === 'number' || !outer ? outer : col || row);
return (

19
lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
View File

@ -1,4 +1,11 @@
import React, { ClipboardEvent, FunctionComponent, MouseEvent, useCallback, useState } from 'react';
import React, {
ClipboardEvent,
ComponentProps,
FC,
MouseEvent,
useCallback,
useState,
} from 'react';
import { logger } from '@storybook/client-logger';
import { styled } from '@storybook/theming';
import global from 'global';
@ -94,11 +101,15 @@ const Wrapper = styled.div<WrapperProps>(
: {}
);
const Scroller = styled(({ children, className }) => (
const UnstyledScroller: FC<ComponentProps<typeof ScrollArea>> = ({
children,
className,
}): JSX.Element => (
<ScrollArea horizontal vertical className={className}>
{children}
</ScrollArea>
))(
);
const Scroller = styled(UnstyledScroller)(
{
position: 'relative',
},
@ -133,7 +144,7 @@ export interface SyntaxHighlighterState {
// copied from @types/react-syntax-highlighter/index.d.ts
export const SyntaxHighlighter: FunctionComponent<SyntaxHighlighterProps> = ({
export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
children,
language = 'jsx',
copyable = false,

6
lib/components/src/tabs/tabs.tsx
View File

@ -2,7 +2,7 @@ import React, {
Children,
Component,
Fragment,
FunctionComponent,
FC,
memo,
MouseEvent,
ReactElement,
@ -111,7 +111,7 @@ export interface TabWrapperProps {
children?: ReactNode;
}
export const TabWrapper: FunctionComponent<TabWrapperProps> = ({ active, render, children }) => (
export const TabWrapper: FC<TabWrapperProps> = ({ active, render, children }) => (
<VisuallyHidden active={active}>{render ? render() : children}</VisuallyHidden>
);
@ -151,7 +151,7 @@ export interface TabsProps {
bordered?: boolean;
}
export const Tabs: FunctionComponent<TabsProps> = memo(
export const Tabs: FC<TabsProps> = memo(
({ children, selected, actions, absolute, bordered, tools, backgroundColor, id: htmlId }) => {
const list = childrenToList(children, selected);

6
lib/components/src/tooltip/ListItem.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent, ReactNode, ComponentProps } from 'react';
import React, { FC, ReactNode, ComponentProps } from 'react';
import { styled } from '@storybook/theming';
import memoize from 'memoizerific';
import { transparentize } from 'polished';
@ -183,7 +183,7 @@ const getItemProps = memoize(100)((onClick, href, LinkWrapper) => {
return result;
});
export type LinkWrapperType = FunctionComponent<any>;
export type LinkWrapperType = FC<any>;
export interface ListItemProps extends Omit<ComponentProps<typeof Item>, 'href' | 'title'> {
loading?: boolean;
@ -197,7 +197,7 @@ export interface ListItemProps extends Omit<ComponentProps<typeof Item>, 'href'
LinkWrapper?: LinkWrapperType;
}
const ListItem: FunctionComponent<ListItemProps> = ({
const ListItem: FC<ListItemProps> = ({
loading,
left,
title,

4
lib/components/src/tooltip/Tooltip.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import memoize from 'memoizerific';
import { styled, Color, lighten, darken } from '@storybook/theming';
@ -125,7 +125,7 @@ export interface TooltipProps {
color?: keyof Color;
}
export const Tooltip: FunctionComponent<TooltipProps> = ({
export const Tooltip: FC<TooltipProps> = ({
placement,
hasChrome,
children,

11
lib/components/src/tooltip/TooltipLinkList.tsx
View File

@ -1,9 +1,9 @@
import React, { FunctionComponent, useCallback, SyntheticEvent } from 'react';
import React, { FC, useCallback, SyntheticEvent } from 'react';
import { styled } from '@storybook/theming';
import ListItem, { LinkWrapperType, ListItemProps } from './ListItem';
const List = styled.div<{}>(
const List = styled.div(
{
minWidth: 180,
overflow: 'hidden',
@ -26,7 +26,7 @@ export interface TooltipLinkListProps {
LinkWrapper?: LinkWrapperType;
}
const Item: FunctionComponent<TooltipLinkListProps['links'][number]> = (props) => {
const Item: FC<TooltipLinkListProps['links'][number]> = (props) => {
const { LinkWrapper, onClick: onClickFromProps, ...rest } = props;
const { title, href, active } = rest;
const onClick = useCallback(
@ -50,10 +50,7 @@ const Item: FunctionComponent<TooltipLinkListProps['links'][number]> = (props) =
);
};
export const TooltipLinkList: FunctionComponent<TooltipLinkListProps> = ({
links,
LinkWrapper,
}) => (
export const TooltipLinkList: FC<TooltipLinkListProps> = ({ links, LinkWrapper }) => (
<List>
{links.map(({ isGatsby, ...p }) => (
<Item key={p.id} LinkWrapper={isGatsby ? LinkWrapper : null} {...p} />

4
lib/components/src/tooltip/TooltipMessage.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent, ReactNode } from 'react';
import React, { FC, ReactNode } from 'react';
import { styled } from '@storybook/theming';
import { Link } from '../typography/link/link';
@ -40,7 +40,7 @@ export interface TooltipMessageProps {
}[];
}
export const TooltipMessage: FunctionComponent<TooltipMessageProps> = ({ title, desc, links }) => {
export const TooltipMessage: FC<TooltipMessageProps> = ({ title, desc, links }) => {
return (
<MessageWrapper>
<Message>

4
lib/components/src/tooltip/TooltipNote.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import { styled } from '@storybook/theming';
const Note = styled.div(({ theme }) => ({
@ -20,6 +20,6 @@ export interface TooltipNoteProps {
note: string;
}
export const TooltipNote: FunctionComponent<TooltipNoteProps> = ({ note, ...props }) => {
export const TooltipNote: FC<TooltipNoteProps> = ({ note, ...props }) => {
return <Note {...props}>{note}</Note>;
};

6
lib/components/src/tooltip/WithTooltip.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent, ReactNode, useCallback, useState, useEffect } from 'react';
import React, { FC, ReactNode, useCallback, useState, useEffect } from 'react';
import { styled } from '@storybook/theming';
import global from 'global';
@ -37,7 +37,7 @@ export interface WithTooltipPureProps {
}
// Pure, does not bind to the body
const WithTooltipPure: FunctionComponent<WithTooltipPureProps> = ({
const WithTooltipPure: FC<WithTooltipPureProps> = ({
svg,
trigger,
closeOnClick,
@ -119,7 +119,7 @@ WithTooltipPure.defaultProps = {
tooltipShown: false,
};
const WithToolTipState: FunctionComponent<
const WithToolTipState: FC<
WithTooltipPureProps & {
startOpen?: boolean;
}

2
lib/components/src/typography/DocumentWrapper.tsx
View File

@ -1,6 +1,6 @@
import { styled } from '@storybook/theming';
export const DocumentWrapper = styled.div<{}>(({ theme }) => ({
export const DocumentWrapper = styled.div(({ theme }) => ({
fontSize: `${theme.typography.size.s2}px`,
lineHeight: '1.6',

2
lib/components/src/typography/ResetWrapper.tsx
View File

@ -9,4 +9,4 @@ import { withReset } from './lib/common';
* easily override child elements that are not expecting it.
*/
export const ResetWrapper = styled.div<{}>(withReset);
export const ResetWrapper = styled.div(withReset);

2
lib/components/src/typography/elements/Code.tsx
View File

@ -21,7 +21,7 @@ const DefaultCodeBlock = styled.code(
codeCommon
);
const StyledSyntaxHighlighter = styled(SyntaxHighlighter)<{}>(({ theme }) => ({
const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({
// DocBlocks-specific styling and overrides
fontSize: `${theme.typography.size.s2 - 1}px`,
lineHeight: '19px',

4
lib/components/src/typography/elements/Link.tsx
View File

@ -1,6 +1,6 @@
import React, { FunctionComponent, AnchorHTMLAttributes } from 'react';
import React, { FC, AnchorHTMLAttributes } from 'react';
export const Link: FunctionComponent<AnchorHTMLAttributes<HTMLAnchorElement>> = ({
export const Link: FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({
href: input,
children,
...props

4
lib/components/src/typography/link/link.tsx
View File

@ -1,4 +1,4 @@
import React, { AnchorHTMLAttributes, FunctionComponent, MouseEvent } from 'react';
import React, { AnchorHTMLAttributes, FC, MouseEvent } from 'react';
import { styled } from '@storybook/theming';
import { darken } from 'polished';
@ -183,7 +183,7 @@ export interface LinkProps extends LinkInnerProps, LinkStylesProps {
href?: string;
}
export const Link: FunctionComponent<LinkProps & AProps> = ({
export const Link: FC<LinkProps & AProps> = ({
cancel,
children,
onClick,

5
lib/theming/src/convert.ts
View File

@ -1,7 +1,6 @@
import { opacify } from 'polished';
import { background, typography, color } from './base';
import { Theme, Color, ThemeVars } from './types';
import { StorybookTheme, Color, ThemeVars } from './types';
import { easing, animation } from './animation';
import { create as createSyntax, chromeLight, chromeDark } from './modules/syntax';
import { getPreferredColorScheme } from './utils';
@ -72,7 +71,7 @@ const createColors = (vars: ThemeVars): Color => ({
inverseText: vars.textInverseColor || color.lightest,
});
export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]): Theme => {
export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]): StorybookTheme => {
const {
base,
colorPrimary,

272
lib/theming/src/emotion10types.ts
View File

@ -1,272 +0,0 @@
/* eslint-disable camelcase */
/*
* We added these types so we can be fairly confident that we introduce no breaking changes
* We should remove this file in 7.0
*/
import { Interpolation } from '@emotion/react';
export type PropsOf<C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> =
JSX.LibraryManagedAttributes<C, React.ComponentPropsWithRef<any>>;
export type AddOptionalTo<T, U> = DistributiveOmit<T, U> & Partial<Pick<T, Extract<keyof T, U>>>;
type DistributiveOmit<T, U> = T extends any ? Pick<T, Exclude<keyof T, U>> : never;
type Overwrapped<T, U> = Pick<T, Extract<keyof T, keyof U>>;
type JSXInEl = JSX.IntrinsicElements;
type ReactClassPropKeys = keyof React.ClassAttributes<any>;
type WithTheme<P, T> = P extends { theme: infer Theme }
? P & { theme: Exclude<Theme, undefined> }
: P & { theme: T };
interface StyledOptions {
label?: string;
shouldForwardProp?(propName: string): boolean;
target?: string;
}
interface ComponentSelector {
__emotion_styles: any;
}
export interface StyledComponent<InnerProps, StyleProps, Theme extends object>
extends React.FC<InnerProps & DistributiveOmit<StyleProps, 'theme'> & { theme?: Theme }>,
ComponentSelector {
/**
* @desc this method is type-unsafe
*/
withComponent<NewTag extends keyof JSXInEl>(
tag: NewTag
): StyledComponent<JSXInEl[NewTag], StyleProps, Theme>;
withComponent<Tag extends React.ComponentType<any>>(
tag: Tag
): StyledComponent<PropsOf<Tag>, StyleProps, Theme>;
}
interface CreateStyledComponentBaseThemeless<InnerProps, ExtraProps> {
<
StyleProps extends DistributiveOmit<
Overwrapped<InnerProps, StyleProps>,
ReactClassPropKeys
> = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>,
Theme extends object = object
>(
...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>>
): StyledComponent<InnerProps, StyleProps, Theme>;
<
StyleProps extends DistributiveOmit<
Overwrapped<InnerProps, StyleProps>,
ReactClassPropKeys
> = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>,
Theme extends object = object
>(
template: TemplateStringsArray,
...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>>
): StyledComponent<InnerProps, StyleProps, Theme>;
}
interface CreateStyledComponentBaseThemed<
InnerProps,
ExtraProps,
StyledInstanceTheme extends object
> {
<
StyleProps extends DistributiveOmit<
Overwrapped<InnerProps, StyleProps>,
ReactClassPropKeys
> = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>
>(
...styles: Array<Interpolation<WithTheme<StyleProps, StyledInstanceTheme>>>
): StyledComponent<InnerProps, StyleProps, StyledInstanceTheme>;
<
StyleProps extends DistributiveOmit<
Overwrapped<InnerProps, StyleProps>,
ReactClassPropKeys
> = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>
>(
template: TemplateStringsArray,
...styles: Array<Interpolation<WithTheme<StyleProps, StyledInstanceTheme>>>
): StyledComponent<InnerProps, StyleProps, StyledInstanceTheme>;
}
type CreateStyledComponentBase<InnerProps, ExtraProps, StyledInstanceTheme extends object> =
// this "reversed" condition checks if StyledInstanceTheme was already parametrized when using CreateStyled
object extends StyledInstanceTheme
? CreateStyledComponentBaseThemeless<InnerProps, ExtraProps>
: CreateStyledComponentBaseThemed<InnerProps, ExtraProps, StyledInstanceTheme>;
type CreateStyledComponentIntrinsic<Tag extends keyof JSXInEl, ExtraProps, Theme extends object> =
CreateStyledComponentBase<JSXInEl[Tag], ExtraProps, Theme>;
type CreateStyledComponentExtrinsic<
Tag extends React.ComponentType<any>,
ExtraProps,
Theme extends object
> = CreateStyledComponentBase<PropsOf<Tag>, ExtraProps, Theme>;
interface StyledTags<Theme extends object> {
/**
* @desc
* HTML tags
*/
a: CreateStyledComponentIntrinsic<'a', {}, Theme>;
abbr: CreateStyledComponentIntrinsic<'abbr', {}, Theme>;
address: CreateStyledComponentIntrinsic<'address', {}, Theme>;
area: CreateStyledComponentIntrinsic<'area', {}, Theme>;
article: CreateStyledComponentIntrinsic<'article', {}, Theme>;
aside: CreateStyledComponentIntrinsic<'aside', {}, Theme>;
audio: CreateStyledComponentIntrinsic<'audio', {}, Theme>;
b: CreateStyledComponentIntrinsic<'b', {}, Theme>;
base: CreateStyledComponentIntrinsic<'base', {}, Theme>;
bdi: CreateStyledComponentIntrinsic<'bdi', {}, Theme>;
bdo: CreateStyledComponentIntrinsic<'bdo', {}, Theme>;
big: CreateStyledComponentIntrinsic<'big', {}, Theme>;
blockquote: CreateStyledComponentIntrinsic<'blockquote', {}, Theme>;
body: CreateStyledComponentIntrinsic<'body', {}, Theme>;
br: CreateStyledComponentIntrinsic<'br', {}, Theme>;
button: CreateStyledComponentIntrinsic<'button', {}, Theme>;
canvas: CreateStyledComponentIntrinsic<'canvas', {}, Theme>;
caption: CreateStyledComponentIntrinsic<'caption', {}, Theme>;
cite: CreateStyledComponentIntrinsic<'cite', {}, Theme>;
code: CreateStyledComponentIntrinsic<'code', {}, Theme>;
col: CreateStyledComponentIntrinsic<'col', {}, Theme>;
colgroup: CreateStyledComponentIntrinsic<'colgroup', {}, Theme>;
data: CreateStyledComponentIntrinsic<'data', {}, Theme>;
datalist: CreateStyledComponentIntrinsic<'datalist', {}, Theme>;
dd: CreateStyledComponentIntrinsic<'dd', {}, Theme>;
del: CreateStyledComponentIntrinsic<'del', {}, Theme>;
details: CreateStyledComponentIntrinsic<'details', {}, Theme>;
dfn: CreateStyledComponentIntrinsic<'dfn', {}, Theme>;
dialog: CreateStyledComponentIntrinsic<'dialog', {}, Theme>;
div: CreateStyledComponentIntrinsic<'div', {}, Theme>;
dl: CreateStyledComponentIntrinsic<'dl', {}, Theme>;
dt: CreateStyledComponentIntrinsic<'dt', {}, Theme>;
em: CreateStyledComponentIntrinsic<'em', {}, Theme>;
embed: CreateStyledComponentIntrinsic<'embed', {}, Theme>;
fieldset: CreateStyledComponentIntrinsic<'fieldset', {}, Theme>;
figcaption: CreateStyledComponentIntrinsic<'figcaption', {}, Theme>;
figure: CreateStyledComponentIntrinsic<'figure', {}, Theme>;
footer: CreateStyledComponentIntrinsic<'footer', {}, Theme>;
form: CreateStyledComponentIntrinsic<'form', {}, Theme>;
h1: CreateStyledComponentIntrinsic<'h1', {}, Theme>;
h2: CreateStyledComponentIntrinsic<'h2', {}, Theme>;
h3: CreateStyledComponentIntrinsic<'h3', {}, Theme>;
h4: CreateStyledComponentIntrinsic<'h4', {}, Theme>;
h5: CreateStyledComponentIntrinsic<'h5', {}, Theme>;
h6: CreateStyledComponentIntrinsic<'h6', {}, Theme>;
head: CreateStyledComponentIntrinsic<'head', {}, Theme>;
header: CreateStyledComponentIntrinsic<'header', {}, Theme>;
hgroup: CreateStyledComponentIntrinsic<'hgroup', {}, Theme>;
hr: CreateStyledComponentIntrinsic<'hr', {}, Theme>;
html: CreateStyledComponentIntrinsic<'html', {}, Theme>;
i: CreateStyledComponentIntrinsic<'i', {}, Theme>;
iframe: CreateStyledComponentIntrinsic<'iframe', {}, Theme>;
img: CreateStyledComponentIntrinsic<'img', {}, Theme>;
input: CreateStyledComponentIntrinsic<'input', {}, Theme>;
ins: CreateStyledComponentIntrinsic<'ins', {}, Theme>;
kbd: CreateStyledComponentIntrinsic<'kbd', {}, Theme>;
keygen: CreateStyledComponentIntrinsic<'keygen', {}, Theme>;
label: CreateStyledComponentIntrinsic<'label', {}, Theme>;
legend: CreateStyledComponentIntrinsic<'legend', {}, Theme>;
li: CreateStyledComponentIntrinsic<'li', {}, Theme>;
link: CreateStyledComponentIntrinsic<'link', {}, Theme>;
main: CreateStyledComponentIntrinsic<'main', {}, Theme>;
map: CreateStyledComponentIntrinsic<'map', {}, Theme>;
mark: CreateStyledComponentIntrinsic<'mark', {}, Theme>;
/**
* @desc
* marquee tag is not supported by @types/react
*/
// 'marquee': CreateStyledComponentIntrinsic<'marquee', {}, Theme>;
menu: CreateStyledComponentIntrinsic<'menu', {}, Theme>;
menuitem: CreateStyledComponentIntrinsic<'menuitem', {}, Theme>;
meta: CreateStyledComponentIntrinsic<'meta', {}, Theme>;
meter: CreateStyledComponentIntrinsic<'meter', {}, Theme>;
nav: CreateStyledComponentIntrinsic<'nav', {}, Theme>;
noscript: CreateStyledComponentIntrinsic<'noscript', {}, Theme>;
object: CreateStyledComponentIntrinsic<'object', {}, Theme>;
ol: CreateStyledComponentIntrinsic<'ol', {}, Theme>;
optgroup: CreateStyledComponentIntrinsic<'optgroup', {}, Theme>;
option: CreateStyledComponentIntrinsic<'option', {}, Theme>;
output: CreateStyledComponentIntrinsic<'output', {}, Theme>;
p: CreateStyledComponentIntrinsic<'p', {}, Theme>;
param: CreateStyledComponentIntrinsic<'param', {}, Theme>;
picture: CreateStyledComponentIntrinsic<'picture', {}, Theme>;
pre: CreateStyledComponentIntrinsic<'pre', {}, Theme>;
progress: CreateStyledComponentIntrinsic<'progress', {}, Theme>;
q: CreateStyledComponentIntrinsic<'q', {}, Theme>;
rp: CreateStyledComponentIntrinsic<'rp', {}, Theme>;
rt: CreateStyledComponentIntrinsic<'rt', {}, Theme>;
ruby: CreateStyledComponentIntrinsic<'ruby', {}, Theme>;
s: CreateStyledComponentIntrinsic<'s', {}, Theme>;
samp: CreateStyledComponentIntrinsic<'samp', {}, Theme>;
script: CreateStyledComponentIntrinsic<'script', {}, Theme>;
section: CreateStyledComponentIntrinsic<'section', {}, Theme>;
select: CreateStyledComponentIntrinsic<'select', {}, Theme>;
small: CreateStyledComponentIntrinsic<'small', {}, Theme>;
source: CreateStyledComponentIntrinsic<'source', {}, Theme>;
span: CreateStyledComponentIntrinsic<'span', {}, Theme>;
strong: CreateStyledComponentIntrinsic<'strong', {}, Theme>;
style: CreateStyledComponentIntrinsic<'style', {}, Theme>;
sub: CreateStyledComponentIntrinsic<'sub', {}, Theme>;
summary: CreateStyledComponentIntrinsic<'summary', {}, Theme>;
sup: CreateStyledComponentIntrinsic<'sup', {}, Theme>;
table: CreateStyledComponentIntrinsic<'table', {}, Theme>;
tbody: CreateStyledComponentIntrinsic<'tbody', {}, Theme>;
td: CreateStyledComponentIntrinsic<'td', {}, Theme>;
textarea: CreateStyledComponentIntrinsic<'textarea', {}, Theme>;
tfoot: CreateStyledComponentIntrinsic<'tfoot', {}, Theme>;
th: CreateStyledComponentIntrinsic<'th', {}, Theme>;
thead: CreateStyledComponentIntrinsic<'thead', {}, Theme>;
time: CreateStyledComponentIntrinsic<'time', {}, Theme>;
title: CreateStyledComponentIntrinsic<'title', {}, Theme>;
tr: CreateStyledComponentIntrinsic<'tr', {}, Theme>;
track: CreateStyledComponentIntrinsic<'track', {}, Theme>;
u: CreateStyledComponentIntrinsic<'u', {}, Theme>;
ul: CreateStyledComponentIntrinsic<'ul', {}, Theme>;
var: CreateStyledComponentIntrinsic<'var', {}, Theme>;
video: CreateStyledComponentIntrinsic<'video', {}, Theme>;
wbr: CreateStyledComponentIntrinsic<'wbr', {}, Theme>;
/**
* @desc
* SVG tags
*/
circle: CreateStyledComponentIntrinsic<'circle', {}, Theme>;
clipPath: CreateStyledComponentIntrinsic<'clipPath', {}, Theme>;
defs: CreateStyledComponentIntrinsic<'defs', {}, Theme>;
ellipse: CreateStyledComponentIntrinsic<'ellipse', {}, Theme>;
foreignObject: CreateStyledComponentIntrinsic<'foreignObject', {}, Theme>;
g: CreateStyledComponentIntrinsic<'g', {}, Theme>;
image: CreateStyledComponentIntrinsic<'image', {}, Theme>;
line: CreateStyledComponentIntrinsic<'line', {}, Theme>;
linearGradient: CreateStyledComponentIntrinsic<'linearGradient', {}, Theme>;
mask: CreateStyledComponentIntrinsic<'mask', {}, Theme>;
path: CreateStyledComponentIntrinsic<'path', {}, Theme>;
pattern: CreateStyledComponentIntrinsic<'pattern', {}, Theme>;
polygon: CreateStyledComponentIntrinsic<'polygon', {}, Theme>;
polyline: CreateStyledComponentIntrinsic<'polyline', {}, Theme>;
radialGradient: CreateStyledComponentIntrinsic<'radialGradient', {}, Theme>;
rect: CreateStyledComponentIntrinsic<'rect', {}, Theme>;
stop: CreateStyledComponentIntrinsic<'stop', {}, Theme>;
svg: CreateStyledComponentIntrinsic<'svg', {}, Theme>;
text: CreateStyledComponentIntrinsic<'text', {}, Theme>;
tspan: CreateStyledComponentIntrinsic<'tspan', {}, Theme>;
}
interface BaseCreateStyled<Theme extends object = any> {
<Tag extends React.ComponentType<any>, ExtraProps = {}>(
tag: Tag,
options?: StyledOptions
): CreateStyledComponentExtrinsic<Tag, ExtraProps, Theme>;
<Tag extends keyof JSXInEl, ExtraProps = {}>(
tag: Tag,
options?: StyledOptions
): CreateStyledComponentIntrinsic<Tag, ExtraProps, Theme>;
}
export interface CreateStyled<Theme extends object = any>
extends BaseCreateStyled<Theme>,
StyledTags<Theme> {}

9
lib/theming/src/emotionAugmentation.d.ts vendored Normal file
View File

@ -0,0 +1,9 @@
// this file is only actually used in development
// for prod/dist bundles we are bundling Emotion into our package
import '@emotion/react';
declare module '@emotion/react' {
type StorybookTheme = import('./types').StorybookTheme;
export interface Theme extends StorybookTheme {}
}

4
lib/theming/src/ensure.ts
View File

@ -4,10 +4,10 @@ import { deletedDiff } from 'deep-object-diff';
import { dedent } from 'ts-dedent';
import light from './themes/light';
import { Theme, ThemeVars } from './types';
import { StorybookTheme, ThemeVars } from './types';
import { convert } from './convert';
export const ensure = (input: ThemeVars): Theme => {
export const ensure = (input: ThemeVars): StorybookTheme => {
if (!input) {
return convert(light);
}

34
lib/theming/src/index.ts
View File

@ -1,29 +1,25 @@
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="./typings.d.ts" />
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="./emotionAugmentation.d.ts" />
import emotionStyled from '@emotion/styled';
import * as emotionReact from '@emotion/react';
// TODO: when releasing 7.0 this should be removed and code should be upgraded to use Emotion 11 types
import type { CreateStyled, PropsOf, AddOptionalTo } from './emotion10types';
export { default as styled } from '@emotion/styled';
import { Theme } from './types';
export type { StyledComponent } from '@emotion/styled';
export type { StyledComponent } from './emotion10types';
export { keyframes, css, jsx, ClassNames, ThemeProvider, CacheProvider } from '@emotion/react';
export {
CacheProvider,
ClassNames,
css,
Global,
jsx,
keyframes,
ThemeProvider,
useTheme,
withTheme,
} from '@emotion/react';
export type { CSSObject, Keyframes } from '@emotion/react';
export const useTheme = emotionReact.useTheme as <TTheme = Theme>() => TTheme;
export const withTheme = emotionReact.withTheme as <C extends React.ComponentType<any>>(
component: C
) => React.FC<AddOptionalTo<PropsOf<C>, 'theme'>>;
export const Global = emotionReact.Global as (props: {
styles: emotionReact.Interpolation<Theme>;
}) => React.ReactElement;
export const styled = emotionStyled as CreateStyled<Theme>;
export * from './base';
export * from './types';

2
lib/theming/src/types.ts
View File

@ -56,7 +56,7 @@ export interface Brand {
target: string | null | undefined;
}
export interface Theme {
export interface StorybookTheme {
color: Color;
background: Background;
typography: Typography;

4
lib/ui/src/app.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent, useMemo } from 'react';
import React, { FC, useMemo } from 'react';
import sizeMe from 'react-sizeme';
import { State } from '@storybook/api';
@ -50,7 +50,7 @@ const App = React.memo<AppProps>(
<Route path="/settings/" startsWith>
{children}
</Route>
)) as FunctionComponent,
)) as FC,
},
],
}),

10
lib/ui/src/components/layout/app.mockdata.tsx
View File

@ -1,5 +1,5 @@
import global from 'global';
import React, { Component, FunctionComponent } from 'react';
import React, { Component, FC } from 'react';
import { styled } from '@storybook/theming';
import { Collection } from '@storybook/addons';
import { State } from '@storybook/api';
@ -120,22 +120,22 @@ class PlaceholderClock extends Component<{ color: string }, { count: number }> {
}
}
const MockSidebar: FunctionComponent<any> = (props) => (
const MockSidebar: FC<any> = (props) => (
<PlaceholderClock color="hotpink">
<pre>{JSON.stringify(props, null, 2)}</pre>
</PlaceholderClock>
);
const MockPreview: FunctionComponent<any> = (props) => (
const MockPreview: FC<any> = (props) => (
<PlaceholderClock color="deepskyblue">
<pre>{JSON.stringify(props, null, 2)}</pre>
</PlaceholderClock>
);
const MockPanel: FunctionComponent<any> = (props) => (
const MockPanel: FC<any> = (props) => (
<PlaceholderClock color="orangered">
<pre>{JSON.stringify(props, null, 2)}</pre>
</PlaceholderClock>
);
export const MockPage: FunctionComponent<any> = (props) => (
export const MockPage: FC<any> = (props) => (
<PlaceholderClock color="cyan">
<pre>{JSON.stringify(props, null, 2)}</pre>
</PlaceholderClock>

10
lib/ui/src/components/layout/container.tsx
View File

@ -1,4 +1,4 @@
import React, { Component, Fragment, FunctionComponent, CSSProperties, ReactNode } from 'react';
import React, { Component, Fragment, FC, CSSProperties, ReactNode } from 'react';
import { styled, withTheme } from '@storybook/theming';
import type { Theme } from '@storybook/theming';
import type { State } from '@storybook/api';
@ -101,7 +101,7 @@ const Paper = styled.div<{ isFullscreen: boolean }>(
}
);
export const Sidebar: FunctionComponent<{ hidden: boolean; position: CSSProperties }> = ({
export const Sidebar: FC<{ hidden: boolean; position: CSSProperties }> = ({
hidden = false,
children,
position = undefined,
@ -113,7 +113,7 @@ export const Sidebar: FunctionComponent<{ hidden: boolean; position: CSSProperti
</Pane>
);
export const Main: FunctionComponent<{ isFullscreen: boolean; position: CSSProperties }> = ({
export const Main: FC<{ isFullscreen: boolean; position: CSSProperties }> = ({
isFullscreen = false,
children,
position = undefined,
@ -124,7 +124,7 @@ export const Main: FunctionComponent<{ isFullscreen: boolean; position: CSSPrope
</Pane>
);
export const Preview: FunctionComponent<{ hidden: boolean; position: CSSProperties }> = ({
export const Preview: FC<{ hidden: boolean; position: CSSProperties }> = ({
hidden = false,
children,
position = undefined,
@ -135,7 +135,7 @@ export const Preview: FunctionComponent<{ hidden: boolean; position: CSSProperti
</Pane>
);
export const Panel: FunctionComponent<{
export const Panel: FC<{
hidden: boolean;
position: CSSProperties;
align: 'bottom' | 'right';

4
lib/ui/src/components/layout/desktop.tsx
View File

@ -1,4 +1,4 @@
import React, { Fragment, ComponentType, FunctionComponent } from 'react';
import React, { Fragment, ComponentType, FC } from 'react';
import { State } from '@storybook/api';
import * as S from './container';
@ -13,7 +13,7 @@ export interface DesktopProps {
Notifications: ComponentType<any>;
pages: {
key: string;
route: FunctionComponent;
route: FC;
render: ComponentType;
}[];
options: State['layout'];

8
lib/ui/src/components/layout/mobile.tsx
View File

@ -1,4 +1,4 @@
import React, { Component, Children, ComponentType, FunctionComponent, ReactNode } from 'react';
import React, { Component, Children, ComponentType, FC, ReactNode } from 'react';
import { State, ActiveTabs } from '@storybook/api';
import { styled } from '@storybook/theming';
@ -92,7 +92,7 @@ const Panels = React.memo((({ children, active, isFullscreen }) => (
</Pane>
))}
</PanelsContainer>
)) as FunctionComponent<{ active: ActiveTabsType; children: ReactNode; isFullscreen: boolean }>);
)) as FC<{ active: ActiveTabsType; children: ReactNode; isFullscreen: boolean }>);
Panels.displayName = 'Panels';
const PanelsContainer = styled.div<{ isFullscreen: boolean }>(
@ -128,8 +128,8 @@ const Bar = styled.nav(
export interface Page {
key: string;
route: FunctionComponent;
render: FunctionComponent;
route: FC;
render: FC;
}
export interface MobileProps {

8
lib/ui/src/components/notifications/NotificationItem.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent, SyntheticEvent } from 'react';
import React, { FC, SyntheticEvent } from 'react';
import { State } from '@storybook/api';
import { Link } from '@storybook/router';
import { styled } from '@storybook/theming';
@ -75,7 +75,7 @@ const SubHeadline = styled.div(({ theme }) => ({
marginTop: 2,
}));
const ItemContent: FunctionComponent<Pick<State['notifications'][0], 'icon' | 'content'>> = ({
const ItemContent: FC<Pick<State['notifications'][0], 'icon' | 'content'>> = ({
icon,
content: { headline, subHeadline },
}) => (
@ -104,7 +104,7 @@ const DismissButtonWrapper = styled(IconButton)(({ theme }) => ({
color: theme.base === 'light' ? 'rgba(255,255,255,0.7)' : ' #999999',
}));
const DismissNotificationItem: FunctionComponent<{
const DismissNotificationItem: FC<{
onDismiss: () => void;
}> = ({ onDismiss }) => (
<DismissButtonWrapper
@ -122,7 +122,7 @@ export const NotificationItemSpacer = styled.div({
height: 48,
});
const NotificationItem: FunctionComponent<{
const NotificationItem: FC<{
notification: State['notifications'][0];
onDismissNotification: (id: string) => void;
}> = ({ notification: { content, link, onClear, id, icon }, onDismissNotification }) => {

4
lib/ui/src/components/notifications/NotificationList.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import type { State } from '@storybook/api';
import { styled } from '@storybook/theming';
import type { CSSObject } from '@storybook/theming';
@ -24,7 +24,7 @@ const List = styled.div<{ placement?: CSSObject }>(
}
);
const NotificationList: FunctionComponent<{
const NotificationList: FC<{
placement: CSSObject;
notifications: State['notifications'];
clearNotification: (id: string) => void;

4
lib/ui/src/components/preview/FramesRenderer.tsx
View File

@ -1,4 +1,4 @@
import React, { Fragment, FunctionComponent, useMemo, useEffect, useState } from 'react';
import React, { Fragment, FC, useMemo, useEffect, useState } from 'react';
import type { Combo } from '@storybook/api';
import { Consumer } from '@storybook/api';
import { Button, getStoryHref } from '@storybook/components';
@ -39,7 +39,7 @@ const whenSidebarIsVisible = ({ state }: Combo) => ({
selectedStoryId: state.storyId,
});
export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
export const FramesRenderer: FC<FramesRendererProps> = ({
refs,
entry,
scale,

4
lib/ui/src/components/preview/wrappers.tsx
View File

@ -1,8 +1,8 @@
import React, { Fragment, FunctionComponent } from 'react';
import React, { Fragment, FC } from 'react';
import { ApplyWrappersProps, Wrapper } from './utils/types';
import { IframeWrapper } from './utils/components';
export const ApplyWrappers: FunctionComponent<ApplyWrappersProps> = ({
export const ApplyWrappers: FC<ApplyWrappersProps> = ({
wrappers,
id,
storyId,

4
lib/ui/src/components/sidebar/Explorer.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent, useRef } from 'react';
import React, { FC, useRef } from 'react';
import { Ref } from './Refs';
import { CombinedDataset, Selection } from './types';
@ -12,7 +12,7 @@ export interface ExplorerProps {
selected: Selection;
}
export const Explorer: FunctionComponent<ExplorerProps> = React.memo(
export const Explorer: FC<ExplorerProps> = React.memo(
({ isLoading, isBrowsing, dataset, selected }) => {
const containerRef = useRef<HTMLDivElement>(null);

4
lib/ui/src/components/sidebar/Heading.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent, ComponentProps } from 'react';
import React, { FC, ComponentProps } from 'react';
import { styled } from '@storybook/theming';
import { Button } from '@storybook/components';
@ -53,7 +53,7 @@ const SkipToCanvasLink = styled(Button)(({ theme }) => ({
},
}));
export const Heading: FunctionComponent<HeadingProps & ComponentProps<typeof HeadingWrapper>> = ({
export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> = ({
menuHighlighted = false,
menu,
skipLinkHref,

4
lib/ui/src/components/sidebar/HighlightStyles.tsx
View File

@ -1,9 +1,9 @@
import { transparentize } from 'polished';
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import { Global } from '@storybook/theming';
import { Highlight } from './types';
export const HighlightStyles: FunctionComponent<Highlight> = ({ refId, itemId }) => (
export const HighlightStyles: FC<Highlight> = ({ refId, itemId }) => (
<Global
styles={({ color }) => {
const background = transparentize(0.85, color.secondary);

4
lib/ui/src/components/sidebar/Loader.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent, Fragment } from 'react';
import React, { FC, Fragment } from 'react';
import { styled } from '@storybook/theming';
const LOADER_SEQUENCE = [0, 0, 1, 1, 2, 3, 3, 3, 1, 1, 1, 2, 2, 2, 3];
@ -40,7 +40,7 @@ interface LoaderProps {
size: number;
}
export const Loader: FunctionComponent<LoaderProps> = ({ size }) => {
export const Loader: FC<LoaderProps> = ({ size }) => {
const repeats = Math.ceil(size / LOADER_SEQUENCE.length);
// Creates an array that repeats LOADER_SEQUENCE depths in order, until the size is reached.
const sequence = Array.from(Array(repeats)).fill(LOADER_SEQUENCE).flat().slice(0, size);

8
lib/ui/src/components/sidebar/Menu.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent, useMemo, ComponentProps, FC } from 'react';
import React, { useMemo, ComponentProps, FC } from 'react';
import { styled } from '@storybook/theming';
import { WithTooltip, TooltipLinkList, Button, Icons, IconButton } from '@storybook/components';
@ -78,7 +78,7 @@ export const MenuButton: FC<ComponentProps<typeof Button> & { highlighted: boole
type ClickHandler = ComponentProps<typeof TooltipLinkList>['links'][number]['onClick'];
export const SidebarMenuList: FunctionComponent<{
export const SidebarMenuList: FC<{
menu: MenuList;
onHide: () => void;
}> = ({ menu, onHide }) => {
@ -96,7 +96,7 @@ export const SidebarMenuList: FunctionComponent<{
return <TooltipLinkList links={links} />;
};
export const SidebarMenu: FunctionComponent<{
export const SidebarMenu: FC<{
menu: MenuList;
isHighlighted: boolean;
}> = ({ isHighlighted, menu }) => {
@ -114,7 +114,7 @@ export const SidebarMenu: FunctionComponent<{
);
};
export const ToolbarMenu: FunctionComponent<{
export const ToolbarMenu: FC<{
menu: MenuList;
}> = ({ menu }) => {
return (

15
lib/ui/src/components/sidebar/RefBlocks.tsx
View File

@ -1,5 +1,5 @@
import global from 'global';
import React, { FunctionComponent, useState, useCallback, Fragment } from 'react';
import React, { FC, useState, useCallback, Fragment } from 'react';
import { Icons, WithTooltip, Spaced, Button, Link } from '@storybook/components';
import { logger } from '@storybook/client-logger';
@ -56,7 +56,7 @@ const ErrorDetail = styled.em(({ theme }) => ({
const firstLineRegex = /(Error): (.*)\n/;
const linesRegex = /at (?:(.*) )?\(?(.+)\)?/;
const ErrorFormatter: FunctionComponent<{ error: Error }> = ({ error }) => {
const ErrorFormatter: FC<{ error: Error }> = ({ error }) => {
if (!error) {
return <Fragment>This error has no stack or message</Fragment>;
}
@ -106,10 +106,7 @@ const ErrorFormatter: FunctionComponent<{ error: Error }> = ({ error }) => {
);
};
export const AuthBlock: FunctionComponent<{ loginUrl: string; id: string }> = ({
loginUrl,
id,
}) => {
export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }) => {
const [isAuthAttempted, setAuthAttempted] = useState(false);
const refresh = useCallback(() => {
@ -164,7 +161,7 @@ export const AuthBlock: FunctionComponent<{ loginUrl: string; id: string }> = ({
);
};
export const ErrorBlock: FunctionComponent<{ error: Error }> = ({ error }) => (
export const ErrorBlock: FC<{ error: Error }> = ({ error }) => (
<Contained>
<Spaced>
<TextStyle>
@ -199,7 +196,7 @@ const WideSpaced = styled(Spaced)({
flex: 1,
});
export const EmptyBlock: FunctionComponent<any> = ({ isMain }) => (
export const EmptyBlock: FC<any> = ({ isMain }) => (
<Contained>
<FlexSpaced col={1}>
<WideSpaced>
@ -223,7 +220,7 @@ export const EmptyBlock: FunctionComponent<any> = ({ isMain }) => (
</Contained>
);
export const LoaderBlock: FunctionComponent<{ isMain: boolean }> = ({ isMain }) => (
export const LoaderBlock: FC<{ isMain: boolean }> = ({ isMain }) => (
<Contained>
<Loader size={isMain ? 17 : 5} />
</Contained>

16
lib/ui/src/components/sidebar/RefIndicator.tsx
View File

@ -1,5 +1,5 @@
import global from 'global';
import React, { FunctionComponent, useMemo, ComponentProps, useCallback, forwardRef } from 'react';
import React, { FC, useMemo, ComponentProps, useCallback, forwardRef } from 'react';
import { Icons, WithTooltip, Spaced, TooltipLinkList } from '@storybook/components';
import { styled } from '@storybook/theming';
@ -148,7 +148,7 @@ const Version = styled.div(({ theme }) => ({
},
}));
const CurrentVersion: FunctionComponent<CurrentVersionProps> = ({ url, versions }) => {
const CurrentVersion: FC<CurrentVersionProps> = ({ url, versions }) => {
const currentVersionId = useMemo(() => {
const c = Object.entries(versions).find(([k, v]) => v === url);
return c && c[0] ? c[0] : 'current';
@ -238,7 +238,7 @@ export const RefIndicator = React.memo(
)
);
const ReadyMessage: FunctionComponent<{
const ReadyMessage: FC<{
url: string;
componentCount: number;
leafCount: number;
@ -254,7 +254,7 @@ const ReadyMessage: FunctionComponent<{
</Message>
);
const LoginRequiredMessage: FunctionComponent<RefType> = ({ loginUrl, id }) => {
const LoginRequiredMessage: FC<RefType> = ({ loginUrl, id }) => {
const open = useCallback((e) => {
e.preventDefault();
const childWindow = globalWindow.open(loginUrl, `storybook_auth_${id}`, 'resizable,scrollbars');
@ -281,7 +281,7 @@ const LoginRequiredMessage: FunctionComponent<RefType> = ({ loginUrl, id }) => {
);
};
const ReadDocsMessage: FunctionComponent = () => (
const ReadDocsMessage: FC = () => (
<Message href="https://storybook.js.org" target="_blank">
<GreenIcon icon="document" />
<div>
@ -291,7 +291,7 @@ const ReadDocsMessage: FunctionComponent = () => (
</Message>
);
const ErrorOccurredMessage: FunctionComponent<{ url: string }> = ({ url }) => (
const ErrorOccurredMessage: FC<{ url: string }> = ({ url }) => (
<Message href={url.replace(/\/?$/, '/index.html')} target="_blank">
<RedIcon icon="alert" />
<div>
@ -301,7 +301,7 @@ const ErrorOccurredMessage: FunctionComponent<{ url: string }> = ({ url }) => (
</Message>
);
const LoadingMessage: FunctionComponent<{ url: string }> = ({ url }) => (
const LoadingMessage: FC<{ url: string }> = ({ url }) => (
<Message href={url.replace(/\/?$/, '/index.html')} target="_blank">
<BlueIcon icon="time" />
<div>
@ -311,7 +311,7 @@ const LoadingMessage: FunctionComponent<{ url: string }> = ({ url }) => (
</Message>
);
const PerformanceDegradedMessage: FunctionComponent = () => (
const PerformanceDegradedMessage: FC = () => (
<Message href="https://storybook.js.org/docs" target="_blank">
<YellowIcon icon="lightning" />
<div>

11
lib/ui/src/components/sidebar/Refs.tsx
View File

@ -1,11 +1,4 @@
import React, {
FunctionComponent,
useMemo,
useState,
useRef,
useCallback,
MutableRefObject,
} from 'react';
import React, { FC, useMemo, useState, useRef, useCallback, MutableRefObject } from 'react';
import { useStorybookApi } from '@storybook/api';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
@ -97,7 +90,7 @@ const CollapseButton = styled.button(({ theme }) => ({
},
}));
export const Ref: FunctionComponent<RefType & RefProps> = React.memo((props) => {
export const Ref: FC<RefType & RefProps> = React.memo((props) => {
const api = useStorybookApi();
const {
stories,

14
lib/ui/src/components/sidebar/SearchResults.tsx
View File

@ -1,13 +1,7 @@
import { styled } from '@storybook/theming';
import { Icons } from '@storybook/components';
import global from 'global';
import React, {
FunctionComponent,
MouseEventHandler,
ReactNode,
useCallback,
useEffect,
} from 'react';
import React, { FC, MouseEventHandler, ReactNode, useCallback, useEffect } from 'react';
import { ControllerStateAndHelpers } from 'downshift';
import { ComponentNode, DocumentNode, Path, RootNode, StoryNode } from './TreeNode';
@ -97,7 +91,7 @@ const ActionKey = styled.code(({ theme }) => ({
pointerEvents: 'none',
}));
const Highlight: FunctionComponent<{ match?: Match }> = React.memo(({ children, match }) => {
const Highlight: FC<{ match?: Match }> = React.memo(({ children, match }) => {
if (!match) return <>{children}</>;
const { value, indices } = match;
const { nodes: result } = indices.reduce<{ cursor: number; nodes: ReactNode[] }>(
@ -116,7 +110,7 @@ const Highlight: FunctionComponent<{ match?: Match }> = React.memo(({ children,
return <>{result}</>;
});
const Result: FunctionComponent<
const Result: FC<
SearchResult & { icon: string; isHighlighted: boolean; onClick: MouseEventHandler }
> = React.memo(({ item, matches, icon, onClick, ...props }) => {
const click: MouseEventHandler = useCallback(
@ -161,7 +155,7 @@ const Result: FunctionComponent<
return <ResultRow {...props}>{node}</ResultRow>;
});
export const SearchResults: FunctionComponent<{
export const SearchResults: FC<{
query: string;
results: DownshiftItem[];
closeMenu: (cb?: () => void) => void;

4
lib/ui/src/containers/menu.tsx
View File

@ -1,4 +1,4 @@
import React, { useMemo, FunctionComponent } from 'react';
import React, { useMemo, FC } from 'react';
import { Badge } from '@storybook/components';
import type { API } from '@storybook/api';
@ -29,7 +29,7 @@ const Key = styled.code(({ theme }) => ({
},
}));
const Shortcut: FunctionComponent<{ keys: string[] }> = ({ keys }) => (
const Shortcut: FC<{ keys: string[] }> = ({ keys }) => (
<>
{keys.map((key, index) => (
// eslint-disable-next-line react/no-array-index-key

4
lib/ui/src/containers/notifications.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import { Consumer, Combo, useStorybookApi } from '@storybook/api';
@ -14,7 +14,7 @@ export const mapper = ({ state }: Combo) => {
};
};
const NotificationConnect: FunctionComponent<any> = (props) => (
const NotificationConnect: FC<any> = (props) => (
<Consumer filter={mapper}>
{(fromState) => <NotificationList {...props} {...fromState} />}
</Consumer>

4
lib/ui/src/containers/panel.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import memoize from 'memoizerific';
import { Consumer, Combo } from '@storybook/api';
@ -18,7 +18,7 @@ const mapper = ({ state, api }: Combo) => ({
shortcuts: api.getShortcutKeys(),
});
const Panel: FunctionComponent<any> = (props) => (
const Panel: FC<any> = (props) => (
<Consumer filter={mapper}>{(customProps) => <AddonPanel {...props} {...customProps} />}</Consumer>
);

4
lib/ui/src/containers/sidebar.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React from 'react';
import type { Combo, StoriesHash } from '@storybook/api';
import { Consumer } from '@storybook/api';
@ -8,7 +8,7 @@ import { useMenu } from './menu';
export type Item = StoriesHash[keyof StoriesHash];
const Sidebar: FunctionComponent<{}> = React.memo(() => {
const Sidebar = React.memo(() => {
const mapper = ({ state, api }: Combo) => {
const {
ui: { name, url, enableShortcuts },

4
lib/ui/src/index.tsx
View File

@ -2,7 +2,7 @@
/// <reference path="./typings.d.ts" />
import global from 'global';
import React, { FC, FunctionComponent } from 'react';
import React, { FC } from 'react';
import ReactDOM from 'react-dom';
import { Location, LocationProvider, useNavigate } from '@storybook/router';
@ -45,7 +45,7 @@ export interface RootProps {
history?: History;
}
export const Root: FunctionComponent<RootProps> = ({ provider }) => (
export const Root: FC<RootProps> = ({ provider }) => (
<Container key="container">
<HelmetProvider key="helmet.Provider">
<LocationProvider key="location.provider">

4
lib/ui/src/settings/SettingsFooter.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FC } from 'react';
import { styled } from '@storybook/theming';
import { Link } from '@storybook/components';
@ -14,7 +14,7 @@ const Footer = styled.div(({ theme }) => ({
marginLeft: 20,
},
}));
const SettingsFooter: FunctionComponent<any> = (props) => (
const SettingsFooter: FC<any> = (props) => (
<Footer {...props}>
<Link secondary href="https://storybook.js.org" cancel={false} target="_blank">
Docs

4
lib/ui/src/settings/about.tsx
View File

@ -1,4 +1,4 @@
import React, { Fragment, FunctionComponent } from 'react';
import React, { Fragment, FC } from 'react';
import semver from '@storybook/semver';
import { styled } from '@storybook/theming';
import { State } from '@storybook/api';
@ -80,7 +80,7 @@ const Container = styled.div({
margin: '0 auto',
});
const AboutScreen: FunctionComponent<{
const AboutScreen: FC<{
latest: State['versions']['latest'];
current: State['versions']['current'];
}> = ({ latest = null, current }) => {

Some files were not shown because too many files have changed in this diff Show More