refactor: rename TabGroupColor to DockviewTabGroupColor and convert T…

.github/workflows/main.yml

@@ -83,13 +83,23 @@ jobs:
                   fi
                   echo "Generated files are up to date."
 
+            - name: Remove stale gen comment
+              if: always() && github.event_name == 'pull_request'
+              env:
+                  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              run: |
+                  gh api "repos/${{ github.repository }}/issues/${{ github.event.pull_request.number }}/comments" \
+                    --paginate --jq '.[] | select(.body | contains("<!-- gen-check -->")) | .id' \
+                  | xargs -I{} gh api -X DELETE "repos/${{ github.repository }}/issues/comments/{}"
+
             - name: Comment diff on PR
               if: failure() && github.event_name == 'pull_request'
               env:
                   GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
               run: |
                   DIFF=$(cat /tmp/gen-diff.txt)
                   gh pr comment ${{ github.event.pull_request.number }} --body "$(cat <<EOF
+                  <!-- gen-check -->
                   ## ⚠️ Generated files are out of date
 
                   Run \`npm run gen\` and commit the result.

packages/dockview-core/src/__tests__/dockview/components/titlebar/tabGroupChip.spec.ts

@@ -1,6 +1,9 @@
 import { fireEvent } from '@testing-library/dom';
 import { TabGroupChip } from '../../../../dockview/components/titlebar/tabGroupChip';
-import { TabGroup, TAB_GROUP_COLORS } from '../../../../dockview/tabGroup';
+import {
+    TabGroup,
+    DockviewTabGroupColors,
+} from '../../../../dockview/tabGroup';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { DockviewApi } from '../../../../api/component.api';
 
@@ -208,10 +211,10 @@ describe('TabGroupChip', () => {
             api: fromPartial<DockviewApi>({}),
         });
 
-        for (const color of TAB_GROUP_COLORS) {
+        for (const color of Object.values(DockviewTabGroupColors)) {
             tabGroup.setColor(color);
 
-            for (const c of TAB_GROUP_COLORS) {
+            for (const c of Object.values(DockviewTabGroupColors)) {
                 expect(
                     chip.element.classList.contains(`dv-tab-group-chip--${c}`)
                 ).toBe(c === color);

packages/dockview-core/src/__tests__/dockview/tabGroup.test.ts

@@ -1,6 +1,6 @@
 import {
     TabGroup,
-    TabGroupColor,
+    DockviewTabGroupColor,
     isValidTabGroupColor,
 } from '../../dockview/tabGroup';
 
@@ -26,7 +26,7 @@ describe('TabGroup', () => {
 
     test('should default invalid color to grey', () => {
         const group = new TabGroup('g3', {
-            color: 'invalid' as TabGroupColor,
+            color: 'invalid' as DockviewTabGroupColor,
         });
         expect(group.color).toBe('grey');
         group.dispose();
@@ -160,7 +160,7 @@ describe('TabGroup', () => {
 
     test('should default to grey on invalid color set', () => {
         const group = new TabGroup('g1', { color: 'blue' });
-        group.setColor('invalid' as TabGroupColor);
+        group.setColor('invalid' as DockviewTabGroupColor);
         expect(group.color).toBe('grey');
         group.dispose();
     });

packages/dockview-core/src/api/component.api.ts

@@ -58,7 +58,7 @@ import {
     DockviewTabGroupCollapsedChangeEvent,
     DockviewTabGroupPanelChangeEvent,
 } from '../dockview/events';
-import { ITabGroup, TabGroupColor } from '../dockview/tabGroup';
+import { ITabGroup, DockviewTabGroupColor } from '../dockview/tabGroup';
 import {
     PaneviewComponentOptions,
     PaneviewDndOverlayEvent,
@@ -1041,7 +1041,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
     createTabGroup(options: {
         groupId: string;
         label?: string;
-        color?: TabGroupColor;
+        color?: DockviewTabGroupColor;
     }): ITabGroup {
         const model = this._getGroupModel(options.groupId);
         return model.createTabGroup({

packages/dockview-core/src/dockview/components/titlebar/tabGroupChip.ts

@@ -1,7 +1,11 @@
 import { addDisposableListener, Emitter, Event } from '../../../events';
 import { CompositeDisposable } from '../../../lifecycle';
 import { toggleClass } from '../../../dom';
-import { ITabGroup, TabGroupColor, TAB_GROUP_COLORS } from '../../tabGroup';
+import {
+    ITabGroup,
+    DockviewTabGroupColor,
+    DockviewTabGroupColors,
+} from '../../tabGroup';
 import { ITabGroupChipRenderer } from '../../framework';
 import { DockviewApi } from '../../../api/component.api';
 
@@ -83,8 +87,8 @@ export class TabGroupChip
         this.updateCollapsed(params.tabGroup.collapsed);
     }
 
-    private updateColor(color: TabGroupColor): void {
-        for (const c of TAB_GROUP_COLORS) {
+    private updateColor(color: DockviewTabGroupColor): void {
+        for (const c of Object.values(DockviewTabGroupColors)) {
             toggleClass(this._element, `dv-tab-group-chip--${c}`, c === color);
         }
     }

packages/dockview-core/src/dockview/contextMenu.ts

@@ -6,7 +6,7 @@ import {
     ContextMenuItemConfig,
     ContextMenuItem,
 } from './options';
-import { TAB_GROUP_COLORS, ITabGroup } from './tabGroup';
+import { DockviewTabGroupColors, ITabGroup } from './tabGroup';
 
 let _nextId = 0;
 const nextContextMenuItemId = () => `dv-ctx-menu-item-${_nextId++}`;
@@ -51,7 +51,7 @@ function buildColorPicker(tabGroup: ITabGroup, close: () => void): HTMLElement {
     const wrapper = document.createElement('div');
     wrapper.className = 'dv-context-menu-color-picker';
 
-    for (const color of TAB_GROUP_COLORS) {
+    for (const color of Object.values(DockviewTabGroupColors)) {
         const swatch = document.createElement('div');
         swatch.className = `dv-context-menu-color-swatch dv-tab-group-chip--${color}`;
         if (tabGroup.color === color) {

packages/dockview-core/src/dockview/dockviewComponent.ts

@@ -203,7 +203,7 @@ export interface FloatingGroupOptions {
     position?: AnchorPosition;
 }
 
-export interface FloatingGroupOptionsInternal extends FloatingGroupOptions {
+interface FloatingGroupOptionsInternal extends FloatingGroupOptions {
     skipRemoveGroup?: boolean;
     inDragMode?: boolean;
     skipActiveGroup?: boolean;

packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts

@@ -54,7 +54,7 @@ import { DropTargetAnchorContainer } from '../dnd/dropTargetAnchorContainer';
 import {
     TabGroup,
     ITabGroup,
-    TabGroupColor,
+    DockviewTabGroupColor,
     SerializedTabGroup,
 } from './tabGroup';
 import { EdgeGroupPosition } from './dockviewShell';
@@ -660,7 +660,7 @@ export class DockviewGroupPanelModel
 
     createTabGroup(options?: {
         label?: string;
-        color?: TabGroupColor;
+        color?: DockviewTabGroupColor;
         id?: string;
     }): ITabGroup {
         const id = options?.id ?? `tg-${this.id}-${this._tabGroupIdCounter++}`;

packages/dockview-core/src/dockview/options.ts

@@ -179,7 +179,7 @@ export interface DockviewOptions {
 }
 
 export type TabAnimation = 'smooth' | 'default';
-export const DEFAULT_TAB_ANIMATION: TabAnimation = 'default';
+const DEFAULT_TAB_ANIMATION: TabAnimation = 'default';
 
 export interface DockviewDndOverlayEvent extends IAcceptableEvent {
     nativeEvent: DragEvent;

packages/dockview-core/src/dockview/tabGroup.ts

@@ -1,7 +1,7 @@
 import { Emitter, Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 
-export type TabGroupColor =
+export type DockviewTabGroupColor =
     | 'grey'
     | 'blue'
     | 'red'
@@ -11,35 +11,39 @@ export type TabGroupColor =
     | 'purple'
     | 'cyan';
 
-export const TAB_GROUP_COLORS: readonly TabGroupColor[] = [
-    'grey',
-    'blue',
-    'red',
-    'yellow',
-    'green',
-    'pink',
-    'purple',
-    'cyan',
-] as const;
-
-const VALID_COLORS: Set<string> = new Set<string>(TAB_GROUP_COLORS);
-
-export function isValidTabGroupColor(value: string): value is TabGroupColor {
+export const DockviewTabGroupColors: Record<string, DockviewTabGroupColor> = {
+    Grey: 'grey',
+    Blue: 'blue',
+    Red: 'red',
+    Yellow: 'yellow',
+    Green: 'green',
+    Pink: 'pink',
+    Purple: 'purple',
+    Cyan: 'cyan',
+} as const;
+
+const VALID_COLORS: Set<string> = new Set<string>(
+    Object.values(DockviewTabGroupColors)
+);
+
+export function isValidTabGroupColor(
+    value: string
+): value is DockviewTabGroupColor {
     return VALID_COLORS.has(value);
 }
 
 export interface SerializedTabGroup {
     id: string;
     label?: string;
-    color: TabGroupColor;
+    color: DockviewTabGroupColor;
     collapsed: boolean;
     panelIds: string[];
 }
 
 export interface ITabGroup {
     readonly id: string;
     readonly label: string;
-    readonly color: TabGroupColor;
+    readonly color: DockviewTabGroupColor;
     readonly collapsed: boolean;
     readonly panelIds: readonly string[];
     readonly size: number;
@@ -56,7 +60,7 @@ export interface ITabGroup {
     indexOfPanel(panelId: string): number;
     containsPanel(panelId: string): boolean;
     setLabel(value: string): void;
-    setColor(value: TabGroupColor): void;
+    setColor(value: DockviewTabGroupColor): void;
     collapse(): void;
     expand(): void;
     toggle(): void;
@@ -66,7 +70,7 @@ export interface ITabGroup {
 
 export class TabGroup extends CompositeDisposable implements ITabGroup {
     private _label: string;
-    private _color: TabGroupColor;
+    private _color: DockviewTabGroupColor;
     private _collapsed = false;
     private readonly _panelIds: string[] = [];
 
@@ -90,7 +94,7 @@ export class TabGroup extends CompositeDisposable implements ITabGroup {
         return this._label;
     }
 
-    get color(): TabGroupColor {
+    get color(): DockviewTabGroupColor {
         return this._color;
     }
 
@@ -102,7 +106,7 @@ export class TabGroup extends CompositeDisposable implements ITabGroup {
         this._onDidChange.fire();
     }
 
-    setColor(value: TabGroupColor): void {
+    setColor(value: DockviewTabGroupColor): void {
         if (this.isDisposed) {
             return;
         }
@@ -132,13 +136,13 @@ export class TabGroup extends CompositeDisposable implements ITabGroup {
 
     constructor(
         readonly id: string,
-        options?: { label?: string; color?: TabGroupColor }
+        options?: { label?: string; color?: DockviewTabGroupColor }
     ) {
         super();
 
         this._label = options?.label ?? '';
         this._color = isValidTabGroupColor(options?.color ?? '')
-            ? (options!.color as TabGroupColor)
+            ? (options!.color as DockviewTabGroupColor)
             : 'grey';
 
         this.addDisposables(

packages/dockview-core/src/index.ts

@@ -80,8 +80,8 @@ export * from './dockview/options';
 export * from './dockview/theme';
 export * from './dockview/dockviewPanel';
 export {
-    TabGroupColor,
-    TAB_GROUP_COLORS,
+    DockviewTabGroupColor,
+    DockviewTabGroupColors,
     ITabGroup,
     SerializedTabGroup,
     isValidTabGroupColor,

packages/docs/docs/core/panels/tabs.mdx

@@ -697,7 +697,7 @@ The `ITabGroup` interface provides methods to read and modify a tab group:
 ```ts
 tabGroup.id;           // readonly string
 tabGroup.label;        // readonly string
