Move some stories to LayoutEditor and ObjectEditor (#4388)

* Add a story for a custom object property editor.
* Add a story for the particle emitter editor.

newIDE/app/src/ObjectsList/EnumerateObjects.spec.js

@@ -17,9 +17,9 @@ describe('EnumerateObjects', () => {
       allObjectsList,
     } = enumerateObjects(project, testLayout);
 
-    expect(containerObjectsList).toHaveLength(17);
+    expect(containerObjectsList).toHaveLength(19);
     expect(projectObjectsList).toHaveLength(2);
-    expect(allObjectsList).toHaveLength(19);
+    expect(allObjectsList).toHaveLength(21);
   });
 
   it('can enumerate groups from a project and scene', () => {

newIDE/app/src/fixtures/TestProject.js

@@ -5,9 +5,11 @@ export type TestProject = {|
   project: gdProject,
   shapePainterObjectConfiguration: gdObjectConfiguration,
   textObjectConfiguration: gdObjectConfiguration,
+  particleEmitterConfiguration: gdObjectConfiguration,
   tiledSpriteObjectConfiguration: gdObjectConfiguration,
-  panelSpriteObjectConfiguration: gdObjectConfiguration,
+  panelSpriteObject: gdObject,
   spriteObjectConfiguration: gdSpriteObject,
+  customObject: gdObject,
   spriteObject: gdObject,
   spriteObjectWithBehaviors: gdObject,
   spriteObjectWithoutBehaviors: gdObject,
@@ -106,8 +108,71 @@ export const makeTestProject = (gd /*: libGDevelop */) /*: TestProject */ => {
   project.getResourcesManager().addResource(jsonResource2);
   project.getResourcesManager().addResource(jsonResource3);
 
+  const buttonExtension = project.insertNewEventsFunctionsExtension(
+    'Button',
+    0
+  );
+  const buttonEventBasedObject = buttonExtension
+    .getEventsBasedObjects()
+    .insertNew('PanelSpriteButton', 0);
+  const buttonProperties = buttonEventBasedObject.getPropertyDescriptors();
+  buttonProperties
+    .insertNew('PressedLabelOffsetY', 0)
+    .setType('number')
+    .setLabel('Label offset on Y axis when pressed');
+  buttonProperties
+    .insertNew('LeftPadding', 1)
+    .setType('number')
+    .setLabel('Left padding')
+    .setGroup('Padding');
+  buttonProperties
+    .insertNew('RightPadding', 2)
+    .setType('number')
+    .setLabel('Right padding')
+    .setGroup('Padding');
+  buttonProperties
+    .insertNew('TopPadding', 3)
+    .setType('number')
+    .setLabel('Top padding')
+    .setGroup('Padding');
+  buttonProperties
+    .insertNew('DownPadding', 4)
+    .setType('number')
+    .setLabel('Down padding')
+    .setGroup('Padding');
+  buttonEventBasedObject.insertNewObject(
+    project,
+    'TextObject::Text',
+    'Label',
+    0
+  );
+  buttonEventBasedObject.insertNewObject(
+    project,
+    'PanelSpriteObject::PanelSprite',
+    'Idle',
+    1
+  );
+  buttonEventBasedObject.insertNewObject(
+    project,
+    'PanelSpriteObject::PanelSprite',
+    'Hovered',
+    2
+  );
+  buttonEventBasedObject.insertNewObject(
+    project,
+    'PanelSpriteObject::PanelSprite',
+    'Pressed',
+    3
+  );
+
   // Create and expose some objects
   const testLayout = project.insertNewLayout('TestLayout', 0);
+  const customObject = testLayout.insertNewObject(
+    project,
+    'Button::PanelSpriteButton',
+    'MyButton',
+    0
+  );
   const shapePainterObject = testLayout.insertNewObject(
     project,
     'PrimitiveDrawing::Drawer',
@@ -120,6 +185,12 @@ export const makeTestProject = (gd /*: libGDevelop */) /*: TestProject */ => {
     'MyTextObject',
     0
   );
+  const particleEmitter = testLayout.insertNewObject(
+    project,
+    'ParticleSystem::ParticleEmitter',
+    'MyParticleEmitter',
+    0
+  );
   const tiledSpriteObject = testLayout.insertNewObject(
     project,
     'TiledSpriteObject::TiledSprite',
@@ -738,8 +809,10 @@ export const makeTestProject = (gd /*: libGDevelop */) /*: TestProject */ => {
     project,
     shapePainterObjectConfiguration: shapePainterObject.getConfiguration(),
     textObjectConfiguration: textObject.getConfiguration(),
+    particleEmitterConfiguration: particleEmitter.getConfiguration(),
     tiledSpriteObjectConfiguration: tiledSpriteObject.getConfiguration(),
-    panelSpriteObjectConfiguration: panelSpriteObject.getConfiguration(),
+    panelSpriteObject,
+    customObject,
     spriteObject,
     spriteObjectConfiguration,
     testSpriteObjectInstance,

newIDE/app/src/stories/FakeHotReloadPreviewButtonProps.js

@@ -0,0 +1,16 @@
+// @flow
+import { action } from '@storybook/addon-actions';
+import { type HotReloadPreviewButtonProps } from '../HotReload/HotReloadPreviewButton';
+
+/**
+ * Fake "external editors" to be used in Storybook.
+ */
+const fakeHotReloadPreviewButtonProps: HotReloadPreviewButtonProps = {
+  hasPreviewsRunning: false,
+  launchProjectDataOnlyPreview: action('launchProjectDataOnlyPreview'),
+  launchProjectWithLoadingScreenPreview: action(
+    'launchProjectWithLoadingScreenPreview'
+  ),
+};
+
+export default fakeHotReloadPreviewButtonProps;

newIDE/app/src/stories/componentStories/LayoutEditor/InstancePropertiesEditor.stories.js

@@ -0,0 +1,36 @@
+// @flow
+
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import { I18n } from '@lingui/react';
+
+// Keep first as it creates the `global.gd` object:
+import { testProject } from '../../GDevelopJsInitializerDecorator';
+
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import InstancePropertiesEditor from '../../../InstancesEditor/InstancePropertiesEditor';
+import SerializedObjectDisplay from '../../SerializedObjectDisplay';
+
+export default {
+  title: 'LayoutEditor/InstancePropertiesEditor',
+  component: InstancePropertiesEditor,
+  decorators: [muiDecorator, paperDecorator],
+};
+
+export const Default = () => (
+  <I18n>
+    {({ i18n }) => (
+      <SerializedObjectDisplay object={testProject.testLayout}>
+        <InstancePropertiesEditor
+          i18n={i18n}
+          project={testProject.project}
+          layout={testProject.testLayout}
+          instances={[testProject.testLayoutInstance1]}
+          editInstanceVariables={action('edit instance variables')}
+          onEditObjectByName={action('edit object')}
+        />
+      </SerializedObjectDisplay>
+    )}
+  </I18n>
+);

newIDE/app/src/stories/componentStories/LayoutEditor/LayersList.stories.js

@@ -0,0 +1,65 @@
+// @flow
+
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+
+// Keep first as it creates the `global.gd` object:
+import { testProject } from '../../GDevelopJsInitializerDecorator';
+
+import fakeResourceExternalEditors from '../../FakeResourceExternalEditors';
+import fakeHotReloadPreviewButtonProps from '../../FakeHotReloadPreviewButtonProps';
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import LayersList from '../../../LayersList';
+
+export default {
+  title: 'LayoutEditor/LayersList',
+  component: LayersList,
+  decorators: [muiDecorator, paperDecorator],
+};
+
+export const Default = () => (
+  <LayersList
+    project={testProject.project}
+    resourceExternalEditors={fakeResourceExternalEditors}
+    onChooseResource={() => {
+      action('onChooseResource');
+      return Promise.reject();
+    }}
+    resourceSources={[]}
+    onEditLayerEffects={action('onEditLayerEffects')}
+    onEditLayer={action('onEditLayer')}
+    onRemoveLayer={(layerName, cb) => {
+      cb(true);
+    }}
+    onRenameLayer={(oldName, newName, cb) => {
+      cb(true);
+    }}
+    layersContainer={testProject.testLayout}
+    hotReloadPreviewButtonProps={fakeHotReloadPreviewButtonProps}
+  />
+);
+
+export const SmallWidthAndHeight = () => (
+  <div style={{ width: 250, height: 200 }}>
+    <LayersList
+      project={testProject.project}
+      resourceExternalEditors={fakeResourceExternalEditors}
+      onChooseResource={() => {
+        action('onChooseResource');
+        return Promise.reject();
+      }}
+      resourceSources={[]}
+      onEditLayerEffects={action('onEditLayerEffects')}
+      onEditLayer={action('onEditLayer')}
+      onRemoveLayer={(layerName, cb) => {
+        cb(true);
+      }}
+      onRenameLayer={(oldName, newName, cb) => {
+        cb(true);
+      }}
+      layersContainer={testProject.testLayout}
+      hotReloadPreviewButtonProps={fakeHotReloadPreviewButtonProps}
+    />
+  </div>
+);

newIDE/app/src/stories/componentStories/LayoutEditor/ObjectGroupEditor.stories.js

@@ -0,0 +1,34 @@
+// @flow
+
+import * as React from 'react';
+
+// Keep first as it creates the `global.gd` object:
+import { testProject } from '../../GDevelopJsInitializerDecorator';
+
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import ObjectGroupEditor from '../../../ObjectGroupEditor';
+
+export default {
+  title: 'LayoutEditor/ObjectGroupEditor',
+  component: ObjectGroupEditor,
+  decorators: [muiDecorator, paperDecorator],
+};
+
+export const Default = () => (
+  <ObjectGroupEditor
+    project={testProject.project}
+    globalObjectsContainer={testProject.project}
+    objectsContainer={testProject.testLayout}
+    group={testProject.group2}
+  />
+);
+
+export const WithLongObjectNames = () => (
+  <ObjectGroupEditor
+    project={testProject.project}
+    globalObjectsContainer={testProject.project}
+    objectsContainer={testProject.testLayout}
+    group={testProject.group4WithLongsNames}
+  />
+);

newIDE/app/src/stories/componentStories/LayoutEditor/ObjectGroupsList.stories.js

@@ -0,0 +1,33 @@
+// @flow
+
+import * as React from 'react';
+
+// Keep first as it creates the `global.gd` object:
+import { testProject } from '../../GDevelopJsInitializerDecorator';
+
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import ObjectGroupsList from '../../../ObjectGroupsList';
+import DragAndDropContextProvider from '../../../UI/DragAndDrop/DragAndDropContextProvider';
+import SerializedObjectDisplay from '../../SerializedObjectDisplay';
+
+export default {
+  title: 'LayoutEditor/ObjectGroupsList',
+  component: ObjectGroupsList,
+  decorators: [muiDecorator, paperDecorator],
+};
+
+export const Default = () => (
+  <DragAndDropContextProvider>
+    <SerializedObjectDisplay object={testProject.testLayout}>
+      <div style={{ height: 250 }}>
+        <ObjectGroupsList
+          globalObjectGroups={testProject.project.getObjectGroups()}
+          objectGroups={testProject.testLayout.getObjectGroups()}
+          onEditGroup={() => {}}
+          canRenameGroup={() => true}
+        />
+      </div>
+    </SerializedObjectDisplay>
+  </DragAndDropContextProvider>
+);

newIDE/app/src/stories/componentStories/LayoutEditor/ObjectsList.stories.js

@@ -0,0 +1,90 @@
+// @flow
+
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+
+// Keep first as it creates the `global.gd` object:
+import { testProject } from '../../GDevelopJsInitializerDecorator';
+
+import fakeHotReloadPreviewButtonProps from '../../FakeHotReloadPreviewButtonProps';
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import ObjectsList from '../../../ObjectsList';
+import DragAndDropContextProvider from '../../../UI/DragAndDrop/DragAndDropContextProvider';
+import SerializedObjectDisplay from '../../SerializedObjectDisplay';
+import fakeResourceExternalEditors from '../../FakeResourceExternalEditors';
+
+export default {
+  title: 'LayoutEditor/ObjectsList',
+  component: ObjectsList,
+  decorators: [muiDecorator, paperDecorator],
+};
+
+export const Default = () => (
+  <DragAndDropContextProvider>
+    <SerializedObjectDisplay object={testProject.testLayout}>
+      <div style={{ height: 250 }}>
+        <ObjectsList
+          getThumbnail={() => 'res/unknown32.png'}
+          project={testProject.project}
+          objectsContainer={testProject.testLayout}
+          layout={testProject.testLayout}
+          resourceSources={[]}
+          onChooseResource={() => Promise.reject('unimplemented')}
+          resourceExternalEditors={fakeResourceExternalEditors}
+          onEditObject={action('On edit object')}
+          onAddObjectInstance={action('On add instance to the scene')}
+          onObjectCreated={action('On object created')}
+          selectedObjectNames={[]}
+          selectedObjectTags={[]}
+          onChangeSelectedObjectTags={selectedObjectTags => {}}
+          getAllObjectTags={() => []}
+          canRenameObject={() => true}
+          onDeleteObject={(objectWithContext, cb) => cb(true)}
+          onRenameObject={(objectWithContext, newName, cb) => cb(true)}
+          onObjectSelected={() => {}}
+          hotReloadPreviewButtonProps={fakeHotReloadPreviewButtonProps}
+          onFetchNewlyAddedResources={action('onFetchNewlyAddedResources')}
+          canInstallPrivateAsset={() => false}
+        />
+      </div>
+    </SerializedObjectDisplay>
+  </DragAndDropContextProvider>
+);
+
+export const WithTags = () => (
+  <DragAndDropContextProvider>
+    <SerializedObjectDisplay object={testProject.testLayout}>
+      <div style={{ height: 250 }}>
+        <ObjectsList
+          getThumbnail={() => 'res/unknown32.png'}
+          project={testProject.project}
+          objectsContainer={testProject.testLayout}
+          layout={testProject.testLayout}
+          resourceSources={[]}
+          onChooseResource={() => Promise.reject('unimplemented')}
+          resourceExternalEditors={fakeResourceExternalEditors}
+          onEditObject={action('On edit object')}
+          onAddObjectInstance={action('On add instance to the scene')}
+          onObjectCreated={action('On object created')}
+          selectedObjectNames={[]}
+          selectedObjectTags={['Tag1', 'Tag2']}
+          onChangeSelectedObjectTags={action('on change selected object tags')}
+          getAllObjectTags={() => [
+            'Tag1',
+            'Tag2',
+            'Looooooooooong Tag 3',
+            'Unselected Tag 4',
+          ]}
+          canRenameObject={() => true}
+          onDeleteObject={(objectWithContext, cb) => cb(true)}
+          onRenameObject={(objectWithContext, newName, cb) => cb(true)}
+          onObjectSelected={() => {}}
+          hotReloadPreviewButtonProps={fakeHotReloadPreviewButtonProps}
+          onFetchNewlyAddedResources={action('onFetchNewlyAddedResources')}
+          canInstallPrivateAsset={() => false}
+        />
+      </div>
+    </SerializedObjectDisplay>
+  </DragAndDropContextProvider>
+);

newIDE/app/src/stories/componentStories/ObjectEditor/BehaviorsEditor.stories.js

@@ -0,0 +1,44 @@
+// @flow
+
+import * as React from 'react';
+
+// Keep first as it creates the `global.gd` object:
+import { testProject } from '../../GDevelopJsInitializerDecorator';
+
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import BehaviorsEditor from '../../../BehaviorsEditor';
+import SerializedObjectDisplay from '../../SerializedObjectDisplay';
+import fakeResourceExternalEditors from '../../FakeResourceExternalEditors';
+
+export default {
+  title: 'ObjectEditor/BehaviorsEditor',
+  component: BehaviorsEditor,
+  decorators: [muiDecorator, paperDecorator],
+};
+
+export const Default = () => (
+  <SerializedObjectDisplay object={testProject.spriteObjectWithBehaviors}>
+    <BehaviorsEditor
+      project={testProject.project}
+      object={testProject.spriteObjectWithBehaviors}
+      resourceSources={[]}
+      onChooseResource={() => Promise.reject('Unimplemented')}
+      resourceExternalEditors={fakeResourceExternalEditors}
+      onUpdateBehaviorsSharedData={() => {}}
+    />
+  </SerializedObjectDisplay>
+);
+
+export const WithoutAnyBehaviors = () => (
+  <SerializedObjectDisplay object={testProject.spriteObjectWithoutBehaviors}>
+    <BehaviorsEditor
+      project={testProject.project}
+      object={testProject.spriteObjectWithoutBehaviors}
+      resourceSources={[]}
+      onChooseResource={() => Promise.reject('Unimplemented')}
+      resourceExternalEditors={fakeResourceExternalEditors}
+      onUpdateBehaviorsSharedData={() => {}}
+    />
+  </SerializedObjectDisplay>
+);

newIDE/app/src/stories/componentStories/ObjectEditor/CustomObjectEditor.stories.js

@@ -0,0 +1,33 @@
+// @flow
+
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+
+// Keep first as it creates the `global.gd` object:
+import { testProject } from '../../GDevelopJsInitializerDecorator';
+
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import CustomObjectPropertiesEditor from '../../../ObjectEditor/Editors/CustomObjectPropertiesEditor';
+import SerializedObjectDisplay from '../../SerializedObjectDisplay';
+import fakeResourceExternalEditors from '../../FakeResourceExternalEditors';
+
+export default {
+  title: 'ObjectEditor/CustomObjectPropertiesEditor',
+  component: CustomObjectPropertiesEditor,
+  decorators: [muiDecorator, paperDecorator],
+};
+
+export const ButtonObject = () => (
+  <SerializedObjectDisplay object={testProject.customObject.getConfiguration()}>
+    <CustomObjectPropertiesEditor
+      objectConfiguration={testProject.customObject.getConfiguration()}
+      project={testProject.project}
+      resourceSources={[]}
+      onChooseResource={source => action('Choose resource from source', source)}
+      resourceExternalEditors={fakeResourceExternalEditors}
+      onSizeUpdated={() => {}}
+      objectName="FakeObjectName"
+    />
+  </SerializedObjectDisplay>
+);

newIDE/app/src/stories/componentStories/ObjectEditor/EffectsList.stories.js

@@ -1,16 +1,16 @@
 // @flow
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
-import muiDecorator from '../ThemeDecorator';
-import paperDecorator from '../PaperDecorator';
-import themeDecorator from '../ThemeDecorator';
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import themeDecorator from '../../ThemeDecorator';
 import GDevelopJsInitializerDecorator, {
   testProject,
-} from '../GDevelopJsInitializerDecorator';
-import EffectsList from '../../EffectsList';
-import DragAndDropContextProvider from '../../UI/DragAndDrop/DragAndDropContextProvider';
-import FixedHeightFlexContainer from '../FixedHeightFlexContainer';
-import fakeResourceExternalEditors from '../FakeResourceExternalEditors';
+} from '../../GDevelopJsInitializerDecorator';
+import EffectsList from '../../../EffectsList';
+import DragAndDropContextProvider from '../../../UI/DragAndDrop/DragAndDropContextProvider';
+import FixedHeightFlexContainer from '../../FixedHeightFlexContainer';
+import fakeResourceExternalEditors from '../../FakeResourceExternalEditors';
 
 export const withSomeEffectsForALayer = () => (
   <DragAndDropContextProvider>
@@ -108,7 +108,7 @@ export const withoutEffectsForAnObject = () => (
 );
 
 export default {
-  title: 'EffectsList',
+  title: 'ObjectEditor/EffectsList',
   component: EffectsList,
   decorators: [paperDecorator, muiDecorator, themeDecorator],
 };

newIDE/app/src/stories/componentStories/ObjectEditor/EmptyEditor.stories.js

@@ -0,0 +1,15 @@
+// @flow
+
+import * as React from 'react';
+
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import EmptyEditor from '../../../ObjectEditor/Editors/EmptyEditor';
+
+export default {
+  title: 'ObjectEditor/EmptyEditor',
+  component: EmptyEditor,
+  decorators: [muiDecorator, paperDecorator],
+};
+
+export const Default = () => <EmptyEditor />;

newIDE/app/src/stories/componentStories/ObjectEditor/NewBehaviorDialog.stories.js

@@ -0,0 +1,34 @@
+// @flow
+
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+
+// Keep first as it creates the `global.gd` object:
+import { testProject } from '../../GDevelopJsInitializerDecorator';
+
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import NewBehaviorDialog from '../../../BehaviorsEditor/NewBehaviorDialog';
+import { ExtensionStoreStateProvider } from '../../../AssetStore/ExtensionStore/ExtensionStoreContext';
+
+export default {
+  title: 'ObjectEditor/NewBehaviorDialog',
+  component: NewBehaviorDialog,
+  decorators: [muiDecorator, paperDecorator],
+};
+
+export const DefaultForSpriteObject = () => (
+  <ExtensionStoreStateProvider>
+    <NewBehaviorDialog
+      open
+      project={testProject.project}
+      objectType={'Sprite'}
+      onClose={action('on close')}
+      onChoose={action('on choose')}
+      objectBehaviorsTypes={[
+        'DestroyOutsideBehavior::DestroyOutside',
+        'PlatformBehavior::PlatformBehavior',
+      ]}
+    />
+  </ExtensionStoreStateProvider>
+);

newIDE/app/src/stories/componentStories/ObjectEditor/ObjectEditorDialog.stories.js

@@ -0,0 +1,86 @@
+// @flow
+
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+
+// Keep first as it creates the `global.gd` object:
+import { testProject } from '../../GDevelopJsInitializerDecorator';
+
+import muiDecorator from '../../ThemeDecorator';
+import ObjectEditorDialog from '../../../ObjectEditor/ObjectEditorDialog';
+import fakeResourceExternalEditors from '../../FakeResourceExternalEditors';
+import EventsFunctionsExtensionsContext from '../../../EventsFunctionsExtensionsLoader/EventsFunctionsExtensionsContext';
+import LocalEventsFunctionsExtensionWriter from '../../../EventsFunctionsExtensionsLoader/Storage/LocalEventsFunctionsExtensionWriter';
+import LocalEventsFunctionsExtensionOpener from '../../../EventsFunctionsExtensionsLoader/Storage/LocalEventsFunctionsExtensionOpener';
+
+export default {
+  title: 'ObjectEditor/ObjectEditorDialog',
+  component: ObjectEditorDialog,
+  decorators: [muiDecorator],
+};
+
+const eventsFunctionsExtensionsContext = {
+  loadProjectEventsFunctionsExtensions: async project => {},
+  unloadProjectEventsFunctionsExtensions: project => {},
+  unloadProjectEventsFunctionsExtension: (project, extensionName) => {},
+  reloadProjectEventsFunctionsExtensions: async project => {},
+  getEventsFunctionsExtensionWriter: () => LocalEventsFunctionsExtensionWriter,
+  getEventsFunctionsExtensionOpener: () => LocalEventsFunctionsExtensionOpener,
+  ensureLoadFinished: async () => {},
+  getIncludeFileHashs: () => ({}),
+  eventsFunctionsExtensionsError: null,
+};
+
+export const CustomObject = () => (
+  <EventsFunctionsExtensionsContext.Provider
+    value={eventsFunctionsExtensionsContext}
+  >
+    <ObjectEditorDialog
+      open={true}
+      object={testProject.customObject}
+      onApply={() => action('Apply changes')}
+      onCancel={() => action('Cancel changes')}
+      onRename={() => action('Rename object')}
+      canRenameObject={name => true}
+      project={testProject.project}
+      resourceSources={[]}
+      onChooseResource={source => action('Choose resource from source', source)}
+      resourceExternalEditors={fakeResourceExternalEditors}
+      onComputeAllVariableNames={() => []}
+      onUpdateBehaviorsSharedData={() => {}}
+      initialTab={null}
+      hotReloadPreviewButtonProps={{
+        hasPreviewsRunning: false,
+        launchProjectDataOnlyPreview: () => action('Hot-reload'),
+        launchProjectWithLoadingScreenPreview: () => action('Reload'),
+      }}
+    />
+  </EventsFunctionsExtensionsContext.Provider>
+);
+
+export const StandardObject = () => (
+  <EventsFunctionsExtensionsContext.Provider
+    value={eventsFunctionsExtensionsContext}
+  >
+    <ObjectEditorDialog
+      open={true}
+      object={testProject.panelSpriteObject}
+      onApply={() => action('Apply changes')}
+      onCancel={() => action('Cancel changes')}
+      onRename={() => action('Rename object')}
+      canRenameObject={name => true}
+      project={testProject.project}
+      resourceSources={[]}
+      onChooseResource={source => action('Choose resource from source', source)}
+      resourceExternalEditors={fakeResourceExternalEditors}
+      onComputeAllVariableNames={() => []}
+      onUpdateBehaviorsSharedData={() => {}}
+      initialTab={null}
+      hotReloadPreviewButtonProps={{
+        hasPreviewsRunning: false,
+        launchProjectDataOnlyPreview: () => action('Hot-reload'),
+        launchProjectWithLoadingScreenPreview: () => action('Reload'),
+      }}
+    />
+  </EventsFunctionsExtensionsContext.Provider>
+);

newIDE/app/src/stories/componentStories/ObjectEditor/PanelSpriteEditor.stories.js

@@ -0,0 +1,35 @@
+// @flow
+
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+
+// Keep first as it creates the `global.gd` object:
+import { testProject } from '../../GDevelopJsInitializerDecorator';
+
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import PanelSpriteEditor from '../../../ObjectEditor/Editors/PanelSpriteEditor';
+import SerializedObjectDisplay from '../../SerializedObjectDisplay';
+import fakeResourceExternalEditors from '../../FakeResourceExternalEditors';
+
+export default {
+  title: 'ObjectEditor/PanelSpriteEditor',
+  component: PanelSpriteEditor,
+  decorators: [muiDecorator, paperDecorator],
+};
+
+export const Default = () => (
+  <SerializedObjectDisplay
+    object={testProject.panelSpriteObject.getConfiguration()}
+  >
+    <PanelSpriteEditor
+      objectConfiguration={testProject.panelSpriteObject.getConfiguration()}
+      project={testProject.project}
+      resourceSources={[]}
+      onChooseResource={source => action('Choose resource from source', source)}
+      resourceExternalEditors={fakeResourceExternalEditors}
+      onSizeUpdated={() => {}}
+      objectName="FakeObjectName"
+    />
+  </SerializedObjectDisplay>
+);

newIDE/app/src/stories/componentStories/ObjectEditor/ParticleEmitterEditor.stories.js

@@ -0,0 +1,33 @@
+// @flow
+
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+
+// Keep first as it creates the `global.gd` object:
+import { testProject } from '../../GDevelopJsInitializerDecorator';
+
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import ParticleEmitterEditor from '../../../ObjectEditor/Editors/ParticleEmitterEditor';
+import SerializedObjectDisplay from '../../SerializedObjectDisplay';
+import fakeResourceExternalEditors from '../../FakeResourceExternalEditors';
+
+export default {
+  title: 'ObjectEditor/ParticleEmitterEditor',
+  component: ParticleEmitterEditor,
+  decorators: [muiDecorator, paperDecorator],
+};
+
+export const Default = () => (
+  <SerializedObjectDisplay object={testProject.particleEmitterConfiguration}>
+    <ParticleEmitterEditor
+      objectConfiguration={testProject.particleEmitterConfiguration}
+      project={testProject.project}
+      resourceSources={[]}
+      onChooseResource={source => action('Choose resource from source', source)}
+      resourceExternalEditors={fakeResourceExternalEditors}
+      onSizeUpdated={() => {}}
+      objectName="FakeObjectName"
+    />
+  </SerializedObjectDisplay>
+);

newIDE/app/src/stories/componentStories/ObjectEditor/ShapePainterEditor.stories.js

@@ -0,0 +1,33 @@
+// @flow
+
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+
+// Keep first as it creates the `global.gd` object:
+import { testProject } from '../../GDevelopJsInitializerDecorator';
+
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import ShapePainterEditor from '../../../ObjectEditor/Editors/ShapePainterEditor';
+import SerializedObjectDisplay from '../../SerializedObjectDisplay';
+import fakeResourceExternalEditors from '../../FakeResourceExternalEditors';
+
+export default {
+  title: 'ObjectEditor/ShapePainterEditor',
+  component: ShapePainterEditor,
+  decorators: [muiDecorator, paperDecorator],
+};
+
+export const Default = () => (
+  <SerializedObjectDisplay object={testProject.shapePainterObjectConfiguration}>
+    <ShapePainterEditor
+      objectConfiguration={testProject.shapePainterObjectConfiguration}
+      project={testProject.project}
+      resourceSources={[]}
+      onChooseResource={source => action('Choose resource from source', source)}
+      resourceExternalEditors={fakeResourceExternalEditors}
+      onSizeUpdated={() => {}}
+      objectName="FakeObjectName"
+    />
+  </SerializedObjectDisplay>
+);

newIDE/app/src/stories/componentStories/ObjectEditor/SpriteEditor.stories.js

@@ -0,0 +1,68 @@
+// @flow
+
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+
+// Keep first as it creates the `global.gd` object:
+import { testProject } from '../../GDevelopJsInitializerDecorator';
+
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import SpriteEditor from '../../../ObjectEditor/Editors/SpriteEditor';
+import SerializedObjectDisplay from '../../SerializedObjectDisplay';
+import fakeResourceExternalEditors from '../../FakeResourceExternalEditors';
+import DragAndDropContextProvider from '../../../UI/DragAndDrop/DragAndDropContextProvider';
+import FixedHeightFlexContainer from '../../FixedHeightFlexContainer';
+import ResourcesLoader from '../../../ResourcesLoader';
+
+export default {
+  title: 'ObjectEditor/SpriteEditor',
+  component: SpriteEditor,
+  decorators: [muiDecorator, paperDecorator],
+};
+
+export const Default = () => (
+  <SerializedObjectDisplay object={testProject.spriteObjectConfiguration}>
+    <DragAndDropContextProvider>
+      <SpriteEditor
+        objectConfiguration={testProject.spriteObjectConfiguration}
+        project={testProject.project}
+        resourceSources={[]}
+        onChooseResource={source =>
+          action('Choose resource from source', source)
+        }
+        resourceExternalEditors={fakeResourceExternalEditors}
+        onSizeUpdated={() => {}}
+        objectName="FakeObjectName"
+      />
+    </DragAndDropContextProvider>
+  </SerializedObjectDisplay>
+);
+
+export const PointsEditor = () => (
+  <SerializedObjectDisplay object={testProject.spriteObjectConfiguration}>
+    <DragAndDropContextProvider>
+      <FixedHeightFlexContainer height={500}>
+        <PointsEditor
+          objectConfiguration={testProject.spriteObjectConfiguration}
+          project={testProject.project}
+          resourcesLoader={ResourcesLoader}
+        />
+      </FixedHeightFlexContainer>
+    </DragAndDropContextProvider>
+  </SerializedObjectDisplay>
+);
+
+export const CollisionMasksEditor = () => (
+  <SerializedObjectDisplay object={testProject.spriteObjectConfiguration}>
+    <DragAndDropContextProvider>
+      <FixedHeightFlexContainer height={500}>
+        <CollisionMasksEditor
+          objectConfiguration={testProject.spriteObjectConfiguration}
+          project={testProject.project}
+          resourcesLoader={ResourcesLoader}
+        />
+      </FixedHeightFlexContainer>
+    </DragAndDropContextProvider>
+  </SerializedObjectDisplay>
+);

newIDE/app/src/stories/componentStories/ObjectEditor/TextEditor.stories.js

@@ -0,0 +1,33 @@
+// @flow
+
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+
+// Keep first as it creates the `global.gd` object:
+import { testProject } from '../../GDevelopJsInitializerDecorator';
+
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import TextEditor from '../../../ObjectEditor/Editors/TextEditor';
+import SerializedObjectDisplay from '../../SerializedObjectDisplay';
+import fakeResourceExternalEditors from '../../FakeResourceExternalEditors';
+
+export default {
+  title: 'ObjectEditor/TextEditor',
+  component: TextEditor,
+  decorators: [muiDecorator, paperDecorator],
+};
+
+export const Default = () => (
+  <SerializedObjectDisplay object={testProject.textObjectConfiguration}>
+    <TextEditor
+      objectConfiguration={testProject.textObjectConfiguration}
+      project={testProject.project}
+      resourceSources={[]}
+      onChooseResource={source => action('Choose resource from source', source)}
+      resourceExternalEditors={fakeResourceExternalEditors}
+      onSizeUpdated={() => {}}
+      objectName="FakeObjectName"
+    />
+  </SerializedObjectDisplay>
+);

newIDE/app/src/stories/componentStories/ObjectEditor/TiledSpriteEditor.stories.js

@@ -0,0 +1,33 @@
+// @flow
+
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+
+// Keep first as it creates the `global.gd` object:
+import { testProject } from '../../GDevelopJsInitializerDecorator';
+
+import muiDecorator from '../../ThemeDecorator';
+import paperDecorator from '../../PaperDecorator';
+import TiledSpriteEditor from '../../../ObjectEditor/Editors/TiledSpriteEditor';
+import SerializedObjectDisplay from '../../SerializedObjectDisplay';
+import fakeResourceExternalEditors from '../../FakeResourceExternalEditors';
+
+export default {
+  title: 'ObjectEditor/TiledSpriteEditor',
+  component: TiledSpriteEditor,
+  decorators: [muiDecorator, paperDecorator],
+};
+
+export const Default = () => (
+  <SerializedObjectDisplay object={testProject.tiledSpriteObjectConfiguration}>
+    <TiledSpriteEditor
+      objectConfiguration={testProject.tiledSpriteObjectConfiguration}
+      project={testProject.project}
+      resourceSources={[]}
+      onChooseResource={source => action('Choose resource from source', source)}
+      resourceExternalEditors={fakeResourceExternalEditors}
+      onSizeUpdated={() => {}}
+      objectName="FakeObjectName"
+    />
+  </SerializedObjectDisplay>
+);

newIDE/app/src/stories/index.js

@@ -21,17 +21,9 @@ import HelpFinder from '../HelpFinder';
 import LocalFolderPicker from '../UI/LocalFolderPicker';
 import LocalFilePicker from '../UI/LocalFilePicker';
 import LocalNetworkPreviewDialog from '../Export/LocalExporters/LocalPreviewLauncher/LocalNetworkPreviewDialog';
-import TextEditor from '../ObjectEditor/Editors/TextEditor';
-import TiledSpriteEditor from '../ObjectEditor/Editors/TiledSpriteEditor';
-import PanelSpriteEditor from '../ObjectEditor/Editors/PanelSpriteEditor';
-import SpriteEditor from '../ObjectEditor/Editors/SpriteEditor';
-import PointsEditor from '../ObjectEditor/Editors/SpriteEditor/PointsEditor';
-import CollisionMasksEditor from '../ObjectEditor/Editors/SpriteEditor/CollisionMasksEditor';
-import EmptyEditor from '../ObjectEditor/Editors/EmptyEditor';
 import ImageThumbnail from '../ResourcesList/ResourceThumbnail/ImageThumbnail';
 import ResourceSelector from '../ResourcesList/ResourceSelector';
 import ResourceSelectorWithThumbnail from '../ResourcesList/ResourceSelectorWithThumbnail';
-import ShapePainterEditor from '../ObjectEditor/Editors/ShapePainterEditor';
 import ExternalEventsAutoComplete from '../EventsSheet/EventsTree/Renderers/LinkEvent/ExternalEventsAutoComplete';
 import LayerField from '../EventsSheet/ParameterFields/LayerField';
 import MouseField from '../EventsSheet/ParameterFields/MouseField';
@@ -44,15 +36,9 @@ import ColorExpressionField from '../EventsSheet/ParameterFields/ColorExpression
 import TrueFalseField from '../EventsSheet/ParameterFields/TrueFalseField';
 import YesNoField from '../EventsSheet/ParameterFields/YesNoField';
 import ForceMultiplierField from '../EventsSheet/ParameterFields/ForceMultiplierField';
-import ObjectsList from '../ObjectsList';
 import ObjectSelector from '../ObjectsList/ObjectSelector';
-import InstancePropertiesEditor from '../InstancesEditor/InstancePropertiesEditor';
-import SerializedObjectDisplay from './SerializedObjectDisplay';
 import ExternalPropertiesDialog from '../MainFrame/EditorContainers/ExternalPropertiesDialog';
 import InstructionEditor from '../EventsSheet/InstructionEditor';
-import BehaviorsEditor from '../BehaviorsEditor';
-import ObjectGroupEditor from '../ObjectGroupEditor';
-import ObjectGroupsList from '../ObjectGroupsList';
 import muiDecorator from './ThemeDecorator';
 import paperDecorator from './PaperDecorator';
 import ValueStateHolder from './ValueStateHolder';
@@ -116,7 +102,6 @@ import EventsBasedBehaviorEditor from '../EventsBasedBehaviorEditor';
 import EventsBasedBehaviorEditorDialog from '../EventsBasedBehaviorEditor/EventsBasedBehaviorEditorDialog';
 import BehaviorTypeSelector from '../BehaviorTypeSelector';
 import ObjectTypeSelector from '../ObjectTypeSelector';
-import NewBehaviorDialog from '../BehaviorsEditor/NewBehaviorDialog';
 import EventsFunctionsExtensionsProvider from '../EventsFunctionsExtensionsLoader/EventsFunctionsExtensionsProvider';
 import SemiControlledTextField from '../UI/SemiControlledTextField';
 import SemiControlledAutoComplete from '../UI/SemiControlledAutoComplete';
@@ -146,6 +131,7 @@ import IconButton from '../UI/IconButton';
 import Brush from '@material-ui/icons/Brush';
 import Delete from '@material-ui/icons/Delete';
 import fakeResourceExternalEditors from './FakeResourceExternalEditors';
+import fakeHotReloadPreviewButtonProps from './FakeHotReloadPreviewButtonProps';
 import {
   TextFieldWithButtonLayout,
   ResponsiveLineStackLayout,
@@ -158,20 +144,16 @@ import {
   makeFakeExpressionAutocompletions,
   makeFakeExactExpressionAutocompletion,
 } from '../fixtures/TestExpressionAutocompletions';
-import LayersList from '../LayersList';
 import AutocompletePicker from '../CommandPalette/CommandPalette/AutocompletePicker';
 import {
   type NamedCommand,
   type CommandOption,
 } from '../CommandPalette/CommandManager';
-import HotReloadPreviewButton, {
-  type HotReloadPreviewButtonProps,
-} from '../HotReload/HotReloadPreviewButton';
+import HotReloadPreviewButton from '../HotReload/HotReloadPreviewButton';
 import HotReloadLogsDialog from '../HotReload/HotReloadLogsDialog';
 import ScrollView from '../UI/ScrollView';
 import '../UI/Theme/Global/Scrollbar.css';
 import '../UI/Theme/Global/Animation.css';
-import { ExtensionStoreStateProvider } from '../AssetStore/ExtensionStore/ExtensionStoreContext';
 import { GamesShowcase } from '../GamesShowcase';
 import { GamesShowcaseStateProvider } from '../GamesShowcase/GamesShowcaseContext';
 import { ShowcasedGameListItem } from '../GamesShowcase/ShowcasedGameListItem';
@@ -198,14 +180,6 @@ addDecorator(GDevelopJsInitializerDecorator);
 
 // No i18n in this file
 
-const hotReloadPreviewButtonProps: HotReloadPreviewButtonProps = {
-  hasPreviewsRunning: false,
-  launchProjectDataOnlyPreview: action('launchProjectDataOnlyPreview'),
-  launchProjectWithLoadingScreenPreview: action(
-    'launchProjectWithLoadingScreenPreview'
-  ),
-};
-
 storiesOf('Welcome', module)
   .addDecorator(paperDecorator)
   .addDecorator(muiDecorator)
@@ -2605,135 +2579,6 @@ storiesOf('NewInstructionEditorMenu', module)
     </Column>
   ));
 
-storiesOf('TextEditor', module)
-  .addDecorator(paperDecorator)
-  .addDecorator(muiDecorator)
-  .add('default', () => (
-    <SerializedObjectDisplay object={testProject.textObjectConfiguration}>
-      <TextEditor
-        objectConfiguration={testProject.textObjectConfiguration}
-        project={testProject.project}
-        resourceSources={[]}
-        onChooseResource={source =>
-          action('Choose resource from source', source)
-        }
-        resourceExternalEditors={fakeResourceExternalEditors}
-        onSizeUpdated={() => {}}
-        objectName="FakeObjectName"
-      />
-    </SerializedObjectDisplay>
-  ));
-
-storiesOf('TiledSpriteEditor', module)
-  .addDecorator(paperDecorator)
-  .addDecorator(muiDecorator)
-  .add('default', () => (
-    <SerializedObjectDisplay
-      object={testProject.tiledSpriteObjectConfiguration}
-    >
-      <TiledSpriteEditor
-        objectConfiguration={testProject.tiledSpriteObjectConfiguration}
-        project={testProject.project}
-        resourceSources={[]}
-        onChooseResource={source =>
-          action('Choose resource from source', source)
-        }
-        resourceExternalEditors={fakeResourceExternalEditors}
-        onSizeUpdated={() => {}}
-        objectName="FakeObjectName"
-      />
-    </SerializedObjectDisplay>
-  ));
-
-storiesOf('PanelSpriteEditor', module)
-  .addDecorator(paperDecorator)
-  .addDecorator(muiDecorator)
-  .add('default', () => (
-    <SerializedObjectDisplay
-      object={testProject.panelSpriteObjectConfiguration}
-    >
-      <PanelSpriteEditor
-        objectConfiguration={testProject.panelSpriteObjectConfiguration}
-        project={testProject.project}
-        resourceSources={[]}
-        onChooseResource={source =>
-          action('Choose resource from source', source)
-        }
-        resourceExternalEditors={fakeResourceExternalEditors}
-        onSizeUpdated={() => {}}
-        objectName="FakeObjectName"
-      />
-    </SerializedObjectDisplay>
-  ));
-
-storiesOf('SpriteEditor and related editors', module)
-  .addDecorator(paperDecorator)
-  .addDecorator(muiDecorator)
-  .add('SpriteEditor', () => (
-    <SerializedObjectDisplay object={testProject.spriteObjectConfiguration}>
-      <DragAndDropContextProvider>
-        <SpriteEditor
-          objectConfiguration={testProject.spriteObjectConfiguration}
-          project={testProject.project}
-          resourceSources={[]}
-          onChooseResource={source =>
-            action('Choose resource from source', source)
-          }
-          resourceExternalEditors={fakeResourceExternalEditors}
-          onSizeUpdated={() => {}}
-          objectName="FakeObjectName"
-        />
-      </DragAndDropContextProvider>
-    </SerializedObjectDisplay>
-  ))
-  .add('PointsEditor', () => (
-    <SerializedObjectDisplay object={testProject.spriteObjectConfiguration}>
-      <DragAndDropContextProvider>
-        <FixedHeightFlexContainer height={500}>
-          <PointsEditor
-            objectConfiguration={testProject.spriteObjectConfiguration}
-            project={testProject.project}
-            resourcesLoader={ResourcesLoader}
-          />
-        </FixedHeightFlexContainer>
-      </DragAndDropContextProvider>
-    </SerializedObjectDisplay>
-  ))
-  .add('CollisionMasksEditor', () => (
-    <SerializedObjectDisplay object={testProject.spriteObjectConfiguration}>
-      <DragAndDropContextProvider>
-        <FixedHeightFlexContainer height={500}>
-          <CollisionMasksEditor
-            objectConfiguration={testProject.spriteObjectConfiguration}
-            project={testProject.project}
-            resourcesLoader={ResourcesLoader}
-          />
-        </FixedHeightFlexContainer>
-      </DragAndDropContextProvider>
-    </SerializedObjectDisplay>
-  ));
-
-storiesOf('ShapePainterEditor', module)
-  .addDecorator(paperDecorator)
-  .addDecorator(muiDecorator)
-  .add('default', () => (
-    <SerializedObjectDisplay
-      object={testProject.shapePainterObjectConfiguration}
-    >
-      <ShapePainterEditor
-        objectConfiguration={testProject.shapePainterObjectConfiguration}
-        project={testProject.project}
-        resourceSources={[]}
-        onChooseResource={source =>
-          action('Choose resource from source', source)
-        }
-        resourceExternalEditors={fakeResourceExternalEditors}
-        onSizeUpdated={() => {}}
-        objectName="FakeObjectName"
-      />
-    </SerializedObjectDisplay>
-  ));
-
 storiesOf('ImageThumbnail', module)
   .addDecorator(paperDecorator)
   .addDecorator(muiDecorator)
@@ -2753,84 +2598,6 @@ storiesOf('ImageThumbnail', module)
     />
   ));
 
-storiesOf('EmptyEditor', module)
-  .addDecorator(paperDecorator)
-  .addDecorator(muiDecorator)
-  .add('default', () => <EmptyEditor />);
-
-storiesOf('ObjectsList', module)
-  .addDecorator(paperDecorator)
-  .addDecorator(muiDecorator)
-  .add('default', () => (
-    <DragAndDropContextProvider>
-      <SerializedObjectDisplay object={testProject.testLayout}>
-        <div style={{ height: 250 }}>
-          <ObjectsList
-            getThumbnail={() => 'res/unknown32.png'}
-            project={testProject.project}
-            objectsContainer={testProject.testLayout}
-            layout={testProject.testLayout}
-            resourceSources={[]}
-            onChooseResource={() => Promise.reject('unimplemented')}
-            resourceExternalEditors={fakeResourceExternalEditors}
-            onEditObject={action('On edit object')}
-            onAddObjectInstance={action('On add instance to the scene')}
-            onObjectCreated={action('On object created')}
-            selectedObjectNames={[]}
-            selectedObjectTags={[]}
-            onChangeSelectedObjectTags={selectedObjectTags => {}}
-            getAllObjectTags={() => []}
-            canRenameObject={() => true}
-            onDeleteObject={(objectWithContext, cb) => cb(true)}
-            onRenameObject={(objectWithContext, newName, cb) => cb(true)}
-            onObjectSelected={() => {}}
-            hotReloadPreviewButtonProps={hotReloadPreviewButtonProps}
-            onFetchNewlyAddedResources={action('onFetchNewlyAddedResources')}
-            canInstallPrivateAsset={() => false}
-          />
-        </div>
-      </SerializedObjectDisplay>
-    </DragAndDropContextProvider>
-  ))
-  .add('with tags', () => (
-    <DragAndDropContextProvider>
-      <SerializedObjectDisplay object={testProject.testLayout}>
-        <div style={{ height: 250 }}>
-          <ObjectsList
-            getThumbnail={() => 'res/unknown32.png'}
-            project={testProject.project}
-            objectsContainer={testProject.testLayout}
-            layout={testProject.testLayout}
-            resourceSources={[]}
-            onChooseResource={() => Promise.reject('unimplemented')}
-            resourceExternalEditors={fakeResourceExternalEditors}
-            onEditObject={action('On edit object')}
-            onAddObjectInstance={action('On add instance to the scene')}
-            onObjectCreated={action('On object created')}
-            selectedObjectNames={[]}
-            selectedObjectTags={['Tag1', 'Tag2']}
-            onChangeSelectedObjectTags={action(
-              'on change selected object tags'
-            )}
-            getAllObjectTags={() => [
-              'Tag1',
-              'Tag2',
-              'Looooooooooong Tag 3',
-              'Unselected Tag 4',
-            ]}
-            canRenameObject={() => true}
-            onDeleteObject={(objectWithContext, cb) => cb(true)}
-            onRenameObject={(objectWithContext, newName, cb) => cb(true)}
-            onObjectSelected={() => {}}
-            hotReloadPreviewButtonProps={hotReloadPreviewButtonProps}
-            onFetchNewlyAddedResources={action('onFetchNewlyAddedResources')}
-            canInstallPrivateAsset={() => false}
-          />
-        </div>
-      </SerializedObjectDisplay>
-    </DragAndDropContextProvider>
-  ));
-
 storiesOf('ObjectSelector', module)
   .addDecorator(paperDecorator)
   .addDecorator(muiDecorator)
@@ -2872,92 +2639,6 @@ storiesOf('ObjectSelector', module)
     />
   ));
 
-storiesOf('InstancePropertiesEditor', module)
-  .addDecorator(paperDecorator)
-  .addDecorator(muiDecorator)
-  .add('default', () => (
-    <I18n>
-      {({ i18n }) => (
-        <SerializedObjectDisplay object={testProject.testLayout}>
-          <InstancePropertiesEditor
-            i18n={i18n}
-            project={testProject.project}
-            layout={testProject.testLayout}
-            instances={[testProject.testLayoutInstance1]}
-            editInstanceVariables={action('edit instance variables')}
-            onEditObjectByName={action('edit object')}
-          />
-        </SerializedObjectDisplay>
-      )}
-    </I18n>
-  ));
-
-storiesOf('ObjectGroupEditor', module)
-  .addDecorator(paperDecorator)
-  .addDecorator(muiDecorator)
-  .add('default', () => (
-    <ObjectGroupEditor
-      project={testProject.project}
-      globalObjectsContainer={testProject.project}
-      objectsContainer={testProject.testLayout}
-      group={testProject.group2}
-    />
-  ))
-  .add('with long object names', () => (
-    <ObjectGroupEditor
-      project={testProject.project}
-      globalObjectsContainer={testProject.project}
-      objectsContainer={testProject.testLayout}
-      group={testProject.group4WithLongsNames}
-    />
-  ));
-
-storiesOf('ObjectGroupsList', module)
-  .addDecorator(paperDecorator)
-  .addDecorator(muiDecorator)
-  .add('default', () => (
-    <DragAndDropContextProvider>
-      <SerializedObjectDisplay object={testProject.testLayout}>
-        <div style={{ height: 250 }}>
-          <ObjectGroupsList
-            globalObjectGroups={testProject.project.getObjectGroups()}
-            objectGroups={testProject.testLayout.getObjectGroups()}
-            onEditGroup={() => {}}
-            canRenameGroup={() => true}
-          />
-        </div>
-      </SerializedObjectDisplay>
-    </DragAndDropContextProvider>
-  ));
-
-storiesOf('BehaviorsEditor', module)
-  .addDecorator(paperDecorator)
-  .addDecorator(muiDecorator)
-  .add('default', () => (
-    <SerializedObjectDisplay object={testProject.spriteObjectWithBehaviors}>
-      <BehaviorsEditor
-        project={testProject.project}
-        object={testProject.spriteObjectWithBehaviors}
-        resourceSources={[]}
-        onChooseResource={() => Promise.reject('Unimplemented')}
-        resourceExternalEditors={fakeResourceExternalEditors}
-        onUpdateBehaviorsSharedData={() => {}}
-      />
-    </SerializedObjectDisplay>
-  ))
-  .add('without any behaviors', () => (
-    <SerializedObjectDisplay object={testProject.spriteObjectWithoutBehaviors}>
-      <BehaviorsEditor
-        project={testProject.project}
-        object={testProject.spriteObjectWithoutBehaviors}
-        resourceSources={[]}
-        onChooseResource={() => Promise.reject('Unimplemented')}
-        resourceExternalEditors={fakeResourceExternalEditors}
-        onUpdateBehaviorsSharedData={() => {}}
-      />
-    </SerializedObjectDisplay>
-  ));
-
 const fakeError = new Error('Fake error for storybook');
 storiesOf('ErrorBoundary', module)
   .addDecorator(paperDecorator)
@@ -3612,7 +3293,7 @@ storiesOf('ProjectManager', module)
         'onReloadEventsFunctionsExtensions'
       )}
       freezeUpdate={false}
