debug output stories, main merged

src/components/@shared/DebugOutput/index.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import DebugOutput, { DebugOutputProps } from '@shared/DebugOutput'
+
+export default {
+  title: 'Component/@shared/DebugOutput',
+  component: DebugOutput
+} as ComponentMeta<typeof DebugOutput>
+
+const Template: ComponentStory<typeof DebugOutput> = (
+  args: DebugOutputProps
+) => <DebugOutput {...args} />
+
+interface Props {
+  args: DebugOutputProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  output: <p>Your Debug Data </p>
+}
+
+export const WithTitle: Props = Template.bind({})
+WithTitle.args = {
+  title: 'Debug Data',
+  output: <p>Your Debug Data </p>
+}

src/components/@shared/DebugOutput/index.tsx

@@ -1,12 +1,14 @@
 import React, { ReactElement } from 'react'
 
+export interface DebugOutputProps {
+  title?: string
+  output: any
+}
+
 export default function DebugOutput({
   title,
   output
-}: {
+}: DebugOutputProps): ReactElement {
-  title?: string
-  output: any
-}): ReactElement {
   return (
     <div style={{ marginTop: 'var(--spacer)' }}>
       {title && <h5>{title}</h5>}