@cypress-design/react-docmenu 0.3.0 → 0.4.0

package/.turbo/turbo-build.log

@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
 $ rollup -c ./rollup.config.mjs
 
 ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
-created ./dist/index.umd.js, ./dist/index.es.mjs in 22.3s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 11.9s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @cypress-design/react-docmenu
 
+## 0.4.0
+
+### Minor Changes
+
+- [#350](https://github.com/cypress-io/cypress-design/pull/350) [`abc414d`](https://github.com/cypress-io/cypress-design/commit/abc414da149eb6fe0cfa61497a0aa8630d8d8d6e) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: allow usage of a custom link component
+
+### Patch Changes
+
+- [#347](https://github.com/cypress-io/cypress-design/pull/347) [`de67952`](https://github.com/cypress-io/cypress-design/commit/de679522ea2269854ec8ac8de925fcf930ce96e4) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: docmenu docusaurus style items structure
+
+- Updated dependencies [[`de67952`](https://github.com/cypress-io/cypress-design/commit/de679522ea2269854ec8ac8de925fcf930ce96e4)]:
+  - @cypress-design/constants-docmenu@0.1.1
+
+## 0.3.1
+
+### Patch Changes
+
+- [#310](https://github.com/cypress-io/cypress-design/pull/310) [`a3a323f`](https://github.com/cypress-io/cypress-design/commit/a3a323fde7acf5e5407b298b4faa0c90314c6139) Thanks [@elevatebart](https://github.com/elevatebart)! - Add-eslint-react-hooks
+
+- Updated dependencies [[`630ad4a`](https://github.com/cypress-io/cypress-design/commit/630ad4ae2e6ba65350951949767a4ebdc4c7eb0a), [`a3a323f`](https://github.com/cypress-io/cypress-design/commit/a3a323fde7acf5e5407b298b4faa0c90314c6139)]:
+  - @cypress-design/react-icon@0.24.0
+
 ## 0.3.0
 
 ### Minor Changes

package/DocMenu.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'
-import { DocLink } from './_DocLink'
+import { DocLink, LinkComponentType } from './_DocLink'
 import { DocGroup } from './_DocGroup'
 import clsx from 'clsx'
 
@@ -9,11 +9,13 @@ export type NavItem = NavGroup | NavItemLink
 export interface DocMenuProps extends React.HTMLAttributes<HTMLUListElement> {
   items: NavItem[]
   collapsible?: boolean
+  LinkComponent?: LinkComponentType
 }
 
 export const DocMenu: React.FC<DocMenuProps> = ({
   items,
   collapsible = true,
+  LinkComponent = 'a',
   ...rest
 }) => {
   return (
@@ -21,11 +23,21 @@ export const DocMenu: React.FC<DocMenuProps> = ({
       {items.map((item, index) =>
         'items' in item ? (
           <li key={index} className="relative list-none p-0">
-            <DocGroup group={item} collapsible={collapsible} />
+            <DocGroup
+              index={index}
+              group={item}
+              collapsible={collapsible}
+              LinkComponent={LinkComponent}
+            />
           </li>
         ) : (
-          <DocLink key={index} item={item} collapsible={collapsible} />
-        )
+          <DocLink
+            key={index}
+            item={item}
+            collapsible={collapsible}
+            LinkComponent={LinkComponent}
+          />
+        ),
       )}
     </ul>
   )

package/DocMenuReact.cy.tsx

@@ -2,13 +2,58 @@
 
 import * as React from 'react'
 import { mount } from 'cypress/react18'
-import DocMenuStory from './DocMenu.rootstory'
+import DocMenu from './index'
 import assertions from '../assertions'
 import { NavGroup, NavItemLink } from '../constants'
 
 describe('<DocMenu/>', () => {
+  it('works with 1 level of items', () => {
+    mount(<DocMenu items={[{ href: '/foo', label: 'Foo' }]} />)
+  })
+
+  it('works with 2 level of items', () => {
+    mount(
+      <DocMenu
+        items={[{ label: 'Bar', items: [{ href: '/foo', label: 'Foo' }] }]}
+      />,
+    )
+  })
+
+  it('works with 3 level of items', () => {
+    mount(
+      <DocMenu
+        items={[
+          {
+            label: 'Baaaaaaz',
+            items: [{ label: 'Bar', items: [{ href: '/foo', label: 'Foo' }] }],
+          },
+        ]}
+      />,
+    )
+  })
+
+  it('renders the custom link components', () => {
+    mount(
+      <DocMenu
+        items={[
+          {
+            label: 'Baaaaaaz',
+            items: [{ label: 'Bar', items: [{ href: '/foo', label: 'Foo' }] }],
+          },
+        ]}
+        LinkComponent={({ href, className, children }) => (
+          <div className={className}>
+            {children} + href: {href}
+          </div>
+        )}
+      />,
+    )
+    cy.findByText('Bar').click()
+    cy.findByText('Foo + href: /foo', { selector: 'div' }).should('be.visible')
+  })
+
   function mountStory(items: (NavItemLink | NavGroup)[] = []) {
-    mount(<DocMenuStory items={items} />)
+    mount(<DocMenu items={items} />)
   }
   assertions(mountStory)
 })

package/ReadMe.md

@@ -18,62 +18,96 @@ yarn add @cypress-design/react-docmenu
 import DocMenu from '@cypress-design/react-docmenu'
 ```
 
+### Default usage
+
+```tsx live
+export default () => (
+  <DocMenu
+    items={[
+      {
+        label: 'Get Started',
+        href: '#',
+      },
+      {
+        label: 'Overview',
+        items: [
+          {
+            label: 'Overview Item 1',
+            href: '#',
+          },
+          {
+            label: 'Overview Item 2',
+            href: '#',
+            active: true,
+          },
+        ],
+      },
+      {
+        label: 'Getting Started',
+        items: [
+          {
+            label: 'Item 1',
+            href: '#',
+          },
+          {
+            label: 'Group',
+            items: [
+              {
+                label: 'Item 1',
+                href: '#',
+              },
+              {
+                label: 'Item 2',
+                href: '#',
+              },
+              {
+                label: 'Item 3',
+                href: '#',
+              },
+              {
+                label: 'Item 4',
+                href: '#',
+              },
+            ],
+          },
+          {
+            label: 'Item 5',
+            href: '#',
+            active: true,
+          },
+        ],
+      },
+    ]}
+  />
+)
+```
+
+### With a custom link
+
 ```tsx live
-<DocMenu
-  items={[
-    {
-      text: 'Get Started',
-      href: '#',
-    },
-    {
-      text: 'Overview',
-      items: [
-        {
-          text: 'Overview Item 1',
-          href: '#',
-        },
-        {
-          text: 'Overview Item 2',
-          href: '#',
-          active: true,
-        },
-      ],
-    },
-    {
-      text: 'Getting Started',
-      items: [
-        {
-          text: 'Item 1',
-          href: '#',
-        },
-        {
-          text: 'Group',
-          items: [
-            {
-              text: 'Item 1',
-              href: '#',
-            },
-            {
-              text: 'Item 2',
-              href: '#',
-            },
-            {
-              text: 'Item 3',
-              href: '#',
-            },
-            {
-              text: 'Item 4',
-              href: '#',
-            },
-          ],
-        },
-        {
-          text: 'Item 5',
-          href: '#',
-          active: true,
-        },
-      ],
-    },
-  ]}
-/>
+const CustomLink = ({ href, children, className }) => {
+  return (
+    <a
+      href={href}
+      className={className}
+      onClick={(evt) => {
+        console.log('The link was clicked.', { target: evt.target })
+      }}
+    >
+      {children} 🔗
+    </a>
+  )
+}
+
+export default () => (
+  <DocMenu
+    LinkComponent={CustomLink}
+    items={[
+      {
+        label: 'Install',
+        href: '#with-a-custom-link',
+      },
+    ]}
+  />
+)
 ```

package/_DocGroup.tsx

@@ -2,13 +2,15 @@ import * as React from 'react'
 import { IconChevronDownSmall } from '@cypress-design/react-icon'
 import clsx from 'clsx'
 import { NavGroup, classes } from '@cypress-design/constants-docmenu'
-import { DocLink } from './_DocLink'
+import { DocLink, LinkComponentType } from './_DocLink'
 
 export interface DocGroupProps {
+  index: number
   group: NavGroup
   collapsible: boolean
   depth?: number
   setHeight?: (height: number) => void
+  LinkComponent?: LinkComponentType
 }
 
 export const DocGroup: React.FC<DocGroupProps> = ({
@@ -16,41 +18,54 @@ export const DocGroup: React.FC<DocGroupProps> = ({
   collapsible,
   depth = 0,
   setHeight,
+  index,
+  LinkComponent = 'a',
 }) => {
   const [open, setOpen] = React.useState(depth === 0)
   const [itemsHeights, setItemsHeights] = React.useState<number[]>(
-    Array(group.items.length).fill(1)
+    Array(group.items.length).fill(1),
   )
 
   React.useEffect(() => {
-    setHeight?.(open ? itemsHeights.reduce((a, b) => a + b, 1) : 1)
-  }, [itemsHeights, open])
+    // if this group contains other groups, ignore this effect
+    // it will be triggered by a leaf and trickle up
+    if (group.items.some((item) => 'items' in item)) {
+      return
+    }
+
+    const newHeight = open ? itemsHeights.reduce((a, b) => a + b, 1) : 1
+
+    setHeight?.(newHeight)
+  }, [itemsHeights, open, setHeight, group.items, group.label])
 
   const [activeTop, setActiveTop] = React.useState(0)
 
   React.useEffect(() => {
     const activeItem = group.items.findIndex(
-      (item) => 'href' in item && item.active
+      (item) => 'href' in item && item.active,
     )
     if (activeItem >= 0) {
       setActiveTop(
-        itemsHeights.slice(0, activeItem).reduce((a, b) => a + b, 1) * 44
+        itemsHeights.slice(0, activeItem).reduce((a, b) => a + b, 1) * 44,
       )
     }
-  }, [itemsHeights])
+  }, [itemsHeights, group.items])
 
   function toggleMenu(open: boolean) {
     if (!collapsible) return
     setOpen(open)
   }
 
-  function onSetHeight(index: number, height: number) {
-    setItemsHeights((prev) => {
-      const newHeights = [...prev]
-      newHeights[index] = height
-      return newHeights
-    })
-  }
+  const onSetHeightCallback = React.useCallback(
+    (height: number) => {
+      setItemsHeights((prev) => {
+        const newHeights = [...prev]
+        newHeights[index] = height
+        return newHeights
+      })
+    },
+    [setItemsHeights, index],
+  )
 
   const Head = collapsible ? 'button' : group.href ? 'a' : 'div'
 
@@ -76,7 +91,7 @@ export const DocGroup: React.FC<DocGroupProps> = ({
             })}
           />
         ) : null}
-        {group.text}
+        {group.label}
       </Head>
       {collapsible &&
       depth >= 0 &&
@@ -102,8 +117,10 @@ export const DocGroup: React.FC<DocGroupProps> = ({
               <DocGroup
                 group={item}
                 depth={depth + 1}
-                setHeight={(height) => onSetHeight(index, height)}
+                setHeight={onSetHeightCallback}
+                index={index}
                 collapsible={collapsible}
+                LinkComponent={LinkComponent}
               />
             </li>
           ) : (
@@ -113,8 +130,9 @@ export const DocGroup: React.FC<DocGroupProps> = ({
               collapsible={collapsible}
               depth={depth}
               onActive={(top) => setActiveTop(top)}
+              LinkComponent={LinkComponent}
             />
-          )
+          ),
         )}
       </ul>
     </>

package/_DocLink.tsx

@@ -2,11 +2,18 @@ import * as React from 'react'
 import clsx from 'clsx'
 import { NavItemLink } from '@cypress-design/constants-docmenu'
 
+export type LinkComponentType = React.ElementType<{
+  href: string
+  className?: string
+  children?: React.ReactNode
+}>
+
 export interface DocLinkProps {
   item: NavItemLink
   collapsible: boolean
   depth?: number
   onActive?: (top: number) => void
+  LinkComponent?: LinkComponentType
 }
 
 export const DocLink: React.FC<DocLinkProps> = ({
@@ -14,6 +21,7 @@ export const DocLink: React.FC<DocLinkProps> = ({
   collapsible,
   depth = -1,
   onActive,
+  LinkComponent = 'a',
 }) => {
   const activeLIRef = React.useRef<HTMLLIElement>(null)
 
@@ -23,7 +31,7 @@ export const DocLink: React.FC<DocLinkProps> = ({
     if (item.active) {
       onActive?.(activeLIRef?.current?.offsetTop || 0)
     }
-  }, [])
+  }, [onActive, item.active])
 
   return (
     <li
@@ -32,7 +40,7 @@ export const DocLink: React.FC<DocLinkProps> = ({
         'pl-[16px]': depth >= 0,
       })}
     >
-      <a
+      <LinkComponent
         className={clsx('group relative inline-block pl-[24px]', {
           'text-indigo-500': item.active,
           'py-[8px] text-[16px] leading-[24px]': depth < 0,
@@ -46,15 +54,15 @@ export const DocLink: React.FC<DocLinkProps> = ({
               'absolute w-[4px] z-10 top-[10%] h-[80%] rounded-full hidden',
               {
                 'group-hover:block bg-gray-300': !item.active && collapsible,
-              }
+              },
             )}
             style={{
               left: `-${18.5 + depth * 8}px`,
             }}
           />
         ) : null}
-        {item.text}
-      </a>
+        {item.label}
+      </LinkComponent>
     </li>
   )
 }

package/dist/DocMenu.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu';
+import { LinkComponentType } from './_DocLink';
 export type NavItem = NavGroup | NavItemLink;
 export interface DocMenuProps extends React.HTMLAttributes<HTMLUListElement> {
     items: NavItem[];
     collapsible?: boolean;
+    LinkComponent?: LinkComponentType;
 }
 export declare const DocMenu: React.FC<DocMenuProps>;
 export default DocMenu;

package/dist/DocMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocMenu.d.ts","sourceRoot":"./","sources":["DocMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAKzE,MAAM,MAAM,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAA;AAE5C,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC1E,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkB1C,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"DocMenu.d.ts","sourceRoot":"./","sources":["DocMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AACzE,OAAO,EAAW,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAIvD,MAAM,MAAM,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAA;AAE5C,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC1E,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA6B1C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/_DocGroup.d.ts

@@ -1,10 +1,13 @@
 import * as React from 'react';
 import { NavGroup } from '@cypress-design/constants-docmenu';
+import { LinkComponentType } from './_DocLink';
 export interface DocGroupProps {
+    index: number;
     group: NavGroup;
     collapsible: boolean;
     depth?: number;
     setHeight?: (height: number) => void;
+    LinkComponent?: LinkComponentType;
 }
 export declare const DocGroup: React.FC<DocGroupProps>;
 //# sourceMappingURL=_DocGroup.d.ts.map

package/dist/_DocGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_DocGroup.d.ts","sourceRoot":"./","sources":["_DocGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,QAAQ,EAAW,MAAM,mCAAmC,CAAA;AAGrE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,QAAQ,CAAA;IACf,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CACrC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4G5C,CAAA"}
+{"version":3,"file":"_DocGroup.d.ts","sourceRoot":"./","sources":["_DocGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,QAAQ,EAAW,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAW,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAEvD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,QAAQ,CAAA;IACf,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4H5C,CAAA"}

package/dist/_DocLink.d.ts

@@ -1,10 +1,16 @@
 import * as React from 'react';
 import { NavItemLink } from '@cypress-design/constants-docmenu';
+export type LinkComponentType = React.ElementType<{
+    href: string;
+    className?: string;
+    children?: React.ReactNode;
+}>;
 export interface DocLinkProps {
     item: NavItemLink;
     collapsible: boolean;
     depth?: number;
     onActive?: (top: number) => void;
+    LinkComponent?: LinkComponentType;
 }
 export declare const DocLink: React.FC<DocLinkProps>;
 //# sourceMappingURL=_DocLink.d.ts.map

package/dist/_DocLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_DocLink.d.ts","sourceRoot":"./","sources":["_DocLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAE/D,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgD1C,CAAA"}
+{"version":3,"file":"_DocLink.d.ts","sourceRoot":"./","sources":["_DocLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAE/D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAC,CAAA;AAEF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiD1C,CAAA"}