From 1f5492b4a7408ebb27f75a9d12403d97f2160dd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tha=C3=AFs?= Date: Thu, 9 Nov 2023 08:25:46 +0100 Subject: [PATCH] feat: add Text field preview in settings (#2389) Closes #2325 --- .../components/SettingsObjectFieldPreview.tsx | 78 +++++++++--- ...rd.tsx => SettingsObjectFieldTypeCard.tsx} | 10 +- .../SettingsObjectFieldTypeSelectSection.tsx | 52 +++++++- .../SettingsObjectFieldPreview.stories.tsx | 8 +- ...> SettingsObjectFieldTypeCard.stories.tsx} | 19 +-- ...gsObjectFieldTypeSelectSection.stories.tsx | 2 +- .../data-model/constants/dataTypes.ts | 9 +- .../ui/object/field/contexts/FieldContext.ts | 4 +- .../ui/object/field/hooks/usePersistField.ts | 15 ++- .../field/hooks/useToggleEditOnlyInput.ts | 9 +- .../__stories__/FieldContextProvider.tsx | 7 +- .../__stories__/DateFieldDisplay.stories.tsx | 80 +++++------- .../DoubleTextFieldDisplay.stories.tsx | 100 ++++++--------- .../__stories__/EmailFieldDisplay.stories.tsx | 83 ++++++------- .../__stories__/MoneyFieldDisplay.stories.tsx | 115 ++++++------------ .../NumberFieldDisplay.stories.tsx | 107 ++++++---------- .../__stories__/PhoneFieldDisplay.stories.tsx | 84 ++++++------- .../__stories__/TextFieldDisplay.stories.tsx | 111 +++++------------ .../__stories__/URLFieldDisplay.stories.tsx | 83 ++++++------- .../record-inline-cell/hooks/useInlineCell.ts | 2 +- .../data-model/SettingsObjectFieldEdit.tsx | 9 +- .../SettingsObjectNewFieldStep2.tsx | 8 +- front/src/testing/mock-data/views.ts | 6 + 23 files changed, 461 insertions(+), 540 deletions(-) rename front/src/modules/settings/data-model/components/{SettingsObjectFieldPreviewCard.tsx => SettingsObjectFieldTypeCard.tsx} (87%) rename front/src/modules/settings/data-model/components/__stories__/{SettingsObjectFieldPreviewCard.stories.tsx => SettingsObjectFieldTypeCard.stories.tsx} (53%) diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx index 069275f5e90..536598b1ef2 100644 --- a/front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx +++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx @@ -1,17 +1,28 @@ -import { ReactNode } from 'react'; +import { useEffect } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { useRecoilState } from 'recoil'; +import { useFindManyObjects } from '@/metadata/hooks/useFindManyObjects'; import { Tag } from '@/ui/display/tag/components/Tag'; import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon'; +import { FieldDisplay } from '@/ui/object/field/components/FieldDisplay'; +import { FieldContext } from '@/ui/object/field/contexts/FieldContext'; +import { entityFieldsFamilySelector } from '@/ui/object/field/states/selectors/entityFieldsFamilySelector'; +import { assertNotNull } from '~/utils/assert'; -type SettingsObjectFieldPreviewProps = { - objectIconKey: string; - objectLabelPlural: string; - isObjectCustom: boolean; - fieldIconKey: string; +import { dataTypes } from '../constants/dataTypes'; +import { MetadataFieldDataType } from '../types/ObjectFieldDataType'; + +export type SettingsObjectFieldPreviewProps = { + fieldIconKey?: string | null; fieldLabel: string; - fieldValue: ReactNode; + fieldName?: string; + fieldType: MetadataFieldDataType; + isObjectCustom: boolean; + objectIconKey?: string | null; + objectLabelPlural: string; + objectNamePlural: string; }; const StyledContainer = styled.div` @@ -27,6 +38,7 @@ const StyledContainer = styled.div` const StyledObjectSummary = styled.div` align-items: center; display: flex; + gap: ${({ theme }) => theme.spacing(2)}; justify-content: space-between; margin-bottom: ${({ theme }) => theme.spacing(2)}; `; @@ -47,7 +59,7 @@ const StyledFieldPreview = styled.div` gap: ${({ theme }) => theme.spacing(2)}; height: ${({ theme }) => theme.spacing(8)}; overflow: hidden; - padding-left: ${({ theme }) => theme.spacing(2)}; + padding: 0 ${({ theme }) => theme.spacing(2)}; white-space: nowrap; `; @@ -59,16 +71,38 @@ const StyledFieldLabel = styled.div` `; export const SettingsObjectFieldPreview = ({ - objectIconKey, - objectLabelPlural, - isObjectCustom, fieldIconKey, fieldLabel, - fieldValue, + fieldName, + fieldType, + isObjectCustom, + objectIconKey, + objectLabelPlural, + objectNamePlural, }: SettingsObjectFieldPreviewProps) => { const theme = useTheme(); - const { Icon: ObjectIcon } = useLazyLoadIcon(objectIconKey); - const { Icon: FieldIcon } = useLazyLoadIcon(fieldIconKey); + const { Icon: ObjectIcon } = useLazyLoadIcon(objectIconKey ?? ''); + const { Icon: FieldIcon } = useLazyLoadIcon(fieldIconKey ?? ''); + + const { objects } = useFindManyObjects({ + objectNamePlural, + skip: !fieldName, + }); + + const [fieldValue, setFieldValue] = useRecoilState( + entityFieldsFamilySelector({ + entityId: objects[0]?.id ?? objectNamePlural, + fieldName: fieldName || 'new-field', + }), + ); + + useEffect(() => { + setFieldValue( + fieldName && assertNotNull(objects[0]?.[fieldName]) + ? objects[0][fieldName] + : dataTypes[fieldType].defaultValue, + ); + }, [fieldName, fieldType, fieldValue, objects, setFieldValue]); return ( @@ -98,7 +132,21 @@ export const SettingsObjectFieldPreview = ({ )} {fieldLabel}: - {fieldValue} + + + ); diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldPreviewCard.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeCard.tsx similarity index 87% rename from front/src/modules/settings/data-model/components/SettingsObjectFieldPreviewCard.tsx rename to front/src/modules/settings/data-model/components/SettingsObjectFieldTypeCard.tsx index 48eab6686db..1373496148b 100644 --- a/front/src/modules/settings/data-model/components/SettingsObjectFieldPreviewCard.tsx +++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeCard.tsx @@ -1,7 +1,8 @@ import { ReactNode } from 'react'; import styled from '@emotion/styled'; -type SettingsObjectFieldPreviewCardProps = { +type SettingsObjectFieldTypeCardProps = { + className?: string; preview: ReactNode; form?: ReactNode; }; @@ -36,12 +37,13 @@ const StyledFormContainer = styled.div` padding: ${({ theme }) => theme.spacing(4)}; `; -export const SettingsObjectFieldPreviewCard = ({ +export const SettingsObjectFieldTypeCard = ({ + className, preview, form, -}: SettingsObjectFieldPreviewCardProps) => { +}: SettingsObjectFieldTypeCardProps) => { return ( -
+
Preview {preview} diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx index 58db2b82043..b416a3fd393 100644 --- a/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx +++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx @@ -1,3 +1,5 @@ +import styled from '@emotion/styled'; + import { H2Title } from '@/ui/display/typography/components/H2Title'; import { Select } from '@/ui/input/components/Select'; import { Section } from '@/ui/layout/section/components/Section'; @@ -5,19 +7,45 @@ import { Section } from '@/ui/layout/section/components/Section'; import { dataTypes } from '../constants/dataTypes'; import { MetadataFieldDataType } from '../types/ObjectFieldDataType'; +import { + SettingsObjectFieldPreview, + SettingsObjectFieldPreviewProps, +} from './SettingsObjectFieldPreview'; +import { SettingsObjectFieldTypeCard } from './SettingsObjectFieldTypeCard'; + type SettingsObjectFieldTypeSelectSectionProps = { disabled?: boolean; onChange?: (value: MetadataFieldDataType) => void; - type: MetadataFieldDataType; -}; +} & Pick< + SettingsObjectFieldPreviewProps, + | 'fieldIconKey' + | 'fieldLabel' + | 'fieldName' + | 'fieldType' + | 'isObjectCustom' + | 'objectIconKey' + | 'objectLabelPlural' + | 'objectNamePlural' +>; + +const StyledSettingsObjectFieldTypeCard = styled(SettingsObjectFieldTypeCard)` + margin-top: ${({ theme }) => theme.spacing(4)}; +`; // TODO: remove "relation" type for now, add it back when the backend is ready. const { RELATION: _, ...dataTypesWithoutRelation } = dataTypes; export const SettingsObjectFieldTypeSelectSection = ({ disabled, + fieldIconKey, + fieldLabel, + fieldName, + fieldType, + isObjectCustom, + objectIconKey, + objectLabelPlural, + objectNamePlural, onChange, - type, }: SettingsObjectFieldTypeSelectSectionProps) => (
({ @@ -36,5 +64,21 @@ export const SettingsObjectFieldTypeSelectSection = ({ }), )} /> + {fieldType === 'TEXT' && ( + + } + /> + )}
); diff --git a/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx b/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx index 509ca9d9b26..6b4926dd5a4 100644 --- a/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx +++ b/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx @@ -9,12 +9,12 @@ const meta: Meta = { component: SettingsObjectFieldPreview, decorators: [ComponentDecorator], args: { - objectIconKey: 'IconUser', - objectLabelPlural: 'People', fieldIconKey: 'IconNotes', fieldLabel: 'Description', - fieldValue: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum magna enim, dapibus non enim in, lacinia faucibus nunc. Sed interdum ante sed felis facilisis, eget ultricies neque molestie. Mauris auctor, justo eu volutpat cursus, libero erat tempus nulla, non sodales lorem lacus a est.', + fieldType: 'TEXT', + objectIconKey: 'IconUser', + objectLabelPlural: 'People', + objectNamePlural: 'people', }, }; diff --git a/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreviewCard.stories.tsx b/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldTypeCard.stories.tsx similarity index 53% rename from front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreviewCard.stories.tsx rename to front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldTypeCard.stories.tsx index ed317d58ce1..c1f077f49af 100644 --- a/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreviewCard.stories.tsx +++ b/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldTypeCard.stories.tsx @@ -4,28 +4,29 @@ import { TextInput } from '@/ui/input/components/TextInput'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; import { SettingsObjectFieldPreview } from '../SettingsObjectFieldPreview'; -import { SettingsObjectFieldPreviewCard } from '../SettingsObjectFieldPreviewCard'; +import { SettingsObjectFieldTypeCard } from '../SettingsObjectFieldTypeCard'; -const meta: Meta = { - title: 'Modules/Settings/DataModel/SettingsObjectFieldPreviewCard', - component: SettingsObjectFieldPreviewCard, +const meta: Meta = { + title: 'Modules/Settings/DataModel/SettingsObjectFieldTypeCard', + component: SettingsObjectFieldTypeCard, decorators: [ComponentDecorator], args: { preview: ( ), }, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = {}; diff --git a/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldTypeSelectSection.stories.tsx b/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldTypeSelectSection.stories.tsx index 83c504d3afe..4122856a2fd 100644 --- a/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldTypeSelectSection.stories.tsx +++ b/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldTypeSelectSection.stories.tsx @@ -9,7 +9,7 @@ const meta: Meta = { title: 'Modules/Settings/DataModel/SettingsObjectFieldTypeSelectSection', component: SettingsObjectFieldTypeSelectSection, decorators: [ComponentDecorator], - args: { type: 'NUMBER' }, + args: { fieldType: 'NUMBER' }, }; export default meta; diff --git a/front/src/modules/settings/data-model/constants/dataTypes.ts b/front/src/modules/settings/data-model/constants/dataTypes.ts index ed8c17374ae..5fa7dc64e3d 100644 --- a/front/src/modules/settings/data-model/constants/dataTypes.ts +++ b/front/src/modules/settings/data-model/constants/dataTypes.ts @@ -11,10 +11,15 @@ import { MetadataFieldDataType } from '../types/ObjectFieldDataType'; export const dataTypes: Record< MetadataFieldDataType, - { label: string; Icon: IconComponent } + { label: string; Icon: IconComponent; defaultValue?: unknown } > = { NUMBER: { label: 'Number', Icon: IconNumbers }, - TEXT: { label: 'Text', Icon: IconTextSize }, + TEXT: { + label: 'Text', + Icon: IconTextSize, + defaultValue: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum magna enim, dapibus non enim in, lacinia faucibus nunc. Sed interdum ante sed felis facilisis, eget ultricies neque molestie. Mauris auctor, justo eu volutpat cursus, libero erat tempus nulla, non sodales lorem lacus a est.', + }, URL: { label: 'Link', Icon: IconLink }, BOOLEAN: { label: 'True/False', Icon: IconCheck }, RELATION: { label: 'Relation', Icon: IconPlug }, diff --git a/front/src/modules/ui/object/field/contexts/FieldContext.ts b/front/src/modules/ui/object/field/contexts/FieldContext.ts index 1f85b25da8e..fbab866abb9 100644 --- a/front/src/modules/ui/object/field/contexts/FieldContext.ts +++ b/front/src/modules/ui/object/field/contexts/FieldContext.ts @@ -6,9 +6,9 @@ import { FieldMetadata } from '../types/FieldMetadata'; export type GenericFieldContextType = { fieldDefinition: FieldDefinition; // TODO: add better typing for mutation web-hook - useUpdateEntityMutation: () => [(params: any) => void, any]; + useUpdateEntityMutation?: () => [(params: any) => void, any]; entityId: string; - recoilScopeId: string; + recoilScopeId?: string; hotkeyScope: string; }; diff --git a/front/src/modules/ui/object/field/hooks/usePersistField.ts b/front/src/modules/ui/object/field/hooks/usePersistField.ts index 78c8e2a7259..83f8d9552fb 100644 --- a/front/src/modules/ui/object/field/hooks/usePersistField.ts +++ b/front/src/modules/ui/object/field/hooks/usePersistField.ts @@ -35,8 +35,11 @@ import { isFieldURLV2Value } from '../types/guards/isFieldURLV2Value'; import { isFieldURLValue } from '../types/guards/isFieldURLValue'; export const usePersistField = () => { - const { entityId, fieldDefinition, useUpdateEntityMutation } = - useContext(FieldContext); + const { + entityId, + fieldDefinition, + useUpdateEntityMutation = () => [], + } = useContext(FieldContext); const [updateEntity] = useUpdateEntityMutation(); @@ -102,7 +105,7 @@ export const usePersistField = () => { valueToPersist, ); - updateEntity({ + updateEntity?.({ variables: { where: { id: entityId }, data: { @@ -120,7 +123,7 @@ export const usePersistField = () => { valueToPersist, ); - updateEntity({ + updateEntity?.({ variables: { where: { id: entityId }, data: { @@ -145,7 +148,7 @@ export const usePersistField = () => { valueToPersist.secondValue, ); - updateEntity({ + updateEntity?.({ variables: { where: { id: entityId }, data: { @@ -176,7 +179,7 @@ export const usePersistField = () => { valueToPersist, ); - updateEntity({ + updateEntity?.({ variables: { where: { id: entityId }, data: { diff --git a/front/src/modules/ui/object/field/hooks/useToggleEditOnlyInput.ts b/front/src/modules/ui/object/field/hooks/useToggleEditOnlyInput.ts index 58653555ee0..2fa03b0ca06 100644 --- a/front/src/modules/ui/object/field/hooks/useToggleEditOnlyInput.ts +++ b/front/src/modules/ui/object/field/hooks/useToggleEditOnlyInput.ts @@ -6,8 +6,11 @@ import { entityFieldsFamilySelector } from '../states/selectors/entityFieldsFami import { isFieldBoolean } from '../types/guards/isFieldBoolean'; export const useToggleEditOnlyInput = () => { - const { entityId, fieldDefinition, useUpdateEntityMutation } = - useContext(FieldContext); + const { + entityId, + fieldDefinition, + useUpdateEntityMutation = () => [], + } = useContext(FieldContext); const [updateEntity] = useUpdateEntityMutation(); @@ -27,7 +30,7 @@ export const useToggleEditOnlyInput = () => { valueToPersist, ); - updateEntity({ + updateEntity?.({ variables: { where: { id: entityId }, data: { diff --git a/front/src/modules/ui/object/field/meta-types/__stories__/FieldContextProvider.tsx b/front/src/modules/ui/object/field/meta-types/__stories__/FieldContextProvider.tsx index 21eb4b89725..a2d4bbdd6df 100644 --- a/front/src/modules/ui/object/field/meta-types/__stories__/FieldContextProvider.tsx +++ b/front/src/modules/ui/object/field/meta-types/__stories__/FieldContextProvider.tsx @@ -21,12 +21,7 @@ export const FieldContextProvider = ({ recoilScopeId: '1', hotkeyScope: 'hotkey-scope', fieldDefinition, - useUpdateEntityMutation: () => [ - () => { - return; - }, - {}, - ], + useUpdateEntityMutation: () => [() => undefined, {}], }} > {children} diff --git a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/DateFieldDisplay.stories.tsx b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/DateFieldDisplay.stories.tsx index 8fcca38a587..97b47369417 100644 --- a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/DateFieldDisplay.stories.tsx +++ b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/DateFieldDisplay.stories.tsx @@ -3,11 +3,11 @@ import { Meta, StoryObj } from '@storybook/react'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { FieldContextProvider } from '../../../__stories__/FieldContextProvider'; +import { FieldContext } from '../../../../contexts/FieldContext'; import { useDateField } from '../../../hooks/useDateField'; import { DateFieldDisplay } from '../DateFieldDisplay'; -const formattedDate = new Date(); +const formattedDate = new Date('2023-04-01'); const DateFieldValueSetterEffect = ({ value }: { value: string }) => { const { setFieldValue } = useDateField(); @@ -16,62 +16,48 @@ const DateFieldValueSetterEffect = ({ value }: { value: string }) => { setFieldValue(value); }, [setFieldValue, value]); - return <>; -}; - -type DateFieldDisplayWithContextProps = { - value: string; - entityId?: string; -}; - -const DateFieldDisplayWithContext = ({ - value, - entityId, -}: DateFieldDisplayWithContextProps) => { - return ( - - - - - ); + return null; }; const meta: Meta = { title: 'UI/Data/Field/Display/DateFieldDisplay', - component: DateFieldDisplayWithContext, + decorators: [ + (Story, { args }) => ( + + + + + ), + ComponentDecorator, + ], + component: DateFieldDisplay, + argTypes: { value: { control: 'date' } }, + args: { + value: formattedDate, + }, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; -export const Default: Story = { - args: { - value: formattedDate.toISOString(), - }, -}; +export const Default: Story = {}; export const Elipsis: Story = { - args: { - value: formattedDate.toISOString(), - }, - argTypes: { - value: { control: false }, - }, parameters: { - container: { - width: 50, - }, + container: { width: 50 }, }, - decorators: [ComponentDecorator], }; diff --git a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/DoubleTextFieldDisplay.stories.tsx b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/DoubleTextFieldDisplay.stories.tsx index 36d329d8a8d..0385c176f74 100644 --- a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/DoubleTextFieldDisplay.stories.tsx +++ b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/DoubleTextFieldDisplay.stories.tsx @@ -1,9 +1,9 @@ -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { Meta, StoryObj } from '@storybook/react'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { FieldContextProvider } from '../../../__stories__/FieldContextProvider'; +import { FieldContext } from '../../../../contexts/FieldContext'; import { useDoubleTextField } from '../../../hooks/useDoubleTextField'; import { DoubleTextFieldDisplay } from '../DoubleTextFieldDisplay'; // Import your component @@ -21,66 +21,51 @@ const DoubleTextFieldDisplayValueSetterEffect = ({ setSecondValue(secondValue); }, [setFirstValue, setSecondValue, firstValue, secondValue]); - return <>; -}; - -type DoubleTextFieldDisplayWithContextProps = { - firstValue: string; - secondValue: string; - entityId?: string; -}; - -const DoubleTextFieldDisplayWithContext = ({ - firstValue, - secondValue, - entityId, -}: DoubleTextFieldDisplayWithContextProps) => { - return ( - - - - - ); + return null; }; const meta: Meta = { title: 'UI/Data/Field/Display/DoubleTextFieldDisplay', - component: DoubleTextFieldDisplayWithContext, + decorators: [ + (Story, { args }) => ( + + + + + ), + ComponentDecorator, + ], + component: DoubleTextFieldDisplay, + args: { + firstValue: 'Lorem', + secondValue: 'ipsum', + }, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; -export const Default: Story = { - args: { - firstValue: 'Lorem', - secondValue: 'ipsum', - }, -}; - -export const CustomValues: Story = { - args: { - firstValue: 'Lorem', - secondValue: 'ipsum', - }, -}; +export const Default: Story = {}; export const Elipsis: Story = { args: { @@ -88,14 +73,7 @@ export const Elipsis: Story = { 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.', secondValue: 'ipsum dolor sit amet, consectetur adipiscing elit.', }, - argTypes: { - firstValue: { control: true }, - secondValue: { control: true }, - }, parameters: { - container: { - width: 100, - }, + container: { width: 100 }, }, - decorators: [ComponentDecorator], }; diff --git a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/EmailFieldDisplay.stories.tsx b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/EmailFieldDisplay.stories.tsx index 2f56f62bdac..e0d7b612dfb 100644 --- a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/EmailFieldDisplay.stories.tsx +++ b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/EmailFieldDisplay.stories.tsx @@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { FieldContextProvider } from '../../../__stories__/FieldContextProvider'; +import { FieldContext } from '../../../../contexts/FieldContext'; import { useEmailField } from '../../../hooks/useEmailField'; import { EmailFieldDisplay } from '../EmailFieldDisplay'; @@ -15,65 +15,50 @@ const EmailFieldValueSetterEffect = ({ value }: { value: string }) => { setFieldValue(value); }, [setFieldValue, value]); - return <>; -}; - -type EmailFieldDisplayWithContextProps = { - value: string; - entityId?: string; -}; - -const EmailFieldDisplayWithContext = ({ - value, - entityId, -}: EmailFieldDisplayWithContextProps) => { - return ( - - - - - - - ); + return null; }; const meta: Meta = { title: 'UI/Data/Field/Display/EmailFieldDisplay', - component: EmailFieldDisplayWithContext, + decorators: [ + (Story, { args }) => ( + + + + + + + ), + ComponentDecorator, + ], + component: EmailFieldDisplay, + args: { + value: 'Test@Test.test', + }, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; -export const Default: Story = { - args: { - value: 'Test@Test.test', - }, -}; +export const Default: Story = {}; export const Elipsis: Story = { - args: { - value: 'Test@Test.test', - }, - argTypes: { - value: { control: false }, - }, parameters: { - container: { - width: 50, - }, + container: { width: 50 }, }, - decorators: [ComponentDecorator], }; diff --git a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/MoneyFieldDisplay.stories.tsx b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/MoneyFieldDisplay.stories.tsx index e84dcb4a89f..157f27b73d9 100644 --- a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/MoneyFieldDisplay.stories.tsx +++ b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/MoneyFieldDisplay.stories.tsx @@ -1,12 +1,9 @@ import { useEffect } from 'react'; import { Meta, StoryObj } from '@storybook/react'; -import { v4 } from 'uuid'; -import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { CatalogStory } from '~/testing/types'; -import { FieldContextProvider } from '../../../__stories__/FieldContextProvider'; +import { FieldContext } from '../../../../contexts/FieldContext'; import { useMoneyField } from '../../../hooks/useMoneyField'; import { MoneyFieldDisplay } from '../MoneyFieldDisplay'; @@ -17,95 +14,53 @@ const MoneyFieldValueSetterEffect = ({ value }: { value: number }) => { setFieldValue(value); }, [setFieldValue, value]); - return <>; -}; - -type MoneyFieldDisplayWithContextProps = { - value: number; - entityId?: string; -}; - -const MoneyFieldDisplayWithContext = ({ - value, - entityId, -}: MoneyFieldDisplayWithContextProps) => { - return ( - - - - - ); + return null; }; const meta: Meta = { title: 'UI/Data/Field/Display/MoneyFieldDisplay', - component: MoneyFieldDisplayWithContext, -}; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = { + decorators: [ + (Story, { args }) => ( + [() => undefined, undefined], + }} + > + + + + ), + ComponentDecorator, + ], + component: MoneyFieldDisplay, args: { value: 100, }, }; +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + export const Elipsis: Story = { args: { value: 1e100, }, - argTypes: { - value: { control: false }, - }, parameters: { - container: { - width: 100, - }, + container: { width: 100 }, }, - decorators: [ComponentDecorator], }; - -export const Catalog: CatalogStory = - { - argTypes: { - value: { control: false }, - }, - parameters: { - catalog: { - dimensions: [ - { - name: 'currency', - values: ['$'] satisfies string[], - props: (_value: string) => ({}), - }, - { - name: 'value', - values: [ - 100, 1000, -1000, 1e10, 1.357802, -1.283, 0, - ] satisfies number[], - props: (value: number) => ({ value, entityId: v4() }), - }, - ], - options: { - elementContainer: { - width: 100, - }, - }, - }, - }, - decorators: [CatalogDecorator], - }; diff --git a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/NumberFieldDisplay.stories.tsx b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/NumberFieldDisplay.stories.tsx index fe4f1b592d1..02bdffdef61 100644 --- a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/NumberFieldDisplay.stories.tsx +++ b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/NumberFieldDisplay.stories.tsx @@ -1,12 +1,9 @@ import { useEffect } from 'react'; import { Meta, StoryObj } from '@storybook/react'; -import { v4 } from 'uuid'; -import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { CatalogStory } from '~/testing/types'; -import { FieldContextProvider } from '../../../__stories__/FieldContextProvider'; +import { FieldContext } from '../../../../contexts/FieldContext'; import { useNumberField } from '../../../hooks/useNumberField'; import { NumberFieldDisplay } from '../NumberFieldDisplay'; @@ -17,46 +14,42 @@ const NumberFieldValueSetterEffect = ({ value }: { value: number }) => { setFieldValue(value); }, [setFieldValue, value]); - return <>; -}; - -type NumberFieldDisplayWithContextProps = { - value: number; - entityId?: string; -}; - -const NumberFieldDisplayWithContext = ({ - value, - entityId, -}: NumberFieldDisplayWithContextProps) => { - return ( - - - - - ); + return null; }; const meta: Meta = { title: 'UI/Data/Field/Display/NumberFieldDisplay', - component: NumberFieldDisplayWithContext, + decorators: [ + (Story, { args }) => ( + [() => undefined, undefined], + }} + > + + + + ), + ComponentDecorator, + ], + component: NumberFieldDisplay, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: { @@ -68,41 +61,19 @@ export const Elipsis: Story = { args: { value: 1e100, }, - argTypes: { - value: { control: false }, - }, parameters: { - container: { - width: 100, - }, + container: { width: 100 }, }, - decorators: [ComponentDecorator], }; -export const Catalog: CatalogStory< - Story, - typeof NumberFieldDisplayWithContext -> = { - argTypes: { - value: { control: false }, +export const Negative: Story = { + args: { + value: -1000, + }, +}; + +export const Float: Story = { + args: { + value: 1.357802, }, - parameters: { - catalog: { - dimensions: [ - { - name: 'value', - values: [ - 100, 1000, -1000, 1e10, 1.357802, -1.283, 0, - ] satisfies number[], - props: (value: number) => ({ value, entityId: v4() }), - }, - ], - options: { - elementContainer: { - width: 100, - }, - }, - }, - }, - decorators: [CatalogDecorator], }; diff --git a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/PhoneFieldDisplay.stories.tsx b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/PhoneFieldDisplay.stories.tsx index 3e28bce46c8..1d8265d52d0 100644 --- a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/PhoneFieldDisplay.stories.tsx +++ b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/PhoneFieldDisplay.stories.tsx @@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { FieldContextProvider } from '../../../__stories__/FieldContextProvider'; +import { FieldContext } from '../../../../contexts/FieldContext'; import { usePhoneField } from '../../../hooks/usePhoneField'; import { PhoneFieldDisplay } from '../PhoneFieldDisplay'; @@ -15,65 +15,51 @@ const PhoneFieldValueSetterEffect = ({ value }: { value: string }) => { setFieldValue(value); }, [setFieldValue, value]); - return <>; -}; - -type PhoneFieldDisplayWithContextProps = { - value: string; - entityId?: string; -}; - -const PhoneFieldDisplayWithContext = ({ - value, - entityId, -}: PhoneFieldDisplayWithContextProps) => { - return ( - - - - - - - ); + return null; }; const meta: Meta = { title: 'UI/Data/Field/Display/PhoneFieldDisplay', - component: PhoneFieldDisplayWithContext, + decorators: [ + (Story, { args }) => ( + [() => undefined, undefined], + }} + > + + + + + + ), + ComponentDecorator, + ], + component: PhoneFieldDisplay, + args: { + value: '362763872687362', + }, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; -export const Default: Story = { - args: { - value: '362763872687362', - }, -}; +export const Default: Story = {}; export const Elipsis: Story = { - args: { - value: '362763872687362', - }, - argTypes: { - value: { control: false }, - }, parameters: { - container: { - width: 50, - }, + container: { width: 50 }, }, - decorators: [ComponentDecorator], }; diff --git a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/TextFieldDisplay.stories.tsx b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/TextFieldDisplay.stories.tsx index 0fdc1348824..d405fafe757 100644 --- a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/TextFieldDisplay.stories.tsx +++ b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/TextFieldDisplay.stories.tsx @@ -1,12 +1,9 @@ import { useEffect } from 'react'; import { Meta, StoryObj } from '@storybook/react'; -import { v4 } from 'uuid'; -import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { CatalogStory } from '~/testing/types'; -import { FieldContextProvider } from '../../../__stories__/FieldContextProvider'; +import { FieldContext } from '../../../../contexts/FieldContext'; import { useTextField } from '../../../hooks/useTextField'; import { TextFieldDisplay } from '../TextFieldDisplay'; @@ -17,94 +14,52 @@ const TextFieldValueSetterEffect = ({ value }: { value: string }) => { setFieldValue(value); }, [setFieldValue, value]); - return <>; -}; - -type TextFieldDisplayWithContextProps = { - value: string; - entityId?: string; -}; - -const TextFieldDisplayWithContext = ({ - value, - entityId, -}: TextFieldDisplayWithContextProps) => { - return ( - - - - - ); + return null; }; const meta: Meta = { title: 'UI/Data/Field/Display/TextFieldDisplay', - component: TextFieldDisplayWithContext, -}; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = { + decorators: [ + (Story, { args }) => ( + + + + + ), + ComponentDecorator, + ], + component: TextFieldDisplay, args: { value: 'Lorem ipsum', }, }; +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + export const Elipsis: Story = { args: { value: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae rerum fugiat veniam illum accusantium saepe, voluptate inventore libero doloribus doloremque distinctio blanditiis amet quis dolor a nulla? Placeat nam itaque rerum esse quidem animi, temporibus saepe debitis commodi quia eius eos minus inventore. Voluptates fugit optio sit ab consectetur ipsum, neque eius atque blanditiis. Ullam provident at porro minima, nobis vero dicta consequatur maxime laboriosam fugit repudiandae repellat tempore voluptas non voluptatibus neque aliquam ducimus doloribus ipsa? Sapiente suscipit unde modi commodi possimus doloribus eum voluptatibus, architecto laudantium, magnam, eos numquam exercitationem est maxime explicabo odio nemo qui distinctio temporibus.', }, - argTypes: { - value: { control: false }, - }, parameters: { - container: { - width: 100, - }, + container: { width: 100 }, }, - decorators: [ComponentDecorator], }; - -export const Catalog: CatalogStory = - { - argTypes: { - value: { control: false }, - }, - parameters: { - catalog: { - dimensions: [ - { - name: 'value', - values: [ - 'Hello world', - 'Test', - '1234567890', - ' ', - 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae rerum fugiat veniam illum accusantium saepe, voluptate inventore libero doloribus doloremque distinctio blanditiis amet quis dolor a nulla? Placeat nam itaque rerum esse quidem animi, temporibus saepe debitis commodi quia eius eos minus inventore. Voluptates fugit optio sit ab consectetur ipsum, neque eius atque blanditiis. Ullam provident at porro minima, nobis vero dicta consequatur maxime laboriosam fugit repudiandae repellat tempore voluptas non voluptatibus neque aliquam ducimus doloribus ipsa? Sapiente suscipit unde modi commodi possimus doloribus eum voluptatibus, architecto laudantium, magnam, eos numquam exercitationem est maxime explicabo odio nemo qui distinctio temporibus.', - ] satisfies string[], - props: (value: string) => ({ value, entityId: v4() }), - }, - ], - options: { - elementContainer: { - width: 100, - }, - }, - }, - }, - decorators: [CatalogDecorator], - }; diff --git a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/URLFieldDisplay.stories.tsx b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/URLFieldDisplay.stories.tsx index 9a5cd9d50e9..f377fa945dc 100644 --- a/front/src/modules/ui/object/field/meta-types/display/components/__stories__/URLFieldDisplay.stories.tsx +++ b/front/src/modules/ui/object/field/meta-types/display/components/__stories__/URLFieldDisplay.stories.tsx @@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { FieldContextProvider } from '../../../__stories__/FieldContextProvider'; +import { FieldContext } from '../../../../contexts/FieldContext'; import { useURLField } from '../../../hooks/useURLField'; import { URLFieldDisplay } from '../URLFieldDisplay'; @@ -15,65 +15,50 @@ const URLFieldValueSetterEffect = ({ value }: { value: string }) => { setFieldValue(value); }, [setFieldValue, value]); - return <>; -}; - -type URLFieldDisplayWithContextProps = { - value: string; - entityId?: string; -}; - -const URLFieldDisplayWithContext = ({ - value, - entityId, -}: URLFieldDisplayWithContextProps) => { - return ( - - - - - - - ); + return null; }; const meta: Meta = { title: 'UI/Data/Field/Display/URLFieldDisplay', - component: URLFieldDisplayWithContext, + decorators: [ + (Story, { args }) => ( + + + + + + + ), + ComponentDecorator, + ], + component: URLFieldDisplay, + args: { + value: 'https://github.com/twentyhq', + }, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; -export const Default: Story = { - args: { - value: 'https://github.com/GitStartHQ', - }, -}; +export const Default: Story = {}; export const Elipsis: Story = { - args: { - value: 'https://www.instagram.com/gitstart/', - }, - argTypes: { - value: { control: true }, - }, parameters: { - container: { - width: 200, - }, + container: { width: 200 }, }, - decorators: [ComponentDecorator], }; diff --git a/front/src/modules/ui/object/record-inline-cell/hooks/useInlineCell.ts b/front/src/modules/ui/object/record-inline-cell/hooks/useInlineCell.ts index d9976ee783a..f533f6ce6a9 100644 --- a/front/src/modules/ui/object/record-inline-cell/hooks/useInlineCell.ts +++ b/front/src/modules/ui/object/record-inline-cell/hooks/useInlineCell.ts @@ -9,7 +9,7 @@ import { isInlineCellInEditModeScopedState } from '../states/isInlineCellInEditM import { InlineCellHotkeyScope } from '../types/InlineCellHotkeyScope'; export const useInlineCell = () => { - const { recoilScopeId } = useContext(FieldContext); + const { recoilScopeId = '' } = useContext(FieldContext); const [isInlineCellInEditMode, setIsInlineCellInEditMode] = useRecoilState( isInlineCellInEditModeScopedState(recoilScopeId), diff --git a/front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx b/front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx index 48c1eb3bed2..615807a4609 100644 --- a/front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx +++ b/front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx @@ -125,7 +125,14 @@ export const SettingsObjectFieldEdit = () => { />
diff --git a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx index 563c3a42f3e..1329b59bb63 100644 --- a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx +++ b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx @@ -118,7 +118,13 @@ export const SettingsObjectNewFieldStep2 = () => { } /> setFormValues((previousValues) => ({ ...previousValues, type })) } diff --git a/front/src/testing/mock-data/views.ts b/front/src/testing/mock-data/views.ts index 35d45df920c..f007560dc56 100644 --- a/front/src/testing/mock-data/views.ts +++ b/front/src/testing/mock-data/views.ts @@ -17,4 +17,10 @@ export const mockedViewsData = [ objectId: 'company', type: 'kanban', }, + { + id: '5c307222-1dd5-4ff3-ab06-8d990e9b3c74', + name: 'All companies (v2)', + objectId: 'a3195559-cc20-4749-9565-572a2f506581', + type: 'table', + }, ];