feat(typescript): refactor to use Babel

Resolves #114

.eslintignore

@@ -13,7 +13,6 @@ examples/*/storybook-static
 packages/preset-ant-design
 packages/preset-scss
 packages/preset-storysource
-packages/preset-typescript
 
 # ESLint ignores 'hidden' folders by default.
 !.storybook

.github/workflows/ci.yml

@@ -62,4 +62,6 @@ jobs:
       - name: Install dependencies
         run: yarn --frozen-lockfile --prefer-offline
       - name: Build all projects
-        run: yarn workspaces run build
+        run: |
+          yarn workspaces run build
+          yarn workspaces run build-storybook

.gitignore

@@ -10,5 +10,6 @@ yarn-error.log
 
 # Builds
 packages/*/dist
+packages/*/storybook-static
 examples/*/build
 examples/*/storybook-static

README.md

@@ -1,6 +1,6 @@
 # Storybook Presets
 
-![CircleCI master](https://circleci.com/gh/storybookjs/presets.svg?style=shield)
+![CI](https://github.com/storybookjs/presets/workflows/CI/badge.svg)
 
 Storybook presets are grouped collections of babel, webpack, and addons configurations that support specific use cases.
 

examples/README.md

@@ -4,10 +4,12 @@ This folder holds example projects, designed to test presets in isolation and in
 
 ## Current examples
 
-| Name           | Command                                   | addon-docs | ant-design | create-react-app | scss | storysource | typescript |
-| -------------- | ----------------------------------------- | ---------- | ---------- | ---------------- | ---- | ----------- | ---------- |
-| example-cra    | `yarn workspace example-cra storybook`    | ✔          |            | ✔                |      |             |            |
-| example-cra-ts | `yarn workspace example-cra-ts storybook` | ✔          |            | ✔                |      |             |            |
+| Name             | Command                                     | addon-docs | ant-design | create-react-app | scss | storysource | typescript |
+| ---------------- | ------------------------------------------- | ---------- | ---------- | ---------------- | ---- | ----------- | ---------- |
+| example-cra      | `yarn workspace example-cra storybook`      | ✔          |            | ✔                |      |             |            |
+| example-cra-ts   | `yarn workspace example-cra-ts storybook`   | ✔          |            | ✔                |      |             |            |
+| example-ts-react | `yarn workspace example-ts-react storybook` | ✔          |            |                  |      |             | ✔          |
+| example-ts-vue   | `yarn workspace example-ts-vue storybook`   | ✔          |            |                  |      |             | ✔          |
 
 ## Notes
 

examples/cra-ts/package.json

@@ -3,11 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@storybook/addon-docs": "5.3.14",
+    "@storybook/addon-docs": "5.3.17",
     "@storybook/preset-create-react-app": "*",
-    "@storybook/react": "5.3.14",
-    "@types/jest": "25.1.3",
-    "@types/node": "13.7.7",
+    "@storybook/react": "5.3.17",
+    "@types/jest": "25.1.4",
+    "@types/node": "13.9.1",
     "@types/react": "16.9.23",
     "@types/react-dom": "16.9.5",
     "react": "^16.13.0",
@@ -17,7 +17,8 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build && yarn build-storybook",
+    "build": "react-scripts build",
+    "build-storybook": "build-storybook",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook"

examples/cra/package.json

@@ -3,17 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@storybook/addon-docs": "5.3.14",
+    "@storybook/addon-docs": "5.3.17",
     "@storybook/preset-create-react-app": "*",
-    "@storybook/react": "5.3.14",
+    "@storybook/react": "5.3.17",
     "prop-types": "^15.7.2",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-scripts": "3.4.0"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build && yarn build-storybook",
+    "build": "react-scripts build",
+    "build-storybook": "build-storybook",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook"

examples/ts-react/.storybook/main.ts

@@ -0,0 +1,23 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { resolve } = require('path');
+
+module.exports = {
+  stories: ['../src/**/*.stories.(tsx|mdx)'],
+  addons: [
+    {
+      name: '@storybook/preset-typescript',
+      options: {
+        forkTsCheckerWebpackPluginOptions: {
+          colors: false, // disables built-in colors in logger messages
+        },
+        include: [resolve('../src')],
+      },
+    },
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+      },
+    },
+  ],
+};

examples/ts-react/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "example-ts-react",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "exit 0;",
+    "build-storybook": "build-storybook",
+    "storybook": "start-storybook"
+  },
+  "dependencies": {
+    "@babel/core": "^7.8.7",
+    "@storybook/addon-docs": "^5.3.14",
+    "@storybook/preset-typescript": "*",
+    "@storybook/react": "^5.3.17",
+    "@types/react": "^16.9.23",
+    "@types/react-dom": "^16.9.5",
+    "babel-loader": "^8.0.6",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "typescript": "^3.8.3"
+  }
+}

examples/ts-react/src/components/Button/Button.stories.mdx

@@ -0,0 +1,21 @@
+import { Meta, Preview, Story, Props } from '@storybook/addon-docs/blocks';
+import Button from './Button';
+
+<Meta title='MDX|Button' component={Button} />
+
+# Button
+
+With `MDX` we can define a story for `Button` right in the middle of our
+markdown documentation.
+
+<Preview>
+  <Story name='Button'>
+    <form>
+      <Button>Example</Button>
+    </form>
+  </Story>
+</Preview>
+
+## Props
+
+<Props of={Button} />

