diff --git a/package.json b/package.json index e67089ce311..5bb4a6b30be 100644 --- a/package.json +++ b/package.json @@ -143,7 +143,6 @@ "@formatjs/intl-relativetimeformat": "^4.5.9", "@formatjs/intl-unified-numberformat": "^3.2.0", "@hapi/address": "2.1.1", - "@sambego/storybook-state": "^2.0.1", "@storybook/addon-actions": "^7.5.3", "@storybook/addon-docs": "^8.0.8", "@storybook/addon-essentials": "^7.5.3", diff --git a/src/components/checkbox/Checkbox.stories.tsx b/src/components/checkbox/Checkbox.stories.tsx index 58f91b4eef0..7e7d418d1da 100644 --- a/src/components/checkbox/Checkbox.stories.tsx +++ b/src/components/checkbox/Checkbox.stories.tsx @@ -1,7 +1,4 @@ import * as React from 'react'; -import { boolean } from '@storybook/addon-knobs'; - -import { State, Store } from '@sambego/storybook-state'; import Checkbox from './Checkbox'; import notes from './Checkbox.stories.md'; @@ -16,41 +13,31 @@ export const basic = () => ( ); export const controlled = () => { - const componentStore = new Store({ isChecked: false }); - const handleChange = () => componentStore.set({ isChecked: !componentStore.get('isChecked') }); + // eslint-disable-next-line react-hooks/rules-of-hooks + const [isChecked, setIsChecked] = React.useState(false); + const handleChange = () => setIsChecked(!isChecked); return ( - - {state => ( -
- - -
- )} -
+
+ + +
); }; -export const disabled = () => ( - -); +export const disabled = () => ; export const withTooltip = () => ( diff --git a/src/components/date-picker/DatePicker.stories.tsx b/src/components/date-picker/DatePicker.stories.tsx index 0df917fc495..83b2a4e8c05 100644 --- a/src/components/date-picker/DatePicker.stories.tsx +++ b/src/components/date-picker/DatePicker.stories.tsx @@ -1,6 +1,5 @@ +/* eslint-disable react-hooks/rules-of-hooks */ import * as React from 'react'; -import { IntlProvider } from 'react-intl'; -import { State, Store } from '@sambego/storybook-state'; import { TooltipPosition } from '../tooltip'; import DatePicker from './DatePicker'; @@ -12,34 +11,26 @@ export const basic = () => { const MIN_TIME = new Date(0); const TODAY = new Date('July 18, 2018'); const yearRange = [MIN_TIME.getFullYear(), TODAY.getFullYear()]; - const componentStore = new Store({ - date: new Date('July 9, 2018'), - fromDate: null, - toDate: null, - }); + + const [date, setDate] = React.useState(new Date('July 9, 2018')); + return ( - - {state => ( - - { - componentStore.set({ date }); - }} - placeholder="Date" - value={state.date} - yearRange={yearRange} - /> - - )} - + { + setDate(newDate); + }} + placeholder="Date" + value={date} + yearRange={yearRange} + /> ); }; @@ -47,258 +38,204 @@ export const basicWithKeyboardInput = () => { const MIN_TIME = new Date(0); const TODAY = new Date('July 18, 2018'); const yearRange = [MIN_TIME.getFullYear(), TODAY.getFullYear()]; - const componentStore = new Store({ - date: new Date('July 9, 2018'), - fromDate: null, - toDate: null, - }); + + const [date, setDate] = React.useState(new Date('July 9, 2018')); + return ( - - {state => ( - - { - componentStore.set({ date }); - }} - placeholder="Date" - value={state.date} - yearRange={yearRange} - /> - - )} - + { + setDate(newDate); + }} + placeholder="Date" + value={date} + yearRange={yearRange} + /> ); }; export const withDescription = () => ( - - - + ); export const manuallyEditable = () => ( - - - + ); export const manuallyEditableAndAccessible = () => ( - - - + ); export const withLimitedDateRange = () => { const maxDate = new Date('February 25, 2021'); const sixDays = 1000 * 60 * 60 * 24 * 6; const minDate = new Date(maxDate.valueOf() - sixDays); - const componentStore = new Store({ - date: maxDate, - fromDate: null, - toDate: null, - }); + return ( - - {state => ( - - - - )} - + ); }; export const alwaysVisibleWithCustomInputField = () => { - const componentStore = new Store({ - date: new Date('February 26, 2021'), - fromDate: null, - toDate: null, - }); + const [date, setDate] = React.useState(new Date('February 26, 2021')); + + const customInput = ( + + ); return ( - - {state => { - const customInput = ( +
+ { + setDate(newDate); + }} + placeholder="Date" + value={date} + /> +
+

+ In this example, the DatePicker is bound to a custom hidden input field. The right panel retains the + same state as the DatePicker, but is not contained within the DatePicker component. +

+
+ - ); - - return ( - -
- { - componentStore.set({ date }); - }} - placeholder="Date" - value={state.date} - /> -
-

- In this example, the DatePicker is bound to a custom hidden input field. The right - panel retains the same state as the DatePicker, but is not contained within the - DatePicker component. -

-
- - -
-
-
-
- ); - }} - +
+
+
); }; export const disabledWithErrorMessage = () => ( - - - + ); export const customErrorTooltipPosition = () => ( - - - + ); export const withRange = () => { const MAX_TIME = new Date('3000-01-01T00:00:00.000Z'); const MIN_TIME = new Date(0); const TODAY = new Date(); - const componentStore: Store<{ date: Date; fromDate: Date | null; toDate: Date | null }> = new Store({ - date: new Date(), - fromDate: null, - toDate: null, - }); + + const [fromDate, setFromDate] = React.useState(null); + const [toDate, setToDate] = React.useState(null); + return ( - - {state => ( - -
- { - componentStore.set({ fromDate: date }); - }} - placeholder="Choose a Date" - value={state.fromDate} - /> - { - componentStore.set({ toDate: date }); - }} - placeholder="Choose a Date" - value={state.toDate} - /> -
-
- )} -
+
+ { + setFromDate(newDate); + }} + placeholder="Choose a Date" + value={fromDate} + /> + { + setToDate(newDate); + }} + placeholder="Choose a Date" + value={toDate} + /> +
); }; @@ -306,57 +243,50 @@ export const withRangeAndKeyboardInput = () => { const MAX_TIME = new Date('3000-01-01T00:00:00.000Z'); const MIN_TIME = new Date(0); const TODAY = new Date(); - const componentStore: Store<{ date: Date; fromDate: Date | null; toDate: Date | null }> = new Store({ - date: new Date(), - fromDate: null, - toDate: null, - }); + + const [fromDate, setFromDate] = React.useState(null); + const [toDate, setToDate] = React.useState(null); + return ( - - {state => ( - -
- { - componentStore.set({ fromDate: date }); - }} - placeholder="Choose a Date" - value={state.fromDate} - /> - { - componentStore.set({ toDate: date }); - }} - placeholder="Choose a Date" - value={state.toDate} - /> -
-
- )} -
+
+ { + setFromDate(date); + }} + placeholder="Choose a Date" + value={fromDate} + /> + { + setToDate(date); + }} + placeholder="Choose a Date" + value={toDate} + /> +
); }; diff --git a/src/components/draft-js-editor/DraftJSEditor.stories.js b/src/components/draft-js-editor/DraftJSEditor.stories.js index cfe8e5de01c..d21c23c21c3 100644 --- a/src/components/draft-js-editor/DraftJSEditor.stories.js +++ b/src/components/draft-js-editor/DraftJSEditor.stories.js @@ -1,8 +1,7 @@ // @flow +/* eslint-disable react-hooks/rules-of-hooks */ import * as React from 'react'; import { ContentState, EditorState } from 'draft-js'; -import { State, Store } from '@sambego/storybook-state'; -import { boolean } from '@storybook/addon-knobs'; import DraftJSEditor from './DraftJSEditor'; import notes from './DraftJSEditor.stories.md'; @@ -13,31 +12,24 @@ export const basic = () => { ContentState.createFromText('Example'), DraftMentionDecorator, ); - const componentStore = new Store({ - exampleExternalEditorState: initialEditorState, - }); - const setEditorState = newEditorState => { - componentStore.set({ exampleExternalEditorState: newEditorState }); - }; + const [exampleExternalEditorState, setExampleExternalEditorState] = React.useState(initialEditorState); + + const setEditorState = newEditorState => setExampleExternalEditorState(newEditorState); return ( - - {state => ( - null} - onChange={setEditorState} - onFocus={() => null} - /> - )} - + null} + onChange={setEditorState} + onFocus={() => null} + /> ); }; diff --git a/src/components/form-elements/form/Form.stories.js b/src/components/form-elements/form/Form.stories.js index 7138c3f54e2..d0b243b95ca 100644 --- a/src/components/form-elements/form/Form.stories.js +++ b/src/components/form-elements/form/Form.stories.js @@ -1,8 +1,6 @@ // @flow +/* eslint-disable react-hooks/rules-of-hooks */ import * as React from 'react'; -import { IntlProvider } from 'react-intl'; -import { boolean } from '@storybook/addon-knobs'; -import { State, Store } from '@sambego/storybook-state'; import Button from '../../button/Button'; import Select from '../../select/Select'; @@ -14,12 +12,10 @@ import Form from './Form'; import notes from './Form.stories.md'; export const basic = () => { - const componentStore = new Store({ - formData: { - showtextareatoggle: '', - }, - formValidityState: {}, + const [formData, setFormData] = React.useState({ + showtextareatoggle: '', }); + const [formValidityState, setFormValidityState] = React.useState({}); const customValidationFunc = value => { if (value !== 'box') { @@ -32,83 +28,71 @@ export const basic = () => { }; return ( - - {state => ( - -
{ - componentStore.set({ formValidityState: {}, formData }); - }} - onValidSubmit={() => { - // On a server validation error, set formValidityState to - // push error states to child inputs - componentStore.set({ - formValidityState: { - username: { - code: 'usernametaken', - message: 'Username already taken.', - }, - }, - }); - }} - /* eslint-disable-next-line no-console */ - onInvalidSubmit={formValidityState => console.log(formValidityState)} - formValidityState={state.formValidityState} - > -
- -
-
- -
-
- -
+ { + setFormValidityState({}); + setFormData(_formData); + }} + onValidSubmit={() => { + // On a server validation error, set formValidityState to + // push error states to child inputs - + setFormValidityState({ + username: { + code: 'usernametaken', + message: 'Username already taken.', + }, + }); + }} + /* eslint-disable-next-line no-console */ + onInvalidSubmit={_formValidityState => console.log(_formValidityState)} + formValidityState={formValidityState} + > +
+ +
+
+ +
+
+ +
-
-
- null} - /> -
- {state.formData.showtextareatoggle === 'on' ? ( -