Update TextArea and FileUpload inputs

.github/workflows/fabric.yml

@@ -32,7 +32,6 @@ jobs:
 
       - run: yarn install --immutable
       - run: yarn build
-      # - run: yarn ci:loki -> broken
 
       - name: Build fabric storybook
         run: yarn build-storybook

.github/workflows/npm-publish.yml

@@ -40,14 +40,6 @@ jobs:
       #     yarn lint
       #     yarn build
       #   if: ${{ inputs.app_name == 'centrifuge-js' }}
-
-      # yarn ci:loki no longer works in GH Actions
-      # because of some Docker dependencies
-      # - name: Build fabric
-      #   run: |
-      #     yarn build
-      #     yarn ci:loki
-      #   if: ${{ inputs.app_name == 'fabric' }}
 
       - name: Publish
         id: publish

centrifuge-app/src/components/Dialogs/CreateCollectionDialog.tsx

@@ -16,7 +16,7 @@ import {
   Stack,
   Text,
   TextAreaInput,
-  TextInput_DEPRECATED,
+  TextInput,
 } from '@centrifuge/fabric'
 import * as React from 'react'
 import { Redirect } from 'react-router'
@@ -127,7 +127,7 @@ export const CreateCollectionDialog: React.FC<{ open: boolean; onClose: () => vo
         <ConnectionGuard networks={['centrifuge']}>
           <form onSubmit={execute}>
             <Stack gap={3}>
-              <TextInput_DEPRECATED
+              <TextInput
                 label="Name"
                 value={name}
                 maxLength={collectionMetadataSchema.name.maxLength}

centrifuge-app/src/components/Dialogs/EditOnboardingEmailAddressDialog.tsx

@@ -1,4 +1,4 @@
-import { Button, Dialog, Shelf, Stack, Text, TextInput_DEPRECATED } from '@centrifuge/fabric'
+import { Button, Dialog, Shelf, Stack, Text, TextInput } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useMutation } from 'react-query'
 import { string } from 'yup'
