twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-27 11:03:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

Remaining UI docs (#2997)

Browse Source 
* remaining UI docs

* completed ui component docs

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Nimra Ahmed 2023-12-15 15:36:28 +05:00 committed by GitHub
parent 1eb5bebaf7
commit 6e09ae61f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 2385 additions and 329 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/twenty-docs/docs/contributor/frontend/ui-components/input/block-editor.mdx Normal file
View File

@ -0,0 +1,46 @@
---
title: Block Editor
sidebar_position: 11
sidebar_custom_props:
icon: TbTemplate
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import blockEditorCode from '!!raw-loader!@site/src/ui/input/blockEditorCode.js'
Uses a block-based rich text editor from [BlockNote](https://www.blocknotejs.org/) to allow users to edit and view blocks of content.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/input/editor/components/BlockEditor']}
componentCode={blockEditorCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>editor</td>
<td>`BlockNoteEditor`</td>
<td>The block editor instance or configuration</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

3
packages/twenty-docs/docs/contributor/frontend/ui-components/input/button.mdx
View File

@ -772,7 +772,6 @@ A list of buttons and button groups used throughout the app.
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
@ -781,14 +780,12 @@ A list of buttons and button groups used throughout the app.
<td>Icon</td>
<td>`React.ComponentType`</td>
<td>An optional icon component that's displayed within the button</td>
<td></td>
</tr>
<tr>
<td>React `button` props</td>
<td>`React.ButtonHTMLAttributes<HTMLButtonElement>`</td>
<td>Additional props from React's `button` element</td>
<td></td>
</tr>
</tbody>

2
packages/twenty-docs/docs/contributor/frontend/ui-components/input/color-scheme.mdx
View File

@ -50,12 +50,14 @@ Represents different color schemes and is specially tailored for light and dark
<td>selected</td>
<td>boolean</td>
<td>If `true`, displays a checkmark to indicate the selected color scheme</td>
<td></td>
</tr>
<tr>
<td>additional props</td>
<td>`React.ComponentPropsWithoutRef<'div'>`</td>
<td>Standard HTML `div` element props</td>
<td></td>
</tr>
</tbody>

0
packages/twenty-docs/docs/contributor/frontend/ui-components/input/text-input.mdx → packages/twenty-docs/docs/contributor/frontend/ui-components/input/text.mdx
View File

9
packages/twenty-docs/docs/contributor/frontend/ui-components/navigation/_category_.json Normal file
View File

@ -0,0 +1,9 @@
{
"label": "Navigation",
"position": 4,
"collapsible": true,
"collapsed": false,
"customProps": {
"icon": "TbNavigation"
}
}

53
packages/twenty-docs/docs/contributor/frontend/ui-components/navigation/bread-crumb.mdx Normal file
View File

@ -0,0 +1,53 @@
---
title: Breadcrumb
sidebar_position: 1
sidebar_custom_props:
icon: TbSquareChevronsRight
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import breadcrumbCode from '!!raw-loader!@site/src/ui/navigation/breadcrumbCode.js'
Renders a breadcrumb navigation bar.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/bread-crumb/components/Breadcrumb']}
componentCode={breadcrumbCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional class name for additional styling</td>
</tr>
<tr>
<td>links</td>
<td>array</td>
<td>An array of objects, each representing a breadcrumb link. Each object has a `children` property (the text content of the link) and an optional `href` property (the URL to navigate to when the link is clicked)</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

237
packages/twenty-docs/docs/contributor/frontend/ui-components/navigation/link.mdx Normal file
View File

@ -0,0 +1,237 @@
---
title: Links
sidebar_position: 2
sidebar_custom_props:
icon: TbLink
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import contactLinkCode from '!!raw-loader!@site/src/ui/navigation/link/contactLinkCode.js'
import rawLinkCode from '!!raw-loader!@site/src/ui/navigation/link/rawLinkCode.js'
import roundedLinkCode from '!!raw-loader!@site/src/ui/navigation/link/roundedLinkCode.js'
import socialLinkCode from '!!raw-loader!@site/src/ui/navigation/link/socialLinkCode.js'
## Contact Link
A stylized link component for displaying contact information.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/link/components/ContactLink']}
componentCode={contactLinkCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
<tr>
<td>href</td>
<td>string</td>
<td>The target URL or path for the link</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the link is clicked</td>
</tr>
<tr>
<td>children</td>
<td>`React.ReactNode`</td>
<td>The content to be displayed inside the link</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Raw Link
A stylized link component for displaying links.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/link/components/RawLink']}
componentCode={rawLinkCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
<tr>
<td>href</td>
<td>string</td>
<td>The target URL or path for the link</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the link is clicked</td>
</tr>
<tr>
<td>children</td>
<td>`React.ReactNode`</td>
<td>The content to be displayed inside the link</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Rounded Link
A rounded-styled link with a Chip component for links.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/link/components/RoundedLink']}
componentCode={roundedLinkCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>href</td>
<td>string</td>
<td>The target URL or path for the link</td>
</tr>
<tr>
<td>children</td>
<td>`React.ReactNode`</td>
<td>The content to be displayed inside the link</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the link is clicked</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Social Link
Stylized social links, with support for various social link types, such as URLs, LinkedIn, and X (or Twitter).
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/link/components/SocialLink']}
componentCode={socialLinkCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>href</td>
<td>string</td>
<td>The target URL or path for the link</td>
</tr>
<tr>
<td>children</td>
<td>`React.ReactNode`</td>
<td>The content to be displayed inside the link</td>
</tr>
<tr>
<td>type</td>
<td>string</td>
<td>The type of social links. Options include: `url`, `LinkedIn`, and `Twitter`</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the link is clicked</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

768
packages/twenty-docs/docs/contributor/frontend/ui-components/navigation/menu-item.mdx Normal file
View File

@ -0,0 +1,768 @@
---
title: Menu Item
sidebar_position: 3
sidebar_custom_props:
icon: TbMenu
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import menuItemCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemCode.js'
import menuItemCommandCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemCommandCode.js'
import menuItemDraggableCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemDraggableCode.js'
import menuItemMultiSelectAvatarCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemMultiSelectAvatarCode.js'
import menuItemMultiSelectCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemMultiSelectCode.js'
import menuItemNavigateCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemNavigateCode.js'
import menuItemSelectAvatarCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemSelectAvatarCode.js'
import menuItemSelectCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemSelectCode.js'
import menuItemSelectColorCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemSelectColorCode.js'
import menuItemToggleCode from '!!raw-loader!@site/src/ui/navigation/menu-item/menuItemToggleCode.js'
A versatile menu item designed to be used in a menu or navigation list.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItem']}
componentCode={menuItemCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>LeftIcon</td>
<td>IconComponent</td>
<td>An optional left icon displayed before the text in the menu item</td>
<td></td>
</tr>
<tr>
<td>accent</td>
<td>string</td>
<td>Specifies the accent color of the menu item. Options include: `default`, `danger`, and `placeholder`</td>
<td>default</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
<td></td>
</tr>
<tr>
<td>iconButtons</td>
<td>array</td>
<td>An array of objects representing additional icon buttons associated with the menu item</td>
<td></td>
</tr>
<tr>
<td>isTooltipOpen</td>
<td>boolean</td>
<td>Controls the visibility of the tooltip associated with the menu item</td>
<td></td>
</tr>
<tr>
<td>testId</td>
<td>string</td>
<td>The data-testid attribute for testing purposes</td>
<td></td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function triggered when the menu item is clicked</td>
<td></td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
## Variants
The different variants of the menu item component include the following:
### Command
A command-style menu item within a menu to indicate keyboard shortcuts.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemCommand']}
componentCode={menuItemCommandCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>LeftIcon</td>
<td>IconComponent</td>
<td>An optional left icon displayed before the text in the menu item</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
</tr>
<tr>
<td>firstHotKey</td>
<td>string</td>
<td>The first keyboard shortcut associated with the command</td>
</tr>
<tr>
<td>secondHotKey</td>
<td>string</td>
<td>The second keyboard shortcut associated with the command</td>
</tr>
<tr>
<td>isSelected</td>
<td>boolean</td>
<td>Indicates whether the menu item is selected or highlighted</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function triggered when the menu item is clicked</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Draggable
A draggable menu item component designed to be used in a menu or list where items can be dragged, and additional actions can be performed through icon buttons.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemDraggable']}
componentCode={menuItemDraggableCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>LeftIcon</td>
<td>IconComponent</td>
<td>An optional left icon displayed before the text in the menu item</td>
<td></td>
</tr>
<tr>
<td>accent</td>
<td>string</td>
<td>The accent color of the menu item. It can either be `default`, `placeholder`, and `danger`</td>
<td>default</td>
</tr>
<tr>
<td>iconButtons</td>
<td>array</td>
<td>An array of objects representing additional icon buttons associated with the menu item</td>
<td></td>
</tr>
<tr>
<td>isTooltipOpen</td>
<td>boolean</td>
<td>Controls the visibility of the tooltip associated with the menu item</td>
<td></td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the link is clicked</td>
<td></td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
<td></td>
</tr>
<tr>
<td>isDragDisabled</td>
<td>boolean</td>
<td>Indicates whether dragging is disabled</td>
<td>`false`</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Multi Select
Provides a way to implement multi-select functionality with an associated checkbox.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemMultiSelect']}
componentCode={menuItemMultiSelectCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>LeftIcon</td>
<td>IconComponent</td>
<td>An optional left icon displayed before the text in the menu item</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
</tr>
<tr>
<td>selected</td>
<td>boolean</td>
<td>Indicates whether the menu item is selected (checked)</td>
</tr>
<tr>
<td>onSelectChange</td>
<td>function</td>
<td>Callback function triggered when the checkbox state changes</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Multi Select Avatar
A multi-select menu item with an avatar, a checkbox for selection, and textual content.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar']}
componentCode={menuItemMultiSelectAvatarCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>avatar</td>
<td>`ReactNode`</td>
<td>The avatar or icon to be displayed on the left side of the menu item</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
</tr>
<tr>
<td>selected</td>
<td>boolean</td>
<td>Indicates whether the menu item is selected (checked)</td>
</tr>
<tr>
<td>onSelectChange</td>
<td>function</td>
<td>Callback function triggered when the checkbox state changes</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Navigate
A menu item featuring an optional left icon, textual content, and a right-chevron icon.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemNavigate']}
componentCode={menuItemNavigateCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>LeftIcon</td>
<td>IconComponent</td>
<td>An optional left icon displayed before the text in the menu item</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the menu item is clicked</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Select
A selectable menu item, featuring optional left content (icon and text) and an indicator (check icon) for the selected state.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemSelect']}
componentCode={menuItemSelectCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>LeftIcon</td>
<td>IconComponent</td>
<td>An optional left icon displayed before the text in the menu item</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
</tr>
<tr>
<td>selected</td>
<td>boolean</td>
<td>Indicates whether the menu item is selected (checked)</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Indicates whether the menu item is disabled</td>
</tr>
<tr>
<td>hovered</td>
<td>boolean</td>
<td>Indicates whether the menu item is currently being hovered over</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the menu item is clicked</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Select Avatar
A selectable menu item with an avatar, featuring optional left content (avatar and text) and an indicator (check icon) for the selected state.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemSelectAvatar']}
componentCode={menuItemSelectAvatarCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>avatar</td>
<td>`ReactNode`</td>
<td>The avatar or icon to be displayed on the left side of the menu item</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
</tr>
<tr>
<td>selected</td>
<td>boolean</td>
<td>Indicates whether the menu item is selected (checked)</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Indicates whether the menu item is disabled</td>
</tr>
<tr>
<td>hovered</td>
<td>boolean</td>
<td>Indicates whether the menu item is currently being hovered over</td>
</tr>
<tr>
<td>testId</td>
<td>string</td>
<td>The data-testid attribute for testing purposes</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the menu item is clicked</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Select Color
A selectable menu item with a color sample for scenarios where you want users to choose a color from a menu.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemSelectColor']}
componentCode={menuItemSelectColorCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>color</td>
<td>string</td>
<td>The theme color to be displayed as a sample in the menu item. Options include: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, and `gray`</td>
<td></td>
</tr>
<tr>
<td>selected</td>
<td>boolean</td>
<td>Indicates whether the menu item is selected (checked)</td>
<td></td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Indicates whether the menu item is disabled</td>
<td></td>
</tr>
<tr>
<td>hovered</td>
<td>boolean</td>
<td>Indicates whether the menu item is currently being hovered over</td>
<td></td>
</tr>
<tr>
<td>variant</td>
<td>string</td>
<td>The variant of the color sample. It can either be `default` or `pipeline`</td>
<td>default</td>
</tr>
<tr>
<td>onClick</td>
<td>function</td>
<td>Callback function to be triggered when the menu item is clicked</td>
<td></td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
<td></td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>
### Toggle
A menu item with an associated toggle switch to allow users to enable or disable a specific feature
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/menu-item/components/MenuItemToggle']}
componentCode={menuItemToggleCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>LeftIcon</td>
<td>IconComponent</td>
<td>An optional left icon displayed before the text in the menu item</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The text content of the menu item</td>
</tr>
<tr>
<td>toggled</td>
<td>boolean</td>
<td>Indicates whether the toggle switch is in the "on" or "off" state</td>
</tr>
<tr>
<td>onToggleChange</td>
<td>function</td>
<td>Callback function triggered when the toggle switch state changes</td>
</tr>
<tr>
<td>toggleSize</td>
<td>string</td>
<td>The size of the toggle switch. It can be either 'small' or 'medium'</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>Optional name for additional styling</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

53
packages/twenty-docs/docs/contributor/frontend/ui-components/navigation/navigation-bar.mdx Normal file
View File

@ -0,0 +1,53 @@
---
title: Navigation Bar
sidebar_position: 4
sidebar_custom_props:
icon: TbRectangle
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import navBarCode from '!!raw-loader!@site/src/ui/navigation/navBarCode.js'
Renders a navigation bar that contains multiple `NavigationBarItem` components.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/navigation-bar/components/NavigationBar']}
componentCode={navBarCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>activeItemName</td>
<td>string</td>
<td>The name of the currently active navigation item</td>
</tr>
<tr>
<td>items</td>
<td>array</td>
<td>An array of objects representing each navigation item. Each object contains the `name` of the item, the `Icon` component to display, and an `onClick` function to be called when the item is clicked</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

47
packages/twenty-docs/docs/contributor/frontend/ui-components/navigation/step-bar.mdx Normal file
View File

@ -0,0 +1,47 @@
---
title: Step Bar
sidebar_position: 5
sidebar_custom_props:
icon: TbCircleCheckFilled
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import stepBarCode from '!!raw-loader!@site/src/ui/navigation/stepBarCode.js'
Displays progress through a sequence of numbered steps by highlighting the active step. It renders a container with steps, each represented by the `Step` component.
<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
availableComponentPaths={['@/ui/navigation/step-bar/components/StepBar']}
componentCode={stepBarCode}
/>
</TabItem>
<TabItem value="props" label="Props">
<table>
<thead>
<tr>
<th>Props</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>activeStep</td>
<td>number</td>
<td>The index of the currently active step. This determines which step should be visually highlighted</td>
</tr>
</tbody>
</table>
</TabItem>
</Tabs>

7
packages/twenty-docs/src/theme/icons.js
View File

@ -62,4 +62,11 @@ export {
TbSelect,
TbToggleRight,
TbTextPlus,
TbLink,
TbNavigation,
TbMenu,
TbSquareChevronsRight,
TbTemplate,
TbRectangle,
TbCircleCheckFilled,
} from "react-icons/tb";

2
packages/twenty-docs/src/ui/SandpackEditor.js
View File

@ -94,6 +94,8 @@ return (<ThemeProvider theme={lightTheme}>
"lodash.debounce": "latest",
"react-loading-skeleton": "latest",
"zod": "latest",
"@blocknote/react": 'latest',
'react-responsive': 'latest'
},
}}

888
packages/twenty-docs/src/ui/generated/index.cjs
View File

File diff suppressed because one or more lines are too long

251
packages/twenty-docs/src/ui/generated/index.d.cts
View File

@ -1,10 +1,13 @@
import * as _emotion_react from '@emotion/react';
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 * as react 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';
import { BlockNoteEditor } from '@blocknote/core';
import * as _emotion_styled from '@emotion/styled';
declare const lightTheme: {
accent: {
@ -286,7 +289,7 @@ declare const lightTheme: {
type ThemeType = typeof lightTheme;
declare const darkTheme: ThemeType;
type CheckmarkProps = React__default.ComponentPropsWithoutRef<'div'> & {
type CheckmarkProps = react__default.ComponentPropsWithoutRef<'div'> & {
className?: string;
};
declare const Checkmark: ({ className }: CheckmarkProps) => react_jsx_runtime.JSX.Element;
@ -424,7 +427,7 @@ type ProgressBarControls = AnimationControls & {
start: () => Promise<any>;
pause: () => Promise<any>;
};
declare const ProgressBar: React$1.ForwardRefExoticComponent<ProgressBarProps & React$1.RefAttributes<ProgressBarControls>>;
declare const ProgressBar: react.ForwardRefExoticComponent<ProgressBarProps & react.RefAttributes<ProgressBarControls>>;
interface CircularProgressBarProps {
size?: number;
@ -449,7 +452,7 @@ type ButtonProps = {
soon?: boolean;
disabled?: boolean;
focus?: boolean;
onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
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;
@ -475,7 +478,7 @@ type FloatingButtonProps = {
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[];
children: react__default.ReactElement[];
className?: string;
};
declare const FloatingButtonGroup: ({ children, size, className, }: FloatingButtonGroupProps) => react_jsx_runtime.JSX.Element;
@ -491,7 +494,7 @@ type FloatingIconButtonProps = {
applyBlur?: boolean;
disabled?: boolean;
focus?: boolean;
onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
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;
@ -540,7 +543,7 @@ type Props = {
fullWidth?: boolean;
variant?: Variant;
soon?: boolean;
} & React__default.ComponentProps<'button'>;
} & react__default.ComponentProps<'button'>;
type MainButtonProps = Props & {
Icon?: IconComponent;
};
@ -557,11 +560,11 @@ type ColorSchemeSegmentProps = {
variant: ColorScheme;
controls: AnimationControls;
className?: string;
} & React__default.ComponentPropsWithoutRef<'div'>;
} & react__default.ComponentPropsWithoutRef<'div'>;
type ColorSchemeCardProps = {
variant: ColorScheme;
selected?: boolean;
} & React__default.ComponentPropsWithoutRef<'div'>;
} & react__default.ComponentPropsWithoutRef<'div'>;
declare const ColorSchemeCard: ({ variant, selected, onClick, }: ColorSchemeCardProps) => react_jsx_runtime.JSX.Element;
type ColorSchemePickerProps = {
@ -604,7 +607,7 @@ declare enum CheckboxSize {
type CheckboxProps = {
checked: boolean;
indeterminate?: boolean;
onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
onChange?: (event: react.ChangeEvent<HTMLInputElement>) => void;
onCheckedChange?: (value: boolean) => void;
variant?: CheckboxVariant;
size?: CheckboxSize;
@ -641,7 +644,7 @@ type IconPickerProps = {
};
declare const IconPicker: ({ disabled, dropdownScopeId, onChange, selectedIconKey, onClickOutside, onClose, onOpen, variant, className, }: IconPickerProps) => react_jsx_runtime.JSX.Element;
type ImageInputProps = Omit<React__default.ComponentProps<'div'>, 'children'> & {
type ImageInputProps = Omit<react__default.ComponentProps<'div'>, 'children'> & {
picture: string | null | undefined;
onUpload?: (file: File) => void;
onRemove?: () => void;
@ -662,11 +665,11 @@ declare enum LabelPosition {
Right = "right"
}
type RadioProps = {
style?: React$1.CSSProperties;
style?: react.CSSProperties;
className?: string;
checked?: boolean;
value?: string;
onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
onChange?: (event: react.ChangeEvent<HTMLInputElement>) => void;
onCheckedChange?: (checked: boolean) => void;
size?: RadioSize;
disabled?: boolean;
@ -675,17 +678,17 @@ type RadioProps = {
declare const Radio: {
({ checked, value, onChange, onCheckedChange, size, labelPosition, disabled, className, }: RadioProps): react_jsx_runtime.JSX.Element;
Group: ({ value, onChange, onValueChange, children, }: {
children?: React$1.ReactNode;
children?: react.ReactNode;
} & {
value?: string | undefined;
onChange?: ((event: React$1.ChangeEvent<HTMLInputElement>) => void) | undefined;
onChange?: ((event: react.ChangeEvent<HTMLInputElement>) => void) | undefined;
onValueChange?: ((value: string) => void) | undefined;
}) => react_jsx_runtime.JSX.Element;
};
type RadioGroupProps = React__default.PropsWithChildren & {
type RadioGroupProps = react__default.PropsWithChildren & {
value?: string;
onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
onChange?: (event: react__default.ChangeEvent<HTMLInputElement>) => void;
onValueChange?: (value: string) => void;
};
declare const RadioGroup: ({ value, onChange, onValueChange, children, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
@ -726,7 +729,7 @@ type TextInputComponentProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onCh
RightIcon?: IconComponent;
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
};
declare const TextInput: React$1.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "onKeyDown"> & {
declare const TextInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "onKeyDown"> & {
className?: string | undefined;
label?: string | undefined;
onChange?: ((text: string) => void) | undefined;
@ -735,7 +738,7 @@ declare const TextInput: React$1.ForwardRefExoticComponent<Omit<InputHTMLAttribu
error?: string | undefined;
RightIcon?: IconComponent | undefined;
onKeyDown?: ((event: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
} & React$1.RefAttributes<HTMLInputElement>>;
} & react.RefAttributes<HTMLInputElement>>;
type ToggleSize = 'small' | 'medium';
type ToggleProps = {
@ -747,9 +750,215 @@ type ToggleProps = {
};
declare const Toggle: ({ value, onChange, color, toggleSize, className, }: ToggleProps) => react_jsx_runtime.JSX.Element;
interface BlockEditorProps {
editor: BlockNoteEditor;
}
declare const BlockEditor: ({ editor }: BlockEditorProps) => react_jsx_runtime.JSX.Element;
type ContactLinkProps = {
className?: string;
href: string;
children?: react.ReactNode;
onClick?: (event: react.MouseEvent<HTMLElement>) => void;
};
declare const ContactLink: ({ className, href, children, onClick, }: ContactLinkProps) => react_jsx_runtime.JSX.Element;
type RawLinkProps = {
className?: string;
href: string;
children?: react.ReactNode;
onClick?: (event: react.MouseEvent<HTMLElement>) => void;
};
declare const RawLink: ({ className, href, children, onClick, }: RawLinkProps) => react_jsx_runtime.JSX.Element;
type RoundedLinkProps = {
href: string;
children?: react.ReactNode;
onClick?: (event: react.MouseEvent<HTMLElement>) => void;
};
declare const RoundedLink: ({ children, href, onClick }: RoundedLinkProps) => react_jsx_runtime.JSX.Element;
declare enum LinkType {
Url = "url",
LinkedIn = "linkedin",
Twitter = "twitter"
}
type SocialLinkProps = {
href: string;
children?: react.ReactNode;
type?: LinkType;
onClick?: (event: react.MouseEvent<HTMLElement>) => void;
};
declare const SocialLink: ({ children, href, onClick, type, }: SocialLinkProps) => react_jsx_runtime.JSX.Element;
type MenuItemAccent = 'default' | 'danger' | 'placeholder';
type MenuItemIconButton = {
Icon: IconComponent;
onClick?: (event: MouseEvent<any>) => void;
};
type MenuItemProps = {
LeftIcon?: IconComponent | null;
accent?: MenuItemAccent;
text: string;
iconButtons?: MenuItemIconButton[];
isTooltipOpen?: boolean;
className?: string;
testId?: string;
onClick?: (event: MouseEvent<HTMLLIElement>) => void;
};
declare const MenuItem: ({ LeftIcon, accent, text, iconButtons, isTooltipOpen, className, testId, onClick, }: MenuItemProps) => react_jsx_runtime.JSX.Element;
type MenuItemCommandProps = {
LeftIcon?: IconComponent;
text: string;
firstHotKey?: string;
secondHotKey?: string;
className?: string;
isSelected?: boolean;
onClick?: () => void;
};
declare const MenuItemCommand: ({ LeftIcon, text, firstHotKey, secondHotKey, className, isSelected, onClick, }: MenuItemCommandProps) => react_jsx_runtime.JSX.Element;
type MenuItemDraggableProps = {
LeftIcon: IconComponent | undefined;
accent?: MenuItemAccent;
iconButtons?: MenuItemIconButton[];
isTooltipOpen?: boolean;
onClick?: () => void;
text: string;
isDragDisabled?: boolean;
className?: string;
};
declare const MenuItemDraggable: ({ LeftIcon, accent, iconButtons, isTooltipOpen, onClick, text, isDragDisabled, className, }: MenuItemDraggableProps) => react_jsx_runtime.JSX.Element;
type MenuItemMultiSelectProps = {
LeftIcon?: IconComponent;
selected: boolean;
text: string;
className: string;
onSelectChange?: (selected: boolean) => void;
};
declare const MenuItemMultiSelect: ({ LeftIcon, text, selected, className, onSelectChange, }: MenuItemMultiSelectProps) => react_jsx_runtime.JSX.Element;
type MenuItemMultiSelectAvatarProps = {
avatar?: ReactNode;
selected: boolean;
text: string;
className?: string;
onSelectChange?: (selected: boolean) => void;
};
declare const MenuItemMultiSelectAvatar: ({ avatar, text, selected, className, onSelectChange, }: MenuItemMultiSelectAvatarProps) => react_jsx_runtime.JSX.Element;
type MenuItemNavigateProps = {
LeftIcon?: IconComponent;
text: string;
onClick?: () => void;
className?: string;
};
declare const MenuItemNavigate: ({ LeftIcon, text, className, onClick, }: MenuItemNavigateProps) => react_jsx_runtime.JSX.Element;
type MenuItemBaseProps = {
accent?: MenuItemAccent;
};
declare const StyledMenuItemSelect: _emotion_styled.StyledComponent<{
theme?: _emotion_react.Theme | undefined;
as?: react.ElementType<any> | undefined;
} & MenuItemBaseProps & react.ClassAttributes<HTMLLIElement> & react.LiHTMLAttributes<HTMLLIElement> & {
theme?: _emotion_react.Theme | undefined;
} & {
selected: boolean;
disabled?: boolean | undefined;
hovered?: boolean | undefined;
}, {}, {}>;
type MenuItemSelectProps = {
LeftIcon: IconComponent | null | undefined;
selected: boolean;
text: string;
className?: string;
onClick?: () => void;
disabled?: boolean;
hovered?: boolean;
};
declare const MenuItemSelect: ({ LeftIcon, text, selected, className, onClick, disabled, hovered, }: MenuItemSelectProps) => react_jsx_runtime.JSX.Element;
type MenuItemSelectAvatarProps = {
avatar: ReactNode;
selected: boolean;
text: string;
className?: string;
onClick?: () => void;
disabled?: boolean;
hovered?: boolean;
testId?: string;
};
declare const MenuItemSelectAvatar: ({ avatar, text, selected, className, onClick, disabled, hovered, testId, }: MenuItemSelectAvatarProps) => react_jsx_runtime.JSX.Element;
type ColorSampleVariant = 'default' | 'pipeline';
type MenuItemSelectColorProps = {
selected: boolean;
className?: string;
onClick?: () => void;
disabled?: boolean;
hovered?: boolean;
color: ThemeColor;
variant?: ColorSampleVariant;
};
declare const colorLabels: Record<ThemeColor, string>;
declare const MenuItemSelectColor: ({ color, selected, className, onClick, disabled, hovered, variant, }: MenuItemSelectColorProps) => react_jsx_runtime.JSX.Element;
type MenuItemToggleProps = {
LeftIcon?: IconComponent;
toggled: boolean;
text: string;
className?: string;
onToggleChange?: (toggled: boolean) => void;
toggleSize?: ToggleSize;
};
declare const MenuItemToggle: ({ LeftIcon, text, toggled, className, onToggleChange, toggleSize, }: MenuItemToggleProps) => react_jsx_runtime.JSX.Element;
type BreadcrumbProps = {
className?: string;
links: {
children: string;
href?: string;
}[];
};
declare const Breadcrumb: ({ className, links }: BreadcrumbProps) => react_jsx_runtime.JSX.Element;
type NavigationBarProps = {
activeItemName: string;
items: {
name: string;
Icon: IconComponent;
onClick: () => void;
}[];
};
declare const NavigationBar: ({ activeItemName, items, }: NavigationBarProps) => react_jsx_runtime.JSX.Element;
type StepProps = React.PropsWithChildren & React.ComponentProps<'div'> & {
isActive?: boolean;
isLast?: boolean;
index?: number;
label: string;
};
type StepBarProps = react__default.PropsWithChildren & react__default.ComponentProps<'div'> & {
activeStep: number;
};
declare const StepBar: {
({ activeStep, children }: StepBarProps): react_jsx_runtime.JSX.Element;
Step: {
({ isActive, isLast, index, label, children, }: StepProps): react_jsx_runtime.JSX.Element;
displayName: string;
};
};
declare module '@emotion/react' {
interface Theme extends ThemeType {
}
}
export { AnimatedCheckmark, type AnimatedCheckmarkProps, AppTooltip, type AppTooltipProps, AutosizeTextInput, AutosizeTextInputVariant, Button, type ButtonAccent, ButtonGroup, type ButtonGroupProps, type ButtonPosition, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, CheckboxShape, CheckboxSize, CheckboxVariant, Checkmark, type CheckmarkProps, Chip, ChipAccent, ChipSize, ChipVariant, CircularProgressBar, ColorSchemeCard, type ColorSchemeCardProps, ColorSchemePicker, type ColorSchemePickerProps, type ColorSchemeSegmentProps, EntityChip, type EntityChipProps, EntityChipVariant, EntityTitleDoubleTextInput, type EntityTitleDoubleTextInputProps, FloatingButton, FloatingButtonGroup, type FloatingButtonGroupProps, type FloatingButtonPosition, type FloatingButtonProps, type FloatingButtonSize, FloatingIconButton, FloatingIconButtonGroup, type FloatingIconButtonGroupProps, type FloatingIconButtonPosition, type FloatingIconButtonProps, type FloatingIconButtonSize, IconAddressBook, IconPicker, ImageInput, LabelPosition, LightButton, type LightButtonAccent, type LightButtonProps, LightIconButton, type LightIconButtonAccent, type LightIconButtonProps, type LightIconButtonSize, MainButton, OverflowingTextWithTooltip, ProgressBar, type ProgressBarControls, type ProgressBarProps, Radio, RadioGroup, type RadioProps, RadioSize, RoundedIconButton, Select, type SelectProps, SoonPill, type StyledBarProps, Tag, TextArea, type TextAreaProps, TextInput, type TextInputComponentProps, Toggle, type ToggleProps, type ToggleSize, TooltipPosition, darkTheme, lightTheme };
export { AnimatedCheckmark, type AnimatedCheckmarkProps, AppTooltip, type AppTooltipProps, AutosizeTextInput, AutosizeTextInputVariant, BlockEditor, Breadcrumb, Button, type ButtonAccent, ButtonGroup, type ButtonGroupProps, type ButtonPosition, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, CheckboxShape, CheckboxSize, CheckboxVariant, Checkmark, type CheckmarkProps, Chip, ChipAccent, ChipSize, ChipVariant, CircularProgressBar, ColorSchemeCard, type ColorSchemeCardProps, ColorSchemePicker, type ColorSchemePickerProps, type ColorSchemeSegmentProps, ContactLink, EntityChip, type EntityChipProps, EntityChipVariant, EntityTitleDoubleTextInput, type EntityTitleDoubleTextInputProps, FloatingButton, FloatingButtonGroup, type FloatingButtonGroupProps, type FloatingButtonPosition, type FloatingButtonProps, type FloatingButtonSize, FloatingIconButton, FloatingIconButtonGroup, type FloatingIconButtonGroupProps, type FloatingIconButtonPosition, type FloatingIconButtonProps, type FloatingIconButtonSize, IconAddressBook, IconPicker, ImageInput, LabelPosition, LightButton, type LightButtonAccent, type LightButtonProps, LightIconButton, type LightIconButtonAccent, type LightIconButtonProps, type LightIconButtonSize, LinkType, MainButton, MenuItem, MenuItemCommand, type MenuItemCommandProps, MenuItemDraggable, type MenuItemDraggableProps, type MenuItemIconButton, MenuItemMultiSelect, MenuItemMultiSelectAvatar, MenuItemNavigate, type MenuItemNavigateProps, type MenuItemProps, MenuItemSelect, MenuItemSelectAvatar, MenuItemSelectColor, MenuItemToggle, NavigationBar, OverflowingTextWithTooltip, ProgressBar, type ProgressBarControls, type ProgressBarProps, Radio, RadioGroup, type RadioProps, RadioSize, RawLink, RoundedIconButton, RoundedLink, Select, type SelectProps, SocialLink, SoonPill, StepBar, type StepBarProps, type StyledBarProps, StyledMenuItemSelect, Tag, TextArea, type TextAreaProps, TextInput, type TextInputComponentProps, Toggle, type ToggleProps, type ToggleSize, TooltipPosition, colorLabels, darkTheme, lightTheme };

8
packages/twenty-docs/src/ui/input/blockEditorCode.js Normal file
View File

@ -0,0 +1,8 @@
import { useBlockNote } from "@blocknote/react";
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
export const MyComponent = () => {
const BlockNoteEditor = useBlockNote();
return <BlockEditor editor={BlockNoteEditor} />;
};

17
packages/twenty-docs/src/ui/navigation/breadCrumbCode.js Normal file
View File

@ -0,0 +1,17 @@
import { BrowserRouter } from "react-router-dom";
import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb";
export const MyComponent = () => {
const breadcrumbLinks = [
{ children: "Home", href: "/" },
{ children: "Category", href: "/category" },
{ children: "Subcategory", href: "/category/subcategory" },
{ children: "Current Page" },
];
return (
<BrowserRouter>
<Breadcrumb className links={breadcrumbLinks} />
</BrowserRouter>
)
};

20
packages/twenty-docs/src/ui/navigation/link/contactLinkCode.js Normal file
View File

@ -0,0 +1,20 @@
import { ContactLink } from "@/ui/navigation/link/components/ContactLink";
import { BrowserRouter as Router } from "react-router-dom";
export const MyComponent = () => {
const handleLinkClick = (event) => {
console.log("Contact link clicked!", event);
};
return (
<Router>
<ContactLink
className
href="mailto:example@example.com"
onClick={handleLinkClick}
>
example@example.com
</ContactLink>
</Router>
);
};

16
packages/twenty-docs/src/ui/navigation/link/rawLinkCode.js Normal file
View File

@ -0,0 +1,16 @@
import { RawLink } from "@/ui/navigation/link/components/RawLink";
import { BrowserRouter as Router } from "react-router-dom";
export const MyComponent = () => {
const handleLinkClick = (event) => {
console.log("Contact link clicked!", event);
};
return (
<Router>
<RawLink className href="/contact" onClick={handleLinkClick}>
Contact Us
</RawLink>
</Router>
);
};

16
packages/twenty-docs/src/ui/navigation/link/roundedLinkCode.js Normal file
View File

@ -0,0 +1,16 @@
import { RoundedLink } from "@/ui/navigation/link/components/RoundedLink";
import { BrowserRouter as Router } from "react-router-dom";
export const MyComponent = () => {
const handleLinkClick = (event) => {
console.log("Contact link clicked!", event);
};
return (
<Router>
<RoundedLink href="/contact" onClick={handleLinkClick}>
Contact Us
</RoundedLink>
</Router>
);
};

13
packages/twenty-docs/src/ui/navigation/link/socialLinkCode.js Normal file
View File

@ -0,0 +1,13 @@
import { SocialLink } from "@/ui/navigation/link/components/SocialLink";
import { BrowserRouter as Router } from "react-router-dom";
export const MyComponent = () => {
return (
<Router>
<SocialLink
type="twitter"
href="https://twitter.com/twentycrm"
></SocialLink>
</Router>
);
};

26
packages/twenty-docs/src/ui/navigation/menu-item/menuItemCode.js Normal file
View File

@ -0,0 +1,26 @@
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "@/ui/navigation/menu-item/components/MenuItem";
export const MyComponent = () => {
const handleMenuItemClick = (event) => {
console.log("Menu item clicked!", event);
};
const handleButtonClick = (event) => {
console.log("Icon button clicked!", event);
};
return (
<MenuItem
LeftIcon={IconBell}
accent="default"
text="Menu item text"
iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
isTooltipOpen={true}
testId="menu-item-1"
onClick={handleMenuItemClick}
className
/>
);
};

20
packages/twenty-docs/src/ui/navigation/menu-item/menuItemCommandCode.js Normal file
View File

@ -0,0 +1,20 @@
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "@/ui/navigation/menu-item/components/MenuItemCommand";
export const MyComponent = () => {
const handleCommandClick = () => {
console.log("Command clicked!");
};
return (
<MenuItemCommand
LeftIcon={IconBell}
text="First Option"
firstHotKey="⌘"
secondHotKey="1"
isSelected={true}
onClick={handleCommandClick}
className
/>
);
};

22
packages/twenty-docs/src/ui/navigation/menu-item/menuItemDraggableCode.js Normal file
View File

@ -0,0 +1,22 @@
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "@/ui/navigation/menu-item/components/MenuItemDraggable";
export const MyComponent = () => {
const handleMenuItemClick = (event) => {
console.log("Menu item clicked!", event);
};
return (
<MenuItemDraggable
LeftIcon={IconBell}
accent="default"
iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
isTooltipOpen={false}
onClick={handleMenuItemClick}
text="Menu item draggable"
isDragDisabled={false}
className
/>
);
};

20
packages/twenty-docs/src/ui/navigation/menu-item/menuItemMultiSelectAvatarCode.js Normal file
View File

@ -0,0 +1,20 @@
import { MenuItemMultiSelectAvatar } from "@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar";
export const MyComponent = () => {
const imageUrl =
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";
const handleSelectChange = (selected) => {
console.log(`Item selected: ${selected}`);
};
return (
<MenuItemMultiSelectAvatar
avatar={<img src={imageUrl} alt="Avatar" />}
text="First Option"
selected={false}
onSelectChange={handleSelectChange}
className
/>
);
};

18
packages/twenty-docs/src/ui/navigation/menu-item/menuItemMultiSelectCode.js Normal file
View File

@ -0,0 +1,18 @@
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "@/ui/navigation/menu-item/components/MenuItemMultiSelect";
export const MyComponent = () => {
const handleSelectChange = (selected) => {
console.log(`Item selected: ${selected}`);
};
return (
<MenuItemMultiSelect
LeftIcon={IconBell}
text="First Option"
selected={false}
onSelectChange={handleSelectChange}
className
/>
);
};

17
packages/twenty-docs/src/ui/navigation/menu-item/menuItemNavigateCode.js Normal file
View File

@ -0,0 +1,17 @@
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "@/ui/navigation/menu-item/components/MenuItemNavigate";
export const MyComponent = () => {
const handleNavigation = () => {
console.log("Navigate to another page");
};
return (
<MenuItemNavigate
LeftIcon={IconBell}
text="First Option"
onClick={handleNavigation}
className
/>
);
};

23
packages/twenty-docs/src/ui/navigation/menu-item/menuItemSelectAvatarCode.js Normal file
View File

@ -0,0 +1,23 @@
import { MenuItemSelectAvatar } from "@/ui/navigation/menu-item/components/MenuItemSelectAvatar";
export const MyComponent = () => {
const imageUrl =
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";
const handleSelection = () => {
console.log("Menu item selected");
};
return (
<MenuItemSelectAvatar
avatar={<img src={imageUrl} alt="Avatar" />}
text="First Option"
selected={true}
disabled={false}
hovered={false}
testId="menu-item-test"
onClick={handleSelection}
className
/>
);
};

20
packages/twenty-docs/src/ui/navigation/menu-item/menuItemSelectCode.js Normal file
View File

@ -0,0 +1,20 @@
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "@/ui/navigation/menu-item/components/MenuItemSelect";
export const MyComponent = () => {
const handleSelection = () => {
console.log("Menu item selected");
};
return (
<MenuItemSelect
LeftIcon={IconBell}
text="First Option"
selected={true}
disabled={false}
hovered={false}
onClick={handleSelection}
className
/>
);
};

19
packages/twenty-docs/src/ui/navigation/menu-item/menuItemSelectColorCode.js Normal file
View File

@ -0,0 +1,19 @@
import { MenuItemSelectColor } from "@/ui/navigation/menu-item/components/MenuItemSelectColor";
export const MyComponent = () => {
const handleSelection = () => {
console.log("Menu item selected");
};
return (
<MenuItemSelectColor
color="green"
selected={true}
disabled={false}
hovered={true}
variant="default"
onClick={handleSelection}
className
/>
);
};

19
packages/twenty-docs/src/ui/navigation/menu-item/menuItemToggleCode.js Normal file
View File

@ -0,0 +1,19 @@
import { IconBell } from "@tabler/icons-react";
import { MenuItemToggle } from "@/ui/navigation/menu-item/components/MenuItemToggle";
export const MyComponent = () => {
const handleToggleChange = (toggled) => {
console.log(`Toggle state changed: ${toggled}`);
};
return (
<MenuItemToggle
LeftIcon={IconBell}
text="First Option"
toggled={true}
onToggleChange={handleToggleChange}
toggleSize="small"
className
/>
);
};

25
packages/twenty-docs/src/ui/navigation/navBarCode.js Normal file
View File

@ -0,0 +1,25 @@
import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
export const MyComponent = () => {
const navigationItems = [
{
name: "Home",
Icon: IconHome,
onClick: () => console.log("Home clicked"),
},
{
name: "Profile",
Icon: IconUser,
onClick: () => console.log("Profile clicked"),
},
{
name: "Settings",
Icon: IconSettings,
onClick: () => console.log("Settings clicked"),
},
];
return <NavigationBar activeItemName="Home" items={navigationItems}/>;
};

11
packages/twenty-docs/src/ui/navigation/stepBarCode.js Normal file
View File

@ -0,0 +1,11 @@
import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
export const MyComponent = () => {
return (
<StepBar activeStep={2}>
<StepBar.Step>Step 1</StepBar.Step>
<StepBar.Step>Step 2</StepBar.Step>
<StepBar.Step>Step 3</StepBar.Step>
</StepBar>
);
};

18
packages/twenty-front/tsup.ui.index.tsx
View File

@ -44,3 +44,21 @@ export * from './src/modules/ui/input/components/Select'
export * from './src/modules/ui/input/components/TextArea'
export * from './src/modules/ui/input/components/TextInput'
export * from './src/modules/ui/input/components/Toggle'
export * from './src/modules/ui/input/editor/components/BlockEditor'
export * from './src/modules/ui/navigation/link/components/ContactLink';
export * from './src/modules/ui/navigation/link/components/RawLink';
export * from './src/modules/ui/navigation/link/components/RoundedLink';
export * from './src/modules/ui/navigation/link/components/SocialLink';
export * from './src/modules/ui/navigation/menu-item/components/MenuItem';
export * from './src/modules/ui/navigation/menu-item/components/MenuItemCommand';
export * from './src/modules/ui/navigation/menu-item/components/MenuItemDraggable';
export * from './src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect';
export * from './src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
export * from './src/modules/ui/navigation/menu-item/components/MenuItemNavigate';
export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelect';
export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar';
export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelectColor';
export * from './src/modules/ui/navigation/menu-item/components/MenuItemToggle';
export * from './src/modules/ui/navigation/bread-crumb/components/Breadcrumb'
export * from './src/modules/ui/navigation/navigation-bar/components/NavigationBar'
export * from './src/modules/ui/navigation/step-bar/components/StepBar'