From 94d98e857821dd9989a3b60f79804afb9d01923c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Thu, 26 May 2022 08:56:22 +0200 Subject: [PATCH 01/10] Drop Emotion 10 types --- lib/theming/src/emotion10types.ts | 271 ------------------------------ lib/theming/src/index.ts | 32 ++-- 2 files changed, 13 insertions(+), 290 deletions(-) delete mode 100644 lib/theming/src/emotion10types.ts diff --git a/lib/theming/src/emotion10types.ts b/lib/theming/src/emotion10types.ts deleted file mode 100644 index 9aa1d2e1f13..00000000000 --- a/lib/theming/src/emotion10types.ts +++ /dev/null @@ -1,271 +0,0 @@ -/* - * 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> = - JSX.LibraryManagedAttributes>; - -export type AddOptionalTo = DistributiveOmit & Partial>>; - -type DistributiveOmit = T extends any ? Pick> : never; -type Overwrapped = Pick>; - -type JSXInEl = JSX.IntrinsicElements; -type ReactClassPropKeys = keyof React.ClassAttributes; - -type WithTheme = P extends { theme: infer Theme } - ? P & { theme: Exclude } - : P & { theme: T }; - -interface StyledOptions { - label?: string; - shouldForwardProp?(propName: string): boolean; - target?: string; -} - -interface ComponentSelector { - __emotion_styles: any; -} - -export interface StyledComponent - extends React.FC & { theme?: Theme }>, - ComponentSelector { - /** - * @desc this method is type-unsafe - */ - withComponent( - tag: NewTag - ): StyledComponent; - withComponent>( - tag: Tag - ): StyledComponent, StyleProps, Theme>; -} - -interface CreateStyledComponentBaseThemeless { - < - StyleProps extends DistributiveOmit< - Overwrapped, - ReactClassPropKeys - > = DistributiveOmit, - Theme extends object = object - >( - ...styles: Array>> - ): StyledComponent; - < - StyleProps extends DistributiveOmit< - Overwrapped, - ReactClassPropKeys - > = DistributiveOmit, - Theme extends object = object - >( - template: TemplateStringsArray, - ...styles: Array>> - ): StyledComponent; -} - -interface CreateStyledComponentBaseThemed< - InnerProps, - ExtraProps, - StyledInstanceTheme extends object -> { - < - StyleProps extends DistributiveOmit< - Overwrapped, - ReactClassPropKeys - > = DistributiveOmit - >( - ...styles: Array>> - ): StyledComponent; - < - StyleProps extends DistributiveOmit< - Overwrapped, - ReactClassPropKeys - > = DistributiveOmit - >( - template: TemplateStringsArray, - ...styles: Array>> - ): StyledComponent; -} - -type CreateStyledComponentBase = - // this "reversed" condition checks if StyledInstanceTheme was already parametrized when using CreateStyled - object extends StyledInstanceTheme - ? CreateStyledComponentBaseThemeless - : CreateStyledComponentBaseThemed; - -type CreateStyledComponentIntrinsic = - CreateStyledComponentBase; -type CreateStyledComponentExtrinsic< - Tag extends React.ComponentType, - ExtraProps, - Theme extends object -> = CreateStyledComponentBase, ExtraProps, Theme>; - -interface StyledTags { - /** - * @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 { - , ExtraProps = {}>( - tag: Tag, - options?: StyledOptions - ): CreateStyledComponentExtrinsic; - - ( - tag: Tag, - options?: StyledOptions - ): CreateStyledComponentIntrinsic; -} - -export interface CreateStyled - extends BaseCreateStyled, - StyledTags {} diff --git a/lib/theming/src/index.ts b/lib/theming/src/index.ts index ccb338d0cc2..1bd300bac7d 100644 --- a/lib/theming/src/index.ts +++ b/lib/theming/src/index.ts @@ -1,29 +1,23 @@ // eslint-disable-next-line @typescript-eslint/triple-slash-reference /// -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; -export const withTheme = emotionReact.withTheme as >( - component: C -) => React.FC, 'theme'>>; - -export const Global = emotionReact.Global as (props: { - styles: emotionReact.Interpolation; -}) => React.ReactElement; - -export const styled = emotionStyled as CreateStyled; - export * from './base'; export * from './types'; From 2e1485631b92cd70ecae901e06036a67b836064a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 29 Jun 2022 10:06:39 +0200 Subject: [PATCH 02/10] use TSup for lib/theming --- lib/theming/package.json | 23 ++++++++++++++++++----- yarn.lock | 1 + 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/lib/theming/package.json b/lib/theming/package.json index 2bbde430db9..01621f8ddf7 100644 --- a/lib/theming/package.json +++ b/lib/theming/package.json @@ -20,9 +20,17 @@ }, "license": "MIT", "sideEffects": false, - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", - "types": "dist/types/index.d.ts", + "exports": { + ".": { + "require": "./dist/index.js", + "import": "./dist/index.mjs", + "types": "./dist/index.d.ts" + }, + "./package.json": "./package.json" + }, + "main": "dist/index.js", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", "files": [ "dist/**/*", "README.md", @@ -30,7 +38,7 @@ "*.d.ts" ], "scripts": { - "prepare": "ts-node ../../scripts/prebundle.ts" + "prepare": "esrun ../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "7.0.0-alpha.6", @@ -38,6 +46,7 @@ "memoizerific": "^1.11.3" }, "devDependencies": { + "@digitak/esrun": "^3.2.2", "@emotion/cache": "^11.7.1", "@emotion/is-prop-valid": "^1.1.2", "@emotion/react": "^11.8.1", @@ -56,6 +65,10 @@ "publishConfig": { "access": "public" }, - "bundlerEntrypoint": "./src/index.ts", + "bundler": { + "entries": [ + "./src/index.ts" + ] + }, "gitHead": "a88dcca40ba169a373bad33dd76e9a4bd4f1f5ec" } diff --git a/yarn.lock b/yarn.lock index d49322ea530..de8a318eb94 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9619,6 +9619,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/theming@workspace:lib/theming" dependencies: + "@digitak/esrun": ^3.2.2 "@emotion/cache": ^11.7.1 "@emotion/is-prop-valid": ^1.1.2 "@emotion/react": ^11.8.1 From 0cd2e35f7d4a4fc9f3e655ed63f9405103af28a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Mon, 4 Jul 2022 12:25:43 +0200 Subject: [PATCH 03/10] Make Emotion's `Theme` augmentation work in prod and dev --- lib/blocks/src/components/DocsPage.tsx | 12 ++++++------ lib/theming/src/convert.ts | 5 ++--- lib/theming/src/emotionAugmentation.d.ts | 9 +++++++++ lib/theming/src/ensure.ts | 4 ++-- lib/theming/src/index.ts | 2 ++ lib/theming/src/types.ts | 2 +- scripts/prepare/bundle.ts | 10 +++++++++- 7 files changed, 31 insertions(+), 13 deletions(-) create mode 100644 lib/theming/src/emotionAugmentation.d.ts diff --git a/lib/blocks/src/components/DocsPage.tsx b/lib/blocks/src/components/DocsPage.tsx index f7e66ac3617..1a476312f95 100644 --- a/lib/blocks/src/components/DocsPage.tsx +++ b/lib/blocks/src/components/DocsPage.tsx @@ -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', diff --git a/lib/theming/src/convert.ts b/lib/theming/src/convert.ts index 4fed4cc6aa9..1c3b19575ef 100644 --- a/lib/theming/src/convert.ts +++ b/lib/theming/src/convert.ts @@ -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, diff --git a/lib/theming/src/emotionAugmentation.d.ts b/lib/theming/src/emotionAugmentation.d.ts new file mode 100644 index 00000000000..1a48313f84e --- /dev/null +++ b/lib/theming/src/emotionAugmentation.d.ts @@ -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 {} +} diff --git a/lib/theming/src/ensure.ts b/lib/theming/src/ensure.ts index b2e6cefe535..9c827608e92 100644 --- a/lib/theming/src/ensure.ts +++ b/lib/theming/src/ensure.ts @@ -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); } diff --git a/lib/theming/src/index.ts b/lib/theming/src/index.ts index 1bd300bac7d..9fd7bec2514 100644 --- a/lib/theming/src/index.ts +++ b/lib/theming/src/index.ts @@ -1,5 +1,7 @@ // eslint-disable-next-line @typescript-eslint/triple-slash-reference /// +// eslint-disable-next-line @typescript-eslint/triple-slash-reference +/// export { default as styled } from '@emotion/styled'; diff --git a/lib/theming/src/types.ts b/lib/theming/src/types.ts index 5d4734934c9..7f886718ea2 100644 --- a/lib/theming/src/types.ts +++ b/lib/theming/src/types.ts @@ -56,7 +56,7 @@ export interface Brand { target: string | null | undefined; } -export interface Theme { +export interface StorybookTheme { color: Color; background: Background; typography: Typography; diff --git a/scripts/prepare/bundle.ts b/scripts/prepare/bundle.ts index 5a34916fb8e..e2442071842 100644 --- a/scripts/prepare/bundle.ts +++ b/scripts/prepare/bundle.ts @@ -13,6 +13,8 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { bundler: { entries, platform }, } = await fs.readJson(join(cwd, 'package.json')); + const isThemingPackage = name === '@storybook/theming'; + const reset = hasFlag(flags, 'reset'); const watch = hasFlag(flags, 'watch'); const optimized = hasFlag(flags, 'optimized'); @@ -30,7 +32,10 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { const pathName = join(process.cwd(), 'dist', `${name}.d.ts`); // throw new Error('test'); await fs.ensureFile(pathName); - await fs.writeFile(pathName, `export * from '../src/${name}';`); + const footer = isThemingPackage + ? `export { StorybookTheme as Theme } from '../src/${name}';\n` + : ''; + await fs.writeFile(pathName, `export * from '../src/${name}';\n${footer}`); }) ); } @@ -59,6 +64,9 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { ? { entry: entries, resolve: true, + footer: isThemingPackage + ? `interface Theme extends StorybookTheme {};\nexport type { Theme };` + : '', } : false, esbuildOptions: (c) => { From 7340829baf578bb9cb60a747bfa2fe7bb9036a14 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 6 Jul 2022 16:54:18 +0200 Subject: [PATCH 04/10] a bunch of fixes --- addons/a11y/src/components/Report/Item.tsx | 3 +-- .../src/components/ActionLogger/index.tsx | 9 +++++---- .../src/components/Interaction.tsx | 8 ++++---- addons/jest/src/components/Panel.tsx | 13 +++++++++---- addons/jest/src/components/Result.tsx | 3 +-- addons/jest/src/hoc/provideJestResult.tsx | 2 ++ lib/blocks/src/components/Source.tsx | 6 ++++-- lib/blocks/src/controls/Object.tsx | 10 ++++++++-- lib/components/src/bar/bar.tsx | 9 +++++---- .../syntaxhighlighter/syntaxhighlighter.tsx | 18 +++++++++++++++--- 10 files changed, 54 insertions(+), 27 deletions(-) diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx index d00cffda1ce..bfa9ab768bb 100644 --- a/addons/a11y/src/components/Report/Item.tsx +++ b/addons/a11y/src/components/Report/Item.tsx @@ -19,7 +19,7 @@ const Wrapper = styled.div<{}>(({ theme }) => ({ }, })); -const Icon = styled(Icons)(({ theme }) => ({ +const Icon = styled(Icons)(({ theme }) => ({ height: 10, width: 10, minWidth: 10, @@ -76,7 +76,6 @@ export const Item = (props: ItemProps) => { onToggle(!open)} role="button"> ( +const UnstyledWrapped: FC<{ className?: string }> = ({ children, className }) => ( {children} -))({ +); +export const Wrapper = styled(UnstyledWrapped)({ margin: 0, padding: '10px 5px 20px', }); @@ -36,7 +37,7 @@ interface ActionLoggerProps { export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => ( - + {actions.map((action: ActionDisplay) => ( {action.count > 1 && {action.count}} diff --git a/addons/interactions/src/components/Interaction.tsx b/addons/interactions/src/components/Interaction.tsx index 609aa3e1856..92a60d4fa99 100644 --- 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 & { call: Call } ->(({ theme, disabled, call }) => ({ +const RowLabel = styled('button', { + shouldForwardProp: (prop) => !['call'].includes(prop.toString()), +}) & { call: Call }>(({ theme, disabled, call }) => ({ flex: 1, display: 'grid', background: 'none', diff --git a/addons/jest/src/components/Panel.tsx b/addons/jest/src/components/Panel.tsx index e548819d64d..6bc218c88f4 100644 --- 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 }) => (
{width > 325 && result.assertionResults ? ( @@ -57,7 +61,8 @@ const SuiteTotals = styled(({ result, className, width }) => ( ) : null}
-))(({ 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 index 6313e2d41ca..1a82ed14b16 100644 --- 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(Icons)(({ theme }) => ({ +const Icon = styled(Icons)(({ theme }) => ({ height: 10, width: 10, minWidth: 10, @@ -66,7 +66,6 @@ export function Result(props: ResultProps) { {status === `failed` ? ( (({ theme }) => ({ +const StyledSyntaxHighlighter: FC> = styled( + SyntaxHighlighter +)(({ theme }) => ({ // DocBlocks-specific styling and overrides fontSize: `${theme.typography.size.s2 - 1}px`, lineHeight: '19px', diff --git a/lib/blocks/src/controls/Object.tsx b/lib/blocks/src/controls/Object.tsx index 747fc8600d3..a8f731d420c 100644 --- a/lib/blocks/src/controls/Object.tsx +++ b/lib/blocks/src/controls/Object.tsx @@ -285,7 +285,7 @@ export const ObjectControl: FC = ({ name, value, onChange }) => { id={getControlId(name)} name={name} defaultValue={value === null ? '' : JSON.stringify(value, null, 2)} - onBlur={(event: FocusEvent) => updateRaw(event.target.value)} + onBlur={(event: FocusEvent) => updateRaw(event.target.value)} placeholder="Edit JSON string..." autoFocus={forceVisible} valid={parseError ? 'error' : null} @@ -295,7 +295,13 @@ export const ObjectControl: FC = ({ name, value, onChange }) => { return ( {['Object', 'Array'].includes(getObjectType(data)) && ( - setShowRaw((v) => !v)}> + { + e.preventDefault(); + setShowRaw((v) => !v); + }} + > RAW diff --git a/lib/components/src/bar/bar.tsx b/lib/components/src/bar/bar.tsx index 2aa51866c43..58061798fdf 100644 --- a/lib/components/src/bar/bar.tsx +++ b/lib/components/src/bar/bar.tsx @@ -1,4 +1,4 @@ -import React, { Children, FunctionComponent } from 'react'; +import React, { Children, ComponentProps, FC, FunctionComponent } from 'react'; import { styled } from '@storybook/theming'; import { ScrollArea } from '../ScrollArea/ScrollArea'; @@ -37,11 +37,12 @@ const Side = styled.div( ); Side.displayName = 'Side'; -export const Bar = styled(({ children, className }) => ( +const UnstyledBar: FC> = ({ children, className }) => ( {children} -))( +); +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`, diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx index ba338868ca4..2829c02c1d9 100644 --- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx +++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx @@ -1,4 +1,12 @@ -import React, { ClipboardEvent, FunctionComponent, MouseEvent, useCallback, useState } from 'react'; +import React, { + ClipboardEvent, + ComponentProps, + FC, + FunctionComponent, + MouseEvent, + useCallback, + useState, +} from 'react'; import { logger } from '@storybook/client-logger'; import { styled } from '@storybook/theming'; import global from 'global'; @@ -94,11 +102,15 @@ const Wrapper = styled.div( : {} ); -const Scroller = styled(({ children, className }) => ( +const UnstyledScroller: FC> = ({ + children, + className, +}): JSX.Element => ( {children} -))( +); +const Scroller = styled(UnstyledScroller)( { position: 'relative', }, From 068f2ff862b6416aa53154d40277b576e540aa12 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 6 Jul 2022 17:01:23 +0200 Subject: [PATCH 05/10] cleanup --- addons/a11y/src/components/A11YPanel.tsx | 10 +++++----- addons/a11y/src/components/Report/Elements.tsx | 2 +- addons/a11y/src/components/Report/Item.tsx | 4 ++-- addons/a11y/src/components/Report/Tags.tsx | 2 +- addons/a11y/src/components/Tabs.tsx | 4 ++-- addons/actions/src/components/ActionLogger/style.tsx | 2 +- addons/jest/src/components/Message.tsx | 4 ++-- addons/viewport/src/Tool.tsx | 4 ++-- examples/cra-ts-essentials/src/App.tsx | 4 ++-- lib/blocks/src/blocks/SourceContainer.tsx | 2 +- lib/blocks/src/components/ArgsTable/ArgValue.tsx | 4 ++-- lib/blocks/src/components/ArgsTable/SectionRow.tsx | 12 ++++++------ lib/blocks/src/components/EmptyBlock.tsx | 2 +- lib/blocks/src/components/Preview.tsx | 2 +- lib/blocks/src/components/Source.tsx | 4 ++-- lib/blocks/src/components/Title.tsx | 2 +- lib/blocks/src/components/Typeset.tsx | 4 ++-- lib/components/src/ActionBar/ActionBar.tsx | 2 +- lib/components/src/brand/StorybookIcon.tsx | 4 ++-- lib/components/src/form/field/field.tsx | 4 ++-- lib/components/src/tooltip/TooltipLinkList.tsx | 2 +- lib/components/src/typography/DocumentWrapper.tsx | 2 +- lib/components/src/typography/ResetWrapper.tsx | 2 +- lib/components/src/typography/elements/Code.tsx | 2 +- lib/ui/src/containers/sidebar.tsx | 4 ++-- lib/ui/src/settings/about_page.tsx | 4 ++-- lib/ui/src/settings/release_notes_page.tsx | 4 ++-- lib/ui/src/settings/shortcuts_page.tsx | 4 ++-- .../__testfixtures__/9493-ts-display-name/input.tsx | 2 +- 29 files changed, 52 insertions(+), 52 deletions(-) diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx index 41173cb2afa..82415c4bb82 100644 --- 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 index b307ddab62d..4ddad41f776 100644 --- a/addons/a11y/src/components/Report/Elements.tsx +++ b/addons/a11y/src/components/Report/Elements.tsx @@ -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', diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx index bfa9ab768bb..3861e946540 100644 --- 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}`, @@ -30,7 +30,7 @@ const Icon = styled(Icons)(({ theme }) => ({ display: 'inline-flex', })); -const HeaderBar = styled.div<{}>(({ theme }) => ({ +const HeaderBar = styled.div(({ theme }) => ({ padding: theme.layoutMargin, paddingLeft: theme.layoutMargin - 3, lineHeight: '20px', diff --git a/addons/a11y/src/components/Report/Tags.tsx b/addons/a11y/src/components/Report/Tags.tsx index 1c26cd302f4..41544c5b335 100644 --- a/addons/a11y/src/components/Report/Tags.tsx +++ b/addons/a11y/src/components/Report/Tags.tsx @@ -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}`, diff --git a/addons/a11y/src/components/Tabs.tsx b/addons/a11y/src/components/Tabs.tsx index 952d1665b36..800c4e26396 100644 --- 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/style.tsx b/addons/actions/src/components/ActionLogger/style.tsx index 4ffe870286c..76c00e73bcf 100644 --- 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/jest/src/components/Message.tsx b/addons/jest/src/components/Message.tsx index d58451260d0..3c3c22be36e 100644 --- a/addons/jest/src/components/Message.tsx +++ b/addons/jest/src/components/Message.tsx @@ -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, diff --git a/addons/viewport/src/Tool.tsx b/addons/viewport/src/Tool.tsx index 63051a192d7..983aef8695c 100644 --- a/addons/viewport/src/Tool.tsx +++ b/addons/viewport/src/Tool.tsx @@ -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, })); diff --git a/examples/cra-ts-essentials/src/App.tsx b/examples/cra-ts-essentials/src/App.tsx index c512fb7a779..4e0202db6ff 100644 --- a/examples/cra-ts-essentials/src/App.tsx +++ b/examples/cra-ts-essentials/src/App.tsx @@ -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 (
diff --git a/lib/blocks/src/blocks/SourceContainer.tsx b/lib/blocks/src/blocks/SourceContainer.tsx index 974a52f9e7a..e66c6c768ad 100644 --- a/lib/blocks/src/blocks/SourceContainer.tsx +++ b/lib/blocks/src/blocks/SourceContainer.tsx @@ -20,7 +20,7 @@ export interface SourceContextProps { export const SourceContext: Context = createContext({ sources: {} }); -export const SourceContainer: FC<{}> = ({ children }) => { +export const SourceContainer: FC = ({ children }) => { const [sources, setSources] = useState({}); const channel = addons.getChannel(); diff --git a/lib/blocks/src/components/ArgsTable/ArgValue.tsx b/lib/blocks/src/components/ArgsTable/ArgValue.tsx index cdd5ef44385..3ef0afc8302 100644 --- a/lib/blocks/src/components/ArgsTable/ArgValue.tsx +++ b/lib/blocks/src/components/ArgsTable/ArgValue.tsx @@ -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 diff --git a/lib/blocks/src/components/ArgsTable/SectionRow.tsx b/lib/blocks/src/components/ArgsTable/SectionRow.tsx index 3a7a1c65063..9b6b0f48a17 100644 --- a/lib/blocks/src/components/ArgsTable/SectionRow.tsx +++ b/lib/blocks/src/components/ArgsTable/SectionRow.tsx @@ -26,13 +26,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', @@ -48,18 +48,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`, @@ -67,7 +67,7 @@ const StyledTr = styled.tr<{}>(({ theme }) => ({ }, })); -const ClickIntercept = styled.button<{}>(() => ({ +const ClickIntercept = styled.button(() => ({ // reset button style background: 'none', border: 'none', diff --git a/lib/blocks/src/components/EmptyBlock.tsx b/lib/blocks/src/components/EmptyBlock.tsx index 0cf32de5e99..41e84c48070 100644 --- a/lib/blocks/src/components/EmptyBlock.tsx +++ b/lib/blocks/src/components/EmptyBlock.tsx @@ -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}`, diff --git a/lib/blocks/src/components/Preview.tsx b/lib/blocks/src/components/Preview.tsx index 21edc8ffc75..b43ea034f4c 100644 --- a/lib/blocks/src/components/Preview.tsx +++ b/lib/blocks/src/components/Preview.tsx @@ -77,7 +77,7 @@ const ChildrenContainer = styled.div( : {} ); -const StyledSource = styled(Source)<{}>(({ theme }) => ({ +const StyledSource = styled(Source)(({ theme }) => ({ margin: 0, borderTopLeftRadius: 0, borderTopRightRadius: 0, diff --git a/lib/blocks/src/components/Source.tsx b/lib/blocks/src/components/Source.tsx index bd94c3df8f4..1692e82e917 100644 --- a/lib/blocks/src/components/Source.tsx +++ b/lib/blocks/src/components/Source.tsx @@ -37,7 +37,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}`, @@ -47,7 +47,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, diff --git a/lib/blocks/src/components/Title.tsx b/lib/blocks/src/components/Title.tsx index 39353069898..088ac09401c 100644 --- a/lib/blocks/src/components/Title.tsx +++ b/lib/blocks/src/components/Title.tsx @@ -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, diff --git a/lib/blocks/src/components/Typeset.tsx b/lib/blocks/src/components/Typeset.tsx index 121da8d1c76..dcb5d1dd08f 100644 --- a/lib/blocks/src/components/Typeset.tsx +++ b/lib/blocks/src/components/Typeset.tsx @@ -4,7 +4,7 @@ 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', diff --git a/lib/components/src/ActionBar/ActionBar.tsx b/lib/components/src/ActionBar/ActionBar.tsx index 5dd7d0206ed..b2fbceb1eca 100644 --- a/lib/components/src/ActionBar/ActionBar.tsx +++ b/lib/components/src/ActionBar/ActionBar.tsx @@ -2,7 +2,7 @@ import React, { FunctionComponent, MouseEvent } from 'react'; import { styled } from '@storybook/theming'; -const Container = styled.div<{}>(({ theme }) => ({ +const Container = styled.div(({ theme }) => ({ position: 'absolute', bottom: 0, right: 0, diff --git a/lib/components/src/brand/StorybookIcon.tsx b/lib/components/src/brand/StorybookIcon.tsx index 1f35e0adce4..039666428ba 100644 --- a/lib/components/src/brand/StorybookIcon.tsx +++ b/lib/components/src/brand/StorybookIcon.tsx @@ -1,6 +1,6 @@ -import React, { FunctionComponent } from 'react'; +import React, { FC } from 'react'; -export const StorybookIcon: FunctionComponent<{}> = ({ ...props }) => ( +export const StorybookIcon: FC = ({ ...props }) => ( Storybook icon diff --git a/lib/components/src/form/field/field.tsx b/lib/components/src/form/field/field.tsx index 10cf3507a93..1a45e3bb8a9 100644 --- a/lib/components/src/form/field/field.tsx +++ b/lib/components/src/form/field/field.tsx @@ -1,7 +1,7 @@ import React, { FunctionComponent, 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, diff --git a/lib/components/src/tooltip/TooltipLinkList.tsx b/lib/components/src/tooltip/TooltipLinkList.tsx index 2096e42a4bc..ff944664fc8 100644 --- a/lib/components/src/tooltip/TooltipLinkList.tsx +++ b/lib/components/src/tooltip/TooltipLinkList.tsx @@ -3,7 +3,7 @@ import { styled } from '@storybook/theming'; import ListItem, { LinkWrapperType, ListItemProps } from './ListItem'; -const List = styled.div<{}>( +const List = styled.div( { minWidth: 180, overflow: 'hidden', diff --git a/lib/components/src/typography/DocumentWrapper.tsx b/lib/components/src/typography/DocumentWrapper.tsx index 5b9780d9b9d..f69fdc268c8 100644 --- a/lib/components/src/typography/DocumentWrapper.tsx +++ b/lib/components/src/typography/DocumentWrapper.tsx @@ -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', diff --git a/lib/components/src/typography/ResetWrapper.tsx b/lib/components/src/typography/ResetWrapper.tsx index 84432f4f453..4d06195ae3f 100644 --- a/lib/components/src/typography/ResetWrapper.tsx +++ b/lib/components/src/typography/ResetWrapper.tsx @@ -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); diff --git a/lib/components/src/typography/elements/Code.tsx b/lib/components/src/typography/elements/Code.tsx index 382c6a7c8cc..dfbebe73a24 100644 --- a/lib/components/src/typography/elements/Code.tsx +++ b/lib/components/src/typography/elements/Code.tsx @@ -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', diff --git a/lib/ui/src/containers/sidebar.tsx b/lib/ui/src/containers/sidebar.tsx index 44c094d9d8c..67ea6aef39b 100755 --- a/lib/ui/src/containers/sidebar.tsx +++ b/lib/ui/src/containers/sidebar.tsx @@ -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 }, diff --git a/lib/ui/src/settings/about_page.tsx b/lib/ui/src/settings/about_page.tsx index d4eb96a2dc9..83459fc8df8 100644 --- a/lib/ui/src/settings/about_page.tsx +++ b/lib/ui/src/settings/about_page.tsx @@ -1,4 +1,4 @@ -import React, { Component, FunctionComponent } from 'react'; +import React, { Component, FC } from 'react'; import { API, useStorybookApi } from '@storybook/api'; @@ -17,7 +17,7 @@ class NotificationClearer extends Component<{ api: API; notificationId: string } } } -const AboutPage: FunctionComponent<{}> = () => { +const AboutPage: FC = () => { const api = useStorybookApi(); return ( diff --git a/lib/ui/src/settings/release_notes_page.tsx b/lib/ui/src/settings/release_notes_page.tsx index d7b6e603d8b..fb33a4c632c 100644 --- a/lib/ui/src/settings/release_notes_page.tsx +++ b/lib/ui/src/settings/release_notes_page.tsx @@ -1,9 +1,9 @@ import { useStorybookApi } from '@storybook/api'; -import React, { FunctionComponent, useEffect } from 'react'; +import React, { FC, useEffect } from 'react'; import { ReleaseNotesScreen } from './release_notes'; -const ReleaseNotesPage: FunctionComponent<{}> = () => { +const ReleaseNotesPage: FC = () => { const api = useStorybookApi(); useEffect(() => { diff --git a/lib/ui/src/settings/shortcuts_page.tsx b/lib/ui/src/settings/shortcuts_page.tsx index 879bdaec8f1..72a269f5568 100644 --- a/lib/ui/src/settings/shortcuts_page.tsx +++ b/lib/ui/src/settings/shortcuts_page.tsx @@ -1,10 +1,10 @@ -import React, { FunctionComponent } from 'react'; +import React, { FC } from 'react'; import { Consumer } from '@storybook/api'; import { ShortcutsScreen } from './shortcuts'; -const ShortcutsPage: FunctionComponent<{}> = () => ( +const ShortcutsPage: FC = () => ( {({ api: { diff --git a/renderers/react/src/docs/__testfixtures__/9493-ts-display-name/input.tsx b/renderers/react/src/docs/__testfixtures__/9493-ts-display-name/input.tsx index 57155c79016..e2e45016fd5 100644 --- a/renderers/react/src/docs/__testfixtures__/9493-ts-display-name/input.tsx +++ b/renderers/react/src/docs/__testfixtures__/9493-ts-display-name/input.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import React from 'react'; -const Wrapper = styled('div')<{}>(({ theme }) => ({ +const Wrapper = styled('div')(({ theme }) => ({ backgroundColor: 'tomato', color: 'white', padding: 10, From 590cc505c47d73e14dacd4b6116d52c52bd883c6 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 6 Jul 2022 17:01:39 +0200 Subject: [PATCH 06/10] cleanup --- .../a11y/src/components/Report/Elements.tsx | 6 +- addons/a11y/src/components/Report/Info.tsx | 4 +- addons/a11y/src/components/Report/Rules.tsx | 6 +- addons/a11y/src/components/Report/Tags.tsx | 4 +- addons/a11y/src/components/Report/index.tsx | 4 +- .../src/containers/BackgroundSelector.tsx | 4 +- .../src/containers/GridSelector.tsx | 4 +- addons/jest/src/components/Message.tsx | 4 +- addons/viewport/src/Tool.tsx | 4 +- examples/cra-ts-kitchen-sink/src/App.tsx | 4 +- .../src/components/Button.tsx | 4 +- .../src/stories/Button.tsx | 4 +- .../src/stories/docgen-tests/DocgenTS.tsx | 4 +- .../components/TsButton.tsx | 4 +- lib/api/src/index.tsx | 8 +- lib/blocks/src/blocks/Description.tsx | 4 +- lib/blocks/src/blocks/DocsContainer.tsx | 4 +- lib/blocks/src/blocks/DocsStory.tsx | 4 +- lib/blocks/src/blocks/Heading.tsx | 4 +- lib/blocks/src/blocks/Stories.tsx | 4 +- lib/blocks/src/blocks/Story.tsx | 4 +- lib/blocks/src/blocks/Subheading.tsx | 4 +- lib/blocks/src/blocks/Subtitle.tsx | 4 +- lib/blocks/src/blocks/Title.tsx | 4 +- lib/blocks/src/blocks/Wrapper.tsx | 4 +- lib/blocks/src/components/ColorPalette.tsx | 6 +- lib/blocks/src/components/Description.tsx | 4 +- lib/blocks/src/components/IconGallery.tsx | 6 +- lib/blocks/src/components/Preview.tsx | 4 +- lib/blocks/src/components/Source.tsx | 4 +- lib/blocks/src/components/Story.tsx | 8 +- lib/blocks/src/components/Toolbar.tsx | 8 +- lib/blocks/src/components/Typeset.tsx | 4 +- lib/blocks/src/controls/Files.tsx | 4 +- lib/components/src/ActionBar/ActionBar.tsx | 4 +- lib/components/src/Badge/Badge.tsx | 4 +- lib/components/src/Button/Button.tsx | 4 +- lib/components/src/Loader/Loader.tsx | 92 ++++++++++--------- lib/components/src/ScrollArea/ScrollArea.tsx | 6 +- lib/components/src/bar/bar.tsx | 8 +- lib/components/src/brand/StorybookLogo.tsx | 4 +- lib/components/src/form/field/field.tsx | 4 +- lib/components/src/form/input/input.tsx | 4 +- .../src/placeholder/placeholder.tsx | 4 +- lib/components/src/spaced/Spaced.tsx | 4 +- .../syntaxhighlighter/syntaxhighlighter.tsx | 3 +- lib/components/src/tabs/tabs.tsx | 6 +- lib/components/src/tooltip/ListItem.tsx | 6 +- lib/components/src/tooltip/Tooltip.tsx | 4 +- .../src/tooltip/TooltipLinkList.tsx | 9 +- lib/components/src/tooltip/TooltipMessage.tsx | 4 +- lib/components/src/tooltip/TooltipNote.tsx | 4 +- lib/components/src/tooltip/WithTooltip.tsx | 6 +- .../src/typography/elements/Link.tsx | 4 +- lib/components/src/typography/link/link.tsx | 4 +- lib/ui/src/app.tsx | 4 +- lib/ui/src/components/layout/app.mockdata.tsx | 10 +- lib/ui/src/components/layout/container.tsx | 10 +- lib/ui/src/components/layout/desktop.tsx | 4 +- lib/ui/src/components/layout/mobile.tsx | 8 +- .../notifications/NotificationItem.tsx | 8 +- .../notifications/NotificationList.tsx | 4 +- .../src/components/preview/FramesRenderer.tsx | 4 +- lib/ui/src/components/preview/toolbar.tsx | 6 +- lib/ui/src/components/preview/utils/types.tsx | 4 +- lib/ui/src/components/preview/wrappers.tsx | 4 +- lib/ui/src/components/sidebar/Explorer.tsx | 4 +- lib/ui/src/components/sidebar/Heading.tsx | 4 +- .../components/sidebar/HighlightStyles.tsx | 4 +- lib/ui/src/components/sidebar/Loader.tsx | 4 +- lib/ui/src/components/sidebar/Menu.tsx | 8 +- lib/ui/src/components/sidebar/RefBlocks.tsx | 15 ++- .../src/components/sidebar/RefIndicator.tsx | 16 ++-- lib/ui/src/components/sidebar/Refs.tsx | 11 +-- .../src/components/sidebar/SearchResults.tsx | 14 +-- lib/ui/src/components/sidebar/Sidebar.tsx | 4 +- lib/ui/src/components/sidebar/TreeNode.tsx | 10 +- lib/ui/src/containers/menu.tsx | 4 +- lib/ui/src/containers/notifications.tsx | 4 +- lib/ui/src/containers/panel.tsx | 4 +- lib/ui/src/index.tsx | 4 +- lib/ui/src/settings/SettingsFooter.tsx | 4 +- lib/ui/src/settings/about.tsx | 4 +- lib/ui/src/settings/index.tsx | 6 +- lib/ui/src/settings/release_notes.tsx | 12 +-- .../9922-ts-component-props/input.tsx | 9 +- .../react/src/docs/jsxDecorator.test.tsx | 4 +- renderers/react/src/render.tsx | 10 +- 88 files changed, 270 insertions(+), 299 deletions(-) diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx index 4ddad41f776..56955c5b09c 100644 --- 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'; @@ -35,7 +35,7 @@ interface ElementProps { type: RuleType; } -const Element: FunctionComponent = ({ element, type }) => { +const Element: FC = ({ 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 = ({ elements, type }) => ( +export const Elements: FC = ({ elements, type }) => (
    {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 index 0a8434e96db..b3ca3385ed4 100644 --- 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 = ({ item }) => { +export const Info: FC = ({ item }) => { return ( {item.description} diff --git a/addons/a11y/src/components/Report/Rules.tsx b/addons/a11y/src/components/Report/Rules.tsx index 1243027a29a..d8340ab99b9 100644 --- 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 = ({ rule }) => { +const Rule: FC = ({ rule }) => { let badgeType: any = null; switch (rule.impact) { case ImpactValue.CRITICAL: @@ -85,7 +85,7 @@ interface RulesProps { rules: CheckResult[]; } -export const Rules: FunctionComponent = ({ rules }) => { +export const Rules: FC = ({ rules }) => { return ( {rules.map((rule, index) => ( diff --git a/addons/a11y/src/components/Report/Tags.tsx b/addons/a11y/src/components/Report/Tags.tsx index 41544c5b335..d62de19a8ff 100644 --- 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'; @@ -20,7 +20,7 @@ interface TagsProps { tags: TagValue[]; } -export const Tags: FunctionComponent = ({ tags }) => { +export const Tags: FC = ({ tags }) => { return ( {tags.map((tag) => ( diff --git a/addons/a11y/src/components/Report/index.tsx b/addons/a11y/src/components/Report/index.tsx index 849c9f7a4f8..5b2969f0fa3 100644 --- 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 = ({ items, empty, type }) => ( +export const Report: FC = ({ items, empty, type }) => ( {items && items.length ? ( items.map((item) => ) diff --git a/addons/backgrounds/src/containers/BackgroundSelector.tsx b/addons/backgrounds/src/containers/BackgroundSelector.tsx index 269b7fed32a..9b2514f9b0d 100644 --- 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( BACKGROUNDS_PARAM_KEY, DEFAULT_BACKGROUNDS_CONFIG diff --git a/addons/backgrounds/src/containers/GridSelector.tsx b/addons/backgrounds/src/containers/GridSelector.tsx index 5ab21e54ffc..3180d8dc074 100644 --- 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/jest/src/components/Message.tsx b/addons/jest/src/components/Message.tsx index 3c3c22be36e..46285babfe2 100644 --- 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/; @@ -136,7 +136,7 @@ interface MessageProps { msg: string; } -export const Message: FunctionComponent = (props) => { +export const Message: FC = (props) => { const { msg } = props; const detail: TestDetail = getTestDetail(msg); diff --git a/addons/viewport/src/Tool.tsx b/addons/viewport/src/Tool.tsx index 983aef8695c..cffa249cfbd 100644 --- a/addons/viewport/src/Tool.tsx +++ b/addons/viewport/src/Tool.tsx @@ -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'; @@ -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, diff --git a/examples/cra-ts-kitchen-sink/src/App.tsx b/examples/cra-ts-kitchen-sink/src/App.tsx index a8520a8ccee..4e0202db6ff 100644 --- a/examples/cra-ts-kitchen-sink/src/App.tsx +++ b/examples/cra-ts-kitchen-sink/src/App.tsx @@ -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 (
    diff --git a/examples/cra-ts-kitchen-sink/src/components/Button.tsx b/examples/cra-ts-kitchen-sink/src/components/Button.tsx index 539f5e5fe84..d1ede0a9572 100644 --- a/examples/cra-ts-kitchen-sink/src/components/Button.tsx +++ b/examples/cra-ts-kitchen-sink/src/components/Button.tsx @@ -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 = ({ children, type = 'default', onClick }) => { +const Button: FC = ({ children, type = 'default', onClick }) => { return ( diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/DocgenTS.tsx b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/DocgenTS.tsx index ea5f10f0f10..bd187c07e5d 100644 --- a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/DocgenTS.tsx +++ b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/DocgenTS.tsx @@ -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 = ({ onClick, children }) => ( +export const ButtonFunctionComponent: FC = ({ onClick, children }) => ( ); ButtonFunctionComponent.defaultProps = { diff --git a/examples/official-storybook/components/TsButton.tsx b/examples/official-storybook/components/TsButton.tsx index 0d3f77ead09..d9ca92f5925 100644 --- a/examples/official-storybook/components/TsButton.tsx +++ b/examples/official-storybook/components/TsButton.tsx @@ -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 = ({ children, type = 'default', onClick }) => { +const Button: FC = ({ children, type = 'default', onClick }) => { return ( @@ -11,10 +11,7 @@ type WrappedProps = { spacing: number; } & ComponentProps; -const WrappedButton: FunctionComponent = ({ - spacing, - ...buttonProps -}: WrappedProps) => ( +const WrappedButton: FC = ({ spacing, ...buttonProps }: WrappedProps) => (
    diff --git a/renderers/react/src/docs/jsxDecorator.test.tsx b/renderers/react/src/docs/jsxDecorator.test.tsx index 269c913da11..6089148f988 100644 --- a/renderers/react/src/docs/jsxDecorator.test.tsx +++ b/renderers/react/src/docs/jsxDecorator.test.tsx @@ -39,8 +39,8 @@ describe('renderJsx', () => { `); }); it('null values', () => { - expect(renderJsx(
    hello
    , {})).toMatchInlineSnapshot(` -
    + expect(renderJsx(
    hello
    , {})).toMatchInlineSnapshot(` +
    hello
    `); diff --git a/renderers/react/src/render.tsx b/renderers/react/src/render.tsx index f5b2e0152dc..2bcad1628cc 100644 --- a/renderers/react/src/render.tsx +++ b/renderers/react/src/render.tsx @@ -1,13 +1,7 @@ // @ts-ignore import global from 'global'; -import React, { - Component as ReactComponent, - FunctionComponent, - ReactElement, - StrictMode, - Fragment, -} from 'react'; +import React, { Component as ReactComponent, FC, ReactElement, StrictMode, Fragment } from 'react'; import ReactDOM, { version as reactDomVersion } from 'react-dom'; import type { Root as ReactRoot } from 'react-dom/client'; @@ -126,7 +120,7 @@ export async function renderToDOM( }: RenderContext, domElement: Element ) { - const Story = unboundStoryFn as FunctionComponent>; + const Story = unboundStoryFn as FC>; const content = ( From 23e5c2e2129bab25e6c23446871dad6ec266c75d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 6 Jul 2022 17:14:27 +0200 Subject: [PATCH 07/10] cleanup --- lib/ui/src/components/sidebar/Menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ui/src/components/sidebar/Menu.tsx b/lib/ui/src/components/sidebar/Menu.tsx index fb1cd8ee38a..1096620ef8e 100644 --- a/lib/ui/src/components/sidebar/Menu.tsx +++ b/lib/ui/src/components/sidebar/Menu.tsx @@ -1,4 +1,4 @@ -import React, { FC, 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'; From 78a5355affff8b01b89fe0e90046d5ba21ea93a5 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 19 Jul 2022 10:10:46 +0200 Subject: [PATCH 08/10] cleanup --- docs/snippets/common/custom-docs-page.ts-component.ts.mdx | 2 +- lib/blocks/src/components/Source.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/snippets/common/custom-docs-page.ts-component.ts.mdx b/docs/snippets/common/custom-docs-page.ts-component.ts.mdx index 5b8083b030d..54675c701d3 100644 --- a/docs/snippets/common/custom-docs-page.ts-component.ts.mdx +++ b/docs/snippets/common/custom-docs-page.ts-component.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -export const CustomDocumentationComponent: React.VFC<{}> = () => { +export const CustomDocumentationComponent: React.VFC = () => { return (

    Replacing DocsPage with a custom component

    diff --git a/lib/blocks/src/components/Source.tsx b/lib/blocks/src/components/Source.tsx index b36c5044659..4d1bad38c19 100644 --- a/lib/blocks/src/components/Source.tsx +++ b/lib/blocks/src/components/Source.tsx @@ -35,7 +35,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 +45,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, From f579da95747fc494a6c8dbdf1bac7e527ae2b62c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 19 Jul 2022 10:13:37 +0200 Subject: [PATCH 09/10] fix --- lib/blocks/src/components/Source.tsx | 30 ++++++++++++++++------------ 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/lib/blocks/src/components/Source.tsx b/lib/blocks/src/components/Source.tsx index 4d1bad38c19..a91f7e0a7fd 100644 --- a/lib/blocks/src/components/Source.tsx +++ b/lib/blocks/src/components/Source.tsx @@ -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.', From 55717129250b4765328666cfb1c11eede937414e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 19 Jul 2022 13:47:35 +0200 Subject: [PATCH 10/10] fix --- lib/blocks/src/controls/Object.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/blocks/src/controls/Object.tsx b/lib/blocks/src/controls/Object.tsx index 4583dbc59c9..9c6b1445c03 100644 --- a/lib/blocks/src/controls/Object.tsx +++ b/lib/blocks/src/controls/Object.tsx @@ -190,6 +190,7 @@ const RawButton = styled(IconButton)(({ theme }) => ({ color: theme.color.mediumdark, fontSize: '9px', fontWeight: 'bold', + textDecoration: 'none', span: { marginLeft: 3, marginTop: 1,