chore: UI remove tailwind from input component (#241)
* refactor: refactor styles repository selection * refactor: remove tailwind from input component * chore: change input group component * chore: review changes on input component
This commit is contained in:
Camila Sosa Morales
GitHub
parent
d838f1a449
commit
fd4b7c953c
|
|
@ -1,9 +1,6 @@
|
|||
import { styled } from '@/theme';
|
||||
|
||||
import { Icon } from '../icon';
|
||||
|
||||
const styles = {
|
||||
all: 'unset',
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
borderStyle: 'solid',
|
||||
|
|
@ -32,7 +29,9 @@ const styles = {
|
|||
color: '$slate8',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const variants = {
|
||||
variants: {
|
||||
size: {
|
||||
sm: {
|
||||
|
|
@ -59,13 +58,49 @@ const styles = {
|
|||
},
|
||||
};
|
||||
|
||||
export const InputStyled = styled('input', styles);
|
||||
|
||||
export const InputIconStyled = styled(Icon, {
|
||||
position: 'absolute',
|
||||
left: '$4',
|
||||
top: '0.9375rem',
|
||||
color: 'slate8',
|
||||
export const InputStyled = styled('input', {
|
||||
all: 'unset',
|
||||
...variants,
|
||||
...styles,
|
||||
});
|
||||
|
||||
export const TextareaStyled = styled('textarea', styles);
|
||||
export const InputGroupStyled = styled('div', {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '$2h',
|
||||
|
||||
...styles,
|
||||
|
||||
variants: {
|
||||
size: {
|
||||
sm: {
|
||||
borderRadius: '$md',
|
||||
fontSize: '$xs',
|
||||
lineHeight: '$4',
|
||||
},
|
||||
md: {
|
||||
borderRadius: '$lg',
|
||||
fontSize: '$sm',
|
||||
height: '$11',
|
||||
px: '$3h',
|
||||
},
|
||||
lg: {
|
||||
borderRadius: '$xl',
|
||||
fontSize: '$md',
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: 'md',
|
||||
},
|
||||
});
|
||||
|
||||
export const InputGroupTextSyled = styled('input', {
|
||||
all: 'unset',
|
||||
});
|
||||
|
||||
export const TextareaStyled = styled('textarea', {
|
||||
all: 'unset',
|
||||
...variants,
|
||||
...styles,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,37 +1,17 @@
|
|||
import React from 'react';
|
||||
|
||||
import { forwardStyledRef } from '@/theme';
|
||||
|
||||
import { IconName } from '../icon';
|
||||
import { InputIconStyled, InputStyled, TextareaStyled } from './input.styles';
|
||||
import {
|
||||
InputGroupStyled,
|
||||
InputGroupTextSyled,
|
||||
InputStyled,
|
||||
TextareaStyled,
|
||||
} from './input.styles';
|
||||
import { StyledInputFile } from './input-file';
|
||||
|
||||
export const Textarea = TextareaStyled;
|
||||
|
||||
export const LogoFileInput = StyledInputFile;
|
||||
|
||||
type InputProps = {
|
||||
leftIcon?: IconName;
|
||||
wrapperClassName?: string; //tailwind css
|
||||
} & React.ComponentPropsWithRef<typeof InputStyled>;
|
||||
export const Input = InputStyled;
|
||||
|
||||
export const Input = forwardStyledRef<HTMLInputElement, InputProps>(
|
||||
(props, ref) => {
|
||||
const { leftIcon, wrapperClassName: css = '', ...ownProps } = props;
|
||||
export const InputGroup = InputGroupStyled;
|
||||
|
||||
return (
|
||||
<div className={`relative ${css}`}>
|
||||
{leftIcon && (
|
||||
<InputIconStyled name={leftIcon} css={{ fontSize: '$lg' }} />
|
||||
)}
|
||||
<InputStyled
|
||||
{...props}
|
||||
ref={ref}
|
||||
css={{ ...(leftIcon && { pl: '$10' }), ...(ownProps.css || {}) }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Input.displayName = 'Input';
|
||||
export const InputGroupText = InputGroupTextSyled;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
import { useState } from 'react';
|
||||
|
||||
import { Dropdown, DropdownItem, Input } from '@/components';
|
||||
import {
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
InputGroup,
|
||||
InputGroupText,
|
||||
} from '@/components';
|
||||
import { useDebounce } from '@/hooks';
|
||||
|
||||
import { Explore } from '../explore.context';
|
||||
|
|
@ -69,12 +74,11 @@ export const NFASearchFragment: React.FC = () => {
|
|||
</S.Data.Wrapper>
|
||||
|
||||
<S.Input.Wrapper>
|
||||
<Input
|
||||
placeholder="Search"
|
||||
leftIcon="search"
|
||||
onChange={handleSearchChange}
|
||||
wrapperClassName="flex-1"
|
||||
/>
|
||||
<InputGroup css={{ flex: 1 }}>
|
||||
<S.Input.Icon name="search" />
|
||||
<InputGroupText placeholder="Search" onChange={handleSearchChange} />
|
||||
</InputGroup>
|
||||
|
||||
<Dropdown
|
||||
items={orderResults}
|
||||
selectedValue={selectedValue}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Flex } from '@/components';
|
||||
import { Flex, Icon, Input } from '@/components';
|
||||
import { styled } from '@/theme';
|
||||
|
||||
export const NFASearchFragmentStyles = {
|
||||
|
|
@ -36,5 +36,8 @@ export const NFASearchFragmentStyles = {
|
|||
minWidth: '$28',
|
||||
},
|
||||
}),
|
||||
Icon: styled(Icon, {
|
||||
fontSize: '$lg',
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
import { Card, Flex, Icon } from '@/components';
|
||||
import { styled } from '@/theme';
|
||||
|
||||
export const GithubRepositorySelectionStyles = {
|
||||
Card: {
|
||||
Wrapper: styled(Card.Container, {
|
||||
maxWidth: '$107h',
|
||||
maxHeight: '$95h',
|
||||
pr: '$3h',
|
||||
}),
|
||||
Body: styled(Card.Body, {
|
||||
pt: '$4',
|
||||
}),
|
||||
},
|
||||
Container: styled(Flex, {
|
||||
flexDirection: 'column',
|
||||
gap: '$2',
|
||||
}),
|
||||
Row: styled(Flex, {
|
||||
gap: '$4',
|
||||
pr: '$3h',
|
||||
position: 'relative',
|
||||
}),
|
||||
Group: {
|
||||
Icon: styled(Icon, {
|
||||
fontSize: '$lg',
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
|
@ -1,11 +1,19 @@
|
|||
import React, { useState } from 'react';
|
||||
|
||||
import { Card, Flex, Grid, Icon, IconButton, Spinner } from '@/components';
|
||||
import { Input } from '@/components/core/input';
|
||||
import {
|
||||
Card,
|
||||
Flex,
|
||||
Icon,
|
||||
IconButton,
|
||||
InputGroup,
|
||||
InputGroupText,
|
||||
Spinner,
|
||||
} from '@/components';
|
||||
import { useDebounce } from '@/hooks/use-debounce';
|
||||
import { useGithubStore } from '@/store';
|
||||
import { Mint } from '@/views/mint/mint.context';
|
||||
|
||||
import { GithubRepositorySelectionStyles as S } from './github-repository-selection.styles';
|
||||
import { RepositoriesList } from './repositories-list';
|
||||
import { UserOrgsCombobox } from './users-orgs-combobox';
|
||||
|
||||
|
|
@ -46,7 +54,7 @@ export const GithubRepositoryConnection: React.FC = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Card.Container css={{ maxWidth: '$107h', maxHeight: '$95h', pr: '$3h' }}>
|
||||
<S.Card.Wrapper>
|
||||
<Card.Heading
|
||||
title="Select Repository"
|
||||
css={{ pr: '$3h' }}
|
||||
|
|
@ -69,25 +77,26 @@ export const GithubRepositoryConnection: React.FC = () => {
|
|||
/>
|
||||
}
|
||||
/>
|
||||
<Card.Body css={{ pt: '$4' }}>
|
||||
<Grid css={{ rowGap: '$2' }}>
|
||||
<Flex css={{ gap: '$4', pr: '$3h', position: 'relative' }}>
|
||||
<S.Card.Body>
|
||||
<S.Container>
|
||||
<S.Row>
|
||||
<UserOrgsCombobox />
|
||||
<Input
|
||||
leftIcon="search"
|
||||
placeholder="Search repo"
|
||||
onChange={handleSearchChange}
|
||||
wrapperClassName="flex-1"
|
||||
/>
|
||||
</Flex>
|
||||
<InputGroup css={{ flex: 1 }}>
|
||||
<S.Group.Icon name="search" />
|
||||
<InputGroupText
|
||||
placeholder="Search repo"
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
</InputGroup>
|
||||
</S.Row>
|
||||
{queryLoading === 'loading' ||
|
||||
queryUserAndOrganizations === 'loading' ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<RepositoriesList searchValue={searchValue} />
|
||||
)}
|
||||
</Grid>
|
||||
</Card.Body>
|
||||
</Card.Container>
|
||||
</S.Container>
|
||||
</S.Card.Body>
|
||||
</S.Card.Wrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue