UPD Support Storybook v7

client/src/components/#Session/tests/#Session-story.js

@@ -1,31 +1,35 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
 import LoginSession from 'components/#Session/#Session';
-import { withKnobs, boolean } from '@storybook/addon-knobs/react';
 
 const createDateMinutesAgo = (m) => {
-  const d1 = new Date();
-  const d2 = new Date(d1);
-  d2.setMinutes(d1.getMinutes() - m);
-  return d2.toISOString().replace(/[TZ]/g, ' ').replace(/\.[0-9]+ $/, '');
+    const d1 = new Date();
+    const d2 = new Date(d1);
+    d2.setMinutes(d1.getMinutes() - m);
+    return d2
+        .toISOString()
+        .replace(/[TZ]/g, ' ')
+        .replace(/\.[0-9]+ $/, '');
 };
 
 const props = {
-  IPAddress: '127.0.0.1',
-  UserAgent: 'Chrome on Mac OS X 10.15.7',
-  Created: createDateMinutesAgo(120),
-  LastAccessed: createDateMinutesAgo(25),
-  logout: () => 1
+    IPAddress: '127.0.0.1',
+    UserAgent: 'Chrome on Mac OS X 10.15.7',
+    Created: createDateMinutesAgo(120),
+    LastAccessed: createDateMinutesAgo(25),
+    logout: () => 1,
 };
 
-storiesOf('SessionManager/#Session', module)
-  .addDecorator(withKnobs)
-  .add('Login session', () => (
-    <LoginSession
-      {...props}
-      IsCurrent={boolean('IsCurrent', false)}
-      submitting={boolean('Submitting', false)}
-      complete={boolean('Complete', false)}
-      failed={boolean('Failed', false)}
-    />
-  ));
+export default {
+    title: 'SessionManager/#Session',
+    component: LoginSession
+};
+
+export const _LoginSession = {
+    name: 'Login session',
+    args: {
+        ...props,
+        IsCurrent: false,
+        submitting: false,
+        complete: false,
+        failed: false,
+    }
+};

package.json

@@ -34,7 +34,6 @@
     "@babel/runtime": "^7.20.1",
     "@silverstripe/eslint-config": "^1.0.0",
     "@silverstripe/webpack-config": "^2.0.0",
-    "@storybook/addon-knobs": "^6.4.0",
     "babel-jest": "^29.3.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "enzyme": "^3.11.0",
@@ -66,6 +65,7 @@
     },
     "moduleDirectories": [
       "client/src",
+      "node_modules",
       "../admin/client/src",
       "../admin/node_modules",
       "../silverstripe/admin/client/src",