-tabGroup.color;        // readonly TabGroupColor
+tabGroup.color;        // readonly DockviewTabGroupColor
 tabGroup.collapsed;    // readonly boolean
 tabGroup.panelIds;     // readonly string[]
 tabGroup.size;         // readonly number (panel count)

packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx

@@ -10,8 +10,8 @@ import {
     IContextMenuItemComponentProps,
     GetTabContextMenuItemsParams,
     GetTabGroupChipContextMenuItemsParams,
-    TAB_GROUP_COLORS,
-    TabGroupColor,
+    DockviewTabGroupColors,
+    DockviewTabGroupColor,
 } from 'dockview';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -602,9 +602,10 @@ const DockviewDemo = (props: {
                     label: 'Add to new group',
                     action: () => {
                         const label = window.prompt('Group name:') || '';
-                        const color = TAB_GROUP_COLORS[
-                            Math.floor(Math.random() * TAB_GROUP_COLORS.length)
-                        ] as TabGroupColor;
+                        const colors = Object.values(DockviewTabGroupColors);
+                        const color = colors[
+                            Math.floor(Math.random() * colors.length)
+                        ] as DockviewTabGroupColor;
                         const newGroup = api.createTabGroup({
                             groupId,
                             label,

packages/docs/templates/dockview/tab-groups/react/src/tabGroupActions.tsx

@@ -1,4 +1,4 @@
-import { DockviewApi, TAB_GROUP_COLORS, TabGroupColor } from 'dockview';
+import { DockviewApi, DockviewTabGroupColors, DockviewTabGroupColor } from 'dockview';
 
 export interface ContextMenuItem {
     label: string;
@@ -68,9 +68,10 @@ export function buildTabContextMenuItems(
         label: 'Add to new group',
         onClick: () => {
             const label = window.prompt('Group name:') || '';
-            const color = TAB_GROUP_COLORS[
-                Math.floor(Math.random() * TAB_GROUP_COLORS.length)
-            ] as TabGroupColor;
+            const colors = Object.values(DockviewTabGroupColors);
+            const color = colors[
+                Math.floor(Math.random() * colors.length)
+            ] as DockviewTabGroupColor;
             const newGroup = api.createTabGroup({ groupId, label, color });
             api.addPanelToTabGroup({
                 groupId,