Migrate to a monorepo structure (#2909)

packages/twenty-docs/src/ui/display/animatedCheckmarkCode.js

@@ -0,0 +1,14 @@
+import { AnimatedCheckmark } from "@/ui/display/checkmark/components/AnimatedCheckmark";
+
+export const MyComponent = () => {
+  return (
+    <AnimatedCheckmark
+      isAnimating={true}
+      color="green"
+      duration={0.5}
+      size={30}
+    />
+  );
+  
+  
+};

packages/twenty-docs/src/ui/display/appTooltipCode.js

@@ -0,0 +1,22 @@
+import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
+
+export const MyComponent = () => {
+  return (
+    <>
+      <p id="hoverText" style={{ display: "inline-block" }}>
+        Customer Insights
+      </p>
+      <AppTooltip
+        className
+        anchorSelect="#hoverText"
+        content="Explore customer behavior and preferences"
+        delayHide={0}
+        offset={6}
+        noArrow={false}
+        isOpen={true}
+        place="bottom"
+        positionStrategy="absolute"
+      />
+    </>
+  );
+};

packages/twenty-docs/src/ui/display/checkmarkCode.js

@@ -0,0 +1,5 @@
+import { Checkmark } from "@/ui/display/checkmark/components/Checkmark";
+
+export const MyComponent = () => {
+  return <Checkmark />;
+};

packages/twenty-docs/src/ui/display/chipCode.js

@@ -0,0 +1,17 @@
+import { Chip } from "@/ui/display/chip/components/Chip";
+
+export const MyComponent = () => {
+  return (
+    <Chip
+      size="large"
+      label="Clickable Chip"
+      clickable={true}
+      variant="highlighted"
+      accent="text-primary"
+      leftComponent
+      rightComponent
+      maxWidth="200px"
+      className
+    />
+  );
+};

packages/twenty-docs/src/ui/display/entityChipCode.js

@@ -0,0 +1,19 @@
+import { BrowserRouter as Router } from "react-router-dom";
+import { EntityChip } from "@/ui/display/chip/components/EntityChip";
+import { IconComponent } from "@/ui/display/icon/types/IconComponent";
+
+export const MyComponent = () => {
+  return (
+    <Router>
+      <EntityChip
+        linkToEntity="/entity-link"
+        entityId="entityTest"
+        name="Entity name"
+        pictureUrl=""
+        avatarType="rounded"
+        variant="regular"
+        LeftIcon={IconComponent}
+      />
+    </Router>
+  );
+};

packages/twenty-docs/src/ui/display/iconAddressBookCode.js

@@ -0,0 +1,5 @@
+import { IconAddressBook } from "@/ui/display/icon/components/IconAddressBook";
+
+export const MyComponent = () => {
+  return <IconAddressBook size={24} stroke={2} />;
+};

packages/twenty-docs/src/ui/display/overflowingTextWithTooltipCode.js

@@ -0,0 +1,8 @@
+import { OverflowingTextWithTooltip } from "@/ui/display/tooltip/OverflowingTextWithTooltip";
+
+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.";
+
+  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
+};

packages/twenty-docs/src/ui/display/soonPillCode.js

@@ -0,0 +1,5 @@
+import { SoonPill } from "@/ui/display/pill/components/SoonPill";
+
+export const MyComponent = () => {
+  return <SoonPill />;
+};

packages/twenty-docs/src/ui/display/tablerIconExampleCode.js

@@ -0,0 +1,5 @@
+import { IconArrowLeft } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return <IconArrowLeft color="red" size={48} />;
+};

packages/twenty-docs/src/ui/display/tagCode.js

@@ -0,0 +1,12 @@
+import { Tag } from "@/ui/display/tag/components/Tag";
+
+export const MyComponent = () => {
+  return (
+    <Tag
+      className
+      color="red"
+      text="Urgent"
+      onClick={() => console.log("click")}
+    />
+  );
+};