From 9354cb55e259b5cdf353d7f73ef34517419db5cb Mon Sep 17 00:00:00 2001 From: lonyele Date: Thu, 11 Oct 2018 08:26:43 +0900 Subject: [PATCH] Adding types to "storybook-readme" (#29512) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Creating new package for "storybook_addon-readme" This is my first time writing a type definition file. There should be something wrong. Please take a look and help me making this better... * fix name & lint 1. dt-header --> from "4.0.0-beta1" to 4.0 2. no-declare-current-package --> move to the subfolder. Not sure If It works. 3. strict-export-declare-modifiers --> add "export" to all the type/interface 4. Could not parse version: line is '// TypeScript Version: 3.0.3' --> Lower to 2.9 * fix npm test 1. Unnecessary "./" at the start of ~~ --> remove "./" part from tsconfig.json * fix npm test error 1. Error: Expected file 'src/storybook-readme-tests.tsx' to be named storybook-readme-tests.ts --> change accordingly * fix npm test eror 1. change name * fix npm test error 1. change name * wht src... * hm... * path..? * versino? * versin * what.. * versino * path mapping... * marked * move.. * 역시 상위로 가야하나. * fix npm test 1. Unnecessary "./" at the start of ./src/withReadme.d.ts --> remove it all * fix npm test 1. problem with test file at the subfolder --> Move to the root level 2. parseDependencyVersionFromPath error --> remove paths from tsconfig.json * add "components/Marked.d.ts" * fix 1. correct Project url 2. correct Marked to export default (I somehow changed to export during the commits...) * hm... correct typo * 1. Write tests with storiesOf from @storybook/react 2. Add "paths" to tsconfig for fixing importing problem of @storybook/readme 3. Fix Errors that has appeared after real test using storiesOf * Moved all the types to index.d.ts as "andy-ms" suggested * Remove src/* from tsconfig files as moving all the types to index.d.ts * Fix "npm lint storybook-readme" 1. I'm just curious why all the types should be exported. Isn't it cleaner putting "export" to only actually used types? (such as withDocs, wthReadme, Doc, Marked) Hm.. or maybe... to be used from actual user? * Merge upstream Pull from DefinitelyTyped * fix for andy-ms review 1. Change to overloading with namspace style 2. Avoid intersection type and change to function overloading 3. Change Typescript Version to Minimum version that works * I tested from 2.3 to upward because of failing npm test with "storybook-readme depends on react but has a lower required TypeScript version." version 2.8 is the lowest version I could go with. Is It my local setting that made this problem? I'm not sure... --- types/storybook-readme/components/Marked.d.ts | 3 + types/storybook-readme/index.d.ts | 42 ++++++++++ .../storybook-readme-tests.tsx | 77 +++++++++++++++++++ types/storybook-readme/tsconfig.json | 24 ++++++ types/storybook-readme/tslint.json | 1 + 5 files changed, 147 insertions(+) create mode 100644 types/storybook-readme/components/Marked.d.ts create mode 100644 types/storybook-readme/index.d.ts create mode 100644 types/storybook-readme/storybook-readme-tests.tsx create mode 100644 types/storybook-readme/tsconfig.json create mode 100644 types/storybook-readme/tslint.json diff --git a/types/storybook-readme/components/Marked.d.ts b/types/storybook-readme/components/Marked.d.ts new file mode 100644 index 0000000000..62d5e78ec8 --- /dev/null +++ b/types/storybook-readme/components/Marked.d.ts @@ -0,0 +1,3 @@ +import * as React from "react"; + +export default function Marked(props: { md: string }): JSX.Element; diff --git a/types/storybook-readme/index.d.ts b/types/storybook-readme/index.d.ts new file mode 100644 index 0000000000..4a541d8f6a --- /dev/null +++ b/types/storybook-readme/index.d.ts @@ -0,0 +1,42 @@ +// Type definitions for storybook-readme 4.0 +// Project: https://github.com/tuchk4/storybook-readme +// Definitions by: Taeheon Kim +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +// Shared Types +export type Renderable = React.ComponentType | JSX.Element; +export type RenderFunction = () => Renderable | Renderable[]; +export type Readme = string | string[]; + +export type DecoratorPattern = ( + story: RenderFunction, + context: { kind: string; story: string } +) => Renderable | null; + +export type HOCPattern = (story: RenderFunction) => Renderable | null; + +// WithReadme Types +export function withReadme(readme: Readme): DecoratorPattern; +export function withReadme( + readme: Readme, + story: RenderFunction +): RenderFunction; + +// WithDocs Types +export interface CustomComponents { + PreviewComponent: (props: { children: JSX.Element }) => JSX.Element; + FooterComponent: (props: { children: JSX.Element }) => JSX.Element; +} + +export function withDocs( + custom: CustomComponents +): (readme: Readme) => HOCPattern; +export function withDocs(readme: Readme, story: RenderFunction): RenderFunction; +export function withDocs(readme: Readme): DecoratorPattern; +export namespace withDocs { + function addFooterDocs(footerDoc: string): void; +} + +// Doc Types +export function doc(readme: string): RenderFunction; diff --git a/types/storybook-readme/storybook-readme-tests.tsx b/types/storybook-readme/storybook-readme-tests.tsx new file mode 100644 index 0000000000..57ee811cae --- /dev/null +++ b/types/storybook-readme/storybook-readme-tests.tsx @@ -0,0 +1,77 @@ +import * as React from "react"; +import { storiesOf } from "@storybook/react"; +import { withDocs, withReadme, doc } from "storybook-readme"; +import Marked from "storybook-readme/components/Marked"; + +// Possibly any .md files or strings +const DocExample1 = ` +## Eaxmple Markdown 1 for component +A very simple component with markdown +`; + +const DocExample2 = ` +## Example Markdown 2 for component +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 + +// withReadme usages. Both Decorator/HOC style +storiesOf("withReadme Example", module) + .addDecorator(withReadme(DocExample1)) + .addDecorator(withReadme([DocExample1, DocExample2])) + .add( + "StoryName Here", + withReadme(DocExample1, () =>
your react component
) + ) + .add( + "StoryName Here", + withReadme([DocExample1, DocExample2], () => ( +
your react component
+ )) + ); + +// withDocs usages. +const withDocsCustom = withDocs({ + PreviewComponent: ({ children }) =>
{children}
, + FooterComponent: ({ children }) =>
{children}
+}); + +withDocs.addFooterDocs(DocExample1); + +storiesOf("withDocs Example", module) + .addDecorator(withDocs(DocExample1)) + .addDecorator(withDocs([DocExample1, DocExample2])) + .addDecorator(withDocsCustom(DocExample1)) + .addDecorator(withDocsCustom([DocExample1, DocExample2])) + .add( + "StoryName Here", + withDocs(DocExample1, () =>
your react component
) + ) + .add( + "StoryName Here", + withDocs([DocExample1, DocExample2], () =>
your react component
) + ); + +// doc usage. +storiesOf("Doc", module).add("StoryName Here", doc(DocExample1)); + +// Marked usage. +storiesOf("Custom Layout", module).add("StoryName Here", () => { + return ( + +
+
your react component
+
+ +
+
your react component
+
+ +
+
your react component
+
+ + + ); +}); diff --git a/types/storybook-readme/tsconfig.json b/types/storybook-readme/tsconfig.json new file mode 100644 index 0000000000..7afd9d3ee0 --- /dev/null +++ b/types/storybook-readme/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": ["dom", "es6"], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "jsx": "react", + "typeRoots": ["../"], + "paths": { + "@storybook/react": ["storybook__react"] + }, + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "components/Marked.d.ts", + "storybook-readme-tests.tsx" + ] +} diff --git a/types/storybook-readme/tslint.json b/types/storybook-readme/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/storybook-readme/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }