Extract react-cosmos-plugin-open-fixture plugin (#1379)

* Extract react-cosmos-plugin-open-file plugin

* Rename plugin

* Convert to devServer plugin

* Move UI plugin specs to shared package

* Move core UI slots and plugin mocks to shared package

* Move core UI to shared package

* Update startDevServer.ts

* Update getCosmosPluginConfigs.test.ts

* Move slots to shared package

* Extract react-cosmos-plugin-open-fixture plugin UI plugin

* Update getCosmosPluginConfigs.ts

* Update startDevServer.ts

* Ignore plugins from node_modules by default

example/booleanInputPlugin/src/ui.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ValueInputSlotProps } from 'react-cosmos-playground2/plugin';
+import { ValueInputSlotProps } from 'react-cosmos-shared2/ui';
 import { createPlugin } from 'react-plugin';
 import { BooleanInput } from './BooleanInput';
 

example/booleanInputPlugin/webpack.config.js

@@ -1,5 +1,4 @@
 const { join } = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const src = join(__dirname, 'src');
 const dist = join(__dirname, 'dist');

example/cosmos.config.json

@@ -1,5 +1,6 @@
 {
   "disablePlugins": false,
   "globalImports": ["src/polyfills.ts", "src/global.css"],
-  "staticPath": "static"
+  "staticPath": "static",
+  "plugins": ["react-cosmos-plugin-open-fixture"]
 }

example/package.json

@@ -8,6 +8,7 @@
     "start": "cosmos"
   },
   "dependencies": {
-    "react-cosmos": "^5.7.2"
+    "react-cosmos": "^5.7.2",
+    "react-cosmos-plugin-open-fixture": "^5.7.2"
   }
 }

packages/react-cosmos-playground2/src/global/style.ts

@@ -1,6 +1,5 @@
+import { fontFamily, grey8, white3 } from 'react-cosmos-shared2/ui';
 import { createGlobalStyle } from 'styled-components';
