diff --git a/src/components/@shared/FormFields/AssetSelection/index.stories.tsx b/src/components/@shared/FormFields/AssetSelection/index.stories.tsx new file mode 100644 index 000000000..fb3fb1ee1 --- /dev/null +++ b/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 + +const Template: ComponentStory = ( + args: AssetSelectionProps +) => + +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 +} diff --git a/src/components/@shared/FormFields/AssetSelection/index.tsx b/src/components/@shared/FormFields/AssetSelection/index.tsx index 11d391ab1..d07d3c1b8 100644 --- a/src/components/@shared/FormFields/AssetSelection/index.tsx +++ b/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
No assets found.
} @@ -27,11 +33,7 @@ export default function AssetSelection({ multiple, disabled, ...props -}: { - assets: AssetSelectionAsset[] - multiple?: boolean - disabled?: boolean -}): JSX.Element { +}: AssetSelectionProps): JSX.Element { const [searchValue, setSearchValue] = useState('') const styleClassesInput = cx({ diff --git a/src/components/@shared/FormFields/BoxSelection/index.stories.tsx b/src/components/@shared/FormFields/BoxSelection/index.stories.tsx new file mode 100644 index 000000000..be50d77cf --- /dev/null +++ b/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 + +const Template: ComponentStory = ( + args: BoxSelectionProps +) => + +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 +} diff --git a/src/components/@shared/FormFields/Datatoken/index.stories.tsx b/src/components/@shared/FormFields/Datatoken/index.stories.tsx new file mode 100644 index 000000000..52c36ae78 --- /dev/null +++ b/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 + +const Template: ComponentStory = (args: InputProps) => ( + +) + +interface Props { + args: InputProps +} + +export const Default: Props = Template.bind({}) +Default.args = { + name: 'PARCOUR-73' +} diff --git a/src/components/@shared/Price/Conversion.module.css b/src/components/@shared/Price/Conversion/index.module.css similarity index 100% rename from src/components/@shared/Price/Conversion.module.css rename to src/components/@shared/Price/Conversion/index.module.css diff --git a/src/components/@shared/Price/Conversion/index.stories.tsx b/src/components/@shared/Price/Conversion/index.stories.tsx new file mode 100644 index 000000000..5d122ff6f --- /dev/null +++ b/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 + +const Template: ComponentStory = (args: ConversionProps) => { + const { prices } = usePrices() + const { currency, locale } = useUserPreferences() + + console.log('PRICES: ', prices) + if (!prices || !currency || !locale) return + + return +} + +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 +} diff --git a/src/components/@shared/Price/Conversion.tsx b/src/components/@shared/Price/Conversion/index.tsx similarity index 95% rename from src/components/@shared/Price/Conversion.tsx rename to src/components/@shared/Price/Conversion/index.tsx index e672d87af..954834243 100644 --- a/src/components/@shared/Price/Conversion.tsx +++ b/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 -}: { - price: string // expects price in OCEAN, not wei - className?: string - hideApproximateSymbol?: boolean -}): ReactElement { +}: ConversionProps): ReactElement { const { prices } = usePrices() const { currency, locale } = useUserPreferences() diff --git a/src/components/@shared/Price/PriceUnit.module.css b/src/components/@shared/Price/PriceUnit/index.module.css similarity index 100% rename from src/components/@shared/Price/PriceUnit.module.css rename to src/components/@shared/Price/PriceUnit/index.module.css diff --git a/src/components/@shared/Price/PriceUnit/index.stories.tsx b/src/components/@shared/Price/PriceUnit/index.stories.tsx new file mode 100644 index 000000000..316f0e485 --- /dev/null +++ b/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 + +const Template: ComponentStory = (args: PriceUnitProps) => { + const { locale } = useUserPreferences() + + if (!locale) return + return +} + +interface Props { + args: PriceUnitProps +} + +export const Default: Props = Template.bind({}) +Default.args = { + price: '11.12333' +} diff --git a/src/components/@shared/Price/PriceUnit.tsx b/src/components/@shared/Price/PriceUnit/index.tsx similarity index 90% rename from src/components/@shared/Price/PriceUnit.tsx rename to src/components/@shared/Price/PriceUnit/index.tsx index 7885871b2..cbf610706 100644 --- a/src/components/@shared/Price/PriceUnit.tsx +++ b/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 styles from './PriceUnit.module.css' +import Conversion from '../Conversion' +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 -}: { - price: string - type?: string - className?: string - size?: 'small' | 'mini' | 'large' - conversion?: boolean - symbol?: string -}): ReactElement { +}: PriceUnitProps): ReactElement { const { locale } = useUserPreferences() return ( diff --git a/src/components/@shared/Price/index.stories.tsx b/src/components/@shared/Price/index.stories.tsx new file mode 100644 index 000000000..2b71b66c1 --- /dev/null +++ b/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 + +const Template: ComponentStory = (args: PriceProps) => ( + +) + +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 +} diff --git a/src/components/@shared/Price/index.tsx b/src/components/@shared/Price/index.tsx index 3ac519ae3..4e7863b04 100644 --- a/src/components/@shared/Price/index.tsx +++ b/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 -}: { - accessDetails: AccessDetails - orderPriceAndFees?: OrderPriceAndFees - className?: string - conversion?: boolean - size?: 'small' | 'mini' | 'large' -}): ReactElement { +}: PriceProps): ReactElement { return accessDetails?.price || accessDetails?.type === 'free' ? (