Pnp continue

packages/preset-typescript/README.md

@@ -47,3 +47,7 @@ module.exports = [
     }
   }
 ];
+```
+
+##Presets Exposed
+* tsLoaderOptions - to customize ts loader options.

packages/preset-typescript/index.js

@@ -1,6 +1,8 @@
-function webpack(webpackConfig = {}, options = {}) {
+async function webpack(webpackConfig = {}, options = {}) {
   const { module = {}, resolve = {} } = webpackConfig;
-  const { tsLoaderOptions, tsDocgenLoaderOptions, include } = options;
+  const { tsLoaderOptions, tsDocgenLoaderOptions, include, presets } = options;
+
+  const loaderOptions = await presets.apply('tsLoaderOptions', tsLoaderOptions, { presets });
 
   return {
     ...webpackConfig,
@@ -13,7 +15,7 @@ function webpack(webpackConfig = {}, options = {}) {
           use: [
             {
               loader: require.resolve('ts-loader'),
-              options: tsLoaderOptions,
+              options: loaderOptions,
             },
             {
               loader: require.resolve('react-docgen-typescript-loader'),
@@ -34,7 +36,7 @@ function webpack(webpackConfig = {}, options = {}) {
 function managerWebpack(webpackConfig = {}, options = {}) {
   const { module = {}, resolve = {} } = webpackConfig;
   const { tsLoaderOptions, include, transpileManager = false } = options;
-  
+
   if (!transpileManager) {
     return webpackConfig;
   }

packages/preset-typescript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-typescript",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Typescript preset for Storybook",
   "license": "MIT",
   "main": "index.js",

packages/preset-yarn-pnp-ts/.npmignore

@@ -0,0 +1,2 @@
+.storybook
+node_modules

packages/preset-yarn-pnp-ts/.storybook/Button.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface ButtonProps {
+  variant: 'small' | 'large';
+}
+
+export const Button = ({ variant }: ButtonProps) => (
+  <button type="button">click me! {variant}</button>
+);

packages/preset-yarn-pnp-ts/.storybook/config.ts

@@ -0,0 +1,7 @@
+import { configure } from '@storybook/react';
+
+function loadStories() {
+  require('./story');
+}
+
+configure(loadStories, module);

packages/preset-yarn-pnp-ts/.storybook/presets.ts

@@ -0,0 +1,14 @@
+const path = require('path');
+
+module.exports = [
+  {
+    name: '@storybook/preset-typescript',
+    options: {
+      tsDocgenLoaderOptions: {
+        tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
+      },
+      include: [path.resolve(__dirname)],
+    },
+  },
+  '@storybook/preset-yarn-pnp-ts',
+];

packages/preset-yarn-pnp-ts/.storybook/story.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Button } from './Button';
+
+interface IComponentWithDocgenInfo {
+  __docgenInfo?: any,
+}
+
+const getDocgen = (component: any) => {
+  return (component as IComponentWithDocgenInfo).__docgenInfo;
+}
+
+storiesOf('Example', module)
+  .add('small', () => <Button variant="small" />)
+  .add('docgenInfo', () => {
+    return (
+      <>
+        <strong>Docgen:</strong>
+        <pre>{JSON.stringify(getDocgen(Button), null, 2)}</pre>
+      </>
+    );
+  });

packages/preset-yarn-pnp-ts/README.md

@@ -0,0 +1,18 @@
+# Yarn Pnp + Typescript preset for Storybook
+
+Configure storybook to support Yarn Pnp. This preset is dependant on **@storybook/preset-typescript**
+
+## Basic usage
+
+```
+yarn add -D @storybook/preset-yarn-pnp-ts @storybook/preset-typescript react-docgen-typescript-loader ts-loader pnp-webpack-plugin -D
+```
+
+Then add the following to `.storybook/presets.js`:
+
+```js
+module.exports = [
+  "@storybook/preset-typescript",
+  "@storybook/preset-yarn-pnp-ts"
+];
+```

packages/preset-yarn-pnp-ts/index.d.ts

@@ -0,0 +1,10 @@
+import { Configuration } from 'webpack';
+import { Options } from 'ts-loader';
+
+declare interface PresetYarnPnpTypescript {
+  webpack: (config?: Configuration) => Configuration;
+  managerWebpack: (config?: Configuration) => Configuration;
+  tsLoaderOptions: () => Options;
+}
+
+export = PresetYarnPnpTypescript;

packages/preset-yarn-pnp-ts/index.js

@@ -0,0 +1,60 @@
+const PnpWebpackPlugin = require('pnp-webpack-plugin');
+
+function webpack(webpackConfig = {}) {
+  const { resolve = {}, resolveLoader = {} } = webpackConfig;
+
+  return {
+    ...webpackConfig,
+    resolve: {
+      ...resolve,
+      plugins: [...(resolve.plugins || []), PnpWebpackPlugin],
+    },
+    resolveLoader: {
+      ...resolveLoader,
+      plugins: [
+        ...(resolveLoader.plugins || []),
+        PnpWebpackPlugin.moduleLoader('@storybook/react'),
+      ],
+    },
+  };
+}
+
+function tsLoaderOptions() {
+  return PnpWebpackPlugin.tsLoaderOptions({
+    compilerOptions: {
+      jsx: 'react',
+      skipLibCheck: true,
+      esModuleInterop: true,
+      allowSyntheticDefaultImports: true,
+      strict: false,
+    },
+  });
+}
+
+function managerWebpack(webpackConfig = {}) {
+  const { module = {}, resolve = {}, resolveLoader = {} } = webpackConfig;
+
+  const extensions = Array.from(new Set([...(resolve.extensions || []), '.ts', '.tsx']));
+
+  return {
+    ...webpackConfig,
+    module: {
+      ...module,
+      rules: [...(module.rules || [])],
+    },
+    resolve: {
+      ...resolve,
+      extensions,
+      plugins: [...(resolve.plugins || []), PnpWebpackPlugin],
+    },
+    resolveLoader: {
+      ...resolveLoader,
+      plugins: [
+        ...(resolveLoader.plugins || []),
+        PnpWebpackPlugin.moduleLoader('@storybook/react'),
+      ],
+    },
+  };
+}
+
+module.exports = { webpack, managerWebpack, tsLoaderOptions };

packages/preset-yarn-pnp-ts/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@storybook/preset-yarn-pnp-ts",
+  "version": "1.0.0",
+  "description": "Yarn PnP and Typescript preset for Storybook",
+  "license": "MIT",
+  "main": "index.js",
+  "bugs": {
+    "url": "https://github.com/storybooks/presets/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/presets.git"
+  },
+  "scripts": {
+    "storybook": "start-storybook -p 8008"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@storybook/preset-typescript": "^1.2.0",
+    "@storybook/react": "^5.1.3",
+    "@types/node": "^10.5.7",
+    "@types/react": "^16.4.8",
+    "@types/storybook__react": "^3.0.9",
+    "@types/webpack": "^4.4.9",
+    "babel-loader": "^8.0.2",
+    "pnp-webpack-plugin": "^1.4.3",
+    "react": "^16.4.2",
+    "react-docgen-typescript-loader": "^3.1.0",
+    "react-dom": "^16.4.2",
+    "ts-loader": "^6.0.0",
+    "ts-node": "^7.0.0",
+    "typescript": "^3.0.1"
+  },
+  "peerDependencies": {
+    "@types/webpack": "*",
+    "pnp-webpack-plugin": "*",
+    "react-docgen-typescript-loader": "*",
+    "ts-loader": "*"
+  }
+}

packages/preset-yarn-pnp-ts/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "module": "es6",
+    "target": "es5",
+    "lib": ["es5", "es6", "es7", "es2017", "dom"],
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDirs": [
+      ""
+    ],
+    "allowJs": false,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    ".storybook/**/*"
+  ]
+}

yarn.lock

@@ -8519,6 +8519,13 @@ pn@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
 
+pnp-webpack-plugin@^1.4.3:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.5.0.tgz#62a1cd3068f46d564bb33c56eb250e4d586676eb"
+  integrity sha512-jd9olUr9D7do+RN8Wspzhpxhgp1n6Vd0NtQ4SFkmIACZoEL1nkyAdW9Ygrinjec0vgDcWjscFQQ1gDW8rsfKTg==
+  dependencies:
+    ts-pnp "^1.1.2"
+
 polished@^3.3.1:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.0.tgz#29b2a028ee0408df5dded55a2a25e913bc6749a9"
@@ -10797,6 +10804,11 @@ ts-node@^7.0.0:
     source-map-support "^0.5.6"
     yn "^2.0.0"
 
+ts-pnp@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.2.tgz#be8e4bfce5d00f0f58e0666a82260c34a57af552"
+  integrity sha512-f5Knjh7XCyRIzoC/z1Su1yLLRrPrFCgtUAh/9fCSP6NKbATwpOL1+idQVXQokK9GRFURn/jYPGPfegIctwunoA==
+
 tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"