docs: add features page

Summary: Adding a "features" page to the to bar and splitting plugin descriptions from their setup instructions.

Reviewed By: jknoxville

Differential Revision: D15147464

fbshipit-source-id: b2106d825454c3b2989eb1e536b128ef9b6d0247

docs/setup/crash-reporter-plugin.md

@@ -0,0 +1,31 @@
+---
+id: crash-reporter-plugin
+title: Crash Reporter Setup
+sidebar_label: Crash Reporter
+---
+
+## Android
+
+```java
+import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
+
+client.addPlugin(CrashReporterPlugin.getInstance());
+```
+
+
+## iOS
+
+<!--DOCUSAURUS_CODE_TABS-->
+<!--Objective-C-->
+```objectivec
+#import <FlipperKitCrashReporterPlugin/FlipperKitCrashReporterPlugin.h>
+
+[client addPlugin:[FlipperKitCrashReporterPlugin sharedInstance]];
+```
+<!--Swift-->
+```swift
+import FlipperKit
+
+client?.add(FlipperKitCrashReporterPlugin.sharedInstance());
+```
+<!--END_DOCUSAURUS_CODE_TABS-->

docs/setup/layout-plugin.md

@@ -0,0 +1,88 @@
+---
+id: layout-plugin
+title: Layout Inspector Setup
+sidebar_label: Layout Inspector
+---
+
+To use the layout inspector plugin, you need to add the plugin to your Flipper client instance.
+
+## Android
+
+**Standard Android View Only**
+
+```java
+import com.facebook.flipper.plugins.inspector.DescriptorMapping;
+import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
+
+final DescriptorMapping descriptorMapping = DescriptorMapping.withDefaults();
+client.addPlugin(new InspectorFlipperPlugin(mApplicationContext, descriptorMapping));
+```
+
+**With Litho Support**
+
+If you want to enable Litho support in the layout inspector, you need to augment
+the descriptor with Litho-specific settings and add some addition dependencies.
+
+```java
+import com.facebook.litho.config.ComponentsConfiguration;
+import com.facebook.flipper.plugins.inspector.DescriptorMapping;
+import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
+import com.facebook.flipper.plugins.litho.LithoFlipperDescriptors;
+
+// Instead of hard-coding this setting, it's a good practice to tie
+// this to a BuildConfig flag, that you only enable for debug builds
+// of your application.
+ComponentsConfiguration.isDebugModeEnabled = true;
+
+final DescriptorMapping descriptorMapping = DescriptorMapping.withDefaults();
+// This adds Litho capabilities to the layout inspector.
+LithoFlipperDescriptors.add(descriptorMapping);
+
+client.addPlugin(new InspectorFlipperPlugin(mApplicationContext, descriptorMapping));
+```
+
+You also need to compile in the `litho-annotations` package, as Flipper reflects
+on them at runtime. So ensure to not just include them as `compileOnly` in your
+gradle configuration:
+
+```groovy
+dependencies {
+  debugImplementation 'com.facebook.litho:litho-annotations:0.19.0'
+  // ...
+}
+```
+
+
+### Blocking fullscreen views (Android only)
+
+The issue is that if you have some view that occupies big part of the screen but draws nothing and its Z-position is higher than your main content, then selecting view/component through Layout Inspector doesn't work as you intended, as it will always hit that transparent view and you need to manually navigate to the view you need which is time-consuming and should not be necessary.
+
+Add the following tag to your view to skip it from Flipper's view picker. The view will still be shown in the layout hierarchy, but it will not be selected while using the view picker.
+
+```java
+view.setTag("flipper_skip_view_traversal", true);
+```
+
+
+## iOS
+
+<!--DOCUSAURUS_CODE_TABS-->
+<!--Objective-C-->
+```objective-c
+#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
+#import <FlipperKitLayoutPlugin/SKDescriptorMapper.h>
+
+SKDescriptorMapper *mapper = [[SKDescriptorMapper alloc] initWithDefaults];
+[client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:context.application withDescriptorMapper:mapper]]
+```
+<!--Swift-->
+```swift
+import FlipperKit
+
+let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
+// If you want to debug componentkit view in swift, otherwise you can ignore the next line
+FlipperKitLayoutComponentKitSupport.setUpWith(layoutDescriptorMapper)
+
+client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
+```
+<!--END_DOCUSAURUS_CODE_TABS-->

