From 5231f4364827ea09125c2b99c999f8fcab81abb3 Mon Sep 17 00:00:00 2001
From: ClaudiaHolhos <claudia@oceanprotocol.com>
Date: Thu, 16 Jun 2022 17:30:32 +0300
Subject: [PATCH] debug output stories, main merged

---
 .../@shared/DebugOutput/index.stories.tsx     | 27 +++++++++++++++++++
 .../index.tsx}                                | 10 ++++---
 2 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 src/components/@shared/DebugOutput/index.stories.tsx
 rename src/components/@shared/{DebugOutput.tsx => DebugOutput/index.tsx} (82%)

diff --git a/src/components/@shared/DebugOutput/index.stories.tsx b/src/components/@shared/DebugOutput/index.stories.tsx
new file mode 100644
index 000000000..887eef4a7
--- /dev/null
+++ b/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>
+}
diff --git a/src/components/@shared/DebugOutput.tsx b/src/components/@shared/DebugOutput/index.tsx
similarity index 82%
rename from src/components/@shared/DebugOutput.tsx
rename to src/components/@shared/DebugOutput/index.tsx
index 1b4d359a2..0e57793a7 100644
--- a/src/components/@shared/DebugOutput.tsx
+++ b/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
-}: {
-  title?: string
-  output: any
-}): ReactElement {
+}: DebugOutputProps): ReactElement {
   return (
     <div style={{ marginTop: 'var(--spacer)' }}>
       {title && <h5>{title}</h5>}