chore: fix demo

packages/dockview-demo/package.json

@@ -15,8 +15,6 @@
   "license": "MIT",
   "dependencies": {
     "dockview": "^1.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "recoil": "^0.7.2"
   },
   "devDependencies": {
@@ -30,8 +28,6 @@
     "@storybook/builder-webpack5": "^6.4.22",
     "@storybook/manager-webpack5": "^6.4.22",
     "@storybook/react": "^6.4.22",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
     "babel-loader": "^8.2.4",
     "cross-env": "^7.0.3",
     "rimraf": "^3.0.2",
@@ -47,4 +43,4 @@
     "webpack-dev-middleware": "^4.1.0",
     "webpack-virtual-modules": "^0.4.2"
   }
-}
+}

packages/dockview-demo/src/layout-grid/activitybar.tsx

@@ -1,11 +1,8 @@
 import * as React from 'react';
-import {
-    CompositeDisposable,
-    GridviewApi,
-    IGridviewPanelProps,
-} from 'dockview';
+import { GridviewApi, IGridviewPanelProps } from 'dockview';
 import './activitybar.scss';
 import { useLayoutRegistry } from './registry';
+import { CompositeDisposable } from '../lifecycle';
 
 const ActivitybarImage = (props: { url: string }) => (
     <a

packages/dockview-demo/src/layout-grid/layoutGrid.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import {
     IDockviewPanelProps,
-    CompositeDisposable,
     GroupChangeKind,
     IGridviewPanelProps,
     TabContextMenuEvent,
@@ -25,6 +24,7 @@ import { GridviewDemoPanel } from '../panels/gridview/gridview';
 import { useRecoilCallback } from 'recoil';
 import { selectedPanelAtom } from './footer';
 import { ExampleFunctions } from './panels/exampleFunctions';
+import { CompositeDisposable } from '../lifecycle';
 
 const Test = (props: IDockviewPanelProps) => {
     const [counter, setCounter] = React.useState<number>(0);

packages/dockview-demo/src/layout-grid/panel.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { CompositeDisposable, IGridviewPanelProps } from 'dockview';
+import { IGridviewPanelProps } from 'dockview';
+import { CompositeDisposable } from '../lifecycle';
 
 export const Panel = (props: IGridviewPanelProps) => {
     const [active, setActive] = React.useState<boolean>();

packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx

@@ -1,11 +1,6 @@
-import {
-    CompositeDisposable,
-    DockviewComponents,
-    IDockviewPanelHeaderProps,
-    IDockviewPanelProps,
-    PanelCollection,
-} from 'dockview';
+import { DockviewComponents, IDockviewPanelProps } from 'dockview';
 import * as React from 'react';
+import { CompositeDisposable } from '../../lifecycle';
 import './exampleFunctions.scss';
 
 export const ExampleFunctions = (

packages/dockview-demo/src/layout-grid/sidebar.tsx

@@ -4,12 +4,12 @@ import {
     PaneviewReact,
     PaneviewReadyEvent,
     IPaneviewPanelProps,
-    CompositeDisposable,
     PaneviewApi,
     PaneviewDropEvent,
 } from 'dockview';
 import { ControlCenter } from './controlCenter';
 import './sidebar.scss';
+import { CompositeDisposable } from '../lifecycle';
 
 const components = {
     default: (props: IPaneviewPanelProps) => {

packages/dockview-demo/src/layout-grid/splitPanel.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-    CompositeDisposable,
     ISplitviewPanelProps,
     Orientation,
     SplitviewReadyEvent,
@@ -10,6 +9,7 @@ import {
 } from 'dockview';
 import { useLayoutRegistry } from './registry';
 import './splitPanel.scss';
+import { CompositeDisposable } from '../lifecycle';
 
 const components = {
     default1: (props: ISplitviewPanelProps) => {

packages/dockview-demo/src/panels/gridview/gridview.tsx

@@ -1,6 +1,5 @@
 import {
     ActiveEvent,
-    CompositeDisposable,
     FocusEvent,
     GridConstraintChangeEvent,
     GridviewApi,
@@ -16,6 +15,7 @@ import {
     VisibilityEvent,
 } from 'dockview';
 import * as React from 'react';
+import { CompositeDisposable } from '../../lifecycle';
 
 const components: PanelCollection<IGridviewPanelProps> = {
     default: (props) => {

packages/dockview-demo/src/panels/splitview/splitview.tsx

@@ -1,5 +1,4 @@
 import {
-    CompositeDisposable,
     ISplitviewPanelProps,
     Orientation,
     SplitviewApi,
@@ -10,10 +9,10 @@ import {
     FocusEvent,
     VisibilityEvent,
     PanelConstraintChangeEvent,
-    IGroupPanel,
     IDockviewPanelProps,
 } from 'dockview';
 import * as React from 'react';
+import { CompositeDisposable } from '../../lifecycle';
 import './splitview.scss';
 
 const components = {

packages/dockview-demo/src/services/viewContainer.ts

@@ -1,9 +1,5 @@
-import {
-    CompositeDisposable,
-    Emitter,
-    Event,
-    SerializedPaneview,
-} from 'dockview';
+import { SerializedPaneview } from 'dockview';
+import { Emitter, Event } from '../events';
 import { DefaultView, View, SerializedView } from './view';
 import { IViewRegistry } from './viewRegistry';
 

packages/dockview-demo/src/services/viewService.ts

@@ -1,11 +1,6 @@
-import {
-    CompositeDisposable,
-    Emitter,
-    Event,
-    IDisposable,
-    IView,
-} from 'dockview';
-import { DefaultView, View } from './view';
+import { Emitter, Event } from '../events';
+import { IDisposable } from '../lifecycle';
+import { View } from './view';
 import {
     PaneviewContainer,
     ViewContainer,

packages/dockview-demo/src/services/widgets.tsx

@@ -1,5 +1,4 @@
 import {
-    CompositeDisposable,
     getPaneData,
     GridviewApi,
     IGridviewPanelProps,
@@ -20,6 +19,7 @@ import { RegisteredView, VIEW_REGISTRY } from './viewRegistry';
 import { toggleClass } from '../dom';
 import { Container } from './sidebarItem';
 import './widgets.scss';
+import { CompositeDisposable } from '../lifecycle';
 
 class ViewServiceModel {
     private readonly viewService: IViewService;

packages/dockview-demo/src/stories/paneview/paneview.deserialization.stories.tsx

@@ -5,14 +5,14 @@ import {
     PaneviewReadyEvent,
     IPaneviewPanelProps,
     PanelConstraintChangeEvent,
-    CompositeDisposable,
     PanelDimensionChangeEvent,
     ExpansionEvent,
     FocusEvent,
     ActiveEvent,
 } from 'dockview';
 import * as React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { Meta } from '@storybook/react';
+import { CompositeDisposable } from '../../lifecycle';
 
 const components: PanelCollection<IPaneviewPanelProps<any>> = {
     default: (props: IPaneviewPanelProps<{ color: string }>) => {