Fixes #28573 - use @theforeman/stories

package.json

@@ -12,10 +12,10 @@
     "test:watch": "tfm-test --watchAll",
     "test:current": "tfm-test --watch",
     "publish-coverage": "tfm-publish-coverage",
-    "storybook": "cross-env NODE_ENV=storybook start-storybook -p 6006",
-    "build-storybook": "cross-env NODE_ENV=storybook NODE_OPTIONS=--max_old_space_size=8192 build-storybook",
+    "stories": "tfm-stories",
+    "build-storybook": "tfm-build-stories",
     "deploy-storybook": "cross-env NODE_ENV=storybook NODE_OPTIONS=--max_old_space_size=8192 storybook-to-ghpages",
-    "postinstall": "./script/npm_install_plugins.js",
+    "postinstall": "./script/npm-fix-foreman-stories.sh && ./script/npm_install_plugins.js",
     "analyze": "./script/webpack-analyze",
     "create-react-component": "yo react-domain"
   },
@@ -29,14 +29,10 @@
     "chromedriver": "79.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "~3.4.12",
-    "@storybook/addon-knobs": "~3.4.12",
-    "@storybook/addon-storysource": "^3.4.12",
-    "@storybook/react": "3.4.10",
-    "@storybook/storybook-deployer": "^2.0.0",
     "@babel/core": "^7.7.0",
     "@theforeman/builder": "^4.0.2",
     "@theforeman/eslint-plugin-foreman": "^4.0.2",
+    "@theforeman/stories": "^4.0.2",
     "@theforeman/test": "^4.0.2",
     "@theforeman/vendor-dev": "^4.0.2",
     "argv-parse": "^1.0.1",

script/npm-fix-foreman-stories.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+# This script will allow you to run tfm-stories
+# while foreman can still use webpack-3 for the normal build.
+# 
+# It is here temporarily until the migration to webpack-4 will be done. 
+
+if [ "$NODE_ENV" = "production" ]; then
+  exit 0
+fi
+
+cd ./node_modules/@theforeman/stories
+npm install

webpack/assets/javascripts/react_app/components/AutoComplete/AutoComplete.stories.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { storiesOf } from '@storybook/react';
+import { storiesOf } from '@theforeman/stories';
 import axios from 'axios';
 import { MockAdapter } from '@theforeman/test';
 import Store from '../../redux';
 import { AutoCompleteProps, API } from './AutoComplete.fixtures';
 import Story from '../../../../../stories/components/Story';
 import AutoComplete from './index';
 
