diff --git a/types/storybook-readme/index.d.ts b/types/storybook-readme/index.d.ts index 9f27350175..a4333d1347 100644 --- a/types/storybook-readme/index.d.ts +++ b/types/storybook-readme/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for storybook-readme 4.0 +// Type definitions for storybook-readme 5.0 // Project: https://github.com/tuchk4/storybook-readme // Definitions by: Taeheon Kim // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped @@ -16,10 +16,12 @@ export type DecoratorPattern = ( export type HOCPattern = (story: RenderFunction) => Renderable | null; +export type MakeDecoratorResult = (...args: any) => any; + // Types added for v5 -export type addReadme = (decorator: DecoratorPattern) => React.ReactNode; -export type addFooter = (md: string) => void; -export type addHeader = (md: string) => void; +export const addReadme: MakeDecoratorResult +export function addFooter(md: string): void; +export function addHeader(md: string): void; export interface ICommonConfig { header: string; footer: string; @@ -29,7 +31,7 @@ export interface ICommonConfig { FooterPreview: (props: { children: React.ReactNode }) => React.ReactNode; } -export type ConfigureReadme = (config: ICommonConfig) => void; +export function configureReadme(config: ICommonConfig): void; // !~~~~~ Belows are for backwardCompatibility with v4 ~~~~~! // WithReadme Types diff --git a/types/storybook-readme/storybook-readme-tests.tsx b/types/storybook-readme/storybook-readme-tests.tsx index 57ee811cae..95ce086d08 100644 --- a/types/storybook-readme/storybook-readme-tests.tsx +++ b/types/storybook-readme/storybook-readme-tests.tsx @@ -1,6 +1,6 @@ import * as React from "react"; -import { storiesOf } from "@storybook/react"; -import { withDocs, withReadme, doc } from "storybook-readme"; +import { storiesOf, addDecorator } from "@storybook/react"; +import { withDocs, withReadme, doc, addReadme, configureReadme, addFooter, addHeader } from "storybook-readme"; import Marked from "storybook-readme/components/Marked"; // Possibly any .md files or strings @@ -16,6 +16,30 @@ A very simple component with markdown // Here are the examples for a type compatibility. Please look https://github.com/tuchk4/storybook-readme for actual usages +// Tests for v5 +addDecorator(addReadme) +storiesOf('addParameter Example', module) + .addParameters({ + readme: { + content: DocExample1, + sidebar: DocExample2, + }, + }) + .add('addParameter', () =>
add Parameter
); + +configureReadme({ + header: 'Header text here', + footer: 'Footer text here', + StoryPreview: ({ children }) =>
{children}
, + DocPreview: ({ children }) =>
{children}
, + HeaderPreview: ({ children }) =>
{children}
, + FooterPreview: ({ children }) =>
{children}
, +}); + +addFooter("Add Footer here"); +addHeader("Add Header here"); + +// !~~~~~ Belows are for backwardCompatibility with v4 ~~~~~! // withReadme usages. Both Decorator/HOC style storiesOf("withReadme Example", module) .addDecorator(withReadme(DocExample1))