Asset and Box selection, Datatoken and Price stories

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

@@ -0,0 +1,52 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import AssetSelection, {
+  AssetSelectionProps
+} from '@shared/FormFields/AssetSelection'
+
+export default {
+  title: 'Component/@shared/FormFields/AssetSelection',
+  component: AssetSelection
+} as ComponentMeta<typeof AssetSelection>
+
+const Template: ComponentStory<typeof AssetSelection> = (
+  args: AssetSelectionProps
+) => <AssetSelection {...args} />
+
+interface Props {
+  args: AssetSelectionProps
+}
+
+const assetsList = [
+  {
+    did: 'did:op:07baafad66d21e61789d2d71ee1684c2d7235f8efefc59bfabf4fd984bf5c09d',
+    name: 'Pool test',
+    price: '22.004619932610114622',
+    checked: true,
+    symbol: 'OCEAN-NFT'
+  },
+  {
+    did: 'did:op:3f0f273e030e38fa24d5c725bb73fc799cc424847e05bc064ff63813d30fae36',
+    name: 'Dynamic price test',
+    price: '11.103104637669568064',
+    checked: true,
+    symbol: 'PUCPOR-86'
+  }
+]
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  assets: assetsList
+}
+
+export const Multiple: Props = Template.bind({})
+Multiple.args = {
+  assets: assetsList,
+  multiple: true
+}
+
+export const Disabled: Props = Template.bind({})
+Disabled.args = {
+  assets: assetsList,
+  disabled: true
+}

src/components/@shared/FormFields/AssetSelection/index.tsx

@@ -18,6 +18,12 @@ export interface AssetSelectionAsset {
   symbol: string
 }
 
+export interface AssetSelectionProps {
+  assets: AssetSelectionAsset[]
+  multiple?: boolean
+  disabled?: boolean
+}
+
 function Empty() {
   return <div className={styles.empty}>No assets found.</div>
 }
@@ -27,11 +33,7 @@ export default function AssetSelection({
   multiple,
   disabled,
   ...props
-}: {
+}: AssetSelectionProps): JSX.Element {
-  assets: AssetSelectionAsset[]
-  multiple?: boolean
-  disabled?: boolean
-}): JSX.Element {
   const [searchValue, setSearchValue] = useState('')
 
   const styleClassesInput = cx({

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

@@ -0,0 +1,51 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import BoxSelection, {
+  BoxSelectionProps
+} from '@shared/FormFields/BoxSelection'
+
+export default {
+  title: 'Component/@shared/FormFields/BoxSelection',
+  component: BoxSelection
+} as ComponentMeta<typeof BoxSelection>
+
+const Template: ComponentStory<typeof BoxSelection> = (
+  args: BoxSelectionProps
+) => <BoxSelection {...args} />
+
+interface Props {
+  args: BoxSelectionProps
+}
+
+const optionsList = [
+  {
+    name: 'option 1',
+    value: 'option 1',
+    checked: true,
+    title: 'option 1'
+  },
+  {
+    name: 'option 2',
+    value: 'option 2',
+    checked: false,
+    title: 'option 2'
+  },
+  {
+    name: 'option 3',
+    value: 'option 3',
+    checked: true,
+    title: 'option 3'
+  }
+]
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  name: 'Box selection',
+  options: optionsList
+}
+
+export const Disabled: Props = Template.bind({})
+Disabled.args = {
+  ...Default.args,
+  disabled: true
+}

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import Datatoken from '@shared/FormFields/Datatoken'
+import { InputProps } from '@shared/FormInput'
+
+export default {
+  title: 'Component/@shared/FormFields/Datatoken',
+  component: Datatoken
+} as ComponentMeta<typeof Datatoken>
+
+const Template: ComponentStory<typeof Datatoken> = (args: InputProps) => (
+  <Datatoken {...args} />
+)
+
+interface Props {
+  args: InputProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  name: 'PARCOUR-73'
+}

src/components/@shared/Price/Conversion/index.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import Conversion, { ConversionProps } from '@shared/Price/Conversion'
+import { usePrices } from '@context/Prices'
+import { useUserPreferences } from '@context/UserPreferences'
+
+export default {
+  title: 'Component/@shared/Price/Conversion',
+  component: Conversion
+} as ComponentMeta<typeof Conversion>
+
+const Template: ComponentStory<typeof Conversion> = (args: ConversionProps) => {
+  const { prices } = usePrices()
+  const { currency, locale } = useUserPreferences()
+
+  console.log('PRICES: ', prices)
+  if (!prices || !currency || !locale) return
+
+  return <Conversion {...args} />
+}
+
+interface Props {
+  args: ConversionProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  price: '11.12333'
+}
+
+export const HideApproximateSymbol: Props = Template.bind({})
+HideApproximateSymbol.args = {
+  price: '11.12333',
+  hideApproximateSymbol: true
+}

src/components/@shared/Price/Conversion/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, ReactElement } from 'react'
-import styles from './Conversion.module.css'
+import styles from './index.module.css'
 import classNames from 'classnames/bind'
 import { formatCurrency, isCrypto } from '@coingecko/cryptoformat'
 import { useUserPreferences } from '@context/UserPreferences'
@@ -7,15 +7,17 @@ import { usePrices } from '@context/Prices'
 
 const cx = classNames.bind(styles)
 
+export interface ConversionProps {
+  price: string // expects price in OCEAN, not wei
+  className?: string
+  hideApproximateSymbol?: boolean
+}
+
 export default function Conversion({
   price,
   className,
   hideApproximateSymbol
-}: {
+}: ConversionProps): ReactElement {
-  price: string // expects price in OCEAN, not wei
-  className?: string
-  hideApproximateSymbol?: boolean
-}): ReactElement {
   const { prices } = usePrices()
   const { currency, locale } = useUserPreferences()
 

src/components/@shared/Price/PriceUnit/index.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import PriceUnit, { PriceUnitProps } from '@shared/Price/PriceUnit'
+import { useUserPreferences } from '@context/UserPreferences'
+
+export default {
+  title: 'Component/@shared/Price/PriceUnit',
+  component: PriceUnit
+} as ComponentMeta<typeof PriceUnit>
+
+const Template: ComponentStory<typeof PriceUnit> = (args: PriceUnitProps) => {
+  const { locale } = useUserPreferences()
+
+  if (!locale) return
+  return <PriceUnit {...args} />
+}
+
+interface Props {
+  args: PriceUnitProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  price: '11.12333'
+}

src/components/@shared/Price/PriceUnit/index.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import { formatCurrency } from '@coingecko/cryptoformat'
-import Conversion from './Conversion'
+import Conversion from '../Conversion'
-import styles from './PriceUnit.module.css'
+import styles from './index.module.css'
 import { useUserPreferences } from '@context/UserPreferences'
 import Badge from '@shared/atoms/Badge'
 
@@ -14,6 +14,15 @@ export function formatPrice(price: string, locale: string): string {
   })
 }
 
