From c866ba94287cdac95bc760c8db43bc04f3c6d5b0 Mon Sep 17 00:00:00 2001 From: John Knox Date: Fri, 3 May 2019 09:44:44 -0700 Subject: [PATCH] Fix website yarn start Summary: Inlining the component docs header instead of reading it from the same file we write to. Reviewed By: passy Differential Revision: D15199683 fbshipit-source-id: dc34e25b5f8073aa582f90a14bc875c8e8c431db --- docs/ui-components.md | 694 ------------------------------------- website/generate-uidocs.js | 9 +- website/i18n/en.json | 3 +- 3 files changed, 9 insertions(+), 697 deletions(-) delete mode 100644 docs/ui-components.md diff --git a/docs/ui-components.md b/docs/ui-components.md deleted file mode 100644 index e404385ba..000000000 --- a/docs/ui-components.md +++ /dev/null @@ -1,694 +0,0 @@ ---- -id: ui-components -title: UI Components -sidebar_label: UI Components ---- - -Flipper has a lot of built in React components to build UIs. You can import them directly using e.g. `import {Button} from 'flipper'`. - -## Button - -A simple button, used in many parts of the application. - -| Property | Type | Description | -|---------|------|-------------| -| `onClick` | `(event: SyntheticMouseEvent<>) => any` | onClick handler. | -| `disabled` | `boolean` | Whether this button is disabled. | -| `large` | `boolean` | Whether this button is large. Increases padding and line-height. | -| `compact` | `boolean` | Whether this button is compact. Decreases padding and line-height. | -| `type` | `'primary' ⎮ 'success' ⎮ 'warning' ⎮ 'danger'` | Type of button. | -| `children` | `React$Node` | Children. | -| `dropdown` | `Array` | Dropdown menu template shown on click. | -| `icon` | `string` | Name of the icon dispalyed next to the text | -| `iconSize` | `number` | Size of the icon in pixels. | -| `selected` | `boolean` | For toggle buttons, if the button is selected | -| `pulse` | `boolean` | Button is pulsing | -| `href` | `string` | URL to open in the browser on click | -| `depressed` | `boolean` | Whether the button should render depressed into its socket | -| `iconVariant` | `'filled' ⎮ 'outline'` | Style of the icon. `filled` is the default | -| `padded` | `boolean` | Whether the button should have additional padding left and right. | -| `windowIsFocused` | `boolean` | | - - -## ButtonGroup - -Group a series of buttons together. - -```jsx - - - - - -``` - -| Property | Type | Description | -|---------|------|-------------| -| `children` | `React$Node` | | - - -## ButtonNavigationGroup - -Button group to navigate back and forth. - -| Property | Type | Description | -|---------|------|-------------| -| `canGoBack` | `boolean` | Back button is enabled | -| `canGoForward` | `boolean` | Forwards button is enabled | -| `onBack` | `() => void` | Callback when back button is clicked | -| `onForward` | `() => void` | Callback when forwards button is clicked | - - -## Checkbox - -A checkbox to toggle UI state - -| Property | Type | Description | -|---------|------|-------------| -| `checked` | `boolean` | Whether the checkbox is checked. | -| `onChange` | `(checked: boolean) => void` | Called when a state change is triggered | - - -## Console - - - -| Property | Type | Description | -|---------|------|-------------| -| `client` | `PluginClient` | | -| `getContext` | `() => string` | | - - -## ContextMenu - -Native context menu that is shown on secondary click. -Uses [Electron's context menu API](https://electronjs.org/docs/api/menu-item) -to show menu items. - -Separators can be added by `{type: 'separator'}` - -| Property | Type | Description | -|---------|------|-------------| -| `items` | `Array` | List of items in the context menu. Used for static menus. | -| `buildItems` | `() => MenuTemplate` | Function to generate the menu. Called right before the menu is showed. Used for dynamic menus. | -| `children` | `React$Node` | Nodes that should have a context menu | -| `component` | `React.ComponentType ⎮ string` | The component that is used to wrap the children. Defaults to `FlexColumn`. | - - -## ContextMenuProvider - -Flipper's root is already wrapped with this component, so plugins should not -need to use this. ContextMenu is what you probably want to use. - -| Property | Type | Description | -|---------|------|-------------| -| `children` | `React$Node` | | - - -## DataDescription - - - -| Property | Type | Description | -|---------|------|-------------| -| `path` | `Array` | | -| `type` | `string` | | -| `value` | `any` | | -| `setValue` | `?DataInspectorSetValue` | | - - -## DataInspector - -An expandable data inspector. - -This component is fairly low level. It's likely you're looking for -[``](). - -| Property | Type | Description | -|---------|------|-------------| -| `data` | `any` | Object to inspect. | -| `diff` | `any` | Object to compare with the provided `data` property. Differences will be styled accordingly in the UI. | -| `name` | `string` | Current name of this value. | -| `depth` | `number` | Current depth. | -| `path` | `Array` | An array containing the current location of the data relative to its root. | -| `expandRoot` | `boolean` | Whether to expand the root by default. | -| `expanded` | `{ [key: string]: boolean, }` | An array of paths that are currently expanded. | -| `extractValue` | `( value: any, depth: number, ) => ?{⎮ mutable: boolean, type: string, value: any, ⎮}` | An optional callback that will explode a value into its type and value. Useful for inspecting serialised data. | -| `onExpanded` | `?(expanded: DataInspectorExpanded) => void` | Callback whenever the current expanded paths is changed. | -| `setValue` | `?(path: Array, val: any) => void` | Callback when a value is edited. | -| `collapsed` | `boolean` | Whether all objects and arrays should be collapsed by default. | -| `ancestry` | `Array` | Ancestry of parent objects, used to avoid recursive objects. | -| `tooltips` | `Object` | Object of properties that will have tooltips | - - -## DataPreview - - - -| Property | Type | Description | -|---------|------|-------------| -| `type` | `string` | | -| `value` | `any` | | -| `depth` | `number` | | -| `extractValue` | `DataValueExtractor` | | -| `maxProperties` | `number` | | - - -## ManagedDataInspector - -Wrapper around `DataInspector` that handles expanded state. - -If you require lower level access to the state then use `DataInspector` -directly. - -| Property | Type | Description | -|---------|------|-------------| -| `data` | `any` | Object to inspect. | -| `diff` | `any` | Object to compare with the provided `data` property. Differences will be styled accordingly in the UI. | -| `expandRoot` | `boolean` | Whether to expand the root by default. | -| `extractValue` | `DataValueExtractor` | An optional callback that will explode a value into its type and value. Useful for inspecting serialised data. | -| `setValue` | `(path: Array, val: any) => void` | Callback when a value is edited. | -| `collapsed` | `boolean` | Whether all objects and arrays should be collapsed by default. | -| `tooltips` | `Object` | Object of all properties that will have tooltips | - - -## Elements - - - -| Property | Type | Description | -|---------|------|-------------| -| `root` | `?ElementID` | | -| `selected` | `?ElementID` | | -| `focused` | `?ElementID` | | -| `searchResults` | `?ElementSearchResultSet` | | -| `elements` | `{[key: ElementID]: Element}` | | -| `onElementSelected` | `(key: ElementID) => void` | | -| `onElementExpanded` | `(key: ElementID, deep: boolean) => void` | | -| `onElementHovered` | `?(key: ?ElementID) => void` | | -| `alternateRowColor` | `boolean` | | -| `contextMenuExtensions` | `Array` | | - - -## ElementsInspector - - - -| Property | Type | Description | -|---------|------|-------------| -| `onElementExpanded` | `(key: ElementID, deep: boolean) => void` | | -| `onElementSelected` | `(key: ElementID) => void` | | -| `onElementHovered` | `?(key: ?ElementID) => void` | | -| `onValueChanged` | `?(path: Array, val: any) => void` | | -| `selected` | `?string` | | -| `focused` | `?string` | | -| `searchResults` | `?{⎮ query: string, matches: Set, ⎮}` | | -| `root` | `?string` | | -| `elements` | `{[key: ElementID]: Element}` | | -| `useAppSidebar` | `boolean` | | -| `alternateRowColor` | `boolean` | | -| `contextMenuExtensions` | `Array` | | - - -## InspectorSidebar - - - -| Property | Type | Description | -|---------|------|-------------| -| `element` | `?Element` | | -| `tooltips` | `Object` | | -| `onValueChanged` | `?(path: Array, val: any) => void` | | -| `client` | `PluginClient` | | -| `realClient` | `Client` | | -| `logger` | `Logger` | | -| `extensions` | `Array` | | - - -## ErrorBlock - -Displaying error messages in a red box. - -| Property | Type | Description | -|---------|------|-------------| -| `error` | `Error ⎮ string ⎮ void` | Error message to display. Error object's `stack` or `message` property is used. | -| `className` | `string` | Additional className added to the container. | - - -## ErrorBoundary - -Boundary catching errors and displaying an ErrorBlock instead. - -| Property | Type | Description | -|---------|------|-------------| -| `buildHeading` | `(err: Error) => string` | Function to dynamically generate the heading of the ErrorBox. | -| `heading` | `string` | Heading of the ErrorBox. Used as an alternative to `buildHeading`. | -| `showStack` | `boolean` | Whether the stacktrace of the error is shown in the error box | -| `children` | `React$Node` | Code that might throw errors that will be catched | - - -## File - -Wrapper for loading file content from the file system. - -| Property | Type | Description | -|---------|------|-------------| -| `src` | `string` | Path to the file in the file system | -| `buffer` | `?string` | Initial content that should be shown while the file is loading | -| `encoding` | `string` | Encoding to parse the contents of the file. Defaults to UTF-8. | -| `onError` | `(err: Error) => React.Element` | Content that should be rendered, when the file loading failed. | -| `onLoading` | `() => React.Element` | Content that should be rendered, while the file is loaded. | -| `onData` | `(content: string) => void` | Callback when the data is successfully loaded. | -| `onLoad` | `(content: string) => React.Element` | Content that should be rendered, when the file is successfully loaded. This ususally should render the file's contents. | - - -## FileList - -List the contents of a folder from the user's file system. The file system is watched for -changes and this list will automatically update. - -| Property | Type | Description | -|---------|------|-------------| -| `src` | `string` | Path to the folder | -| `onError` | `?(err: Error) => React$Node` | Content to be rendered in case of an error | -| `onLoad` | `() => void` | Content to be rendered while loading | -| `onFiles` | `(files: FileListFiles) => React$Node` | Content to be rendered when the file list is loaded | - - -## FilterRow - - - -| Property | Type | Description | -|---------|------|-------------| -| `children` | `ReactNode` | | -| `addFilter` | `(filter: Filter) => void` | | -| `filterKey` | `string` | | - - -## FlexBox - -A container using flexbox to layout its children - - - -## FlexCenter - -A container displaying its children horizontally and vertically centered. - - - -## FlexColumn - -A container displaying its children in a column - - - -## FlexRow - -A container displaying its children in a row - - - -## FocusableBox - - - -| Property | Type | Description | -|---------|------|-------------| -| `focusable` | `` | | - - -## Glyph - - - -| Property | Type | Description | -|---------|------|-------------| -| `name` | `string` | | -| `size` | `8 ⎮ 10 ⎮ 12 ⎮ 16 ⎮ 18 ⎮ 20 ⎮ 24 ⎮ 32` | | -| `variant` | `'filled' ⎮ 'outline'` | | -| `className` | `string` | | -| `color` | `string` | | - - -## Heading - -A heading component. - -| Property | Type | Description | -|---------|------|-------------| -| `level` | `number` | Level of the heading. A number from 1-6. Where 1 is the largest heading. | -| `children` | `React$Node` | Children. | - - -## Interactive - - - -| Property | Type | Description | -|---------|------|-------------| -| `isMovableAnchor` | `(event: SyntheticMouseEvent<>) => boolean` | | -| `onMoveStart` | `() => void` | | -| `onMoveEnd` | `() => void` | | -| `onMove` | `(top: number, left: number, event: SyntheticMouseEvent<>) => void` | | -| `id` | `string` | | -| `movable` | `boolean` | | -| `hidden` | `boolean` | | -| `moving` | `boolean` | | -| `grow` | `boolean` | | -| `siblings` | `$Shape` | | -| `updateCursor` | `(cursor: ?string) => void` | | -| `zIndex` | `number` | | -| `top` | `number` | | -| `left` | `number` | | -| `minTop` | `number` | | -| `minLeft` | `number` | | -| `width` | `number ⎮ string` | | -| `height` | `number ⎮ string` | | -| `minWidth` | `number` | | -| `minHeight` | `number` | | -| `maxWidth` | `number` | | -| `maxHeight` | `number` | | -| `onCanResize` | `(sides: ResizingSides) => void` | | -| `onResizeStart` | `() => void` | | -| `onResizeEnd` | `() => void` | | -| `onResize` | `(width: number, height: number) => void` | | -| `resizing` | `boolean` | | -| `resizable` | `boolean ⎮ ResizingSides` | | -| `innerRef` | `(elem: HTMLElement) => void` | | -| `style` | `Object` | | -| `className` | `string` | | -| `children` | `React$Element` | | - - -## Intro - - - -| Property | Type | Description | -|---------|------|-------------| -| `title` | `string` | | -| `icon` | `string` | | -| `screenshot` | `?string` | | -| `children` | `ReactNode` | | -| `onDismiss` | `() => void` | | - - -## Link - - - -| Property | Type | Description | -|---------|------|-------------| -| `href` | `string` | | -| `children` | `React$Node` | | - - -## MarkerTimeline - - - -| Property | Type | Description | -|---------|------|-------------| -| `onClick` | `(keys: Array) => mixed` | | -| `selected` | `?string` | | -| `points` | `Array` | | -| `lineHeight` | `number` | | -| `maxGap` | `number` | | - - -## ModalOverlay - - - -| Property | Type | Description | -|---------|------|-------------| -| `onClose` | `() => void` | | -| `children` | `React$Node` | | - - -## Orderable - - - -| Property | Type | Description | -|---------|------|-------------| -| `items` | `{[key: string]: React.Element<*>}` | | -| `orientation` | `'horizontal' ⎮ 'vertical'` | | -| `onChange` | `(order: OrderableOrder, key: string) => void` | | -| `order` | `?Array` | | -| `className` | `string` | | -| `reverse` | `boolean` | | -| `altKey` | `boolean` | | -| `moveDelay` | `number` | | -| `dragOpacity` | `number` | | -| `ignoreChildEvents` | `boolean` | | - - -## Panel - -A Panel component. - -| Property | Type | Description | -|---------|------|-------------| -| `className` | `string` | Class name to customise styling. | -| `floating` | `boolean` | Whether this panel is floating from the rest of the UI. ie. if it has margin and a border. | -| `grow` | `boolean` | Whether the panel takes up all the space it can. Equivalent to the following CSS: height: 100%; width: 100%; | -| `heading` | `React$Node` | Heading for this panel. If this is anything other than a string then no padding is applied to the heading. | -| `children` | `React$Node` | Contents of the panel. | -| `padded` | `boolean` | Whether the panel header and body have padding. | -| `collapsable` | `boolean` | Whether the panel can be collapsed. Defaults to true | -| `collapsed` | `boolean` | Initial state for panel if it is collapsable | -| `accessory` | `React$Node` | Heading for this panel. If this is anything other than a string then no padding is applied to the heading. | - - -## PathBreadcrumbs - - - -| Property | Type | Description | -|---------|------|-------------| -| `path` | `string` | | -| `isFile` | `boolean` | | -| `onClick` | `(path: string) => void` | | - - -## Popover - - - -| Property | Type | Description | -|---------|------|-------------| -| `children` | `ReactNode` | | -| `onDismiss` | `Function` | | -| `forceOpts` | `Object` | | - - -## ResizeSensor - -Listener for resize events. - -| Property | Type | Description | -|---------|------|-------------| -| `onResize` | `(e: UIEvent) => void` | Callback when resize happened | - - -## FilterToken - - - -| Property | Type | Description | -|---------|------|-------------| -| `filter` | `Filter` | | -| `focused` | `boolean` | | -| `index` | `number` | | -| `onFocus` | `(focusedToken: number) => void` | | -| `onBlur` | `() => void` | | -| `onDelete` | `(deletedToken: number) => void` | | -| `onReplace` | `(index: number, filter: Filter) => void` | | - - -## SearchableManagedTable - - - -| Property | Type | Description | -|---------|------|-------------| -| `innerRef` | `(ref: React.ElementRef<*>) => void` | Reference to the table | -| `defaultFilters` | `Array` | Filters that are added to the filterbar by default | - - -## Select - -Dropdown to select from a list of options - -| Property | Type | Description | -|---------|------|-------------| -| `className` | `string` | Additional className added to the element | -| `options` | `{ [key: string]: string, }` | Additional className added to the element | -| `onChange` | `(key: string) => void` | Callback when the selected value changes | -| `selected` | `?string` | Selected key | -| `label` | `string` | Label shown next to the dropdown | -| `grow` | `boolean` | Select box should take all available space | - - -## Sheet - -Usage: {onHide => } - -| Property | Type | Description | -|---------|------|-------------| -| `children` | `(onHide: () => void) => ?React.Node` | Function as child component (FaCC) to render the contents of the sheet. A `onHide` function is passed as argument, that can be called to remove the sheet. | -| `setActiveSheet` | `(sheet: ActiveSheet) => any` | | -| `activeSheet` | `ActiveSheet` | | - - -## Sidebar - -A resizable sidebar. - -| Property | Type | Description | -|---------|------|-------------| -| `position` | `'left' ⎮ 'top' ⎮ 'right' ⎮ 'bottom'` | Position of the sidebar. | -| `width` | `number` | Default width of the sidebar. Only used for left/right sidebars. | -| `minWidth` | `number` | Minimum sidebar width. Only used for left/right sidebars. | -| `maxWidth` | `number` | Maximum sidebar width. Only used for left/right sidebars. | -| `height` | `number` | Default height of the sidebar. | -| `minHeight` | `number` | Minimum sidebar height. Only used for top/bottom sidebars. | -| `maxHeight` | `number` | Maximum sidebar height. Only used for top/bottom sidebars. | -| `backgroundColor` | `string` | Background color. | -| `onResize` | `(width: number, height: number) => void` | Callback when the sidebar size ahs changed. | -| `children` | `React$Node` | Contents of the sidebar. | -| `className` | `string` | Class name to customise styling. | - - -## StackTrace - -Display a stack trace - -| Property | Type | Description | -|---------|------|-------------| -| `children` | `Array<{ isBold?: boolean, library?: ?string, address?: ?string, caller?: ?string, lineNumber?: ?string, message?: ?string, }>` | | -| `reason` | `string` | Reason for the crash, displayed above the trace | -| `isCrash` | `boolean` | Does the trace show a crash | -| `padded` | `boolean` | Display the stack trace in a padded container | -| `backgroundColor` | `string` | Background color of the stack trace | - - -## TableHead - - - -| Property | Type | Description | -|---------|------|-------------| -| `columnOrder` | `TableColumnOrder` | | -| `onColumnOrder` | `?(order: TableColumnOrder) => void` | | -| `columns` | `TableColumns` | | -| `sortOrder` | `?TableRowSortOrder` | | -| `onSort` | `?TableOnSort` | | -| `columnSizes` | `TableColumnSizes` | | -| `onColumnResize` | `?TableOnColumnResize` | | - - -## TableRow - - - -| Property | Type | Description | -|---------|------|-------------| -| `columnSizes` | `TableColumnSizes` | | -| `columnKeys` | `TableColumnKeys` | | -| `onMouseDown` | `(e: SyntheticMouseEvent<>) => mixed` | | -| `onMouseEnter` | `(e: SyntheticMouseEvent<>) => void` | | -| `multiline` | `?boolean` | | -| `rowLineHeight` | `number` | | -| `highlighted` | `boolean` | | -| `row` | `TableBodyRow` | | -| `index` | `number` | | -| `style` | `?Object` | | -| `onAddFilter` | `TableOnAddFilter` | | -| `zebra` | `?boolean` | | - - -## Tabs - -A Tabs component. - -| Property | Type | Description | -|---------|------|-------------| -| `onActive` | `(key: ?string) => void` | Callback for when the active tab has changed. | -| `defaultActive` | `string` | The key of the default active tab. | -| `active` | `?string` | The key of the currently active tab. | -| `children` | `Array>` | Tab elements. | -| `orderable` | `boolean` | Whether the tabs can be reordered by the user. | -| `onOrder` | `(order: Array) => void` | Callback when the tab order changes. | -| `order` | `Array` | Order of tabs. | -| `persist` | `boolean` | Whether to include the contents of every tab in the DOM and just toggle its visibility. | -| `newable` | `boolean` | Whether to include a button to create additional items. | -| `onNew` | `() => void` | Callback for when the new button is clicked. | -| `before` | `Array` | Elements to insert before all tabs in the tab list. | -| `after` | `Array` | Elements to insert after all tabs in the tab list. | - - -## ToggleButton - -Toggle Button. - -**Usage** - -```jsx -import {ToggleButton} from 'flipper'; - -``` - -| Property | Type | Description | -|---------|------|-------------| -| `onClick` | `(event: SyntheticMouseEvent<>) => void` | onClick handler. | -| `toggled` | `boolean` | whether the button is toggled | -| `className` | `string` | | - - -## Tooltip - - - -| Property | Type | Description | -|---------|------|-------------| -| `title` | `React$Node` | Content shown in the tooltip | -| `children` | `React$Node` | Component that will show the tooltip | -| `options` | `TooltipOptions` | | - - -## TooltipProvider - - - -| Property | Type | Description | -|---------|------|-------------| -| `children` | `React$Node` | | - - -## ViewWithSize - - - -| Property | Type | Description | -|---------|------|-------------| -| `onSize` | `(width: number, height: number) => any` | | - - -## VirtualList - - - -| Property | Type | Description | -|---------|------|-------------| -| `data` | `Array` | | -| `renderRow` | `(data: any, i: number) => any` | | -| `rowHeight` | `number` | | -| `overscanCount` | `number` | | -| `sync` | `number` | | -| `wrapInner` | `(data: any) => any` | | - - \ No newline at end of file diff --git a/website/generate-uidocs.js b/website/generate-uidocs.js index d75de7212..0ac7223c8 100644 --- a/website/generate-uidocs.js +++ b/website/generate-uidocs.js @@ -11,6 +11,13 @@ const fs = require('fs'); const babylon = require('@babel/parser'); const docblockParser = require('docblock-parser'); +const HEADER = `--- +id: ui-components +title: UI Components +--- + +Flipper has a lot of built in React components to build UIs. You can import them directly using e.g. \`import {Button} from 'flipper'\`.`; + const TARGET = __dirname + '/../docs/extending/ui-components.md'; glob(__dirname + '/../src/ui/components/**/*.js', (err, files) => { @@ -35,7 +42,7 @@ glob(__dirname + '/../src/ui/components/**/*.js', (err, files) => { .filter(Boolean) .map(generateMarkdown) .reduce((acc, cv) => acc + cv, ''); - fs.writeFileSync(TARGET, fs.readFileSync(TARGET) + content); + fs.writeFileSync(TARGET, HEADER + content); }); // HOC are not supported by react-docgen. This means, styled-components will not diff --git a/website/i18n/en.json b/website/i18n/en.json index e9455f1ff..c5e0c6424 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -58,8 +58,7 @@ "title": "Testing" }, "extending/ui-components": { - "title": "UI Components", - "sidebar_label": "UI Components" + "title": "UI Components" }, "features/crash-reporter-plugin": { "title": "Crash Reporter"