admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Migrated Developer Docs (#5683)

Browse Source 
- Migrated developer docs to Twenty website

- Modified User Guide and Docs layout to include sections and
subsections

**Section Example:**
<img width="549" alt="Screenshot 2024-05-30 at 15 44 42"
src="https://github.com/twentyhq/twenty/assets/102751374/41bd4037-4b76-48e6-bc79-48d3d6be9ab8">

**Subsection Example:**
<img width="557" alt="Screenshot 2024-05-30 at 15 44 55"
src="https://github.com/twentyhq/twenty/assets/102751374/f14c65a9-ab0c-4530-b624-5b20fc00511a">


- Created different components (Tabs, Tables, Editors etc.) for the mdx
files

**Tabs & Editor**

<img width="665" alt="Screenshot 2024-05-30 at 15 47 39"
src="https://github.com/twentyhq/twenty/assets/102751374/5166b5c7-b6cf-417d-9f29-b1f674c1c531">

**Tables**

<img width="698" alt="Screenshot 2024-05-30 at 15 57 39"
src="https://github.com/twentyhq/twenty/assets/102751374/2bbfe937-ec19-4004-ab00-f7a56e96db4a">

<img width="661" alt="Screenshot 2024-05-30 at 16 03 32"
src="https://github.com/twentyhq/twenty/assets/102751374/ae95b47c-dd92-44f9-b535-ccdc953f71ff">

- Created a crawler for Twenty Developers (now that it will be on the
twenty website). Once this PR is merged and the website is re-deployed,
we need to start crawling and make sure the index name is
‘twenty-developer’
- Added a dropdown menu in the header to access User Guide and
Developers + added Developers to footer


https://github.com/twentyhq/twenty/assets/102751374/1bd1fbbd-1e65-4461-b18b-84d4ddbb8ea1

- Made new layout responsive

Please fill in the information for each mdx file so that it can appear
on its card, as well as in the ‘In this article’ section. Example with
‘Getting Started’ in the User Guide:

<img width="786" alt="Screenshot 2024-05-30 at 16 29 39"
src="https://github.com/twentyhq/twenty/assets/102751374/2714b01d-a664-4ddc-9291-528632ee12ea">

Example with info and sectionInfo filled in for 'Getting Started':

<img width="620" alt="Screenshot 2024-05-30 at 16 33 57"
src="https://github.com/twentyhq/twenty/assets/102751374/bc69e880-da6a-4b7e-bace-1effea866c11">


Please keep in mind that the images that are being used for Developers
are the same as those found in User Guide and may not match the article.

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Ady Beraud
2024-06-03 19:52:43 +03:00
committed by GitHub
parent f7cdd14c75
commit 671de4170f
139 changed files with 7057 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
packages/twenty-website/src/content/twenty-ui/input/block-editor.mdx Normal file
View File

@ -0,0 +1,29 @@
---
title: Block Editor
icon: TbTemplate
image: /images/user-guide/api/api.png
---
Uses a block-based rich text editor from [BlockNote](https://www.blocknotejs.org/) to allow users to edit and view blocks of content.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { useBlockNote } from "@blocknote/react";
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
export const MyComponent = () => {
const BlockNoteEditor = useBlockNote();
return <BlockEditor editor={BlockNoteEditor} />;
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['editor', '`BlockNoteEditor`', 'The block editor instance or configuration']
]} />
</ArticleTab>
</ArticleTabs>

470
packages/twenty-website/src/content/twenty-ui/input/buttons.mdx Normal file
View File

@ -0,0 +1,470 @@
---
title: Buttons
image: /images/user-guide/views/filter.png
---
A list of buttons and button groups used throughout the app.
## Button
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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")}
/>
);
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['className', 'string', 'Optional class name for additional styling', ''],
['Icon', '`React.ComponentType`', "An optional icon component that's displayed within the button", ''],
['title', 'string', 'The text content of the button', ''],
['fullWidth', 'boolean', 'Defines whether the button should span the whole width of its container', '`false`'],
['variant', 'string', 'The visual style variant of the button. Options include `primary`, `secondary`, and `tertiary`', 'primary'],
['size', 'string', 'The size of the button. Has two options: `small` and `medium`', 'medium'],
['position', 'string', 'The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle`', 'standalone'],
['accent', 'string', 'The accent color of the button. Options include: `default`, `blue`, and `danger`', 'default'],
['soon', 'boolean', 'Indicates if the button is marked as "soon" (such as for upcoming features)', '`false`'],
['disabled', 'boolean', 'Specifies whether the button is disabled or not', '`false`'],
['focus', 'boolean', 'Determines if the button has focus', '`false`'],
['onClick', 'function', 'A callback function that triggers when the user clicks on the button', '']
]} />
</ArticleTab>
</ArticleTabs>
## Button Group
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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>
);
};
`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['variant', 'string', 'The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary`'],
['size', 'string', 'The size of the buttons within the group. Has two options: `medium` and `small`'],
['accent', 'string', 'The accent color of the buttons within the group. Options include `default`, `blue` and `danger`'],
['className', 'string', 'Optional class name for additional styling'],
['children', 'ReactNode', 'An array of React elements representing the individual buttons within the group']
]} />
</ArticleTab>
</ArticleTabs>
## Floating Button
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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}
/>
);
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['className', 'string', 'Optional name for additional styling', ''],
['Icon', '`React.ComponentType`', "An optional icon component that's displayed within the button", ''],
['title', 'string', 'The text content of the button', ''],
['size', 'string', 'The size of the button. Has two options: `small` and `medium`', 'small'],
['position', 'string', 'The position of the button in relation to its siblings. Options include: `standalone`, `left`, `middle`, `right`', ''],
['applyShadow', 'boolean', 'Determines whether to apply shadow to a button', '`true`'],
['applyBlur', 'boolean', 'Determines whether to apply a blur effect to the button', '`true`'],
['disabled', 'boolean', 'Determines whether the button is disabled', '`false`'],
['focus', 'boolean', 'Indicates if the button has focus', '`false`']
]} />
</ArticleTab>
</ArticleTabs>
## Floating Button Group
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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}
/>
</FloatingButtonGroup>
);
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['size', 'string', 'The size of the button. Has two options: `small` and `medium`', 'small'],
['children', 'ReactNode', 'An array of React elements representing the individual buttons within the group', '']
]} />
</ArticleTab>
</ArticleTabs>
## Floating Icon Button
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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}
/>
);
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['className', 'string', 'Optional name for additional styling', ''],
['Icon', '`React.ComponentType`', "An optional icon component that's displayed within the button", ''],
['size', 'string', 'The size of the button. Has two options: `small` and `medium`', 'small'],
['position', 'string', 'The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle`', 'standalone'],
['applyShadow', 'boolean', 'Determines whether to apply shadow to a button', '`true`'],
['applyBlur', 'boolean', 'Determines whether to apply a blur effect to the button', '`true`'],
['disabled', 'boolean', 'Determines whether the button is disabled', '`false`'],
['focus', 'boolean', 'Indicates if the button has focus', '`false`'],
['onClick', 'function', 'A callback function that triggers when the user clicks on the button', ''],
['isActive', 'boolean', 'Determines if the button is in an active state', '']
]} />
</ArticleTab>
</ArticleTabs>
## Floating Icon Button Group
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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} />
);
};
`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['className', 'string', 'Optional name for additional styling'],
['size', 'string', 'The size of the button. Has two options: `small` and `medium`'],
['iconButtons', 'array', 'An array of objects, each representing an icon button in the group. Each object should include the icon component you want to display in the button, the function you want to call when a user clicks on the button, and whether the button should be active or not.']
]} />
</ArticleTab>
</ArticleTabs>
## Light Button
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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')}
/>;
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['className', 'string', 'Optional name for additional styling', ''],
['icon', '`React.ReactNode`', 'The icon you want to display in the button', ''],
['title', 'string', 'The text content of the button', ''],
['accent', 'string', 'The accent color of the button. Options include: `secondary` and `tertiary`', 'secondary'],
['active', 'boolean', 'Determines if the button is in an active state', '`false`'],
['disabled', 'boolean', 'Determines whether the button is disabled', '`false`'],
['focus', 'boolean', 'Indicates if the button has focus', '`false`'],
['onClick', 'function', 'A callback function that triggers when the user clicks on the button', '']
]} />
</ArticleTab>
</ArticleTabs>
## Light Icon Button
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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")}
/>
);
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['className', 'string', 'Optional name for additional styling', ''],
['testId', 'string', 'Test identifier for the button', ''],
['Icon', '`React.ComponentType`', "An optional icon component that's displayed within the button", ''],
['title', 'string', 'The text content of the button', ''],
['size', 'string', 'The size of the button. Has two options: `small` and `medium`', 'small'],
['accent', 'string', 'The accent color of the button. Options include: `secondary` and `tertiary`', 'secondary'],
['active', 'boolean', 'Determines if the button is in an active state', '`false`'],
['disabled', 'boolean', 'Determines whether the button is disabled', '`false`'],
['focus', 'boolean', 'Indicates if the button has focus', '`false`'],
['onClick', 'function', 'A callback function that triggers when the user clicks on the button', '']
]} />
</ArticleTab>
</ArticleTabs>
## Main Button
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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}
/>
);
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['title', 'string', 'The text content of the button', ''],
['fullWidth', 'boolean', 'Defines whether the button should span the whole width of its container', '`false`'],
['variant', 'string', 'The visual style variant of the button. Options include `primary` and `secondary`', 'primary'],
['soon', 'boolean', 'Indicates if the button is marked as "soon" (such as for upcoming features)', '`false`'],
['Icon', '`React.ComponentType`', "An optional icon component that's displayed within the button", ''],
['React `button` props', '`React.ComponentProps<\'button\'>`', "Additional props from React's `button` element", '']
]} />
</ArticleTab>
</ArticleTabs>
## Rounded Icon Button
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";
export const MyComponent = () => {
return (
<RoundedIconButton
Icon={IconSearch}
/>
);
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['Icon', '`React.ComponentType`', "An optional icon component that's displayed within the button"],
['React `button` props', '`React.ButtonHTMLAttributes<HTMLButtonElement>`', "Additional props from React's `button` element"]
]} />
</ArticleTab>
</ArticleTabs>

