From 6d8bf5550064af60a3456e6dedfc264f5c77f23e Mon Sep 17 00:00:00 2001
From: Eelco Wiersma <eelco@appulse.nl>
Date: Fri, 1 Nov 2024 17:21:01 +0000
Subject: [PATCH] feat: add actions

---
 .../src/sidebar/sidebar-item.recipe.ts        |  7 +++-
 .../src/sidebar/sidebar.context.tsx           |  3 +-
 .../src/sidebar/sidebar.stories.tsx           | 37 ++++++++++++++++++-
 packages/saas-ui-core/src/theme/conditions.ts |  1 +
 4 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/packages/saas-ui-core/src/sidebar/sidebar-item.recipe.ts b/packages/saas-ui-core/src/sidebar/sidebar-item.recipe.ts
index 4b06940e..3285052b 100644
--- a/packages/saas-ui-core/src/sidebar/sidebar-item.recipe.ts
+++ b/packages/saas-ui-core/src/sidebar/sidebar-item.recipe.ts
@@ -2,7 +2,7 @@ import { defineSlotRecipe } from '#system'
 
 export const sidebarNavItemSlotRecipe = defineSlotRecipe({
   className: 'sui-sidebar-nav-item',
-  slots: ['item', 'button', 'endElement'],
+  slots: ['item', 'button'],
   base: {
     item: {
       position: 'relative',
@@ -16,7 +16,7 @@ export const sidebarNavItemSlotRecipe = defineSlotRecipe({
       textOverflow: 'ellipsis',
       overflow: 'hidden',
       whiteSpace: 'nowrap',
-      cursor: 'cursor.pointer',
+      cursor: 'button',
       transitionProperty: 'common',
       transitionDuration: 'fast',
       focusVisibleRing: 'outside',
@@ -51,6 +51,9 @@ export const sidebarNavItemSlotRecipe = defineSlotRecipe({
           borderRadius: 'md',
           px: 2,
           height: 8,
+          '&:has(:nth-child(3))': {
+            pe: 0,
+          },
         },
       },
     },
diff --git a/packages/saas-ui-core/src/sidebar/sidebar.context.tsx b/packages/saas-ui-core/src/sidebar/sidebar.context.tsx
index 964f9761..dfbeb880 100644
--- a/packages/saas-ui-core/src/sidebar/sidebar.context.tsx
+++ b/packages/saas-ui-core/src/sidebar/sidebar.context.tsx
@@ -71,7 +71,7 @@ export function SidebarProvider(props: SidebarProviderProps) {
 
   const mode = modeProp === 'flyout' && isMobile ? 'collapsible' : modeProp
   const isFlyout = mode === 'flyout'
-  console.log({ mode, isMobile })
+
   const [openMobile, setOpenMobile] = useState(false)
 
   const disclosure = useDisclosure({
@@ -117,7 +117,6 @@ export const useSidebarTrigger = () => {
   const getFlyoutButtonProps = (props: HTMLSystemProps<'button'>) => {
     return {
       onMouseEnter: callAll(() => {
-        console.log('enter', context)
         context?.setOpen(true)
       }, props?.onMouseEnter),
       'data-state': context.open ? 'open' : 'closed',
diff --git a/packages/saas-ui-core/src/sidebar/sidebar.stories.tsx b/packages/saas-ui-core/src/sidebar/sidebar.stories.tsx
index 56c18736..86b8b6b7 100644
--- a/packages/saas-ui-core/src/sidebar/sidebar.stories.tsx
+++ b/packages/saas-ui-core/src/sidebar/sidebar.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import {
+  Badge,
   Box,
   Breadcrumb,
   Collapsible,
@@ -22,6 +23,7 @@ import { atom, useAtom } from 'jotai'
 import {
   RiAddLine,
   RiArrowRightSFill,
+  RiCloseLine,
   RiFolderFill,
   RiInbox2Fill,
   RiOrganizationChart,
@@ -33,6 +35,7 @@ import {
 import { AppShell } from '../app-shell/index.ts'
 import { PersonaAvatar } from '../persona/persona.tsx'
 import { Sidebar, useSidebar } from './index.ts'
+import { SidebarNavItemEndElement } from './sidebar.tsx'
 
 export interface SkeletonTextProps extends SkeletonProps {
   noOfLines?: number
@@ -66,7 +69,7 @@ const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
   },
 )
 
-const modeAtom = atom<'flyout' | 'collapsible'>('flyout')
+const modeAtom = atom<'flyout' | 'collapsible'>('collapsible')
 
 function SidebarLayout(props: { children: React.ReactElement }) {
   const [mode, setMode] = useAtom(modeAtom)
@@ -219,6 +222,10 @@ export const Default: Story = {
                   <Sidebar.NavButton active>
                     <RiInbox2Fill />
                     Inbox
+                    <Spacer />
+                    <Badge bg="none" px="2">
+                      12
+                    </Badge>
                   </Sidebar.NavButton>
                 </Sidebar.NavItem>
                 <Sidebar.NavItem>
@@ -270,12 +277,40 @@ export const Default: Story = {
                       <Sidebar.NavButton>
                         <Text>🌟</Text>
                         Chakra v3
+                        <Spacer />
+                        <IconButton
+                          variant="ghost"
+                          aria-label="Remove from favourites"
+                          title="Remove from favourites"
+                          size="xs"
+                          opacity="0"
+                          _parentHover={{
+                            opacity: 0.6,
+                            _hover: { opacity: 1 },
+                          }}
+                        >
+                          <RiCloseLine />
+                        </IconButton>
                       </Sidebar.NavButton>
                     </Sidebar.NavItem>
                     <Sidebar.NavItem>
                       <Sidebar.NavButton>
                         <Text>🎨</Text>
                         Design systems
+                        <Spacer />
+                        <IconButton
+                          variant="ghost"
+                          aria-label="Remove from favourites"
+                          title="Remove from favourites"
+                          size="xs"
+                          opacity="0"
+                          _parentHover={{
+                            opacity: 0.6,
+                            _hover: { opacity: 1 },
+                          }}
+                        >
+                          <RiCloseLine />
+                        </IconButton>
                       </Sidebar.NavButton>
                     </Sidebar.NavItem>
                   </Sidebar.GroupContent>
diff --git a/packages/saas-ui-core/src/theme/conditions.ts b/packages/saas-ui-core/src/theme/conditions.ts
index 041a05e5..8593ab4c 100644
--- a/packages/saas-ui-core/src/theme/conditions.ts
+++ b/packages/saas-ui-core/src/theme/conditions.ts
@@ -22,4 +22,5 @@ export const conditions = defineConditions({
   groupExpanded:
     '.group:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &, [role=group]:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &',
   groupInvalid: '.group:invalid &, [role=group]:invalid &',
+  parentHover: 'button:hover > &, a:hover > &',
 })