From 67fb750ef6f85aa48c6a860badae804a2027e61e Mon Sep 17 00:00:00 2001 From: "gitstart-app[bot]" <57568882+gitstart-app[bot]@users.noreply.github.com> Date: Thu, 24 Oct 2024 13:39:25 +0200 Subject: [PATCH] Migrate to twenty-ui - input/color-scheme (#7995) This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-7063](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7063). --- ### Description - Move color-scheme components to `twenty-ui` Fixes twentyhq/private-issues#93 Co-authored-by: gitstart-twenty Co-authored-by: Charles Bochet --- .../profile/appearance/components/SettingsAppearance.tsx | 3 +-- packages/twenty-front/tsup.ui.index.tsx | 2 -- .../src}/input/color-scheme/components/ColorSchemeCard.tsx | 7 +++---- .../input/color-scheme/components/ColorSchemePicker.tsx | 6 ++---- .../components/__stories__/ColorSchemeCard.stories.tsx | 2 +- packages/twenty-ui/src/input/index.ts | 3 +++ packages/twenty-ui/src/input/types/ColorScheme.ts | 1 + .../src/content/twenty-ui/input/color-scheme.mdx | 4 ++-- 8 files changed, 13 insertions(+), 15 deletions(-) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/input/color-scheme/components/ColorSchemeCard.tsx (97%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/input/color-scheme/components/ColorSchemePicker.tsx (91%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx (95%) create mode 100644 packages/twenty-ui/src/input/types/ColorScheme.ts diff --git a/packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx b/packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx index 891d69d957ad..c049f8d89525 100644 --- a/packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx +++ b/packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx @@ -1,9 +1,8 @@ -import { H2Title } from 'twenty-ui'; +import { ColorSchemePicker, H2Title } from 'twenty-ui'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath'; import { SettingsPath } from '@/types/SettingsPath'; -import { ColorSchemePicker } from '@/ui/input/color-scheme/components/ColorSchemePicker'; import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer'; import { Section } from '@/ui/layout/section/components/Section'; import { useColorScheme } from '@/ui/theme/hooks/useColorScheme'; diff --git a/packages/twenty-front/tsup.ui.index.tsx b/packages/twenty-front/tsup.ui.index.tsx index 597f9d2cd86c..53c921e4f520 100644 --- a/packages/twenty-front/tsup.ui.index.tsx +++ b/packages/twenty-front/tsup.ui.index.tsx @@ -4,8 +4,6 @@ export { ThemeProvider } from '@emotion/react'; export * from 'twenty-ui'; export * from './src/modules/ui/feedback/progress-bar/components/CircularProgressBar'; export * from './src/modules/ui/feedback/progress-bar/components/ProgressBar'; -export * from './src/modules/ui/input/color-scheme/components/ColorSchemeCard'; -export * from './src/modules/ui/input/color-scheme/components/ColorSchemePicker'; export * from './src/modules/ui/input/components/AutosizeTextInput'; export * from './src/modules/ui/input/components/Checkbox'; export * from './src/modules/ui/input/components/EntityTitleDoubleTextInput'; diff --git a/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx similarity index 97% rename from packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx rename to packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx index 85bb45a675aa..10614c5e230a 100644 --- a/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx +++ b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx @@ -1,14 +1,13 @@ -import React from 'react'; import styled from '@emotion/styled'; +import { Checkmark } from '@ui/display/checkmark/components/Checkmark'; +import { ColorScheme } from '@ui/input/types/ColorScheme'; import { AnimatePresence, AnimationControls, motion, useAnimation, } from 'framer-motion'; -import { Checkmark } from 'twenty-ui'; - -import { ColorScheme } from '@/workspace-member/types/WorkspaceMember'; +import React from 'react'; const StyledColorSchemeBackground = styled.div< Pick diff --git a/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemePicker.tsx b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx similarity index 91% rename from packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemePicker.tsx rename to packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx index 4835fab24755..d6e29dc55f0d 100644 --- a/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemePicker.tsx +++ b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx @@ -1,10 +1,8 @@ -import React from 'react'; import styled from '@emotion/styled'; -import { ColorScheme } from '@/workspace-member/types/WorkspaceMember'; - +import { ColorScheme } from '@ui/input/types/ColorScheme'; +import { MOBILE_VIEWPORT } from '@ui/theme'; import { ColorSchemeCard } from './ColorSchemeCard'; -import { MOBILE_VIEWPORT } from 'twenty-ui'; const StyledContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/ui/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx b/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx similarity index 95% rename from packages/twenty-front/src/modules/ui/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx rename to packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx index 700845eb03bf..81a36fbb344b 100644 --- a/packages/twenty-front/src/modules/ui/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx +++ b/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; +import { ComponentDecorator } from '@ui/testing'; import { ColorSchemeCard } from '../ColorSchemeCard'; diff --git a/packages/twenty-ui/src/input/index.ts b/packages/twenty-ui/src/input/index.ts index 0733094165b6..8fa2e1601904 100644 --- a/packages/twenty-ui/src/input/index.ts +++ b/packages/twenty-ui/src/input/index.ts @@ -12,4 +12,7 @@ export * from './button/components/LightIconButton'; export * from './button/components/LightIconButtonGroup'; export * from './button/components/MainButton'; export * from './button/components/RoundedIconButton'; +export * from './color-scheme/components/ColorSchemeCard'; +export * from './color-scheme/components/ColorSchemePicker'; export * from './components/Toggle'; +export * from './types/ColorScheme'; diff --git a/packages/twenty-ui/src/input/types/ColorScheme.ts b/packages/twenty-ui/src/input/types/ColorScheme.ts new file mode 100644 index 000000000000..0a5f3723d781 --- /dev/null +++ b/packages/twenty-ui/src/input/types/ColorScheme.ts @@ -0,0 +1 @@ +export type ColorScheme = 'Dark' | 'Light' | 'System'; diff --git a/packages/twenty-website/src/content/twenty-ui/input/color-scheme.mdx b/packages/twenty-website/src/content/twenty-ui/input/color-scheme.mdx index 8edd3c5501eb..2a8f27a40533 100644 --- a/packages/twenty-website/src/content/twenty-ui/input/color-scheme.mdx +++ b/packages/twenty-website/src/content/twenty-ui/input/color-scheme.mdx @@ -11,7 +11,7 @@ Represents different color schemes and is specially tailored for light and dark - { return ( @@ -43,7 +43,7 @@ Allows users to choose between different color schemes. - { return