js: react/typescript storybook init

.gitignore

@@ -42,3 +42,4 @@ notebooks/**/*.pdf
 /.npm/
 /.config/
 /Library/
+**/*.tsbuildinfo

js/.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+  addons: ["@storybook/addon-actions", "@storybook/preset-typescript"],
+};

js/.storybook/preview.js

@@ -0,0 +1,12 @@
+/**
+ * @flow
+ */
+
+import * as React from "react";
+import { configure, addDecorator } from "@storybook/react";
+
+function load() {
+  require("./stories/index.tsx");
+}
+
+configure(load, module);

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

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

js/.storybook/stories/Info.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { withInfo } from "@storybook/addon-info";
+
+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/StoryButton.d.ts

@@ -0,0 +1,19 @@
+/// <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;
+export {};

js/.storybook/stories/StoryButton.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+type TOnClick = () => void;
+
+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 function StoryButton(props: Props = { value: "Hello world!" }) {
+  let [state, setState] = React.useState(0);
+  let { onClick } = props;
+  return (
+    <button
+      onClick={() => {
+        setState(++state);
+        if (onClick != null) {
+          onClick();
+        }
+      }}
+    >
+      {props.value}: {state}
+    </button>
+  );
+}

js/.storybook/stories/index.d.ts

@@ -0,0 +1 @@
+export {};

js/.storybook/stories/index.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { storiesOf } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { Info } from "./Info";
+
+import { StoryButton } from "./StoryButton";
+
+storiesOf("Button", module).add(
+  "With example value",
+  Info(() => (
+    <StoryButton
+      value={"Hello there!"}
+      onClick={action("StoryButton onClick!")}
+    />
+  )),
+);

js/.storybook/tsconfig.build.json

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

js/.storybook/tsconfig.json

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

js/.storybook/webpack.config.js

@@ -0,0 +1,37 @@
+const path = require("path");
+
+let PATH_TS = path.resolve(__dirname, "./stories");
+let PATH_TSCONFIG = path.resolve(__dirname, "./tsconfig.json");
+
+module.exports = (baseConfig, env) => {
+  let { config } = baseConfig;
+
+  let shallowRules = { ...config.module.rules[0] };
+
+  /**
+   * Some hacks to make things work...
+   */
+  config.module.rules[0] = {
+    test: /\.tsx?$/,
+    include: PATH_TS,
+    exclude: shallowRules.exclude,
+    use: [
+      require.resolve("ts-loader"),
+      {
+        loader: require.resolve("react-docgen-typescript-loader"),
+        options: {
+          // Provide the path to our tsconfig.json
+          tsconfigPath: PATH_TSCONFIG,
+          setDisplayName: false,
+        },
+      },
+    ],
+  };
+
+  config.module.rules.unshift({
+    ...shallowRules,
+    test: /\.jsx?$/,
+  });
+
+  return config;
+};

js/Makefile

@@ -4,13 +4,28 @@ FMT = flow-typed rex-graphql rex-ui rex-demo-ui
 test:
 	@yarn run jest --no-watch --no-watchman
 
+test-update:
+	@yarn run jest --no-watch --no-watchman -u
+
+test-watch:
+	@yarn run jest --watch
+
 install:
 	@yarn
 	@yarn --cwd ./rex-graphql-codegen run build
 
 showcase:
 	@yarn run cosmos
 
+storybook: 
+	@yarn run storybook
+
+build: 
+	@./node_modules/.bin/tsc --build
+
+watch: 
+	@./node_modules/.bin/tsc --build --watch
+
 lint:
 	@yarn run eslint --config ./.eslintrc .
 

js/babel.config.js

@@ -1,13 +1,16 @@
+let plugins = process.env.REACT_STORYBOOK === "true" ? ["react-docgen"] : [];
+
 module.exports = {
   env: {
     production: {
-      presets: ["react-app"]
+      presets: ["react-app"],
     },
     development: {
-      presets: ["react-app"]
+      presets: ["react-app"],
     },
     test: {
-      presets: [["@babel/preset-env", { targets: { ie: 9 } }], "react-app"]
-    }
-  }
+      presets: [["@babel/preset-env", { targets: { ie: 9 } }], "react-app"],
+    },
+  },
+  plugins,
 };

js/package.json

