Migrate to a monorepo structure (#2909)

packages/twenty-docs/src/ui/SandpackEditor.js

@@ -0,0 +1,107 @@
+import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview } from "@codesandbox/sandpack-react";
+import uiModule from "!!raw-loader!@site/src/ui/generated/index.js";
+import uiComponentsCSS from '!!raw-loader!@site/src/ui/uiComponents.css'
+
+export const SandpackEditor = ({ availableComponentPaths, componentCode}) => {
+  const fakePackagesJson = availableComponentPaths.reduce((acc, componentPath, index) => {
+    acc[`/node_modules/${componentPath}/package.json`] = {
+      hidden: true,
+      code: JSON.stringify({
+        name: componentPath,
+        main: "./index.js",
+      }),
+    };
+    return acc;
+  }, {});
+
+  const fakeIndexesJs = availableComponentPaths.reduce((acc, componentPath, index) => {
+    acc[`/node_modules/${componentPath}/index.js`] = {
+      hidden: true,
+      code: uiModule,
+    };
+    return acc;
+  }
+  , {});
+
+  return (
+    <SandpackProvider
+      files={{
+        "/index.js": {
+          hidden: true,
+          code: `
+import React, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
+root.render(
+ <StrictMode>
+   <App />
+ </StrictMode>
+);`,
+        },
+        "/App.tsx": {
+          hidden: true,
+          code: `import { ThemeProvider } from "@emotion/react";
+import { lightTheme, darkTheme } from "${availableComponentPaths[0]}";
+import { MyComponent } from "./MyComponent.tsx";
+
+import './uiComponents.css'
+
+console.log("lightTheme", lightTheme);
+
+export default function App() {
+return (<ThemeProvider theme={lightTheme}>
+ <MyComponent />
+</ThemeProvider>);
+};`,
+        },
+        "/MyComponent.tsx": {
+          code: componentCode,
+        },
+        "/uiComponents.css": {
+          code: uiComponentsCSS,
+          hidden: true,
+        },
+        ...fakePackagesJson,
+        ...fakeIndexesJs,
+      }}
+      customSetup={{
+        entry: "/index.js",
+        dependencies: {
+          react: "latest",
+          "react-dom": "latest",
+          "react-scripts": "^5.0.0",
+          "@emotion/react": "^11.10.6",
+          "@emotion/styled": "latest",
+          "@tabler/icons-react": "latest",
+          "hex-rgb": "latest",
+          "framer-motion": "latest",
+          uuid: "latest",
+          "react-tooltip": "latest",
+          "react-router-dom": "latest",
+          "@sniptt/guards": "latest",
+          "react-router": "latest",
+          "@apollo/client": "latest",
+          graphql: "latest",
+          "react-textarea-autosize": "latest",
+          "react-hotkeys-hook": "latest",
+          recoil: "latest",
+          "@floating-ui/react": "latest",
+          "ts-key-enum": "latest",
+          "deep-equal": "latest",
+          "lodash.debounce": "latest",
+          "react-loading-skeleton": "latest",
+          "zod": "latest",
+          
+        },
+      }}
+    >
+      <SandpackLayout>
+        <SandpackCodeEditor style={{ minWidth: "100%", height: "auto" }} />
+        <SandpackPreview style={{ minWidth: "100%", height: "auto" }} />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+};

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")}
+    />
+  );
+};

packages/twenty-docs/src/ui/feedback/circularProgressBarCode.js

@@ -0,0 +1,5 @@
+import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
+
+export const MyComponent = () => {
+  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
+};

packages/twenty-docs/src/ui/feedback/progressBarCode.js

@@ -0,0 +1,14 @@
+import { ProgressBar } from "@/ui/feedback/progress-bar/components/ProgressBar";
+
+export const MyComponent = () => {
+  return (
+    <ProgressBar
+      duration={6000}
+      delay={0}
+      easing="easeInOut"
+      barHeight={10}
+      barColor="#4bb543"
+      autoStart={true}
+    />
+  );
+};

packages/twenty-docs/src/ui/generated/index.d.ts

