-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: use react-hook-form to validate Settings/DataModel/Field (#…
- Loading branch information
1 parent
9c25c1b
commit d0759ad
Showing
18 changed files
with
13,185 additions
and
13,320 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
102 changes: 100 additions & 2 deletions
102
...es/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,104 @@ | ||
| import { z } from 'zod'; | ||
|
|
||
| import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; | ||
| import { metadataLabelSchema } from '@/object-metadata/validation-schemas/metadataLabelSchema'; | ||
| import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema'; | ||
| import { | ||
| FieldMetadataType, | ||
| RelationDefinitionType, | ||
| RelationMetadataType, | ||
| } from '~/generated-metadata/graphql'; | ||
| import { camelCaseStringSchema } from '~/utils/validation-schemas/camelCaseStringSchema'; | ||
|
|
||
| // TODO: implement fieldMetadataItemSchema | ||
| export const fieldMetadataItemSchema: z.ZodType<FieldMetadataItem> = z.any(); | ||
| export const fieldMetadataItemSchema = z.object({ | ||
| __typename: z.literal('field').optional(), | ||
| createdAt: z.string().datetime(), | ||
| defaultValue: z.any().optional(), | ||
| description: z.string().trim().nullable().optional(), | ||
| fromRelationMetadata: z | ||
| .object({ | ||
| __typename: z.literal('relation').optional(), | ||
| id: z.string().uuid(), | ||
| relationType: z.nativeEnum(RelationMetadataType), | ||
| toFieldMetadataId: z.string().uuid(), | ||
| toObjectMetadata: z.object({ | ||
| __typename: z.literal('object').optional(), | ||
| dataSourceId: z.string().uuid(), | ||
| id: z.string().uuid(), | ||
| isRemote: z.boolean(), | ||
| isSystem: z.boolean(), | ||
| namePlural: z.string().trim().min(1), | ||
| nameSingular: z.string().trim().min(1), | ||
| }), | ||
| }) | ||
| .nullable() | ||
| .optional(), | ||
| icon: z.string().startsWith('Icon').trim().nullable(), | ||
| id: z.string().uuid(), | ||
| isActive: z.boolean(), | ||
| isCustom: z.boolean(), | ||
| isNullable: z.boolean(), | ||
| isSystem: z.boolean(), | ||
| label: metadataLabelSchema, | ||
| name: camelCaseStringSchema, | ||
| options: z | ||
| .array( | ||
| z.object({ | ||
| color: themeColorSchema, | ||
| id: z.string().uuid(), | ||
| label: z.string().trim().min(1), | ||
| position: z.number(), | ||
| value: z.string().trim().min(1), | ||
| }), | ||
| ) | ||
| .optional(), | ||
| relationDefinition: z | ||
| .object({ | ||
| __typename: z.literal('RelationDefinition').optional(), | ||
| direction: z.nativeEnum(RelationDefinitionType), | ||
| sourceFieldMetadata: z.object({ | ||
| __typename: z.literal('field').optional(), | ||
| id: z.string().uuid(), | ||
| name: z.string().trim().min(1), | ||
| }), | ||
| sourceObjectMetadata: z.object({ | ||
| __typename: z.literal('object').optional(), | ||
| id: z.string().uuid(), | ||
| namePlural: z.string().trim().min(1), | ||
| nameSingular: z.string().trim().min(1), | ||
| }), | ||
| targetFieldMetadata: z.object({ | ||
| __typename: z.literal('field').optional(), | ||
| id: z.string().uuid(), | ||
| name: z.string().trim().min(1), | ||
| }), | ||
| targetObjectMetadata: z.object({ | ||
| __typename: z.literal('object').optional(), | ||
| id: z.string().uuid(), | ||
| namePlural: z.string().trim().min(1), | ||
| nameSingular: z.string().trim().min(1), | ||
| }), | ||
| }) | ||
| .nullable() | ||
| .optional(), | ||
| toRelationMetadata: z | ||
| .object({ | ||
| __typename: z.literal('relation').optional(), | ||
| id: z.string().uuid(), | ||
| relationType: z.nativeEnum(RelationMetadataType), | ||
| fromFieldMetadataId: z.string().uuid(), | ||
| fromObjectMetadata: z.object({ | ||
| __typename: z.literal('object').optional(), | ||
| id: z.string().uuid(), | ||
| dataSourceId: z.string().uuid(), | ||
| isRemote: z.boolean(), | ||
| isSystem: z.boolean(), | ||
| namePlural: z.string().trim().min(1), | ||
| nameSingular: z.string().trim().min(1), | ||
| }), | ||
| }) | ||
| .nullable() | ||
| .optional(), | ||
| type: z.nativeEnum(FieldMetadataType), | ||
| updatedAt: z.string().datetime(), | ||
| }) satisfies z.ZodType<FieldMetadataItem>; |
7 changes: 7 additions & 0 deletions
7
packages/twenty-front/src/modules/object-metadata/validation-schemas/metadataLabelSchema.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import { z } from 'zod'; | ||
|
|
||
| export const metadataLabelSchema = z | ||
| .string() | ||
| .trim() | ||
| .min(1) | ||
| .regex(/^[a-zA-Z][a-zA-Z0-9 ()]*$/); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
70 changes: 0 additions & 70 deletions
70
...wenty-front/src/modules/settings/data-model/components/SettingsObjectFieldFormSection.tsx
This file was deleted.
Oops, something went wrong.
23 changes: 0 additions & 23 deletions
23
...les/settings/data-model/components/__stories__/SettingsObjectFieldFormSection.stories.tsx
This file was deleted.
Oops, something went wrong.
87 changes: 87 additions & 0 deletions
87
...c/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldAboutForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { Controller, useFormContext } from 'react-hook-form'; | ||
| import styled from '@emotion/styled'; | ||
| import { z } from 'zod'; | ||
|
|
||
| import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; | ||
| import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fieldMetadataItemSchema'; | ||
| import { IconPicker } from '@/ui/input/components/IconPicker'; | ||
| import { TextArea } from '@/ui/input/components/TextArea'; | ||
| import { TextInput } from '@/ui/input/components/TextInput'; | ||
|
|
||
| export const settingsDataModelFieldAboutFormSchema = | ||
| fieldMetadataItemSchema.pick({ | ||
| description: true, | ||
| icon: true, | ||
| label: true, | ||
| }); | ||
|
|
||
| type SettingsDataModelFieldAboutFormValues = z.infer< | ||
| typeof settingsDataModelFieldAboutFormSchema | ||
| >; | ||
|
|
||
| type SettingsDataModelFieldAboutFormProps = { | ||
| disabled?: boolean; | ||
| fieldMetadataItem?: FieldMetadataItem; | ||
| }; | ||
|
|
||
| const StyledInputsContainer = styled.div` | ||
| display: flex; | ||
| gap: ${({ theme }) => theme.spacing(2)}; | ||
| margin-bottom: ${({ theme }) => theme.spacing(2)}; | ||
| width: 100%; | ||
| `; | ||
|
|
||
| export const SettingsDataModelFieldAboutForm = ({ | ||
| disabled, | ||
| fieldMetadataItem, | ||
| }: SettingsDataModelFieldAboutFormProps) => { | ||
| const { control } = useFormContext<SettingsDataModelFieldAboutFormValues>(); | ||
|
|
||
| return ( | ||
| <> | ||
| <StyledInputsContainer> | ||
| <Controller | ||
| name="icon" | ||
| control={control} | ||
| defaultValue={fieldMetadataItem?.icon ?? 'IconUsers'} | ||
| render={({ field: { onChange, value } }) => ( | ||
| <IconPicker | ||
| disabled={disabled} | ||
| selectedIconKey={value ?? ''} | ||
| onChange={({ iconKey }) => onChange(iconKey)} | ||
| variant="primary" | ||
| /> | ||
| )} | ||
| /> | ||
| <Controller | ||
| name="label" | ||
| control={control} | ||
| defaultValue={fieldMetadataItem?.label} | ||
| render={({ field: { onChange, value } }) => ( | ||
| <TextInput | ||
| placeholder="Employees" | ||
| value={value} | ||
| onChange={onChange} | ||
| disabled={disabled} | ||
| fullWidth | ||
| /> | ||
| )} | ||
| /> | ||
| </StyledInputsContainer> | ||
| <Controller | ||
| name="description" | ||
| control={control} | ||
| defaultValue={fieldMetadataItem?.description} | ||
| render={({ field: { onChange, value } }) => ( | ||
| <TextArea | ||
| placeholder="Write a description" | ||
| minRows={4} | ||
| value={value ?? undefined} | ||
| onChange={onChange} | ||
| disabled={disabled} | ||
| /> | ||
| )} | ||
| /> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.