flipper-plugin-player-ui-devtools 0.13.0-next.4 → 0.13.0

package/package.json

@@ -9,13 +9,14 @@
   "name": "flipper-plugin-player-ui-devtools",
   "id": "player-ui-devtools",
   "pluginType": "client",
-  "version": "0.13.0-next.4",
+  "version": "0.13.0",
   "main": "dist/index.js",
   "dependencies": {
-    "@player-tools/devtools-client": "0.13.0-next.4",
-    "@player-tools/devtools-types": "0.13.0-next.4",
-    "@types/react": "^18.2.51",
-    "react": "^18.2.0"
+    "@player-devtools/client": "0.13.0",
+    "@player-devtools/types": "0.13.0",
+    "dlv": "^1.1.3",
+    "@chakra-ui/anatomy": "2.3.4",
+    "@types/react": "^18.2.51"
   },
   "flipperBundlerEntry": "src/index.tsx",
   "keywords": [
@@ -27,6 +28,9 @@
   "title": "Player UI Devtools",
   "description": "A Flipper plugin able to interact with an active Player instance",
   "peerDependencies": {
-    "flipper-plugin": "^0.212.0"
+    "flipper-plugin": "^0.212.0",
+    "react": "^18.2.0",
+    "@chakra-ui/react": "2.8.2",
+    "@emotion/styled": "^11"
   }
 }

package/src/index.tsx

@@ -1,12 +1,39 @@
-import React from "react";
-import { type PluginClient, Layout, usePlugin } from "flipper-plugin";
+import React, { Suspense, useEffect, useState } from "react";
+import {
+  type PluginClient,
+  Layout,
+  usePlugin,
+  theme as baseTheme,
+} from "flipper-plugin";
 import type {
   CommunicationLayerMethods,
   ExtensionSupportedEvents,
   MessengerEvent,
   TransactionMetadata,
-} from "@player-tools/devtools-types";
-import { Panel } from "@player-tools/devtools-client";
+} from "@player-devtools/types";
+import { Panel } from "@player-devtools/client";
+import {
+  Button,
+  ChakraProvider,
+  ColorModeScript,
+  DarkMode,
+  defineStyle,
+  defineStyleConfig,
+  extendTheme,
+  Input,
+  LightMode,
+  ThemeConfig,
+  useBoolean,
+  useColorMode,
+  theme as ChakraTheme,
+  Box,
+  Spinner,
+} from "@chakra-ui/react";
+import { ThemeProvider, useDarkMode } from "@devtools-ds/themes";
+import { Select } from "./theme/select";
+import { Table } from "./theme/table";
+
+const ID = "flipper-plugin-player-ui-devtools";
 
 type Events = {
   /** message received */
@@ -62,11 +89,21 @@ export function plugin(
 }
 
 /** Flipper desktop plugin component */
-export const Component = () => {
+export const Component: React.FC = () => {
   const communicationLayer = usePlugin(plugin);
+
   return (
-    <Layout.Container>
-      <Panel communicationLayer={communicationLayer} />
-    </Layout.Container>
+    <Suspense fallback={<Spinner size="xl" />}>
+      <Layout.Container id={ID} pad="medium">
+        <Box
+          sx={{
+            // Scoped style fixes for our devtools client
+            p: { margin: 0 },
+          }}
+        >
+          <Panel communicationLayer={communicationLayer} />
+        </Box>
+      </Layout.Container>
+    </Suspense>
   );
 };

package/src/theme/select.ts

@@ -0,0 +1,18 @@
+import { selectAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+import { theme } from "flipper-plugin";
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(selectAnatomy.keys);
+
+export const Select = defineMultiStyleConfig({
+  baseStyle: definePartsStyle({
+    field: {
+      background: theme.buttonDefaultBackground,
+      color: theme.textColorPrimary,
+    },
+    icon: {
+      color: theme.textColorPrimary,
+    },
+  }),
+});

package/src/theme/table.ts

@@ -0,0 +1,22 @@
+import { tableAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+import { theme } from "flipper-plugin";
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(tableAnatomy.keys);
+
+export const Table = defineMultiStyleConfig({
+  baseStyle: definePartsStyle({
+    table: {
+      lineHeight: 1,
+    },
+    td: {
+      lineHeight: 1,
+      color: theme.textColorPrimary,
+    },
+    th: {
+      lineHeight: 1,
+      color: theme.textColorSecondary,
+    },
+  }),
+});