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

Migrate to twenty-ui - navigation/menu-item (#8213)

Browse Source 
This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7536](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7536).

 --- 

### Description

Migrate all menu items components to twenty ui and update imports.

```typescript
MenuItem
MenuItemAvata
MenuItemCommand
MenuItemCommandHotKeys
MenuItemDraggable
MenuItemMultiSelect
MenuItemMultiSelectAvatar
MenuItemMultiSelectTag
MenuItemNavigate
MenuItemSelect
MenuItemSelectAvatar
MenuItemSelectColor
MenuItemSelectTag
MenuItemSuggestion
MenuItemToggle
```

\
Also migrate all other dependent components and utilities like
`Checkbox` & `Toggle`\
\
Fixes twentyhq/private-issues#82

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
gitstart-app[bot]
2024-11-07 16:51:39 +00:00
committed by GitHub
parent f9a136ab6d
commit 6264d509bd
106 changed files with 326 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/twenty-website/src/content/twenty-ui/navigation/menu-item.mdx
View File

@ -11,7 +11,7 @@ A versatile menu item designed to be used in a menu or navigation list.
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "@/ui/navigation/menu-item/components/MenuItem";
import { MenuItem } from "twenty-ui";
export const MyComponent = () => {
const handleMenuItemClick = (event) => {
@ -68,7 +68,7 @@ A command-style menu item within a menu to indicate keyboard shortcuts.
<ArticleTab>
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "@/ui/navigation/menu-item/components/MenuItemCommand";
import { MenuItemCommand } from "twenty-ui";
export const MyComponent = () => {
const handleCommandClick = () => {
@ -114,7 +114,7 @@ A draggable menu item component designed to be used in a menu or list where item
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "@/ui/navigation/menu-item/components/MenuItemDraggable";
import { MenuItemDraggable } from "twenty-ui";
export const MyComponent = () => {
const handleMenuItemClick = (event) => {
@ -162,7 +162,7 @@ Provides a way to implement multi-select functionality with an associated checkb
<ArticleTab>
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "@/ui/navigation/menu-item/components/MenuItemMultiSelect";
import { MenuItemMultiSelect } from "twenty-ui";
export const MyComponent = () => {
@ -199,7 +199,7 @@ A multi-select menu item with an avatar, a checkbox for selection, and textual c
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { MenuItemMultiSelectAvatar } from "@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar";
<SandpackEditor content={`import { MenuItemMultiSelectAvatar } from "twenty-ui";
export const MyComponent = () => {
const imageUrl =
@ -239,7 +239,7 @@ A menu item featuring an optional left icon, textual content, and a right-chevro
<ArticleTab>
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "@/ui/navigation/menu-item/components/MenuItemNavigate";
import { MenuItemNavigate } from "twenty-ui";
export const MyComponent = () => {
const handleNavigation = () => {
@ -279,7 +279,7 @@ A selectable menu item, featuring optional left content (icon and text) and an i
<ArticleTab>
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "@/ui/navigation/menu-item/components/MenuItemSelect";
import { MenuItemSelect } from "twenty-ui";
export const MyComponent = () => {
const handleSelection = () => {
@ -323,7 +323,7 @@ A selectable menu item with an avatar, featuring optional left content (avatar a
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { MenuItemSelectAvatar } from "@/ui/navigation/menu-item/components/MenuItemSelectAvatar";
<SandpackEditor content={`import { MenuItemSelectAvatar } from "twenty-ui";
export const MyComponent = () => {
const imageUrl =
@ -374,7 +374,7 @@ A selectable menu item with a color sample for scenarios where you want users to
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { MenuItemSelectColor } from "@/ui/navigation/menu-item/components/MenuItemSelectColor";
<SandpackEditor content={`import { MenuItemSelectColor } from "twenty-ui";
export const MyComponent = () => {
const handleSelection = () => {
@ -420,7 +420,7 @@ A menu item with an associated toggle switch to allow users to enable or disable
<SandpackEditor content={`import { IconBell } from '@tabler/icons-react';
import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle';
import { MenuItemToggle } from 'twenty-ui';
export const MyComponent = () => {