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

[REFACTOR] Twenty UI multi barrel (#11301)

Browse Source 
# Introduction
closes https://github.com/twentyhq/core-team-issues/issues/591
Same than for `twenty-shared` made in
https://github.com/twentyhq/twenty/pull/11083.

## TODO
- [x] Manual migrate twenty-website twenty-ui imports

## What's next:
- Generate barrel and migration script factorization within own package
+ tests
- Refactoring using preconstruct ? TimeBox
- Lint circular dependencies
- Lint import from barrel and forbid them

### Preconstruct
We need custom rollup plugins addition, but preconstruct does not expose
its rollup configuration. It might be possible to handle this using the
babel overrides. But was a big tunnel.
We could give it a try afterwards ! ( allowing cjs interop and stuff
like that )
Stuck to vite lib app

Closed related PRs:
- https://github.com/twentyhq/twenty/pull/11294
- https://github.com/twentyhq/twenty/pull/11203
This commit is contained in:
Paul Rastoin
2025-04-03 11:47:55 +02:00
committed by GitHub
parent 8c9fcfe5a4
commit 4a4e65fe4a
1009 changed files with 5757 additions and 2828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
View File

@ -7,10 +7,12 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useLocation, useParams, useSearchParams } from 'react-router-dom';
import { Button, IconChevronDown, MenuItem } from 'twenty-ui';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { t } from '@lingui/core/macro';
import { isDefined } from 'twenty-shared/utils';
import { Button } from 'twenty-ui/input';
import { IconChevronDown } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
const StyledContainer = styled.div`
align-items: center;

2
packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx
View File

@ -3,7 +3,7 @@ import { ReactNode } from 'react';
import { StyledFormCardTitle } from '@/settings/data-model/fields/components/StyledFormCardTitle';
import { Trans } from '@lingui/react/macro';
import { Card, CardContent } from 'twenty-ui';
import { Card, CardContent } from 'twenty-ui/layout';
type SettingsDataModelPreviewFormCardProps = {
className?: string;

11
packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts
View File

@ -1,14 +1,13 @@
import { RelationDefinitionType } from '~/generated-metadata/graphql';
import OneToManySvg from '../assets/OneToMany.svg';
import OneToOneSvg from '../assets/OneToOne.svg';
import { RelationType } from '../types/RelationType';
import {
IconComponent,
IllustrationIconManyToMany,
IllustrationIconOneToMany,
IllustrationIconOneToOne,
} from 'twenty-ui';
import { RelationDefinitionType } from '~/generated-metadata/graphql';
import OneToManySvg from '../assets/OneToMany.svg';
import OneToOneSvg from '../assets/OneToOne.svg';
import { RelationType } from '../types/RelationType';
} from 'twenty-ui/display';
export const RELATION_TYPES: Record<
RelationType,

6
packages/twenty-front/src/modules/settings/data-model/constants/SettingsCompositeFieldTypeConfigs.ts
View File

@ -11,6 +11,8 @@ import {
} from '@/object-record/record-field/types/FieldMetadata';
import { SettingsFieldTypeConfig } from '@/settings/data-model/constants/SettingsNonCompositeFieldTypeConfigs';
import { CompositeFieldType } from '@/settings/data-model/types/CompositeFieldType';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { ConnectedAccountProvider } from 'twenty-shared/types';
import {
IllustrationIconCurrency,
IllustrationIconLink,
@ -20,9 +22,7 @@ import {
IllustrationIconSetting,
IllustrationIconText,
IllustrationIconUser,
} from 'twenty-ui';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { ConnectedAccountProvider } from 'twenty-shared/types';
} from 'twenty-ui/display';
export type SettingsCompositeFieldTypeConfig<T> = SettingsFieldTypeConfig<T> & {
subFields: (keyof T)[];

5
packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts
View File

@ -1,3 +1,4 @@
import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
import {
IconCoins,
IconComponent,
@ -51,9 +52,7 @@ import {
IconCurrencyYen,
IconCurrencyYuan,
IconCurrencyZloty,
} from 'twenty-ui';
import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
} from 'twenty-ui/display';
export const SETTINGS_FIELD_CURRENCY_CODES: Record<
CurrencyCode,

31
packages/twenty-front/src/modules/settings/data-model/constants/SettingsNonCompositeFieldTypeConfigs.ts
View File

@ -1,19 +1,3 @@
import {
IconComponent,
IllustrationIconArray,
IllustrationIconCalendarEvent,
IllustrationIconCalendarTime,
IllustrationIconJson,
IllustrationIconNumbers,
IllustrationIconOneToMany,
IllustrationIconStar,
IllustrationIconTag,
IllustrationIconTags,
IllustrationIconText,
IllustrationIconToggle,
IllustrationIconUid,
} from 'twenty-ui';
import {
FieldArrayValue,
FieldBooleanValue,
@ -32,6 +16,21 @@ import { DEFAULT_DATE_VALUE } from '@/settings/data-model/constants/DefaultDateV
import { SettingsFieldTypeCategoryType } from '@/settings/data-model/types/SettingsFieldTypeCategoryType';
import { SettingsNonCompositeFieldType } from '@/settings/data-model/types/SettingsNonCompositeFieldType';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import {
IconComponent,
IllustrationIconArray,
IllustrationIconCalendarEvent,
IllustrationIconCalendarTime,
IllustrationIconJson,
IllustrationIconNumbers,
IllustrationIconOneToMany,
IllustrationIconStar,
IllustrationIconTag,
IllustrationIconTags,
IllustrationIconText,
IllustrationIconToggle,
IllustrationIconUid,
} from 'twenty-ui/display';
DEFAULT_DATE_VALUE.setFullYear(DEFAULT_DATE_VALUE.getFullYear() + 2);

9
packages/twenty-front/src/modules/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressForm.tsx
View File

@ -6,15 +6,12 @@ import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsO
import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
import { Select } from '@/ui/input/components/Select';
import { useLingui } from '@lingui/react/macro';
import {
IconCircleOff,
IconComponentProps,
IconMap,
SelectOption,
} from 'twenty-ui';
import { z } from 'zod';
import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';
import { IconCircleOff, IconComponentProps, IconMap } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
type SettingsDataModelFieldAddressFormProps = {
disabled?: boolean;
defaultCountry?: string;

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx
View File

@ -1,5 +1,4 @@
import { Controller, useFormContext } from 'react-hook-form';
import { IconCheck, IconX } from 'twenty-ui';
import { z } from 'zod';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
@ -7,6 +6,7 @@ import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsO
import { useBooleanSettingsFormInitialValues } from '@/settings/data-model/fields/forms/boolean/hooks/useBooleanSettingsFormInitialValues';
import { Select } from '@/ui/input/components/Select';
import { useLingui } from '@lingui/react/macro';
import { IconCheck, IconX } from 'twenty-ui/display';
export const settingsDataModelFieldBooleanFormSchema = z.object({
defaultValue: z.boolean(),

6
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx
View File

@ -14,14 +14,14 @@ import { TextInput } from '@/ui/input/components/TextInput';
import { useTheme } from '@emotion/react';
import { useLingui } from '@lingui/react/macro';
import { isDefined } from 'twenty-shared/utils';
import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
import {
AppTooltip,
Card,
IconInfoCircle,
IconRefresh,
TooltipDelay,
} from 'twenty-ui';
import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
} from 'twenty-ui/display';
import { Card } from 'twenty-ui/layout';
export const settingsDataModelFieldIconLabelFormSchema = (
existingOtherLabels: string[] = [],

3
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
View File

@ -16,11 +16,12 @@ import styled from '@emotion/styled';
import { Section } from '@react-email/components';
import { useState } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { H2Title, IconSearch, UndecoratedLink } from 'twenty-ui';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { SettingsDataModelFieldTypeFormValues } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { t } from '@lingui/core/macro';
import { H2Title, IconSearch } from 'twenty-ui/display';
import { UndecoratedLink } from 'twenty-ui/navigation';
type SettingsObjectNewFieldSelectorProps = {
className?: string;

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldDescriptionForm.stories.tsx
View File

@ -1,10 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { FormProviderDecorator } from '~/testing/decorators/FormProviderDecorator';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
import { SettingsDataModelFieldDescriptionForm } from '../SettingsDataModelFieldDescriptionForm';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof SettingsDataModelFieldDescriptionForm> = {
title: 'Modules/Settings/DataModel/SettingsDataModelFieldDescriptionForm',

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldIconLabelForm.stories.tsx
View File

@ -1,6 +1,5 @@
import styled from '@emotion/styled';
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { FormProviderDecorator } from '~/testing/decorators/FormProviderDecorator';
import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
@ -8,6 +7,7 @@ import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecora
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
import { SettingsDataModelFieldIconLabelForm } from '../SettingsDataModelFieldIconLabelForm';
import { ComponentDecorator } from 'twenty-ui/testing';
const StyledContainer = styled.div`
flex: 1;

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldSettingsFormCard.stories.tsx
View File