@@ -0,0 +1,732 @@
+export { ThemeProvider } from '@emotion/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default, { ReactNode, MouseEvent, FunctionComponent, ComponentProps, InputHTMLAttributes } from 'react';
+import { motion, AnimationControls } from 'framer-motion';
+import { TablerIconsProps } from '@tabler/icons-react';
+import { PlacesType, PositionStrategy } from 'react-tooltip';
+
+declare const lightTheme: {
+    accent: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        accent3570: string;
+        accent4060: string;
+    };
+    background: {
+        noisy: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        danger: string;
+        transparent: {
+            primary: string;
+            secondary: string;
+            strong: string;
+            medium: string;
+            light: string;
+            lighter: string;
+            danger: string;
+        };
+        overlay: string;
+        radialGradient: string;
+        radialGradientHover: string;
+    };
+    border: {
+        radius: {
+            xs: string;
+            sm: string;
+            md: string;
+            xl: string;
+            pill: string;
+            rounded: string;
+        };
+        color: {
+            strong: string;
+            medium: string;
+            light: string;
+            secondaryInverted: string;
+            inverted: string;
+            danger: string;
+        };
+    };
+    tag: {
+        [key: string]: {
+            [key: string]: string;
+        };
+    };
+    boxShadow: {
+        extraLight: string;
+        light: string;
+        strong: string;
+        underline: string;
+    };
+    font: {
+        size: {
+            xxs: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+        };
+        weight: {
+            regular: number;
+            medium: number;
+            semiBold: number;
+        };
+        family: string;
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            light: string;
+            extraLight: string;
+            inverted: string;
+            danger: string;
+        };
+    };
+    name: string;
+    color: {
+        yellow80: string;
+        yellow70: string;
+        yellow60: string;
+        yellow50: string;
+        yellow40: string;
+        yellow30: string;
+        yellow20: string;
+        yellow10: string;
+        green80: string;
+        green70: string;
+        green60: string;
+        green50: string;
+        green40: string;
+        green30: string;
+        green20: string;
+        green10: string;
+        turquoise80: string;
+        turquoise70: string;
+        turquoise60: string;
+        turquoise50: string;
+        turquoise40: string;
+        turquoise30: string;
+        turquoise20: string;
+        turquoise10: string;
+        sky80: string;
+        sky70: string;
+        sky60: string;
+        sky50: string;
+        sky40: string;
+        sky30: string;
+        sky20: string;
+        sky10: string;
+        blue80: string;
+        blue70: string;
+        blue60: string;
+        blue50: string;
+        blue40: string;
+        blue30: string;
+        blue20: string;
+        blue10: string;
+        purple80: string;
+        purple70: string;
+        purple60: string;
+        purple50: string;
+        purple40: string;
+        purple30: string;
+        purple20: string;
+        purple10: string;
+        pink80: string;
+        pink70: string;
+        pink60: string;
+        pink50: string;
+        pink40: string;
+        pink30: string;
+        pink20: string;
+        pink10: string;
+        red80: string;
+        red70: string;
+        red60: string;
+        red50: string;
+        red40: string;
+        red30: string;
+        red20: string;
+        red10: string;
+        orange80: string;
+        orange70: string;
+        orange60: string;
+        orange50: string;
+        orange40: string;
+        orange30: string;
+        orange20: string;
+        orange10: string;
+        gray80: string;
+        gray70: string;
+        gray60: string;
+        gray50: string;
+        gray40: string;
+        gray30: string;
+        gray20: string;
+        gray10: string;
+        blueAccent90: string;
+        blueAccent85: string;
+        blueAccent80: string;
+        blueAccent75: string;
+        blueAccent70: string;
+        blueAccent60: string;
+        blueAccent40: string;
+        blueAccent35: string;
+        blueAccent25: string;
+        blueAccent20: string;
+        blueAccent15: string;
+        blueAccent10: string;
+        green: string;
+        turquoise: string;
+        sky: string;
+        blue: string;
+        purple: string;
+        pink: string;
+        red: string;
+        orange: string;
+        yellow: string;
+        gray: string;
+    };
+    grayScale: {
+        gray100: string;
+        gray90: string;
+        gray85: string;
+        gray80: string;
+        gray75: string;
+        gray70: string;
+        gray65: string;
+        gray60: string;
+        gray55: string;
+        gray50: string;
+        gray45: string;
+        gray40: string;
+        gray35: string;
+        gray30: string;
+        gray25: string;
+        gray20: string;
+        gray15: string;
+        gray10: string;
+        gray0: string;
+    };
+    icon: {
+        size: {
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+        };
+        stroke: {
+            sm: number;
+            md: number;
+            lg: number;
+        };
+    };
+    modal: {
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+    };
+    text: {
+        lineHeight: {
+            lg: number;
+            md: number;
+        };
+        iconSizeMedium: number;
+        iconSizeSmall: number;
+        iconStrikeLight: number;
+        iconStrikeMedium: number;
+        iconStrikeBold: number;
+    };
+    blur: {
+        light: string;
+        strong: string;
+    };
+    animation: {
+        duration: {
+            instant: number;
+            fast: number;
+            normal: number;
+        };
+    };
+    snackBar: {
+        success: {
+            background: string;
+            color: string;
+        };
+        error: {
+            background: string;
+            color: string;
+        };
+        info: {
+            background: string;
+            color: string;
+        };
+    };
+    spacingMultiplicator: number;
+    spacing: (multiplicator: number) => string;
+    betweenSiblingsGap: string;
+    table: {
+        horizontalCellMargin: string;
+        checkboxColumnWidth: string;
+    };
+    rightDrawerWidth: string;
+    clickableElementBackgroundTransition: string;
+    lastLayerZIndex: number;
+};
+type ThemeType = typeof lightTheme;
+declare const darkTheme: ThemeType;
+
+type CheckmarkProps = React__default.ComponentPropsWithoutRef<'div'>;
+declare const Checkmark: (_props: CheckmarkProps) => react_jsx_runtime.JSX.Element;
+
+type AnimatedCheckmarkProps = React.ComponentProps<typeof motion.path> & {
+    isAnimating?: boolean;
+    color?: string;
+    duration?: number;
+    size?: number;
+};
+declare const AnimatedCheckmark: ({ isAnimating, color, duration, size, }: AnimatedCheckmarkProps) => react_jsx_runtime.JSX.Element;
+
+declare enum ChipSize {
+    Large = "large",
+    Small = "small"
+}
+declare enum ChipAccent {
+    TextPrimary = "text-primary",
+    TextSecondary = "text-secondary"
+}
+declare enum ChipVariant {
+    Highlighted = "highlighted",
+    Regular = "regular",
+    Transparent = "transparent",
+    Rounded = "rounded"
+}
+type ChipProps = {
+    size?: ChipSize;
+    disabled?: boolean;
+    clickable?: boolean;
+    label: string;
+    maxWidth?: string;
+    variant?: ChipVariant;
+    accent?: ChipAccent;
+    leftComponent?: ReactNode;
+    rightComponent?: ReactNode;
+    className?: string;
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+};
+declare const Chip: ({ size, label, disabled, clickable, variant, leftComponent, rightComponent, accent, maxWidth, className, onClick, }: ChipProps) => react_jsx_runtime.JSX.Element;
+
+type IconComponent = FunctionComponent<{
+    className?: string;
+    color?: string;
+    size?: number;
+    stroke?: number;
+}>;
+
+type AvatarType = 'squared' | 'rounded';
+
+type EntityChipProps = {
+    linkToEntity?: string;
+    entityId: string;
+    name: string;
+    avatarUrl?: string;
+    avatarType?: AvatarType;
+    variant?: EntityChipVariant;
+    LeftIcon?: IconComponent;
+};
+declare enum EntityChipVariant {
+    Regular = "regular",
+    Transparent = "transparent"
+}
+declare const EntityChip: ({ linkToEntity, entityId, name, avatarUrl, avatarType, variant, LeftIcon, }: EntityChipProps) => react_jsx_runtime.JSX.Element;
+
+type IconAddressBookProps = TablerIconsProps;
+declare const IconAddressBook: (props: IconAddressBookProps) => JSX.Element;
+
+declare const SoonPill: () => react_jsx_runtime.JSX.Element;
+
+declare const mainColors: {
+    green: string;
+    turquoise: string;
+    sky: string;
+    blue: string;
+    purple: string;
+    pink: string;
+    red: string;
+    orange: string;
+    yellow: string;
+    gray: string;
+};
+type ThemeColor = keyof typeof mainColors;
+
+type TagProps = {
+    className?: string;
+    color: ThemeColor;
+    text: string;
+    onClick?: () => void;
+};
+declare const Tag: ({ className, color, text, onClick }: TagProps) => react_jsx_runtime.JSX.Element;
+
+declare enum TooltipPosition {
+    Top = "top",
+    Left = "left",
+    Right = "right",
+    Bottom = "bottom"
+}
+type AppTooltipProps = {
+    className?: string;
+    anchorSelect?: string;
+    content?: string;
+    delayHide?: number;
+    offset?: number;
+    noArrow?: boolean;
+    isOpen?: boolean;
+    place?: PlacesType;
+    positionStrategy?: PositionStrategy;
+};
+declare const AppTooltip: ({ anchorSelect, className, content, delayHide, isOpen, noArrow, offset, place, positionStrategy, }: AppTooltipProps) => react_jsx_runtime.JSX.Element;
+
+declare const OverflowingTextWithTooltip: ({ text, }: {
+    text: string | null | undefined;
+}) => react_jsx_runtime.JSX.Element;
+
+type ProgressBarProps = {
+    duration?: number;
+    delay?: number;
+    easing?: string;
+    barHeight?: number;
+    barColor?: string;
+    autoStart?: boolean;
+};
+type ProgressBarControls = AnimationControls & {
+    start: () => Promise<any>;
+    pause: () => Promise<any>;
+};
+declare const ProgressBar: React$1.ForwardRefExoticComponent<ProgressBarProps & React$1.RefAttributes<ProgressBarControls>>;
+
+interface CircularProgressBarProps {
+    size?: number;
+    barWidth?: number;
+    barColor?: string;
+}
+declare const CircularProgressBar: ({ size, barWidth, barColor, }: CircularProgressBarProps) => react_jsx_runtime.JSX.Element;
+
+type ButtonSize = 'medium' | 'small';
+type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+type ButtonAccent = 'default' | 'blue' | 'danger';
+type ButtonProps = {
+    className?: string;
+    Icon?: IconComponent;
+    title?: string;
+    fullWidth?: boolean;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    position?: ButtonPosition;
+    accent?: ButtonAccent;
+    soon?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+    onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
+};
+declare const Button: ({ className, Icon, title, fullWidth, variant, size, accent, position, soon, disabled, focus, onClick, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+type ButtonGroupProps = Pick<ButtonProps, 'variant' | 'size' | 'accent'> & {
+    className?: string;
+    children: ReactNode[];
+};
+declare const ButtonGroup: ({ className, children, variant, size, accent, }: ButtonGroupProps) => react_jsx_runtime.JSX.Element;
+
+type FloatingButtonSize = 'small' | 'medium';
+type FloatingButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
+type FloatingButtonProps = {
+    className?: string;
+    Icon?: IconComponent;
+    title?: string;
+    size?: FloatingButtonSize;
+    position?: FloatingButtonPosition;
+    applyShadow?: boolean;
+    applyBlur?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+};
+declare const FloatingButton: ({ className, Icon, title, size, applyBlur, applyShadow, disabled, focus, }: FloatingButtonProps) => react_jsx_runtime.JSX.Element;
+
+type FloatingButtonGroupProps = Pick<FloatingButtonProps, 'size'> & {
+    children: React__default.ReactElement[];
+};
+declare const FloatingButtonGroup: ({ children, size, }: FloatingButtonGroupProps) => react_jsx_runtime.JSX.Element;
+
+type FloatingIconButtonSize = 'small' | 'medium';
+type FloatingIconButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
+type FloatingIconButtonProps = {
+    className?: string;
+    Icon?: IconComponent;
+    size?: FloatingIconButtonSize;
+    position?: FloatingIconButtonPosition;
+    applyShadow?: boolean;
+    applyBlur?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+    onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
+    isActive?: boolean;
+};
+declare const FloatingIconButton: ({ className, Icon, size, position, applyShadow, applyBlur, disabled, focus, onClick, isActive, }: FloatingIconButtonProps) => react_jsx_runtime.JSX.Element;
+
+type FloatingIconButtonGroupProps = Pick<FloatingIconButtonProps, 'className' | 'size'> & {
+    iconButtons: {
+        Icon: IconComponent;
+        onClick?: (event: MouseEvent<any>) => void;
+        isActive?: boolean;
+    }[];
+};
+declare const FloatingIconButtonGroup: ({ iconButtons, size, className, }: FloatingIconButtonGroupProps) => react_jsx_runtime.JSX.Element;
+
+type LightButtonAccent = 'secondary' | 'tertiary';
+type LightButtonProps = {
+    className?: string;
+    icon?: React__default.ReactNode;
+    title?: string;
+    accent?: LightButtonAccent;
+    active?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+declare const LightButton: ({ className, icon: initialIcon, title, active, accent, disabled, focus, onClick, }: LightButtonProps) => react_jsx_runtime.JSX.Element;
+
+type LightIconButtonAccent = 'secondary' | 'tertiary';
+type LightIconButtonSize = 'small' | 'medium';
+type LightIconButtonProps = {
+    className?: string;
+    testId?: string;
+    Icon?: IconComponent;
+    title?: string;
+    size?: LightIconButtonSize;
+    accent?: LightIconButtonAccent;
+    active?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+} & Pick<ComponentProps<'button'>, 'aria-label' | 'title'>;
+declare const LightIconButton: ({ "aria-label": ariaLabel, className, testId, Icon, active, size, accent, disabled, focus, onClick, title, }: LightIconButtonProps) => react_jsx_runtime.JSX.Element;
+
+type Variant = 'primary' | 'secondary';
+type Props = {
+    title: string;
+    fullWidth?: boolean;
+    variant?: Variant;
+    soon?: boolean;
+} & React__default.ComponentProps<'button'>;
+type MainButtonProps = Props & {
+    Icon?: IconComponent;
+};
+declare const MainButton: ({ Icon, title, fullWidth, variant, type, onClick, disabled, }: MainButtonProps) => react_jsx_runtime.JSX.Element;
+
+type RoundedIconButtonProps = {
+    Icon: IconComponent;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare const RoundedIconButton: ({ Icon, onClick, disabled, }: RoundedIconButtonProps) => react_jsx_runtime.JSX.Element;
+
+type ColorScheme = 'Dark' | 'Light' | 'System';
+
+type ColorSchemeSegmentProps = {
+    variant: ColorScheme;
+    controls: AnimationControls;
+} & React__default.ComponentPropsWithoutRef<'div'>;
+type ColorSchemeCardProps = {
+    variant: ColorScheme;
+    selected?: boolean;
+} & React__default.ComponentPropsWithoutRef<'div'>;
+declare const ColorSchemeCard: ({ variant, selected, onClick, }: ColorSchemeCardProps) => react_jsx_runtime.JSX.Element;
+
+type ColorSchemePickerProps = {
+    value: ColorScheme;
+    onChange: (value: ColorScheme) => void;
+};
+declare const ColorSchemePicker: ({ value, onChange, }: ColorSchemePickerProps) => react_jsx_runtime.JSX.Element;
+
+declare enum AutosizeTextInputVariant {
+    Default = "default",
+    Icon = "icon",
+    Button = "button"
+}
+type AutosizeTextInputProps = {
+    onValidate?: (text: string) => void;
+    minRows?: number;
+    placeholder?: string;
+    onFocus?: () => void;
+    variant?: AutosizeTextInputVariant;
+    buttonTitle?: string;
+    value?: string;
+};
+declare const AutosizeTextInput: ({ placeholder, onValidate, minRows, onFocus, variant, buttonTitle, value, }: AutosizeTextInputProps) => react_jsx_runtime.JSX.Element;
+
+declare enum CheckboxVariant {
+    Primary = "primary",
+    Secondary = "secondary",
+    Tertiary = "tertiary"
+}
+declare enum CheckboxShape {
+    Squared = "squared",
+    Rounded = "rounded"
+}
+declare enum CheckboxSize {
+    Large = "large",
+    Small = "small"
+}
+type CheckboxProps = {
+    checked: boolean;
+    indeterminate?: boolean;
+    onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
+    onCheckedChange?: (value: boolean) => void;
+    variant?: CheckboxVariant;
+    size?: CheckboxSize;
+    shape?: CheckboxShape;
+};
+declare const Checkbox: ({ checked, onChange, onCheckedChange, indeterminate, variant, size, shape, }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+
+type EntityTitleDoubleTextInputProps = {
+    firstValue: string;
+    secondValue: string;
+    firstValuePlaceholder: string;
+    secondValuePlaceholder: string;
+    onChange: (firstValue: string, secondValue: string) => void;
+};
+declare const EntityTitleDoubleTextInput: ({ firstValue, secondValue, firstValuePlaceholder, secondValuePlaceholder, onChange, }: EntityTitleDoubleTextInputProps) => react_jsx_runtime.JSX.Element;
+
+type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';
+
+type IconPickerProps = {
+    disabled?: boolean;
+    dropdownScopeId?: string;
+    onChange: (params: {
+        iconKey: string;
+        Icon: IconComponent;
+    }) => void;
+    selectedIconKey?: string;
+    onClickOutside?: () => void;
+    onClose?: () => void;
+    onOpen?: () => void;
+    variant?: IconButtonVariant;
+};
+declare const IconPicker: ({ disabled, dropdownScopeId, onChange, selectedIconKey, onClickOutside, onClose, onOpen, variant, }: IconPickerProps) => react_jsx_runtime.JSX.Element;
+
+type ImageInputProps = Omit<React__default.ComponentProps<'div'>, 'children'> & {
+    picture: string | null | undefined;
+    onUpload?: (file: File) => void;
+    onRemove?: () => void;
+    onAbort?: () => void;
+    isUploading?: boolean;
+    errorMessage?: string | null;
+    disabled?: boolean;
+};
+declare const ImageInput: ({ picture, onUpload, onRemove, onAbort, isUploading, errorMessage, disabled, }: ImageInputProps) => react_jsx_runtime.JSX.Element;
+
+declare enum RadioSize {
+    Large = "large",
+    Small = "small"
+}
+declare enum LabelPosition {
+    Left = "left",
+    Right = "right"
+}
+type RadioProps = {
+    style?: React$1.CSSProperties;
+    className?: string;
+    checked?: boolean;
+    value?: string;
+    onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: RadioSize;
+    disabled?: boolean;
+    labelPosition?: LabelPosition;
+};
+declare const Radio: {
+    ({ checked, value, onChange, onCheckedChange, size, labelPosition, disabled, }: RadioProps): react_jsx_runtime.JSX.Element;
+    Group: ({ value, onChange, onValueChange, children, }: {
+        children?: React$1.ReactNode;
+    } & {
+        value?: string | undefined;
+        onChange?: ((event: React$1.ChangeEvent<HTMLInputElement>) => void) | undefined;
+        onValueChange?: ((value: string) => void) | undefined;
+    }) => react_jsx_runtime.JSX.Element;
+};
+
+type RadioGroupProps = React__default.PropsWithChildren & {
+    value?: string;
+    onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
+    onValueChange?: (value: string) => void;
+};
+declare const RadioGroup: ({ value, onChange, onValueChange, children, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
+
+type SelectProps<Value extends string | number | null> = {
+    className?: string;
+    disabled?: boolean;
+    dropdownScopeId: string;
+    label?: string;
+    onChange?: (value: Value) => void;
+    options: {
+        value: Value;
+        label: string;
+        Icon?: IconComponent;
+    }[];
+    value?: Value;
+};
+declare const Select: <Value extends string | number | null>({ className, disabled, dropdownScopeId, label, onChange, options, value, }: SelectProps<Value>) => react_jsx_runtime.JSX.Element;
+
+type TextAreaProps = {
+    disabled?: boolean;
+    minRows?: number;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    value?: string;
+};
+declare const TextArea: ({ disabled, placeholder, minRows, value, onChange, }: TextAreaProps) => react_jsx_runtime.JSX.Element;
+
+type TextInputComponentProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyDown'> & {
+    className?: string;
+    label?: string;
+    onChange?: (text: string) => void;
+    fullWidth?: boolean;
+    disableHotkeys?: boolean;
+    error?: string;
+    RightIcon?: IconComponent;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+};
+declare const TextInput: React$1.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "onKeyDown"> & {
+    className?: string | undefined;
+    label?: string | undefined;
+    onChange?: ((text: string) => void) | undefined;
+    fullWidth?: boolean | undefined;
+    disableHotkeys?: boolean | undefined;
+    error?: string | undefined;
+    RightIcon?: IconComponent | undefined;
+    onKeyDown?: ((event: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
+} & React$1.RefAttributes<HTMLInputElement>>;
+
+type ToggleSize = 'small' | 'medium';
+type ToggleProps = {
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+    color?: string;
+    toggleSize?: ToggleSize;
+};
+declare const Toggle: ({ value, onChange, color, toggleSize, }: ToggleProps) => react_jsx_runtime.JSX.Element;
+
+declare module '@emotion/react' {
+    interface Theme extends ThemeType {
+    }
+}
+
+export { AnimatedCheckmark, AnimatedCheckmarkProps, AppTooltip, AppTooltipProps, AutosizeTextInput, AutosizeTextInputVariant, Button, ButtonAccent, ButtonGroup, ButtonGroupProps, ButtonPosition, ButtonProps, ButtonSize, ButtonVariant, Checkbox, CheckboxShape, CheckboxSize, CheckboxVariant, Checkmark, CheckmarkProps, Chip, ChipAccent, ChipSize, ChipVariant, CircularProgressBar, ColorSchemeCard, ColorSchemeCardProps, ColorSchemePicker, ColorSchemePickerProps, ColorSchemeSegmentProps, EntityChip, EntityChipProps, EntityChipVariant, EntityTitleDoubleTextInput, EntityTitleDoubleTextInputProps, FloatingButton, FloatingButtonGroup, FloatingButtonGroupProps, FloatingButtonPosition, FloatingButtonProps, FloatingButtonSize, FloatingIconButton, FloatingIconButtonGroup, FloatingIconButtonGroupProps, FloatingIconButtonPosition, FloatingIconButtonProps, FloatingIconButtonSize, IconAddressBook, IconPicker, ImageInput, LabelPosition, LightButton, LightButtonAccent, LightButtonProps, LightIconButton, LightIconButtonAccent, LightIconButtonProps, LightIconButtonSize, MainButton, OverflowingTextWithTooltip, ProgressBar, ProgressBarControls, ProgressBarProps, Radio, RadioGroup, RadioProps, RadioSize, RoundedIconButton, Select, SelectProps, SoonPill, Tag, TextArea, TextAreaProps, TextInput, TextInputComponentProps, Toggle, ToggleProps, ToggleSize, TooltipPosition, darkTheme, lightTheme };

packages/twenty-docs/src/ui/input/button/buttonCode.js

@@ -0,0 +1,20 @@
+import { Button } from "@/ui/input/button/components/Button";
+
+export const MyComponent = () => {
+  return (
+    <Button
+      className
+      Icon={null}
+      title="Click Me"
+      fullWidth={false}
+      variant="primary"
+      size="medium"
+      position="standalone"
+      accent="default"
+      soon={false}
+      disabled={false}
+      focus={true}
+      onClick={() => console.log("click")}
+    />
+  );
+};

packages/twenty-docs/src/ui/input/button/buttonGroupCode.js

@@ -0,0 +1,51 @@
+import { Button } from "@/ui/input/button/components/Button";
+import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";
+
+export const MyComponent = () => {
+  return (
+    <ButtonGroup variant="primary" size="large" accent="blue" className>
+      <Button
+        className
+        Icon={null}
+        title="Button 1"
+        fullWidth={false}
+        variant="primary"
+        size="medium"
+        position="standalone"
+        accent="blue"
+        soon={false}
+        disabled={false}
+        focus={false}
+        onClick={() => console.log("click")}
+      />
+      <Button
+        className
+        Icon={null}
+        title="Button 2"
+        fullWidth={false}
+        variant="secondary"
+        size="medium"
+        position="left"
+        accent="blue"
+        soon={false}
+        disabled={false}
+        focus={false}
+        onClick={() => console.log("click")}
+      />
+      <Button
+        className
+        Icon={null}
+        title="Button 3"
+        fullWidth={false}
+        variant="tertiary"
+        size="medium"
+        position="right"
+        accent="blue"
+        soon={false}
+        disabled={false}
+        focus={false}
+        onClick={() => console.log("click")}
+      />
+    </ButtonGroup>
+  );
+};

packages/twenty-docs/src/ui/input/button/floatingButtonCode.js

@@ -0,0 +1,18 @@
+import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
+import { IconSearch } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <FloatingButton
+      className
+      Icon={IconSearch}
+      title="Click Me"
+      size="medium"
+      position="standalone"
+      applyShadow={true}
+      applyBlur={true}
+      disabled={false}
+      focus={true}
+    />
+  );
+};

packages/twenty-docs/src/ui/input/button/floatingButtonGroupCode.js

@@ -0,0 +1,32 @@
+import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
+import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
+import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <FloatingButtonGroup size="small">
+      <FloatingButton
+        className
+        Icon={IconClipboardText}
+        title
+        size="small"
+        position="standalone"
+        applyShadow={true}
+        applyBlur={true}
+        disabled={false}
+        focus={true}
+      />
+      <FloatingButton
+        className
+        Icon={IconCheckbox}
+        title
+        size="small"
+        position="standalone"
+        applyShadow={true}
+        applyBlur={true}
+        disabled={false}
+        focus={true}
+      />
+    </FloatingButtonGroup>
+  );
+};

packages/twenty-docs/src/ui/input/button/floatingIconButtonCode.js

@@ -0,0 +1,19 @@
+import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
+import { IconSearch } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <FloatingIconButton
+      className
+      Icon={IconSearch}
+      size="small"
+      position="standalone"
+      applyShadow={true}
+      applyBlur={true}
+      disabled={false}
+      focus={false}
+      onClick={() => console.log("click")}
+      isActive={true}
+    />
+  );
+};

packages/twenty-docs/src/ui/input/button/floatingIconButtonGroupCode.js

@@ -0,0 +1,24 @@
+import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
+import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  const iconButtons = [
+    {
+      Icon: IconClipboardText,
+      onClick: () => console.log("Button 1 clicked"),
+      isActive: true,
+    },
+    {
+      Icon: IconCheckbox,
+      onClick: () => console.log("Button 2 clicked"),
+      isActive: true,
+    },
+  ];
+
+  return (
+    <FloatingIconButtonGroup 
+    className 
+    size="small" 
+    iconButtons={iconButtons} />
+  );
+};

packages/twenty-docs/src/ui/input/button/lightButtonCode.js

@@ -0,0 +1,14 @@
+import { LightButton } from "@/ui/input/button/components/LightButton";
+
+export const MyComponent = () => {
+  return <LightButton
+  className
+  icon={null}
+  title="Click Me"
+  accent="secondary"
+  active={false}
+  disabled={false}
+  focus={true}
+  onClick={()=>console.log('click')} 
+  />;
+};

packages/twenty-docs/src/ui/input/button/lightIconButtonCode.js

@@ -0,0 +1,19 @@
+import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
+import { IconSearch } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <LightIconButton
+      className
+      testId="test1"
+      Icon={IconSearch}
+      title="Click Me"
+      size="small"
+      accent="secondary"
+      active={true}
+      disabled={false}
+      focus={true}
+      onClick={() => console.log("click")}
+    />
+  );
+};

