search

react-workspaces / react-workspaces-playground

⚛️ 🐈 Zero Config Create-React-App Monorepos with Yarn Workspaces, Lerna and React Storybook.
https://react-workspaces.github.io/react-workspaces-playground/
765 stars 128 forks source link

How to add xxx.stories.js files in the package app folders? #44

Open royledford opened 4 years ago

royledford commented 4 years ago

I would like to include stories in the /package/app/ folders.

Is that possible?

I added a stories.js file in packages/apps/app-single-comp/src folder.

I updated storybook/config.js to use const comps = require.context('@project/app-single-comp', true, /.stories.js$/);

Receiving this error You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

I also tried installing storybook into that apps folder as well.

Is it possible?

It would be really nice to put storybook files in both the 'components' and 'app' folders.

F1LT3R commented 4 years ago

I'm certain you will be able to do this.

The warning you are receiving is one I see when I am trying to add something that is not listed in babel loader path.

When you start the dev server, does it print out a list of valid paths? Can you share this list?

royledford commented 4 years ago

Thanks for helping with this. Really hopeful I can get this working.

I created a new app in packages/apps/connect

A new component packages/apps/connect/src/Testing.js

import React from 'react';

const Testing = () => {
  return <div>Testing</div>;
};

export default Testing;

A new story file packages/apps/connect/src/Testing.stories.js

import React from 'react';
import { storiesOf } from '@storybook/react';

import Testing from './Testing';

storiesOf('Testing', module).add('Default', () => <Testing />);

Output in console from running yarn start:storybook

yarn start:storybook
yarn run v1.18.0
$ yarn workspace @project/storybook storybook
$ start-storybook -p 9009
info @storybook/react v5.2.8
info 
info => Loading presets
info => Loading presets
info => Loading custom addons config.
info => Using default Webpack setup.
info => Loading create-react-app config.
Yarn Workspaces paths detected.
Found 8 path(s) with "main:src" entry.
Exporting Workspaces config to Webpack.
{
  root: '/Users/royledford/proj/synzi/synzi2-web',
  paths: [ '/Users/royledford/proj/synzi/synzi2-web/packages/components/src' ],
  packageEntry: 'main:src',
  development: true,
  production: true
}
webpack built c71405cbd36938bba3f8 in 5982ms
⚠ ｢wdm｣: Hash: c71405cbd36938bba3f8
Version: webpack 4.41.5
Time: 5982ms
Built at: 04/23/2020 9:09:54 AM
                                          Asset       Size        Chunks                                Chunk Names
                            asset-manifest.json  640 bytes                [emitted]                     
                                    iframe.html   3.05 KiB                [emitted]                     
            main.c71405cbd36938bba3f8.bundle.js   5.65 KiB          main  [emitted] [immutable]         main
        main.c71405cbd36938bba3f8.bundle.js.map   1.59 KiB          main  [emitted] [dev]               main
    runtime~main.c71405cbd36938bba3f8.bundle.js   31.2 KiB  runtime~main  [emitted] [immutable]         runtime~main
runtime~main.c71405cbd36938bba3f8.bundle.js.map   32.3 KiB  runtime~main  [emitted] [dev]               runtime~main
    vendors~main.c71405cbd36938bba3f8.bundle.js   2.88 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