+export interface PriceUnitProps {
+  price: string
+  type?: string
+  className?: string
+  size?: 'small' | 'mini' | 'large'
+  conversion?: boolean
+  symbol?: string
+}
+
 export default function PriceUnit({
   price,
   className,
@@ -21,14 +30,7 @@ export default function PriceUnit({
   conversion,
   symbol,
   type
-}: {
+}: PriceUnitProps): ReactElement {
-  price: string
-  type?: string
-  className?: string
-  size?: 'small' | 'mini' | 'large'
-  conversion?: boolean
-  symbol?: string
-}): ReactElement {
   const { locale } = useUserPreferences()
 
   return (

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

@@ -0,0 +1,43 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import Price, { PriceProps } from '@shared/Price'
+import { AccessDetails } from 'src/@types/Price'
+
+export default {
+  title: 'Component/@shared/Price',
+  component: Price
+} as ComponentMeta<typeof Price>
+
+const Template: ComponentStory<typeof Price> = (args: PriceProps) => (
+  <Price {...args} />
+)
+
+interface Props {
+  args: PriceProps
+}
+
+const accessDetailsData = {
+  type: 'dynamic',
+  price: '11.12333',
+  addressOrId: '0x32ddc4852ab7bd751d05b44db6f15841f93b4dde',
+  baseToken: {
+    address: '0x8967bcf84170c91b0d24d4302c2376283b0b3a07',
+    name: 'OceanToken',
+    symbol: 'OCEAN'
+  },
+  datatoken: {
+    address: '0xf76433efb64bd4ff619a127b405dfb66e062356b',
+    name: 'Puckish Porpoise Token',
+    symbol: 'PUCPOR-86'
+  },
+  isPurchasable: true,
+  isOwned: true,
+  validOrderTx:
+    '0x34822bb79ec9f08b7b22a371a752a050bc130dbbb032e89f4c16b644862b6bf9',
+  publisherMarketOrderFee: '0xxx'
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  accessDetails: accessDetailsData as AccessDetails
+}

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

@@ -5,19 +5,21 @@ import Tooltip from '../atoms/Tooltip'
 import PriceUnit from './PriceUnit'
 import { AccessDetails, OrderPriceAndFees } from 'src/@types/Price'
 
+export interface PriceProps {
+  accessDetails: AccessDetails
+  orderPriceAndFees?: OrderPriceAndFees
+  className?: string
+  conversion?: boolean
+  size?: 'small' | 'mini' | 'large'
+}
+
 export default function Price({
   accessDetails,
   orderPriceAndFees,
   className,
   size,
   conversion
-}: {
+}: PriceProps): ReactElement {
-  accessDetails: AccessDetails
-  orderPriceAndFees?: OrderPriceAndFees
-  className?: string
-  conversion?: boolean
-  size?: 'small' | 'mini' | 'large'
-}): ReactElement {
   return accessDetails?.price || accessDetails?.type === 'free' ? (
     <PriceUnit
       price={`${orderPriceAndFees?.price || accessDetails?.price}`}