packages/twenty-docs/src/ui/input/button/mainButtonCode.js

@@ -0,0 +1,14 @@
+import { MainButton } from "@/ui/input/button/components/MainButton";
+import { IconCheckbox } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <MainButton
+      title="Checkbox"
+      fullWidth={false}
+      variant="primary"
+      soon={false}
+      Icon={IconCheckbox}
+    />
+  );
+};

packages/twenty-docs/src/ui/input/button/roundedIconButtonCode.js

@@ -0,0 +1,10 @@
+import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
+import { IconSearch } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <RoundedIconButton
+      Icon={IconSearch}
+    />
+  );
+};

packages/twenty-docs/src/ui/input/color-scheme/colorSchemeCardCode.js

@@ -0,0 +1,10 @@
+import { ColorSchemeCard } from "@/ui/input/color-scheme/components/ColorSchemeCard";
+
+export const MyComponent = () => {
+  return (
+      <ColorSchemeCard
+      variant="Dark"
+      selected={true}
+      />
+  );
+};

packages/twenty-docs/src/ui/input/color-scheme/colorSchemePickerCode.js

@@ -0,0 +1,8 @@
+import { ColorSchemePicker } from "@/ui/input/color-scheme/components/ColorSchemePicker";
+
+export const MyComponent = () => {
+  return <ColorSchemePicker
+  value="Dark"
+  onChange
+  />;
+};

