admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Reafactor/UI input and displays (#1544)

Browse Source 
* WIP

* Text field

* URL

* Finished PhoneInput

* Refactored input sub-folders

* Boolean

* Fix lint

* Fix lint

* Fix useOutsideClick

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2023-09-12 02:11:20 +02:00
committed by GitHub
parent 509ffddc57
commit a766c60aa5
90 changed files with 618 additions and 461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
front/src/modules/ui/input/text/components/TextInputDisplay.tsx
View File

@ -1,16 +0,0 @@
import styled from '@emotion/styled';
const StyledTextInputDisplay = styled.div`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
`;
export type TextInputDisplayProps = {
children: React.ReactNode;
};
export function TextInputDisplay({ children }: TextInputDisplayProps) {
return <StyledTextInputDisplay>{children}</StyledTextInputDisplay>;
}

2
front/src/modules/ui/input/text/components/TextInput.tsx → front/src/modules/ui/input/text/components/TextInputSettings.tsx
View File

@ -197,4 +197,4 @@ function TextInputComponent(
);
}
export const TextInput = forwardRef(TextInputComponent);
export const TextInputSettings = forwardRef(TextInputComponent);

12
front/src/modules/ui/input/text/components/__stories__/TextInput.stories.tsx
View File

@ -6,28 +6,28 @@ import { userEvent, within } from '@storybook/testing-library';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { TextInput } from '../TextInput';
import { TextInputSettings } from '../TextInputSettings';
const changeJestFn = jest.fn();
const meta: Meta<typeof TextInput> = {
const meta: Meta<typeof TextInputSettings> = {
title: 'UI/Input/TextInput',
component: TextInput,
component: TextInputSettings,
decorators: [ComponentDecorator],
args: { value: '', onChange: changeJestFn, placeholder: 'Placeholder' },
};
export default meta;
type Story = StoryObj<typeof TextInput>;
type Story = StoryObj<typeof TextInputSettings>;
function FakeTextInput({
onChange,
value: initialValue,
...props
}: React.ComponentProps<typeof TextInput>) {
}: React.ComponentProps<typeof TextInputSettings>) {
const [value, setValue] = useState(initialValue);
return (
<TextInput
<TextInputSettings
{...props}
value={value}
onChange={(text) => {