reorg Form components one level up

src/@utils/aquarius.ts

@@ -1,5 +1,5 @@
 import { Logger } from '@oceanprotocol/lib'
-import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
+import { AssetSelectionAsset } from '@shared/FormFields/AssetSelection'
 import { PriceList, getAssetsPriceList } from './subgraph'
 import axios, { CancelToken, AxiosResponse } from 'axios'
 import { OrdersData_tokenOrders as OrdersData } from '../@types/apollo/OrdersData'

src/components/@shared/AssetList/AssetComputeList.module.css

@@ -1,5 +1,5 @@
 .display {
-  composes: selection from '@shared/Form/FormFields/AssetSelection.module.css';
+  composes: selection from '@shared/FormFields/AssetSelection.module.css';
 }
 
 .display [class*='loaderWrap'] {
@@ -7,14 +7,14 @@
 }
 
 .scroll {
-  composes: scroll from '@shared/Form/FormFields/AssetSelection.module.css';
+  composes: scroll from '@shared/FormFields/AssetSelection.module.css';
   margin-top: 0;
   border-top: none;
   width: 100%;
 }
 
 .row {
-  composes: row from '@shared/Form/FormFields/AssetSelection.module.css';
+  composes: row from '@shared/FormFields/AssetSelection.module.css';
 }
 
 .row:last-child {
@@ -35,7 +35,7 @@
 }
 
 .title {
-  composes: title from '@shared/Form/FormFields/AssetSelection.module.css';
+  composes: title from '@shared/FormFields/AssetSelection.module.css';
 }
 
 .hover:hover {
@@ -43,7 +43,7 @@
 }
 
 .price {
-  composes: price from '@shared/Form/FormFields/AssetSelection.module.css';
+  composes: price from '@shared/FormFields/AssetSelection.module.css';
 }
 
 .price [class*='symbol'] {
@@ -51,9 +51,9 @@
 }
 
 .did {
-  composes: did from '@shared/Form/FormFields/AssetSelection.module.css';
+  composes: did from '@shared/FormFields/AssetSelection.module.css';
 }
 
 .empty {
-  composes: empty from '@shared/Form/FormFields/AssetSelection.module.css';
+  composes: empty from '@shared/FormFields/AssetSelection.module.css';
 }

src/components/@shared/AssetList/AssetComputeList.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import PriceUnit from '@shared/Price/PriceUnit'
 import Loader from '@shared/atoms/Loader'
 import styles from './AssetComputeList.module.css'
-import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
+import { AssetSelectionAsset } from '@shared/FormFields/AssetSelection'
 
 function Empty() {
   return <div className={styles.empty}>No assets found.</div>

src/components/@shared/Form/FormFields/URLInput/Input.module.css

@@ -1,3 +0,0 @@
-.input {
-  composes: input from '@shared/Form/Input/InputElement.module.css';
-}

src/components/@shared/FormFields/AdvancedSettings.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, useState, FormEvent, ChangeEvent } from 'react'
-import Input from '@shared/Form/Input'
+import Input from '@shared/FormInput'
 import Button from '@shared/atoms/Button'
 import { Field } from 'formik'
 import styles from './AdvancedSettings.module.css'

src/components/@shared/FormFields/AssetSelection.module.css