packages/twenty-docs/src/ui/input/components/autosizeTextInputCode.js

@@ -0,0 +1,18 @@
+import { RecoilRoot } from "recoil";
+import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
+
+export const MyComponent = () => {
+  return (
+    <RecoilRoot>
+      <AutosizeTextInput
+        onValidate={() => console.log("onValidate function fired")}
+        minRows={1}
+        placeholder="Write a comment"
+        onFocus={() => console.log("onFocus function fired")}
+        variant="icon"
+        buttonTitle
+        value="Task: "
+      />
+    </RecoilRoot>
+  );
+};

packages/twenty-docs/src/ui/input/components/checkboxCode.js

@@ -0,0 +1,15 @@
+import { Checkbox } from "@/ui/input/components/Checkbox";
+
+export const MyComponent = () => {
+  return (
+    <Checkbox
+      checked={true}
+      indeterminate={false}
+      onChange={() => console.log("onChange function fired")}
+      onCheckedChange={() => console.log("onCheckedChange function fired")}
+      variant="primary"
+      size="small"
+      shape="squared"
+    />
+  );
+};

packages/twenty-docs/src/ui/input/components/entityTitleDoubleTextInputCode.js

@@ -0,0 +1,31 @@
+import { RecoilRoot } from "recoil";
+import React, { useState } from "react";
+import { EntityTitleDoubleTextInput } from "@/ui/input/components/EntityTitleDoubleTextInput";
+
+export const MyComponent = () => {
+
+    const [firstValue, setFirstValue] = useState(
+      "First Value"
+    );
+    const [secondValue, setSecondValue] = useState(
+      "Second Value"
+    );
+
+    const handleInputChange = (newFirstValue, newSecondValue) => {
+      setFirstValue(newFirstValue);
+      setSecondValue(newSecondValue);
+    };
+
+
+  return (
+    <RecoilRoot>
+      <EntityTitleDoubleTextInput
+        firstValue={firstValue}
+        secondValue={secondValue}
+        firstValuePlaceholder="Enter First Value"
+        secondValuePlaceholder="Enter Second Value"
+        onChange={handleInputChange}
+      />
+    </RecoilRoot>
+  );
+};