examples/ts-react/src/components/Button/Button.stories.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+import Button from './Button';
+
+// eslint-disable-next-line import/no-default-export
+export default { title: 'Button', component: Button };
+
+export const Default: FC = () => <Button variant='small'>Example</Button>;

examples/ts-react/src/components/Button/Button.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable react/prop-types, react/button-has-type */
+import React, { FC, ReactNode } from 'react';
+
+interface ButtonProps {
+  /**
+   * The content of the button.
+   */
+  children: ReactNode;
+  /**
+   * Sets the button size.
+   */
+  variant: 'small' | 'large';
+  /**
+   * Disables the button.
+   */
+  disabled?: boolean;
+}
+
+// NOTE: Right now FC<Props> is not working.
+const Button: FC<ButtonProps> = ({
+  children,
+  disabled,
+  variant,
+}: ButtonProps) => (
+  <button disabled={disabled}>
+    {children} {variant}
+  </button>
+);
+
+// eslint-disable-next-line import/no-default-export
+export default Button;

examples/ts-react/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": ["src", ".storybook/*"]
+}

packages/preset-typescript/.storybook/main.ts → examples/ts-vue/.storybook/main.ts

@@ -1,15 +1,22 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { resolve } = require('path');
 
 module.exports = {
-  stories: ['./stories/*.stories.*'],
+  stories: ['../src/**/*.stories.(ts|mdx)'],
   addons: [
     {
       name: '@storybook/preset-typescript',
       options: {
         forkTsCheckerWebpackPluginOptions: {
           colors: false, // disables built-in colors in logger messages
         },
-        include: [resolve(__dirname)],
+        include: [resolve('../src')],
+      },
+    },
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
       },
     },
   ],

examples/ts-vue/.storybook/preview.ts

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+import Button from '../src/components/Button/Button.vue';
+
+Vue.component('my-button', Button);

examples/ts-vue/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "example-ts-vue",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "exit 0;",
+    "build-storybook": "build-storybook",
+    "storybook": "start-storybook"
+  },
+  "dependencies": {
+    "@babel/core": "^7.8.7",
+    "@storybook/addon-docs": "^5.3.14",
+    "@storybook/preset-typescript": "*",
+    "@storybook/vue": "^5.3.14",
+    "babel-loader": "^8.0.6",
+    "babel-preset-vue": "^2.0.2",
+    "typescript": "^3.8.3",
+    "vue": "^2.6.11",
+    "vue-loader": "^15.9.0",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

examples/ts-vue/src/components/Button/Button.stories.mdx

@@ -0,0 +1,21 @@
+import { Meta, Preview, Story, Props } from '@storybook/addon-docs/blocks';
+import Button from './Button.vue';
+
+<Meta title='MDX|Button' component={Button} />
+
+# Button
+
+With `MDX` we can define a story for `Button` right in the middle of our
+markdown documentation.
+
+<Preview>
+  <Story name='Button'>
+    {{
+      template: '<my-button>Example</my-button>',
+    }}
+  </Story>
+</Preview>
+
+## Props
+
+<Props of={Button} />

examples/ts-vue/src/components/Button/Button.stories.ts

@@ -0,0 +1,9 @@
+import Button from './Button.vue';
+
+// eslint-disable-next-line import/no-default-export
+export default { title: 'Button', component: Button };
+
+export const Default = (): object => ({
+  components: { Button },
+  template: '<my-button>Example</my-button>',
+});

examples/ts-vue/src/components/Button/Button.vue

@@ -0,0 +1,39 @@
+<template>
+  <button class="button" @click="onClick" @dblclick="onDoubleClick">
+    <slot />!
+  </button>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+  name: 'Button',
+  methods: {
+    onClick($event: Event) {
+      /**
+       * Emitted when the button is clicked.
+       * @event click
+       * @type {Event}
+       */
+      this.$emit('click', $event);
+    },
+    onDoubleClick($event: Event) {
+      /**
+       * Emitted when the button is double clicked.
+       * @event doubleClick
+       * @type {Event}
+       */
+      this.$emit('double-click', $event);
+    },
+  },
+  props: {
+    /**
+     * The button's color.
+     */
+    color: {
+      type: String,
+      default: '#333',
+    },
+  },
+});
+</script>

examples/ts-vue/src/vue.shims.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+
+  // eslint-disable-next-line import/no-default-export
+  export default Vue;
+}

examples/ts-vue/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true
+  },
+  "include": ["src", ".storybook/*"]
+}

jest.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-  cacheDirectory: '.cache/jest',
   clearMocks: true,
   roots: ['<rootDir>/packages'],
 };

package.json

@@ -40,17 +40,17 @@
     ]
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.22.0",
-    "@typescript-eslint/parser": "^2.22.0",
+    "@typescript-eslint/eslint-plugin": "^2.24.0",
+    "@typescript-eslint/parser": "^2.24.0",
     "babel-eslint": "10.0.3",
     "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.10.0",
     "eslint-import-resolver-ts": "^0.4.2",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jest": "^23.8.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^2.5.0",
     "husky": "^4.2.3",
     "jest": "24.9.0",