From 55b8c69a3e43f27aeea179f075f0d07c622fc418 Mon Sep 17 00:00:00 2001 From: martmull Date: Wed, 13 Nov 2024 14:19:11 +0100 Subject: [PATCH] Move HorizontalSeparator to twenty-ui --- .../sign-in-up/components/SignInUpForm.tsx | 20 +++++++++---------- .../components/SettingsSSOSAMLForm.tsx | 18 ++++++++--------- ...rkflowEditActionFormServerlessFunction.tsx | 3 +-- .../src/pages/auth/SSOWorkspaceSelection.tsx | 3 +-- packages/twenty-ui/src/display/index.ts | 1 + .../text}/components/HorizontalSeparator.tsx | 0 .../HorizontalSeparator.stories.tsx | 15 ++++++++++++++ 7 files changed, 37 insertions(+), 23 deletions(-) rename packages/{twenty-front/src/modules/auth/sign-in-up => twenty-ui/src/display/text}/components/HorizontalSeparator.tsx (100%) create mode 100644 packages/twenty-ui/src/display/text/components/__stories__/HorizontalSeparator.stories.tsx diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx index 228fde192827..54474bc1a30f 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx @@ -1,5 +1,14 @@ import { FooterNote } from '@/auth/sign-in-up/components/FooterNote'; -import { HorizontalSeparator } from '@/auth/sign-in-up/components/HorizontalSeparator'; +import { + HorizontalSeparator, + ActionLink, + IconGoogle, + IconKey, + IconMicrosoft, + Loader, + MainButton, + StyledText, +} from 'twenty-ui'; import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword'; import { SignInUpMode, useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp'; import { @@ -20,15 +29,6 @@ import { useMemo, useState } from 'react'; import { Controller } from 'react-hook-form'; import { useRecoilState, useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; -import { - ActionLink, - IconGoogle, - IconKey, - IconMicrosoft, - Loader, - MainButton, - StyledText, -} from 'twenty-ui'; import { isDefined } from '~/utils/isDefined'; const StyledContentContainer = styled.div` diff --git a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOSAMLForm.tsx b/packages/twenty-front/src/modules/settings/security/components/SettingsSSOSAMLForm.tsx index f42e3d8954fd..2f39960f000b 100644 --- a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOSAMLForm.tsx +++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSSOSAMLForm.tsx @@ -1,15 +1,7 @@ /* @license Enterprise */ -import { HorizontalSeparator } from '@/auth/sign-in-up/components/HorizontalSeparator'; -import { parseSAMLMetadataFromXMLFile } from '@/settings/security/utils/parseSAMLMetadataFromXMLFile'; -import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar'; -import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; -import { TextInput } from '@/ui/input/components/TextInput'; -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; -import { ChangeEvent, useRef } from 'react'; -import { useFormContext } from 'react-hook-form'; import { + HorizontalSeparator, Button, H2Title, IconCheck, @@ -18,6 +10,14 @@ import { IconUpload, Section, } from 'twenty-ui'; +import { parseSAMLMetadataFromXMLFile } from '@/settings/security/utils/parseSAMLMetadataFromXMLFile'; +import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar'; +import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; +import { TextInput } from '@/ui/input/components/TextInput'; +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; +import { ChangeEvent, useRef } from 'react'; +import { useFormContext } from 'react-hook-form'; import { REACT_APP_SERVER_BASE_URL } from '~/config'; import { isDefined } from '~/utils/isDefined'; diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx index 4902b3197342..95bbcd3f9341 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx @@ -7,12 +7,11 @@ import { WorkflowEditGenericFormBase } from '@/workflow/components/WorkflowEditG import VariableTagInput from '@/workflow/search-variables/components/VariableTagInput'; import { WorkflowCodeStep } from '@/workflow/types/Workflow'; import { useTheme } from '@emotion/react'; -import { IconCode, isDefined } from 'twenty-ui'; +import { IconCode, isDefined, HorizontalSeparator } from 'twenty-ui'; import { useDebouncedCallback } from 'use-debounce'; import { getDefaultFunctionInputFromInputSchema } from '@/workflow/utils/getDefaultFunctionInputFromInputSchema'; import { FunctionInput } from '@/workflow/types/FunctionInput'; import { mergeDefaultFunctionInputAndFunctionInput } from '@/workflow/utils/mergeDefaultFunctionInputAndFunctionInput'; -import { HorizontalSeparator } from 'packages/twenty-front/src/modules/auth/sign-in-up/components/HorizontalSeparator'; const StyledContainer = styled.div` display: inline-flex; diff --git a/packages/twenty-front/src/pages/auth/SSOWorkspaceSelection.tsx b/packages/twenty-front/src/pages/auth/SSOWorkspaceSelection.tsx index 1767b134262e..617728095e7b 100644 --- a/packages/twenty-front/src/pages/auth/SSOWorkspaceSelection.tsx +++ b/packages/twenty-front/src/pages/auth/SSOWorkspaceSelection.tsx @@ -1,14 +1,13 @@ /* @license Enterprise */ import { FooterNote } from '@/auth/sign-in-up/components/FooterNote'; -import { HorizontalSeparator } from '@/auth/sign-in-up/components/HorizontalSeparator'; +import { HorizontalSeparator, MainButton } from 'twenty-ui'; import { useSSO } from '@/auth/sign-in-up/hooks/useSSO'; import { availableSSOIdentityProvidersState } from '@/auth/states/availableWorkspacesForSSO'; import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/guessSSOIdentityProviderIconByUrl'; import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { MainButton } from 'twenty-ui'; const StyledContentContainer = styled.div` margin-bottom: ${({ theme }) => theme.spacing(8)}; diff --git a/packages/twenty-ui/src/display/index.ts b/packages/twenty-ui/src/display/index.ts index b0f67a365fdf..45144332b2bf 100644 --- a/packages/twenty-ui/src/display/index.ts +++ b/packages/twenty-ui/src/display/index.ts @@ -50,6 +50,7 @@ export * from './info/components/Info'; export * from './status/components/Status'; export * from './tag/components/Tag'; export * from './text/components/SeparatorLineText'; +export * from './text/components/HorizontalSeparator'; export * from './tooltip/AppTooltip'; export * from './tooltip/OverflowingTextWithTooltip'; export * from './typography/components/H1Title'; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/HorizontalSeparator.tsx b/packages/twenty-ui/src/display/text/components/HorizontalSeparator.tsx similarity index 100% rename from packages/twenty-front/src/modules/auth/sign-in-up/components/HorizontalSeparator.tsx rename to packages/twenty-ui/src/display/text/components/HorizontalSeparator.tsx diff --git a/packages/twenty-ui/src/display/text/components/__stories__/HorizontalSeparator.stories.tsx b/packages/twenty-ui/src/display/text/components/__stories__/HorizontalSeparator.stories.tsx new file mode 100644 index 000000000000..641fd7779b6b --- /dev/null +++ b/packages/twenty-ui/src/display/text/components/__stories__/HorizontalSeparator.stories.tsx @@ -0,0 +1,15 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { ComponentDecorator } from '@ui/testing'; + +import { HorizontalSeparator } from '../HorizontalSeparator'; + +const meta: Meta = { + title: 'UI/Display/Text/HorizontalSeparator', + component: HorizontalSeparator, + decorators: [ComponentDecorator], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {};