Added storybook to venia concept for scaffolding

[niklaswolf]

Description

Added storybook capabilities back to venia-concept as this is the template for the scaffolding command. Like this users of a new scaffolded app are able to see all stories from venia-ui and defined custom ones in their own src.
Storybook than can be run using yarn storybook/ npm run storybook

Related Issue

Closes #2352.

Acceptance

Verification Steps

I don't have any clue how to test an app scaffold locally, definetly need some help here.
I tested this by creating a new app using the scaffolding tool and applying the changes there. This worked and if I saw this correctly, the scaffolding copys every directory/file besides those ignored explicitly in the create.js.

[fooman]

DEBUG_PROJECT_CREATION=1 packages/create-pwa/bin/create-pwa this is what I believe the core team uses to do a test run for the scaffolding process.

[niklaswolf]

Thanks @fooman I'll try that :)

[niklaswolf]

Using the command @fooman suggested I can verify the changes also in a scaffolded app. :)
@larsroettig I also made changes according to your requests

[luke-denton-aligent]

Great work Niklas!

[PWAStudioBot]

	Messages
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).

Generated by 🚫 dangerJS against 7905bcb

[jimbo]

It's taken us too long to get to this PR, but the value here makes sense to me and I think the approach is straightforward. We'll do a QA pass and make sure it works for us as well, but from my perspective I don't see any reason to hold this up.

Thanks for your contribution and your patience.

[jimbo]

@zetlen Sanity check, if you would, please. 👍

[devops-pwa-codebuild]

Performance Test Results

The following fails have been reported by WebpageTest. These numbers indicates a possible performance issue with the PR which requires further manual testing to validate.

https://pr-2355.pwa-venia.com : LH Performance Expected 0.85 Actual 0.52, LH Best Practices Expected 1 Actual 0.92
https://pr-2355.pwa-venia.com/venia-tops.html : LH Performance Expected 0.75 Actual 0.34, LH Best Practices Expected 1 Actual 0.92
https://pr-2355.pwa-venia.com/valeria-two-layer-tank.html : LH Performance Expected 0.8 Actual 0.49, LH Accessibility Expected 0.9 Actual 0.89, LH Best Practices Expected 1 Actual 0.92

[dpatil-magento]

Would it be nice to provide info to user in console that yarn storybook (when client is yarn) npm run storybook (when client is npm) also available?

  ⚠  Created new PWA project testdir6. Next steps:

     - cd testdir6 before running the below commands.

     - npm run buildpack -- create-custom-origin . to generate a unique, secure custom domain for your new project. Highly recommended.

     - npm run watch to start the dev server and do real-time development.

     - npm run build to build the project into optimized assets in the '/dist' directory

     - npm start after build to preview the app on a local staging server.

[zetlen]

@dpatil-magento Nice catch! @niklaswolf Would you like to add that to this pull request? Those log messages come from https://github.com/magento/pwa-studio/blob/develop/packages/pwa-buildpack/lib/cli/create-project.js near the end of the file.

[tjwiebell]

@zetlen - I opted to move these scripts here from package.json in venia-concept, since they weren't executable if attempting to run inside the mono (this assumes venia-ui is in node_modules). This set off some snapshot failures and I didn't feel confident in which method is best. Couple clarifying questions:

1. Was it okay to have failing scripts in venia-concept?
2. Am I using scriptsToInsert as intended?

[supernova-at]

I ran the following verification steps:

1. DEBUG_PROJECT_CREATION=1 packages/create-pwa/bin/create-pwa
2. cd into your newly created scaffolded project folder
3. Run yarn storybook
4. Verify that the stories defined in Venia UI appear in the Storybook
5. Add a components/MyComponent/myComponent.js file in src of the scaffolded project and have it return some content
6. Add a __stories__/myComponent.js that adds a story for the component
7. Verify that this new story appears in the Storybook alongside the Venia UI stories

[dpatil-magento]

Verified from sibling dir as well, looks good. ( Steps mentioned here - #2363 )