js: tsconfig and tsconfig.base updated; .storybook tsconfigs updated, app works now

Author: liringlas

js/.storybook/stories/Info.d.ts

@@ -1,2 +1,4 @@
 import * as React from 'react';
-export declare let Info: (fn: React.FunctionComponent<{}>) => any;
+declare type InfoComponent = (fn: React.FunctionComponent) => () => React.ReactElement<any>;
+export declare let Info: InfoComponent;
+export {};

js/.storybook/stories/Info.js

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import { withInfo } from "@storybook/addon-info";
 
-export let Info = (fn: React.FunctionComponent) => withInfo({ inline: true })(() => {
+type InfoComponent = (fn: React.FunctionComponent) => () => React.ReactElement<any>
+
+export let Info: InfoComponent = (fn: React.FunctionComponent) => withInfo({ inline: true })(() => {
     return <div style={{padding: '10px 40px'}}>{fn({})}</div>
 })

js/.storybook/stories/Info.tsx

@@ -1,11 +1,18 @@
+/// <reference types="react" />
 declare type TOnClick = () => void;
 declare type Props = {
+    /**
+     * Example value to display
+     **/
     enum?: " " | "a" | "b";
+    /** Example value with string type */
     value: string;
+    /** Example value with some object type */
     position?: {
         x: number;
         y: number;
     };
+    /** Example onClick with custom type */
     onClick?: TOnClick;
 };
 export declare function StoryButton(props?: Props): JSX.Element;

js/.storybook/stories/StoryButton.d.ts

@@ -19,9 +19,10 @@ type Props = {
 }
 
 export function StoryButton(props: Props = {value: "Hello world!"}) {
-  let [state, setState] = React.useState(0)
+  let [state, setState] = React.useState(0) 
+  let {onClick} = props
   return <button onClick={() => {
     setState(++state);
-    props.onClick();
+    if (onClick!=null){onClick()} 
   }}>{props.value}: {state}</button>
 }

js/.storybook/stories/StoryButton.js

@@ -7,9 +7,9 @@ import { Info } from "./Info";
 
 import { StoryButton } from "./StoryButton";
 
-storiesOf("Button", module).add("With example value", Info(() => (
+storiesOf("Button", module).add("With example value", Info(() =>  (
   <StoryButton 
     value={"Hello there!"}
-    onClick={action('StoryButton onClick')}
+    onClick={action('StoryButton onClick!')}
   />
 )));

js/.storybook/stories/StoryButton.tsx

@@ -0,0 +1,8 @@
+{
+    "extends": "../tsconfig.base",
+    "compilerOptions": {
+      "rootDir": "./",
+      "emitDeclarationOnly": true
+    },
+    "include": ["./stories/**/*.tsx", "./stories/**/*.ts"],
+}

js/.storybook/stories/index.js

@@ -1,7 +1,8 @@
 {
     "extends": "../tsconfig.base",
     "compilerOptions": {
-      "rootDir": "./"
+      "rootDir": "./",
+      "emitDeclarationOnly": false
     },
-    "include": ["./stories/**/*.ts"]
+    "include": ["./stories/**/*.tsx", "./stories/**/*.ts"],
 }