docs: improved create-medusa-app structure (#5458)

www/apps/docs/content/admin/quickstart.mdx

@@ -4,7 +4,7 @@ addHowToData: true
 ---
 
 import Feedback from '@site/src/components/Feedback';
-import Troubleshooting from '@site/src/components/Troubleshooting'
+import DetailsList from '@site/src/components/DetailsList'
 import AdminLoginSection from '../troubleshooting/signing-in-to-admin.md'
 import CorsSection from '../troubleshooting/cors-issues.md'
 
@@ -179,7 +179,7 @@ Can't find your language? Learn how you can contribute by translating the admin
 
 ## Troubleshooting Installation
 
-<Troubleshooting
+<DetailsList
   sections={[
     {
       title: 'Signing into Admin',

www/apps/docs/content/cli/reference.mdx

@@ -40,7 +40,7 @@ medusa --help
 
 ## Troubleshooting Installation
 
-<TroubleshootingSection />
+<DetailsListSection />
 
 ---
 

www/apps/docs/content/create-medusa-app.mdx

@@ -8,7 +8,7 @@ import TabItem from '@theme/TabItem';
 import Feedback from '@site/src/components/Feedback';
 import DocCardList from '@theme/DocCardList';
 import Icons from '@theme/Icon';
-import Troubleshooting from '@site/src/components/Troubleshooting'
+import DetailsList from '@site/src/components/DetailsList'
 import TypeErrorSection from "./troubleshooting/create-medusa-app-errors/_typeerror.md"
 import OtherErrorsSection from "./troubleshooting/create-medusa-app-errors/_other-errors.mdx"
 import EagainError from "./troubleshooting/create-medusa-app-errors/_eagain-error.md"
@@ -19,16 +19,6 @@ import InvalidTokenError from './troubleshooting/create-medusa-app-errors/_no-br
 
 # Install Medusa with create-medusa-app
 
-In this document, you’ll learn how to use create-medusa-app to set up a Medusa backend and an admin dashboard.
-
-:::tip
-
-`create-medusa-app` allows you to install and setup a Medusa backend project with minimal configurations. If you're more familiar with Medusa or you need to have more control over the configurations of the Medusa backend, such as database connection details, you can either use the [command's options](#command-options) to customize the setup, or use the [backend quickstart instead](./development/backend/install.mdx).
-
-:::
-
-## Overview
-
 Medusa is a toolkit for developers to create digital commerce applications. In its simplest form, Medusa is a Node.js backend with the core API, plugins, and modules installed through npm.
 
 `create-medusa-app` is a command that facilitates creating a Medusa ecosystem. It installs the Medusa backend and admin dashboard, along with the necessary configurations to run the backend.
@@ -73,7 +63,10 @@ In your terminal, run the following command:
   </TabItem>
 </Tabs>
 
-### Command Options
+<details>
+<summary>
+Command Options
+</summary>
 
 The `create-medusa-app` command can accept the following options:
 
@@ -87,7 +80,12 @@ The `create-medusa-app` command can accept the following options:
 - `--directory-path <path>`: Allows specifying the parent directory path to create the directory of the new project in.
 - `--with-nextjs-starter`: Installs the Next.js starter storefront under the `<PROJECT_NAME>-storefront` directory, where `<PROJECT_NAME>` is the name of the project you enter in the first question. If the `<PROJECT_NAME>-storefront` directory already exists, random characters are added at the end of `<PROJECT_NAME>-storefront`.
 
-### Example: Connect to a Vercel PostgreSQL Database
+</details>
+
+<details className="border-t-0">
+<summary>
+Example: Connect to a Vercel PostgreSQL Database
+</summary>
 
 If you want to use a PostgreSQL database hosted on Vercel, you must use the `--db-url` option and add to the end of your connection URL `?sslmode=require`. For example:
 
@@ -101,7 +99,12 @@ If the database already has the necessary migrations and you don't need the comm
 
 :::
 
-### Example: Connect to a Supabase Database
+</details>
+
+<details className="border-t-0">
+<summary>
+Example: Connect to a Supabase Database
+</summary>
 
 If you want to connect to a Supabase database, you must use the `--db-url` option with its value beign the connection URL to your Supabase database. For example:
 
@@ -115,7 +118,7 @@ If the database already has the necessary migrations and you don't need the comm
 
 :::
 
----
+</details>
 
 ## Step 2: Specify Project Name
 
@@ -220,7 +223,7 @@ Based on what you're building, you can find a development path for you in the Re
 
 ## Troubleshooting
 
-<Troubleshooting
+<DetailsList
   sections={[
     {
       title: 'Error: EADDRINUSE',

www/apps/docs/content/deployments/admin/deploying-on-vercel.mdx

@@ -3,7 +3,7 @@ description: 'Learn step-by-step.'
 addHowToData: true
 ---
 
-import Troubleshooting from '@site/src/components/Troubleshooting'
+import DetailsList from '@site/src/components/DetailsList'
 import CorsErrorSection from '../../troubleshooting/cors-issues.md'
 
 # Deploy Admin to Vercel
@@ -196,7 +196,7 @@ Then, restart your Medusa backend. Once the backend is running again, you can us
 
 ## Troubleshooting
 
-<Troubleshooting
+<DetailsList
   sections={[
     {
       title: 'CORS Error',

www/apps/docs/content/deployments/storefront/deploying-next-on-vercel.mdx

@@ -3,7 +3,7 @@ description: 'Learn step-by-step.'
 addHowToData: true
 ---
 
-import Troubleshooting from '@site/src/components/Troubleshooting'
+import DetailsList from '@site/src/components/DetailsList'
 import CorsErrorSection from '../../troubleshooting/cors-issues.md'
 
 # Deploy Next.js Starter Template on Vercel
@@ -166,7 +166,7 @@ Then, restart your Medusa backend. Once the backend is running again, you can us
 
 ## Troubleshooting
 
-<Troubleshooting
+<DetailsList
   sections={[
     {
       title: 'CORS Error',

www/apps/docs/content/development/api-routes/add-middleware-express-route.mdx

@@ -2,7 +2,7 @@
 addHowToData: true
 ---
 
-import Troubleshooting from '@site/src/components/Troubleshooting'
+import DetailsList from '@site/src/components/DetailsList'
 import ServiceLifetimeSection from '../../troubleshooting/awilix-resolution-error/_service-lifetime.md'
 import CustomRegistrationSection from '../../troubleshooting/awilix-resolution-error/_custom-registration.md'
 
@@ -200,7 +200,7 @@ export default ProductService
 
 ## Troubleshooting
 
-<Troubleshooting 
+<DetailsList 
   sections={[
     {
       title: 'AwilixResolutionError: Could Not Resolve X',

www/apps/docs/content/development/api-routes/add-middleware.mdx

@@ -2,7 +2,7 @@
 addHowToData: true
 ---
 
-import Troubleshooting from '@site/src/components/Troubleshooting'
+import DetailsList from '@site/src/components/DetailsList'
 import ServiceLifetimeSection from '../../troubleshooting/awilix-resolution-error/_service-lifetime.md'
 import CustomRegistrationSection from '../../troubleshooting/awilix-resolution-error/_custom-registration.md'
 
@@ -193,7 +193,7 @@ export default ProductService
 
 ## Troubleshooting
 
-<Troubleshooting 
+<DetailsList 
   sections={[
     {
       title: 'AwilixResolutionError: Could Not Resolve X',

www/apps/docs/content/development/api-routes/example-logged-in-user.mdx

@@ -2,7 +2,7 @@
 addHowToData: true
 ---
 
-import Troubleshooting from '@site/src/components/Troubleshooting'
+import DetailsList from '@site/src/components/DetailsList'
 import ServiceLifetimeSection from '../../troubleshooting/awilix-resolution-error/_service-lifetime.md'
 import CustomRegistrationSection from '../../troubleshooting/awilix-resolution-error/_custom-registration.md'
 
@@ -157,7 +157,7 @@ If you try accessing the API Routes you added the middleware to, you should see
 
 ## Troubleshooting
 
-<Troubleshooting 
+<DetailsList 
   sections={[
     {
       title: 'AwilixResolutionError: Could Not Resolve X',

www/apps/docs/content/development/backend/install.mdx

@@ -6,7 +6,7 @@ addHowToData: true
 import Feedback from '@site/src/components/Feedback';
 import DocCardList from '@theme/DocCardList';
 import Icons from '@theme/Icon';
-import Troubleshooting from '@site/src/components/Troubleshooting'
+import DetailsList from '@site/src/components/DetailsList'
 import SaslSection from '../../troubleshooting/database-errors/_sasl.md'
 import ConnectionErrorSection from '../../troubleshooting/database-errors/_connection-error.md'
 import FreshInstallationSection from '../../troubleshooting/awilix-resolution-error/_fresh-installation.md'
@@ -92,7 +92,7 @@ curl localhost:9000/store/products
 
 ## Troubleshooting Installation
 
-<Troubleshooting
+<DetailsList
   sections={[
     {
       title: 'Error: SASL: SCRAM-SERVER-FIRST-MESSAGE: Client password must be a string',

www/apps/docs/content/development/services/create-service.mdx

@@ -2,7 +2,7 @@
 addHowToData: true
 ---
 
-import Troubleshooting from '@site/src/components/Troubleshooting'
+import DetailsList from '@site/src/components/DetailsList'
 import ServiceLifetimeSection from '../../troubleshooting/awilix-resolution-error/_service-lifetime.md'
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
@@ -406,7 +406,7 @@ class MySubscriber {
 
 ## Troubleshooting
 
-<Troubleshooting 
+<DetailsList 
   sections={[
     {
       title: 'AwilixResolutionError: Could Not Resolve X',

www/apps/docs/content/development/services/extend-service.mdx

@@ -2,7 +2,7 @@
 addHowToData: true
 ---
 
-import Troubleshooting from '@site/src/components/Troubleshooting'
+import DetailsList from '@site/src/components/DetailsList'
 import ServiceLifetimeSection from '../../troubleshooting/awilix-resolution-error/_service-lifetime.md'
 
 # How to Extend a Service
@@ -91,7 +91,7 @@ You should see the customizations you made in effect.
 
 ## Troubleshooting
 
-<Troubleshooting 
+<DetailsList 
   sections={[
     {
       title: 'AwilixResolutionError: Could Not Resolve X (Service Lifetime)',

www/apps/docs/content/plugins/file-service/s3.mdx

@@ -3,7 +3,7 @@ description: 'Learn how to integrate the S3 plugin with the Medusa backend. Lear
 addHowToData: true
 ---
 
-import Troubleshooting from '@site/src/components/Troubleshooting'
+import DetailsList from '@site/src/components/DetailsList'
 import AclErrorSection from '../../troubleshooting/s3-acl-error.md'
 
 # S3
@@ -237,7 +237,7 @@ Where:
 
 ## Troubleshooting
 
-<Troubleshooting
+<DetailsList
   sections={[
     {
       title: 'Error: AccessControlListNotSupported: The bucket does not allow ACLs',

www/apps/docs/content/plugins/payment/stripe.mdx

@@ -3,7 +3,7 @@ description: 'Learn how to integrate Stripe with the Medusa backend. Learn how t
 addHowToData: true
 ---
 
-import Troubleshooting from '@site/src/components/Troubleshooting'
+import DetailsList from '@site/src/components/DetailsList'
 import MissingPaymentProvider from '../../troubleshooting/missing-payment-providers.md'
 
 # Stripe
@@ -384,7 +384,7 @@ This plugin handles the following Stripe webhook events:
 
 ## Troubleshooting
 
-<Troubleshooting
+<DetailsList
   sections={[
     {
       title: 'Stripe not showing in checkout',

www/apps/docs/content/starters/nextjs-medusa-starter.mdx

@@ -5,7 +5,7 @@ description: 'Learn how to get started with a Next.js storefront and Medusa. The
 
 import Feedback from '@site/src/components/Feedback';
 import QueryNote from '@site/src/components/QueryNote';
-import Troubleshooting from '@site/src/components/Troubleshooting'
+import DetailsList from '@site/src/components/DetailsList'
 import ModuleXErrorSection from '../troubleshooting/common-installation-errors/_module-x-error.mdx'
 import CorsErrorSection from '../troubleshooting/cors-issues.md'
 
@@ -126,7 +126,7 @@ Your Next.js Starter Storefront is now running at `localhost:8000`
 
 ## Troubleshooting Installation
 
-<Troubleshooting
+<DetailsList
   sections={[
     {
       title: 'CORS Error',

www/apps/docs/content/troubleshooting/cli-installation-errors/_reusable-section.mdx

@@ -1,9 +1,9 @@
-import Troubleshooting from '@site/src/components/Troubleshooting'
+import DetailsList from '@site/src/components/DetailsList'
 import PermissionErrorsSection from './_permission-errors.md'
 import PowershellErrorSection from './_powershell-error.md'
 import YarnErrorSection from './_yarn-error.mdx'
 
-<Troubleshooting
+<DetailsList
   sections={[
     {
       title: "NPM Error: EACCES Permissions Errors",

www/apps/docs/src/components/DetailsList/index.tsx

@@ -1,17 +1,18 @@
 import React from "react"
 import Details from "../../theme/Details"
 import clsx from "clsx"
+import { MarkdownContent } from "docs-ui"
 
 type TroubleshootingSection = {
   title: string
   content: React.ReactNode
 }
 
-type TroubleshootingProps = {
+type DetailsListProps = {
   sections: TroubleshootingSection[]
 } & React.AllHTMLAttributes<HTMLDivElement>
 
-const Troubleshooting: React.FC<TroubleshootingProps> = ({ sections }) => {
+const DetailsList: React.FC<DetailsListProps> = ({ sections }) => {
   return (
     <>
       {sections.map(({ title, content }, index) => (
@@ -20,11 +21,14 @@ const Troubleshooting: React.FC<TroubleshootingProps> = ({ sections }) => {
           key={index}
           className={clsx(index !== 0 && "border-t-0")}
         >
-          {content}
+          {React.isValidElement(content) && content}
+          {!React.isValidElement(content) && typeof content === "string" && (
+            <MarkdownContent>content</MarkdownContent>
+          )}
         </Details>
       ))}
     </>
   )
 }
 
-export default Troubleshooting
+export default DetailsList