42
packages/twenty-website/src/content/twenty-ui/input/checkbox.mdx Normal file
View File

@ -0,0 +1,42 @@
---
title: Checkbox
icon: TbCheckbox
image: /images/user-guide/tasks/tasks_header.png
---
Used when a user needs to select multiple values from several options.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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"
/>
);
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['checked', 'boolean', 'Indicates whether the checkbox is checked', ''],
['indeterminate', 'boolean', 'Indicates whether the checkbox is in an indeterminate state (neither checked nor unchecked)', ''],
['onChange', 'function', 'The callback function you want to trigger when the checkbox state changes', ''],
['onCheckedChange', 'function', 'The callback function you want to trigger when the `checked` state changes', ''],
['variant', 'string', 'The visual style variant of the box. Options include: `primary`, `secondary`, and `tertiary`', 'primary'],
['size', 'string', 'The size of the checkbox. Has two options: `small` and `large`', 'small'],
['shape', 'string', 'The shape of the checkbox. Has two options: `squared` and `rounded`', 'squared']
]} />
</ArticleTab>
</ArticleTabs>

66
packages/twenty-website/src/content/twenty-ui/input/color-scheme.mdx Normal file
View File

@ -0,0 +1,66 @@
---
title: Color Scheme
icon: TbColorFilter
image: /images/user-guide/fields/field.png
---
## Color Scheme Card
Represents different color schemes and is specially tailored for light and dark themes.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { ColorSchemeCard } from "@/ui/input/color-scheme/components/ColorSchemeCard";
export const MyComponent = () => {
return (
<ColorSchemeCard
variant="Dark"
selected={true}
/>
);
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['variant', 'string', 'The color scheme variant. Options include `Dark`, `Light`, and `System`', 'light'],
['selected', 'boolean', 'If `true`, displays a checkmark to indicate the selected color scheme', ''],
['additional props', '`React.ComponentPropsWithoutRef<\'div\'>`', 'Standard HTML `div` element props', '']
]} />
</ArticleTab>
</ArticleTabs>
## Color Scheme Picker
Allows users to choose between different color schemes.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { ColorSchemePicker } from "@/ui/input/color-scheme/components/ColorSchemePicker";
export const MyComponent = () => {
return <ColorSchemePicker
value="Dark"
onChange
/>;
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['value', '`Color Scheme`', 'The currently selected color scheme'],
['onChange', 'function', 'The callback function you want to trigger when a user selects a color scheme']
]} />
</ArticleTab>
</ArticleTabs>

