twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-23 12:02:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to twenty-ui - input/color-scheme (#7995)

Browse Source 
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 <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-app[bot] 2024-10-24 13:39:25 +02:00 committed by GitHub
parent 5ad8ff81f9
commit 67fb750ef6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx
View File

@ -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';

2
packages/twenty-front/tsup.ui.index.tsx
View File

@ -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';

7
packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx → packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx
View File

@ -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'>

6
packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemePicker.tsx → packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx
View File

@ -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;

2
packages/twenty-front/src/modules/ui/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx → packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx
View File

@ -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';

3
packages/twenty-ui/src/input/index.ts
View File

@ -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';

1
packages/twenty-ui/src/input/types/ColorScheme.ts Normal file
View File

@ -0,0 +1 @@
export type ColorScheme = 'Dark' | 'Light' | 'System';

4
packages/twenty-website/src/content/twenty-ui/input/color-scheme.mdx
View File

@ -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