fix(deps-dev): downgrade all Storybook breakage from dependabot et al

package.json

@@ -30,7 +30,7 @@
         "react-form": "^2.16.0",
         "react-helmet": "^6.1.0",
         "react-router-dom": "^4.2.2",
-        "react-toastify": "9.0.8",
+        "react-toastify": "9.0.3",
         "rxjs": "^7.8.1",
         "typescript": "^4.9.5",
         "uuid": "^9.0.0",
@@ -44,13 +44,12 @@
     },
     "devDependencies": {
         "@babel/core": "^7.21.3",
-        "@dump247/storybook-state": "^1.6.1",
-        "@storybook/addon-actions": "^7.4.0",
-        "@storybook/addon-controls": "^7.6.14",
-        "@storybook/addon-essentials": "^7.6.14",
-        "@storybook/addon-links": "^7.4.0",
-        "@storybook/addons": "^7.0.20",
-        "@storybook/react": "^6.2.9",
+        "@storybook/addon-actions": "6.5.0-beta.1",
+        "@storybook/addon-controls": "6.5.0-beta.1",
+        "@storybook/addon-essentials": "6.5.0-beta.1",
+        "@storybook/addon-links": "6.5.0-beta.1",
+        "@storybook/addons": "6.5.0-beta.1",
+        "@storybook/react": "6.5.0-beta.1",
         "@testing-library/react": "^12.1.5",
         "@testing-library/user-event": "^14.4.3",
         "@types/classnames": "^2.3.1",
@@ -67,9 +66,6 @@
         "@types/react-form": "^2.16.1",
         "@types/react-helmet": "^6.1.6",
         "@types/react-router-dom": "^4.2.2",
-        "@types/storybook__addon-actions": "^5.2.1",
-        "@types/storybook__addon-links": "^3.3.0",
-        "@types/storybook__react": "^3.0.7",
         "@typescript-eslint/eslint-plugin": "^5.36.1",
         "@typescript-eslint/parser": "^5.36.1",
         "@types/uuid": "^9.0.3",
@@ -89,13 +85,13 @@
         "react-dom": "^16.9.3",
         "sass": "^1.55.0",
         "sass-loader": "^v10.1.0",
-        "storybook": "^6.5.14",
+        "storybook": "6.5.0-beta.1",
         "style-loader": "^2.0.0",
         "ts-jest": "^26.5.6",
-        "ts-loader": "^9.4.4",
+        "ts-loader": "^8.3.0",
         "ts-node": "^10.9.1",
         "webfonts-generator": "^0.4.0",
-        "webpack": "^5.76.2"
+        "webpack": "^4.46.0"
     },
     "resolutions": {
         "@types/react": "^16.8.5",

stories/data-loader.tsx

@@ -1,4 +1,3 @@
-import { Store, withState } from '@dump247/storybook-state';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 
@@ -11,12 +10,13 @@ function loadData(input: string): Promise<string> {
 }
 
 storiesOf('Data Loader', module)
-    .add('loading data asynchronously', withState({ input: 'world' })(({store}: { store: Store<any> }) => (
-        <App>
+    .add('loading data asynchronously', () => {
+        const [input, setInput] = React.useState('world');
+        return <App>
             {() => (
                 <React.Fragment>
-                    <input value={store.state.input} onChange={(e) => store.set({ input: e.target.value })}/>
-                    <DataLoader input={store.state.input} load={(input) => loadData(input)}>
+                    <input value={input} onChange={(e) => setInput(e.target.value)}/>
+                    <DataLoader input={input} load={loadData}>
                         {(data) => (
                             <div>
                                 {data}
@@ -26,4 +26,4 @@ storiesOf('Data Loader', module)
                 </React.Fragment>
             )}
         </App>
-    )));
+    });

stories/dropdown.tsx

@@ -1,7 +1,8 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 
-import { DropDown, DropDownMenu } from '../src/components';
+import { DropDown } from '../src/components/dropdown/dropdown';
+import { DropDownMenu } from '../src/components/dropdown-menu';
 
 storiesOf('Dropdown', module)
     .add('default', () => <DropDown anchor={() => <a>Click me</a>}><p>Dropdown content here</p></DropDown>)

stories/forms.tsx

@@ -1,7 +1,8 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { Form, Text } from 'react-form';
-import { FormField, FormSelect } from '../src/components';
+
+import { FormField, FormSelect } from '../src/components/form-field/form-field';
 
 storiesOf('Forms', module)
     .add('default', () => (

stories/logs-viewer.tsx

@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { Observable } from 'rxjs';
 
-import { LogsViewer } from '../src/components';
+import { LogsViewer } from '../src/components/logs-viewer/logs-viewer';
 
 storiesOf('LogsViewer', module).add('default', () => (
   <div>

stories/notifications.tsx

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 
-import { NotificationType} from '../src/components';
+import { NotificationType } from '../src/components/notifications/notifications';
 
 import { App } from './utils';
 

stories/page.tsx

@@ -1,12 +1,12 @@
-import { Store, withState } from '@dump247/storybook-state';
 import { storiesOf } from '@storybook/react';
 import createHistory from 'history/createBrowserHistory';
 import * as React from 'react';
 import { Route, Router } from 'react-router';
 import { timer } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { Layout, Page } from '../src/components';
+import { Layout } from '../src/components/layout/layout';
+import { Page } from '../src/components/page/page';
 
 const navItems = [{ path: location.pathname, title: 'Sample', iconClassName: 'argo-icon-docs' }];
 const breadcrumbs = [{
@@ -55,31 +55,30 @@ function ensureSelected(vals: string[], selected: string[]): string[] {
 }
 
 storiesOf('Page', module)
-    .add('default',  withState({ selectedFilter: [] })(({store}: { store: Store<any> }) => (
-        <Router history={history}>
+    .add('default', () => {
+        const [selectedFilter, setSelectedFilter] = React.useState<string[]>([]);
+        return <Router history={history}>
             <Route path={location.pathname}>
                 <Layout navItems={navItems}>
                     <Page title='Hello world!' toolbar={{ breadcrumbs, actionMenu, filter: {
                         items: [
                             { content: (changeSelection) => (
                                 <React.Fragment>
-                                    Filter type one: <a onClick={() => changeSelection(ensureSelected(['1', '2'], store.state.selectedFilter))}>all</a>
+                                    Filter type one: <a onClick={() => changeSelection(ensureSelected(['1', '2'], selectedFilter))}>all</a>
                                 </React.Fragment>
                             )},
                             {label: 'filter 1', value: '1' },
                             {label: 'filter 2', value: '2' },
                             { content: (changeSelection) => (
                                 <React.Fragment>
-                                    Filter type two: <a onClick={() => changeSelection(ensureSelected(['3', '4'], store.state.selectedFilter))}>all</a>
+                                    Filter type two: <a onClick={() => changeSelection(ensureSelected(['3', '4'], selectedFilter))}>all</a>
                                 </React.Fragment>
                             )},
                             {label: 'filter 3', value: '3' },
                             {label: 'filter 4', value: '4' },
                         ],
-                        selectedValues: store.state.selectedFilter,
-                        selectionChanged: (vals) => {
-                            store.set({ selectedFilter: vals });
-                        },
+                        selectedValues: selectedFilter,
+                        selectionChanged: setSelectedFilter,
                     }}}>
                         <div style={{padding: '1em'}}>
                             <div className='white-box'>
@@ -90,7 +89,7 @@ storiesOf('Page', module)
                 </Layout>
             </Route>
         </Router>
-    ))).add('dynamic toolbar', () => (
+    }).add('dynamic toolbar', () => (
         <Router history={history}>
             <Route path={location.pathname}>
                 <Layout navItems={navItems}>

stories/popup.tsx

@@ -1,11 +1,11 @@
-import { Store, withState } from '@dump247/storybook-state';
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { Checkbox as ReactCheckbox} from 'react-form';
 import { Text } from 'react-form';
 
-import { Checkbox, FormField } from '../src/components';
+import { Checkbox } from '../src/components/checkbox';
+import { FormField } from '../src/components/form-field/form-field';
 import { App } from './utils';
 
 storiesOf('Popup', module)
@@ -18,24 +18,26 @@ storiesOf('Popup', module)
                 }}>Click me</button>
             )}
         </App>
-    )).add('confirmation with custom form inside',  withState({ checked: false })(({store}: { store: Store<any> }) => (
+    )).add('confirmation with custom form inside',  () => {
+        const [checked, setChecked] = React.useState(false);
+        return (
             <App>
                 {(apis) => (
                     <div>
                     <button className='argo-button argo-button--base' onClick={async () => {
                         const confirmed = await apis.popup.confirm('Do it!', () => (
                             <div>
-                                Click checkbox and confirm <Checkbox checked={store.state.checked} onChange={(val) => store.set({ checked: val })} />
+                                Click checkbox and confirm <Checkbox checked={checked} onChange={setChecked} />
                             </div>
                         ));
                         action('Confirmed')(confirmed);
                     }}>Click me</button>
-                    <p>Checked?: {JSON.stringify(store.state.checked)}</p>
+                    <p>Checked?: {JSON.stringify(checked)}</p>
                     </div>
                 )}
             </App>
-        ),
-    )).add('prompt', () => (
+        )
+    }).add('prompt', () => (
         <App>
             {(apis) => (
                 <button className='argo-button argo-button--base' onClick={async () => {

stories/select.tsx

@@ -1,35 +1,36 @@
-import { Store, withState } from '@dump247/storybook-state';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 
-import { Select } from '../src/components';
+import { Select } from '../src/components/select/select';
 
 storiesOf('Select', module)
-    .add('default', withState({ selected: 'option1' })(({store}: { store: Store<any> }) => (
-        () => (
+    .add('default', () => {
+        const [selected, setSelected] = React.useState('option1');
+        return (
             <div>
                 <h4>
-                    Selected option value: {store.state.selected}
-                    <button className='argo-button argo-button--base' onClick={() => store.set({ selected: 'option2' })} >Select option 2</button>
+                    Selected option value: {selected}
+                    <button className='argo-button argo-button--base' onClick={() => setSelected('option2')} >Select option 2</button>
                 </h4>
                 <Select
-                    value={store.state.selected}
+                    value={selected}
                     placeholder='Select something'
                     options={['option1', { value: 'option2', title: 'Option 2' }]}
-                    onChange={(option) => store.set({ selected: option.value })}
+                    onChange={(option) => setSelected(option.value)}
                     />
             </div>
-        ))),
-    ).add('multi-select', withState({ selected: 'option1' })(({store}: { store: Store<any> }) => (
-        () => (
+        )},
+    ).add('multi-select', () => {
+        const [selected, setSelected] = React.useState(['option1']);
+        return (
             <div>
                 <Select
-                    value={store.state.selected}
+                    value={selected}
                     multiSelect={true}
                     placeholder='Select something'
                     options={['option1', { value: 'option2', title: 'Option 2' }]}
-                    onMultiChange={(options) => store.set({ selected: options.map((item) => item.value) })}
+                    onMultiChange={(options) => setSelected(options.map((item) => item.value))}
                     />
             </div>
-        ))),
+        )},
     );

stories/tabs.tsx

@@ -1,6 +1,7 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { Tabs } from '../src/components';
+
+import { Tabs } from '../src/components/tabs/tabs';
 
 storiesOf('Tabs', module)
     .add('basic tabs', () => (

stories/tsconfig.json

@@ -3,11 +3,13 @@
         "sourceMap": true,
         "noImplicitAny": true,
         "module": "commonjs",
-        "target": "es5",
+        "target": "es6",
         "jsx": "react",
+        "esModuleInterop": true,
         "experimentalDecorators": true,
         "noUnusedLocals": true,
         "declaration": false,
+        "skipLibCheck": true,
         "lib": [
             "es2017",
             "dom"

stories/utils.tsx

@@ -1,7 +1,10 @@
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
-import { Notifications, NotificationsApi, NotificationsManager, Popup, PopupApi, PopupManager, PopupProps} from '../src/components';
+import { Notifications } from '../src/components/notifications/notifications';
+import { NotificationsApi, NotificationsManager } from '../src/components/notifications/notification-manager';
+import { Popup, PopupProps } from '../src/components/popup/popup';
+import { PopupApi, PopupManager } from '../src/components/popup/popup-manager';
 
 export class App extends React.Component<{ children: (apis: {
     notifications: NotificationsApi,