diff --git a/addons/a11y/src/components/Report/HighlightToggle.tsx b/addons/a11y/src/components/Report/HighlightToggle.tsx index 64c4d0cb7123..80ad7ed4654a 100644 --- a/addons/a11y/src/components/Report/HighlightToggle.tsx +++ b/addons/a11y/src/components/Report/HighlightToggle.tsx @@ -184,4 +184,7 @@ class HighlightToggle extends Component { } } -export default connect(mapStateToProps, mapDispatchToProps)(HighlightToggle); +export default connect( + mapStateToProps, + mapDispatchToProps +)(HighlightToggle); diff --git a/addons/contexts/src/manager/components/ToolBar.test.tsx b/addons/contexts/src/manager/components/ToolBar.test.tsx index 35caba83f2c6..b5a09c187e19 100644 --- a/addons/contexts/src/manager/components/ToolBar.test.tsx +++ b/addons/contexts/src/manager/components/ToolBar.test.tsx @@ -27,10 +27,7 @@ describe('Tests on addon-contexts component: ToolBar', () => { icon: 'box' as const, nodeId: 'Some Context B', options: { cancelable: true, deep: false, disable: false }, - params: [ - { name: 'Some Param X', props: {} }, - { name: 'Some Param Y', props: {} }, - ], + params: [{ name: 'Some Param X', props: {} }, { name: 'Some Param Y', props: {} }], title: 'Some Context B', }, ]; diff --git a/addons/contexts/src/manager/components/ToolBarControl.test.tsx b/addons/contexts/src/manager/components/ToolBarControl.test.tsx index 975f420dc27f..c0131fd4a47f 100644 --- a/addons/contexts/src/manager/components/ToolBarControl.test.tsx +++ b/addons/contexts/src/manager/components/ToolBarControl.test.tsx @@ -9,10 +9,7 @@ describe('Tests on addon-contexts component: ToolBarControl', () => { icon: 'box' as const, nodeId: 'Some Context', options: { cancelable: true, deep: false, disable: false }, - params: [ - { name: 'A', props: {} }, - { name: 'B', props: {} }, - ], + params: [{ name: 'A', props: {} }, { name: 'B', props: {} }], title: 'Some Context', selected: '', setSelected: jest.fn, diff --git a/app/polymer/package.json b/app/polymer/package.json index c3cc07f49742..7dcfa2a7374f 100644 --- a/app/polymer/package.json +++ b/app/polymer/package.json @@ -23,6 +23,7 @@ "*.d.ts" ], "main": "dist/client/index.js", + "types": "dist/client/index.d.ts", "bin": { "build-storybook": "./bin/build.js", "start-storybook": "./bin/index.js", @@ -32,6 +33,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { + "@storybook/addons": "5.3.7", "@storybook/core": "5.3.7", "@webcomponents/webcomponentsjs": "^1.2.0", "core-js": "^3.0.1", diff --git a/app/polymer/src/client/index.js b/app/polymer/src/client/index.ts similarity index 72% rename from app/polymer/src/client/index.js rename to app/polymer/src/client/index.ts index 8034a9d6433d..6f7331e5432e 100644 --- a/app/polymer/src/client/index.js +++ b/app/polymer/src/client/index.ts @@ -9,6 +9,8 @@ export { raw, } from './preview'; +// tsc wants to use NodeModule instead of WebpackModule +declare const module: any; if (module && module.hot && module.hot.decline) { module.hot.decline(); } diff --git a/app/polymer/src/client/preview/globals.js b/app/polymer/src/client/preview/globals.ts similarity index 100% rename from app/polymer/src/client/preview/globals.js rename to app/polymer/src/client/preview/globals.ts diff --git a/app/polymer/src/client/preview/index.js b/app/polymer/src/client/preview/index.ts similarity index 65% rename from app/polymer/src/client/preview/index.js rename to app/polymer/src/client/preview/index.ts index 8ccdb4865d0b..74737b5196b6 100644 --- a/app/polymer/src/client/preview/index.js +++ b/app/polymer/src/client/preview/index.ts @@ -15,7 +15,9 @@ export const { } = clientApi; const framework = 'polymer'; -export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework }); -export const configure = (...args) => coreConfigure(...args, framework); + +export const storiesOf = (...args: any[]) => + clientApi.storiesOf(...args).addParameters({ framework }); +export const configure = (...args: any[]) => coreConfigure(...args, framework); export { forceReRender }; diff --git a/app/polymer/src/client/preview/render.js b/app/polymer/src/client/preview/render.ts similarity index 95% rename from app/polymer/src/client/preview/render.js rename to app/polymer/src/client/preview/render.ts index b691510f0354..eb85797fdc65 100644 --- a/app/polymer/src/client/preview/render.js +++ b/app/polymer/src/client/preview/render.ts @@ -1,6 +1,7 @@ import { document } from 'global'; import dedent from 'ts-dedent'; import { render, TemplateResult } from 'lit-html'; +import { RenderMainArgs } from './types'; const rootElement = document.getElementById('root'); @@ -11,7 +12,7 @@ export default function renderMain({ showMain, showError, forceRender, -}) { +}: RenderMainArgs) { const element = storyFn(); if (!element) { diff --git a/app/polymer/src/client/preview/types.ts b/app/polymer/src/client/preview/types.ts new file mode 100644 index 000000000000..426412f402c8 --- /dev/null +++ b/app/polymer/src/client/preview/types.ts @@ -0,0 +1,28 @@ +import { TemplateResult } from 'lit-html'; + +export interface IStorybookSection { + kind: string; + stories: IStorybookStory[]; +} + +export interface IStorybookStory { + name: string; + render: () => any; +} + +export type StoryFnPolymerReturnType = string | Node | TemplateResult; + +export interface ShowErrorArgs { + title: string; + description: string; +} + +export interface RenderMainArgs { + storyFn: (...args: any[]) => StoryFnPolymerReturnType; + selectedKind: string; + selectedStory: string; + showMain: () => void; + showError: (args: ShowErrorArgs) => void; + showException: (err: Error) => void; + forceRender: boolean; +} diff --git a/app/polymer/src/server/build.js b/app/polymer/src/server/build.ts old mode 100755 new mode 100644 similarity index 100% rename from app/polymer/src/server/build.js rename to app/polymer/src/server/build.ts diff --git a/app/polymer/src/server/framework-preset-polymer.js b/app/polymer/src/server/framework-preset-polymer.ts similarity index 74% rename from app/polymer/src/server/framework-preset-polymer.js rename to app/polymer/src/server/framework-preset-polymer.ts index c1c615b7d114..c6433d55cb7a 100644 --- a/app/polymer/src/server/framework-preset-polymer.js +++ b/app/polymer/src/server/framework-preset-polymer.ts @@ -1,6 +1,6 @@ -import { IgnorePlugin } from 'webpack'; +import { Configuration, IgnorePlugin, RuleSetUseItem } from 'webpack'; -export function webpack(config) { +export function webpack(config: Configuration) { return { ...config, module: { @@ -10,7 +10,7 @@ export function webpack(config) { { test: /\.html$/, use: [ - ...config.module.rules[0].use, + ...(config.module.rules[0].use as RuleSetUseItem[]), { loader: require.resolve('polymer-webpack-loader'), options: { processStyleLinks: true }, diff --git a/app/polymer/src/server/index.js b/app/polymer/src/server/index.ts old mode 100755 new mode 100644 similarity index 100% rename from app/polymer/src/server/index.js rename to app/polymer/src/server/index.ts diff --git a/app/polymer/src/server/options.js b/app/polymer/src/server/options.ts similarity index 72% rename from app/polymer/src/server/options.js rename to app/polymer/src/server/options.ts index 7d832b7cebcc..714ea614c07c 100644 --- a/app/polymer/src/server/options.js +++ b/app/polymer/src/server/options.ts @@ -1,4 +1,4 @@ -import packageJson from '../../package.json'; +const packageJson = require('../../package.json'); export default { packageJson, diff --git a/app/polymer/src/typings.d.ts b/app/polymer/src/typings.d.ts new file mode 100644 index 000000000000..690e93343de2 --- /dev/null +++ b/app/polymer/src/typings.d.ts @@ -0,0 +1,5 @@ +declare module '@storybook/core/*'; +declare module 'global'; + +// will be provided by the webpack define plugin +declare var NODE_ENV: string | undefined; diff --git a/app/polymer/tsconfig.json b/app/polymer/tsconfig.json new file mode 100644 index 000000000000..015146b7a906 --- /dev/null +++ b/app/polymer/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": [] + }, + "include": [ + "src/**/*" + ] +} diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ts-types.tsx b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ts-types.tsx index ca1193f17044..c1d1467a9a91 100644 --- a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ts-types.tsx +++ b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ts-types.tsx @@ -128,5 +128,6 @@ interface TypeScriptHtmlComponentProps { text: string; } -export const TypeScriptHtmlComponent: FC & - TypeScriptHtmlComponentProps> = () =>
My HTML component
; +export const TypeScriptHtmlComponent: FC< + React.HTMLAttributes & TypeScriptHtmlComponentProps +> = () =>
My HTML component
; diff --git a/lib/components/src/tooltip/TooltipMessage.stories.tsx b/lib/components/src/tooltip/TooltipMessage.stories.tsx index 79e4589cab3e..747b4790d055 100644 --- a/lib/components/src/tooltip/TooltipMessage.stories.tsx +++ b/lib/components/src/tooltip/TooltipMessage.stories.tsx @@ -29,10 +29,7 @@ storiesOf('basics/Tooltip/TooltipMessage', module) )) .add('minimal message', () => ( diff --git a/lib/components/src/tooltip/WithTooltip.tsx b/lib/components/src/tooltip/WithTooltip.tsx index 950544c0b3d0..c9e21ebf04a4 100644 --- a/lib/components/src/tooltip/WithTooltip.tsx +++ b/lib/components/src/tooltip/WithTooltip.tsx @@ -100,9 +100,11 @@ WithTooltipPure.defaultProps = { tooltipShown: false, }; -const WithToolTipState: FunctionComponent = ({ startOpen, ...rest }) => { +const WithToolTipState: FunctionComponent< + WithTooltipPureProps & { + startOpen?: boolean; + } +> = ({ startOpen, ...rest }) => { const [tooltipShown, onVisibilityChange] = useState(startOpen || false); useEffect(() => {