fix(docs): remove storybook errors (#2675)

reactstrap · Mar 2, 2023 · d0f188b · d0f188b
1 parent dac3587
commit d0f188b
Show file tree

Hide file tree

Showing 15 changed files with 27 additions and 20 deletions.
diff --git a/src/Modal.js b/src/Modal.js
@@ -373,8 +373,8 @@ class Modal extends React.Component {
     if (Modal.openCount < 1) {
       Modal.originalBodyOverflow = window.getComputedStyle(
         document.body,
-        ).overflow;
-    };
+      ).overflow;
+    }
     conditionallyUpdateScrollbar();
 
     if (Modal.openCount === 0) {

diff --git a/src/Navbar.js b/src/Navbar.js
@@ -19,7 +19,6 @@ const propTypes = {
   expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Make the navbar fixed at the top */
   fixed: PropTypes.string,
-  full: PropTypes.bool,
   /** Add `.navbar-light` class */
   light: PropTypes.bool,
   role: PropTypes.string,

diff --git a/stories/examples/Dropdown/DirectionKitchen.js b/stories/examples/Dropdown/DirectionKitchen.js
@@ -12,7 +12,11 @@ export default function Example(args) {
   return (
     <div className="d-flex p-5 justify-content-center">
       {directions.map((direction) => (
-        <UncontrolledDropdown direction={direction} className="me-2">
+        <UncontrolledDropdown
+          direction={direction}
+          key={direction}
+          className="me-2"
+        >
           <DropdownToggle caret color="primary">
             {`Drop${direction}`}
           </DropdownToggle>

diff --git a/stories/examples/Form/InputType.js b/stories/examples/Form/InputType.js
@@ -1,12 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Form, FormGroup, Label, Input, FormText } from 'reactstrap';
 
 function Example(props) {
+  const [value, setValue] = useState('Some plain text/ static value');
   return (
     <Form>
       <FormGroup>
         <Label for="exampleEmail">Plain Text (Static)</Label>
-        <Input plaintext value="Some plain text/ static value" />
+        <Input
+          plaintext
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
       </FormGroup>
       <FormGroup>
         <Label for="exampleEmail">Email</Label>

diff --git a/stories/examples/Form/SwitchesExample.js b/stories/examples/Form/SwitchesExample.js
@@ -14,7 +14,7 @@ function Example(props) {
         <Input
           type="switch"
           checked={state}
-          onClick={() => {
+          onChange={() => {
             setState(!state);
           }}
         />

diff --git a/stories/examples/Modal/BackdropExample.js b/stories/examples/Modal/BackdropExample.js
@@ -34,7 +34,7 @@ function Example(props) {
 
   return (
     <div>
-      <Form inline onSubmit={(e) => e.preventDefault()}>
+      <Form onSubmit={(e) => e.preventDefault()}>
         <FormGroup>
           <Label for="backdrop">Backdrop value</Label>{' '}
           <Input

diff --git a/stories/examples/Modal/DestructuringExample.js b/stories/examples/Modal/DestructuringExample.js
@@ -23,7 +23,7 @@ function ModalExample(props) {
 
   return (
     <div>
-      <Form inline onSubmit={(e) => e.preventDefault()}>
+      <Form onSubmit={(e) => e.preventDefault()}>
         <FormGroup>
           <Label for="unmountOnClose">UnmountOnClose value</Label>{' '}
           <Input

diff --git a/stories/examples/Modal/FocusAfterCloseExample.js b/stories/examples/Modal/FocusAfterCloseExample.js
@@ -21,7 +21,7 @@ function ModalFocusAfterClose(props) {
 
   return (
     <div>
-      <Form inline onSubmit={(e) => e.preventDefault()}>
+      <Form onSubmit={(e) => e.preventDefault()}>
         <FormGroup>
           <Label for="focusAfterClose">Focus After Close</Label>
           <Input

diff --git a/stories/examples/Navbar/Navbar.js b/stories/examples/Navbar/Navbar.js
@@ -17,7 +17,6 @@ Example.args = {
   color: 'light',
   light: true,
   dark: false,
-  full: false,
   expand: 'md',
   container: 'fluid',
 };

diff --git a/stories/examples/Navbar/NavbarExample.js b/stories/examples/Navbar/NavbarExample.js
@@ -38,7 +38,7 @@ function Example(args) {
               <DropdownToggle nav caret>
                 Options
               </DropdownToggle>
-              <DropdownMenu right>
+              <DropdownMenu end>
                 <DropdownItem>Option 1</DropdownItem>
                 <DropdownItem>Option 2</DropdownItem>
                 <DropdownItem divider />

diff --git a/stories/examples/Props.js b/stories/examples/Props.js
@@ -16,19 +16,19 @@ function Props({ component, components = [] }) {
     <div>
       {component ? <Info component={component} /> : undefined}
       {components.map((c) => (
-        <Info component={c} />
+        <Info key={c.name} component={c} />
       ))}
     </div>
   );
 }
 
 Info.propTypes = {
-  component: PropTypes.node,
+  component: PropTypes.elementType,
 };
 
 Props.propTypes = {
-  component: PropTypes.node,
-  components: PropTypes.arrayOf(PropTypes.node),
+  component: PropTypes.elementType,
+  components: PropTypes.arrayOf(PropTypes.elementType),
 };
 
 export default Props;
diff --git a/stories/examples/Table/Hover.js b/stories/examples/Table/Hover.js
@@ -42,7 +42,7 @@ Example.parameters = {
   docs: {
     description: {
       story:
-        'Add `hover` prop to enable a hover state on table rows within a <tbody>.',
+        'Add `hover` prop to enable a hover state on table rows within a `<tbody>`.',
     },
   },
 };
diff --git a/stories/examples/Table/Striped.js b/stories/examples/Table/Striped.js
@@ -42,7 +42,7 @@ Example.parameters = {
   docs: {
     description: {
       story:
-        'Use `striped` prop to add zebra-striping to any table row within the <tbody>.',
+        'Use `striped` prop to add zebra-striping to any table row within the `<tbody>`.',
     },
   },
 };
diff --git a/stories/examples/Table/Variants.js b/stories/examples/Table/Variants.js
@@ -14,7 +14,7 @@ function Example(args) {
       </thead>
       <tbody>
         {colors.map((color) => (
-          <tr className={`table-${color}`}>
+          <tr className={`table-${color}`} key={color}>
             <td>{color}</td>
             <td>Cell</td>
             <td>Cell</td>

diff --git a/stories/examples/Tooltip/DirectionsExample.js b/stories/examples/Tooltip/DirectionsExample.js
@@ -52,7 +52,7 @@ function TooltipExampleMulti(props) {
         },
       ].map((tooltip, i) => {
         // eslint-disable-next-line react/no-array-index-key
-        return <TooltipItem key={i} item={tooltip} id={i} />;
+        return <TooltipItem key={i} item={tooltip} id={`Tooltip-${i}`} />;
       })}
     </>
   );