vendors~main.c71405cbd36938bba3f8.bundle.js.map   2.83 MiB  vendors~main  [emitted] [dev]               vendors~main
Entrypoint main [big] = runtime~main.c71405cbd36938bba3f8.bundle.js runtime~main.c71405cbd36938bba3f8.bundle.js.map vendors~main.c71405cbd36938bba3f8.bundle.js vendors~main.c71405cbd36938bba3f8.bundle.js.map main.c71405cbd36938bba3f8.bundle.js main.c71405cbd36938bba3f8.bundle.js.map
[0] multi /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/dist/server/common/polyfills.js /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js /Users/royledford/proj/synzi/synzi2-web/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true 64 bytes {main} [built]
[../../node_modules/@project/connect sync recursive .stories.js$] /Users/royledford/proj/synzi/synzi2-web/node_modules/@project/connect sync .stories.js$ 189 bytes {main} [built]
[../../node_modules/@storybook/core/dist/server/common/polyfills.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/dist/server/common/polyfills.js 120 bytes {vendors~main} [built]
[../../node_modules/@storybook/core/dist/server/preview/globals.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/dist/server/preview/globals.js 93 bytes {vendors~main} [built]
[../../node_modules/@storybook/core/node_modules/regenerator-runtime/runtime.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/node_modules/regenerator-runtime/runtime.js 23 KiB {vendors~main} [built]
[../../node_modules/@storybook/core/node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built]
[../../node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main} [built]
[../../node_modules/@storybook/react/dist/client/index.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/react/dist/client/index.js 1.34 KiB {vendors~main} [built]
[../../node_modules/@storybook/theming/dist/index.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/theming/dist/index.js 3.37 KiB {vendors~main} [built]
[../../node_modules/airbnb-js-shims/index.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/airbnb-js-shims/index.js 40 bytes {vendors~main} [built]
[../../node_modules/core-js/features/symbol/index.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/core-js/features/symbol/index.js 359 bytes {vendors~main} [built]
[../../node_modules/global/window.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/global/window.js 232 bytes {vendors~main} [built]
[../../node_modules/querystring-es3/index.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/querystring-es3/index.js 127 bytes {vendors~main} [built]
[../../node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true] /Users/royledford/proj/synzi/synzi2-web/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true 7.68 KiB {vendors~main} [built]
[./.storybook/config.js] 353 bytes {main} [built]
    + 708 hidden modules

WARNING in ../apps/connect/src/Testing.stories.js 6:50
Module parse failed: Unexpected token (6:50)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import Testing from './Testing';
| 
> storiesOf('Testing', module).add('Default', () => <Testing />);
| 
 @ /Users/royledford/proj/synzi/synzi2-web/node_modules/@project/connect sync .stories.js$ ./src/Testing.stories.js
 @ ./.storybook/config.js
 @ multi /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/dist/server/common/polyfills.js /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js /Users/royledford/proj/synzi/synzi2-web/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.71 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [../../node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!../../node_modules/@storybook/core/dist/server/templates/index.ejs] /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!/Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/dist/server/templates/index.ejs 2.13 KiB {HtmlWebpackPlugin_0} [built]
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 5.2.8 started                          │
│   7.25 s for manager and 7.72 s for preview        │
│                                                    │
│   Local:            http://localhost:9009/         │
│   On your network:  http://10.0.1.8:9009/          │
│                                                    │
│   A new version (5.3.18) is available!             │
│                                                    │
│   Read full changelog here: https://git.io/fhFYe   │
│                                                    │
╰────────────────────────────────────────────────────╯

Storybook opens in a browser with the following:

Module parse failed: Unexpected token (6:50)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import Testing from './Testing';
| 
> storiesOf('Testing', module).add('Default', () => );
| 
Error: Module parse failed: Unexpected token (6:50)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import Testing from './Testing';
| 
> storiesOf('Testing', module).add('Default', () => );
| 
    at Object.../apps/connect/src/Testing.stories.js (http://localhost:9009/main.c71405cbd36938bba3f8.bundle.js:43:7)
    at __webpack_require__ (http://localhost:9009/runtime~main.c71405cbd36938bba3f8.bundle.js:786:30)
    at fn (http://localhost:9009/runtime~main.c71405cbd36938bba3f8.bundle.js:151:20)
    at webpackContext (http://localhost:9009/main.c71405cbd36938bba3f8.bundle.js:17:9)
    at http://localhost:9009/main.c71405cbd36938bba3f8.bundle.js:72:12
    at Array.forEach ()
    at http://localhost:9009/main.c71405cbd36938bba3f8.bundle.js:71:16
    at http://localhost:9009/vendors~main.c71405cbd36938bba3f8.bundle.js:6344:24
    at render (http://localhost:9009/vendors~main.c71405cbd36938bba3f8.bundle.js:4405:13)
    at ConfigApi.configure (http://localhost:9009/vendors~main.c71405cbd36938bba3f8.bundle.js:4437:9)
F1LT3R commented 4 years ago

Could you also share the relevant package.json files? (I'm interested in seeing the dependencies for storybook, and for any internal monorepo component linking).

carcer commented 4 years ago

I fixed this for myself yesterday, I forked the @workspace/react-scripts and updated it to the latest react-scripts version, and it works

royledford commented 4 years ago

Sorry, was working on a different project.

Looked at this yesterday and have it working now w/o making adjustments to @workspace/react-scripts. Not sure if it's the best way but it's working for me. You can add stories in any folder in any package.

  1. Update ./packages/storybook/.storybook/config.js 
    
// --- Remove the following ---
// const comps = require.context('@project/components/src', true, /.stories.js$/);
// configure(() => {
//   comps.keys().forEach(filename => comps(filename));
// }, module);
// ---

// --- Use an array to configure. Add a path for each package that has stories configure([ require.context('@project/components', true, /.stories.js$/), require.context('@@project/app-ant-design-rewired', true, /.stories.js$/), require.context('@project/app-multi-comps', true, /.stories.js$/), // etc... ]);


2. Add `"main": "src/index.js"` and `"main:src": "src/index.js"` to the package.json for each package that will have stories.

example for `./packages/apps/app-ant-design-rewired/package.json`

{ "name": "@project/app-ant-design-rewired", "version": "1.0.0", "homepage": "https://react-workspaces.github.io/react-workspaces-playground", "private": true, "main": "src/index.js", "main:src": "src/index.js"

// etc...


3. Update the storybook package.json to import each package that will have stories

example `./packages/storybook/package.json`

"dependencies": { "@shared/components": "1.0.0", "@app/app-ant-design-rewired": "1.0.0", "@app/app-multi-comps": "1.0.0", etc... },

F1LT3R commented 4 years ago

Sounds like it's working? Can I close this?

royledford commented 4 years ago

yes :) thanks for the help.