jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Docs

Browse Source 
Summary: renaming flipper in docs

Reviewed By: passy

Differential Revision: D9871491

fbshipit-source-id: 7a7dcc8421229f3a253efc6a49202dad5c7315d0
This commit is contained in:
Daniel Büchele
2018-09-18 06:38:30 -07:00
committed by Facebook Github Bot
parent 3e4c24d6fe
commit 159ce69bc8
7 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/communicating.md
View File

@@ -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. 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 ```javascript
class extends SonarPlugin { class extends FlipperPlugin {
static title = "MyPlugin"; static title = "MyPlugin";
static id = 'MyPlugin'; static id = 'MyPlugin';

2
docs/create-table-plugin.md
View File

@@ -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. See "[Create Plugin](create-plugin.md)" for how to create the native counterpart for your plugin.
```javascript ```javascript
import {ManagedDataInspector, Panel, Text, createTablePlugin} from 'sonar'; import {ManagedDataInspector, Panel, Text, createTablePlugin} from 'flipper';
type Id = string; type Id = string;

4
docs/getting-started.md
View File

@@ -15,7 +15,7 @@ To use Flipper, you need to add the mobile SDK to your app.
### Desktop 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. 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 ```ruby
project 'MyApp.xcodeproj' project 'MyApp.xcodeproj'
source 'https://github.com/facebook/Sonar.git' source 'https://github.com/facebook/flipper.git'
source 'https://github.com/CocoaPods/Specs' source 'https://github.com/CocoaPods/Specs'
swift_version = "4.1" swift_version = "4.1"
sonarkit_version = '0.7.2' sonarkit_version = '0.7.2'

8
docs/jssetup.md
View File