packages/twenty-docs/src/ui/input/components/iconPickerCode.js

@@ -0,0 +1,23 @@
+import { RecoilRoot } from "recoil";
+import React, { useState } from "react";
+import { IconPicker } from "@/ui/input/components/IconPicker";
+
+export const MyComponent = () => {
+
+   const [selectedIcon, setSelectedIcon] = useState("");
+   const handleIconChange = ({ iconKey, Icon }) => {
+     console.log("Selected Icon:", iconKey);
+     setSelectedIcon(iconKey);
+   };
+
+  return (
+    <RecoilRoot>
+      <IconPicker
+        disabled={false}
+        onChange={handleIconChange}
+        selectedIconKey={selectedIcon}
+        variant="primary"
+      />
+    </RecoilRoot>
+  );
+};

packages/twenty-docs/src/ui/input/components/imageInputCode.js

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

packages/twenty-docs/src/ui/input/components/radioCode.js

@@ -0,0 +1,25 @@
+import { Radio } from "@/ui/input/components/Radio";
+
+export const MyComponent = () => {
+
+  const handleRadioChange = (event) => {
+    console.log("Radio button changed:", event.target.checked);
+  };
+
+  const handleCheckedChange = (checked) => {
+    console.log("Checked state changed:", checked);
+  };
+
+
+  return (
+    <Radio
+      checked={true}
+      value="Option 1"
+      onChange={handleRadioChange}
+      onCheckedChange={handleCheckedChange}
+      size="large"
+      disabled={false}
+      labelPosition="right"
+    />
+  );
+};

