@cypress-design/react-docmenu 0.1.0

package/.turbo/turbo-build.log

@@ -0,0 +1,6 @@
+$ 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 28s
+$ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @cypress-design/react-docmenu
+
+## 0.1.0
+
+### Minor Changes
+
+- [#178](https://github.com/cypress-io/cypress-design/pull/178) [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650) Thanks [@elevatebart](https://github.com/elevatebart)! - deliver new docs and improved components
+
+### Patch Changes
+
+- Updated dependencies [[`18399c7`](https://github.com/cypress-io/cypress-design/commit/18399c72a52288c67af0935384430d4e4cd24251), [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650)]:
+  - @cypress-design/react-icon@0.19.0

package/DocMenu.rootstory.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react'
+import type { NavGroup, NavItemLink } from '../constants'
+import DocMenu from './DocMenu'
+
+export default ({ items }: { items: (NavGroup | NavItemLink)[] }) => {
+  return <DocMenu items={items} />
+}

package/DocMenu.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { NavGroup, NavItemLink } from '../constants'
+import { DocLink } from './_DocLink'
+import { DocGroup } from './_DocGroup'
+import clsx from 'clsx'
+
+export type NavItem = NavGroup | NavItemLink
+
+export interface DocMenuProps extends React.HTMLAttributes<HTMLUListElement> {
+  items: NavItem[]
+  collapsible?: boolean
+}
+
+export const DocMenu: React.FC<DocMenuProps> = ({
+  items,
+  collapsible = true,
+  ...rest
+}) => {
+  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>
+  )
+}
+
+export default DocMenu

package/DocMenuReact.cy.tsx

@@ -0,0 +1,14 @@
+/// <reference types="cypress" />
+
+import * as React from 'react'
+import { mount } from 'cypress/react18'
+import DocMenuStory from './DocMenu.rootstory'
+import assertions from '../assertions'
+import { NavGroup, NavItemLink } from '../constants'
+
+describe('<DocMenu/>', () => {
+  function mountStory(items: (NavItemLink | NavGroup)[] = []) {
+    mount(<DocMenuStory items={items} />)
+  }
+  assertions(mountStory)
+})

package/ReadMe.md

@@ -0,0 +1,77 @@
+# DocMenu
+
+## Summary
+
+Describe your component here.
+
+## Install
+
+```bash
+npm install @cypress-design/react-docmenu
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/react-docmenu
+```
+
+```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,
+        },
+      ],
+    },
+  ]}
+/>
+```

package/_DocGroup.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react'
+import { IconChevronDownSmall } from '@cypress-design/react-icon'
+import clsx from 'clsx'
+import { NavGroup, classes } from '../constants'
+import { DocLink } from './_DocLink'
+
+export interface DocGroupProps {
+  group: NavGroup
+  collapsible: boolean
+  depth?: number
+  setHeight?: (height: number) => void
+}
+
+export const DocGroup: React.FC<DocGroupProps> = ({
+  group,
+  collapsible,
+  depth = 0,
+  setHeight,
+}) => {
+  const [open, setOpen] = React.useState(depth === 0)
+  const [itemsHeights, setItemsHeights] = React.useState<number[]>(
+    Array(group.items.length).fill(1)
+  )
+
+  React.useEffect(() => {
+    setHeight?.(open ? itemsHeights.reduce((a, b) => a + b, 1) : 1)
+  }, [itemsHeights, open])
+
+  const [activeTop, setActiveTop] = React.useState(0)
+
+  React.useEffect(() => {
+    const activeItem = group.items.findIndex(
+      (item) => 'href' in item && item.active
+    )
+    if (activeItem >= 0) {
+      setActiveTop(
+        itemsHeights.slice(0, activeItem).reduce((a, b) => a + b, 1) * 44
+      )
+    }
+  }, [itemsHeights])
+
+  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 Head = collapsible ? 'button' : group.href ? 'a' : 'div'
+
+  return (
+    <>
+      <Head
+        onClick={() => toggleMenu(!open)}
+        href={group.href}
+        className={clsx(classes.button, {
+          [classes.topButton]: depth === 0,
+          [classes.leafButton]: depth,
+        })}
+      >
+        {collapsible ? (
+          <IconChevronDownSmall
+            stroke-color="gray-400"
+            size={depth ? '8' : '16'}
+            className={clsx('absolute transform transition-transform left-0', {
+              'rotate-0': open,
+              '-rotate-90': !open,
+              'ml-[16px]': depth,
+            })}
+          />
+        ) : null}
+        {group.text}
+      </Head>
+      {collapsible &&
+      depth >= 0 &&
+      open &&
+      group.items.some((item) => 'href' in item && item.active) ? (
+        <div
+          className="absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[4px]"
+          style={{
+            top: `${activeTop}px`,
+            left: `${depth === 0 ? 0.5 : -(depth * 8) - 0.5}px`,
+          }}
+        />
+      ) : null}
+      <ul
+        className={clsx('ml-[8px] list-none p-0', {
+          'border-l border-gray-100': depth === 0 && collapsible,
+          hidden: !open,
+        })}
+      >
+        {group.items.map((item, index) =>
+          'items' in item ? (
+            <li key={index} className="relative list-none p-0">
+              <DocGroup
+                group={item}
+                depth={depth + 1}
+                setHeight={(height) => onSetHeight(index, height)}
+                collapsible={collapsible}
+              />
+            </li>
+          ) : (
+            <DocLink
+              key={index}
+              item={item}
+              collapsible={collapsible}
+              depth={depth}
+              onActive={(top) => setActiveTop(top)}
+            />
+          )
+        )}
+      </ul>
+    </>
+  )
+}

package/_DocLink.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import clsx from 'clsx'
+import { NavItemLink } from '../constants'
+
+export interface DocLinkProps {
+  item: NavItemLink
+  collapsible: boolean
+  depth?: number
+  onActive?: (top: number) => void
+}
+
+export const DocLink: React.FC<DocLinkProps> = ({
+  item,
+  collapsible,
+  depth = -1,
+  onActive,
+}) => {
+  const activeLIRef = React.useRef<HTMLLIElement>(null)
+
+  // on mount, if the item is active,
+  // send the top position to the parent
+  React.useEffect(() => {
+    if (item.active) {
+      onActive?.(activeLIRef?.current?.offsetTop || 0)
+    }
+  }, [])
+
+  return (
+    <li
+      ref={activeLIRef}
+      className={clsx('list-none p-0', {
+        'pl-[16px]': depth >= 0,
+      })}
+    >
+      <a
+        className={clsx('group relative inline-block pl-[24px]', {
+          'text-indigo-500 dark:text-indigo-200': item.active,
+          'py-[8px] text-[16px] leading-[24px]': depth < 0,
+          'py-[12px] leading-[20px] text-[14px]': depth >= 0,
+        })}
+        href={item.href}
+      >
+        {depth >= 0 ? (
+          <div
+            className={clsx(
+              '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>
+    </li>
+  )
+}

package/dist/constants.d.ts

@@ -0,0 +1,17 @@
+export interface NavItemBase {
+    text: string;
+    href?: string;
+    active?: boolean;
+}
+export interface NavItemLink extends NavItemBase {
+    href: string;
+}
+export interface NavGroup extends NavItemBase {
+    items: (NavItemLink | NavGroup)[];
+}
+export declare const classes: {
+    readonly button: "flex leading-[24px] py-[10px] items-center relative w-full";
+    readonly topButton: "leading-[24px] text-[16px] pl-[24px] font-medium";
+    readonly leafButton: "leading-[20px] text-[14px] pl-[40px]";
+};
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../constants.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,QAAS,SAAQ,WAAW;IAC3C,KAAK,EAAE,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE,CAAA;CAClC;AAED,eAAO,MAAM,OAAO;;;;CAIV,CAAA"}

package/dist/index.es.mjs

@@ -0,0 +1,227 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import * as iconsRegistry from '@cypress-design/icon-registry';
+import { ICON_COLOR_PROP_NAMES } from '@cypress-design/icon-registry';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign$1 = function() {
+    __assign$1 = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
+
+function __rest$1(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+var DocLink = function (_a) {
+    var item = _a.item, collapsible = _a.collapsible, _b = _a.depth, depth = _b === void 0 ? -1 : _b, onActive = _a.onActive;
+    var activeLIRef = React.useRef(null);
+    // on mount, if the item is active,
+    // send the top position to the parent
+    React.useEffect(function () {
+        var _a;
+        if (item.active) {
+            onActive === null || onActive === void 0 ? void 0 : onActive(((_a = activeLIRef === null || activeLIRef === void 0 ? void 0 : activeLIRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0);
+        }
+    }, []);
+    return (React.createElement("li", { ref: activeLIRef, className: clsx('list-none p-0', {
+            'pl-[16px]': depth >= 0,
+        }) },
+        React.createElement("a", { className: clsx('group relative inline-block pl-[24px]', {
+                'text-indigo-500 dark:text-indigo-200': item.active,
+                'py-[8px] text-[16px] leading-[24px]': depth < 0,
+                'py-[12px] leading-[20px] text-[14px]': depth >= 0,
+            }), href: item.href },
+            depth >= 0 ? (React.createElement("div", { className: clsx('absolute w-[4px] z-10 top-[10%] h-[80%] rounded-full hidden', {
+                    'group-hover:block bg-gray-300': !item.active && collapsible,
+                }), style: {
+                    left: "-".concat(18.5 + depth * 8, "px"),
+                } })) : null,
+            item.text)));
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var compileReactIconProperties = function (_a) {
+    var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
+    var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
+        if (!ICON_COLOR_PROP_NAMES.includes(attrName) && attrName !== 'name') {
+            newAttributes[attrName] =
+                attributes[attrName];
+        }
+        return newAttributes;
+    }, {});
+    var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
+            __html: body,
+        } }, filteredAttributes);
+    if (attributes.className) {
+        compiledClasses.push(attributes.className);
+    }
+    if (compiledClasses.length) {
+        componentProps.className = compiledClasses.join(' ');
+    }
+    return componentProps;
+};
+var IconChevronDownSmall = function (props) {
+    var _a = iconsRegistry.getComponentAttributes(__assign(__assign({}, props), { availableSizes: ["8", "16"] })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
+    var iconBodies = {
+        "8": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 2.5 3 3 3-3\" class=\"icon-dark\"/>",
+        "16": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m4 6 4 4 4-4\" class=\"icon-dark\"/>"
+    };
+    var body = iconBodies[size];
+    if (!body) {
+        throw Error("Icon \"chevron-down-small\" is not available in size ".concat(size));
+    }
+    return React.createElement('svg', compileReactIconProperties(__assign(__assign({}, props), { size: size, body: body, compiledClasses: compiledClasses })));
+};
+
+
+/* <windicss-keep class=""> */
+
+var classes = {
+    button: 'flex leading-[24px] py-[10px] items-center relative w-full',
+    topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',
+    leafButton: 'leading-[20px] text-[14px] pl-[40px]',
+};
+
+var DocGroup = function (_a) {
+    var _b;
+    var group = _a.group, collapsible = _a.collapsible, _c = _a.depth, depth = _c === void 0 ? 0 : _c, setHeight = _a.setHeight;
+    var _d = React.useState(depth === 0), open = _d[0], setOpen = _d[1];
+    var _e = React.useState(Array(group.items.length).fill(1)), itemsHeights = _e[0], setItemsHeights = _e[1];
+    React.useEffect(function () {
+        setHeight === null || setHeight === void 0 ? void 0 : setHeight(open ? itemsHeights.reduce(function (a, b) { return a + b; }, 1) : 1);
+    }, [itemsHeights, open]);
+    var _f = React.useState(0), activeTop = _f[0], setActiveTop = _f[1];
+    React.useEffect(function () {
+        var activeItem = group.items.findIndex(function (item) { return 'href' in item && item.active; });
+        if (activeItem >= 0) {
+            setActiveTop(itemsHeights.slice(0, activeItem).reduce(function (a, b) { return a + b; }, 1) * 44);
+        }
+    }, [itemsHeights]);
+    function toggleMenu(open) {
+        if (!collapsible)
+            return;
+        setOpen(open);
+    }
+    function onSetHeight(index, height) {
+        setItemsHeights(function (prev) {
+            var newHeights = __spreadArray([], prev, true);
+            newHeights[index] = height;
+            return newHeights;
+        });
+    }
+    var Head = collapsible ? 'button' : group.href ? 'a' : 'div';
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Head, { onClick: function () { return toggleMenu(!open); }, href: group.href, className: clsx(classes.button, (_b = {},
+                _b[classes.topButton] = depth === 0,
+                _b[classes.leafButton] = depth,
+                _b)) },
+            collapsible ? (React.createElement(IconChevronDownSmall, { "stroke-color": "gray-400", size: depth ? '8' : '16', className: clsx('absolute transform transition-transform left-0', {
+                    'rotate-0': open,
+                    '-rotate-90': !open,
+                    'ml-[16px]': depth,
+                }) })) : null,
+            group.text),
+        collapsible &&
+            depth >= 0 &&
+            open &&
+            group.items.some(function (item) { return 'href' in item && item.active; }) ? (React.createElement("div", { className: "absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[4px]", style: {
+                top: "".concat(activeTop, "px"),
+                left: "".concat(depth === 0 ? 0.5 : -(depth * 8) - 0.5, "px"),
+            } })) : null,
+        React.createElement("ul", { className: clsx('ml-[8px] list-none p-0', {
+                'border-l border-gray-100': depth === 0 && collapsible,
+                hidden: !open,
+            }) }, group.items.map(function (item, index) {
+            return 'items' in item ? (React.createElement("li", { key: index, className: "relative list-none p-0" },
+                React.createElement(DocGroup, { group: item, depth: depth + 1, setHeight: function (height) { return onSetHeight(index, height); }, collapsible: collapsible }))) : (React.createElement(DocLink, { key: index, item: item, collapsible: collapsible, depth: depth, onActive: function (top) { return setActiveTop(top); } }));
+        }))));
+};
+
+var DocMenu = function (_a) {
+    var items = _a.items, _b = _a.collapsible, collapsible = _b === void 0 ? true : _b, rest = __rest$1(_a, ["items", "collapsible"]);
+    return (React.createElement("ul", __assign$1({}, rest, { className: clsx('list-none p-0', rest.className) }), items.map(function (item, index) {
+        return 'items' in item ? (React.createElement("li", { key: index, className: "relative list-none p-0" },
+            React.createElement(DocGroup, { group: item, collapsible: collapsible }))) : (React.createElement(DocLink, { key: index, item: item, collapsible: collapsible }));
+    })));
+};
+
+export { DocMenu as default };
+//# sourceMappingURL=index.es.mjs.map
+
+/* <windicss-keep class="list-none p-0 relative pl-[16px] inline-block pl-[24px] text-indigo-500 dark:text-indigo-200 py-[8px] text-[16px] leading-[24px] py-[12px] leading-[20px] text-[14px] absolute w-[4px] z-10 top-[10%] h-[80%] rounded-full hidden group-hover:block bg-gray-300 transform transition-transform left-0 rotate-0 -rotate-90 ml-[16px] h-[36px] bg-indigo-500 transition-all duration-300 ml-[6px] mt-[4px] ml-[8px] border-l border-gray-100 flex py-[10px] items-center w-full font-medium pl-[40px]"> */