fix(#2755): make offcanvas example code readable (#2768)

Author: illiteratewriter

src/Offcanvas.js

@@ -241,7 +241,10 @@ class Offcanvas extends React.Component {
   }
 
   setFocus() {
-    if (this._dialog.current && typeof this._dialog.current.focus === 'function') {
+    if (
+      this._dialog.current &&
+      typeof this._dialog.current.focus === 'function'
+    ) {
       this._dialog.current.focus();
     }
   }

stories/Offcanvas.stories.js

@@ -13,5 +13,5 @@ export default {
   },
 };
 
-export { default as Offcanvas } from './examples/Offcanvas';
-export { default as Props } from './examples/OffcanvasProps';
+export { default as Offcanvas } from './examples/Offcanvas/Offcanvas';
+export { default as Props } from './examples/Offcanvas/OffcanvasProps';

stories/examples/Offcanvas/Offcanvas.js

@@ -0,0 +1,28 @@
+import Example from './OffcanvasExample';
+// eslint-disable-next-line import/extensions
+import OffcanvasExample from '!!raw-loader!./OffcanvasExample';
+
+Example.parameters = {
+  docs: {
+    source: {
+      code: OffcanvasExample,
+      language: 'jsx',
+      type: 'auto',
+    },
+  },
+};
+
+Example.args = {
+  backdrop: true,
+  fade: true,
+  scrollable: false,
+};
+
+Example.argTypes = {
+  direction: {
+    control: { type: 'select' },
+    options: ['top', 'start', 'end', 'bottom'],
+  },
+};
+
+export default Example;

stories/examples/Offcanvas.js stories/examples/Offcanvas/OffcanvasExample.js

@@ -25,17 +25,4 @@ function Example(args) {
   );
 }
 
-Example.args = {
-  backdrop: true,
-  fade: true,
-  scrollable: false,
-};
-
-Example.argTypes = {
-  direction: {
-    control: { type: 'select' },
-    options: ['top', 'start', 'end', 'bottom'],
-  },
-};
-
 export default Example;

stories/examples/OffcanvasProps.js stories/examples/Offcanvas/OffcanvasProps.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Offcanvas, OffcanvasBody, OffcanvasHeader } from 'reactstrap';
-import Props from './Props';
+import Props from '../Props';
 
 function Example() {
   return <Props components={[Offcanvas, OffcanvasBody, OffcanvasHeader]} />;