docs/setup/leak-canary-plugin.md

@@ -0,0 +1,38 @@
+---
+id: leak-canary-plugin
+title: LeakCanary Setup
+sidebar_label: LeakCanary
+---
+
+Ensure that you already have an explicit dependency in your application's
+`build.gradle`, e.g.
+
+```groovy
+dependencies {
+  debugImplementation 'com.squareup.leakcanary:leakcanary-android:1.6.1'
+  releaseImplementation 'com.squareup.leakcanary:leakcanary-android-no-op:1.6.1'
+}
+```
+
+First, add the plugin to your Flipper client instance:
+```java
+import com.facebook.flipper.plugins.leakcanary.LeakCanaryFlipperPlugin;
+
+client.addPlugin(new LeakCanaryFlipperPlugin());
+```
+
+Next, build a custom RefWatcher using RecordLeakService: (see [LeakCanary docs](https://github.com/square/leakcanary/wiki/Customizing-LeakCanary#uploading-to-a-server) for more information on RefWatcher)
+```java
+import com.facebook.flipper.plugins.leakcanary.RecordLeakService;
+
+RefWatcher refWatcher = LeakCanary.refWatcher(this)
+    .listenerServiceClass(RecordLeakService.class);
+    .buildAndInstall();
+```
+
+
+Then, add the `RecordLeakService` in your debug variant AndroidManifest.xml.
+
+```xml
+    <service android:name="com.facebook.flipper.plugins.leakcanary.RecordLeakService" />
+```

docs/setup/network-plugin.md

@@ -0,0 +1,38 @@
+---
+id: network-plugin
+title: Network Setup
+sidebar_label: Network
+---
+
+To use the network plugin, you need to add the plugin to your Flipper client instance.
+
+## Android
+
+```java
+import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
+
+NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
+client.addPlugin(networkFlipperPlugin);
+```
+
+### OkHttp Integration
+
+If you are using the popular OkHttp library, you can use the Interceptors system to automatically hook into your existing stack.
+
+```java
+import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
+
+new OkHttpClient.Builder()
+    .addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin))
+    .build();
+```
+
+As interceptors can modify the request and response, add the Flipper interceptor after all others to get an accurate view of the network traffic.
+
+## iOS
+
+```objective-c
+#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
+
+[client addPlugin: [FlipperKitNetworkPlugin new]]
+```

docs/setup/sandbox-plugin.md

@@ -0,0 +1,17 @@
+---
+id: sandbox-plugin
+title: Sandbox Setup
+sidebar_label: Sandbox
+---
+
+To use the sandbox plugin, you need to add the plugin to your Flipper client instance. Currently the plugin is only supported on Android.
+
+## Android
+
+```java
+import com.facebook.flipper.plugins.sandbox.SandboxFlipperPlugin;
+import com.facebook.flipper.plugins.sandbox.SandboxFlipperPluginStrategy;
+
+final SandboxFlipperPluginStrategy strategy = getStrategy(); // Your strategy goes here
+client.addPlugin(new SandboxFlipperPlugin(strategy));
+```

docs/setup/shared-preferences-plugin.md

@@ -0,0 +1,34 @@
+---
+id: shared-preferences-plugin
+title: Shared Preferences Setup
+sidebar_label: Shared Preferences
+---
+
+This plugin is available for both Android and iOS.
+
+## Android
+
+```java
+import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
+
+client.addPlugin(
+    new SharedPreferencesFlipperPlugin(context, "my_shared_preference_file"));
+```
+
+## iOS
+
+
+<!--DOCUSAURUS_CODE_TABS-->
+<!--Objective-C-->
+```objc
+#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
+
+[client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:@"your_suitename"]];
+```
+<!--Swift-->
+```swift
+import FlipperKit
+
+client?.add(FKUserDefaultsPlugin.init(suiteName: "your_suitename"))
+```
+<!--END_DOCUSAURUS_CODE_TABS-->