Migrate to a monorepo structure (#2909)

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