@cypress-design/react-docmenu 0.3.1 → 0.4.1

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 33.9s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 13.3s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @cypress-design/react-docmenu
 
+## 0.4.1
+
+### Patch Changes
+
+- [#353](https://github.com/cypress-io/cypress-design/pull/353) [`b382b9e`](https://github.com/cypress-io/cypress-design/commit/b382b9ecc99e3ab6288eee406831199edb661c19) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: Docgen wrapping active links
+
+- Updated dependencies [[`b382b9e`](https://github.com/cypress-io/cypress-design/commit/b382b9ecc99e3ab6288eee406831199edb661c19)]:
+  - @cypress-design/constants-docmenu@0.1.2
+
+## 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

package/DocMenu.tsx

@@ -1,33 +1,63 @@
 import * as React from 'react'
 import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'
-import { DocLink } from './_DocLink'
-import { DocGroup } from './_DocGroup'
-import clsx from 'clsx'
+import type { LinkComponentType } from './_DocLink'
+import { DocGroupElements } from './_DocGroup'
 
 export type NavItem = NavGroup | NavItemLink
 
 export interface DocMenuProps extends React.HTMLAttributes<HTMLUListElement> {
   items: NavItem[]
+  activePath?: string
   collapsible?: boolean
+  LinkComponent?: LinkComponentType
 }
 
 export const DocMenu: React.FC<DocMenuProps> = ({
   items,
+  activePath = '<unknown>',
   collapsible = true,
+  LinkComponent = 'a',
   ...rest
 }) => {
+  const [activeTop, setActiveTop] = React.useState(0)
+  const [activeHeight, setActiveHeight] = React.useState(36)
+  const [showMarker, setShowMarker] = React.useState(false)
+
+  const container = React.useRef<HTMLDivElement>(null)
+
+  const setActivePosition = React.useCallback(
+    (opts: { top: number; height: number }) => {
+      const containerTop = container.current?.getBoundingClientRect().top || 0
+      setShowMarker(true)
+      setActiveTop(opts.top - containerTop)
+      setActiveHeight(opts.height)
+    },
+    [],
+  )
+
   return (
-    <ul {...rest} className={clsx('list-none p-0', rest.className)}>
-      {items.map((item, index) =>
-        'items' in item ? (
-          <li key={index} className="relative list-none p-0">
-            <DocGroup group={item} collapsible={collapsible} />
-          </li>
-        ) : (
-          <DocLink key={index} item={item} collapsible={collapsible} />
-        )
-      )}
-    </ul>
+    <div ref={container} className="relative">
+      {showMarker && collapsible ? (
+        <div
+          className="absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]"
+          style={{
+            top: `${activeTop + 4}px`,
+            height: `${activeHeight - 8}px`,
+          }}
+        />
+      ) : null}
+      <DocGroupElements
+        {...rest}
+        className={!open ? 'hidden' : undefined}
+        items={items}
+        activePath={activePath}
+        collapsible={collapsible}
+        depth={-1}
+        onActivePosition={setActivePosition}
+        LinkComponent={LinkComponent}
+        hideMarker={() => setShowMarker(false)}
+      />
+    </div>
   )
 }
 

package/DocMenuReact.cy.tsx

@@ -2,13 +2,165 @@
 
 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/>', () => {
-  function mountStory(items: (NavItemLink | NavGroup)[] = []) {
-    mount(<DocMenuStory items={items} />)
+  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(
+    'wraps items correctly',
+    { viewportHeight: 950, viewportWidth: 350 },
+    () => {
+      const Sut = () => {
+        const [activeHref, setActiveHref] = React.useState<string | undefined>()
+
+        return (
+          <div className="w-[200px] mt-[60px] absolute">
+            <DocMenu
+              activePath={activeHref}
+              LinkComponent={({ href, className, children }) => (
+                <div className={className} onClick={() => setActiveHref(href)}>
+                  {children}
+                </div>
+              )}
+              items={[
+                {
+                  href: '/fooTop',
+                  label: 'Foo Top',
+                },
+                {
+                  href: '/test',
+                  label: 'Getting started',
+                },
+                {
+                  href: '/faaz',
+                  label:
+                    'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,',
+                },
+                {
+                  label: 'Baaaaaaz',
+                  items: [
+                    {
+                      label: 'Bar',
+                      items: [
+                        {
+                          href: '/foo',
+                          label: 'Foo',
+                        },
+                        {
+                          href: '/test',
+                          label: 'Getting started',
+                        },
+                      ],
+                    },
+                    {
+                      label: 'Code',
+                      collapsed: true,
+                      items: [
+                        {
+                          href: '/faa',
+                          label: 'sasassa',
+                        },
+                        {
+                          href: '/faa1',
+                          label: 'sasassa2',
+                        },
+                        {
+                          href: '/faa2',
+                          label: 'sasassa3',
+                        },
+                        {
+                          href: '/faa3',
+                          label: 'sasassa4',
+                        },
+                        {
+                          href: '/faa4',
+                          label:
+                            'lorem ipsum dolor sit amet consectetur adipisicing elit',
+                        },
+                        {
+                          href: '/faa5',
+                          label: 'sasassa5',
+                        },
+                        {
+                          href: '/faa6',
+                          label:
+                            'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos',
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ]}
+            />
+          </div>
+        )
+      }
+      mount(<Sut />)
+
+      cy.findByText('Bar').click()
+      cy.findByText('Code').click()
+      cy.findByText(
+        'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos',
+      ).click()
+    },
+  )
+
+  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('Foo + href: /foo', { selector: 'div' }).should('be.visible')
+  })
+
+  function mountStory(items: (NavItemLink | NavGroup)[] = [], activePath = '') {
+    mount(<DocMenu items={items} activePath={activePath} />)
   }
   assertions(mountStory)
 })
+
+// pseudo text
+// lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos

package/ReadMe.md

@@ -18,62 +18,95 @@ yarn add @cypress-design/react-docmenu
 import DocMenu from '@cypress-design/react-docmenu'
 ```
 
+### Default usage
+
+```tsx live
+export default () => (
+  <DocMenu
+    activePath="#group-item-3"
+    items={[
+      {
+        label: 'Get Started',
+        href: '#get-started',
+      },
+      {
+        label: 'Overview',
+        items: [
+          {
+            label: 'Overview Item 1',
+            href: '#overview-item-1',
+          },
+          {
+            label: 'Overview Item 2',
+            href: '#overview-item-2',
+          },
+        ],
+      },
+      {
+        label: 'Getting Started',
+        items: [
+          {
+            label: 'Item 1',
+            href: '#item-1',
+          },
+          {
+            label: 'Group',
+            items: [
+              {
+                label: 'Item 1',
+                href: '#group-item-1',
+              },
+              {
+                label: 'Item 2',
+                href: '#group-item-2',
+              },
+              {
+                label: 'Item 3',
+                href: '#group-item-3',
+              },
+              {
+                label: 'Item 4',
+                href: '#group-item-4',
+              },
+            ],
+          },
+          {
+            label: 'Item 5',
+            href: '#',
+          },
+        ],
+      },
+    ]}
+  />
+)
+```
+
+### 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',
+      },
+    ]}
+  />
+)
 ```