docs: Mark debugging docs as unreleased, remove recommended metro con…

…fig step (#6529) ## Summary This PR removes confusing docs merged before changes related do the logger/metro config are released. I removed the metro config recommended step from quick start to prevent confusion (as in the #6507 issue) and marked respective pages in docs as unreleased on the sidebar and by using the info box on docs pages. <img width="1103" alt="Screenshot 2024-09-20 at 16 17 58" src="https://github.com/user-attachments/assets/356a2a8e-27ea-47d5-8c89-6545f3345b89"> ## Test plan Just start the docs and see that there is no more recommended metro config step and see **unreleased** labels near debugging docs pages.
software-mansion · Sep 20, 2024 · d6c0111 · d6c0111
1 parent c6ed2df
commit d6c0111
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 27 deletions.
diff --git a/packages/docs-reanimated/docs/_shared/_unreleased_info.mdx b/packages/docs-reanimated/docs/_shared/_unreleased_info.mdx
@@ -0,0 +1,6 @@
+:::info
+This page refers to changes that haven't been released yet. They will become available in the next minor release of Reanimated.
+
+:::
+
+<!-- TODO - this is a temporary component. It should be replaced by the valid implementation in the future. -->
diff --git a/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx b/packages/docs-reanimated/docs/debugging/accurate-call-stacks.mdx
@@ -6,6 +6,10 @@ sidebar_position: 1
 
 # Accurate Call Stacks
 
+import UnreleasedInfo from '../_shared/_unreleased_info.mdx';
+
+<UnreleasedInfo />
+
 When debugging Reanimated code, you may encounter error or warning call stacks that don't clearly indicate the root cause of the problem. These stacks can be misleading, as they often highlight code from Reanimated's internals rather than the misuse of the Reanimated API that is the source of the problem.
 
 To address this, Reanimated provides a Metro configuration wrapper called `wrapWithReanimatedMetroConfig`. This wrapper automatically adjusts your Metro config to improve the accuracy of call stacks in warnings and errors generated by the Reanimated library.

diff --git a/packages/docs-reanimated/docs/debugging/logger-configuration.mdx b/packages/docs-reanimated/docs/debugging/logger-configuration.mdx
@@ -6,6 +6,10 @@ sidebar_position: 2
 
 # Logger configuration
 
+import UnreleasedInfo from '../_shared/_unreleased_info.mdx';
+
+<UnreleasedInfo />
+
 Reanimated shows warnings that indicate misuses of the library API, such as modifying the [shared value](/docs/fundamentals/glossary#shared-value) during component re-render. These logs can be configured to be more or less verbose.
 
 The **default** logger configuration doesn't require any user setup and displays **all warnings and errors**. If you want to change this behavior, use the `configureReanimatedLogger` function.

diff --git a/packages/docs-reanimated/docs/fundamentals/getting-started.mdx b/packages/docs-reanimated/docs/fundamentals/getting-started.mdx
@@ -91,33 +91,7 @@ To learn more about the plugin head onto to [Reanimated babel plugin](/docs/fund
 
 </details>
 
-### Step 3: Wrap metro config with reanimated wrapper (recommended)
-
-Wrap your existing Metro configuration in the `metro.config.js` file with the `wrapWithReanimatedMetroConfig` function.
-
-```js
-// metro.config.js
-const {
-  wrapWithReanimatedMetroConfig,
-} = require('react-native-reanimated/metro-config');
-
-const config = {
-  // Your existing Metro configuration options
-};
-
-module.exports = wrapWithReanimatedMetroConfig(config);
-```
-
-<details>
-<summary>Why should I do this?</summary>
-
-Wrapping your Metro configuration with the Reanimated Metro config wrapper will result in displaying improved reanimated errors and warnings with more accurate call stacks. Thanks to this, identifying misuses of the Reanimated API will be much easier than before.
-
-To learn more about this feature, head onto to [Accurate Call Stacks](/docs/debugging/accurate-call-stacks).
-
-</details>
-
-### Step 4: Clear Metro bundler cache (recommended)
+### Step 3: Clear Metro bundler cache (recommended)
 
 <Tabs groupId="package-managers">
   <TabItem value="expo" label="EXPO" default>

diff --git a/packages/docs-reanimated/src/css/colors.css b/packages/docs-reanimated/src/css/colors.css
@@ -262,6 +262,9 @@
   --swm-sidebar-label-text-experimental: var(--swm-navy-light-100);
   --swm-sidebar-label-background-experimental: var(--swm-yellow-light-40);
 
+  --swm-sidebar-label-text-unreleased: var(--swm-navy-light-100);
+  --swm-sidebar-label-background-unreleased: var(--swm-blue-light-40);
+
   /* Mobile sidebar versions */
   --swm-sidebar-elements-version-text: var(--swm-navy-light-100);
   --swm-sidebar-elements-version-inactive: var(--swm-navy-dark-40);
@@ -440,6 +443,9 @@
   --swm-sidebar-label-text-experimental: var(--swm-off-white);
   --swm-sidebar-label-background-experimental: var(--swm-yellow-dark-120);
 
+  --swm-sidebar-label-text-unreleased: var(--swm-off-white);
+  --swm-sidebar-label-background-unreleased: var(--swm-blue-dark-120);
+
   /* Mobile sidebar versions */
   --swm-sidebar-elements-version-text: var(--swm-navy-dark-20);
   --swm-sidebar-elements-version-inactive: var(--swm-navy-dark-60);

diff --git a/packages/docs-reanimated/src/theme/DocSidebar/index.js b/packages/docs-reanimated/src/theme/DocSidebar/index.js
@@ -15,11 +15,16 @@ export default function DocSidebarWrapper(props) {
 
   const newItems = ['animations/withClamp'];
   const experimentalItems = ['shared-element-transitions/overview'];
+  const unreleasedItems = [
+    'debugging/accurate-call-stacks',
+    'debugging/logger-configuration',
+  ];
 
   return (
     <DocSidebar
       newItems={newItems}
       experimentalItems={experimentalItems}
+      unreleasedItems={unreleasedItems}
       heroImages={heroImages}
       titleImages={titleImages}
       {...props}