Merge pull request #103 from storybookjs/feature/remove-ts-docgen

feat(cra): remove ts docgen loader
storybookjs · Mar 6, 2020 · 51ce898 · 51ce898
2 parents 0af12b9 + 217dcff
commit 51ce898
Show file tree

Hide file tree

Showing 19 changed files with 1,412 additions and 1,466 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,65 @@
+name: CI
+
+on: [pull_request]
+
+env:
+  CI: true
+
+jobs:
+  # Checks files with ESLint and Prettier
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - uses: actions/cache@v1
+        with:
+          path: /home/runner/.cache/yarn/v6
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}-yarn-
+      - name: Install dependencies
+        run: yarn --frozen-lockfile --prefer-offline
+      - name: Lint all files
+        run: yarn lint
+
+  # Runs unit tests
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - uses: actions/cache@v1
+        with:
+          path: /home/runner/.cache/yarn/v6
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}-yarn-
+      - name: Install dependencies
+        run: yarn --frozen-lockfile --prefer-offline
+      - name: Run all tests
+        run: yarn test
+
+  # Ensures all projects can build
+  build:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+        node: [10, 12]
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+      - uses: actions/cache@v1
+        with:
+          path: /home/runner/.cache/yarn/v6
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}-yarn-
+      - name: Install dependencies
+        run: yarn --frozen-lockfile --prefer-offline
+      - name: Build all projects
+        run: yarn workspaces run build
diff --git a/examples/cra-ts/.storybook/main.js b/examples/cra-ts/.storybook/main.js
@@ -1,12 +1,7 @@
 module.exports = {
   stories: ['../src/**/*.stories.(tsx|mdx)'],
   addons: [
-    {
-      name: '@storybook/preset-create-react-app',
-      options: {
-        tsDocgenLoaderOptions: {},
-      },
-    },
+    '@storybook/preset-create-react-app',
     {
       name: '@storybook/addon-docs',
       options: {

diff --git a/examples/cra-ts/package.json b/examples/cra-ts/package.json
@@ -3,17 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@storybook/addon-docs": "5.3.6",
+    "@storybook/addon-docs": "5.3.14",
     "@storybook/preset-create-react-app": "*",
-    "@storybook/react": "5.3.6",
-    "@types/jest": "24.9.0",
-    "@types/node": "12.12.17",
-    "@types/react": "16.9.17",
-    "@types/react-dom": "16.9.4",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-scripts": "3.3.0",
-    "typescript": "3.7.5"
+    "@storybook/react": "5.3.14",
+    "@types/jest": "25.1.3",
+    "@types/node": "13.7.7",
+    "@types/react": "16.9.23",
+    "@types/react-dom": "16.9.5",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "react-scripts": "3.4.0",
+    "typescript": "3.8.3"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/examples/cra-ts/src/components/Button/Button.tsx b/examples/cra-ts/src/components/Button/Button.tsx
@@ -1,9 +1,13 @@
 /* eslint-disable react/prop-types, react/button-has-type */
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 import logo, { ReactComponent as LogoSvg } from '../../assets/logo.svg';
 import styles from './Button.module.scss';
 
 interface ButtonProps {
+  /**
+   * The content of the button.
+   */
+  children: ReactNode;
   /**
    * Sets the button size.
    */
@@ -14,7 +18,12 @@ interface ButtonProps {
   disabled?: boolean;
 }
 
-const Button: FC<ButtonProps> = ({ children, disabled, variant }) => (
+// NOTE: Right now FC<Props> is not working.
+const Button: FC<ButtonProps> = ({
+  children,
+  disabled,
+  variant,
+}: ButtonProps) => (
   <button disabled={disabled} className={styles.Button}>
     <img src={logo} alt='Logo' />
     <LogoSvg />

diff --git a/examples/cra/package.json b/examples/cra/package.json
@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@storybook/addon-docs": "5.3.6",
+    "@storybook/addon-docs": "5.3.14",
     "@storybook/preset-create-react-app": "*",
-    "@storybook/react": "5.3.6",
+    "@storybook/react": "5.3.14",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-scripts": "3.3.0"
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "react-scripts": "3.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/package.json b/package.json
@@ -23,7 +23,6 @@
     "lint": "yarn lint-code && yarn lint-style -c",
     "lint-code": "eslint '{examples,packages}/**/*.{js,ts,tsx}'",
     "lint-style": "yarn prettier '{examples,packages}/**/*.{js,ts,tsx,css,html,json,md,mdx,scss,yml}'",
-    "repo-dirty-check": "node ./scripts/repo-dirty-check",
     "test": "jest --passWithNoTests"
   },
   "husky": {
@@ -34,30 +33,28 @@
   "lint-staged": {
     "*.{js,ts,tsx}": [
       "eslint --fix",
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ],
     "*.{css,html,json,md,mdx,scss,yml}": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.11.0",
-    "@typescript-eslint/parser": "^2.11.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.7.2",
+    "@typescript-eslint/eslint-plugin": "^2.22.0",
+    "@typescript-eslint/parser": "^2.22.0",
+    "babel-eslint": "10.0.3",
+    "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.7.0",
+    "eslint-config-prettier": "^6.10.0",
     "eslint-import-resolver-ts": "^0.4.2",
-    "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-jest": "^23.1.1",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jest": "^23.8.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
-    "husky": "^3.1.0",
-    "jest": "^24.9.0",
-    "lint-staged": "^9.5.0",
+    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react-hooks": "^2.5.0",
+    "husky": "^4.2.3",
+    "jest": "24.9.0",
+    "lint-staged": "^10.0.8",
     "prettier": "^1.19.1",
     "shelljs": "^0.8.2"
   }

diff --git a/packages/preset-ant-design/package.json b/packages/preset-ant-design/package.json
@@ -19,22 +19,22 @@
   },
   "devDependencies": {
     "@babel/core": "^7.7.2",
-    "@storybook/react": "^5.2.6",
+    "@storybook/react": "^5.3.14",
     "@types/node": "^10.5.7",
-    "@types/react": "^16.9.11",
+    "@types/react": "^16.9.23",
     "@types/storybook__react": "^3.0.9",
-    "@types/webpack": "^4.39.8",
+    "@types/webpack": "^4.41.7",
     "antd": "^3.25.0",
     "babel-loader": "^8.0.2",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0"
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0"
   },
   "peerDependencies": {
     "@types/webpack": "*"
   },
   "dependencies": {
     "babel-plugin-import": "^1.13.0",
-    "css-loader": "^3.2.0",
+    "css-loader": "^3.4.2",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
     "style-loader": "^1.0.0"

diff --git a/packages/preset-create-react-app/README.md b/packages/preset-create-react-app/README.md
@@ -34,46 +34,16 @@ Once installed, add this preset to the appropriate file:
 
 ## Advanced usage
 
-### Enabling docgen (for [Storybook Docs](https://github.com/storybookjs/storybook/tree/master/addons/docs))
+### Usage with Docs
 
-You can optionally enable and configure [`react-docgen-typescript-loader`](https://github.com/strothj/react-docgen-typescript-loader) with `tsDocgenLoaderOptions`.
-
-If set to `{}`, it will be enabled with the default settings for Create React App. In most cases, this is all the configuration needed.
-
-```js
-module.exports = {
-  addons: [
-    {
-      name: '@storybook/preset-create-react-app',
-      options: {
-        tsDocgenLoaderOptions: {},
-      },
-    },
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-      },
-    },
-  ],
-};
-```
-
-Alternatively, you can pass your own configuration:
+When working with Storybook Docs, simply add the following config to your `main.js` file.
 
 ```js
 const path = require('path');
 
 module.exports = {
   addons: [
-    {
-      name: '@storybook/preset-create-react-app',
-      options: {
-        tsDocgenLoaderOptions: {
-          tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
-        },
-      },
-    },
+    '@storybook/preset-create-react-app',
     {
       name: '@storybook/addon-docs',
       options: {

diff --git a/packages/preset-create-react-app/package.json b/packages/preset-create-react-app/package.json
@@ -22,14 +22,13 @@
     "prepublishOnly": "yarn build"
   },
   "dependencies": {
-    "@storybook/node-logger": "^5.2.0",
-    "@types/webpack": "^4.41.2",
-    "react-docgen-typescript-loader": "^3.6.0",
-    "semver": "^7.1.1"
+    "@storybook/node-logger": "^5.3.14",
+    "@types/webpack": "^4.41.7",
+    "semver": "^7.1.3"
   },
   "devDependencies": {
-    "@types/semver": "^6.2.0",
-    "typescript": "^3.7.5"
+    "@types/semver": "^7.1.0",
+    "typescript": "^3.8.3"
   },
   "peerDependencies": {
     "@storybook/react": ">=5.2",

diff --git a/packages/preset-create-react-app/src/helpers/mergePlugins.ts b/packages/preset-create-react-app/src/helpers/mergePlugins.ts
@@ -1,4 +1,4 @@
-import { Plugin } from 'webpack';
+import { Plugin } from 'webpack'; // eslint-disable-line import/no-extraneous-dependencies
 
 const mergePlugins = (
   basePlugins: Plugin[] = [],