Migrate to twenty-ui - input components (#7914)
### Description Migrate Input components: - CardPicker - Radio - RadioGroup - Checkbox - Toggle - IconListViewGrip ### Demo Radio Component on Storybook  Checkbox component on Storybook  ###### Fixes twentyhq/private-issues#92 Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-app[bot]
committed by
GitHub
GitHub
parent
ff388f56ea
commit
fc8c9d9167
@ -1,45 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Radio } from '@/ui/input/components/Radio';
|
||||
|
||||
const StyledSubscriptionCardContainer = styled.button`
|
||||
background-color: ${({ theme }) => theme.background.secondary};
|
||||
border: 1px solid ${({ theme }) => theme.border.color.medium};
|
||||
border-radius: ${({ theme }) => theme.border.radius.md};
|
||||
display: flex;
|
||||
padding: ${({ theme }) => theme.spacing(4)} ${({ theme }) => theme.spacing(3)};
|
||||
position: relative;
|
||||
width: 100%;
|
||||
:hover {
|
||||
cursor: pointer;
|
||||
background: ${({ theme }) => theme.background.tertiary};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledRadioContainer = styled.div`
|
||||
position: absolute;
|
||||
right: ${({ theme }) => theme.spacing(2)};
|
||||
top: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
type CardPickerProps = {
|
||||
children: React.ReactNode;
|
||||
handleChange?: () => void;
|
||||
checked?: boolean;
|
||||
};
|
||||
|
||||
export const CardPicker = ({
|
||||
children,
|
||||
checked,
|
||||
handleChange,
|
||||
}: CardPickerProps) => {
|
||||
return (
|
||||
<StyledSubscriptionCardContainer onClick={handleChange}>
|
||||
<StyledRadioContainer>
|
||||
<Radio checked={checked} />
|
||||
</StyledRadioContainer>
|
||||
{children}
|
||||
</StyledSubscriptionCardContainer>
|
||||
);
|
||||
};
|
||||
@ -1,208 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
import * as React from 'react';
|
||||
import { IconCheck, IconMinus } from 'twenty-ui';
|
||||
|
||||
export enum CheckboxVariant {
|
||||
Primary = 'primary',
|
||||
Secondary = 'secondary',
|
||||
Tertiary = 'tertiary',
|
||||
}
|
||||
|
||||
export enum CheckboxShape {
|
||||
Squared = 'squared',
|
||||
Rounded = 'rounded',
|
||||
}
|
||||
|
||||
export enum CheckboxSize {
|
||||
Large = 'large',
|
||||
Small = 'small',
|
||||
}
|
||||
|
||||
type CheckboxProps = {
|
||||
checked: boolean;
|
||||
indeterminate?: boolean;
|
||||
hoverable?: boolean;
|
||||
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
onCheckedChange?: (value: boolean) => void;
|
||||
variant?: CheckboxVariant;
|
||||
size?: CheckboxSize;
|
||||
shape?: CheckboxShape;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
type InputProps = {
|
||||
checkboxSize: CheckboxSize;
|
||||
variant: CheckboxVariant;
|
||||
indeterminate?: boolean;
|
||||
hoverable?: boolean;
|
||||
shape?: CheckboxShape;
|
||||
isChecked?: boolean;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
const StyledInputContainer = styled.div<InputProps>`
|
||||
--size: ${({ checkboxSize }) =>
|
||||
checkboxSize === CheckboxSize.Large ? '32px' : '24px'};
|
||||
align-items: center;
|
||||
border-radius: ${({ theme, shape }) =>
|
||||
shape === CheckboxShape.Rounded
|
||||
? theme.border.radius.rounded
|
||||
: theme.border.radius.md};
|
||||
|
||||
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
||||
display: flex;
|
||||
padding: ${({ theme, checkboxSize }) =>
|
||||
checkboxSize === CheckboxSize.Large
|
||||
? theme.spacing(1.5)
|
||||
: theme.spacing(1.25)};
|
||||
position: relative;
|
||||
${({ hoverable, isChecked, theme, indeterminate, disabled }) => {
|
||||
if (!hoverable || disabled === true) return '';
|
||||
return `&:hover{
|
||||
background-color: ${
|
||||
indeterminate || isChecked
|
||||
? theme.color.blue10
|
||||
: theme.background.transparent.light
|
||||
};
|
||||
}}
|
||||
}`;
|
||||
}}
|
||||
`;
|
||||
|
||||
const StyledInput = styled.input<InputProps>`
|
||||
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
& + label {
|
||||
--size: ${({ checkboxSize }) =>
|
||||
checkboxSize === CheckboxSize.Large ? '18px' : '12px'};
|
||||
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : '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, isChecked }) =>
|
||||
indeterminate || isChecked ? theme.color.blue : 'transparent'};
|
||||
border-color: ${({
|
||||
theme,
|
||||
indeterminate,
|
||||
isChecked,
|
||||
variant,
|
||||
disabled,
|
||||
}) => {
|
||||
switch (true) {
|
||||
case disabled:
|
||||
return theme.background.transparent.medium;
|
||||
case indeterminate || isChecked:
|
||||
return theme.color.blue;
|
||||
case variant === CheckboxVariant.Primary:
|
||||
return theme.border.color.inverted;
|
||||
case variant === CheckboxVariant.Tertiary:
|
||||
return theme.border.color.medium;
|
||||
default:
|
||||
return theme.border.color.secondaryInverted;
|
||||
}
|
||||
}};
|
||||
border-radius: ${({ theme, shape }) =>
|
||||
shape === CheckboxShape.Rounded
|
||||
? theme.border.radius.rounded
|
||||
: theme.border.radius.sm};
|
||||
border-style: solid;
|
||||
border-width: ${({ variant, checkboxSize }) =>
|
||||
checkboxSize === CheckboxSize.Large ||
|
||||
variant === CheckboxVariant.Tertiary
|
||||
? '1.43px'
|
||||
: '1px'};
|
||||
content: '';
|
||||
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
||||
display: inline-block;
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
}
|
||||
|
||||
& + label > svg {
|
||||
--padding: 0px;
|
||||
--size: ${({ checkboxSize }) =>
|
||||
checkboxSize === CheckboxSize.Large ? '20px' : '14px'};
|
||||
height: var(--size);
|
||||
left: var(--padding);
|
||||
position: absolute;
|
||||
stroke: ${({ theme }) => theme.grayScale.gray0};
|
||||
top: var(--padding);
|
||||
width: var(--size);
|
||||
}
|
||||
`;
|
||||
|
||||
export const Checkbox = ({
|
||||
checked,
|
||||
onChange,
|
||||
onCheckedChange,
|
||||
indeterminate,
|
||||
variant = CheckboxVariant.Primary,
|
||||
size = CheckboxSize.Small,
|
||||
shape = CheckboxShape.Squared,
|
||||
hoverable = false,
|
||||
className,
|
||||
disabled = false,
|
||||
}: CheckboxProps) => {
|
||||
const [isInternalChecked, setIsInternalChecked] =
|
||||
React.useState<boolean>(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
setIsInternalChecked(checked ?? false);
|
||||
}, [checked]);
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
onChange?.(event);
|
||||
onCheckedChange?.(event.target.checked);
|
||||
setIsInternalChecked(event.target.checked ?? false);
|
||||
};
|
||||
|
||||
const checkboxId = React.useId();
|
||||
|
||||
return (
|
||||
<StyledInputContainer
|
||||
checkboxSize={size}
|
||||
variant={variant}
|
||||
shape={shape}
|
||||
isChecked={isInternalChecked}
|
||||
hoverable={hoverable}
|
||||
indeterminate={indeterminate}
|
||||
className={className}
|
||||
disabled={disabled}
|
||||
>
|
||||
<StyledInput
|
||||
autoComplete="off"
|
||||
type="checkbox"
|
||||
id={checkboxId}
|
||||
name="styled-checkbox"
|
||||
data-testid="input-checkbox"
|
||||
checked={isInternalChecked}
|
||||
indeterminate={indeterminate}
|
||||
variant={variant}
|
||||
checkboxSize={size}
|
||||
shape={shape}
|
||||
isChecked={isInternalChecked}
|
||||
onChange={handleChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<label htmlFor={checkboxId}>
|
||||
{indeterminate ? (
|
||||
<IconMinus />
|
||||
) : isInternalChecked ? (
|
||||
<IconCheck />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</label>
|
||||
</StyledInputContainer>
|
||||
);
|
||||
};
|
||||
@ -1,11 +0,0 @@
|
||||
import IconListViewGripRaw from '@/ui/input/components/list-view-grip.svg?react';
|
||||
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
|
||||
|
||||
type IconListViewGripProps = Pick<IconComponentProps, 'size' | 'stroke'>;
|
||||
|
||||
export const IconListViewGrip = (props: IconListViewGripProps) => {
|
||||
const width = props.size ?? 8;
|
||||
const height = props.size ?? 32;
|
||||
|
||||
return <IconListViewGripRaw height={height} width={width} />;
|
||||
};
|
||||
@ -1,167 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
import * as React from 'react';
|
||||
import { RGBA } from 'twenty-ui';
|
||||
|
||||
import { RadioGroup } from './RadioGroup';
|
||||
|
||||
export enum RadioSize {
|
||||
Large = 'large',
|
||||
Small = 'small',
|
||||
}
|
||||
|
||||
export enum LabelPosition {
|
||||
Left = 'left',
|
||||
Right = 'right',
|
||||
}
|
||||
|
||||
const StyledContainer = styled.div<{ labelPosition?: LabelPosition }>`
|
||||
${({ labelPosition }) =>
|
||||
labelPosition === LabelPosition.Left
|
||||
? `
|
||||
flex-direction: row-reverse;
|
||||
`
|
||||
: `
|
||||
flex-direction: row;
|
||||
`};
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
`;
|
||||
|
||||
type RadioInputProps = {
|
||||
'radio-size'?: RadioSize;
|
||||
};
|
||||
|
||||
const StyledRadioInput = styled(motion.input)<RadioInputProps>`
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid ${({ theme }) => theme.font.color.secondary};
|
||||
border-radius: ${({ theme }) => theme.border.radius.rounded};
|
||||
height: ${({ 'radio-size': radioSize }) =>
|
||||
radioSize === RadioSize.Large ? '18px' : '16px'};
|
||||
margin: 0;
|
||||
margin-left: 3px;
|
||||
position: relative;
|
||||
width: ${({ 'radio-size': radioSize }) =>
|
||||
radioSize === RadioSize.Large ? '18px' : '16px'};
|
||||
|
||||
:hover {
|
||||
background-color: ${({ theme, checked }) => {
|
||||
if (!checked) {
|
||||
return theme.background.tertiary;
|
||||
}
|
||||
}};
|
||||
outline: 4px solid
|
||||
${({ theme, checked }) => {
|
||||
if (!checked) {
|
||||
return theme.background.tertiary;
|
||||
}
|
||||
return RGBA(theme.color.blue, 0.12);
|
||||
}};
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: ${({ theme }) => theme.color.blue};
|
||||
border: none;
|
||||
&::after {
|
||||
background-color: ${({ theme }) => theme.grayScale.gray0};
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
height: ${({ 'radio-size': radioSize }) =>
|
||||
radioSize === RadioSize.Large ? '8px' : '6px'};
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: ${({ 'radio-size': radioSize }) =>
|
||||
radioSize === RadioSize.Large ? '8px' : '6px'};
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.12;
|
||||
}
|
||||
`;
|
||||
|
||||
type LabelProps = {
|
||||
disabled?: boolean;
|
||||
labelPosition?: LabelPosition;
|
||||
};
|
||||
|
||||
const StyledLabel = styled.label<LabelProps>`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
cursor: pointer;
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
font-weight: ${({ theme }) => theme.font.weight.regular};
|
||||
margin-left: ${({ theme, labelPosition }) =>
|
||||
labelPosition === LabelPosition.Right ? theme.spacing(2) : '0px'};
|
||||
margin-right: ${({ theme, labelPosition }) =>
|
||||
labelPosition === LabelPosition.Left ? theme.spacing(2) : '0px'};
|
||||
opacity: ${({ disabled }) => (disabled ? 0.32 : 1)};
|
||||
`;
|
||||
|
||||
export type RadioProps = {
|
||||
checked?: boolean;
|
||||
className?: string;
|
||||
name?: string;
|
||||
disabled?: boolean;
|
||||
label?: string;
|
||||
labelPosition?: LabelPosition;
|
||||
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
onCheckedChange?: (checked: boolean) => void;
|
||||
size?: RadioSize;
|
||||
style?: React.CSSProperties;
|
||||
value?: string;
|
||||
};
|
||||
|
||||
export const Radio = ({
|
||||
checked,
|
||||
className,
|
||||
name = 'input-radio',
|
||||
disabled = false,
|
||||
label,
|
||||
labelPosition = LabelPosition.Right,
|
||||
onChange,
|
||||
onCheckedChange,
|
||||
size = RadioSize.Small,
|
||||
value,
|
||||
}: RadioProps) => {
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
onChange?.(event);
|
||||
onCheckedChange?.(event.target.checked);
|
||||
};
|
||||
|
||||
const optionId = React.useId();
|
||||
|
||||
return (
|
||||
<StyledContainer className={className} labelPosition={labelPosition}>
|
||||
<StyledRadioInput
|
||||
type="radio"
|
||||
id={optionId}
|
||||
name={name}
|
||||
data-testid="input-radio"
|
||||
checked={checked}
|
||||
value={value || label}
|
||||
radio-size={size}
|
||||
disabled={disabled}
|
||||
onChange={handleChange}
|
||||
initial={{ scale: 0.95 }}
|
||||
animate={{ scale: checked ? 1.05 : 0.95 }}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
|
||||
/>
|
||||
{label && (
|
||||
<StyledLabel
|
||||
htmlFor={optionId}
|
||||
labelPosition={labelPosition}
|
||||
disabled={disabled}
|
||||
>
|
||||
{label}
|
||||
</StyledLabel>
|
||||
)}
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
Radio.Group = RadioGroup;
|
||||
@ -1,39 +0,0 @@
|
||||
import React from 'react';
|
||||
import { useTheme } from '@emotion/react';
|
||||
|
||||
import { RadioProps } from './Radio';
|
||||
|
||||
type RadioGroupProps = React.PropsWithChildren & {
|
||||
value?: string;
|
||||
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
onValueChange?: (value: string) => void;
|
||||
};
|
||||
|
||||
export const RadioGroup = ({
|
||||
value,
|
||||
onChange,
|
||||
onValueChange,
|
||||
children,
|
||||
}: RadioGroupProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
onChange?.(event);
|
||||
onValueChange?.(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{React.Children.map(children, (child) => {
|
||||
if (React.isValidElement<RadioProps>(child)) {
|
||||
return React.cloneElement(child, {
|
||||
style: { marginBottom: theme.spacing(2) },
|
||||
checked: child.props.value === value,
|
||||
onChange: handleChange,
|
||||
});
|
||||
}
|
||||
return child;
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,85 +0,0 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui';
|
||||
|
||||
import {
|
||||
Checkbox,
|
||||
CheckboxShape,
|
||||
CheckboxSize,
|
||||
CheckboxVariant,
|
||||
} from '../Checkbox';
|
||||
|
||||
const meta: Meta<typeof Checkbox> = {
|
||||
title: 'UI/Input/Checkbox/Checkbox',
|
||||
component: Checkbox,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Checkbox>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
checked: false,
|
||||
indeterminate: false,
|
||||
hoverable: false,
|
||||
disabled: false,
|
||||
variant: CheckboxVariant.Primary,
|
||||
size: CheckboxSize.Small,
|
||||
shape: CheckboxShape.Squared,
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof Checkbox> = {
|
||||
args: {},
|
||||
argTypes: {
|
||||
variant: { control: false },
|
||||
size: { control: false },
|
||||
indeterminate: { control: false },
|
||||
checked: { control: false },
|
||||
hoverable: { control: false },
|
||||
shape: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'state',
|
||||
values: ['disabled', 'unchecked', 'checked', 'indeterminate'],
|
||||
props: (state: string) => {
|
||||
if (state === 'disabled') {
|
||||
return { disabled: true };
|
||||
}
|
||||
if (state === 'checked') {
|
||||
return { checked: true };
|
||||
}
|
||||
if (state === 'indeterminate') {
|
||||
return { indeterminate: true };
|
||||
}
|
||||
return {};
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'shape',
|
||||
values: Object.values(CheckboxShape),
|
||||
props: (shape: CheckboxShape) => ({ shape }),
|
||||
},
|
||||
{
|
||||
name: 'isHoverable',
|
||||
values: ['default', 'hoverable'],
|
||||
props: (isHoverable: string) => {
|
||||
if (isHoverable === 'hoverable') {
|
||||
return { hoverable: true };
|
||||
}
|
||||
return {};
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
values: Object.values(CheckboxSize),
|
||||
props: (size: CheckboxSize) => ({ size }),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
@ -1,60 +0,0 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui';
|
||||
|
||||
import { LabelPosition, Radio, RadioSize } from '../Radio';
|
||||
|
||||
const meta: Meta<typeof Radio> = {
|
||||
title: 'UI/Input/Radio/Radio',
|
||||
component: Radio,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Radio>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
label: 'Radio',
|
||||
checked: false,
|
||||
disabled: false,
|
||||
size: RadioSize.Small,
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof Radio> = {
|
||||
args: {
|
||||
label: 'Radio',
|
||||
},
|
||||
argTypes: {
|
||||
size: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'checked',
|
||||
values: [false, true],
|
||||
props: (checked: boolean) => ({ checked }),
|
||||
},
|
||||
{
|
||||
name: 'disabled',
|
||||
values: [false, true],
|
||||
props: (disabled: boolean) => ({ disabled }),
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
values: Object.values(RadioSize),
|
||||
props: (size: RadioSize) => ({ size }),
|
||||
},
|
||||
{
|
||||
name: 'labelPosition',
|
||||
values: Object.values(LabelPosition),
|
||||
props: (labelPosition: LabelPosition) => ({
|
||||
labelPosition,
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
@ -1,5 +0,0 @@
|
||||
<svg width="8" height="32" xmlns="http://www.w3.org/2000/svg" fill="none">
|
||||
<path stroke="null" id="svg_1" fill="#D6D6D6" d="m0,7.5l4.5,0c0.82843,0 1.5,0.67157 1.5,1.5c0,0.82843 -0.67157,1.5 -1.5,1.5l-4.5,0l0,-3z"/>
|
||||
<path id="svg_2" fill="#D6D6D6" d="m0,14.5l4.5,0c0.82843,0 1.5,0.6716 1.5,1.5c0,0.8284 -0.67157,1.5 -1.5,1.5l-4.5,0l0,-3z"/>
|
||||
<path id="svg_3" fill="#D6D6D6" d="m0,21.5l4.5,0c0.82843,0 1.5,0.6716 1.5,1.5c0,0.8284 -0.67157,1.5 -1.5,1.5l-4.5,0l0,-3z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 478 B |
Reference in New Issue
Block a user