@@ -5,31 +5,46 @@
   ],
   "scripts": {
     "prettier:rex:forms": "prettier --write ./rex-forms/**/*.js",
-    "prettier-check:rex:forms": "prettier --check ./rex-forms/**/*.js"
+    "prettier-check:rex:forms": "prettier --check ./rex-forms/**/*.js",
+    "storybook": "REACT_STORYBOOK=true start-storybook -p 9001 -c .storybook"
   },
   "devDependencies": {
     "@babel/core": "7.1.6",
-    "babel-jest": "^24.0.0",
-    "babel-preset-react-app": "^9.0.0",
+    "@storybook/addon-actions": "5.3.19",
+    "@storybook/addon-info": "5.3.19",
+    "@storybook/preset-typescript": "3.0.0",
+    "@storybook/react": "5.3.18",
+    "@types/jest": "^26.0.0",
+    "@types/jss": "^10.0.0",
+    "@types/react": "^16.8.1",
+    "@types/react-dom": "^16.8.1",
+    "@types/storybook__addon-info": "^5.2.1",
+    "@types/storybook__addons": "^5.2.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
+    "babel-jest": "^24.0.0",
+    "babel-plugin-react-docgen": "4.1.0",
+    "babel-preset-react-app": "^9.0.0",
+    "eslint": "6.8.0",
+    "eslint-config-react-app": "5.2.0",
+    "eslint-loader": "3.0.3",
+    "eslint-plugin-flowtype": "4.6.0",
+    "eslint-plugin-import": "2.20.1",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-react": "7.18.3",
+    "eslint-plugin-react-hooks": "2.4.0",
     "flow-bin": "0.118.0",
+    "fork-ts-checker-webpack-plugin": "4.1.5",
     "html-webpack-plugin": "4.0.0-beta.5",
     "jest": "^24.0.0",
     "jest-cli": "^24.0.0",
     "jest-dom": "^3.2.1",
     "prettier": "1.19.1",
     "react-cosmos": "4.8.1",
+    "react-docgen-typescript-loader": "3.7.2",
     "react-test-renderer": "16.8.6",
     "react-testing-library": "7.0.0",
-    "eslint": "6.8.0",
-    "eslint-config-react-app": "5.2.0",
-    "eslint-loader": "3.0.3",
-    "eslint-plugin-flowtype": "4.6.0",
-    "eslint-plugin-import": "2.20.1",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.18.3",
-    "eslint-plugin-react-hooks": "2.4.0"
+    "ts-loader": "7.0.5"
   },
   "resolutions": {
     "**/@material-ui/core": "3.9.3",

js/rex-conf-jest/jest.config.js

@@ -1,26 +1,30 @@
 module.exports = {
-  collectCoverageFrom: ["**/*.js"],
+  collectCoverageFrom: ["**/*.js", "**/*.ts"],
   // TODO: this is neede for pnp, enable when needed.
   // resolver: "jest-pnp-resolver",
   setupFiles: ["react-app-polyfill/jsdom"],
   testMatch: [
     "<rootDir>/**/__tests__/**/*-test.{js,jsx}",
-    "<rootDir>/**/*.(spec|test).{js,jsx}"
+    "<rootDir>/**/*.(spec|test).{js,jsx}",
+    "<rootDir>/**/__tests__/**/*-test.{ts,tsx}",
+    "<rootDir>/**/*.(spec|test).{ts,tsx}",
   ],
   testEnvironment: "jsdom",
   testURL: "http://localhost",
   transform: {
     "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
     "^.+\\.css$": require.resolve("./cssTransform.js"),
-    "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": require.resolve("./fileTransform.js")
+    "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": require.resolve(
+      "./fileTransform.js",
+    ),
   },
-//transformIgnorePatterns: [
-//  "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
-//  "^.+\\.module\\.(css|sass|scss)$"
-//],
+  //transformIgnorePatterns: [
+  //  "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
+  //  "^.+\\.module\\.(css|sass|scss)$"
+  //],
   moduleNameMapper: {
     "^react-native$": "react-native-web",
-    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
   },
   moduleFileExtensions: [
     "web.js",
@@ -32,6 +36,6 @@ module.exports = {
     "json",
     "web.jsx",
     "jsx",
-    "node"
-  ]
+    "node",
+  ],
 };

js/rex-demo-ui/__tests__/index-test.d.ts

@@ -0,0 +1 @@
+declare let fn: (str: string) => string;

js/rex-demo-ui/__tests__/index-test.ts

@@ -0,0 +1,7 @@
+let fn = (str: string): string => str;
+
+describe("This is a simple test", () => {
+  test("Check the fn returns", () => {
+    expect(fn("hello")).toEqual("hello");
+  });
+});

js/rex-demo-ui/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function App(): JSX.Element;

js/rex-demo-ui/index.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Typography, Theme, CssBaseline } from "@material-ui/core";
+import { makeStyles, ThemeProvider } from "@material-ui/styles";
+import { createMuiTheme } from "@material-ui/core/styles";
+
+let theme = createMuiTheme();
+
+const useStyles = makeStyles((theme: Theme) => {
+  return {
+    example: {
+      margin: "auto",
+      maxWidth: 720,
+      color: theme.palette.text.primary,
+    },
+  };
+});
+
+export function App() {
+  let styles = useStyles();
+
+  return (
+    <div className={styles.example}>
+      <Typography variant={"h1"} align={"center"}>
+        Hello World!
+      </Typography>
+    </div>
+  );
+}
+
+ReactDOM.render(
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    <App />
+  </ThemeProvider>,
+  document.getElementById("root"),
+);