flipper-plugin-player-ui-devtools 0.0.2-next.0

package/package.json

@@ -0,0 +1,36 @@
+{
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "$schema": "https://fbflipper.com/schemas/plugin-package/v2.json",
+  "name": "flipper-plugin-player-ui-devtools",
+  "id": "player-ui-devtools",
+  "pluginType": "client",
+  "version": "0.0.2-next.0",
+  "main": "dist/index.js",
+  "dependencies": {
+    "@player-devtools/client": "0.0.2-next.0",
+    "@player-devtools/types": "0.0.2-next.0",
+    "dlv": "^1.1.3",
+    "@chakra-ui/anatomy": "2.3.4",
+    "@types/react": "^18.2.51"
+  },
+  "flipperBundlerEntry": "src/index.tsx",
+  "keywords": [
+    "flipper-plugin",
+    "@flipper-plugin/player-ui",
+    "player-ui-devtools"
+  ],
+  "icon": "apps",
+  "title": "Player UI Devtools",
+  "description": "A Flipper plugin able to interact with an active Player instance",
+  "peerDependencies": {
+    "flipper-plugin": "^0.212.0",
+    "react": "^18.2.0",
+    "@chakra-ui/react": "2.8.2",
+    "@emotion/styled": "^11"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,109 @@
+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-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 */
+  "message::plugin": MessengerEvent<ExtensionSupportedEvents> &
+    TransactionMetadata;
+};
+
+type Methods = {
+  /** message sent */
+  "message::flipper": (
+    message: MessengerEvent<ExtensionSupportedEvents>,
+  ) => Promise<void>;
+};
+
+/** Flipper desktop plugin */
+export function plugin(
+  client: PluginClient<Events, Methods>,
+): CommunicationLayerMethods {
+  const listeners: Array<
+    (
+      message: MessengerEvent<ExtensionSupportedEvents> & TransactionMetadata,
+    ) => void
+  > = [];
+
+  client.onConnect(() => {
+    client.onMessage("message::plugin", (message) => {
+      listeners.forEach((listener) => listener(message));
+    });
+  });
+
+  return {
+    sendMessage: async (message: MessengerEvent<ExtensionSupportedEvents>) => {
+      client.send("message::flipper", message);
+    },
+    addListener: (
+      listener: (
+        message: MessengerEvent<ExtensionSupportedEvents> & TransactionMetadata,
+      ) => void,
+    ) => {
+      listeners.push(listener);
+    },
+    removeListener: (
+      listener: (
+        message: MessengerEvent<ExtensionSupportedEvents> & TransactionMetadata,
+      ) => void,
+    ) => {
+      const index = listeners.indexOf(listener);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    },
+  };
+}
+
+/** Flipper desktop plugin component */
+export const Component: React.FC = () => {
+  const communicationLayer = usePlugin(plugin);
+
+  return (
+    <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,
+    },
+  }),
+});