Clean and re-organize post table refactoring (#1000)
* Clean and re-organize post table refactoring * Fix tests
This commit is contained in:
Charles Bochet
@ -1,142 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { HotkeysEvent } from 'react-hotkeys-hook/dist/types';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { RoundedIconButton } from '@/ui/button/components/RoundedIconButton';
|
||||
import { IconArrowRight } from '@/ui/icon/index';
|
||||
|
||||
const MAX_ROWS = 5;
|
||||
|
||||
type OwnProps = {
|
||||
onValidate?: (text: string) => void;
|
||||
minRows?: number;
|
||||
placeholder?: string;
|
||||
};
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledTextArea = styled(TextareaAutosize)`
|
||||
background: ${({ theme }) => theme.background.tertiary};
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
font-family: inherit;
|
||||
font-size: ${({ theme }) => theme.font.size.md};
|
||||
font-weight: ${({ theme }) => theme.font.weight.regular};
|
||||
line-height: 16px;
|
||||
overflow: auto;
|
||||
padding: 8px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
font-weight: ${({ theme }) => theme.font.weight.regular};
|
||||
}
|
||||
`;
|
||||
|
||||
// TODO: this messes with the layout, fix it
|
||||
const StyledBottomRightRoundedIconButton = styled.div`
|
||||
height: 0;
|
||||
position: relative;
|
||||
right: 26px;
|
||||
top: calc(100% - 26.5px);
|
||||
width: 0px;
|
||||
`;
|
||||
|
||||
export function AutosizeTextInput({
|
||||
placeholder,
|
||||
onValidate,
|
||||
minRows = 1,
|
||||
}: OwnProps) {
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
const [text, setText] = useState('');
|
||||
|
||||
const isSendButtonDisabled = !text;
|
||||
|
||||
useHotkeys(
|
||||
['shift+enter', 'enter'],
|
||||
(event: KeyboardEvent, handler: HotkeysEvent) => {
|
||||
if (handler.shift || !isFocused) {
|
||||
return;
|
||||
} else {
|
||||
event.preventDefault();
|
||||
|
||||
onValidate?.(text);
|
||||
|
||||
setText('');
|
||||
}
|
||||
},
|
||||
{
|
||||
enableOnContentEditable: true,
|
||||
enableOnFormTags: true,
|
||||
},
|
||||
[onValidate, text, setText, isFocused],
|
||||
);
|
||||
|
||||
useHotkeys(
|
||||
'esc',
|
||||
(event: KeyboardEvent) => {
|
||||
if (!isFocused) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
setText('');
|
||||
},
|
||||
{
|
||||
enableOnContentEditable: true,
|
||||
enableOnFormTags: true,
|
||||
},
|
||||
[onValidate, setText, isFocused],
|
||||
);
|
||||
|
||||
function handleInputChange(event: React.FormEvent<HTMLTextAreaElement>) {
|
||||
const newText = event.currentTarget.value;
|
||||
|
||||
setText(newText);
|
||||
}
|
||||
|
||||
function handleOnClickSendButton() {
|
||||
onValidate?.(text);
|
||||
|
||||
setText('');
|
||||
}
|
||||
|
||||
const computedMinRows = minRows > MAX_ROWS ? MAX_ROWS : minRows;
|
||||
|
||||
return (
|
||||
<>
|
||||
<StyledContainer>
|
||||
<StyledTextArea
|
||||
placeholder={placeholder || 'Write a comment'}
|
||||
maxRows={MAX_ROWS}
|
||||
minRows={computedMinRows}
|
||||
onChange={handleInputChange}
|
||||
value={text}
|
||||
onFocus={() => setIsFocused(true)}
|
||||
onBlur={() => setIsFocused(false)}
|
||||
/>
|
||||
<StyledBottomRightRoundedIconButton>
|
||||
<RoundedIconButton
|
||||
onClick={handleOnClickSendButton}
|
||||
icon={<IconArrowRight size={15} />}
|
||||
disabled={isSendButtonDisabled}
|
||||
/>
|
||||
</StyledBottomRightRoundedIconButton>
|
||||
</StyledContainer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,146 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconCheck, IconMinus } from '@/ui/icon';
|
||||
|
||||
export enum CheckboxVariant {
|
||||
Primary = 'primary',
|
||||
Secondary = 'secondary',
|
||||
}
|
||||
|
||||
export enum CheckboxShape {
|
||||
Squared = 'squared',
|
||||
Rounded = 'rounded',
|
||||
}
|
||||
|
||||
export enum CheckboxSize {
|
||||
Large = 'large',
|
||||
Small = 'small',
|
||||
}
|
||||
|
||||
type OwnProps = {
|
||||
checked: boolean;
|
||||
indeterminate?: boolean;
|
||||
onChange?: (value: boolean) => void;
|
||||
variant?: CheckboxVariant;
|
||||
size?: CheckboxSize;
|
||||
shape?: CheckboxShape;
|
||||
};
|
||||
|
||||
const StyledInputContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const StyledInput = styled.input<{
|
||||
checkboxSize: CheckboxSize;
|
||||
variant: CheckboxVariant;
|
||||
indeterminate?: boolean;
|
||||
shape?: CheckboxShape;
|
||||
}>`
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
|
||||
& + label {
|
||||
--size: ${({ checkboxSize }) =>
|
||||
checkboxSize === CheckboxSize.Large ? '18px' : '12px'};
|
||||
cursor: pointer;
|
||||
height: calc(var(--size) + 2px);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: calc(var(--size) + 2px);
|
||||
}
|
||||
|
||||
& + label:before {
|
||||
--size: ${({ checkboxSize }) =>
|
||||
checkboxSize === CheckboxSize.Large ? '18px' : '12px'};
|
||||
background: ${({ theme, indeterminate }) =>
|
||||
indeterminate ? theme.color.blue : 'transparent'};
|
||||
border-color: ${({ theme, indeterminate, variant }) =>
|
||||
indeterminate
|
||||
? theme.color.blue
|
||||
: variant === CheckboxVariant.Primary
|
||||
? theme.border.color.inverted
|
||||
: theme.border.color.secondaryInverted};
|
||||
border-radius: ${({ theme, shape }) =>
|
||||
shape === CheckboxShape.Rounded
|
||||
? theme.border.radius.rounded
|
||||
: theme.border.radius.sm};
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
content: '';
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
}
|
||||
|
||||
&:checked + label:before {
|
||||
background: ${({ theme }) => theme.color.blue};
|
||||
border-color: ${({ theme }) => theme.color.blue};
|
||||
}
|
||||
|
||||
& + label > svg {
|
||||
--padding: ${({ checkboxSize }) =>
|
||||
checkboxSize === CheckboxSize.Large ? '2px' : '1px'};
|
||||
--size: ${({ checkboxSize }) =>
|
||||
checkboxSize === CheckboxSize.Large ? '16px' : '12px'};
|
||||
height: var(--size);
|
||||
left: var(--padding);
|
||||
position: absolute;
|
||||
stroke: ${({ theme }) => theme.grayScale.gray0};
|
||||
top: var(--padding);
|
||||
width: var(--size);
|
||||
}
|
||||
`;
|
||||
|
||||
export function Checkbox({
|
||||
checked,
|
||||
onChange,
|
||||
indeterminate,
|
||||
variant = CheckboxVariant.Primary,
|
||||
size = CheckboxSize.Small,
|
||||
shape = CheckboxShape.Squared,
|
||||
}: OwnProps) {
|
||||
const [isInternalChecked, setIsInternalChecked] =
|
||||
React.useState<boolean>(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
setIsInternalChecked(checked);
|
||||
}, [checked]);
|
||||
|
||||
function handleChange(value: boolean) {
|
||||
onChange?.(value);
|
||||
setIsInternalChecked(!isInternalChecked);
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledInputContainer>
|
||||
<StyledInput
|
||||
autoComplete="off"
|
||||
type="checkbox"
|
||||
name="styled-checkbox"
|
||||
data-testid="input-checkbox"
|
||||
checked={isInternalChecked}
|
||||
indeterminate={indeterminate}
|
||||
variant={variant}
|
||||
checkboxSize={size}
|
||||
shape={shape}
|
||||
onChange={(event) => handleChange(event.target.checked)}
|
||||
/>
|
||||
<label htmlFor="checkbox">
|
||||
{indeterminate ? (
|
||||
<IconMinus />
|
||||
) : isInternalChecked ? (
|
||||
<IconCheck />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</label>
|
||||
</StyledInputContainer>
|
||||
);
|
||||
}
|
||||
@ -1,268 +0,0 @@
|
||||
import React, { forwardRef, ReactElement, useState } from 'react';
|
||||
import ReactDatePicker, { CalendarContainerProps } from 'react-datepicker';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { overlayBackground } from '@/ui/themes/effects';
|
||||
|
||||
import 'react-datepicker/dist/react-datepicker.css';
|
||||
|
||||
export type DatePickerProps = {
|
||||
date: Date;
|
||||
onChangeHandler: (date: Date) => void;
|
||||
customInput?: ReactElement;
|
||||
customCalendarContainer?(props: CalendarContainerProps): React.ReactNode;
|
||||
};
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
& .react-datepicker {
|
||||
border-color: ${({ theme }) => theme.border.color.light};
|
||||
background: transparent;
|
||||
font-family: 'Inter';
|
||||
font-size: ${({ theme }) => theme.font.size.md};
|
||||
border: none;
|
||||
display: block;
|
||||
font-weight: ${({ theme }) => theme.font.weight.regular};
|
||||
}
|
||||
|
||||
& .react-datepicker-popper {
|
||||
position: relative !important;
|
||||
inset: auto !important;
|
||||
transform: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
& .react-datepicker__triangle::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .react-datepicker__triangle::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Header
|
||||
|
||||
& .react-datepicker__header {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
& .react-datepicker__header__dropdown {
|
||||
display: flex;
|
||||
margin-left: ${({ theme }) => theme.spacing(1)};
|
||||
margin-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
}
|
||||
|
||||
& .react-datepicker__month-dropdown-container,
|
||||
& .react-datepicker__year-dropdown-container {
|
||||
text-align: left;
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
margin-left: ${({ theme }) => theme.spacing(1)};
|
||||
margin-right: 0;
|
||||
padding: ${({ theme }) => theme.spacing(2)};
|
||||
padding-right: ${({ theme }) => theme.spacing(4)};
|
||||
background-color: ${({ theme }) => theme.background.tertiary};
|
||||
}
|
||||
|
||||
& .react-datepicker__month-read-view--down-arrow,
|
||||
& .react-datepicker__year-read-view--down-arrow {
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border-width: 1px 1px 0 0;
|
||||
border-color: ${({ theme }) => theme.border.color.light};
|
||||
top: 3px;
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
& .react-datepicker__year-read-view,
|
||||
& .react-datepicker__month-read-view {
|
||||
padding-right: ${({ theme }) => theme.spacing(2)};
|
||||
}
|
||||
|
||||
& .react-datepicker__month-dropdown-container {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
& .react-datepicker__year-dropdown-container {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
& .react-datepicker__month-dropdown,
|
||||
& .react-datepicker__year-dropdown {
|
||||
border: ${({ theme }) => theme.border.color.light};
|
||||
${overlayBackground}
|
||||
overflow-y: scroll;
|
||||
top: ${({ theme }) => theme.spacing(2)};
|
||||
}
|
||||
& .react-datepicker__month-dropdown {
|
||||
left: ${({ theme }) => theme.spacing(2)};
|
||||
width: 160px;
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
& .react-datepicker__year-dropdown {
|
||||
left: calc(${({ theme }) => theme.spacing(9)} + 80px);
|
||||
width: 100px;
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
& .react-datepicker__navigation--years {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .react-datepicker__month-option--selected,
|
||||
& .react-datepicker__year-option--selected {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .react-datepicker__year-option,
|
||||
& .react-datepicker__month-option {
|
||||
text-align: left;
|
||||
padding: ${({ theme }) => theme.spacing(2)}
|
||||
calc(${({ theme }) => theme.spacing(2)} - 2px);
|
||||
width: calc(100% - ${({ theme }) => theme.spacing(4)});
|
||||
border-radius: ${({ theme }) => theme.border.radius.xs};
|
||||
color: ${({ theme }) => theme.font.color.secondary};
|
||||
cursor: pointer;
|
||||
margin: 2px;
|
||||
|
||||
&:hover {
|
||||
background: ${({ theme }) => theme.background.transparent.light};
|
||||
}
|
||||
}
|
||||
|
||||
& .react-datepicker__year-option {
|
||||
&:first-of-type,
|
||||
&:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .react-datepicker__current-month {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .react-datepicker__day-name {
|
||||
color: ${({ theme }) => theme.font.color.secondary};
|
||||
width: 34px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
& .react-datepicker__month-container {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Days
|
||||
|
||||
& .react-datepicker__month {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& .react-datepicker__day {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
& .react-datepicker__navigation--previous,
|
||||
& .react-datepicker__navigation--next {
|
||||
height: 34px;
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
padding-top: 6px;
|
||||
&:hover {
|
||||
background: ${({ theme }) => theme.background.transparent.light};
|
||||
}
|
||||
}
|
||||
& .react-datepicker__navigation--previous {
|
||||
right: 38px;
|
||||
top: 8px;
|
||||
left: auto;
|
||||
|
||||
& > span {
|
||||
margin-left: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
& .react-datepicker__navigation--next {
|
||||
right: 6px;
|
||||
top: 8px;
|
||||
|
||||
& > span {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
& .react-datepicker__navigation-icon::before {
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
border-width: 1px 1px 0 0;
|
||||
border-color: ${({ theme }) => theme.font.color.tertiary};
|
||||
}
|
||||
|
||||
& .react-datepicker__day--keyboard-selected {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
& .react-datepicker__day,
|
||||
.react-datepicker__time-name {
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
}
|
||||
|
||||
& .react-datepicker__day--selected {
|
||||
background-color: ${({ theme }) => theme.color.blue};
|
||||
color: ${({ theme }) => theme.font.color.inverted};
|
||||
}
|
||||
|
||||
& .react-datepicker__day--outside-month {
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
}
|
||||
|
||||
& .react-datepicker__day:hover {
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
}
|
||||
`;
|
||||
|
||||
function DatePicker({
|
||||
date,
|
||||
onChangeHandler,
|
||||
customInput,
|
||||
customCalendarContainer,
|
||||
}: DatePickerProps) {
|
||||
const [startDate, setStartDate] = useState(date);
|
||||
|
||||
type DivProps = React.HTMLProps<HTMLDivElement>;
|
||||
|
||||
const DefaultDateDisplay = forwardRef<HTMLDivElement, DivProps>(
|
||||
({ value, onClick }, ref) => (
|
||||
<div onClick={onClick} ref={ref}>
|
||||
{value &&
|
||||
new Intl.DateTimeFormat(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
}).format(new Date(value as string))}
|
||||
</div>
|
||||
),
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<ReactDatePicker
|
||||
open={true}
|
||||
selected={startDate}
|
||||
showMonthDropdown
|
||||
showYearDropdown
|
||||
onChange={(date: Date) => {
|
||||
setStartDate(date);
|
||||
onChangeHandler(date);
|
||||
}}
|
||||
customInput={customInput ? customInput : <DefaultDateDisplay />}
|
||||
calendarContainer={
|
||||
customCalendarContainer ? customCalendarContainer : undefined
|
||||
}
|
||||
/>
|
||||
</StyledContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default DatePicker;
|
||||
@ -1,146 +0,0 @@
|
||||
import React from 'react';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Button, ButtonVariant } from '@/ui/button/components/Button';
|
||||
import { IconFileUpload, IconTrash, IconUpload } from '@/ui/icon';
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
`;
|
||||
|
||||
const Picture = styled.button<{ withPicture: boolean }>`
|
||||
align-items: center;
|
||||
background: ${({ theme, disabled }) =>
|
||||
disabled ? theme.background.secondary : theme.background.tertiary};
|
||||
border: none;
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
||||
display: flex;
|
||||
height: 66px;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
transition: background 0.1s ease;
|
||||
|
||||
width: 66px;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
${({ theme, withPicture, disabled }) => {
|
||||
if (withPicture || disabled) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return `
|
||||
&:hover {
|
||||
background: ${theme.background.quaternary};
|
||||
}
|
||||
`;
|
||||
}};
|
||||
`;
|
||||
|
||||
const Content = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-left: ${({ theme }) => theme.spacing(4)};
|
||||
`;
|
||||
|
||||
const ButtonContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
> * + * {
|
||||
margin-left: ${({ theme }) => theme.spacing(2)};
|
||||
}
|
||||
`;
|
||||
|
||||
const Text = styled.span`
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
font-size: ${({ theme }) => theme.font.size.xs};
|
||||
`;
|
||||
|
||||
const StyledHiddenFileInput = styled.input`
|
||||
display: none;
|
||||
`;
|
||||
|
||||
type Props = Omit<React.ComponentProps<'div'>, 'children'> & {
|
||||
picture: string | null | undefined;
|
||||
onUpload?: (file: File) => void;
|
||||
onRemove?: () => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export function ImageInput({
|
||||
picture,
|
||||
onUpload,
|
||||
onRemove,
|
||||
disabled = false,
|
||||
...restProps
|
||||
}: Props) {
|
||||
const theme = useTheme();
|
||||
const hiddenFileInput = React.useRef<HTMLInputElement>(null);
|
||||
const onUploadButtonClick = () => {
|
||||
hiddenFileInput.current?.click();
|
||||
};
|
||||
|
||||
return (
|
||||
<Container {...restProps}>
|
||||
<Picture
|
||||
withPicture={!!picture}
|
||||
disabled={disabled}
|
||||
onClick={onUploadButtonClick}
|
||||
>
|
||||
{picture ? (
|
||||
<img
|
||||
src={picture || '/images/default-profile-picture.png'}
|
||||
alt="profile"
|
||||
/>
|
||||
) : (
|
||||
<IconFileUpload size={theme.icon.size.md} />
|
||||
)}
|
||||
</Picture>
|
||||
<Content>
|
||||
<ButtonContainer>
|
||||
<StyledHiddenFileInput
|
||||
type="file"
|
||||
ref={hiddenFileInput}
|
||||
onChange={(event) => {
|
||||
if (onUpload) {
|
||||
if (event.target.files) {
|
||||
onUpload(event.target.files[0]);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
icon={<IconUpload size={theme.icon.size.sm} />}
|
||||
onClick={onUploadButtonClick}
|
||||
variant={ButtonVariant.Secondary}
|
||||
title="Upload"
|
||||
disabled={disabled}
|
||||
fullWidth
|
||||
/>
|
||||
<Button
|
||||
icon={<IconTrash size={theme.icon.size.sm} />}
|
||||
onClick={onRemove}
|
||||
variant={ButtonVariant.Secondary}
|
||||
title="Remove"
|
||||
disabled={!picture || disabled}
|
||||
fullWidth
|
||||
/>
|
||||
</ButtonContainer>
|
||||
<Text>
|
||||
We support your best PNGs, JPEGs and GIFs portraits under 10MB
|
||||
</Text>
|
||||
</Content>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@ -1,191 +0,0 @@
|
||||
import {
|
||||
ChangeEvent,
|
||||
FocusEventHandler,
|
||||
InputHTMLAttributes,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { Key } from 'ts-key-enum';
|
||||
|
||||
import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope';
|
||||
import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
|
||||
import { IconAlertCircle } from '@/ui/icon';
|
||||
import { IconEye, IconEyeOff } from '@/ui/icon/index';
|
||||
|
||||
import { InputHotkeyScope } from '../types/InputHotkeyScope';
|
||||
|
||||
type OwnProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
|
||||
label?: string;
|
||||
onChange?: (text: string) => void;
|
||||
fullWidth?: boolean;
|
||||
disableHotkeys?: boolean;
|
||||
error?: string;
|
||||
};
|
||||
|
||||
const StyledContainer = styled.div<Pick<OwnProps, 'fullWidth'>>`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: ${({ fullWidth }) => (fullWidth ? `100%` : 'auto')};
|
||||
`;
|
||||
|
||||
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 StyledInputContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledInput = styled.input<Pick<OwnProps, 'fullWidth'>>`
|
||||
background-color: ${({ theme }) => theme.background.tertiary};
|
||||
border: none;
|
||||
border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
font-family: ${({ theme }) => theme.font.family};
|
||||
|
||||
font-weight: ${({ theme }) => theme.font.weight.regular};
|
||||
outline: none;
|
||||
padding: ${({ theme }) => theme.spacing(2)};
|
||||
|
||||
width: 100%;
|
||||
|
||||
&::placeholder,
|
||||
&::-webkit-input-placeholder {
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
font-family: ${({ theme }) => theme.font.family};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledErrorHelper = styled.div`
|
||||
color: ${({ theme }) => theme.color.red};
|
||||
font-size: ${({ theme }) => theme.font.size.xs};
|
||||
padding: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const StyledTrailingIconContainer = styled.div`
|
||||
align-items: center;
|
||||
background-color: ${({ theme }) => theme.background.tertiary};
|
||||
border-bottom-right-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
border-top-right-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-right: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const StyledTrailingIcon = styled.div`
|
||||
align-items: center;
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const INPUT_TYPE_PASSWORD = 'password';
|
||||
|
||||
export function TextInput({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
onFocus,
|
||||
onBlur,
|
||||
fullWidth,
|
||||
error,
|
||||
required,
|
||||
type,
|
||||
disableHotkeys = false,
|
||||
...props
|
||||
}: OwnProps): JSX.Element {
|
||||
const theme = useTheme();
|
||||
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const {
|
||||
goBackToPreviousHotkeyScope,
|
||||
setHotkeyScopeAndMemorizePreviousScope,
|
||||
} = usePreviousHotkeyScope();
|
||||
|
||||
const handleFocus: FocusEventHandler<HTMLInputElement> = (e) => {
|
||||
onFocus?.(e);
|
||||
if (!disableHotkeys) {
|
||||
setHotkeyScopeAndMemorizePreviousScope(InputHotkeyScope.TextInput);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
|
||||
onBlur?.(e);
|
||||
if (!disableHotkeys) {
|
||||
goBackToPreviousHotkeyScope();
|
||||
}
|
||||
};
|
||||
|
||||
useScopedHotkeys(
|
||||
[Key.Escape, Key.Enter],
|
||||
() => {
|
||||
inputRef.current?.blur();
|
||||
},
|
||||
InputHotkeyScope.TextInput,
|
||||
);
|
||||
|
||||
const [passwordVisible, setPasswordVisible] = useState(false);
|
||||
|
||||
const handleTogglePasswordVisibility = () => {
|
||||
setPasswordVisible(!passwordVisible);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledContainer fullWidth={fullWidth ?? false}>
|
||||
{label && <StyledLabel>{label + (required ? '*' : '')}</StyledLabel>}
|
||||
<StyledInputContainer>
|
||||
<StyledInput
|
||||
autoComplete="off"
|
||||
ref={inputRef}
|
||||
tabIndex={props.tabIndex ?? 0}
|
||||
onFocus={handleFocus}
|
||||
onBlur={handleBlur}
|
||||
value={value}
|
||||
required={required}
|
||||
type={passwordVisible ? 'text' : type}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
if (onChange) {
|
||||
onChange(event.target.value);
|
||||
}
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
<StyledTrailingIconContainer>
|
||||
{error && (
|
||||
<StyledTrailingIcon>
|
||||
<IconAlertCircle size={16} color={theme.color.red} />
|
||||
</StyledTrailingIcon>
|
||||
)}
|
||||
{!error && type === INPUT_TYPE_PASSWORD && (
|
||||
<StyledTrailingIcon
|
||||
onClick={handleTogglePasswordVisibility}
|
||||
data-testid="reveal-password-button"
|
||||
>
|
||||
{passwordVisible ? (
|
||||
<IconEyeOff size={theme.icon.size.md} />
|
||||
) : (
|
||||
<IconEye size={theme.icon.size.md} />
|
||||
)}
|
||||
</StyledTrailingIcon>
|
||||
)}
|
||||
</StyledTrailingIconContainer>
|
||||
</StyledInputContainer>
|
||||
{error && <StyledErrorHelper>{error}</StyledErrorHelper>}
|
||||
</StyledContainer>
|
||||
);
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import { AutosizeTextInput } from '../AutosizeTextInput';
|
||||
|
||||
const meta: Meta<typeof AutosizeTextInput> = {
|
||||
title: 'UI/Input/AutosizeTextInput',
|
||||
component: AutosizeTextInput,
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof AutosizeTextInput>;
|
||||
|
||||
export const Default: Story = {};
|
||||
@ -1,76 +0,0 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import {
|
||||
Checkbox,
|
||||
CheckboxShape,
|
||||
CheckboxSize,
|
||||
CheckboxVariant,
|
||||
} from '../Checkbox';
|
||||
|
||||
const meta: Meta<typeof Checkbox> = {
|
||||
title: 'UI/Input/Checkbox',
|
||||
component: Checkbox,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Checkbox>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
checked: false,
|
||||
indeterminate: false,
|
||||
variant: CheckboxVariant.Primary,
|
||||
size: CheckboxSize.Small,
|
||||
shape: CheckboxShape.Squared,
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: Story = {
|
||||
args: {},
|
||||
argTypes: {
|
||||
variant: { control: false },
|
||||
size: { control: false },
|
||||
indeterminate: { control: false },
|
||||
checked: { control: false },
|
||||
shape: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'state',
|
||||
values: ['unchecked', 'checked', 'indeterminate'],
|
||||
props: (state: string) => {
|
||||
if (state === 'checked') {
|
||||
return { checked: true };
|
||||
}
|
||||
|
||||
if (state === 'indeterminate') {
|
||||
return { indeterminate: true };
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'shape',
|
||||
values: Object.values(CheckboxShape),
|
||||
props: (shape: CheckboxShape) => ({ shape }),
|
||||
},
|
||||
{
|
||||
name: 'variant',
|
||||
values: Object.values(CheckboxVariant),
|
||||
props: (variant: CheckboxVariant) => ({ variant }),
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
values: Object.values(CheckboxSize),
|
||||
props: (size: CheckboxSize) => ({ size }),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
@ -1,50 +0,0 @@
|
||||
import { expect } from '@storybook/jest';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import DatePicker from '../DatePicker';
|
||||
|
||||
const meta: Meta<typeof DatePicker> = {
|
||||
title: 'UI/Input/DatePicker',
|
||||
component: DatePicker,
|
||||
decorators: [ComponentDecorator],
|
||||
argTypes: {
|
||||
customInput: { control: false },
|
||||
date: { control: 'date' },
|
||||
},
|
||||
args: { date: new Date('January 1, 2023 00:00:00') },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof DatePicker>;
|
||||
|
||||
export const Default: Story = {};
|
||||
|
||||
export const WithOpenMonthSelect: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const monthSelect = canvas.getByText('January');
|
||||
|
||||
await userEvent.click(monthSelect);
|
||||
|
||||
expect(canvas.getAllByText('January')).toHaveLength(2);
|
||||
[
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December',
|
||||
].forEach((monthLabel) =>
|
||||
expect(canvas.getByText(monthLabel)).toBeInTheDocument(),
|
||||
);
|
||||
},
|
||||
};
|
||||
@ -1,21 +0,0 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { workspaceLogoUrl } from '~/testing/mock-data/users';
|
||||
|
||||
import { ImageInput } from '../ImageInput';
|
||||
|
||||
const meta: Meta<typeof ImageInput> = {
|
||||
title: 'UI/Input/ImageInput',
|
||||
component: ImageInput,
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ImageInput>;
|
||||
|
||||
export const Default: Story = {};
|
||||
|
||||
export const WithPicture: Story = { args: { picture: workspaceLogoUrl } };
|
||||
|
||||
export const Disabled: Story = { args: { disabled: true } };
|
||||
@ -1,84 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { expect } from '@storybook/jest';
|
||||
import { jest } from '@storybook/jest';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import { TextInput } from '../TextInput';
|
||||
|
||||
const changeJestFn = jest.fn();
|
||||
|
||||
const meta: Meta<typeof TextInput> = {
|
||||
title: 'UI/Input/TextInput',
|
||||
component: TextInput,
|
||||
decorators: [ComponentDecorator],
|
||||
args: { value: '', onChange: changeJestFn, placeholder: 'Placeholder' },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof TextInput>;
|
||||
|
||||
function FakeTextInput({
|
||||
onChange,
|
||||
value: initialValue,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TextInput>) {
|
||||
const [value, setValue] = useState(initialValue);
|
||||
return (
|
||||
<TextInput
|
||||
{...props}
|
||||
value={value}
|
||||
onChange={(text) => {
|
||||
setValue(text);
|
||||
onChange?.(text);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export const Default: Story = {
|
||||
argTypes: { value: { control: false } },
|
||||
args: { value: 'A good value ' },
|
||||
render: (args) => <FakeTextInput {...args} />,
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const input = canvas.getByRole('textbox');
|
||||
await userEvent.type(input, 'cou', { delay: 100 });
|
||||
|
||||
expect(changeJestFn).toHaveBeenNthCalledWith(1, 'A good value c');
|
||||
expect(changeJestFn).toHaveBeenNthCalledWith(2, 'A good value co');
|
||||
expect(changeJestFn).toHaveBeenNthCalledWith(3, 'A good value cou');
|
||||
},
|
||||
};
|
||||
|
||||
export const Placeholder: Story = {};
|
||||
|
||||
export const FullWidth: Story = {
|
||||
args: { value: 'A good value', fullWidth: true },
|
||||
};
|
||||
|
||||
export const WithLabel: Story = {
|
||||
args: { label: 'Lorem ipsum' },
|
||||
};
|
||||
|
||||
export const WithError: Story = {
|
||||
args: { error: 'Lorem ipsum' },
|
||||
};
|
||||
|
||||
export const PasswordInput: Story = {
|
||||
args: { type: 'password', placeholder: 'Password' },
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const input = canvas.getByPlaceholderText('Password');
|
||||
await userEvent.type(input, 'pa$$w0rd');
|
||||
|
||||
const revealButton = canvas.getByTestId('reveal-password-button');
|
||||
await userEvent.click(revealButton);
|
||||
|
||||
expect(input).toHaveAttribute('type', 'text');
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user