Fixes #28574 - use @theforeman/stories

adamruzicka · Jan 3, 2020 · 3b675d4 · 3b675d4
1 parent f312d6b
commit 3b675d4
Show file tree

Hide file tree

Showing 20 changed files with 420 additions and 451 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -5,20 +5,24 @@
     "./node_modules/@theforeman/vendor-dev/eslint.extends.js"
   ],
   "rules": {
-    "prettier/prettier": ["error", {
-      "singleQuote": true,
-      "trailingComma": "es5"
-    }],
-    "import/no-unresolved": ["error", {
-      "ignore": ['foremanReact/.*']
-    }],
-    "import/extensions": ["error", {
-      "ignore": ['foremanReact/.*']
-    }]
-  },
-  "settings": {
-    "import/resolver": {
-      "babel-module": {}
-    }
+    "prettier/prettier": [
+      "error",
+      {
+        "singleQuote": true,
+        "trailingComma": "es5"
+      }
+    ],
+    "import/no-unresolved": [
+      "error",
+      {
+        "ignore": ["foremanReact/.*"]
+      }
+    ],
+    "import/extensions": [
+      "error",
+      {
+        "ignore": ["foremanReact/.*"]
+      }
+    ]
   }
 }
diff --git a/.storybook/addons.js b/.storybook/addons.js
diff --git a/.storybook/config.js b/.storybook/config.js
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
diff --git a/.babelrc.js → babel.config.js b/.babelrc.js → babel.config.js
diff --git a/package.json b/package.json
@@ -9,9 +9,9 @@
     "test:watch": "node node_modules/.bin/jest --watchAll",
     "test:current": "node node_modules/.bin/jest --watch",
     "coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "node --max_old_space_size=2048 ./node_modules/.bin/build-storybook --config-dir .storybook --output-dir .storybook-dist",