@@ -58,11 +58,11 @@
 }
 
 .radio {
-  composes: radio from '@shared/Form/Input/InputElement.module.css';
+  composes: radio from '@shared/FormInput/InputElement.module.css';
 }
 
 .checkbox {
-  composes: checkbox from '@shared/Form/Input/InputElement.module.css';
+  composes: checkbox from '@shared/FormInput/InputElement.module.css';
 }
 
 .title {

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

@@ -4,7 +4,7 @@ import slugify from 'slugify'
 import classNames from 'classnames/bind'
 import PriceUnit from '@shared/Price/PriceUnit'
 import External from '@images/external.svg'
-import InputElement from '@shared/Form/Input/InputElement'
+import InputElement from '@shared/FormInput/InputElement'
 import Loader from '@shared/atoms/Loader'
 import styles from './AssetSelection.module.css'
 

src/components/@shared/FormFields/CustomProvider.tsx

@@ -3,7 +3,7 @@ import { useField } from 'formik'
 import { toast } from 'react-toastify'
 import CustomInput from './URLInput/Input'
 import { useOcean } from '@context/Ocean'
-import { InputProps } from '@shared/Form/Input'
+import { InputProps } from '@shared/FormInput'
 
 export default function CustomProvider(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField(props.name)

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

@@ -1,6 +1,6 @@
 import { useField } from 'formik'
 import React, { ReactElement, useEffect } from 'react'
-import { InputProps } from '@shared/Form/Input'
+import { InputProps } from '@shared/FormInput'
 import Logo from '@images/logo.svg'
 import RefreshName from './RefreshName'
 import styles from './index.module.css'

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

@@ -3,7 +3,7 @@ import { useField } from 'formik'
 import { toast } from 'react-toastify'
 import FileInfo from './Info'
 import CustomInput from '../URLInput/Input'
-import { InputProps } from '@shared/Form/Input'
+import { InputProps } from '@shared/FormInput'
 import { getFileInfo } from '@utils/provider'
 import { useWeb3 } from '@context/Web3'
 import { getOceanConfig } from '@utils/ocean'

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

@@ -1,4 +1,4 @@
-import { InputProps } from '@shared/Form/Input'
+import { InputProps } from '@shared/FormInput'
 import { generateNftOptions } from '@utils/nft'
 import { useField } from 'formik'
 import React, { ReactElement, useEffect } from 'react'

src/components/@shared/FormFields/URLInput/Input.module.css

@@ -0,0 +1,3 @@
+.input {
+  composes: input from '@shared/FormInput/InputElement.module.css';
+}

src/components/@shared/FormFields/URLInput/Input.tsx

@@ -3,7 +3,7 @@ import Button from '@shared/atoms/Button'
 import { FieldInputProps, useField } from 'formik'
 import Loader from '@shared/atoms/Loader'
 import styles from './Input.module.css'
-import InputGroup from '@shared/Form/Input/InputGroup'
+import InputGroup from '@shared/FormInput/InputGroup'
 
 export default function URLInput({
   submitText,

src/components/Asset/AssetActions/Compute/AlgorithmDatasetsListForCompute.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import styles from './AlgorithmDatasetsListForCompute.module.css'
 import { getAlgorithmDatasetsForCompute } from '@utils/aquarius'
-import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
+import { AssetSelectionAsset } from '@shared/FormFields/AssetSelection'
 import AssetComputeList from '@shared/AssetList/AssetComputeList'
 import { useAsset } from '@context/Asset'
 import { useCancelToken } from '@hooks/useCancelToken'

src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx

@@ -1,8 +1,8 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import styles from './FormComputeDataset.module.css'
 import { Field, Form, FormikContextType, useFormikContext } from 'formik'
-import Input from '@shared/Form/Input'
+import Input from '@shared/FormInput'
-import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
+import { AssetSelectionAsset } from '@shared/FormFields/AssetSelection'
 import { compareAsBN } from '@utils/numbers'
 import ButtonBuy from '@shared/ButtonBuy'
 import PriceOutput from './PriceOutput'

src/components/Asset/AssetActions/Compute/index.tsx

@@ -26,7 +26,7 @@ import FormStartComputeDataset from './FormComputeDataset'
 import styles from './index.module.css'
 import SuccessConfetti from '@shared/SuccessConfetti'
 import { getServiceByName, secondsToString } from '@utils/ddo'
-import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
+import { AssetSelectionAsset } from '@shared/FormFields/AssetSelection'
 import AlgorithmDatasetsListForCompute from './AlgorithmDatasetsListForCompute'
 import { getPreviousOrders, getPrice } from '@utils/subgraph'
 import AssetActionHistoryTable from '../AssetActionHistoryTable'

src/components/Asset/AssetActions/Edit/FormEditComputeDataset.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import { Field, Form, FormikContextType, useFormikContext } from 'formik'
-import Input, { InputProps } from '@shared/Form/Input'
+import Input, { InputProps } from '@shared/FormInput'
-import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
+import { AssetSelectionAsset } from '@shared/FormFields/AssetSelection'
 import stylesIndex from './index.module.css'
 import styles from './FormEditMetadata.module.css'
 import {

src/components/Asset/AssetActions/Edit/FormEditMetadata.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, ReactElement } from 'react'
 import { Field, Form, FormikContextType, useFormikContext } from 'formik'
 import { useOcean } from '@context/Ocean'
-import Input, { InputProps } from '@shared/Form/Input'
+import Input, { InputProps } from '@shared/FormInput'
 import FormActions from './FormActions'
 import styles from './FormEditMetadata.module.css'
 import { FormPublishData } from '../../../Publish/_types'

src/components/Asset/AssetActions/Pool/Add/FormAdd.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, ReactElement, useEffect } from 'react'
 import styles from './FormAdd.module.css'
-import Input from '@shared/Form/Input'
+import Input from '@shared/FormInput'
 import {
   Field,
   FieldInputProps,

src/components/Asset/AssetActions/Pool/Add/Output.tsx

@@ -1,7 +1,7 @@
 import { FormikContextType, useFormikContext } from 'formik'
 import React, { ReactElement, useEffect, useState } from 'react'
 import { FormAddLiquidity } from '.'
-import FormHelp from '@shared/Form/Input/Help'
+import FormHelp from '@shared/FormInput/Help'
 import Token from '../Token'
 import styles from './Output.module.css'
 import Decimal from 'decimal.js'

src/components/Asset/AssetActions/Pool/CoinSelect.module.css

@@ -1,5 +1,5 @@
 .coinSelect {
-  composes: select from '@shared/Form/Input/InputElement.module.css';
+  composes: select from '@shared/FormInput/InputElement.module.css';
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-base);
   border: none;

src/components/Asset/AssetActions/Pool/Remove.tsx

@@ -12,12 +12,12 @@ import { toast } from 'react-toastify'
 import Actions from './Actions'
 import { Logger } from '@oceanprotocol/lib'
 import Token from './Token'
-import FormHelp from '@shared/Form/Input/Help'
+import FormHelp from '@shared/FormInput/Help'
 import Button from '@shared/atoms/Button'
 import { getMaxPercentRemove } from './utils'
 import debounce from 'lodash.debounce'
 import UserLiquidity from '../UserLiquidity'
-import InputElement from '@shared/Form/Input/InputElement'
+import InputElement from '@shared/FormInput/InputElement'
 import { useOcean } from '@context/Ocean'
 import { useWeb3 } from '@context/Web3'
 import Decimal from 'decimal.js'

src/components/Asset/AssetActions/Trade/Slippage.tsx

@@ -1,6 +1,6 @@
 import { FormikContextType, useFormikContext } from 'formik'
 import React, { ChangeEvent, ReactElement } from 'react'
-import InputElement from '@shared/Form/Input/InputElement'
+import InputElement from '@shared/FormInput/InputElement'
 import Tooltip from '@shared/atoms/Tooltip'
 import styles from './Slippage.module.css'
 import { FormTradeData } from './_types'

src/components/Asset/AssetActions/Trade/TradeInput.tsx

@@ -6,7 +6,7 @@ import {
   FormikContextType,
   useFormikContext
 } from 'formik'
-import Input from '@shared/Form/Input'
+import Input from '@shared/FormInput'
 import Button from '@shared/atoms/Button'
 import { useOcean } from '@context/Ocean'
 import { FormTradeData, TradeItem } from './_types'

src/components/Header/SearchBar.tsx

@@ -7,7 +7,7 @@ import React, {
   ReactElement
 } from 'react'
 import SearchIcon from '@images/search.svg'
-import InputElement from '@shared/Form/Input/InputElement'
+import InputElement from '@shared/FormInput/InputElement'
 import styles from './SearchBar.module.css'
 import { addExistingParamsToUrl } from '../Search/utils'
 import { useRouter } from 'next/router'

src/components/Header/UserPreferences/Appearance.tsx

@@ -1,12 +1,12 @@
 import React, { ReactElement, ChangeEvent } from 'react'
 import { DarkMode } from 'use-dark-mode'
-import FormHelp from '@shared/Form/Input/Help'
+import FormHelp from '@shared/FormInput/Help'
-import Label from '@shared/Form/Input/Label'
+import Label from '@shared/FormInput/Label'
 import Moon from '@images/moon.svg'
 import Sun from '@images/sun.svg'
 import BoxSelection, {
   BoxSelectionOption
-} from '@shared/Form/FormFields/BoxSelection'
+} from '@shared/FormFields/BoxSelection'
 import styles from './Appearance.module.css'
 
 export default function Appearance({

src/components/Header/UserPreferences/Currency.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, ChangeEvent } from 'react'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import { useUserPreferences } from '@context/UserPreferences'
-import Input from '@shared/Form/Input'
+import Input from '@shared/FormInput'
 
 export default function Currency(): ReactElement {
   const { currency, setCurrency } = useUserPreferences()

src/components/Header/UserPreferences/Debug.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import { useUserPreferences } from '@context/UserPreferences'
-import Input from '@shared/Form/Input'
+import Input from '@shared/FormInput'
 
 export default function Debug(): ReactElement {
   const { debug, setDebug } = useUserPreferences()

src/components/Header/UserPreferences/Networks/NetworkItem.module.css

@@ -1,5 +1,5 @@
 .radioWrap {
-  composes: radioWrap from '@shared/Form/Input/InputElement.module.css';
+  composes: radioWrap from '@shared/FormInput/InputElement.module.css';
   padding: calc(var(--spacer) / 6) calc(var(--spacer) / 3);
   border-bottom: 1px solid var(--border-color);
 }
@@ -9,14 +9,14 @@
 }
 
 .input {
-  composes: checkbox from '@shared/Form/Input/InputElement.module.css';
+  composes: checkbox from '@shared/FormInput/InputElement.module.css';
   vertical-align: baseline;
   margin-right: calc(var(--spacer) / 3);
   margin-top: 0;
 }
 
 .radioLabel {
-  composes: radioLabel from '@shared/Form/Input/InputElement.module.css';
+  composes: radioLabel from '@shared/FormInput/InputElement.module.css';
   font-weight: var(--font-weight-base);
   display: flex;
   align-items: center;

src/components/Header/UserPreferences/Networks/index.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
-import Label from '@shared/Form/Input/Label'
+import Label from '@shared/FormInput/Label'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
-import FormHelp from '@shared/Form/Input/Help'
+import FormHelp from '@shared/FormInput/Help'
 import Tooltip from '@shared/atoms/Tooltip'
 import Caret from '@images/caret.svg'
 import Network from '@images/network.svg'

src/components/Header/UserPreferences/TokenApproval.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import { useUserPreferences } from '@context/UserPreferences'
-import Input from '@shared/Form/Input'
+import Input from '@shared/FormInput'
 
 export default function TokenApproval(): ReactElement {
   const { infiniteApproval, setInfiniteApproval } = useUserPreferences()

src/components/Privacy/CookieModule.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, ReactElement, useEffect, useState } from 'react'
 import { CookieConsentStatus, useConsent } from '@context/CookieConsent'
-import InputElement from '@shared/Form/Input/InputElement'
+import InputElement from '@shared/FormInput/InputElement'
 import Markdown from '@shared/Markdown'
 import styles from './CookieModule.module.css'
 

src/components/Profile/History/ComputeJobs/Results.tsx

@@ -5,7 +5,7 @@ import { ListItem } from '@shared/atoms/Lists'
 import Button from '@shared/atoms/Button'
 import { useOcean } from '@context/Ocean'
 import styles from './Results.module.css'
-import FormHelp from '@shared/Form/Input/Help'
+import FormHelp from '@shared/FormInput/Help'
 import content from '../../../../../content/pages/history.json'
 
 export default function Results({

src/components/Publish/Metadata/index.tsx

@@ -1,5 +1,5 @@
-import { BoxSelectionOption } from '@shared/Form/FormFields/BoxSelection'
+import { BoxSelectionOption } from '@shared/FormFields/BoxSelection'
-import Input from '@shared/Form/Input'
+import Input from '@shared/FormInput'
 import { Field, useFormikContext } from 'formik'
 import React, { ReactElement } from 'react'
 import content from '../../../../content/publish/form.json'

src/components/Publish/Pricing/Coin.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import styles from './Coin.module.css'
-import InputElement from '@shared/Form/Input/InputElement'
+import InputElement from '@shared/FormInput/InputElement'
 import Logo from '@images/logo.svg'
 import Conversion from '@shared/Price/Conversion'
 import { DataTokenOptions } from '@utils/datatokens'

src/components/Publish/Pricing/Dynamic.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import Alert from '@shared/atoms/Alert'
-import FormHelp from '@shared/Form/Input/Help'
+import FormHelp from '@shared/FormInput/Help'
 import Tooltip from '@shared/atoms/Tooltip'
 import Coin from './Coin'
 import styles from './Dynamic.module.css'

src/components/Publish/Pricing/Error.tsx

@@ -1,6 +1,6 @@
 import { FieldMetaProps } from 'formik'
 import React, { ReactElement } from 'react'
-import stylesInput from '@shared/Form/Input/index.module.css'
+import stylesInput from '@shared/FormInput/index.module.css'
 
 export default function Error({
   meta

src/components/Publish/Pricing/Fees.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import Tooltip from '@shared/atoms/Tooltip'
 import styles from './Fees.module.css'
 import { useField } from 'formik'
-import Input from '@shared/Form/Input'
+import Input from '@shared/FormInput'
 import Error from './Error'
 
 const Default = ({

src/components/Publish/Pricing/Fixed.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import FormHelp from '@shared/Form/Input/Help'
+import FormHelp from '@shared/FormInput/Help'
 import Price from './Price'
 import Fees from './Fees'
 

src/components/Publish/Pricing/Free.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import FormHelp from '@shared/Form/Input/Help'
+import FormHelp from '@shared/FormInput/Help'
 import Price from './Price'
 
 export default function Free({ content }: { content: any }): ReactElement {

src/components/Publish/Pricing/Price.tsx

@@ -1,7 +1,7 @@
 import Conversion from '@shared/Price/Conversion'
 import { useField, useFormikContext } from 'formik'
 import React, { ReactElement } from 'react'
-import Input from '@shared/Form/Input'
+import Input from '@shared/FormInput'
 import Error from './Error'
 import PriceUnit from '@shared/Price/PriceUnit'
 import styles from './Price.module.css'

src/components/Publish/Services/index.tsx

@@ -1,4 +1,4 @@
-import Input from '@shared/Form/Input'
+import Input from '@shared/FormInput'
 import { Field, useFormikContext } from 'formik'
 import React, { ReactElement, useEffect } from 'react'
 import IconDownload from '@images/download.svg'

src/components/Search/sort.module.css

@@ -16,7 +16,7 @@
 }
 
 .sortLabel {
-  composes: label from '@shared/Form/Input/Label.module.css';
+  composes: label from '@shared/FormInput/Label.module.css';
   margin-bottom: 0;
   margin-left: calc(var(--spacer) / 2);
   margin-right: calc(var(--spacer) / 1.5);