diff --git a/docs/communicating.md b/docs/communicating.md index ecb56854c..1fac339d0 100644 --- a/docs/communicating.md +++ b/docs/communicating.md @@ -7,7 +7,7 @@ sidebar_label: Device Communication To start communicating with a client your plugin must implement the init function. Once this function has been called the active client can also be accessed via `this.client`. This `id` of the plugin in JavaScript must match the native plugin `id` to allow for them to communicate. ```javascript -class extends SonarPlugin { +class extends FlipperPlugin { static title = "MyPlugin"; static id = 'MyPlugin'; diff --git a/docs/create-table-plugin.md b/docs/create-table-plugin.md index 57b80d96f..0333a3eb0 100644 --- a/docs/create-table-plugin.md +++ b/docs/create-table-plugin.md @@ -13,7 +13,7 @@ Below is a sample implementation of a desktop plugin based on `createTablePlugin See "[Create Plugin](create-plugin.md)" for how to create the native counterpart for your plugin. ```javascript -import {ManagedDataInspector, Panel, Text, createTablePlugin} from 'sonar'; +import {ManagedDataInspector, Panel, Text, createTablePlugin} from 'flipper'; type Id = string; diff --git a/docs/getting-started.md b/docs/getting-started.md index 2b1bb0259..6d43a9f9c 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -15,7 +15,7 @@ To use Flipper, you need to add the mobile SDK to your app. ### Desktop app -The desktop part of Sonar doesn't need any particular setup. Simply [download the latest build](https://www.facebook.com/fbflipper/public/mac) of our app and launch it. The desktop app is available for macOS and requires a working installation of the Android/iOS development tools on your system. +The desktop part of Flipper doesn't need any particular setup. Simply [download the latest build](https://www.facebook.com/fbflipper/public/mac) of our app and launch it. The desktop app is available for macOS and requires a working installation of the Android/iOS development tools on your system. Once you start Flipper and launch an emulator/simulator or connect a device, you will already be able to see the device logs in Flipper. To see app specific data, you need to integrate our native SDKs with your app. @@ -91,7 +91,7 @@ To integrate with an iOS app, you can use [CocoaPods](https://cocoapods.org). Ad ```ruby project 'MyApp.xcodeproj' -source 'https://github.com/facebook/Sonar.git' +source 'https://github.com/facebook/flipper.git' source 'https://github.com/CocoaPods/Specs' swift_version = "4.1" sonarkit_version = '0.7.2' diff --git a/docs/jssetup.md b/docs/jssetup.md index 0c2a0168e..271602da7 100644 --- a/docs/jssetup.md +++ b/docs/jssetup.md @@ -18,12 +18,12 @@ To create the desktop part of your plugin, initiate a new JavaScript project usi } ``` -In `index.js` you can now create your plugin. We expect this file to have a default export of type `SonarPlugin`. A hello-world-plugin could look like this: +In `index.js` you can now create your plugin. We expect this file to have a default export of type `FlipperPlugin`. A hello-world-plugin could look like this: ```js -import {SonarPlugin} from 'sonar'; +import {FlipperPlugin} from 'flipper'; -export default class extends SonarPlugin { +export default class extends FlipperPlugin { render() { return 'hello world'; } @@ -38,7 +38,7 @@ Once a plugin is created, Flipper can load it from its folder. The path from whe ### npm dependencies -If you need any dependencies in your plugin, you can install them using `yarn add`. The Flipper UI components exported from `sonar`, as well as `react` and `react-dom` don't need to be installed as dependencies. Our plugin-loader makes these dependencies available to your plugin. +If you need any dependencies in your plugin, you can install them using `yarn add`. The Flipper UI components exported from `flipper`, as well as `react` and `react-dom` don't need to be installed as dependencies. Our plugin-loader makes these dependencies available to your plugin. ### ES6, babel-transforms and bundling diff --git a/docs/leak-canary-plugin.md b/docs/leak-canary-plugin.md index a87ed1045..402d39617 100644 --- a/docs/leak-canary-plugin.md +++ b/docs/leak-canary-plugin.md @@ -3,7 +3,7 @@ id: leak-canary-plugin title: LeakCanary --- -The LeakCanary plugin provides developers with Sonar support for [LeakCanary](https://github.com/square/leakcanary), an open source memory leak detection library. +The LeakCanary plugin provides developers with Flipper support for [LeakCanary](https://github.com/square/leakcanary), an open source memory leak detection library. ## Setup @@ -11,7 +11,7 @@ Note: this plugin is only available for Android. ### Android -First, add the plugin to your Sonar client instance: +First, add the plugin to your Flipper client instance: ```java import com.facebook.sonar.plugins.leakcanary.LeakCanarySonarPlugin; @@ -29,5 +29,5 @@ RefWatcher refWatcher = LeakCanary.refWatcher(this) ## Usage -Leaks detected by LeakCanary will appear automatically in Sonar. Each leak will display a hierarchy of objects, beginning from the garbage collector root and ending at the leaked class. +Leaks detected by LeakCanary will appear automatically in Flipper. Each leak will display a hierarchy of objects, beginning from the garbage collector root and ending at the leaked class. Selecting any object in this list will display contents of the object's various fields. diff --git a/docs/styling-components.md b/docs/styling-components.md index 9bbebd18d..258d3fe9d 100644 --- a/docs/styling-components.md +++ b/docs/styling-components.md @@ -11,7 +11,7 @@ We use a styled-component based approach to styling our views. This means styles For basic building blocks (views, texts, ...) you can use the styled object. ```javascript -import {styled} from 'sonar'; +import {styled} from 'flipper'; const MyView = styled.view({ fontSize: 10, diff --git a/docs/ui-components.md b/docs/ui-components.md index 17a6b777f..ba219c283 100644 --- a/docs/ui-components.md +++ b/docs/ui-components.md @@ -4,14 +4,14 @@ title: UI Components sidebar_label: UI Components --- -Flipper has a lot of built in React components to build UIs. You can find all of these in [`src/ui/components`](https://github.com/facebook/Flipper/tree/master/src/ui/components) and can import them directly using `import {Button} from 'sonar'`. +Flipper has a lot of built in React components to build UIs. You can find all of these in [`src/ui/components`](https://github.com/facebook/Flipper/tree/master/src/ui/components) and can import them directly using `import {Button} from 'flipper'`. ## FlexBox In Flipper we make heavy use of flexbox for layout. FlexBox is layout system on the web which has been specifically design for building application like UIs. Flipper provides two flexbox components `FlexRow` and `FlexColumn`. These are flexbox components with some sane defaults such as automatically scrolling content that overflows. ```javascript -import { FlexRow, FlexColumn } from 'sonar'; +import { FlexRow, FlexColumn } from 'flipper'; // Align children horizontally @@ -27,7 +27,7 @@ import { FlexRow, FlexColumn } from 'sonar'; To control other flexbox properties than the direction you can extend existing components, detailed in [Styling Components](styling-components.md). ```javascript -import {FlexRow, styled} from 'sonar'; +import {FlexRow, styled} from 'flipper'; const CenterFlexRow = FlexRow.extends({ justifyContent: 'center', @@ -42,7 +42,7 @@ const CenterFlexRow = FlexRow.extends({ The `Text` component is available to render any text in your plugin. To render headers and subtitle differently for example, we used the styled module. With this we can also change the color, text alignment, and any other properties typically found on a `span`. ```javascript -import {Text, styled, colors} from 'sonar'; +import {Text, styled, colors} from 'flipper'; const Title = Text.extends({ color: colors.red, @@ -56,7 +56,7 @@ const Title = Text.extends({ Flipper comes with a couple of button styles built in! As always you can style then further using the styled module but we expect the pre-defined buttons to fit most UIs. ```javascript -import {Button} from 'sonar'; +import {Button} from 'flipper';