Docs: Contribution guide updates

[usrrname]

What I did

Some @Helpers and contributors old and new gathered together and tried to run the Storybook codebase to see how to make it easier for people to contribute!

Thanks to @Onyx @chakAs3 @Shentia @unpunnyfuns

Checklist for Contributors

Testing

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

N/A

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

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

  - `documentation`: Documentation **only** changes. Will not show up in release changelog.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow rfun --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

[jonniebigodes]

@usrrname I left a couple of small items for you to look into right now before we move onwards with this pull request, as there are some structural changes that may be required so that it can unblock users and avoid the issues that you faced trying to understand how the code base is arranged and what each part covers.

I'll take another pass shortly and follow up with you on it. Sounds good?

Hope you have a great day.

Stay safe

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 5f13592. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build -c production --parallel=3

---

Sent with 💌 from NxCloud.

[usrrname]

EFF, rebased from the wrong branch as I dont work with forks often.

Update: fixed.

[jonniebigodes]

@usrrname sorry for the "radio silence" on your pull request, but it's been some busy weeks here at Storybook. Once again, I appreciate you taking the time to put together this pull request and help new and veteran contributors get onboarded quicker with Storybook.

I left a small change for you to look into when you have a moment and some comments inside that require a bit of work still.

Let me know when you've addressed, or any questions you may have.

Looking forward to hearing from you.

Hope you have a fantastic weekend.

Stay safe

[jonniebigodes]

@usrrname, when you have a moment, can you adjust the whole documentation as follows:

# Contributors Guide

We welcome contributions of any type and skill level. As an open-source project, we believe in the power of community and welcome any contributions that help us improve Storybook. Whether you are a developer, designer, writer, or someone who wants to help, we'd love to have you on board. If you are interested in contributing, please read the following guidelines.

## How to Contribute

Whether you're new to open source or a seasoned contributor, we welcome all contributions. Here are a few ways you can contribute to Storybook:

