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 <[email protected]> Co-authored-by: Charles Bochet <[email protected]>
twentyhq · Oct 24, 2024 · 67fb750 · 67fb750
1 parent 5ad8ff8
commit 67fb750
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 15 deletions.
diff --git a/...ages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx b/...ages/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
@@ -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/...lor-scheme/components/ColorSchemeCard.tsx → ...lor-scheme/components/ColorSchemeCard.tsx b/...lor-scheme/components/ColorSchemeCard.tsx → ...lor-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<ColorSchemeCardProps, 'variant'>

diff --git a/...r-scheme/components/ColorSchemePicker.tsx → ...r-scheme/components/ColorSchemePicker.tsx b/...r-scheme/components/ColorSchemePicker.tsx → ...r-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/...s/__stories__/ColorSchemeCard.stories.tsx → ...s/__stories__/ColorSchemeCard.stories.tsx b/...s/__stories__/ColorSchemeCard.stories.tsx → ...s/__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
@@ -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
@@ -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
@@ -11,7 +11,7 @@ Represents different color schemes and is specially tailored for light and dark
 <ArticleTabs label1="Usage" label2="Props">
 <ArticleTab>
 
-<SandpackEditor content={`import { ColorSchemeCard } from "@/ui/input/color-scheme/components/ColorSchemeCard";
+<SandpackEditor content={`import { ColorSchemeCard } from "twenty-ui";
 
 export const MyComponent = () => {
   return (
@@ -43,7 +43,7 @@ Allows users to choose between different color schemes.
 <ArticleTabs label1="Usage" label2="Props">
 <ArticleTab>
 
-<SandpackEditor content={`import { ColorSchemePicker } from "@/ui/input/color-scheme/components/ColorSchemePicker";
+<SandpackEditor content={`import { ColorSchemePicker } from "twenty-ui";
 
 export const MyComponent = () => {
   return <ColorSchemePicker