[@wordpress/plugins] reference Dashicon.Icon from @wordpress/components (#36450)

* run prettier on all files

* fix: add reference to Dashicon.Icon for icon prop

* add reference to dependent packages

types/wordpress__plugins/index.d.ts

@@ -4,16 +4,16 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.5
 
-import { ComponentType } from "@wordpress/element";
+import { Dashicon } from '@wordpress/components';
+import { ComponentType } from '@wordpress/element';
 
 export interface PluginSettings {
-    // TODO: if we ever create a package for @wordpress/dashicons, add it here instead of `string`.
     /**
      * An icon to be shown in the UI. It can be a slug of the Dashicon, or an
      * element (or function returning an element) if you choose to render your
      * own SVG.
      */
-    icon: string | ComponentType;
+    icon: Dashicon.Icon | ComponentType;
     /**
      * A component containing the UI elements to be rendered.
      */
@@ -28,7 +28,7 @@ export interface Plugin extends PluginSettings {
     name: string;
 }
 
-export type PluginContext = Omit<Plugin, "render">;
+export type PluginContext = Omit<Plugin, 'render'>;
 
 /**
  * A component that renders all plugin fills in a hidden div.
@@ -54,10 +54,7 @@ export function getPlugins(): Plugin[];
  * @param settings - The settings for this plugin.
  * @returns The final plugin settings object.
  */
-export function registerPlugin(
-    name: string,
-    settings: PluginSettings
-): PluginSettings;
+export function registerPlugin(name: string, settings: PluginSettings): PluginSettings;
 
 /**
  * Unregisters a plugin by name.

types/wordpress__plugins/tsconfig.json

@@ -1,8 +1,8 @@
 {
     "compilerOptions": {
         "module": "commonjs",
-        "lib": ["es6"],
-        "jsx": "react",
+        "lib": ["dom", "es6"],
+        "jsx": "preserve",
         "noImplicitAny": true,
         "noImplicitThis": true,
         "strictNullChecks": true,
@@ -13,8 +13,10 @@
         "noEmit": true,
         "forceConsistentCasingInFileNames": true,
         "paths": {
+            "@wordpress/components": ["wordpress__components"],
             "@wordpress/element": ["wordpress__element"],
-            "@wordpress/plugins": ["wordpress__plugins"]
+            "@wordpress/plugins": ["wordpress__plugins"],
+            "@wordpress/rich-text": ["wordpress__rich-text"]
         }
     },
     "files": ["index.d.ts", "wordpress__plugins-tests.tsx"]

types/wordpress__plugins/wordpress__plugins-tests.tsx

@@ -1,16 +1,15 @@
-import * as WPElement from "@wordpress/element";
-import * as plugins from "@wordpress/plugins";
+import * as plugins from '@wordpress/plugins';
 
-plugins.registerPlugin("my-plugin", {
-    icon: "welcome-learn-more",
-    render: () => <h1>Hello World</h1>
+plugins.registerPlugin('my-plugin', {
+    icon: 'welcome-learn-more',
+    render: () => <h1>Hello World</h1>,
 });
 
 plugins.getPlugins();
 
-plugins.getPlugin("my-plugin");
+plugins.getPlugin('my-plugin');
 
-plugins.unregisterPlugin("my-plugin");
+plugins.unregisterPlugin('my-plugin');
 
 interface OwnProps {
     foobar: number;
@@ -30,6 +29,4 @@ const Foo = ({ iconName, foobar }: Props) => (
     </ul>
 );
 
-const Foobar = plugins.withPluginContext<ContextProps, OwnProps>(
-    ({ icon }) => ({ iconName: icon.toString() })
-)(Foo);
+const Foobar = plugins.withPluginContext<ContextProps, OwnProps>(({ icon }) => ({ iconName: icon.toString() }))(Foo);