-    "storybook:deploy": "surge --project .storybook-dist",
+    "stories": "tfm-stories --plugin",
+    "stories:build": "tfm-build-stories --plugin",
+    "stories:deploy": "surge --project .storybook-dist",
     "create-react-component": "yo react-domain"
   },
   "repository": {
@@ -22,40 +22,35 @@
     "url": "http://projects.theforeman.org/projects/foreman-tasks/issues"
   },
   "dependencies": {
-    "@theforeman/vendor": "^3.3.2",
+    "@theforeman/vendor": "^3.11.0",
     "c3": "^0.4.11",
     "humanize-duration": "^3.20.1",
     "react-intl": "^2.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.0",
-    "@storybook/addon-actions": "^5.0.1",
-    "@storybook/addon-knobs": "^5.0.1",
-    "@storybook/react": "^5.0.1",
-    "@theforeman/env": "^3.3.2",
-    "@theforeman/builder": "^3.3.2",
-    "@theforeman/vendor-dev": "^3.3.2",
+    "@theforeman/env": "^3.11.0",
+    "@theforeman/builder": "^3.11.0",
+    "@theforeman/stories": "^3.11.0",
+    "@theforeman/vendor-core": "^3.11.0",
+    "@theforeman/vendor-dev": "^3.11.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
-    "babel-loader": "^8.0.0",
     "coveralls": "^3.0.0",
     "enzyme": "^3.4.0",
     "enzyme-adapter-react-16": "^1.4.0",
     "enzyme-to-json": "^3.2.1",
     "eslint": "^4.10.0",
     "eslint-import-resolver-babel-module": "^5.1.0",
     "eslint-plugin-patternfly-react": "0.2.0",
-    "identity-obj-proxy": "^3.0.0",
     "jed": "^1.1.1",
     "jest-cli": "^24.9.0",
     "jest-prop-type-error": "^1.1.0",
-    "node-sass": "^4.5.0",
     "patternfly": "^3.58.0",
     "prettier": "^1.13.5",
     "raf": "^3.4.0",
     "react-redux-test-utils": "^0.1.1",
     "react-remarkable": "^1.1.3",
-    "sass-loader": "^6.0.7",
     "stylelint": "^9.3.0",
     "stylelint-config-standard": "^18.0.0",
     "surge": "^0.20.3"

diff --git a/webpack/ForemanTasks/Components/TaskDetails/TaskDetails.stories.js b/webpack/ForemanTasks/Components/TaskDetails/TaskDetails.stories.js
@@ -1,5 +1,9 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import TaskDetails from './TaskDetails';
 
-storiesOf('TaskDetails', module).add('TaskDetails', () => <TaskDetails />);
+export default {
+  title: 'TaskDetails',
+  component: TaskDetails,
+};
+
+export const Basic = () => <TaskDetails />;
diff --git a/...Dashboard/Components/TasksCardsGrid/Components/PausedTasksCard/PausedTasksCard.stories.js b/...Dashboard/Components/TasksCardsGrid/Components/PausedTasksCard/PausedTasksCard.stories.js
@@ -1,7 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withKnobs, number, select } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
+import { action, number, select } from '@theforeman/stories';
 import { withCardsDecorator } from '../../../../../../../stories/decorators';
 
 import {
@@ -11,41 +9,47 @@ import {
 } from '../../../../TasksDashboardConstants';
 import PausedTasksCard from './PausedTasksCard';
 
-storiesOf('TasksDashboard/TasksCardsGrid', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withCardsDecorator)
-  .add('PausedTasksCard', () => {
-    const selectTime = select(
-      'time',
-      TASKS_DASHBOARD_AVAILABLE_TIMES,
-      PausedTasksCard.defaultProps.time
-    );
+export default {
+  title: 'TasksDashboard/TasksCardsGrid/Cards/PausedTasksCard',
+  component: PausedTasksCard,
+  decorators: [withCardsDecorator],
+  parameters: {
+    centered: { disable: true },
+  },
+};
 
-    const selectMode = select(
-      'mode',
-      { ...TASKS_DASHBOARD_AVAILABLE_QUERY_MODES, NONE: 'none', TOTAL: null },
-      'none'
-    );
-    return (
-      <PausedTasksCard
-        data={{
-          last: number('data.last', 3),
-          older: number('data.older', 5),
-        }}
-        time={selectTime}
-        query={{
-          state: select(
-            'query.state',
-            {
-              ...TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
-              NONE: null,
-            },
-            TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.PAUSED
-          ),
-          mode: selectMode,
-          time: selectTime,
-        }}
-        updateQuery={action('updateQuery')}
-      />
-    );
-  });
+export const Basic = () => {
+  const selectTime = select(
+    'time',
+    TASKS_DASHBOARD_AVAILABLE_TIMES,
+    PausedTasksCard.defaultProps.time
+  );
+
+  const selectMode = select(
+    'mode',
+    { ...TASKS_DASHBOARD_AVAILABLE_QUERY_MODES, NONE: 'none', TOTAL: null },
+    'none'
+  );
+  return (
+    <PausedTasksCard
+      data={{
+        last: number('data.last', 3),
+        older: number('data.older', 5),
+      }}
+      time={selectTime}
+      query={{
+        state: select(
+          'query.state',
+          {
+            ...TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
+            NONE: null,
+          },
+          TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.PAUSED
+        ),
+        mode: selectMode,
+        time: selectTime,
+      }}
+      updateQuery={action('updateQuery')}
+    />
+  );
+};
diff --git a/...shboard/Components/TasksCardsGrid/Components/RunningTasksCard/RunningTasksCard.stories.js b/...shboard/Components/TasksCardsGrid/Components/RunningTasksCard/RunningTasksCard.stories.js
@@ -1,7 +1,6 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withKnobs, number, select } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
+import { number, select, action } from '@theforeman/stories';
+
 import { withCardsDecorator } from '../../../../../../../stories/decorators';
 
 import {
@@ -11,41 +10,47 @@ import {
 } from '../../../../TasksDashboardConstants';
 import RunningTasksCard from './RunningTasksCard';
 
-storiesOf('TasksDashboard/TasksCardsGrid', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withCardsDecorator)
-  .add('RunningTasksCard', () => {
-    const selectTime = select(
-      'time',
-      TASKS_DASHBOARD_AVAILABLE_TIMES,
-      RunningTasksCard.defaultProps.time
-    );
+export default {
+  title: 'TasksDashboard/TasksCardsGrid/Cards/RunningTasksCard',
+  component: RunningTasksCard,
+  decorators: [withCardsDecorator],
+  parameters: {
+    centered: { disable: true },
+  },
+};
+
+export const Basic = () => {
+  const selectTime = select(
+    'time',
+    TASKS_DASHBOARD_AVAILABLE_TIMES,
+    RunningTasksCard.defaultProps.time
+  );
 
-    const selectMode = select(
-      'mode',
-      { ...TASKS_DASHBOARD_AVAILABLE_QUERY_MODES, NONE: 'none', TOTAL: null },
-      'none'
-    );
-    return (
-      <RunningTasksCard
-        data={{
-          last: number('data.last', 3),
-          older: number('data.older', 5),
-        }}
-        time={selectTime}
-        query={{
-          state: select(
-            'query.state',
-            {
-              ...TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
-              NONE: null,
-            },
-            TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.RUNNING
-          ),
-          mode: selectMode,
-          time: selectTime,
-        }}
-        updateQuery={action('updateQuery')}
-      />
-    );
-  });
+  const selectMode = select(
+    'mode',
+    { ...TASKS_DASHBOARD_AVAILABLE_QUERY_MODES, NONE: 'none', TOTAL: null },
+    'none'
+  );
+  return (
+    <RunningTasksCard
+      data={{
+        last: number('data.last', 3),
+        older: number('data.older', 5),
+      }}
+      time={selectTime}
+      query={{
+        state: select(
+          'query.state',
+          {
+            ...TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
+            NONE: null,
+          },
+          TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.RUNNING
+        ),
+        mode: selectMode,
+        time: selectTime,
+      }}
+      updateQuery={action('updateQuery')}
+    />
+  );
+};