53
packages/twenty-website/src/content/twenty-ui/input/icon-picker.mdx Normal file
View File

@ -0,0 +1,53 @@
---
title: Icon Picker
icon: TbColorPicker
image: /images/user-guide/github/github-header.png
---
A dropdown-based icon picker that allows users to select an icon from a list.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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>
);
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['disabled', 'boolean', 'Disables the icon picker if set to `true`', ''],
['onChange', 'function', 'The callback function triggered when the user selects an icon. It receives an object with `iconKey` and `Icon` properties', ''],
['selectedIconKey', 'string', 'The key of the initially selected icon', ''],
['onClickOutside', 'function', 'Callback function triggered when the user clicks outside the dropdown', ''],
['onClose', 'function', 'Callback function triggered when the dropdown is closed', ''],
['onOpen', 'function', 'Callback function triggered when the dropdown is opened', ''],
['variant', 'string', 'The visual style variant of the clickable icon. Options include: `primary`, `secondary`, and `tertiary`', 'secondary']
]} />
</ArticleTab>
</ArticleTabs>

38
packages/twenty-website/src/content/twenty-ui/input/image-input.mdx Normal file
View File

@ -0,0 +1,38 @@
---
title: Image Input
icon: TbUpload
image: /images/user-guide/objects/objects.png
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import imageInputCode from '!!raw-loader!@site/src/ui/input/components/imageInputCode.js'
Allows users to upload and remove an image.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { ImageInput } from "@/ui/input/components/ImageInput";
export const MyComponent = () => {
return <ImageInput/>;
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['picture', 'string', 'The image source URL', ''],
['onUpload', 'function', 'The function called when a user uploads a new image. It receives the `File` object as a parameter', ''],
['onRemove', 'function', 'The function called when the user clicks on the remove button', ''],
['onAbort', 'function', 'The function called when a user clicks on the abort button during image upload', ''],
['isUploading', 'boolean', 'Indicates whether an image is currently being uploaded', '`false`'],
['errorMessage', 'string', 'An optional error message to display below the image input', ''],
['disabled', 'boolean', 'If `true`, the entire input is disabled, and the buttons are not clickable', '`false`']
]} />
</ArticleTab>
</ArticleTabs>

