Fix some storybook errors

.storybook/preview.js

@@ -7,15 +7,23 @@ import ComposeProviders from '../src/components/ComposeProviders';
 import HTMLEngineProvider from '../src/components/HTMLEngineProvider';
 import OnyxProvider from '../src/components/OnyxProvider';
 import {LocaleContextProvider} from '../src/components/withLocalize';
+import {KeyboardStateProvider} from '../src/components/withKeyboardState';
+import {EnvironmentProvider} from '../src/components/withEnvironment';
+import {WindowDimensionsProvider} from '../src/components/withWindowDimensions';
 import ONYXKEYS from '../src/ONYXKEYS';
 
 Onyx.init({
     keys: ONYXKEYS,
+    initialKeyStates: {
+        [ONYXKEYS.NETWORK]: {isOffline: false},
+    },
 });
 
 const decorators = [
     (Story) => (
-        <ComposeProviders components={[OnyxProvider, LocaleContextProvider, HTMLEngineProvider, SafeAreaProvider, PortalProvider]}>
+        <ComposeProviders
+            components={[OnyxProvider, LocaleContextProvider, HTMLEngineProvider, SafeAreaProvider, PortalProvider, EnvironmentProvider, KeyboardStateProvider, WindowDimensionsProvider]}
+        >
             <Story />
         </ComposeProviders>
     ),

src/components/MagicCodeInput.js

@@ -51,7 +51,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    value: undefined,
+    value: '',
     name: '',
     autoFocus: true,
     errorText: '',

src/stories/Checkbox.stories.js

@@ -22,6 +22,7 @@ const Default = Template.bind({});
 Default.args = {
     onPress: () => {},
     isChecked: true,
+    accessibilityLabel: '',
 };
 
 export {Default};

src/stories/Composer.stories.js

@@ -8,6 +8,9 @@ import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import * as StyleUtils from '../styles/StyleUtils';
 import CONST from '../CONST';
+import withNavigationFallback from '../components/withNavigationFallback';
+
+const ComposerWithNavigation = withNavigationFallback(Composer);
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -16,7 +19,7 @@ import CONST from '../CONST';
  */
 const story = {
     title: 'Components/Composer',
-    component: Composer,
+    component: ComposerWithNavigation,
 };
 
 const parser = new ExpensiMark();
@@ -29,7 +32,7 @@ function Default(args) {
     return (
         <View>
             <View style={[styles.border, styles.p4]}>
-                <Composer
+                <ComposerWithNavigation
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...args}
                     multiline

src/stories/MagicCodeInput.stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import MagicCodeInput from '../components/MagicCodeInput';
 
 /**
@@ -12,8 +12,15 @@ const story = {
 };
 
 function Template(args) {
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    return <MagicCodeInput {...args} />;
+    const [value, setValue] = useState('');
+    return (
+        <MagicCodeInput
+            value={value}
+            onChangeText={setValue}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...args}
+        />
+    );
 }
 
 // Arguments can be passed to the component by binding