CLI: Generate a new project on init in empty directory

[ShaunEvening]

What I did

• Create exec function in the CLI utilities
• Create function to create a new project in empty directory
• If storybook init is run on an empty directory, ask user to select a project to generate.
• Throw a categorized error if the scaffolding fails
• Update documentation for getting started
• Add test cases into the CI

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. compile packages with yarn task --task compile
2. alias the local version of the CLI in your .zshrc
3. Create an empty directory and cd into it
4. Run your aliased local CLI

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-24997-sha-f3766dc1. Install it by pinning all your Storybook dependencies to that version.

More information

Published version	0.0.0-pr-24997-sha-f3766dc1
Triggered by	@integrayshaun
Repository	storybookjs/storybook
Branch	cli/empty-project-init
Commit	f3766dc1
Datetime	Tue Dec 5 14:16:27 UTC 2023 (1701785787)
Workflow run	7101997420

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=24997

[shilman]

Looking great so far!

[shilman]

@integrayshaun you asked about how to test?

How about adding N sandboxes to the daily run that:

1. create an empty directory
2. sets an environment variable STORYBOOK_INIT_EMPTY_TYPE (or something)
3. update the code to skip the user prompt if STORYBOOK_INIT_EMPTY_TYPE is set

That way the rest of the test infrastructure can run on these sandboxes. It's a little "heavy" but it's basically making sure that the codepath of instantiating a project directly via an external installers & initializing using the CLI works, rather than our main sandbox mechanism, which is a different codepath and can lag behind external installers by a day or more.

WDYT?

[yannbf]

I think the canary release section was deleted in the PR template, that's why it won't get updated. Here's the canary for anyone who wants to try it out:

npx [email protected] init

[valentinpalkovic]

yarn dlx [email protected] init fails with the following error message:

error: Error: Command failed with exit code 1: yarn create vite@latest --yes . --template react-ts
    error An unexpected error occurred: "Cannot find module 'pnpapi'
    Require stack:
    - /Users/-/.cache/node/corepack/yarn/1.22.19/lib/cli.js
    - /Users/-/.cache/node/corepack/yarn/1.22.19/bin/yarn.js
    Require stack:
    - /Users/-/.cache/node/corepack/yarn/1.22.19/lib/cli.js
    - /Users/-/.cache/node/corepack/yarn/1.22.19/bin/yarn.js".

[valentinpalkovic]

pnpm dlx [email protected] init hangs forever (React + Vite (TS))
npx [email protected] init hangs forever (React + Vite (TS), Vue3 + Vite (TS), Lit + Vite (TS))

Also, appending --debug doesn't return any additional logs. I would wish to see what happens to figure out, where it hangs. One issue might be, that the create command for e.g. react-vite needs additional flags to skip/avoid user input.

[yannbf]

When running:

npx [email protected] init

and choosing angular, when the CLI tries to run Storybook, it fails:

The generation works correctly, so if you run Storybook manually later it does work.

[yannbf]

When using npx and selecting Next.js, when invoking the Next.js CLI it errors given that the directory is not fully empty.

There is a .cache directory before running the Next.js CLI command, which I believe is generated by Storybook when using telemetry.

[yannbf]

The empty directory flow is triggered when there are hidden directories (so the directory is not fully empty):

[shilman]

Woohooo!!! 🙌