102
packages/twenty-website/src/content/twenty-ui/input/radio.mdx Normal file
View File

@ -0,0 +1,102 @@
---
title: Radio
icon: TbCircleDot
image: /images/user-guide/create-workspace/workspace-cover.png
---
Used when users may only choose one option from a series of options.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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"
/>
);
};
`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['style', '`React.CSS` properties', 'Additional inline styles for the component', ''],
['className', 'string', 'Optional CSS class for additional styling', ''],
['checked', 'boolean', 'Indicates whether the radio button is checked', ''],
['value', 'string', 'The label or text associated with the radio button', ''],
['onChange', 'function', 'The function called when the selected radio button is changed', ''],
['onCheckedChange', 'function', 'The function called when the `checked` state of the radio button changes', ''],
['size', 'string', 'The size of the radio button. Options include: `large` and `small`', 'small'],
['disabled', 'boolean', 'If `true`, the radio button is disabled and not clickable', 'false'],
['labelPosition', 'string', 'The position of the label text relative to the radio button. Has two options: `left` and `right`', 'right']
]} />
</ArticleTab>
</ArticleTabs>
## Radio Group
Groups together related radio buttons.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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>
);
};
`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['value', 'string', 'The value of the currently selected radio button'],
['onChange', 'function', 'The callback function triggered when the radio button is changed'],
['onValueChange', 'function', 'The callback function triggered when the selected value in the group changes.'],
['children', '`React.ReactNode`', 'Allows you to pass React components (such as Radio) as children to the Radio Group']
]} />
</ArticleTab>
</ArticleTabs>

52
packages/twenty-website/src/content/twenty-ui/input/select.mdx Normal file
View File

