+);
+const someText = Some text;
+
+const demos = [
+ {
+ title: 'Layout.Container',
+ description: `Layout.Container can be used to organize the UI in regions. It takes care of paddings and borders. Children will be arranged vertically. Use Layout.Horizontal instead for arranging children horizontally. If you need a margin on this component, try to wrap it in other Layout component instead.`,
+ props: [
+ ['rounded', 'boolean (false)', 'Make the corners rounded'],
+ [
+ 'padv / padh / pad',
+ Object.keys(theme.space).join(' | ') + ' | number | true',
+ 'Short-hand to set the horizontal, vertical or both paddings. The keys correspond to the theme space settings. Using `true` picks the default horizontal / vertical padding for inline elements.',
+ ],
+ [
+ 'width / height',
+ 'number',
+ 'Set the width / height of this container in pixels. Use sparingly.',
+ ],
+ [
+ 'bordered',
+ 'boolean (false)',
+ 'This container will use a default border on all sides',
+ ],
+ [
+ 'borderTop / borderRight / borderBottom / borderLeft',
+ 'boolean (false)',
+ 'Use a standard padding on the top side',
+ ],
+ [
+ 'gap',
+ 'true / number (0)',
+ 'Set the spacing between children. If just set, theme.space.small will be used.',
+ ],
+ [
+ 'center',
+ 'boolean (false)',
+ 'If set, all children will use their own naturally width, and they will be centered horizontally in the Container. If not set, all children will be stretched to the width of the Container.',
+ ],
+ ],
+ demos: {
+ 'Basic container with fixed dimensions': (
+
+ ),
+ 'Basic container with fixed height': (
+
+ ),
+ 'bordered pad rounded': (
+
+
child
+
+ ),
+ 'Multiple children, gap={24}': (
+
+ {aButton}
+ {someText}
+ {aBox}
+ {aDynamicBox}
+
+ ),
+ 'Multiple children icmw. pad center gap': (
+
+ {aButton}
+ {someText}
+ {aBox}
+ {aDynamicBox}
+
+ ),
+ },
+ },
+ {
+ title: 'Layout.Horizontal',
+ description:
+ 'Use this component to arrange multiple items horizontally. All vanilla Container props can be used as well.',
+ props: [
+ [
+ 'center',
+ 'boolean (false)',
+ 'If set, all children will use their own height, and they will be centered vertically in the layout. If not set, all children will be stretched to the height of the layout.',
+ ],
+ ],
+ demos: {
+ 'Basic usage, gap="large"': (
+
+ {aButton}
+ {someText}
+ {aBox}
+ {aDynamicBox}
+
+ ),
+ 'Using flags: pad center gap={8} (great for toolbars and such)': (
+
+ {aButton}
+ {someText}
+ {aBox}
+ {aDynamicBox}
+
+ ),
+ },
+ },
+ {
+ title: 'Layout.ScrollContainer',
+ description:
+ 'Use this component to create an area that can be scrolled. The scrollable area will automatically consume all available space. ScrollContainer accepts all properties that Container accepts as well. Padding will be applied to the child rather than the parent.',
+ props: [
+ [
+ 'horizontal / vertical',
+ 'boolean',
+ 'specifies in which directions the container should scroll. If none is specified the container will scroll in both directions',
+ ],
+ [
+ 'padv / padh / pad',
+ 'see Container',
+ 'Padding will be applied to the child',
+ ],
+ ],
+ demos: {
+ 'Basic usage': (
+
+ {largeChild}
+
+ ),
+ 'ScrollContainer + Vertical for vertical scroll only': (
+
+
+
+ This text is truncated because it is too long and scroll is
+ vertical only...
+
+ {largeChild}
+
+
+ ),
+ },
+ },
+ {
+ title: 'Layout.Top|Left|Right|Bottom',
+ description:
+ "Divides all available space over two children. The (top|left|right|bottom)-most first child will keep it's own dimensions, and positioned (top|left|right|bottom) of the other child. All remaining space will be assigned to the remaining child. If you are using a Layout.Right at the top level of your plugin, consider using DetailSidebar component instead, which will move its children to the right sidebar of Flipper.",
+ props: [
+ [
+ 'scrollable',
+ 'boolean (false)',
+ 'If set, the area of the second child will automatically be made scrollable.',
+ ],
+ [
+ 'center',
+ 'boolean (false)',
+ 'If set, all children will use their own height, and they will be centered vertically in the layout. If not set, all children will be stretched to the height of the layout.',
+ ],
+ [
+ 'gap',
+ 'true / number (0)',
+ 'Set the spacing between children. If just set, theme.space.small will be used.',
+ ],
+ [
+ 'resizable',
+ 'true / undefined',
+ 'If set, this split container will be resizable by the user. It is recommend to set width, maxWidth, minWidth respectively height, maxHeight, minHeight properties as well.',
+ ],
+ [
+ 'width / height / minWidth / minHeight / maxWidth / maxHeight',
+ 'number / undefined',
+ 'These dimensions in pixels will be used for clamping if the layout is marked as resizable',
+ ],
+ ],
+ demos: {
+ 'Layout.Top': (
+
+ {aFixedHeightBox}
+ {aDynamicBox}
+
+ ),
+ 'Layout.Left': (
+
+ {aFixedWidthBox}
+ {aDynamicBox}
+
+ ),
+ 'Layout.Right': (
+
+ {aDynamicBox}
+ {aFixedWidthBox}
+
+ ),
+ 'Layout.Bottom': (
+
+ {aDynamicBox}
+ {aFixedHeightBox}
+
+ ),
+ 'Layout.Top + Layout.ScrollContainer': (
+
+
+ {aFixedHeightBox}
+ {largeChild}
+
+
+ ),
+ 'Layout.Left + Layout.ScrollContainer': (
+
+
+ {aFixedWidthBox}
+ {largeChild}
+
+
+ ),
+ 'Layout.Right resizable + Layout.ScrollContainer': (
+
+
+ {largeChild}
+ {aDynamicBox}
+
+
+ ),
+ 'Layout.Bottom resizable + Layout.ScrollContainer': (
+
+
+ {largeChild}
+ {aDynamicBox}
+
+
+ ),
+ },
+ },
+ {
+ title: 'Panel',
+ description:
+ 'A collapsible UI region. The collapsed state of the pane will automatically be persisted so that the collapsed state is restored the next time user visits the plugin again. Note that the children of a Panel should have some size, either a fixed or a natural size. Elements that grow to their parent size will become invisible.',
+ props: [
+ ['title', 'string', 'Title of the pane'],
+ [
+ 'collapsible',
+ 'boolean (true)',
+ "If set to false it won't be possible to collapse the panel",
+ ],
+ [
+ 'collapsed',
+ 'boolean (false)',
+ 'The initial collapsed state of the panel.',
+ ],
+ [
+ 'pad / gap',
+ 'boolean / number (false)',
+ 'See the pad property of Layout.Container, determines whether the pane contents will have some padding and space between the items. By default no padding / gap is applied.',
+ ],
+ ],
+ demos: {
+ 'Two panels in a fixed height container': (
+
+ Some content
+
+ {aFixedHeightBox}
+
+
+ {aFixedHeightBox}
+ {aFixedHeightBox}
+
+
+ ),
+ },
+ },
+ {
+ title: 'Tabs / Tab',
+ description:
+ "Tabs represents a tab control and all it's children should be Tab components. By default the Tab control uses all available space, but set grow=false to only use the minimally required space",
+ props: [
+ [
+ 'grow (Tabs)',
+ 'boolean (true)',
+ 'If true, the tab control will grow all tabs to the maximum available vertical space. If false, only the minimal required (natural) vertical space will be used',
+ ],
+ [
+ 'pad / gap (Tab)',
+ 'boolean / number (false)',
+ 'See the pad property of Layout.Container, determines whether the pane contents will have some padding and space between the items. By default no padding / gap is applied.',
+ ],
+ [
+ 'other props',
+ '',
+ 'This component wraps Tabs from ant design, see https://ant.design/components/tabs/ for more details',
+ ],
+ ],
+ demos: {
+ 'Two tabs': (
+
+
+ {aDynamicBox}
+
+ {aFixedHeightBox}
+ {aFixedHeightBox}
+
+
+
+ ),
+ 'Two tabs (no grow)': (
+
+
+ {aDynamicBox}
+
+ {aFixedHeightBox}
+ {aFixedHeightBox}
+
+
+
+ ),
+ },
+ },
+ {
+ title: 'NUX',
+ description:
+ 'A component to provide a New-User-eXperience: Highlight new features to first time users. For tooltips that should stay available, use ToolTip from ANT design',
+ props: [
+ ['title', 'string / React element', 'The tooltip contents'],
+ [
+ 'placement',
+ <>
+ See{' '}
+
+ docs
+
+ ,
+ '(optional) on which side to place the tooltip',
+ ],
+ ],
+ demos: {
+ 'NUX example': (
+
+
+
+ ),
+ },
+ },
+ {
+ title: 'Tracked',
+ description:
+ 'A component that tracks component interactions. For Facebook internal builds, global stats for these interactions will be tracked. Wrap this component around another element to track its events',
+ props: [
+ [
+ 'events',
+ 'string | string[] (default: "onClick")',
+ 'The event(s) of the child component that should be tracked',
+ ],
+ [
+ 'action',
+ 'string (optional)',
+ 'Describes the element the user interacted with. Will by default be derived from the title, key or contents of the element',
+ ],
+ ],
+ demos: {
+ 'Basic example': (
+
+
+
+ ),
+ },
+ },
+ {
+ title: 'TrackingScope',
+ description:
+ 'Describes more precisely the place in the UI for all underlying Tracked elements. Multiple Tracking scopes are automatically nested. Use the `withTrackingScope` HoC to automatically wrap a component definition in a tracking scope',
+ props: [
+ ['scope', 'string', 'The name of the scope. For example "Login Dialog"'],
+ ],
+ demos: {
+ 'Basic example': (
+
+
+
+
+
+ ),
+ },
+ },
+];
+
+function ComponentPreview({title, demos, description, props}) {
+ return (
+
+
+
+ {description}
+
+
+
+ {Object.entries(demos).map(([name, children]) => (
+
+
+
+ Welcome to the Flipper Design System. The Flipper design system is
+ based on{' '}
+ Ant Design
+ . Any component found in the ANT documentation can be used. This page
+ demonstrates the usage of:
+
+
+
Colors
+
Typography
+
Theme Variables
+
Layout components
+
+
+ The following components from Ant should not be used:
+
+
+
+ Layout: use Flipper's Layout.* instead.
+
+
+
Sandy guidelines
+
+
+ Avoid using `margin` properties, use padding on the container
+ indeed, or gap in combination with{' '}
+ Layout.Horizontal|Vertical
+
+ In general, components that have a grow property will
+ grow to use the full height of their parents if{' '}
+ true. In contrast, if grow is set to false{' '}
+ components will use their natural size, based on their{' '}
+ children.
+
+
+ The other important property here is scrollable. If an
+ element supports this property, setting it will imply{' '}
+ grow, and the element will show a scrollbar if needed.
+ Setting scrollabe to false causes the
+ element to always use its natural size, growing or shrinking based
+ on the contents rather than the parent.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Common Ant components, with modifiers applied. The{' '}
+ Title, Text and Link{' '}
+ components can be found by importing the Typography{' '}
+ namespace from Ant.
+
+ }
+ type="info"
+ />
+ Title
+ Title level=2
+ Title level=3
+ Title level=4
+ Text
+ Text - type=secondary
+ Text - type=success
+ Text - type=warning
+ Text - danger
+ Text - disbled
+ Text - strong
+ Text - code
+ Link
+
+ Link - type=secondary
+
+
+
+
+
+
+
+
+ The following theme veriables are exposed from the Flipper{' '}
+ theme object. See the colors section above for a
+ preview of the colors.
+
+ }
+ />
+
+