Merge pull request #34356 from lonyele/feature/migrate-to-v5

[storybook-readme] Migrate to v5

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  <https://github.com/lonyele>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -16,6 +16,24 @@ export type DecoratorPattern = (
 
 export type HOCPattern = (story: RenderFunction) => Renderable | null;
 
+export type MakeDecoratorResult = (...args: any[]) => any;
+
+// Types added for v5
+export const addReadme: MakeDecoratorResult;
+export function addFooter(md: string): void;
+export function addHeader(md: string): void;
+export interface ConfigureReadmeConfig {
+  header: string;
+  footer: string;
+  StoryPreview: (props: { children: React.ReactNode }) => React.ReactNode;
+  DocPreview: (props: { children: React.ReactNode }) => React.ReactNode;
+  HeaderPreview: (props: { children: React.ReactNode }) => React.ReactNode;
+  FooterPreview: (props: { children: React.ReactNode }) => React.ReactNode;
+}
+
+export function configureReadme(config: ConfigureReadmeConfig): void;
+
+// !~~~~~ Belows are for backwardCompatibility with v4 ~~~~~!
 // WithReadme Types
 export function withReadme(readme: Readme): DecoratorPattern;
 export function withReadme(

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', () => <div>add Parameter</div>);
+
+configureReadme({
+  header: 'Header text here',
+  footer: 'Footer text here',
+  StoryPreview: ({ children }) => <div>{children}</div>,
+  DocPreview: ({ children }) => <div>{children}</div>,
+  HeaderPreview: ({ children }) => <div>{children}</div>,
+  FooterPreview: ({ children }) => <div>{children}</div>,
+});
+
+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))