refactor: move Checkmark, Avatar, Chip and Tooltip to twenty-ui (#4946)
Split from https://github.com/twentyhq/twenty/pull/4518 Part of #4766
This commit is contained in:
@ -107,7 +107,7 @@ Handles overflowing text and displays a tooltip when the text overflows.
|
||||
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/tooltip/OverflowingTextWithTooltip']}
|
||||
availableComponentPaths={['twenty-ui']}
|
||||
componentCode={overflowingTextWithTooltipCode}
|
||||
/>
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ Represents a successful or completed action.
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/checkmark/components/Checkmark']}
|
||||
availableComponentPaths={['twenty-ui']}
|
||||
componentCode={checkmarkCode}
|
||||
/>
|
||||
|
||||
@ -40,7 +40,7 @@ Represents a checkmark icon with the added feature of animation.
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/checkmark/components/AnimatedCheckmark']}
|
||||
availableComponentPaths={['twenty-ui']}
|
||||
componentCode={animatedCheckmarkCode}
|
||||
/>
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ A visual element that you can use as a clickable or non-clickable container with
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/chip/components/Chip']}
|
||||
availableComponentPaths={['twenty-ui']}
|
||||
componentCode={chipCode}
|
||||
/>
|
||||
</TabItem>
|
||||
@ -117,8 +117,8 @@ A visual element that you can use as a clickable or non-clickable container with
|
||||
### Transparent Disabled Chip
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/chip/components/Chip']}
|
||||
componentCode={`import { Chip } from "@/ui/display/chip/components/Chip";
|
||||
availableComponentPaths={['twenty-ui']}
|
||||
componentCode={`import { Chip } from "twenty-ui";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
@ -144,8 +144,8 @@ export const MyComponent = () => {
|
||||
### Disabled Chip with Tooltip
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/chip/components/Chip']}
|
||||
componentCode={`import { Chip } from "@/ui/display/chip/components/Chip";
|
||||
availableComponentPaths={['twenty-ui']}
|
||||
componentCode={`import { Chip } from "twenty-ui";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
@ -176,7 +176,7 @@ A Chip-like element to display information about an entity.
|
||||
<TabItem value="usage" label="Usage" default>
|
||||
|
||||
<SandpackEditor
|
||||
availableComponentPaths={['@/ui/display/chip/components/EntityChip', 'twenty-ui']}
|
||||
availableComponentPaths={['twenty-ui']}
|
||||
componentCode={entityChipCode}
|
||||
/>
|
||||
</TabItem >
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { AnimatedCheckmark } from "@/ui/display/checkmark/components/AnimatedCheckmark";
|
||||
import { AnimatedCheckmark } from 'twenty-ui';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
@ -9,6 +9,4 @@ export const MyComponent = () => {
|
||||
size={30}
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Checkmark } from "@/ui/display/checkmark/components/Checkmark";
|
||||
import { Checkmark } from 'twenty-ui';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <Checkmark />;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Chip } from "@/ui/display/chip/components/Chip";
|
||||
import { Chip } from 'twenty-ui';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import { IconTwentyStar } from 'twenty-ui';
|
||||
|
||||
import { EntityChip } from '@/ui/display/chip/components/EntityChip';
|
||||
import { EntityChip, IconTwentyStar } from 'twenty-ui';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { OverflowingTextWithTooltip } from "@/ui/display/tooltip/OverflowingTextWithTooltip";
|
||||
import { OverflowingTextWithTooltip } from 'twenty-ui';
|
||||
|
||||
export const MyComponent = () => {
|
||||
const crmTaskDescription =
|
||||
"Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.";
|
||||
'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
|
||||
|
||||
return <OverflowingTextWithTooltip text={crmTaskDescription} />;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user