chore(widgets) props should be types rather than interfaces (#9333)

* chore(widgets) props should be types rather than interfaces

* exports types in main

Co-authored-by: felixpalmer <felixpalmer@gmail.com>

---------

Co-authored-by: felixpalmer <felixpalmer@gmail.com>

Author: chrisgervang

docs/api-reference/core/widget.md

@@ -12,7 +12,7 @@ You may find many ready-to-use widgets in the `@deck.gl/widgets` module.
 A widget is expected to implement the `Widget` interface. Here is a custom widget that shows a spinner while layers are loading:
 
 ```ts
-import {Widget} from '@deck.gl/core';
+import {Deck, Widget} from '@deck.gl/core';
 
 class LoadingIndicator implements Widget {
   element?: HTMLDivElement;
@@ -39,12 +39,14 @@ class LoadingIndicator implements Widget {
   }
 }
 
-deckgl.addWidget(new LoadingIndicator({size: 48}));
+new Deck({
+  widgets: [new LoadingIndicator({size: 48})]
+});
 ```
 
 ## Widget Interface
 
-When a widget instance is added to Deck, the user can optionally specify a `viewId` that it is attached to (default `null`). If assigned, this widget will only respond to events occured inside the specific view that matches this id.
+When a widget instance is added to Deck, the user can optionally specify a `viewId` that it is attached to (default `null`). If assigned, this widget will only respond to events occurred inside the specific view that matches this id.
 
 ### Members
 

docs/api-reference/widgets/overview.md

@@ -30,11 +30,11 @@ new FullscreenWidget({});
 
 ```html
 <script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
-<link src="https://unpkg.com/deck.gl@^9.0.0/dist/stylesheet.css" rel='stylesheet' />
+<link href="https://unpkg.com/deck.gl@^9.0.0/dist/stylesheet.css" rel='stylesheet' />
 <!-- or -->
 <script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
 <script src="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist.min.js"></script>
-<link src="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist/stylesheet.css" rel='stylesheet' />
+<link href="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist/stylesheet.css" rel='stylesheet' />
 ```
 
 ```js

modules/main/src/index.ts

@@ -195,3 +195,5 @@ export type {
 export type {MVTLayerProps, QuadkeyLayerProps, TileLayerProps} from '@deck.gl/geo-layers';
 
 export type {DeckGLProps, DeckGLRef, DeckGLContextValue} from '@deck.gl/react';
+
+export type {FullscreenWidgetProps, ZoomWidgetProps, CompassWidgetProps} from '@deck.gl/widgets';

modules/widgets/src/compass-widget.tsx

@@ -14,8 +14,11 @@ import {
 import type {Deck, Viewport, Widget, WidgetPlacement} from '@deck.gl/core';
 import {render} from 'preact';
 
-interface CompassWidgetProps {
+export type CompassWidgetProps = {
   id?: string;
+  /**
+   * Widget positioning within the view. Default 'top-left'.
+   */
   placement?: WidgetPlacement;
   /**
    * View to attach to and interact with. Required when using multiple views.
@@ -37,7 +40,7 @@ interface CompassWidgetProps {
    * Additional CSS class.
    */
   className?: string;
-}
+};
 
 export class CompassWidget implements Widget<CompassWidgetProps> {
   id = 'compass';

modules/widgets/src/fullscreen-widget.tsx

@@ -12,8 +12,11 @@ import type {Deck, Widget, WidgetPlacement} from '@deck.gl/core';
 import {render} from 'preact';
 import {IconButton} from './components';
 
-interface FullscreenWidgetProps {
+export type FullscreenWidgetProps = {
   id?: string;
+  /**
+   * Widget positioning within the view. Default 'top-left'.
+   */
   placement?: WidgetPlacement;
   /**
    * A [compatible DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen#Compatible_elements) which should be made full screen.
@@ -37,7 +40,7 @@ interface FullscreenWidgetProps {
    * Additional CSS class.
    */
   className?: string;
-}
+};
 
 export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
   id = 'fullscreen';

modules/widgets/src/index.ts

@@ -6,4 +6,8 @@ export {FullscreenWidget} from './fullscreen-widget';
 export {CompassWidget} from './compass-widget';
 export {ZoomWidget} from './zoom-widget';
 
+export type {FullscreenWidgetProps} from './fullscreen-widget';
+export type {CompassWidgetProps} from './compass-widget';
+export type {ZoomWidgetProps} from './zoom-widget';
+
 export * from './themes';

modules/widgets/src/zoom-widget.tsx

@@ -13,8 +13,11 @@ import type {Deck, Viewport, Widget, WidgetPlacement} from '@deck.gl/core';
 import {render} from 'preact';
 import {ButtonGroup, GroupedIconButton} from './components';
 
-interface ZoomWidgetProps {
+export type ZoomWidgetProps = {
   id?: string;
+  /**
+   * Widget positioning within the view. Default 'top-left'.
+   */
   placement?: WidgetPlacement;
   /**
    * View to attach to and interact with. Required when using multiple views.
@@ -44,7 +47,7 @@ interface ZoomWidgetProps {
    * Additional CSS class.
    */
   className?: string;
-}
+};
 
 export class ZoomWidget implements Widget<ZoomWidgetProps> {
   id = 'zoom';