@@ -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 ```js
import {SonarPlugin} from 'sonar'; import {FlipperPlugin} from 'flipper';
export default class extends SonarPlugin { export default class extends FlipperPlugin {
render() { render() {
return 'hello world'; 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 ### 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 ### ES6, babel-transforms and bundling

6
docs/leak-canary-plugin.md
View File

@@ -3,7 +3,7 @@ id: leak-canary-plugin
title: LeakCanary 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 ## Setup
@@ -11,7 +11,7 @@ Note: this plugin is only available for Android.
### Android ### Android
First, add the plugin to your Sonar client instance: First, add the plugin to your Flipper client instance:
```java ```java
import com.facebook.sonar.plugins.leakcanary.LeakCanarySonarPlugin; import com.facebook.sonar.plugins.leakcanary.LeakCanarySonarPlugin;
@@ -29,5 +29,5 @@ RefWatcher refWatcher = LeakCanary.refWatcher(this)
## Usage ## 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. Selecting any object in this list will display contents of the object's various fields.

2
docs/styling-components.md
View File

@@ -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. For basic building blocks (views, texts, ...) you can use the styled object.
```javascript ```javascript
import {styled} from 'sonar'; import {styled} from 'flipper';
const MyView = styled.view({ const MyView = styled.view({
fontSize: 10, fontSize: 10,

50
docs/ui-components.md
View File

@@ -4,14 +4,14 @@ title: UI Components
sidebar_label: 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 ## 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. 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 ```javascript
import { FlexRow, FlexColumn } from 'sonar'; import { FlexRow, FlexColumn } from 'flipper';
// Align children horizontally // Align children horizontally
<FlexRow> <FlexRow>
@@ -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). To control other flexbox properties than the direction you can extend existing components, detailed in [Styling Components](styling-components.md).
```javascript ```javascript
import {FlexRow, styled} from 'sonar'; import {FlexRow, styled} from 'flipper';
const CenterFlexRow = FlexRow.extends({ const CenterFlexRow = FlexRow.extends({
justifyContent: 'center', 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`. 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 ```javascript
import {Text, styled, colors} from 'sonar'; import {Text, styled, colors} from 'flipper';
const Title = Text.extends({ const Title = Text.extends({
color: colors.red, 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. 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 ```javascript
import {Button} from 'sonar'; import {Button} from 'flipper';
<Button onClick={this.onClick} icon="airport" compact={true}> <Button onClick={this.onClick} icon="airport" compact={true}>
Click Me! Click Me!
@@ -67,15 +67,15 @@ You can create a group of buttons by surrounding it with `<ButtonGroup>`.
## Sidebar ## Sidebar
The `Sidebar` component provides a nice abstraction around some common but complex behavior. The `Sidebar` is used by all major Sonar plugins and using it in your plugin will ensure your plugin behaves similarly, such as allowing for resizing. The `Sidebar` component provides a nice abstraction around some common but complex behavior. The `Sidebar` is used by all major Flipper plugins and using it in your plugin will ensure your plugin behaves similarly, such as allowing for resizing.
```javascript ```javascript
import {FlexRow, Sidebar, colors, styled} from 'infinity-ui'; import {FlexRow, Sidebar, colors, styled} from 'infinity-ui';
import {SonarPlugin} from 'sonar'; import {FlipperPlugin} from 'flipper';
type State = {}; type State = {};
export default class MySonarPlugin extends SonarPlugin<State> { export default class MyFlipperPlugin extends FlipperPlugin<State> {
static title = 'My Plugin'; static title = 'My Plugin';
static id = 'my-plugin'; static id = 'my-plugin';
@@ -90,10 +90,10 @@ export default class MySonarPlugin extends SonarPlugin<State> {
render() { render() {
return ( return (
<FlexRow fill={true}> <FlexRow fill={true}>
<MySonarPlugin.Red fill={true} /> <MyFlipperPlugin.Red fill={true} />
<Sidebar position="right" width={400} minWidth={300}> <Sidebar position="right" width={400} minWidth={300}>
<MySonarPlugin.Blue fill={true} /> <MyFlipperPlugin.Blue fill={true} />
</Sidebar> </Sidebar>
</FlexRow> </FlexRow>
); );
@@ -113,12 +113,12 @@ import {
Panel, Panel,
colors, colors,
styled, styled,
SonarPlugin, FlipperPlugin,
} from 'sonar'; } from 'flipper';
type State = {}; type State = {};
export default class MySonarPlugin extends SonarPlugin<State> { export default class MyFlipperPlugin extends FlipperPlugin<State> {
static title = 'My Plugin'; static title = 'My Plugin';
static id = 'my-plugin'; static id = 'my-plugin';
@@ -139,16 +139,16 @@ export default class MySonarPlugin extends SonarPlugin<State> {
render() { render() {
return ( return (
<FlexRow fill={true}> <FlexRow fill={true}>
<MySonarPlugin.Red fill={true} /> <MyFlipperPlugin.Red fill={true} />
<Sidebar position="right" width={400} minWidth={300}> <Sidebar position="right" width={400} minWidth={300}>
<FlexColumn> <FlexColumn>
<Panel heading={'Blue'} floating={false}> <Panel heading={'Blue'} floating={false}>
<MySonarPlugin.Blue /> <MyFlipperPlugin.Blue />
</Panel> </Panel>
<Panel heading={'Green'} floating={false}> <Panel heading={'Green'} floating={false}>
<MySonarPlugin.Green /> <MyFlipperPlugin.Green />
</Panel> </Panel>
</FlexColumn> </FlexColumn>
</Sidebar> </Sidebar>
@@ -163,11 +163,11 @@ export default class MySonarPlugin extends SonarPlugin<State> {
The `DataInspector` component is used to unpack and display a javascript object. It is used to show View properties in the layout inspector, and to show event data in the analytics plugins. The `DataInspector` component is used to unpack and display a javascript object. It is used to show View properties in the layout inspector, and to show event data in the analytics plugins.
```javascript ```javascript
import {FlexColumn, DataInspector, SonarPlugin} from 'sonar'; import {FlexColumn, DataInspector, FlipperPlugin} from 'flipper';
type State = {}; type State = {};
export default class MySonarPlugin extends SonarPlugin<State> { export default class MyFlipperPlugin extends FlipperPlugin<State> {
static title = 'My Plugin'; static title = 'My Plugin';
static id = 'my-plugin'; static id = 'my-plugin';
@@ -180,7 +180,7 @@ export default class MySonarPlugin extends SonarPlugin<State> {
render() { render() {
return ( return (
<FlexColumn fill={true}> <FlexColumn fill={true}>
<DataInspector data={MySonarPlugin.data} /> <DataInspector data={MyFlipperPlugin.data} />
</FlexColumn> </FlexColumn>
); );
} }
@@ -192,9 +192,9 @@ export default class MySonarPlugin extends SonarPlugin<State> {
The `Toolbar` component can display a toolbar with buttons, inputs, etc. A `<Spacer />` can be used to fill the space between items. The `Toolbar` component can display a toolbar with buttons, inputs, etc. A `<Spacer />` can be used to fill the space between items.
```javascript ```javascript
import {Toolbar, Spacer, Button, SonarPlugin} from 'sonar'; import {Toolbar, Spacer, Button, FlipperPlugin} from 'flipper';
export default class MySonarPlugin extends SonarPlugin<State> { export default class MyFlipperPlugin extends FlipperPlugin<State> {
render() { render() {
return ( return (
<Toolbar fill={true}> <Toolbar fill={true}>
@@ -212,9 +212,9 @@ export default class MySonarPlugin extends SonarPlugin<State> {
Used to display content in an overlay. Used to display content in an overlay.
```javascript ```javascript
import {Popover, SonarPlugin} from 'sonar'; import {Popover, FlipperPlugin} from 'flipper';
export default class MySonarPlugin extends SonarPlugin<State> { export default class MyFlipperPlugin extends FlipperPlugin<State> {
render() { render() {
return ( return (
{this.state.popoverVisible && <Popover onDismiss={() => this.setState({popoverVisible: false})}> {this.state.popoverVisible && <Popover onDismiss={() => this.setState({popoverVisible: false})}>
@@ -230,9 +230,9 @@ export default class MySonarPlugin extends SonarPlugin<State> {
Add a native context menu to a component by wrapping it with the ContextMenu component. Add a native context menu to a component by wrapping it with the ContextMenu component.
```javascript ```javascript
import {ContextMenu, SonarPlugin} from 'sonar'; import {ContextMenu, FlipperPlugin} from 'flipper';
export default class MySonarPlugin extends SonarPlugin<State> { export default class MyFlipperPlugin extends FlipperPlugin<State> {
contextMenuItems = [ contextMenuItems = [
{ {
label: 'Copy', label: 'Copy',