-storiesOf('Components/AutoComplete', module).add(
+storiesOf('Components|AutoComplete', module).add(
   'AutoComplete with mocked data',
   () => {
     const someAutoCompletePath = /^models\/auto_complete_search.*/;

webpack/assets/javascripts/react_app/components/Bookmarks/Bookmarks.stories.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import { storiesOf } from '@theforeman/stories';
 import BookmarkForm from './components/BookmarkForm';
 import BookmarkModal from './components/SearchModal';
 import storeDecorator from '../../../../../stories/storeDecorator';
 import Story from '../../../../../stories/components/Story';
 
-storiesOf('Page chunks/Bookmarks', module)
+storiesOf('Page chunks|Bookmarks', module)
   .addDecorator(storeDecorator)
   .add('Form', () => (
     <Story>

webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBar.stories.js

@@ -1,11 +1,16 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { boolean, number, withKnobs } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
+import {
+  storiesOf,
+  boolean,
+  number,
+  withKnobs,
+  action,
+} from '@theforeman/stories';
+
 import BreadcrumbBar from './BreadcrumbBar';
 import Story from '../../../../../stories/components/Story';
 
-storiesOf('Components/BreadcrumbBar', module)
+storiesOf('Components|BreadcrumbBar', module)
   .addDecorator(withKnobs)
   .add('With open switcher', () => (
     <Story>

webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/DiffModal.stories.js

@@ -1,11 +1,16 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { boolean, withKnobs, select } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
+import {
+  storiesOf,
+  boolean,
+  withKnobs,
+  select,
+  action,
+} from '@theforeman/stories';
+
 import DiffModal from './DiffModal';
 import Story from '../../../../../../stories/components/Story';
 
-storiesOf('Components/Diff', module)
+storiesOf('Components|Diff', module)
   .addDecorator(withKnobs)
   .add('DiffModal', () => (
     <Story>

webpack/assets/javascripts/react_app/components/DiffView/DiffView.stories.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { text, withKnobs } from '@storybook/addon-knobs';
+import { storiesOf, text, withKnobs } from '@theforeman/stories';
+
 import DiffContainer from './DiffContainer';
 import Story from '../../../../../stories/components/Story';
 
-storiesOf('Components/Diff', module)
+storiesOf('Components|Diff', module)
   .addDecorator(withKnobs)
   .add('DiffView', () => (
     <Story narrow>

webpack/assets/javascripts/react_app/components/FactCharts/FactChart.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import { storiesOf } from '@theforeman/stories';
 import thunk from 'redux-thunk';
 import configureMockStore from 'redux-mock-store';
 import FactChart from '.';
@@ -15,7 +15,7 @@ const mockStore = configureMockStore([thunk]);
 
 const dataProp = { id: 1, title: 'test title' };
 
-storiesOf('Page chunks/FactChartModal', module)
+storiesOf('Page chunks|FactChartModal', module)
   .add('ModalClosed', () => (
     <Story>
       <FactChart

webpack/assets/javascripts/react_app/components/ForemanModal/ForemanModal.stories.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Button } from 'patternfly-react';
-import { storiesOf } from '@storybook/react';
+import { storiesOf } from '@theforeman/stories';
 import storeDecorator from '../../../../../stories/storeDecorator';
 import ForemanModal from '.';
 import { useForemanModal } from './ForemanModalHooks';
 import Story from '../../../../../stories/components/Story';
 
-storiesOf('Components/ForemanModal/Props & Children', module)
+storiesOf('Components|ForemanModal/Props & Children', module)
   .addDecorator(storeDecorator) // add Redux store to story
   .add('With default header & footer', () =>
     // using createElement here so that hooks work in stories
@@ -27,7 +27,7 @@ storiesOf('Components/ForemanModal/Props & Children', module)
     })
   );
 
-storiesOf('Components/ForemanModal/Props & Children', module)
+storiesOf('Components|ForemanModal/Props & Children', module)
   .addDecorator(storeDecorator) // add Redux store to story
   .add('With no children', () =>
     // using createElement here so that hooks work in stories
@@ -44,7 +44,7 @@ storiesOf('Components/ForemanModal/Props & Children', module)
     })
   );
 
-storiesOf('Components/ForemanModal/Props & Children', module)
+storiesOf('Components|ForemanModal/Props & Children', module)
   .addDecorator(storeDecorator) // add Redux store to story
   .add('With custom header & footer', () =>
     React.createElement(() => {
@@ -68,7 +68,7 @@ storiesOf('Components/ForemanModal/Props & Children', module)
     })
   );
 
-storiesOf('Components/ForemanModal/Props & Children', module)
+storiesOf('Components|ForemanModal/Props & Children', module)
   .addDecorator(storeDecorator) // add Redux store to story
   .add('With unordered header & footer', () =>
     React.createElement(() => {
@@ -93,7 +93,7 @@ storiesOf('Components/ForemanModal/Props & Children', module)
     })
   );
 
-storiesOf('Components/ForemanModal/Props & Children', module)
+storiesOf('Components|ForemanModal/Props & Children', module)
   .addDecorator(storeDecorator) // add Redux store to story
   .add('With no close button', () =>
     React.createElement(() => {
@@ -115,7 +115,7 @@ storiesOf('Components/ForemanModal/Props & Children', module)
     })
   );
 
-storiesOf('Components/ForemanModal/Props & Children', module)
+storiesOf('Components|ForemanModal/Props & Children', module)
   .addDecorator(storeDecorator) // add Redux store to story
   .add('With no footer', () =>
     React.createElement(() => {
@@ -134,7 +134,7 @@ storiesOf('Components/ForemanModal/Props & Children', module)
     })
   );
 
-storiesOf('Components/ForemanModal/Props & Children', module)
+storiesOf('Components|ForemanModal/Props & Children', module)
   .addDecorator(storeDecorator) // add Redux store to story
   .add('With no header', () =>
     React.createElement(() => {
@@ -155,7 +155,7 @@ storiesOf('Components/ForemanModal/Props & Children', module)
     })
   );
 
-storiesOf('Components/ForemanModal/Props & Children', module)
+storiesOf('Components|ForemanModal/Props & Children', module)
   .addDecorator(storeDecorator) // add Redux store to story
   .add('With props passed down via spread syntax', () =>
     React.createElement(() => {

webpack/assets/javascripts/react_app/components/ForemanModal/ForemanModalHooks.js

@@ -20,7 +20,7 @@ export const useForemanModal = ({ id, open = false }) => {
 
   useEffect(() => {
     if (initialModalState === true) boundSetModalOpen();
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return {
     modalOpen,

webpack/assets/javascripts/react_app/components/ForemanModal/ForemanModalUsage.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'patternfly-react';
 import { useDispatch, connect } from 'react-redux';
-import { storiesOf } from '@storybook/react';
+import { storiesOf } from '@theforeman/stories';
 import {
   setModalOpen as setModalOpenAction,
   setModalClosed as setModalClosedAction,
@@ -14,7 +14,7 @@ import { useForemanModal } from './ForemanModalHooks';
 import Story from '../../../../../stories/components/Story';
 
 // eslint-disable react/jsx-curly-brace-presence
-storiesOf('Components/ForemanModal/ForemanModal Usage', module)
+storiesOf('Components|ForemanModal/ForemanModal Usage', module)
   .addDecorator(storeDecorator) // add Redux store to story
   .add('ForemanModal Basics', () =>
     // using createElement here so that hooks work in stories
@@ -68,7 +68,7 @@ storiesOf('Components/ForemanModal/ForemanModal Usage', module)
     })
   );
 
-storiesOf('Components/ForemanModal/ForemanModal Usage', module)
+storiesOf('Components|ForemanModal/ForemanModal Usage', module)
   .addDecorator(storeDecorator) // add Redux store to story
   .add('With useForemanModal Hook', () =>
     // using createElement here so that hooks work in stories
@@ -100,7 +100,7 @@ storiesOf('Components/ForemanModal/ForemanModal Usage', module)
     })
   );
 
-storiesOf('Components/ForemanModal/ForemanModal Usage', module)
+storiesOf('Components|ForemanModal/ForemanModal Usage', module)
   .addDecorator(storeDecorator) // add Redux store to story
   .add('With react-redux hooks', () =>
     // using createElement here so that hooks work in stories
@@ -173,7 +173,7 @@ storiesOf('Components/ForemanModal/ForemanModal Usage', module)
     })
   );
 
-storiesOf('Components/ForemanModal/ForemanModal Usage', module)
+storiesOf('Components|ForemanModal/ForemanModal Usage', module)
   .addDecorator(storeDecorator) // add Redux store to story
   .add('With connected component', () => {
     const FmContainer = ({ setModalOpen, setModalClosed, modalOpen }) => (

webpack/assets/javascripts/react_app/components/ForemanModal/index.js

@@ -25,7 +25,7 @@ const ConnectedForemanModal = props => {
   useEffect(() => {
     if (modalAlreadyExists) return; // don't add modal if it already exists
     dispatch(addModal({ id, open: false }));
-  }, [modalAlreadyExists, id]);
+  }, [modalAlreadyExists, id]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <ForemanModal

webpack/assets/javascripts/react_app/components/Pagination/PaginationWrapper.stories.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import { storiesOf } from '@theforeman/stories';
 import Story from '../../../../../stories/components/Story';
 import MockPagination from './PaginationWrapper.fixtures';
 
-storiesOf('Components/Pagination', module).add('Show paginated items', () => (
+storiesOf('Components|Pagination', module).add('Show paginated items', () => (
   <Story narrow>
     <MockPagination />
   </Story>