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

Future - Drop Emotion 10 types in lib/theming
storybookjs · Jul 19, 2022 · e9655df · e9655df
2 parents a800400 + 5571712
commit e9655df
Show file tree

Hide file tree

Showing 110 changed files with 402 additions and 661 deletions.
diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx
@@ -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',

diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx
@@ -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

diff --git a/addons/a11y/src/components/Report/Info.tsx b/addons/a11y/src/components/Report/Info.tsx
@@ -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>

diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx
@@ -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)`,

diff --git a/addons/a11y/src/components/Report/Rules.tsx b/addons/a11y/src/components/Report/Rules.tsx
@@ -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) => (

diff --git a/addons/a11y/src/components/Report/Tags.tsx b/addons/a11y/src/components/Report/Tags.tsx
@@ -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) => (

diff --git a/addons/a11y/src/components/Report/index.tsx b/addons/a11y/src/components/Report/index.tsx
@@ -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} />)

diff --git a/addons/a11y/src/components/Tabs.tsx b/addons/a11y/src/components/Tabs.tsx
@@ -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',

diff --git a/addons/actions/src/components/ActionLogger/index.tsx b/addons/actions/src/components/ActionLogger/index.tsx
@@ -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>}

diff --git a/addons/actions/src/components/ActionLogger/style.tsx b/addons/actions/src/components/ActionLogger/style.tsx
@@ -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,

diff --git a/addons/backgrounds/src/containers/BackgroundSelector.tsx b/addons/backgrounds/src/containers/BackgroundSelector.tsx
@@ -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

diff --git a/addons/backgrounds/src/containers/GridSelector.tsx b/addons/backgrounds/src/containers/GridSelector.tsx
@@ -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, {

diff --git a/addons/interactions/src/components/Interaction.tsx b/addons/interactions/src/components/Interaction.tsx
@@ -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',

diff --git a/addons/jest/src/components/Message.tsx b/addons/jest/src/components/Message.tsx
@@ -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);

diff --git a/addons/jest/src/components/Panel.tsx b/addons/jest/src/components/Panel.tsx
@@ -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}%`,

diff --git a/addons/jest/src/components/Result.tsx b/addons/jest/src/components/Result.tsx
@@ -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)`,

diff --git a/addons/jest/src/hoc/provideJestResult.tsx b/addons/jest/src/hoc/provideJestResult.tsx
@@ -15,6 +15,8 @@ export interface Test {
   name: string;
   result: {
     status: string;
+    startTime?: number;
+    endTime?: number;
     assertionResults: AssertionResult[];
   };
 }