packages/twenty-docs/src/ui/input/components/radioGroupCode.js

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import { Radio } from "@/ui/input/components/Radio";
+import { RadioGroup } from "@/ui/input/components/RadioGroup";
+
+export const MyComponent = () => {
+
+  const [selectedValue, setSelectedValue] = useState("Option 1");
+
+  const handleChange = (event) => {
+    setSelectedValue(event.target.value);
+  };
+  
+  return (
+    <RadioGroup value={selectedValue} onChange={handleChange}>
+      <Radio value="Option 1" />
+      <Radio value="Option 2" />
+      <Radio value="Option 3" />
+    </RadioGroup>
+  );
+};

packages/twenty-docs/src/ui/input/components/selectCode.js

@@ -0,0 +1,26 @@
+import { RecoilRoot } from "recoil";
+import { Select } from "@/ui/input/components/Select";
+import { IconComponent } from "@/ui/display/icon/types/IconComponent";
+
+export const MyComponent = () => {
+  const handleSelectChange = (selectedValue) => {
+    console.log(`Selected: ${selectedValue}`);
+  };
+
+  return (
+    <RecoilRoot>
+      <Select
+        className
+        disabled={false}
+        dropdownScopeId="exampleDropdown"
+        label="Select an option"
+        onChange={handleSelectChange}
+        options={[
+          { value: "option1", label: "Option A", Icon: IconComponent },
+          { value: "option2", label: "Option B", Icon: IconComponent },
+        ]}
+        value="option1"
+      />
+    </RecoilRoot>
+  );
+};

