mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: onboarding ui flow (#464)

Browse Source 
* feat: onboarding ui flow

* fix: route naming and auth

* fix: clean unused imports

* fix: remove react.fc

* fix: infra dev remove package.json

* fix: remove usefull memoization

* fix: button stories

* fix: use type instead of interface

* fix: remove debug
This commit is contained in:
Jérémy M
2023-06-30 08:26:06 +02:00
committed by GitHub
parent 3731380ce6
commit 433962321a
45 changed files with 1461 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
front/src/modules/ui/components/inputs/TextInput.tsx
View File

@ -5,32 +5,48 @@ type OwnProps = Omit<
React.InputHTMLAttributes<HTMLInputElement>,
'onChange'
> & {
label?: string;
onChange?: (text: string) => void;
fullWidth?: boolean;
};
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
`;
const StyledLabel = styled.span`
color: ${({ theme }) => theme.font.color.light};
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
margin-bottom: ${({ theme }) => theme.spacing(1)};
text-transform: uppercase;
`;
const StyledInput = styled.input<{ fullWidth: boolean }>`
background-color: ${({ theme }) => theme.background.transparent.lighter};
border: 1px solid ${({ theme }) => theme.border.color.light};
background-color: ${({ theme }) => theme.background.tertiary};
border: none;
border-radius: 4px;
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) =>
theme.spacing(3)};
color: ${({ theme }) => theme.font.color.primary};
font-family: ${({ theme }) => theme.font.family};
font-weight: ${({ theme }) => theme.font.weight.regular};
outline: none;
padding: ${({ theme }) => theme.spacing(2)};
width: ${({ fullWidth, theme }) =>
fullWidth ? `calc(100% - ${theme.spacing(6)})` : 'auto'};
fullWidth ? `calc(100% - ${theme.spacing(4)})` : 'auto'};
&::placeholder,
&::-webkit-input-placeholder {
color: ${({ theme }) => theme.font.color.light}
font-family: ${({ theme }) => theme.font.family};;
color: ${({ theme }) => theme.font.color.light};
font-family: ${({ theme }) => theme.font.family};
font-weight: ${({ theme }) => theme.font.weight.medium};
}
margin-bottom: ${({ theme }) => theme.spacing(3)};
`;
export function TextInput({
label,
value,
onChange,
fullWidth,
@ -39,16 +55,19 @@ export function TextInput({
const [internalValue, setInternalValue] = useState(value);
return (
<StyledInput
fullWidth={fullWidth ?? false}
value={internalValue}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
setInternalValue(event.target.value);
if (onChange) {
onChange(event.target.value);
}
}}
{...props}
/>
<StyledContainer>
{label && <StyledLabel>{label}</StyledLabel>}
<StyledInput
fullWidth={fullWidth ?? false}
value={internalValue}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
setInternalValue(event.target.value);
if (onChange) {
onChange(event.target.value);
}
}}
{...props}
/>
</StyledContainer>
);
}