migrate from @dump247/storybook-state to useState hook

- as per its archived docs
- tried to make the diff as small as possible

Signed-off-by: Anton Gilgur <[email protected]>

package.json

@@ -44,7 +44,6 @@
     },
     "devDependencies": {
         "@babel/core": "^7.21.3",
-        "@dump247/storybook-state": "^1.6.1",
         "@storybook/addon-actions": "^6.5.14",
         "@storybook/addon-controls": "^6.5.14",
         "@storybook/addon-essentials": "^6.5.14",

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/page.tsx

@@ -1,4 +1,3 @@
-import { Store, withState } from '@dump247/storybook-state';
 import { storiesOf } from '@storybook/react';
 import createHistory from 'history/createBrowserHistory';
 import * as React from 'react';
@@ -55,31 +54,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 +88,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,4 +1,3 @@
-import { Store, withState } from '@dump247/storybook-state';
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
@@ -18,24 +17,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';
 
 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>
-        ))),
+        )},
     );