Merge pull request #5 from rangle/enable-ts

enable typescript in project

packages/ds-seed/.storybook/main.js

@@ -1,4 +1,24 @@
 module.exports = {
-  stories: ['../src/components/**/*.stories.js'],
+  stories: ['../src/**/*.stories.(js|tsx)'],
   addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+
+  /**
+   *   todo: once https://github.com/storybookjs/presets/pull/83 is merged in, we may no longer need
+   *   to do this manually and simply just use the preset
+   */
+  webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+        },
+        {
+          loader: require.resolve('react-docgen-typescript-loader'),
+        },
+      ],
+    });
+    config.resolve.extensions.push('.ts', '.tsx');
+    return config;
+  },
 };

packages/ds-seed/package.json

@@ -11,7 +11,12 @@
     "@storybook/addon-links": "^5.3.8",
     "@storybook/addons": "^5.3.8",
     "@storybook/react": "^5.3.8",
-    "babel-loader": "^8.0.6"
+    "@types/react": "^16.9.19",
+    "@types/react-dom": "^16.9.5",
+    "babel-loader": "^8.0.6",
+    "react-docgen-typescript-loader": "^3.6.0",
+    "ts-loader": "^6.2.1",
+    "typescript": "^3.7.5"
   },
   "scripts": {
     "storybook": "start-storybook -p 6006",

packages/ds-seed/src/components/button.stories.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import MySillyButton from "./button";
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'MySillyButton',
+  component: MySillyButton,
+};
+
+export const example = () => <MySillyButton onClick={action('clicked')} />
+

packages/ds-seed/src/components/button.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+
+interface MySillyButton {
+    onClick: any
+}
+const MySillyButton = ({ onClick }: MySillyButton) => <button onClick={onClick}>hehe</button>;
+
+export default MySillyButton;

packages/ds-seed/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "outDir": "build/lib",
+    "module": "commonjs",
+    "target": "es5",
+    "lib": ["es5", "es6", "es7", "es2017", "dom"],
+    "sourceMap": true,
+    "allowJs": false,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDirs": ["src"],
+    "baseUrl": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "declaration": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["./src"],
+  "exclude": ["node_modules", "build", "scripts"]
+}