page stories

src/components/@shared/FormFields/Datatoken/index.stories.tsx

@@ -44,6 +44,5 @@ interface Props {
 
 export const Default: Props = Template.bind({})
 Default.args = {
-  name: 'PARCOUR-73',
+  name: 'PARCOUR-73'
-  symbol: 'PARCOUR-73'
 }

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

@@ -6,15 +6,17 @@ import useNetworkMetadata, {
 } from '@hooks/useNetworkMetadata'
 import { NetworkIcon } from './NetworkIcon'
 
+export interface NetworkNameProps {
+  networkId: number
+  minimal?: boolean
+  className?: string
+}
+
 export default function NetworkName({
   networkId,
   minimal,
   className
-}: {
+}: NetworkNameProps): ReactElement {
-  networkId: number
-  minimal?: boolean
-  className?: string
-}): ReactElement {
   const { networksList } = useNetworkMetadata()
   const networkData = getNetworkDataById(networksList, networkId)
   const networkName = getNetworkDisplayName(networkData, networkId)

src/components/@shared/Page/PageHeader/index.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import PageHeader, { PageHeaderProps } from '@shared/Page/PageHeader'
+
+export default {
+  title: 'Component/@shared/PageHeader',
+  component: PageHeader
+} as ComponentMeta<typeof PageHeader>
+
+const Template: ComponentStory<typeof PageHeader> = (args: PageHeaderProps) => (
+  <PageHeader {...args} />
+)
+
+interface Props {
+  args: PageHeaderProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  title: <a>Ocean Protocol Market</a>
+}
+
+export const Centered: Props = Template.bind({})
+Centered.args = {
+  title: <a>Ocean Protocol Market</a>,
+  center: true
+}
+
+export const WithDescription: Props = Template.bind({})
+WithDescription.args = {
+  title: <a>Ocean Protocol Market</a>,
+  center: true,
+  description:
+    'A marketplace to find, publish and trade data sets in the Ocean Network.'
+}

src/components/@shared/Page/PageHeader/index.tsx

@@ -1,19 +1,21 @@
 import React, { ReactElement } from 'react'
 import classNames from 'classnames/bind'
-import styles from './PageHeader.module.css'
+import styles from './index.module.css'
 import Markdown from '@shared/Markdown'
 
 const cx = classNames.bind(styles)
 
+export interface PageHeaderProps {
+  title: ReactElement
+  description?: string
+  center?: boolean
+}
+
 export default function PageHeader({
   title,
   description,
   center
-}: {
+}: PageHeaderProps): ReactElement {
-  title: ReactElement
-  description?: string
-  center?: boolean
-}): ReactElement {
   const styleClasses = cx({
     header: true,
     center

src/components/@shared/Page/Seo/index.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import Seo, { SeoProps } from '@shared/Page/Seo'
+
+export default {
+  title: 'Component/@shared/Seo',
+  component: Seo
+} as ComponentMeta<typeof Seo>
+
+const Template: ComponentStory<typeof Seo> = (args: SeoProps) => (
+  <Seo {...args} />
+)
+
+interface Props {
+  args: SeoProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  uri: 'https://www.market.oceanprotocol.com'
+}
+
+export const WithTitle: Props = Template.bind({})
+WithTitle.args = {
+  uri: 'https://www.market.oceanprotocol.com',
+  title: 'Ocean Market'
+}
+
+export const WithDescription: Props = Template.bind({})
+WithDescription.args = {
+  ...WithTitle.args,
+  description:
+    'A marketplace to find, publish and trade data sets in the Ocean Network.'
+}

src/components/@shared/Page/Seo/index.tsx

@@ -4,15 +4,17 @@ import Head from 'next/head'
 import { isBrowser } from '@utils/index'
 import { useMarketMetadata } from '@context/MarketMetadata'
 
+export interface SeoProps {
+  title?: string
+  description?: string
+  uri: string
+}
+
 export default function Seo({
   title,
   description,
   uri
-}: {
+}: SeoProps): ReactElement {
-  title?: string
-  description?: string
-  uri: string
-}): ReactElement {
   const { siteContent } = useMarketMetadata()
 
   // Remove trailing slash from all URLs

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

@@ -0,0 +1,26 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import Page, { PageProps } from '@shared/Page'
+
+export default {
+  title: 'Component/@shared/Page',
+  component: Page
+} as ComponentMeta<typeof Page>
+
+const Template: ComponentStory<typeof Page> = (args: PageProps) => (
+  <Page {...args} />
+)
+
+interface Props {
+  args: PageProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  uri: 'https://www.market.oceanprotocol.com',
+  children: (
+    <a>
+      A marketplace to find, publish and trade data sets in the Ocean Network.
+    </a>
+  )
+}