dvkei/Pterodactyl-Panel
1
0
Fork 0
forked from Alex/Pterodactyl-Panel
Code Issues Pull Requests Projects Releases Wiki Activity

ui(admin): fix eslint errors, add CreateAllocationForm

Browse Source
This commit is contained in:
Matthew Penner 2021-07-20 13:20:41 -06:00
parent d32b3a0473
commit 84b207eddb
14 changed files with 311 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/scripts/api/admin/nodes/getAllocations.ts
View File

@ -18,9 +18,9 @@ export const rawDataToAllocation = (data: FractalResponseData): Allocation => ({
assigned: data.attributes.assigned,
});
export default (uuid: string): Promise<Allocation[]> => {
export default (id: string | number): Promise<Allocation[]> => {
return new Promise((resolve, reject) => {
http.get(`/api/application/nodes/${uuid}/allocations`)
http.get(`/api/application/nodes/${id}/allocations`)
.then(({ data }) => resolve((data.data || []).map(rawDataToAllocation)))
.catch(reject);
});

14
resources/scripts/components/admin/databases/DatabasesContainer.tsx
View File

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getDatabases, { Context as DatabasesContext, Filters } from '@/api/admin/databases/getDatabases';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';
@ -7,17 +7,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
TableBody,
TableHead,
TableHeader,
TableRow,
Pagination,
Loading,
NoItems,
ContentWrapper,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import Button from '@/components/elements/Button';
import CopyOnClick from '@/components/elements/CopyOnClick';

14
resources/scripts/components/admin/locations/LocationsContainer.tsx
View File

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getLocations, { Context as LocationsContext, Filters } from '@/api/admin/locations/getLocations';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';
@ -7,17 +7,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
TableBody,
TableHead,
TableHeader,
TableRow,
Pagination,
Loading,
NoItems,
ContentWrapper,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import NewLocationButton from '@/components/admin/locations/NewLocationButton';
import CopyOnClick from '@/components/elements/CopyOnClick';

14
resources/scripts/components/admin/mounts/MountsContainer.tsx
View File

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getMounts, { Context as MountsContext, Filters } from '@/api/admin/mounts/getMounts';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';
@ -7,17 +7,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
TableBody,
TableHead,
TableHeader,
TableRow,
Pagination,
Loading,
NoItems,
ContentWrapper,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import Button from '@/components/elements/Button';
import CopyOnClick from '@/components/elements/CopyOnClick';

14
resources/scripts/components/admin/nests/NestEggTable.tsx
View File

@ -1,21 +1,11 @@
import CopyOnClick from '@/components/elements/CopyOnClick';
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getEggs, { Context as EggsContext, Filters } from '@/api/admin/nests/getEggs';
import useFlash from '@/plugins/useFlash';
import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
TableBody,
TableHead,
TableHeader,
TableRow,
Pagination,
Loading,
NoItems,
ContentWrapper,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import { Context } from '@/components/admin/nests/NestEditContainer';
const RowCheckbox = ({ id }: { id: number}) => {

14
resources/scripts/components/admin/nests/NestsContainer.tsx
View File

@ -1,5 +1,5 @@
import CopyOnClick from '@/components/elements/CopyOnClick';
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getNests, { Context as NestsContext, Filters } from '@/api/admin/nests/getNests';
import NewNestButton from '@/components/admin/nests/NewNestButton';
import FlashMessageRender from '@/components/FlashMessageRender';
@ -9,17 +9,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
TableBody,
TableHead,
TableHeader,
TableRow,
Pagination,
Loading,
NoItems,
ContentWrapper,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
const RowCheckbox = ({ id }: { id: number}) => {
const isChecked = AdminContext.useStoreState(state => state.nests.selectedNests.indexOf(id) >= 0);

97
resources/scripts/components/admin/nodes/CreateAllocationForm.tsx Normal file
View File

@ -0,0 +1,97 @@
import { Form, Formik, FormikHelpers } from 'formik';
import React, { useEffect, useState } from 'react';
import tw from 'twin.macro';
import { array, number, object, string } from 'yup';
import getAllocations from '@/api/admin/nodes/getAllocations';
import Button from '@/components/elements/Button';
import SelectField, { Option } from '@/components/elements/SelectField';
interface Values {
ips: string[];
ports: number[];
}
const distinct = (value: any, index: any, self: any) => {
return self.indexOf(value) === index;
};
function CreateAllocationForm ({ nodeId }: { nodeId: string | number }) {
const [ ips, setIPs ] = useState<Option[]>([]);
const [ ports ] = useState<Option[]>([]);
useEffect(() => {
getAllocations(nodeId)
.then(allocations => {
setIPs(allocations.map(a => a.ip).filter(distinct).map(ip => {
return { value: ip, label: ip };
}));
});
}, [ nodeId ]);
const isValidIP = (inputValue: string): boolean => {
// TODO: Better way of checking for a valid ip (and CIDR).
return inputValue.match(/^([0-9a-f.:/]+)$/) !== null;
};
const isValidPort = (inputValue: string): boolean => {
// TODO: Better way of checking for a valid port (and port range)
return inputValue.match(/^([0-9-]+)$/) !== null;
};
const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
setSubmitting(false);
};
return (
<Formik
onSubmit={submit}
initialValues={{
ips: [] as string[],
ports: [] as number[],
}}
validationSchema={object().shape({
ips: array(string()).min(1, 'You must select at least one ip address.'),
ports: array(number()).min(1, 'You must select at least one port.'),
})}
>
{
({ isSubmitting, isValid }) => (
<Form>
<SelectField
id={'ips'}
name={'ips'}
label={'IPs and CIDRs'}
options={ips}
isValidNewOption={isValidIP}
isMulti
isSearchable
isCreatable
css={tw`mb-6`}
/>
<SelectField
id={'ports'}
name={'ports'}
label={'Ports'}
options={ports}
isValidNewOption={isValidPort}
isMulti
isSearchable
isCreatable
/>
<div css={tw`w-full flex flex-row items-center mt-6`}>
<div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}>
Create Allocations
</Button>
</div>
</div>
</Form>
)
}
</Formik>
);
}
export default CreateAllocationForm;

84
resources/scripts/components/admin/nodes/NodeAllocationContainer.tsx
View File

@ -1,90 +1,14 @@
import Label from '@/components/elements/Label';
import React, { useEffect, useState } from 'react';
import AdminBox from '@/components/admin/AdminBox';
import Creatable from 'react-select/creatable';
import { ActionMeta, GroupTypeBase, InputActionMeta, ValueType } from 'react-select/src/types';
import { SelectStyle } from '@/components/elements/Select2';
import tw from 'twin.macro';
import getAllocations from '@/api/admin/nodes/getAllocations';
import React from 'react';
import { useRouteMatch } from 'react-router-dom';
interface Option {
value: string;
label: string;
}
const distinct = (value: any, index: any, self: any) => {
return self.indexOf(value) === index;
};
import AdminBox from '@/components/admin/AdminBox';
import CreateAllocationForm from '@/components/admin/nodes/CreateAllocationForm';
export default () => {
const match = useRouteMatch<{ id: string }>();
const [ ips, setIPs ] = useState<Option[]>([]);
const [ ports ] = useState<Option[]>([]);
useEffect(() => {
getAllocations(match.params.id)
.then(allocations => {
setIPs(allocations.map(a => a.ip).filter(distinct).map(ip => {
return { value: ip, label: ip };
}));
});
}, []);
const onChange = (value: ValueType<Option, any>, action: ActionMeta<any>) => {
console.log({
event: 'onChange',
value,
action,
});
};
const onInputChange = (newValue: string, actionMeta: InputActionMeta) => {
console.log({
event: 'onInputChange',
newValue,
actionMeta,
});
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const isValidNewOption1 = (inputValue: string, selectValue: ValueType<Option, any>, selectOptions: ReadonlyArray<Option | GroupTypeBase<Option>>): boolean => {
return inputValue.match(/^([0-9a-f.:/]+)$/) !== null;
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const isValidNewOption2 = (inputValue: string, selectValue: ValueType<Option, any>, selectOptions: ReadonlyArray<Option | GroupTypeBase<Option>>): boolean => {
return inputValue.match(/^([0-9-]+)$/) !== null;
};
return (
<AdminBox title={'Allocations'}>
<div css={tw`mb-6`}>
<Label>IPs and CIDRs</Label>
<Creatable
options={ips}
styles={SelectStyle}
onChange={onChange}
onInputChange={onInputChange}
isValidNewOption={isValidNewOption1}
isMulti
isSearchable
/>
</div>
<div css={tw`mb-6`}>
<Label>Ports</Label>
<Creatable
options={ports}
styles={SelectStyle}
// onChange={onChange}
// onInputChange={onInputChange}
isValidNewOption={isValidNewOption2}
isMulti
isSearchable
/>
</div>
<CreateAllocationForm nodeId={match.params.id}/>
</AdminBox>
);
};

14
resources/scripts/components/admin/nodes/NodesContainer.tsx
View File

@ -1,5 +1,5 @@
import { Filters } from '@/api/admin/servers/getServers';
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getNodes, { Context as NodesContext } from '@/api/admin/nodes/getNodes';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';
@ -8,17 +8,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
TableBody,
TableHead,
TableHeader,
TableRow,
Pagination,
Loading,
NoItems,
ContentWrapper,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import Button from '@/components/elements/Button';
import CopyOnClick from '@/components/elements/CopyOnClick';
import { bytesToHuman, megabytesToBytes } from '@/helpers';

14
resources/scripts/components/admin/roles/RolesContainer.tsx
View File

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getRoles, { Context as RolesContext, Filters } from '@/api/admin/roles/getRoles';
import { AdminContext } from '@/state/admin';
import NewRoleButton from '@/components/admin/roles/NewRoleButton';
@ -8,17 +8,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
TableBody,
TableHead,
TableHeader,
TableRow,
Pagination,
Loading,
NoItems,
ContentWrapper,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import CopyOnClick from '@/components/elements/CopyOnClick';
const RowCheckbox = ({ id }: { id: number }) => {

13
resources/scripts/components/admin/servers/ServersContainer.tsx
View File

@ -1,16 +1,7 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
ContentWrapper,
Loading,
NoItems,
Pagination,
TableBody,
TableHead,
TableHeader,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import Button from '@/components/elements/Button';
import CopyOnClick from '@/components/elements/CopyOnClick';
import FlashMessageRender from '@/components/FlashMessageRender';

13
resources/scripts/components/admin/users/UsersContainer.tsx
View File

@ -1,17 +1,8 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import CopyOnClick from '@/components/elements/CopyOnClick';
import getUsers, { Context as UsersContext, Filters } from '@/api/admin/users/getUsers';
import AdminTable, {
ContentWrapper,
Loading,
NoItems,
Pagination,
TableBody,
TableHead,
TableHeader,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import Button from '@/components/elements/Button';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';

101
resources/scripts/components/elements/Select2.ts
View File

@ -1,101 +0,0 @@
import { CSSObject } from '@emotion/serialize';
import { ContainerProps, ControlProps, InputProps, MenuProps, MultiValueProps, OptionProps, PlaceholderProps, SingleValueProps, StylesConfig, ValueContainerProps } from 'react-select';
import { theme } from 'twin.macro';
type T = any;
export const SelectStyle: StylesConfig<T, any, any> = {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
container: (base: CSSObject, props: ContainerProps<T, any, any>): CSSObject => {
return {
...base,
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
control: (base: CSSObject, props: ControlProps<T, any, any>): CSSObject => {
return {
...base,
height: '2.75rem',
/* paddingTop: '0.75rem',
paddingBottom: '0.75rem',
paddingLeft: '4rem',
paddingRight: '4rem', */
background: theme`colors.neutral.600`,
borderColor: theme`colors.neutral.500`,
borderWidth: '2px',
color: theme`colors.neutral.200`,
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
input: (base: CSSObject, props: InputProps): CSSObject => {
return {
...base,
color: theme`colors.neutral.200`,
fontSize: '0.875rem',
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
menu: (base: CSSObject, props: MenuProps<T, any, any>): CSSObject => {
return {
...base,
background: theme`colors.neutral.900`,
color: theme`colors.neutral.200`,
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
multiValue: (base: CSSObject, props: MultiValueProps<T, any>): CSSObject => {
return {
...base,
background: theme`colors.neutral.900`,
color: theme`colors.neutral.200`,
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
multiValueLabel: (base: CSSObject, props: MultiValueProps<T, any>): CSSObject => {
return {
...base,
color: theme`colors.neutral.200`,
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
option: (base: CSSObject, props: OptionProps<T, any, any>): CSSObject => {
return {
...base,
background: theme`colors.neutral.900`,
':hover': {
background: theme`colors.neutral.700`,
cursor: 'pointer',
},
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
placeholder: (base: CSSObject, props: PlaceholderProps<T, any, any>): CSSObject => {
return {
...base,
color: theme`colors.neutral.300`,
fontSize: '0.875rem',
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
singleValue: (base: CSSObject, props: SingleValueProps<T, any>): CSSObject => {
return {
...base,
color: '#00000',
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
valueContainer: (base: CSSObject, props: ValueContainerProps<T, any>): CSSObject => {
return {
...base,
};
},
};

190
resources/scripts/components/elements/SelectField.tsx Normal file
View File

@ -0,0 +1,190 @@
import { CSSObject } from '@emotion/serialize';
import { Field as FormikField, FieldProps } from 'formik';
import React, { forwardRef } from 'react';
import Select, { ContainerProps, ControlProps, InputProps, MenuProps, MultiValueProps, OptionProps, PlaceholderProps, SingleValueProps, StylesConfig, ValueContainerProps } from 'react-select';
import Creatable from 'react-select/creatable';
import tw, { theme } from 'twin.macro';
import Label from '@/components/elements/Label';
import { ValueType } from 'react-select/src/types';
type T = any;
export const SelectStyle: StylesConfig<T, any, any> = {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
container: (base: CSSObject, props: ContainerProps<T, any, any>): CSSObject => {
return {
...base,
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
control: (base: CSSObject, props: ControlProps<T, any, any>): CSSObject => {
return {
...base,
height: '2.75rem',
/* paddingTop: '0.75rem',
paddingBottom: '0.75rem',
paddingLeft: '4rem',
paddingRight: '4rem', */
background: theme`colors.neutral.600`,
borderColor: theme`colors.neutral.500`,
borderWidth: '2px',
color: theme`colors.neutral.200`,
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
input: (base: CSSObject, props: InputProps): CSSObject => {
return {
...base,
color: theme`colors.neutral.200`,
fontSize: '0.875rem',
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
menu: (base: CSSObject, props: MenuProps<T, any, any>): CSSObject => {
return {
...base,
background: theme`colors.neutral.900`,
color: theme`colors.neutral.200`,
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
multiValue: (base: CSSObject, props: MultiValueProps<T, any>): CSSObject => {
return {
...base,
background: theme`colors.neutral.900`,
color: theme`colors.neutral.200`,
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
multiValueLabel: (base: CSSObject, props: MultiValueProps<T, any>): CSSObject => {
return {
...base,
color: theme`colors.neutral.200`,
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
option: (base: CSSObject, props: OptionProps<T, any, any>): CSSObject => {
return {
...base,
background: theme`colors.neutral.900`,
':hover': {
background: theme`colors.neutral.700`,
cursor: 'pointer',
},
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
placeholder: (base: CSSObject, props: PlaceholderProps<T, any, any>): CSSObject => {
return {
...base,
color: theme`colors.neutral.300`,
fontSize: '0.875rem',
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
singleValue: (base: CSSObject, props: SingleValueProps<T, any>): CSSObject => {
return {
...base,
color: '#00000',
};
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
valueContainer: (base: CSSObject, props: ValueContainerProps<T, any>): CSSObject => {
return {
...base,
};
},
};
export interface Option {
value: string;
label: string;
}
interface Props {
id?: string;
name: string;
label?: string;
description?: string;
validate?: (value: any) => undefined | string | Promise<any>;
options: Array<Option>;
isMulti?: boolean;
isSearchable?: boolean;
isCreatable?: boolean;
isValidNewOption?: ((
inputValue: string,
value: ValueType<any, boolean>,
options: ReadonlyArray<any>,
) => boolean) | undefined;
className?: string;
}
const SelectField = forwardRef<HTMLElement, Props>(({ id, name, label, description, validate, className, isMulti, isCreatable, ...props }, ref) => {
const { options } = props;
const onChange = (options: Option | Option[], name: string, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void) => {
if (isMulti) {
setFieldValue(name, (options as Option[]).map(o => o.value));
return;
}
setFieldValue(name, (options as Option).value);
};
return (
<FormikField innerRef={ref} name={name} validate={validate}>
{
({ field, form: { errors, touched, setFieldValue } }: FieldProps) => (
<div className={className}>
{label &&
<Label htmlFor={id}>{label}</Label>
}
{isCreatable ?
<Creatable
{...field}
{...props}
styles={SelectStyle}
options={options}
value={(options ? options.find(o => o.value === field.value) : '') as any}
onChange={o => onChange(o, name, setFieldValue)}
isMulti={isMulti}
/>
:
<Select
{...field}
{...props}
styles={SelectStyle}
options={options}
value={(options ? options.find(o => o.value === field.value) : '') as any}
onChange={o => onChange(o, name, setFieldValue)}
isMulti={isMulti}
/>
}
{touched[field.name] && errors[field.name] ?
<p css={tw`text-red-200 text-xs mt-1`}>
{(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
</p>
:
description ? <p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p> : null
}
</div>
)
}
</FormikField>
);
});
SelectField.displayName = 'SelectField';
export default SelectField;