UI Component docs (Display & Feedback components) (#2453)

* ui docs

* UI docs for display components

* docs for display and feedback components

* minor edits

* minor changes

* cleaned up code

* Move telemetry

* Revised Feedback/Display UI docs & added input UI docs

* Docs for Input components

* updated icons

* docs for input/components

* minor edits based on feedback

* add css to ui components

* Fixed spacing issue in button groups

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

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

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={true}
+        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={true}
+        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={true}
+        onClick={() => console.log("click")}
+      />
+    </ButtonGroup>
+  );
+};

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

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

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

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

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

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

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

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

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

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

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

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

docs/src/ui/input/components/entityTitleDoubleTextInputCode.js

@@ -0,0 +1,27 @@
+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("This is a long long test text");
+
+    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>
+  );
+};

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

docs/src/ui/input/components/imageInputCode.js

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

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

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