mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-11 20:40:20 +00:00
Adding types to "storybook-readme" (#29512)
* 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...
This commit is contained in:
lonyele
@@ -0,0 +1,3 @@
|
||||
import * as React from "react";
|
||||
|
||||
export default function Marked(props: { md: string }): JSX.Element;
|
||||
Vendored
+42
@@ -0,0 +1,42 @@
|
||||
// Type definitions for storybook-readme 4.0
|
||||
// Project: https://github.com/tuchk4/storybook-readme
|
||||
// Definitions by: Taeheon Kim <https://github.com/lonyele>
|
||||
// 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;
|
||||
@@ -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, () => <div>your react component</div>)
|
||||
)
|
||||
.add(
|
||||
"StoryName Here",
|
||||
withReadme([DocExample1, DocExample2], () => (
|
||||
<div>your react component</div>
|
||||
))
|
||||
);
|
||||
|
||||
// withDocs usages.
|
||||
const withDocsCustom = withDocs({
|
||||
PreviewComponent: ({ children }) => <div>{children}</div>,
|
||||
FooterComponent: ({ children }) => <div>{children}</div>
|
||||
});
|
||||
|
||||
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, () => <div>your react component</div>)
|
||||
)
|
||||
.add(
|
||||
"StoryName Here",
|
||||
withDocs([DocExample1, DocExample2], () => <div>your react component</div>)
|
||||
);
|
||||
|
||||
// doc usage.
|
||||
storiesOf("Doc", module).add("StoryName Here", doc(DocExample1));
|
||||
|
||||
// Marked usage.
|
||||
storiesOf("Custom Layout", module).add("StoryName Here", () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div>
|
||||
<div>your react component</div>
|
||||
</div>
|
||||
<Marked md={"### INTRO "} />
|
||||
<div>
|
||||
<div>your react component</div>
|
||||
</div>
|
||||
<Marked md={DocExample1} />
|
||||
<div>
|
||||
<div>your react component</div>
|
||||
</div>
|
||||
<Marked md={"### OUTRO "} />
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Reference in New Issue
Block a user