@@ -52,12 +52,8 @@ export const EditOnboardingEmailAddressDialog = ({ isDialogOpen, setIsDialogOpen
       title={<Text variant="heading2">Edit Email Address</Text>}
     >
       <Stack gap={3}>
-        <TextInput_DEPRECATED value={currentEmail} label="Current Email Address" disabled />
-        <TextInput_DEPRECATED
-          value={newEmail}
-          label="New Email Address"
-          onChange={(event) => setNewEmail(event.target.value)}
-        />
+        <TextInput value={currentEmail} label="Current Email Address" disabled />
+        <TextInput value={newEmail} label="New Email Address" onChange={(event) => setNewEmail(event.target.value)} />
         <Shelf justifyContent="flex-end" gap={2}>
           <Button onClick={() => setIsDialogOpen(false)} variant="secondary" disabled={isLoading}>
             Cancel

centrifuge-app/src/components/Dialogs/ShareMultisigDialog.tsx

@@ -1,5 +1,5 @@
 import { Multisig } from '@centrifuge/centrifuge-js'
-import { Button, Dialog, IconCopy, IconSend, Shelf, Stack, Text, TextInput_DEPRECATED } from '@centrifuge/fabric'
+import { Button, Dialog, IconCopy, IconSend, Shelf, Stack, Text, TextInput } from '@centrifuge/fabric'
 import { copyToClipboard } from '../../utils/copyToClipboard'
 import { ButtonGroup } from '../ButtonGroup'
 
@@ -25,7 +25,7 @@ export function ShareMultisigDialog({ multisig, hash, callData, open, onClose }:
       <Stack gap={2}>
         <Text variant="body2">Share the link below with the other multisig signers to finalize the transaction</Text>
         <Shelf gap={1}>
-          <TextInput_DEPRECATED
+          <TextInput
             style={{
               cursor: 'copy',
             }}

centrifuge-app/src/components/Swaps/Swap.tsx

@@ -1,7 +1,7 @@
 import { CurrencyBalance, CurrencyKey, findBalance, findCurrency, Price } from '@centrifuge/centrifuge-js'
 import { useBalances, useCentrifugeApi, useCentrifugeTransaction } from '@centrifuge/centrifuge-react'
 import { CentrifugeTransactionOptions } from '@centrifuge/centrifuge-react/dist/hooks/useCentrifugeTransaction'
-import { Button, Card, CurrencyInput, SelectInner_DEPRECATED, Stack } from '@centrifuge/fabric'
+import { Button, Card, CurrencyInput, SelectInner, Stack } from '@centrifuge/fabric'
 import Decimal from 'decimal.js-light'
 import * as React from 'react'
 import { Dec } from '../../utils/Decimal'
@@ -64,7 +64,7 @@ export function Swap({ defaultBuy, defaultSell }: SwapProps) {
             setLastChanged('buy')
           }}
           currency={
-            <SelectInner_DEPRECATED
+            <SelectInner
               value={buyCurrency?.symbol ?? ''}
               options={[
                 { label: 'Select', value: '', disabled: true },
@@ -99,7 +99,7 @@ export function Swap({ defaultBuy, defaultSell }: SwapProps) {
             setLastChanged('sell')
           }}
           currency={
-            <SelectInner_DEPRECATED
+            <SelectInner
               value={sellCurrency?.symbol ?? ''}
               options={[
                 { label: 'Select', value: '' },

centrifuge-app/src/pages/IssuerCreatePool/CustomDetails.tsx

@@ -1,7 +1,6 @@
 import { PoolMetadataInput } from '@centrifuge/centrifuge-js/dist/modules/pools'
-import { Box, Button, Card, Shelf, Stack, Text, TextAreaInput, TextInput_DEPRECATED } from '@centrifuge/fabric'
+import { Box, Button, Card, Shelf, Stack, Text, TextAreaInput, TextInput } from '@centrifuge/fabric'
 import { FieldArray, useFormikContext } from 'formik'
-import * as React from 'react'
 import { FieldWithErrorMessage } from '../../components/FieldWithErrorMessage'
 import { validate } from './validate'
 
@@ -49,7 +48,7 @@ export function CustomDetails() {
                 <FieldWithErrorMessage
                   name={`details.${index}.title`}
                   validate={validate.issuerDetailTitle}
-                  as={TextInput_DEPRECATED}
+                  as={TextInput}
                   label="Title (max 50 characters)*"
                   maxLength={50}
                 />

centrifuge-app/src/pages/IssuerCreatePool/IssuerInput.tsx

@@ -1,4 +1,4 @@
-import { Box, FileUpload, Grid, ImageUpload, Text, TextAreaInput, TextInput_DEPRECATED } from '@centrifuge/fabric'
+import { Box, FileUpload, Grid, ImageUpload, Text, TextAreaInput, TextInput } from '@centrifuge/fabric'
 import { Field, FieldProps } from 'formik'
 import * as React from 'react'
 import { FieldWithErrorMessage } from '../../components/FieldWithErrorMessage'
@@ -17,7 +17,7 @@ export const IssuerInput: React.FC<Props> = ({ waitingForStoredIssuer = false })
         <FieldWithErrorMessage
           validate={validate.issuerName}
           name="issuerName"
-          as={TextInput_DEPRECATED}
+          as={TextInput}
           label={<Tooltips type="issuerName" label="Legal name of issuer*" variant="secondary" />}
           placeholder="Name..."
           maxLength={100}
@@ -28,7 +28,7 @@ export const IssuerInput: React.FC<Props> = ({ waitingForStoredIssuer = false })
         <FieldWithErrorMessage
           validate={validate.issuerRepName}
           name="issuerRepName"
-          as={TextInput_DEPRECATED}
+          as={TextInput}
           label={<Tooltips type="issuerRepName" label="Legal name of issuer representative*" variant="secondary" />}
           placeholder="Full name..."
           maxLength={100}
@@ -86,25 +86,19 @@ export const IssuerInput: React.FC<Props> = ({ waitingForStoredIssuer = false })
       </Field>
       <FieldWithErrorMessage
         name="website"
-        as={TextInput_DEPRECATED}
+        as={TextInput}
         label="Website*"
         placeholder="https://..."
         validate={validate.website}
       />
       <FieldWithErrorMessage
         name="forum"
-        as={TextInput_DEPRECATED}
+        as={TextInput}
         label="Governance forum"
         placeholder="https://..."
         validate={validate.forum}
       />
-      <FieldWithErrorMessage
-        name="email"
-        as={TextInput_DEPRECATED}
-        label="Email*"
-        placeholder=""
-        validate={validate.email}
-      />
+      <FieldWithErrorMessage name="email" as={TextInput} label="Email*" placeholder="" validate={validate.email} />
 
       <Box gridColumn={['span 1', 'span 2']}>
         <CustomDetails />

centrifuge-app/src/pages/IssuerCreatePool/TrancheInput.tsx

@@ -1,5 +1,5 @@
 import { PoolMetadataInput } from '@centrifuge/centrifuge-js/dist/modules/pools'
-import { Box, Button, Grid, IconMinusCircle, NumberInput, Stack, Text, TextInput_DEPRECATED } from '@centrifuge/fabric'
+import { Box, Button, Grid, IconMinusCircle, NumberInput, Stack, Text, TextInput } from '@centrifuge/fabric'
 import { Field, FieldArray, FieldProps, useFormikContext } from 'formik'
 import * as React from 'react'
 import { createEmptyTranche } from '.'
@@ -65,7 +65,7 @@ export const TrancheInput: React.FC<{ canRemove?: boolean; currency?: string; is
                   <Text variant="body1">{index + 1}</Text>
                 </Stack>
                 <FieldWithErrorMessage
-                  as={TextInput_DEPRECATED}
+                  as={TextInput}
                   label="Token name*"
                   placeholder={index === juniorTrancheIndex ? 'Junior' : ''}
                   maxLength={30}
@@ -75,7 +75,7 @@ export const TrancheInput: React.FC<{ canRemove?: boolean; currency?: string; is
                 />
                 <Field name={`tranches.${index}.symbolName`} validate={validate.symbolName}>
                   {({ field, form, meta }: FieldProps) => (
-                    <TextInput_DEPRECATED
+                    <TextInput
                       {...field}
                       onChange={(e) => form.setFieldValue(field.name, e.target.value)}
                       errorMessage={meta.touched ? meta.error : undefined}
@@ -97,13 +97,13 @@ export const TrancheInput: React.FC<{ canRemove?: boolean; currency?: string; is
                 />
                 {index === juniorTrancheIndex ? (
                   <>
-                    <TextInput_DEPRECATED
+                    <TextInput
                       label={<Tooltips type="noTranchProtection" variant="secondary" />}
                       value="-"
                       rightElement="%"
                       disabled
                     />
-                    <TextInput_DEPRECATED
+                    <TextInput
                       label={<Tooltips type="variableTranchInterest" variant="secondary" />}
                       value="-"
                       rightElement="%"

centrifuge-app/src/pages/IssuerCreatePool/index.tsx

@@ -10,13 +10,13 @@ import {
 import {
   Box,
   Button,
-  CurrencyInput_DEPRECATED,
+  CurrencyInput,
   FileUpload,
   Grid,
-  Select_DEPRECATED,
+  Select,
   Shelf,
   Text,
-  TextInput_DEPRECATED,
+  TextInput,
   TextWithPlaceholder,
   Thumbnail,
 } from '@centrifuge/fabric'
@@ -494,7 +494,7 @@ function CreatePoolForm() {
                 <FieldWithErrorMessage
                   validate={validate.poolName}
                   name="poolName"
-                  as={TextInput_DEPRECATED}
+                  as={TextInput}
                   label="Pool name*"
                   placeholder="New pool"
                   maxLength={100}
@@ -520,7 +520,7 @@ function CreatePoolForm() {
               <Box gridColumn="span 2">
                 <Field name="assetClass" validate={validate.assetClass}>
                   {({ field, meta, form }: FieldProps) => (
-                    <Select_DEPRECATED
+                    <Select
                       name="assetClass"
                       label={<Tooltips type="assetClass" label="Asset class*" variant="secondary" />}
                       onChange={(event) => {
@@ -539,7 +539,7 @@ function CreatePoolForm() {
               <Box gridColumn="span 2">
                 <Field name="subAssetClass" validate={validate.subAssetClass}>
                   {({ field, meta, form }: FieldProps) => (
-                    <Select_DEPRECATED
+                    <Select
                       name="subAssetClass"
                       label="Secondary asset class"
                       onChange={(event) => form.setFieldValue('subAssetClass', event.target.value)}
@@ -555,7 +555,7 @@ function CreatePoolForm() {
               <Box gridColumn="span 2">
                 <Field name="currency" validate={validate.currency}>
                   {({ field, form, meta }: FieldProps) => (
-                    <Select_DEPRECATED
+                    <Select
                       name="currency"
                       label={<Tooltips type="currency" label="Currency*" variant="secondary" />}
                       onChange={(event) => form.setFieldValue('currency', event.target.value)}
@@ -571,7 +571,7 @@ function CreatePoolForm() {
               <Box gridColumn="span 2">
                 <Field name="maxReserve" validate={validate.maxReserve}>
                   {({ field, form }: FieldProps) => (
-                    <CurrencyInput_DEPRECATED
+                    <CurrencyInput
                       {...field}
                       name="maxReserve"
                       label="Initial maximum reserve*"
@@ -586,7 +586,7 @@ function CreatePoolForm() {
                 <FieldWithErrorMessage
                   validate={validate.podEndpoint}
                   name="podEndpoint"
-                  as={TextInput_DEPRECATED}
+                  as={TextInput}
                   label={`POD endpoint`}
                   placeholder="https://"
                 />

centrifuge-app/src/pages/IssuerPool/Access/MultisigForm.tsx

@@ -1,5 +1,5 @@
 import { addressToHex } from '@centrifuge/centrifuge-js'
-import { Box, Button, IconMinusCircle, Select_DEPRECATED, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Box, Button, IconMinusCircle, Select, Shelf, Stack, Text } from '@centrifuge/fabric'
 import { ErrorMessage, Field, FieldArray, FieldProps, useFormikContext } from 'formik'
 import * as React from 'react'
 import { DataTable } from '../../../components/DataTable'
@@ -85,7 +85,7 @@ export function MultisigForm({ isEditing = true, canRemoveFirst = true, isLoadin
                 <Box maxWidth={150}>
                   <Field name="adminMultisig.threshold" validate={min(2, 'Multisig needs at least two signers')}>
                     {({ field, form }: FieldProps) => (
-                      <Select_DEPRECATED
+                      <Select
                         name="adminMultisig.threshold"
                         onChange={(event) => form.setFieldValue('adminMultisig.threshold', Number(event.target.value))}
                         onBlur={field.onBlur}

centrifuge-app/src/pages/IssuerPool/Assets/CreateLoan.tsx

@@ -11,17 +11,17 @@ import {
 import {
   Box,
   Button,
-  CurrencyInput_DEPRECATED,
+  CurrencyInput,
   DateInput,
   Grid,
   ImageUpload,
   NumberInput,
-  Select_DEPRECATED,
+  Select,
   Shelf,
   Stack,
   Text,
   TextAreaInput,
-  TextInput_DEPRECATED,
+  TextInput,
 } from '@centrifuge/fabric'
 import BN from 'bn.js'
 import { Field, FieldProps, Form, FormikProvider, useFormik } from 'formik'
@@ -84,7 +84,7 @@ function TemplateField({ label, name, input }: TemplateFieldProps) {
       return (
         <Field name={name} validate={required()} key={label}>
           {({ field, form }: any) => (
-            <Select_DEPRECATED
+            <Select
               placeholder="Select one"
               label={`${label}*`}
               options={input.options.map((o) => (typeof o === 'string' ? { label: o, value: o } : o))}
@@ -105,7 +105,7 @@ function TemplateField({ label, name, input }: TemplateFieldProps) {
         >
           {({ field, meta, form }: FieldProps) => {
             return (
-              <CurrencyInput_DEPRECATED
+              <CurrencyInput
                 {...field}
                 label={`${label}*`}
                 errorMessage={meta.touched ? meta.error : undefined}
@@ -150,7 +150,7 @@ function TemplateField({ label, name, input }: TemplateFieldProps) {
       return (
         <FieldWithErrorMessage
           name={name}
-          as={type === 'textarea' ? TextAreaInput : TextInput_DEPRECATED}
+          as={type === 'textarea' ? TextAreaInput : TextInput}
           label={`${label}*`}
           validate={required()}
           {...rest}
@@ -395,15 +395,15 @@ function IssuerCreateLoan() {
                   <FieldWithErrorMessage
                     validate={combine(required(), maxLength(100))}
                     name="assetName"
-                    as={TextInput_DEPRECATED}
+                    as={TextInput}
                     label="Asset name*"
                     placeholder=""
                     maxLength={100}
                     disabled={!templateId}
                   />
                   <Field name="pricing.valuationMethod">
                     {({ field, meta, form }: FieldProps) => (
-                      <Select_DEPRECATED
+                      <Select
                         {...field}
                         label="Asset type"
                         onChange={(event) => form.setFieldValue('pricing.valuationMethod', event.target.value, false)}