- [Create an RFC](./docs/contribute/rfc.md) for feature requests
- Update our [documentation](./docs/contribute/documentation-updates.md) with fixes, improvements, or clarifications
- Add [new examples](./docs/contribute/new-snippets.md) of code snippets for using Storybook with a JS framework
- [Integrate Storybook with a JS framework](./docs/contribute/framework.md) or improve support of existing frameworks
- [Write an addon](https://storybook.js.org/docs/addons/introduction) to extend Storybook's functionality

### Other ways to contribute

If you're not sure where to start, you can always help us by:

- [Reporting a bug](https://github.com/storybookjs/storybook/issues/new/choose) 
- Answer [Help](https://github.com/storybookjs/storybook/discussions/categories/help?discussions_q=is%3Aopen+category%3AHelp) questions on Storybook's GitHub discussions
- [Browse `Good First Issue`s to fix](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)


> **Note**: Before you start contributing, please read the [Code of Conduct](./CODE_OF_CONDUCT.md) and reach out to the maintainers if you have any questions or concerns about the project or the contribution process on the [`#contributing`](https://discord.com/channels/486522875931656193/839297503446695956) channel on Discord.

## Quick guide

### Prerequisites

Storybook is developed against a specific Node.js version specified in the `.nvmrc` file. You can use any version manager to install the correct version of Node.js. We recommend using [fnm](https://github.com/Schniz/fnm). 

1. Check if you have the correct version of Node.js installed by running the following command:

```shell
# Check which version you're using
node --version

# node version manager 
nvm use 18

# pnpm
pnpm env use --global 18
```

2. Install [fnm](https://github.com/Schniz/fnm/tree/master?tab=readme-ov-file#installation) and adjust your shell configuration to include the following parameters: `fnm env`, `use-on-cd`, `corepack-enabled`, and `version-file-strategy recursive`.

```shell
  eval "$(fnm env --use-on-cd --corepack-enabled --version-file-strategy recursive)"
```

3. If you're a Windows user, you'll need to enable Windows Subsystem for Linux (WSL). You can follow the instructions [here](https://docs.microsoft.com/en-us/windows/wsl/install).

### What's inside

Storybook uses a monorepo structure to manage the project and its packages. Currently, it's composed of the following packages and directories:

```shell
#  @usrrname can you adjust the tree structure to match the actual project structure?
```

### Fork the repository

If you plan to contribute to Storybook's codebase, you should fork the repository to your GitHub account. This will allow you to make changes to the codebase and submit a pull request to the main repository when you're ready to contribute your changes.

Once you've forked the repository, you should [disable Github Actions for your forked repository](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/managing-github-actions-settings-for-a-repository) as most of them (e.g., pushing to sandbox) will fail without proper authorization. In your forked repository, go to Settings > Actions > General > set the Actions Permissions to **Disable actions**.

Additionally, adding our codebase as upstream ensures you can rebase against the latest changes in the main repository. To do this, run the following commands:

<!--

@usrrname can you either:
- Adjust the branch name to match what's currently in use (i.e., next) in the main repository? As we're not using the main branch as the default branch, you should adjust the branch name to match the default branch in the main repository.
- Remove the commands and provide links to documentation that explains how to add the upstream repository as a remote and sync your fork with the main repository.
- Combine both options?
 -->

```shell
git remote add upstream git@github.com:storybookjs/storybook.git
```

Now, when you want to update your fork with the latest changes from the main repository, you can run the following commands:

```shell
git fetch upstream # Updates your local copy of the main repository with changes from the official repository

git rebase upstream/main # Rebases your current branch against upstream/main
```

### Running the local development environment

If you're interested in contributing to Storybook's codebase, you can run it locally to get a feel for the codebase and the development environment. To get started with the development environment, you should always run `yarn start` from the root directory. Running `yarn start` will install the required dependencies, build the project, including the packages, and generate a sandbox environment using React with TypeScript with a set of test stories to help you get started.

```shell
git clone && cd ...
yarn start
```

> You don't need to install the dependencies manually to get the project running. The `yarn start` command will install the required dependencies for you.

### Making code changes

If you want to make code changes to Storybook packages while running a sandbox, you'll need to do the following:

1. In a second terminal, run `yarn build --watch <package-1> <package-2>` in the `code/` directory. 
The package name can be found after `@storybook/` in the published package. 

For instance, to build the `@storybook/react @storybook/core-server @storybook/api @storybook/addon-docs` packages at the same time in watch mode:

```shell
cd code
yarn build --watch react core-server api addon-docs
```

2. If you are running the sandbox in ["linked"](https://yarnpkg.com/cli/link) mode (the default), you should see the changes reflected on a refresh (you may need to restart it if changing server packages)

3. If you are running the sandbox in "unlinked" mode, you'll need to rerun the sandbox from the `publish` step to see the changes:

```shell
yarn task --task dev --template <your template> --start-from=publish
```

4. If you have made any changes inside `/code` or other packages, remember to run `yarn test` from inside the package to ensure that your changes do not break any tests.

### Running against different sandbox templates

You can pick a specific template to use as your sandbox by running `yarn task`, which will prompt you to make further choices about which template you want and which task you want to run.

## Troubleshooting

### The initialization process throws an error

If you run `yarn start` and encounter the following error, try rerunning `yarn start` a second time:

```shell
>  NX   ENOENT: no such file or directory, open 'storybook/code/node_modules/nx/package.json'
```

### Storybook doesn't detect changes in the codebase

If you are a Storybook contributor and still experience issues, it is recommended that you verify your local Storybook instance for any unintentional local changes. To do this, you can use the following command:

```shell
git clean -dx --dry-run
```

By executing this command, you can see which untracked or ignored files and directories will be removed from your working directory if you run it with the `--force` flag. Before running the command with the `--force` flag, please commit any local changes you want to keep. Otherwise, they will be lost.

## Contributing to Storybook

For further advice on contributing, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/contribute).

The reasoning behind this change is to provide a better structure and narrative to this part of the documentation while keeping your much-appreciated changes.