ref(onboarding): Split React onboarding docs (#102564)

Contributes to
https://linear.app/getsentry/issue/TET-864/introduce-folders-for-onboarding-platforms

Author: priscilawebdev

static/app/gettingStartedDocs/javascript/react.tsx

@@ -0,0 +1,34 @@
+import {widgetCalloutBlock} from 'sentry/components/onboarding/gettingStartedDoc/feedback/widgetCallout';
+import type {
+  DocsParams,
+  OnboardingConfig,
+} from 'sentry/components/onboarding/gettingStartedDoc/types';
+import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/types';
+import {
+  getCrashReportJavaScriptInstallSteps,
+  getCrashReportModalConfigDescription,
+  getCrashReportModalIntroduction,
+} from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
+
+export const crashReport: OnboardingConfig = {
+  introduction: () => getCrashReportModalIntroduction(),
+  install: (params: DocsParams) => getCrashReportJavaScriptInstallSteps(params),
+  configure: () => [
+    {
+      type: StepType.CONFIGURE,
+      content: [
+        {
+          type: 'text',
+          text: getCrashReportModalConfigDescription({
+            link: 'https://docs.sentry.io/platforms/javascript/guides/react/user-feedback/configuration/#crash-report-modal',
+          }),
+        },
+        widgetCalloutBlock({
+          link: 'https://docs.sentry.io/platforms/javascript/guides/react/user-feedback/#user-feedback-widget',
+        }),
+      ],
+    },
+  ],
+  verify: () => [],
+  nextSteps: () => [],
+};

static/app/gettingStartedDocs/javascript/react/crashReport.tsx

@@ -0,0 +1,64 @@
+import crashReportCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/crashReportCallout';
+import type {
+  DocsParams,
+  OnboardingConfig,
+} from 'sentry/components/onboarding/gettingStartedDoc/types';
+import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/types';
+import {getFeedbackConfigureDescription} from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
+import {tct} from 'sentry/locale';
+
+import {getSdkSetupSnippet, installSnippetBlock} from './utils';
+
+export const feedback: OnboardingConfig = {
+  install: () => [
+    {
+      type: StepType.INSTALL,
+      content: [
+        {
+          type: 'text',
+          text: tct(
+            'For the User Feedback integration to work, you must have the Sentry browser SDK package, or an equivalent framework SDK (e.g. [code:@sentry/react]) installed, minimum version 7.85.0.',
+            {
+              code: <code />,
+            }
+          ),
+        },
+        installSnippetBlock,
+      ],
+    },
+  ],
+  configure: (params: DocsParams) => [
+    {
+      type: StepType.CONFIGURE,
+      content: [
+        {
+          type: 'text',
+          text: getFeedbackConfigureDescription({
+            linkConfig:
+              'https://docs.sentry.io/platforms/javascript/guides/react/user-feedback/configuration/',
+            linkButton:
+              'https://docs.sentry.io/platforms/javascript/guides/react/user-feedback/configuration/#bring-your-own-button',
+          }),
+        },
+        {
+          type: 'code',
+          tabs: [
+            {
+              label: 'JavaScript',
+              language: 'javascript',
+              code: getSdkSetupSnippet(params),
+            },
+          ],
+        },
+        {
+          type: 'custom',
+          content: crashReportCallout({
+            link: 'https://docs.sentry.io/platforms/javascript/guides/react/user-feedback/#crash-report-modal',
+          }),
+        },
+      ],
+    },
+  ],
+  verify: () => [],
+  nextSteps: () => [],
+};

static/app/gettingStartedDocs/javascript/react/feedback.tsx

@@ -0,0 +1,23 @@
+import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types';
+import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag';
+import {logs} from 'sentry/gettingStartedDocs/javascript/react/logs';
+
+import {crashReport} from './crashReport';
+import {feedback} from './feedback';
+import {onboarding} from './onboarding';
+import {performance} from './performance';
+import {profiling} from './profiling';
+import {replay} from './replay';
+
+const docs: Docs = {
+  onboarding,
+  feedbackOnboardingNpm: feedback,
+  replayOnboarding: replay,
+  performanceOnboarding: performance,
+  crashReportOnboarding: crashReport,
+  profilingOnboarding: profiling,
+  logsOnboarding: logs,
+  featureFlagOnboarding: featureFlag,
+};
+
+export default docs;

static/app/gettingStartedDocs/javascript/react/index.tsx

@@ -0,0 +1,9 @@
+import {getJavascriptLogsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+import {installSnippetBlock} from './utils';
+
+export const logs = getJavascriptLogsOnboarding({
+  installSnippetBlock,
+  docsPlatform: 'react',
+  packageName: '@sentry/react',
+});

static/app/gettingStartedDocs/javascript/react/logs.tsx

@@ -4,7 +4,7 @@ import {textWithMarkupMatcher} from 'sentry-test/utils';
 
 import {ProductSolution} from 'sentry/components/onboarding/gettingStartedDoc/types';
 
-import docs from './react';
+import docs from '.';
 
 describe('javascript-react onboarding docs', () => {
   it('renders onboarding docs correctly', () => {