Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 23 additions & 16 deletions docs/get-started/install.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -166,22 +166,29 @@ There are some noteworthy items here:

#### The CLI doesn't detect my framework

If you're working with a custom environment setup or need to set up Storybook manually, you can use the `--type` flag to specify the framework you need to use. Listed below are the supported frameworks and examples of how to use them:

| Framework | Type |
| -------------- | ---------------- |
| Angular | `angular` |
| Ember | `ember` |
| HTML | `html` |
| Next.js | `nextjs` |
| Preact | `preact` |
| Qwik | `qwik` |
| React | `react` |
| Server | `server` |
| Solid | `solid` |
| Svelte | `svelte` |
| Vue 3 | `vue3` |
| Web Components | `web_components` |
If auto‑detection fails or you’re using a custom setup, pass the project type explicitly with `--type` when running the initializer. The allowed values are:

| Type | Framework |
| ----------------------------- | ---------------------------------- |
| `angular` | Angular |
| `ember` | Ember |
| `html` | HTML |
| `nextjs` | Next.js |
| `nuxt` | Nuxt |
| `preact` | Preact |
| `qwik` | Qwik |
| `react` | React |
| `react_native` | React Native |
| `react_native_web` | React Native Web |
| `react_native_and_rnw` | React Native (+ Web) |
| `react_scripts` | Create React App (react-scripts) |
| `react_project` | React Project |
| `server` | Server renderer |
| `solid` | Solid |
| `svelte` | Svelte |
| `sveltekit` | SvelteKit |
| `vue3` | Vue 3 |
| `web_components` | Web Components |
Comment on lines +169 to +191

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟑 Minor

🧩 Analysis chain

Clarify the distinction between react_native_web and react_native_and_rnw project types.

Both type values (lines 182 and 183) have identical framework descriptions: "React Native Web". This creates ambiguity about when to use each type. If these are functionally different project types, their descriptions should clarify the distinction or the use case for each.

Can you confirm whether these two types serve different purposes? If so, please update their descriptions to clarify when developers should select each option. For example:

  • react_native_web β€” React Native Web (web-only)
  • react_native_and_rnw β€” React Native with Web support (monorepo/multi-target)

Or similar distinctions if that's not accurate.



---

🏁 Script executed:

```shell
#!/bin/bash
# Search for where these project types are defined in the codebase
rg -n "react_native_web|react_native_and_rnw" --type=ts --type=js --type=tsx --type=jsx -C3 | head -100

Length of output: 27


🏁 Script executed:

#!/bin/bash
# Look for enum or constant definitions containing these types
rg -n "enum|const.*Type|react_native" --type=ts --type=js -C2 | head -80

Length of output: 4917


🏁 Script executed:

#!/bin/bash
# Search for any documentation files that might explain these types
fd -e md -e mdx -e txt | xargs rg -l "react_native_web\|react_native_and_rnw" 2>/dev/null

Length of output: 0



---

🏁 Script executed:

```shell
#!/bin/bash
# Search for ProjectTypeService or initializer that defines these types
rg -n "ProjectTypeService|initializeProject|react_native" | head -60

Length of output: 8108


🏁 Script executed:

#!/bin/bash
# Find files that might contain project type definitions or enums
fd . -type f -name "*.ts" -o -name "*.js" | xargs rg -l "angular.*ember.*html.*nextjs|ProjectType" 2>/dev/null | head -20

Length of output: 1373


🏁 Script executed:

#!/bin/bash
# Search for any constant or variable that lists project framework types
rg -n "Framework|Type.*=" -A20 | grep -E "(react|angular|vue|svelte)" | head -80

Length of output: 6275



---

🏁 Script executed:

```shell
#!/bin/bash
# Read the projectTypes.ts enum definition
cat code/core/src/cli/projectTypes.ts

Length of output: 589


🏁 Script executed:

#!/bin/bash
# Read the ProjectTypeService implementation
cat code/lib/create-storybook/src/services/ProjectTypeService.ts | head -200

Length of output: 6989


🏁 Script executed:

#!/bin/bash
# Look for any comments or documentation about react_native types
rg -n "react_native_web|react_native_and_rnw" -B3 -A3 code/lib/create-storybook/src/services/

Length of output: 0



---

🏁 Script executed:

```shell
#!/bin/bash
# Get the full ProjectTypeService to see if there are configs for these types
cat code/lib/create-storybook/src/services/ProjectTypeService.ts | tail -100

Length of output: 3110


🏁 Script executed:

#!/bin/bash
# Search for any usage documentation or comments about the distinction
rg -n "REACT_NATIVE" code/lib/create-storybook/src/ -B2 -A2 | head -80

Length of output: 7599


Clarify the distinction between react_native_web and react_native_and_rnw project types (lines 182–183).

Both entries currently map to "React Native Web" but serve different purposes in the codebase. The react_native_web type configures a web-only setup, while react_native_and_rnw combines React Native and React Native Web generators for dual-target monorepo setups. Update the descriptions to reflect this distinction, for example:

  • react_native_web β€” React Native Web (web target)
  • react_native_and_rnw β€” React Native and Web (dual targets)
πŸ€– Prompt for AI Agents
In docs/get-started/install.mdx around lines 169 to 191, the table entries for
`react_native_web` and `react_native_and_rnw` both say "React Native Web" but
mean different things; change the descriptions so `react_native_web` reads
something like "React Native Web (web target)" and `react_native_and_rnw` reads
"React Native and Web (dual targets)" to clearly convey that one is web-only and
the other sets up a combined React Native + React Native Web
dual-target/monorepo configuration.


{/* prettier-ignore-start */}

Expand Down
Loading