ref(getting-started-docs): Migrate React-Native doc to sentry main repo (#52729)

static/app/components/onboarding/gettingStartedDoc/layout.tsx

@@ -58,7 +58,7 @@ export function Layout({steps, platformKey, nextSteps = [], newOrg}: LayoutProps
       )}
       <Steps withTopSpacing={!displayProductSelection && newOrg}>
         {steps.map(step => (
-          <Step key={step.type} {...step} />
+          <Step key={step.title ?? step.type} {...step} />
         ))}
       </Steps>
       {nextSteps.length > 0 && (
@@ -98,7 +98,12 @@ const Wrapper = styled('div')`
   h4 {
     margin-bottom: 0.5em;
   }
-  p {
-    margin-bottom: 1em;
+  && {
+    p {
+      margin-bottom: 0;
+    }
+    h5 {
+      margin-bottom: 0;
+    }
   }
 `;

static/app/components/onboarding/gettingStartedDoc/sdkDocumentation.tsx

@@ -19,6 +19,7 @@ export const migratedDocs = [
   'javascript-nextjs',
   'javascript',
   'python-django',
+  'react-native',
 ];
 
 type SdkDocumentationProps = {

static/app/components/onboarding/gettingStartedDoc/step.tsx

@@ -8,17 +8,12 @@ import {space} from 'sentry/styles/space';
 export enum StepType {
   INSTALL = 'install',
   CONFIGURE = 'configure',
-  /**
-   * This step is used only for JavaScript SDKs
-   */
-  UPLOAD_SOURCE_MAPS = 'upload_source_maps',
   VERIFY = 'verify',
 }
 
 export const StepTitle = {
   [StepType.INSTALL]: t('Install'),
   [StepType.CONFIGURE]: t('Configure SDK'),
-  [StepType.UPLOAD_SOURCE_MAPS]: t('Upload Source Maps'),
   [StepType.VERIFY]: t('Verify'),
 };
 
@@ -31,41 +26,59 @@ type ConfigurationType = {
    * The language of the code to be rendered (python, javascript, etc)
    */
   language: string;
+  /**
+   * Additional information to be displayed below the code snippet
+   */
+  additionalInfo?: React.ReactNode;
   /**
    * A brief description of the configuration
    */
   description?: React.ReactNode;
 };
 
-export type StepProps = {
-  configurations: ConfigurationType[];
-  /**
-   * The step type (install, configure, verify). The list can grow as we add more steps
-   */
-  type: StepType;
+interface BaseStepProps {
+  configurations?: ConfigurationType[];
   /**
    * A brief description of the step
    */
   description?: React.ReactNode;
-};
+}
+interface StepPropsWithTitle extends BaseStepProps {
+  title: string;
+  type?: undefined;
+}
+
+interface StepPropsWithoutTitle extends BaseStepProps {
+  type: StepType;
+  title?: undefined;
+}
+
+export type StepProps = StepPropsWithTitle | StepPropsWithoutTitle;
 
-export function Step({type, configurations, description}: StepProps) {
+export function Step({title, type, configurations, description}: StepProps) {
   return (
     <div>
-      <h4>{StepTitle[type]}</h4>
-      {description}
-      <Configurations>
-        {configurations.map((configuration, index) => (
-          <Configuration key={index}>
-            {configuration.description}
-            <CodeSnippet dark language={configuration.language}>
-              {configuration.language === 'javascript'
-                ? beautify.js(configuration.code, {indent_size: 2, e4x: true})
-                : beautify.html(configuration.code, {indent_size: 2})}
-            </CodeSnippet>
-          </Configuration>
-        ))}
-      </Configurations>
+      <h4>{title ?? StepTitle[type]}</h4>
+      {description && <Description>{description}</Description>}
+      {!!configurations?.length && (
+        <Configurations>
+          {configurations.map((configuration, index) => (
+            <Configuration key={index}>
+              {configuration.description && (
+                <Description>{configuration.description}</Description>
+              )}
+              <CodeSnippet dark language={configuration.language}>
+                {configuration.language === 'javascript'
+                  ? beautify.js(configuration.code, {indent_size: 2, e4x: true})
+                  : beautify.html(configuration.code, {indent_size: 2})}
+              </CodeSnippet>
+              {configuration.additionalInfo && (
+                <AdditionalInfo>{configuration.additionalInfo}</AdditionalInfo>
+              )}
+            </Configuration>
+          ))}
+        </Configurations>
+      )}
     </div>
   );
 }
@@ -79,3 +92,7 @@ const Configuration = styled('div')`
 const Configurations = styled(Configuration)`
   margin-top: ${space(2)};
 `;
+
+const Description = styled(Configuration)``;
+
+const AdditionalInfo = styled(Configuration)``;

static/app/components/onboarding/gettingStartedDoc/utils.tsx

@@ -1,15 +1,18 @@
 import ExternalLink from 'sentry/components/links/externalLink';
-import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
-import {tct} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 
 export function getUploadSourceMapsStep(guideLink: string) {
   return {
-    type: StepType.UPLOAD_SOURCE_MAPS,
-    description: tct(
-      'Automatically upload your source maps to enable readable stack traces for Errors. If you prefer to manually set up source maps, please follow [guideLink:this guide].',
-      {
-        guideLink: <ExternalLink href={guideLink} />,
-      }
+    title: t('Upload Source Maps'),
+    description: (
+      <p>
+        {tct(
+          'Automatically upload your source maps to enable readable stack traces for Errors. If you prefer to manually set up source maps, please follow [guideLink:this guide].',
+          {
+            guideLink: <ExternalLink href={guideLink} />,
+          }
+        )}
+      </p>
     ),
     configurations: [
       {

static/app/gettingStartedDocs/javascript/angular.spec.tsx

@@ -20,7 +20,7 @@ describe('GettingStartedWithAngular', function () {
     // Steps
     for (const step of steps()) {
       expect(
-        screen.getByRole('heading', {name: StepTitle[step.type]})
+        screen.getByRole('heading', {name: step.title ?? StepTitle[step.type]})
       ).toBeInTheDocument();
     }
 

static/app/gettingStartedDocs/javascript/angular.tsx

@@ -58,14 +58,14 @@ export const steps = ({
     type: StepType.INSTALL,
     description: (
       <InstallDescription>
-        <div>
+        <p>
           {tct(
             "To use Sentry with your Angular application, you'll need [code:@sentry/angular-ivy] or [code:@sentry/angular], Sentry’s Browser Angular SDKs:",
             {
               code: <code />,
             }
           )}
-        </div>
+        </p>
         <List symbol="bullet">
           <ListItem>
             {tct("If you're using Angular 12 or newer, use [code:@sentry/angular-ivy]", {
@@ -78,11 +78,11 @@ export const steps = ({
             })}
           </ListItem>
         </List>
-        <div>
+        <p>
           {tct('Add the Sentry SDK as a dependency using [code:yarn] or [code:npm]:', {
             code: <code />,
           })}
-        </div>
+        </p>
       </InstallDescription>
     ),
     configurations: [

static/app/gettingStartedDocs/javascript/ember.spec.tsx

@@ -20,7 +20,7 @@ describe('GettingStartedWithEmber', function () {
     // Steps
     for (const step of steps()) {
       expect(
-        screen.getByRole('heading', {name: StepTitle[step.type]})
+        screen.getByRole('heading', {name: step.title ?? StepTitle[step.type]})
       ).toBeInTheDocument();
     }
 

static/app/gettingStartedDocs/javascript/ember.tsx

@@ -43,11 +43,15 @@ export const steps = ({
   },
   {
     type: StepType.CONFIGURE,
-    description: tct(
-      'You should [code:init] the Sentry SDK as soon as possible during your application load up in [code:app.js], before initializing Ember:',
-      {
-        code: <code />,
-      }
+    description: (
+      <p>
+        {tct(
+          'You should [code:init] the Sentry SDK as soon as possible during your application load up in [code:app.js], before initializing Ember:',
+          {
+            code: <code />,
+          }
+        )}
+      </p>
     ),
     configurations: [
       {

static/app/gettingStartedDocs/javascript/gatsby.spec.tsx

@@ -20,7 +20,7 @@ describe('GettingStartedWithGatsby', function () {
     // Steps
     for (const step of steps()) {
       expect(
-        screen.getByRole('heading', {name: StepTitle[step.type]})
+        screen.getByRole('heading', {name: step.title ?? StepTitle[step.type]})
       ).toBeInTheDocument();
     }
 

static/app/gettingStartedDocs/javascript/gatsby.tsx

@@ -56,14 +56,14 @@ export const steps = ({
     configurations: [
       {
         description: (
-          <div>
+          <p>
             {tct(
               'Register the [code:@sentry/gatsby] plugin in your Gatsby configuration file (typically [code:gatsby-config.js]).',
               {
                 code: <code />,
               }
             )}
-          </div>
+          </p>
         ),
         language: 'javascript',
         code: `
@@ -78,7 +78,7 @@ export const steps = ({
       },
       {
         description: (
-          <div>{tct('Then, configure your [code:Sentry.init]:', {code: <code />})}</div>
+          <p>{tct('Then, configure your [code:Sentry.init]:', {code: <code />})}</p>
         ),
         language: 'javascript',
         code: `