Update seammamals plugin to Sandy

Reviewed By: nikoant

Differential Revision: D24951251

fbshipit-source-id: 5510c2777d232fe4290f6b248b736c80306fb44e

desktop/plugins/seamammals/package.json

@@ -23,11 +23,10 @@
     "prepack": "flipper-pkg lint && flipper-pkg bundle --production"
   },
   "peerDependencies": {
-    "flipper": "0.65.0",
+    "antd": "*",
     "flipper-plugin": "0.65.0"
   },
   "devDependencies": {
-    "flipper": "0.65.0",
     "flipper-pkg": "0.65.0"
   }
 }

desktop/plugins/seamammals/src/__tests__/seamammals.spec.tsx

@@ -92,18 +92,31 @@ test('It can have selection and render details', async () => {
   // Let's assert the structure of the Turtle card as well
   expect(await renderer.findByTestId('Turtle')).toMatchInlineSnapshot(`
     <div
-      class="css-ok7d66-View-FlexBox-FlexColumn"
+      class="ant-card ant-card-bordered ant-card-hoverable"
       data-testid="Turtle"
+      style="width: 150px;"
+    >
+      <div
+        class="ant-card-head"
+      >
+        <div
+          class="ant-card-head-wrapper"
+        >
+          <div
+            class="ant-card-head-title"
+          >
+            Turtle
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
       >
         <div
           class="css-vgz97s"
           style="background-image: url(http://turtle.png);"
         />
-      <span
+      </div>
-        class="css-8j2gzl-Text"
-      >
-        Turtle
-      </span>
     </div>
   `);
   // Nothing selected, so we should not have a sidebar

desktop/plugins/seamammals/src/index.tsx

@@ -7,19 +7,17 @@
  * @format
  */
 
-import {
-  Text,
-  Panel,
-  ManagedDataInspector,
-  DetailSidebar,
-  FlexRow,
-  FlexColumn,
-  styled,
-  colors,
-} from 'flipper';
 import React, {memo} from 'react';
-
+import {Typography, Card} from 'antd';
-import {PluginClient, usePlugin, createState, useValue} from 'flipper-plugin';
+import {
+  Layout,
+  PluginClient,
+  usePlugin,
+  createState,
+  useValue,
+  theme,
+} from 'flipper-plugin';
+import {ManagedDataInspector, DetailSidebar, styled} from 'flipper';
 
 type Row = {
   id: number;
@@ -80,27 +78,34 @@ export function Component() {
   const selectedID = useValue(instance.selectedID);
 
   return (
-    <Container>
+    <>
+      <Layout.ScrollContainer
+        vertical
+        style={{background: theme.backgroundWash}}>
+        <Layout.Horizontal gap pad style={{flexWrap: 'wrap'}}>
           {Object.entries(rows).map(([id, row]) => (
-        <Card
+            <MammalCard
               row={row}
               onSelect={instance.setSelection}
               selected={id === selectedID}
               key={id}
             />
           ))}
+        </Layout.Horizontal>
+      </Layout.ScrollContainer>
       <DetailSidebar>
         {selectedID && renderSidebar(rows[selectedID])}
       </DetailSidebar>
-    </Container>
+    </>
   );
 }
 
 function renderSidebar(row: Row) {
   return (
-    <Panel floating={false} heading={'Extras'}>
+    <Layout.Container gap pad>
+      <Typography.Title level={4}>Extras</Typography.Title>
       <ManagedDataInspector data={row} expandRoot={true} />
-    </Panel>
+    </Layout.Container>
   );
 }
 
@@ -109,51 +114,24 @@ type CardProps = {
   selected: boolean;
   row: Row;
 };
-const Card = memo(({row, selected, onSelect}: CardProps) => {
+const MammalCard = memo(({row, selected, onSelect}: CardProps) => {
   return (
-    <CardContainer
+    <Card
+      hoverable
       data-testid={row.title}
       onClick={() => onSelect(row.id)}
-      selected={selected}>
+      title={row.title}
+      style={{
+        width: 150,
+        borderColor: selected ? theme.primaryColor : undefined,
+      }}>
       <Image style={{backgroundImage: `url(${row.url || ''})`}} />
-      <Title>{row.title}</Title>
+    </Card>
-    </CardContainer>
   );
 });
 
-const Container = styled(FlexRow)({
-  backgroundColor: colors.macOSTitleBarBackgroundBlur,
-  flexWrap: 'wrap',
-  alignItems: 'flex-start',
-  alignContent: 'flex-start',
-  flexGrow: 1,
-  overflow: 'scroll',
-});
-
-const CardContainer = styled(FlexColumn)<{selected?: boolean}>((props) => ({
-  margin: 10,
-  borderRadius: 5,
-  border: '2px solid black',
-  backgroundColor: colors.white,
-  borderColor: props.selected ? colors.macOSTitleBarIconSelected : colors.white,
-  padding: 0,
-  width: 150,
-  overflow: 'hidden',
-  boxShadow: '1px 1px 4px rgba(0,0,0,0.1)',
-  cursor: 'pointer',
-}));
-
 const Image = styled.div({
   backgroundSize: 'cover',
   width: '100%',
   paddingTop: '100%',
 });
-
-const Title = styled(Text)({
-  fontSize: 14,
-  fontWeight: 'bold',
-  padding: '10px 5px',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-});

react-native/ReactNativeFlipperExample/App.js

@@ -28,6 +28,49 @@ import {
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 
+import {addPlugin} from 'react-native-flipper';
+
+if (__DEV__ || true) {
+  const mammals = [
+    {
+      id: 'Polar Bear',
+      title: 'Polar Bear',
+      url:
+        'https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Ursus_maritimus_4_1996-08-04.jpg/190px-Ursus_maritimus_4_1996-08-04.jpg',
+    },
+    {
+      id: 'Sea Otter',
+      title: 'Sea Otter',
+      url:
+        'https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Sea_otter_cropped.jpg/220px-Sea_otter_cropped.jpg',
+    },
+    {
+      id: 'West Indian Manatee',
+      title: 'West Indian Manatee',
+      url:
+        'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/FL_fig04.jpg/230px-FL_fig04.jpg',
+    },
+    {
+      id: 'Bottlenose Dolphin',
+      title: 'Bottlenose Dolphin',
+      url:
+        'https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Tursiops_truncatus_01.jpg/220px-Tursiops_truncatus_01.jpg',
+    },
+  ];
+  // minimal plugin that connects to sea-mammals plugin
+  addPlugin({
+    getId() {
+      return 'sea-mammals';
+    },
+    onConnect(connection) {
+      mammals.forEach((m) => {
+        connection.send('newRow', m);
+      });
+    },
+    onDisconnect() {},
+  });
+}
+
 import FlipperTicTacToe from './FlipperTicTacToe';
 
 const API = 'https://status.npmjs.org/';
@@ -59,14 +102,14 @@ const App: () => React$Node = () => {
                 onPress={() => {
                   console.log('Making request to ' + API);
                   fetch(API, {headers: {accept: 'application/json'}})
-                    .then(res => res.json())
+                    .then((res) => res.json())
-                    .then(data => {
+                    .then((data) => {
                       console.log(
                         'Got status: ' + JSON.stringify(data, null, 2),
                       );
                       setNpmStatus(data.status.description);
                     })
-                    .catch(e => {
+                    .catch((e) => {
                       console.error('Failed to fetch status: ' + e);
                       console.error(e);
                       setNpmStatus('Error: ' + e);