admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 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
33 changed files with 2385 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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