-      hotReloadPreviewButtonProps={hotReloadPreviewButtonProps}
+      hotReloadPreviewButtonProps={fakeHotReloadPreviewButtonProps}
       resourceSources={[]}
       onChooseResource={() => Promise.reject('unimplemented')}
       resourceExternalEditors={fakeResourceExternalEditors}
@@ -3655,7 +3336,7 @@ storiesOf('ProjectManager', module)
         'onReloadEventsFunctionsExtensions'
       )}
       freezeUpdate={false}
-      hotReloadPreviewButtonProps={hotReloadPreviewButtonProps}
+      hotReloadPreviewButtonProps={fakeHotReloadPreviewButtonProps}
       resourceSources={[]}
       onChooseResource={() => Promise.reject('unimplemented')}
       resourceExternalEditors={fakeResourceExternalEditors}
@@ -3709,71 +3390,6 @@ storiesOf('ObjectTypeSelector', module)
     />
   ));
 
-storiesOf('NewBehaviorDialog', module)
-  .addDecorator(muiDecorator)
-  .add('default, for a Sprite object', () => (
-    <ExtensionStoreStateProvider>
-      <NewBehaviorDialog
-        open
-        project={testProject.project}
-        objectType={'Sprite'}
-        onClose={action('on close')}
-        onChoose={action('on choose')}
-        objectBehaviorsTypes={[
-          'DestroyOutsideBehavior::DestroyOutside',
-          'PlatformBehavior::PlatformBehavior',
-        ]}
-      />
-    </ExtensionStoreStateProvider>
-  ));
-
-storiesOf('LayersList', module)
-  .addDecorator(muiDecorator)
-  .add('default', () => (
-    <LayersList
-      project={testProject.project}
-      resourceExternalEditors={fakeResourceExternalEditors}
-      onChooseResource={() => {
-        action('onChooseResource');
-        return Promise.reject();
-      }}
-      resourceSources={[]}
-      onEditLayerEffects={action('onEditLayerEffects')}
-      onEditLayer={action('onEditLayer')}
-      onRemoveLayer={(layerName, cb) => {
-        cb(true);
-      }}
-      onRenameLayer={(oldName, newName, cb) => {
-        cb(true);
-      }}
-      layersContainer={testProject.testLayout}
-      hotReloadPreviewButtonProps={hotReloadPreviewButtonProps}
-    />
-  ))
-  .add('small width and height', () => (
-    <div style={{ width: 250, height: 200 }}>
-      <LayersList
-        project={testProject.project}
-        resourceExternalEditors={fakeResourceExternalEditors}
-        onChooseResource={() => {
-          action('onChooseResource');
-          return Promise.reject();
-        }}
-        resourceSources={[]}
-        onEditLayerEffects={action('onEditLayerEffects')}
-        onEditLayer={action('onEditLayer')}
-        onRemoveLayer={(layerName, cb) => {
-          cb(true);
-        }}
-        onRenameLayer={(oldName, newName, cb) => {
-          cb(true);
-        }}
-        layersContainer={testProject.testLayout}
-        hotReloadPreviewButtonProps={hotReloadPreviewButtonProps}
-      />
-    </div>
-  ));
-
 storiesOf('CommandPalette', module)
   .addDecorator(muiDecorator)
   .add('commands', () => (