packages/twenty-docs/src/ui/input/components/textAreaCode.js

@@ -0,0 +1,13 @@
+import { TextArea } from "@/ui/input/components/TextArea";
+
+export const MyComponent = () => {
+  return (
+    <TextArea
+    disabled={false}
+    minRows={4}
+    onChange={()=>console.log('On change function fired')}
+    placeholder="Enter text here"
+    value=""
+    />
+  );
+};

packages/twenty-docs/src/ui/input/components/textInputCode.js

@@ -0,0 +1,27 @@
+import { RecoilRoot } from "recoil";
+import { TextInput } from "@/ui/input/components/TextInput";
+
+export const MyComponent = () => {
+  const handleChange = (text) => {
+    console.log("Input changed:", text);
+  };
+
+  const handleKeyDown = (event) => {
+    console.log("Key pressed:", event.key);
+  };
+
+  return (
+    <RecoilRoot>
+      <TextInput
+        className
+        label="Username"
+        onChange={handleChange}
+        fullWidth={false}
+        disableHotkeys={false}
+        error="Invalid username"
+        onKeyDown={handleKeyDown}
+        RightIcon={null}
+      />
+    </RecoilRoot>
+  );
+};

packages/twenty-docs/src/ui/input/components/toggleCode.js

@@ -0,0 +1,12 @@
+import { Toggle } from "@/ui/input/components/Toggle";
+
+export const MyComponent = () => {
+  return (
+    <Toggle
+    value = {true}
+    onChange = {()=>console.log('On Change event')}
+    color="green"
+    toggleSize = "medium"
+    />
+  );
+};

packages/twenty-docs/src/ui/uiComponents.css

@@ -0,0 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+
+body {
+  font-family: 'Inter', sans-serif;
+}
+ html {
+  font-size: 13px;
+}