@ -1,5 +1,4 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { FormProviderDecorator } from '~/testing/decorators/FormProviderDecorator';
@ -11,6 +10,7 @@ import { graphqlMocks } from '~/testing/graphqlMocks';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
import { SettingsDataModelFieldSettingsFormCard } from '../SettingsDataModelFieldSettingsFormCard';
import { ComponentDecorator } from 'twenty-ui/testing';
const mockedCompanyObjectMetadataItem = generatedMockObjectMetadataItems.find(
(item) => item.nameSingular === 'company',

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/text/SettingsDataModelFieldTextForm.tsx
View File

@ -3,9 +3,9 @@ import { Controller, useFormContext } from 'react-hook-form';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
import { Select } from '@/ui/input/components/Select';
import { IconTextWrap } from 'twenty-ui';
import { z } from 'zod';
import { t } from '@lingui/core/macro';
import { IconTextWrap } from 'twenty-ui/display';
type SettingsDataModelFieldTextFormProps = {
disabled?: boolean;

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx
View File

@ -7,9 +7,9 @@ import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsO
import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fields/forms/currency/hooks/useCurrencySettingsFormInitialValues';
import { Select } from '@/ui/input/components/Select';
import { IconCurrencyDollar } from 'twenty-ui';
import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
import { useLingui } from '@lingui/react/macro';
import { IconCurrencyDollar } from 'twenty-ui/display';
export const settingsDataModelFieldCurrencyFormSchema = z.object({
defaultValue: currencyFieldDefaultValueSchema,

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx
View File

@ -5,7 +5,7 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
import { useDateSettingsFormInitialValues } from '@/settings/data-model/fields/forms/date/hooks/useDateSettingsFormInitialValues';
import { useLingui } from '@lingui/react/macro';
import { IconSlash } from 'twenty-ui';
import { IconSlash } from 'twenty-ui/display';
export const settingsDataModelFieldDateFormSchema = z.object({
settings: z

7
packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx
View File

@ -7,9 +7,14 @@ import { Separator } from '@/settings/components/Separator';
import { SettingsOptionCardContentCounter } from '@/settings/components/SettingsOptions/SettingsOptionCardContentCounter';
import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
import { Select } from '@/ui/input/components/Select';
import { IconDecimal, IconEye, IconNumber9, IconPercentage } from 'twenty-ui';
import { DEFAULT_DECIMAL_VALUE } from '~/utils/format/number';
import { t } from '@lingui/core/macro';
import {
IconDecimal,
IconEye,
IconNumber9,
IconPercentage,
} from 'twenty-ui/display';
export const settingsDataModelFieldNumberFormSchema = z.object({
settings: numberFieldDefaultValueSchema,

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesForm.tsx
View File

@ -7,11 +7,11 @@ import { countryCodeToCallingCode } from '@/settings/data-model/fields/preview/u
import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
import { Select } from '@/ui/input/components/Select';
import { CountryCode } from 'libphonenumber-js';
import { IconCircleOff, IconComponentProps, IconMap } from 'twenty-ui';
import { z } from 'zod';
import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';
import { useLingui } from '@lingui/react/macro';
import { IconCircleOff, IconComponentProps, IconMap } from 'twenty-ui/display';
type SettingsDataModelFieldPhonesFormProps = {
disabled?: boolean;

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx
View File

@ -1,6 +1,5 @@
import styled from '@emotion/styled';
import { Controller, useFormContext } from 'react-hook-form';
import { useIcons } from 'twenty-ui';
import { z } from 'zod';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
@ -18,6 +17,7 @@ import { TextInput } from '@/ui/input/components/TextInput';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { RelationDefinitionType } from '~/generated-metadata/graphql';
import { useLingui } from '@lingui/react/macro';
import { useIcons } from 'twenty-ui/display';
export const settingsDataModelFieldRelationFormSchema = z.object({
relation: z.object({

12
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
View File

@ -1,14 +1,6 @@
import styled from '@emotion/styled';
import { DropResult } from '@hello-pangea/dnd';
import { Controller, useFormContext } from 'react-hook-form';
import {
CardContent,
CardFooter,
IconPlus,
IconPoint,
LightButton,
MAIN_COLORS,
} from 'twenty-ui';
import { z } from 'zod';
import {
@ -33,6 +25,10 @@ import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/st
import { t } from '@lingui/core/macro';
import { useRecoilValue } from 'recoil';
import { SettingsDataModelFieldSelectFormOptionRow } from './SettingsDataModelFieldSelectFormOptionRow';
import { CardContent, CardFooter } from 'twenty-ui/layout';
import { IconPlus, IconPoint } from 'twenty-ui/display';
import { LightButton } from 'twenty-ui/input';
import { MAIN_COLORS } from 'twenty-ui/theme';
export const settingsDataModelFieldSelectFormSchema = z.object({
defaultValue: selectFieldDefaultValueSchema(),

11
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
View File

@ -9,6 +9,7 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { t } from '@lingui/core/macro';
import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';
import {
ColorSample,
IconCheck,
@ -16,12 +17,10 @@ import {
IconGripVertical,
IconTrash,
IconX,
LightIconButton,
MAIN_COLOR_NAMES,
MenuItem,
MenuItemSelectColor,
} from 'twenty-ui';
import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';
} from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { MAIN_COLOR_NAMES } from 'twenty-ui/theme';
import { MenuItem, MenuItemSelectColor } from 'twenty-ui/navigation';
type SettingsDataModelFieldSelectFormOptionRowProps = {
className?: string;

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/utils/generateNewSelectOption.ts
View File

@ -1,9 +1,9 @@
import { getNextThemeColor } from 'twenty-ui';
import { v4 } from 'uuid';
import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
import { generateNewSelectOptionLabel } from '@/settings/data-model/fields/forms/select/utils/generateNewSelectOptionLabel';
import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';
import { getNextThemeColor } from 'twenty-ui/theme';
export const generateNewSelectOption = (
options: FieldMetadataItemOption[],

2
packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx
View File

@ -1,6 +1,5 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useIcons } from 'twenty-ui';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
@ -15,6 +14,7 @@ import { SettingsDataModelSetPreviewRecordEffect } from '@/settings/data-model/f
import { useFieldPreviewValue } from '@/settings/data-model/fields/preview/hooks/useFieldPreviewValue';
import { usePreviewRecord } from '@/settings/data-model/fields/preview/hooks/usePreviewRecord';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { useIcons } from 'twenty-ui/display';
export type SettingsDataModelFieldPreviewProps = {
fieldMetadataItem: Pick<

2
packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx
View File

@ -5,7 +5,7 @@ import {
SettingsDataModelFieldPreviewProps,
} from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview';
import { SettingsDataModelObjectSummary } from '@/settings/data-model/objects/components/SettingsDataModelObjectSummary';
import { Card, CardContent } from 'twenty-ui';
import { Card, CardContent } from 'twenty-ui/layout';
export type SettingsDataModelFieldPreviewCardProps =
SettingsDataModelFieldPreviewProps & {

2
packages/twenty-front/src/modules/settings/data-model/fields/preview/components/__stories__/SettingsDataModelFieldPreviewCard.stories.tsx
View File

@ -1,5 +1,4 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
@ -9,6 +8,7 @@ import { graphqlMocks } from '~/testing/graphqlMocks';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
import { SettingsDataModelFieldPreviewCard } from '../SettingsDataModelFieldPreviewCard';
import { ComponentDecorator } from 'twenty-ui/testing';
const mockedCompanyObjectMetadataItem = generatedMockObjectMetadataItems.find(
(item) => item.nameSingular === 'company',

3
packages/twenty-front/src/modules/settings/data-model/fields/preview/states/settingsPreviewRecordIdState.ts
View File

@ -1,5 +1,4 @@
import { createState } from '@ui/utilities/state/utils/createState';
import { createState } from 'twenty-ui/utilities';
export const settingsPreviewRecordIdState = createState<string | null>({
key: 'settingsPreviewRecordIdState',
defaultValue: null,

7
packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverview.tsx
View File

@ -20,17 +20,16 @@ import {
useReactFlow,
} from '@xyflow/react';
import { useCallback, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { Button, IconButtonGroup } from 'twenty-ui/input';
import {
Button,
IconButtonGroup,
IconLock,
IconLockOpen,
IconMaximize,
IconMinus,
IconPlus,
IconX,
} from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
} from 'twenty-ui/display';
const nodeTypes: NodeTypes = {
object: SettingsDataModelOverviewObject,

2
packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx
View File

@ -2,11 +2,11 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Handle, Position } from '@xyflow/react';
import { useRecoilValue } from 'recoil';
import { useIcons } from 'twenty-ui';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { RelationDefinitionType } from '~/generated-metadata/graphql';
import { useIcons } from 'twenty-ui/display';
type ObjectFieldRowProps = {
field: FieldMetadataItem;

2
packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation.tsx
View File

@ -1,8 +1,8 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useIcons } from 'twenty-ui';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { useIcons } from 'twenty-ui/display';
type ObjectFieldRowWithoutRelationProps = {
field: FieldMetadataItem;

2
packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx
View File

@ -2,7 +2,6 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Node, NodeProps } from '@xyflow/react';
import { Link } from 'react-router-dom';
import { IconChevronDown, IconChevronUp, useIcons } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
@ -17,6 +16,7 @@ import '@xyflow/react/dist/style.css';
import { useState } from 'react';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { capitalize } from 'twenty-shared/utils';
import { IconChevronDown, IconChevronUp, useIcons } from 'twenty-ui/display';
type SettingsDataModelOverviewObjectNode = Node<ObjectMetadataItem, 'object'>;
type SettingsDataModelOverviewObjectProps =

3
packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx
View File

@ -1,10 +1,11 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Checkbox, useIcons } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import { Checkbox } from 'twenty-ui/input';
import { useIcons } from 'twenty-ui/display';
type SettingsAvailableStandardObjectItemTableRowProps = {
isSelected?: boolean;

4
packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection.tsx
View File

@ -1,5 +1,3 @@
import { H2Title, Section } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { Table } from '@/ui/layout/table/components/Table';
import { TableBody } from '@/ui/layout/table/components/TableBody';
@ -9,6 +7,8 @@ import {
SettingsAvailableStandardObjectItemTableRow,
StyledAvailableStandardObjectTableRow,
} from './SettingsAvailableStandardObjectItemTableRow';
import { H2Title } from 'twenty-ui/display';
import { Section } from 'twenty-ui/layout';
type SettingsAvailableStandardObjectsSectionProps = {
objectItems: ObjectMetadataItem[];

13
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx
View File

@ -1,16 +1,15 @@
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import {
IconArchive,
IconDotsVertical,
IconEye,
IconPencil,
IconTextSize,
LightIconButton,
MenuItem,
} from 'twenty-ui';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
} from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { MenuItem } from 'twenty-ui/navigation';
type SettingsObjectFieldActiveActionDropdownProps = {
isCustomField?: boolean;

2
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
View File

@ -1,10 +1,10 @@
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Link } from 'react-router-dom';
import { IconComponent, IconTwentyStar } from 'twenty-ui';
import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSettingsFieldTypeConfig';
import { IconComponent, IconTwentyStar } from 'twenty-ui/display';
type SettingsObjectFieldDataTypeProps = {
to?: string;

17
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx
View File

@ -1,18 +1,17 @@
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { t } from '@lingui/core/macro';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import {
IconArchiveOff,
IconDotsVertical,
IconEye,
IconPencil,
IconTrash,
LightIconButton,
MenuItem,
} from 'twenty-ui';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { t } from '@lingui/core/macro';
import { FieldMetadataType } from '~/generated-metadata/graphql';
} from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { MenuItem } from 'twenty-ui/navigation';
type SettingsObjectFieldInactiveActionDropdownProps = {
isCustomField?: boolean;

10
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
View File

@ -19,13 +19,6 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useMemo } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import {
IconMinus,
IconPlus,
LightIconButton,
UndecoratedLink,
useIcons,
} from 'twenty-ui';
import { RelationDefinitionType } from '~/generated-metadata/graphql';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { SettingsObjectDetailTableItem } from '~/pages/settings/data-model/types/SettingsObjectDetailTableItem';
@ -33,6 +26,9 @@ import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { RELATION_TYPES } from '../../constants/RelationTypes';
import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
import { isDefined } from 'twenty-shared/utils';
import { IconMinus, IconPlus, useIcons } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { UndecoratedLink } from 'twenty-ui/navigation';
type SettingsObjectFieldItemTableRowProps = {
settingsObjectDetailTableItem: SettingsObjectDetailTableItem;

2
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
View File

@ -1,13 +1,13 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { ReactNode } from 'react';
import { useIcons } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/components/SettingsDataModelObjectTypeTag';
import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import { useIcons } from 'twenty-ui/display';
export type SettingsObjectMetadataItemTableRowProps = {
action: ReactNode;

16
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx
View File

@ -1,13 +1,5 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import {
IconArchive,
IconDotsVertical,
IconPencil,
LightIconButton,
MenuItem,
useIcons,
} from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
@ -16,6 +8,14 @@ import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLab
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import {
IconArchive,
IconDotsVertical,
IconPencil,
useIcons,
} from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { MenuItem } from 'twenty-ui/navigation';
type SettingsObjectSummaryCardProps = {
objectMetadataItem: ObjectMetadataItem;

5
packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectFields.tsx
View File

@ -3,7 +3,10 @@ import { SettingsObjectFieldTable } from '~/pages/settings/data-model/SettingsOb
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { Button, H2Title, IconPlus, Section, UndecoratedLink } from 'twenty-ui';
import { Button } from 'twenty-ui/input';
import { H2Title, IconPlus } from 'twenty-ui/display';
import { Section } from 'twenty-ui/layout';
import { UndecoratedLink } from 'twenty-ui/navigation';
const StyledDiv = styled.div`
display: flex;

4
packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectIndexes.tsx
View File

@ -1,7 +1,7 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { H2Title, Section } from 'twenty-ui';
import { SettingsObjectIndexTable } from '~/pages/settings/data-model/SettingsObjectIndexTable';
import { H2Title } from 'twenty-ui/display';
import { Section } from 'twenty-ui/layout';
type ObjectIndexesProps = {
objectMetadataItem: ObjectMetadataItem;

4
packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx
View File

@ -1,5 +1,4 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { Button, H2Title, IconArchive, Section } from 'twenty-ui';
import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
@ -9,6 +8,9 @@ import { SettingsPath } from '@/types/SettingsPath';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { Button } from 'twenty-ui/input';
import { H2Title, IconArchive } from 'twenty-ui/display';
import { Section } from 'twenty-ui/layout';
type ObjectSettingsProps = {
objectMetadataItem: ObjectMetadataItem;

2
packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectSummary.tsx
View File

@ -1,10 +1,10 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/components/SettingsDataModelObjectTypeTag';
import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display';
export type SettingsDataModelObjectSummaryProps = {
className?: string;

2
packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectTypeTag.tsx
View File

@ -1,5 +1,5 @@
import { Tag } from 'twenty-ui';
import { ObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
import { Tag } from 'twenty-ui/components';
type SettingsDataModelObjectTypeTagProps = {
objectTypeLabel: ObjectTypeLabel;

4
packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx
View File

@ -1,10 +1,12 @@
import styled from '@emotion/styled';
import { Card, FloatingButton, IconEye } from 'twenty-ui';
import { SettingsPath } from '@/types/SettingsPath';
import { useLingui } from '@lingui/react/macro';
import DarkCoverImage from '../../assets/cover-dark.png';
import LightCoverImage from '../../assets/cover-light.png';
import { Card } from 'twenty-ui/layout';
import { FloatingButton } from 'twenty-ui/input';
import { IconEye } from 'twenty-ui/display';
const StyledCoverImageContainer = styled(Card)`
align-items: center;

11
packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown.tsx
View File

@ -1,14 +1,9 @@
import {
IconArchiveOff,
IconDotsVertical,
IconTrash,
LightIconButton,
MenuItem,
} from 'twenty-ui';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { IconArchiveOff, IconDotsVertical, IconTrash } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { MenuItem } from 'twenty-ui/navigation';
type SettingsObjectInactiveMenuDropDownProps = {
isCustomObject: boolean;

2
packages/twenty-front/src/modules/settings/data-model/objects/components/__stories__/SettingsObjectInactiveMenuDropDown.stories.tsx
View File

@ -1,8 +1,8 @@
import { Decorator, Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, within } from '@storybook/test';
import { ComponentDecorator } from 'twenty-ui';
import { SettingsObjectInactiveMenuDropDown } from '../SettingsObjectInactiveMenuDropDown';
import { ComponentDecorator } from 'twenty-ui/testing';
const handleActivateMockFunction = fn();
const handleDeleteMockFunction = fn();

8
packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
View File

@ -12,15 +12,15 @@ import { useLingui } from '@lingui/react/macro';
import { plural } from 'pluralize';
import { Controller, useFormContext } from 'react-hook-form';
import { isDefined } from 'twenty-shared/utils';
import { StringKeyOf } from 'type-fest';
import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
import {
AppTooltip,
Card,
IconInfoCircle,
IconRefresh,
TooltipDelay,
} from 'twenty-ui';
import { StringKeyOf } from 'type-fest';
import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
} from 'twenty-ui/display';
import { Card } from 'twenty-ui/layout';
type SettingsDataModelObjectAboutFormProps = {
disableEdition?: boolean;

3
packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx
View File

@ -1,7 +1,6 @@
import styled from '@emotion/styled';
import { useMemo } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { IconCircleOff, SelectOption, useIcons } from 'twenty-ui';
import { ZodError, isDirty, z } from 'zod';
import { LABEL_IDENTIFIER_FIELD_METADATA_TYPES } from '@/object-metadata/constants/LabelIdentifierFieldMetadataTypes';
@ -14,6 +13,8 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Select } from '@/ui/input/components/Select';
import { zodResolver } from '@hookform/resolvers/zod';
import { t } from '@lingui/core/macro';
import { IconCircleOff, useIcons } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
export const settingsDataModelObjectIdentifiersFormSchema =
objectMetadataItemSchema.pick({

2
packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx
View File

@ -8,7 +8,7 @@ import { SettingsDataModelFieldPreviewCard } from '@/settings/data-model/fields/
import { SettingsDataModelObjectSummary } from '@/settings/data-model/objects/components/SettingsDataModelObjectSummary';
import { SettingsDataModelObjectIdentifiersForm } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm';
import { Trans } from '@lingui/react/macro';
import { Card, CardContent } from 'twenty-ui';
import { Card, CardContent } from 'twenty-ui/layout';
type SettingsDataModelObjectSettingsFormCardProps = {
objectMetadataItem: ObjectMetadataItem;

3
packages/twenty-front/src/modules/settings/data-model/objects/forms/components/__stories__/SettingsDataModelObjectAboutForm.stories.tsx
View File

@ -1,6 +1,5 @@
import styled from '@emotion/styled';
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { FormProviderDecorator } from '~/testing/decorators/FormProviderDecorator';
import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
@ -8,6 +7,8 @@ import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecora
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
import { SettingsDataModelObjectAboutForm } from '../SettingsDataModelObjectAboutForm';
import { ComponentDecorator } from 'twenty-ui/testing';
const mockedCompanyObjectMetadataItem = generatedMockObjectMetadataItems.find(
(item) => item.nameSingular === 'company',
);