Merge v0.0.99 into 0.1.x

samples/sample-generic-content-sidekick-plugin/src/components/sample-generic-content-sidekick-plugin-item/component.tsx

@@ -12,6 +12,20 @@ import * as ReactDOM from 'react-dom/client';
 import { SampleGenericContentSidekickPluginProps } from './types';
 import { GenericContentSidekickExample } from '../generic-content-sidekick-example/component';
 
+function BatteryIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1}
+      stroke="currentColor"
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M21 10.5h.375c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125H21M4.5 10.5H18V15H4.5v-4.5ZM3.75 18h15A2.25 2.25 0 0 0 21 15.75v-6a2.25 2.25 0 0 0-2.25-2.25h-15A2.25 2.25 0 0 0 1.5 9.75v6A2.25 2.25 0 0 0 3.75 18Z" />
+    </svg>
+  );
+}
+
 function SampleGenericContentSidekickPlugin(
   { pluginUuid: uuid }: SampleGenericContentSidekickPluginProps,
 ): React.ReactNode {
@@ -29,7 +43,9 @@ function SampleGenericContentSidekickPlugin(
         name: 'Generic Content 1',
         section: 'Section 1',
         dataTest: 'section-1-generic-content-sidekick-abc',
-        buttonIcon: 'video',
+        buttonIcon: {
+          svgContent: <BatteryIcon />,
+        },
         open: false,
         contentFunction: (element: HTMLElement) => {
           const root = ReactDOM.createRoot(element);

scripts/bump-version.sh

@@ -31,7 +31,9 @@ sed -i "s/\"version\": \"$CURRENT_VERSION\"/\"version\": \"$NEW_VERSION\"/" pack
 npm install
 
 # Publishes to npm
-npm publish
+npm publish --tag tmp
+npm dist-tag add bigbluebutton-html-plugin-sdk@$NEW_VERSION latest
+npm dist-tag rm bigbluebutton-html-plugin-sdk tmp
 
 echo "Sleeping 120 seconds to allow npm replicate internally"
 sleep 120

src/extensible-areas/actions-bar-item/component.ts

@@ -9,8 +9,8 @@ import {
   SelectOption,
   ToggleGroupOption,
   ActionsBarToggleGroupProps,
-  ActionsBarIconType,
 } from './types';
+import { PluginIconType } from '../common/icon';
 
 // ActionsBar Extensible Area
 
@@ -34,18 +34,20 @@ class ActionsBarItem implements ActionsBarInterface {
     this.dataTest = dataTest;
   }
 
-  setItemId(id: string):void {
+  setItemId(id: string): void {
     this.id = `ActionsBar${this.type}_${id}`;
   }
 }
 
 export class ActionsBarButton extends ActionsBarItem {
-  icon: ActionsBarIconType;
+  icon: PluginIconType;
 
   tooltip: string;
 
   onClick: () => void;
 
+  color: string;
+
   /**
    * Returns object to be used in the setter for action bar. In this case,
    * a button.
@@ -56,11 +58,13 @@ export class ActionsBarButton extends ActionsBarItem {
    * @param dataTest - string attribute to be used for testing
    * @param onClick - function to be called when clicking the button
    * @param position - position that this button will be displayed, see {@link ActionsBarPosition}
+   * @param color - button color variant, defaults to 'primary'
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
    */
   constructor({
-    id, icon, tooltip = '', dataTest = '', onClick = () => {}, position = ActionsBarPosition.RIGHT,
+    id, icon, tooltip = '', dataTest = '', onClick = () => { }, position = ActionsBarPosition.RIGHT,
+    color = 'primary',
   }: ActionsBarButtonProps) {
     super({
       id, type: ActionsBarItemType.BUTTON, position, dataTest,
@@ -69,11 +73,12 @@ export class ActionsBarButton extends ActionsBarItem {
     this.tooltip = tooltip;
     this.dataTest = dataTest;
     this.onClick = onClick;
+    this.color = color;
   }
 }
 
 export class ActionsBarSeparator extends ActionsBarItem {
-  icon: string;
+  icon: PluginIconType;
 
   /**
    * Returns object to be used in the setter for action bar. In this case,
@@ -129,7 +134,7 @@ export class ActionsBarSelector extends ActionsBarItem {
     options = [],
     defaultOption = options[0],
     dataTest = '',
-    onChange = () => {},
+    onChange = () => { },
     position = ActionsBarPosition.RIGHT,
     width = 140,
   }: ActionsBarSelectorProps) {
@@ -179,7 +184,7 @@ export class ActionsBarToggleGroup extends ActionsBarItem {
     options = [],
     defaultOption = options[0],
     dataTest = '',
-    onChange = () => {},
+    onChange = () => { },
     position = ActionsBarPosition.RIGHT,
   }: ActionsBarToggleGroupProps) {
     super({

src/extensible-areas/actions-bar-item/types.ts

@@ -1,6 +1,7 @@
 import { ChangeEvent, MouseEvent } from 'react';
 import { PluginProvidedUiItemDescriptor } from '../base';
 import { ActionsBarItemType, ActionsBarPosition } from './enums';
+import { PluginIconType } from '../common/icon';
 
 /**
  * Interface for the generic Actions bar item. (`position` is mandatory)
@@ -16,31 +17,19 @@ export interface ActionsBarItemProps {
   dataTest?: string;
 }
 
-export interface ActionsBarButtonIconSvg {
-  svgContent: React.SVGProps<SVGSVGElement>;
-}
-
-export interface ActionsBarButtonIconName {
-  /**
-   * Default icon name defined by BBB (see options there).
-   */
-  iconName: string;
-}
-
-export type ActionsBarIconType = ActionsBarButtonIconSvg | ActionsBarButtonIconName
-
 export interface ActionsBarButtonProps {
   id?: string;
-  icon: ActionsBarIconType;
+  icon: PluginIconType;
   tooltip: string;
   position: ActionsBarPosition;
   dataTest?: string;
   onClick: () => void;
+  color?: string;
 }
 
 export interface ActionsBarSeparatorProps {
   position: ActionsBarPosition;
-  icon?: string;
+  icon?: PluginIconType;
   dataTest?: string;
 }
 

src/extensible-areas/audio-settings-dropdown-item/component.ts

@@ -2,6 +2,7 @@ import { AudioSettingsDropdownItemType } from './enums';
 import {
   AudioSettingsDropdownInterface, AudioSettingsDropdownOptionProps,
 } from './types';
+import { PluginIconType } from '../common/icon';
 
 // AudioSettingsDropdown Extensible Area
 
@@ -12,7 +13,7 @@ export class AudioSettingsDropdownOption implements AudioSettingsDropdownInterfa
 
   label: string;
 
-  icon: string;
+  icon: PluginIconType;
 
   dataTest: string;
 

src/extensible-areas/audio-settings-dropdown-item/types.ts

@@ -1,4 +1,5 @@
 import { PluginProvidedUiItemDescriptor } from '../base';
+import { PluginIconType } from '../common/icon';
 
 /**
  * Audio Settings Dropdown Item - The general Audio settings extensible area
@@ -7,13 +8,13 @@ import { PluginProvidedUiItemDescriptor } from '../base';
  * To make this dropdown appear, the user needs to enter with audio, either listen only
  * or microphone. This will make a small downward arrow appear (chevron).
  */
-export interface AudioSettingsDropdownInterface extends PluginProvidedUiItemDescriptor{
+export interface AudioSettingsDropdownInterface extends PluginProvidedUiItemDescriptor {
 }
 
 export interface AudioSettingsDropdownOptionProps {
   id?: string;
   label: string;
-  icon: string;
+  icon: PluginIconType;
   dataTest?: string;
   onClick: () => void;
 }

src/extensible-areas/camera-settings-dropdown-item/component.ts

@@ -2,6 +2,7 @@ import { CameraSettingsDropdownItemType } from './enums';
 import {
   CameraSettingsDropdownInterface, CameraSettingsDropdownOptionProps,
 } from './types';
+import { PluginIconType } from '../common/icon';
 
 // CameraSettingsDropdown Extensible Area
 
@@ -12,7 +13,7 @@ export class CameraSettingsDropdownOption implements CameraSettingsDropdownInter
 
   label: string;
 
-  icon: string;
+  icon: PluginIconType;
 
   dataTest: string = '';
 
@@ -30,7 +31,7 @@ export class CameraSettingsDropdownOption implements CameraSettingsDropdownInter
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, label = '', icon = '', dataTest = '', onClick = () => {},
+    id, label = '', icon = '', dataTest = '', onClick = () => { },
   }: CameraSettingsDropdownOptionProps) {
     if (id) {
       this.id = id;

src/extensible-areas/camera-settings-dropdown-item/types.ts

@@ -1,4 +1,5 @@
 import { PluginProvidedUiItemDescriptor } from '../base';
+import { PluginIconType } from '../common/icon';
 
 /**
  * Camera Settings Dropdown Item - The general Camera settings extensible area
@@ -7,13 +8,13 @@ import { PluginProvidedUiItemDescriptor } from '../base';
  * To make this dropdown appear, the user needs to enter with webcam.
  * This will make a small downward arrow appear in the camera icon (the chevron).
  */
-export interface CameraSettingsDropdownInterface extends PluginProvidedUiItemDescriptor{
+export interface CameraSettingsDropdownInterface extends PluginProvidedUiItemDescriptor {
 }
 
 export interface CameraSettingsDropdownOptionProps {
   id?: string;
   label: string;
-  icon: string;
+  icon: PluginIconType;
   dataTest?: string;
   onClick: () => void;
 }

src/extensible-areas/common/icon/index.ts

@@ -0,0 +1 @@
+export * from './types';

src/extensible-areas/common/icon/types.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export interface PluginIconName {
+  iconName: string;
+}
+
+export interface PluginIconSvgContent {
+  svgContent: React.SVGProps<SVGSVGElement>;
+}
+
+export type PluginIconType = string | PluginIconName | PluginIconSvgContent;

src/extensible-areas/common/index.ts

@@ -0,0 +1 @@
+export * from './icon';

src/extensible-areas/generic-content-item/component.ts

@@ -1,6 +1,7 @@
 import * as ReactDOM from 'react-dom/client';
 import { GenericContentType } from './enums';
 import { GenericContentInterface, GenericContentMainAreaProps, GenericContentSidekickAreaProps } from './types';
+import { PluginIconType } from '../common/icon';
 
 // GenericContent Extensible Area
 
@@ -48,7 +49,7 @@ export class GenericContentSidekickArea implements GenericContentInterface {
 
   section: string = '';
 
-  buttonIcon: string = '';
+  buttonIcon: PluginIconType = '';
 
   open: boolean = false;
 

src/extensible-areas/generic-content-item/types.ts

@@ -1,5 +1,6 @@
 import * as ReactDOM from 'react-dom/client';
 import { PluginProvidedUiItemDescriptor } from '../base';
+import { PluginIconType } from '../common/icon';
 
 export interface GenericContentInterface extends PluginProvidedUiItemDescriptor {
 }
@@ -15,7 +16,7 @@ export interface GenericContentSidekickAreaProps {
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
   name: string;
   section: string;
-  buttonIcon: string;
+  buttonIcon: PluginIconType;
   open: boolean;
   dataTest?: string;
 }

src/extensible-areas/index.ts

@@ -1,3 +1,4 @@
+export * from './common/icon';
 export * from './presentation-toolbar-item';
 export * from './user-list-dropdown-item';
 export * from './media-area-item';

src/extensible-areas/media-area-item/component.ts

@@ -1,7 +1,8 @@
 import { MediaAreaItemType } from './enums';
 import {
-  MediaAreaInterface, MediaAreaOptionProps, MediaAreaIconType,
+  MediaAreaInterface, MediaAreaOptionProps,
 } from './types';
+import { PluginIconType } from '../common/icon';
 
 // MediaArea Extensible Area
 
@@ -12,7 +13,7 @@ export class MediaAreaOption implements MediaAreaInterface {
 
   label: string;
 
-  icon: MediaAreaIconType;
+  icon: PluginIconType;
 
   tooltip: string;
 

src/extensible-areas/media-area-item/types.ts

@@ -1,4 +1,5 @@
 import { PluginProvidedUiItemDescriptor } from '../base';
+import { PluginIconType } from '../common/icon';
 
 /**
  * Interface for a generic item for the media area.
@@ -17,12 +18,10 @@ export interface MediaAreaButtonIconName {
   iconName: string;
 }
 
-export type MediaAreaIconType = MediaAreaButtonIconSvg | MediaAreaButtonIconName
-
 export interface MediaAreaOptionProps {
   id?: string;
   label: string;
-  icon: MediaAreaIconType;
+  icon: PluginIconType;
   tooltip: string;
   dataTest?: string;
   allowed: boolean;

src/extensible-areas/nav-bar-item/component.ts

@@ -3,6 +3,7 @@ import {
   NavBarInterface, NavBarButtonProps,
   NavBarInfoProps,
 } from './types';
+import { PluginIconType } from '../common/icon';
 
 // NavBar Extensible Area
 
@@ -13,7 +14,7 @@ export class NavBarButton implements NavBarInterface {
 
   label: string;
 
-  icon: string;
+  icon: PluginIconType;
 
   tooltip: string;
 
@@ -45,7 +46,7 @@ export class NavBarButton implements NavBarInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, label = '', icon = '', tooltip = '', disabled = true, dataTest = '', onClick = () => {},
+    id, label = '', icon = '', tooltip = '', disabled = true, dataTest = '', onClick = () => { },
     position = NavBarItemPosition.RIGHT, hasSeparator = true,
   }: NavBarButtonProps) {
     if (id) {