@ -0,0 +1,52 @@
---
title: Select
icon: TbSelect
image: /images/user-guide/what-is-twenty/20.png
---
Allows users to pick a value from a list of predefined options.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { RecoilRoot } from 'recoil';
import { IconTwentyStar } from 'twenty-ui';
import { Select } from '@/ui/input/components/Select';
export const MyComponent = () => {
return (
<RecoilRoot>
<Select
className
disabled={false}
dropdownScopeId="exampleDropdown"
label="Select an option"
options={[
{ value: 'option1', label: 'Option A', Icon: IconTwentyStar },
{ value: 'option2', label: 'Option B', Icon: IconTwentyStar },
]}
value="option1"
/>
</RecoilRoot>
);
};
`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['className', 'string', 'Optional CSS class for additional styling'],
['disabled', 'boolean', 'When set to `true`, disables user interaction with the component'],
['dropdownScopeId', 'string', 'Required prop that uniquely identifies the dropdown scope'],
['label', 'string', 'The label to describe the purpose of the `Select` component'],
['onChange', 'function', 'The function called when the selected values change'],
['options', 'array', "Represents the options available for the `Selected` component. It's an array of objects where each object has a `value` (the unique identifier), `label` (the unique identifier), and an optional `Icon`"],
['value', 'string', 'Represents the currently selected value. It should match one of the `value` properties in the `options` array']
]} />
</ArticleTab>
</ArticleTabs>

210
packages/twenty-website/src/content/twenty-ui/input/text.mdx Normal file
View File

@ -0,0 +1,210 @@
---
title: Text
icon: TbTextSize
image: /images/user-guide/notes/notes_header.png
---
## Text Input
Allows users to enter and edit text.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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>
);
};
`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['className', 'string', 'Optional name for additional styling', ''],
['label', 'string', 'Represents the label for the input', ''],
['onChange', 'function', 'The function called when the input value changes', ''],
['fullWidth', 'boolean', 'Indicates whether the input should take up 100% of the width', ''],
['disableHotkeys', 'boolean', 'Indicates whether hotkeys are enabled for the input', '`false`'],
['error', 'string', 'Represents the error message to be displayed. When provided, it also adds an icon error on the right side of the input', ''],
['onKeyDown', 'function', 'Called when a key is pressed down while the input field is focused. Receives a `React.KeyboardEvent` as an argument', ''],
['RightIcon', 'IconComponent', 'An optional icon component displayed on the right side of the input', '']
]} />
The component also accepts other HTML input element props.
</ArticleTab>
</ArticleTabs>
## Autosize Text Input
Text input component that automatically adjusts its height based on the content.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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>
);
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['onValidate', 'function', 'The callback function you want to trigger when the user validates the input', ''],
['minRows', 'number', 'The minimum number of rows for the text area', '1'],
['placeholder', 'string', 'The placeholder text you want to display when the text area is empty', ''],
['onFocus', 'function', 'The callback function you want to trigger when the text area gains focus', ''],
['variant', 'string', 'The variant of the input. Options include: `default`, `icon`, and `button`', 'default'],
['buttonTitle', 'string', 'The title for the button (only applicable for the button variant)', ''],
['value', 'string', 'The initial value for the text area', 'Empty string']
]} />
</ArticleTab>
</ArticleTabs>
## Entity Title Double Text Input
Displays a pair of text inputs side by side, allowing the user to edit two related values simultaneously.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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>
);
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['firstValue', 'string', 'The value for the first text input'],
['secondValue', 'string', 'The value for the second text input'],
['firstValuePlaceholder', 'string', 'Placeholder text for the first text input, displayed when the input is empty'],
['secondValuePlaceholder', 'string', 'Placeholder text for the second text input, displayed when the input is empty'],
['onChange', 'function', 'The callback function you want to trigger when the text input changes']
]} />
</ArticleTab>
</ArticleTabs>
## Text Area
Allows you to create multi-line text inputs.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`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=""
/>
);
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['disabled', 'boolean', 'Indicates whether the text area is disabled', ''],
['minRows', 'number', 'Minimum number of visible rows for the text area.', '1'],
['onChange', 'function', 'Callback function triggered when the text area content changes', ''],
['placeholder', 'string', 'Placeholder text displayed when the text area is empty', ''],
['value', 'string', 'The current value of the text area', 'Empty string']
]} />
</ArticleTab>
</ArticleTabs>

34
packages/twenty-website/src/content/twenty-ui/input/toggle.mdx Normal file
View File

@ -0,0 +1,34 @@
---
title: Toggle
icon: TbToggleRight
image: /images/user-guide/table-views/table.png
---
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { Toggle } from "@/ui/input/components/Toggle";
export const MyComponent = () => {
return (
<Toggle
value = {true}
onChange = {()=>console.log('On Change event')}
color="green"
toggleSize = "medium"
/>
);
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['value', 'boolean', 'The current state of the toggle', '`false`'],
['onChange', 'function', 'Callback function triggered when the toggle state changes', ''],
['color', 'string', 'Color of the toggle when it\'s in the "on" state. If not provided, it uses the theme\'s blue color', ''],
['toggleSize', 'string', 'Size of the toggle, affecting both height and weight. Has two options: `small` and `medium`', 'medium']
]} />
</ArticleTab>
</ArticleTabs>