-import { grey8, white3 } from '../shared/colors';
-import { fontFamily } from '../shared/vars';
 
 export const GlobalStyle = createGlobalStyle`
   html {

packages/react-cosmos-playground2/src/index.tsx

@@ -8,9 +8,9 @@ import 'whatwg-fetch';
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import * as ReactPlugin from 'react-plugin';
+import { CoreSpec } from 'react-cosmos-shared2/ui';
 import { CosmosPluginConfig } from 'react-cosmos-plugin';
 import { GlobalStyle } from './global/style';
-import { CoreSpec } from './plugins/Core/public';
 import { DEFAULT_PLUGIN_CONFIG } from './shared/plugin';
 
 import './plugins/pluginEntry';

packages/react-cosmos-playground2/src/plugins/BuildNotifications/index.test.tsx

@@ -1,10 +1,10 @@
 import { BuildMessage } from 'react-cosmos-shared2/build';
-import { loadPlugins, resetPlugins } from 'react-plugin';
 import {
   getMessageHandlerContext,
   mockMessageHandler,
   mockNotifications,
-} from '../../testHelpers/pluginMocks';
+} from 'react-cosmos-shared2/ui';
+import { loadPlugins, resetPlugins } from 'react-plugin';
 
 beforeEach(() => jest.isolateModules(() => require('.')));
 

packages/react-cosmos-playground2/src/plugins/BuildNotifications/index.ts

@@ -1,9 +1,11 @@
-import { createPlugin, PluginContext } from 'react-plugin';
-import { Message } from 'react-cosmos-shared2/util';
 import { BuildMessage } from 'react-cosmos-shared2/build';
-import { MessageHandlerSpec } from '../MessageHandler/public';
-import { NotificationsSpec } from '../Notifications/public';
-import { BuildNotificationsSpec } from './public';
+import {
+  BuildNotificationsSpec,
+  MessageHandlerSpec,
+  NotificationsSpec,
+} from 'react-cosmos-shared2/ui';
+import { Message } from 'react-cosmos-shared2/util';
+import { createPlugin, PluginContext } from 'react-plugin';
 
 type BuildNotificationsContext = PluginContext<BuildNotificationsSpec>;
 

packages/react-cosmos-playground2/src/plugins/ClassStatePanel/ClassStatePanel/ComponentClassState.tsx

@@ -6,9 +6,8 @@ import {
   FixtureStateValues,
   updateFixtureStateClassState,
 } from 'react-cosmos-shared2/fixtureState';
+import { IconButton32, RotateCcwIcon } from 'react-cosmos-shared2/ui';
 import { StateUpdater } from 'react-cosmos-shared2/util';
-import { IconButton32 } from '../../../shared/buttons';
-import { RotateCcwIcon } from '../../../shared/icons';
 import {
   Actions,
   Body,

packages/react-cosmos-playground2/src/plugins/ClassStatePanel/index.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
 import { FixtureElementId } from 'react-cosmos-shared2/fixtureState';
 import { FixtureId } from 'react-cosmos-shared2/renderer';
+import {
+  ClassStatePanelSpec,
+  SidePanelRowSlotProps,
+  StorageSpec,
+} from 'react-cosmos-shared2/ui';
 import { createPlugin, PluginContext } from 'react-plugin';
-import { SidePanelRowSlotProps } from '../../shared/slots/SidePanelRowSlot';
 import { TreeExpansion } from '../../shared/treeExpansion';
 import {
   FixtureExpansionGroup,
   getFixtureExpansion,
   updateElementExpansion,
 } from '../../shared/valueInputTree';
-import { StorageSpec } from '../Storage/public';
 import { ClassStatePanel } from './ClassStatePanel';
-import { ClassStatePanelSpec } from './public';
 import { CLASS_STATE_TREE_EXPANSION_STORAGE_KEY } from './shared';
 
 type ClassStatePanelContext = PluginContext<ClassStatePanelSpec>;

packages/react-cosmos-playground2/src/plugins/ContentOverlay/ContentOverlay.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RuntimeStatus, UrlStatus } from '../RendererPreview/public';
+import { RuntimeStatus, UrlStatus } from 'react-cosmos-shared2/ui';
 import { NoFixtureSelected } from './NoFixtureSelected';
 import { RendererNotResponding } from './RendererNotResponding';
 import { ContentContainer, OverlayContainer } from './shared';

packages/react-cosmos-playground2/src/plugins/ContentOverlay/KeyShortcut.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { screenGrey1, screenGrey5 } from 'react-cosmos-shared2/ui';
 import styled from 'styled-components';
-import { screenGrey1, screenGrey5 } from '../../shared/colors';
 import { KeyBox } from '../../shared/KeyBox';
 
 type Props = {

packages/react-cosmos-playground2/src/plugins/ContentOverlay/NoFixtureSelected.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { screenGrey3 } from 'react-cosmos-shared2/ui';
 import styled from 'styled-components';
-import { screenGrey3 } from '../../shared/colors';
 import { BlankCanvasIllustration } from '../../shared/illustrations';
 import { KeyShortcut } from './KeyShortcut';
 import {

packages/react-cosmos-playground2/src/plugins/ContentOverlay/RendererNotResponding.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import styled from 'styled-components';
 import {
   screenGrey3,
   screenGrey5,
   screenPrimary2,
   screenPrimary3,
-} from '../../shared/colors';
+} from 'react-cosmos-shared2/ui';
+import styled from 'styled-components';
 import { ArtificialIntelligenceIllustration } from '../../shared/illustrations';
 import {
   ContentContainer,

packages/react-cosmos-playground2/src/plugins/ContentOverlay/WelcomeCosmos.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import styled from 'styled-components';
 import {
   screenGrey1,
   screenGrey3,
   screenGrey5,
   screenPrimary1,
   screenPrimary2,
   screenPrimary3,
-} from '../../shared/colors';
+} from 'react-cosmos-shared2/ui';
+import styled from 'styled-components';
 import { AstronautIllustration } from '../../shared/illustrations';
 import {
   ContentContainer,

packages/react-cosmos-playground2/src/plugins/ContentOverlay/__tests__/blank.tsx

@@ -1,12 +1,12 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { loadPlugins, resetPlugins, Slot } from 'react-plugin';
 import {
   mockRendererCore,
   mockRendererPreview,
   mockRouter,
   mockStorage,
-} from '../../../testHelpers/pluginMocks';
+} from 'react-cosmos-shared2/ui';
+import { loadPlugins, resetPlugins, Slot } from 'react-plugin';
 import { WELCOME_DISMISS_STORAGE_KEY } from '../welcomeDismiss';
 
 beforeEach(() => jest.isolateModules(() => require('..')));

packages/react-cosmos-playground2/src/plugins/ContentOverlay/__tests__/notFound.tsx

@@ -1,12 +1,12 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { loadPlugins, Slot, resetPlugins } from 'react-plugin';
 import {
   mockRendererCore,
   mockRendererPreview,
   mockRouter,
   mockStorage,
-} from '../../../testHelpers/pluginMocks';
+} from 'react-cosmos-shared2/ui';
+import { loadPlugins, resetPlugins, Slot } from 'react-plugin';
 
 beforeEach(() => jest.isolateModules(() => require('..')));
 

packages/react-cosmos-playground2/src/plugins/ContentOverlay/__tests__/rendererNotResponding.tsx

@@ -1,12 +1,12 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { loadPlugins, Slot, resetPlugins } from 'react-plugin';
 import {
   mockRendererCore,
   mockRendererPreview,
   mockRouter,
   mockStorage,
-} from '../../../testHelpers/pluginMocks';
+} from 'react-cosmos-shared2/ui';
+import { loadPlugins, resetPlugins, Slot } from 'react-plugin';
 
 beforeEach(() => jest.isolateModules(() => require('..')));
 

packages/react-cosmos-playground2/src/plugins/ContentOverlay/__tests__/selectedFixture.tsx

@@ -1,12 +1,12 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { loadPlugins, Slot, resetPlugins } from 'react-plugin';
 import {
   mockRendererCore,
   mockRendererPreview,
   mockRouter,
   mockStorage,
-} from '../../../testHelpers/pluginMocks';
+} from 'react-cosmos-shared2/ui';
+import { loadPlugins, resetPlugins, Slot } from 'react-plugin';
 
 beforeEach(() => jest.isolateModules(() => require('..')));
 

packages/react-cosmos-playground2/src/plugins/ContentOverlay/__tests__/waiting.tsx

@@ -1,12 +1,12 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { loadPlugins, Slot, resetPlugins } from 'react-plugin';
 import {
   mockRendererCore,
   mockRendererPreview,
   mockRouter,
   mockStorage,
-} from '../../../testHelpers/pluginMocks';
+} from 'react-cosmos-shared2/ui';
+import { loadPlugins, resetPlugins, Slot } from 'react-plugin';
 
 beforeEach(() => jest.isolateModules(() => require('..')));
 

packages/react-cosmos-playground2/src/plugins/ContentOverlay/__tests__/welcome.tsx

@@ -1,12 +1,12 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { loadPlugins, Slot, resetPlugins } from 'react-plugin';
 import {
   mockRendererCore,
   mockRendererPreview,
   mockRouter,
   mockStorage,
-} from '../../../testHelpers/pluginMocks';
+} from 'react-cosmos-shared2/ui';
+import { loadPlugins, resetPlugins, Slot } from 'react-plugin';
 
 beforeEach(() => jest.isolateModules(() => require('..')));
 

packages/react-cosmos-playground2/src/plugins/ContentOverlay/cosmos.decorator.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { screenGrey6 } from 'react-cosmos-shared2/ui';
 import styled from 'styled-components';
-import { screenGrey6 } from '../../shared/colors';
 
 export default ({ children }: { children: React.ReactNode }) => (
   <Wrapper>{children}</Wrapper>

packages/react-cosmos-playground2/src/plugins/ContentOverlay/index.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
+import {
+  ContentOverlaySpec,
+  RendererCoreSpec,
+  RendererPreviewSpec,
+  RouterSpec,
+} from 'react-cosmos-shared2/ui';
 import { createPlugin } from 'react-plugin';
 import { ContentOverlay } from './ContentOverlay';
-import { RouterSpec } from '../Router/public';
-import { RendererCoreSpec } from '../RendererCore/public';
-import { RendererPreviewSpec } from '../RendererPreview/public';
-import { ContentOverlaySpec } from './public';
 import { useWelcomeDismiss } from './welcomeDismiss';
 
 const { plug, register } = createPlugin<ContentOverlaySpec>({

packages/react-cosmos-playground2/src/plugins/ContentOverlay/shared.ts

@@ -1,14 +1,14 @@
-import { PluginContext } from 'react-plugin';
-import styled from 'styled-components';
 import {
+  ContentOverlaySpec,
   screenGrey1,
   screenGrey2,
   screenGrey5,
   screenGrey6,
   screenPrimary2,
   screenPrimary3,
-} from '../../shared/colors';
-import { ContentOverlaySpec } from './public';
+} from 'react-cosmos-shared2/ui';
+import { PluginContext } from 'react-plugin';
+import styled from 'styled-components';
 
 export type ContentOverlayContext = PluginContext<ContentOverlaySpec>;
 

packages/react-cosmos-playground2/src/plugins/ContentOverlay/welcomeDismiss.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StorageSpec } from '../Storage/public';
+import { StorageSpec } from 'react-cosmos-shared2/ui';
 import { ContentOverlayContext } from './shared';
 
 export const WELCOME_DISMISS_STORAGE_KEY = 'welcomeDismissedAt';

packages/react-cosmos-playground2/src/plugins/ControlPanel/ControlPanel.tsx

@@ -5,18 +5,20 @@ import {
   FixtureStateControl,
   FixtureStateControls,
 } from 'react-cosmos-shared2/fixtureState';
+import {
+  ControlActionSlot,
+  ControlSlot,
+  IconButton32,
+  RotateCcwIcon,
+} from 'react-cosmos-shared2/ui';
 import { StateUpdater } from 'react-cosmos-shared2/util';
-import { IconButton32 } from '../../shared/buttons';
-import { RotateCcwIcon } from '../../shared/icons';
 import {
   Actions,
   Body,
   Container,
   Header,
   Title,
 } from '../../shared/sidePanelUi';
-import { ControlActionSlot } from '../../shared/slots/ControlActionSlot';
-import { ControlSlot } from '../../shared/slots/ControlSlot';
 
 type Props = {
   fixtureState: FixtureState;

packages/react-cosmos-playground2/src/plugins/ControlPanel/index.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
+import {
+  ControlPanelSpec,
+  SidePanelRowSlotProps,
+} from 'react-cosmos-shared2/ui';
 import { createPlugin } from 'react-plugin';
-import { SidePanelRowSlotProps } from '../../shared/slots/SidePanelRowSlot';
 import { ControlPanel } from './ControlPanel';
-import { ControlPanelSpec } from './public';
 
 const { namedPlug, register } = createPlugin<ControlPanelSpec>({
   name: 'controlPanel',

packages/react-cosmos-playground2/src/plugins/SelectControl/SelectValueInput.tsx → packages/react-cosmos-playground2/src/plugins/ControlSelect/SelectValueInput.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FixtureStateSelectControl } from 'react-cosmos-shared2/fixtureState';
-import { lightBlue } from '../../shared/colors';
+import { lightBlue } from 'react-cosmos-shared2/ui';
 import { Select } from '../../shared/inputs/Select';
 import {
   Label,

packages/react-cosmos-playground2/src/plugins/SelectControl/index.tsx → packages/react-cosmos-playground2/src/plugins/ControlSelect/index.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback } from 'react';
 import { FixtureStateSelectControl } from 'react-cosmos-shared2/fixtureState';
+import { ControlSelectSpec, ControlSlotProps } from 'react-cosmos-shared2/ui';
 import { createPlugin } from 'react-plugin';
-import { ControlSlotProps } from '../../shared/slots/ControlSlot';
-import { ControlSelectSpec } from './public';
 import { SelectValueInput } from './SelectValueInput';
 
 const { plug, register } = createPlugin<ControlSelectSpec>({

packages/react-cosmos-playground2/src/plugins/Core/index.test.tsx

@@ -1,6 +1,5 @@
+import { CoreSpec, getCoreMethods, mockStorage } from 'react-cosmos-shared2/ui';
 import { loadPlugins, resetPlugins } from 'react-plugin';
-import { mockStorage, getCoreMethods } from '../../testHelpers/pluginMocks';
-import { CoreSpec } from './public';
 
 beforeEach(() => jest.isolateModules(() => require('.')));
 

packages/react-cosmos-playground2/src/plugins/Core/index.tsx

@@ -1,7 +1,7 @@
 import { omit } from 'lodash';
 import { registerShortcuts } from 'react-cosmos-shared2/playground';
+import { Commands, CoreSpec } from 'react-cosmos-shared2/ui';
 import { createPlugin, PluginContext } from 'react-plugin';
-import { Commands, CoreSpec } from './public';
 
 type CoreContext = PluginContext<CoreSpec>;