@xyd-js/ui 0.1.0-xyd.0

package/README.md

@@ -0,0 +1,3 @@
+# @xyd-js/ui
+
+Next version of internal `xyd` ui components.

package/index.ts

@@ -0,0 +1,3 @@
+export * from "./src/components"
+
+export * from "./src/types"

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@xyd-js/ui",
+  "version": "0.1.0-xyd.0",
+  "description": "",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    "./index.css": "./dist/index.css",
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "scroll-into-view-if-needed": "^3.1.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "postcss-import": "^16.1.0"
+  },
+  "scripts": {
+    "clean": "rimraf build",
+    "prebuild": "pnpm clean",
+    "build": "rollup -c rollup.config.js"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,79 @@
+import {fileURLToPath} from 'url';
+import {dirname} from 'path';
+
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import dts from 'rollup-plugin-dts';
+import {terser} from 'rollup-plugin-terser';
+import babel from '@rollup/plugin-babel';
+import postcss from 'rollup-plugin-postcss';
+import wyw from '@wyw-in-js/rollup';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+import {createRequire} from 'module';
+
+const require = createRequire(import.meta.url);
+const {dependencies} = require('./package.json', {assert: {type: 'json'}});
+
+const external = Object.keys(dependencies);
+
+export default [
+    {
+        input: {
+            index: 'index.ts'
+        },
+        output: [
+            {
+                dir: 'dist',
+                format: 'esm',
+                sourcemap: false,
+                entryFileNames: '[name].js'
+            }
+        ],
+        plugins: [
+            wyw({
+                include: ['**/*.{ts,tsx}'],
+                babelOptions: {
+                    presets: [
+                        '@babel/preset-typescript',
+                        '@babel/preset-react'
+                    ],
+                },
+            }),
+            postcss({
+                extract: true,
+                plugins: [
+                    require('postcss-import'),
+                    require('autoprefixer')
+                ]
+            }),
+            resolve(),
+            commonjs(),
+            typescript({
+                tsconfig: './tsconfig.json',
+            }),
+            babel({
+                babelHelpers: 'bundled',
+                extensions: ['.js', '.jsx', '.ts', '.tsx'],
+                presets: [
+                    '@babel/preset-env',
+                    '@babel/preset-react'
+                ],
+            }),
+            terser(),
+        ],
+        external
+    },
+    {
+        input: 'index.ts',
+        output: {
+            file: 'dist/index.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    }
+];

package/src/components/Anchor/Anchor.styles.ts

@@ -0,0 +1,7 @@
+import {css} from "@linaria/core";
+
+export const $anchor = {
+    host: css`
+
+    `,
+};

package/src/components/Anchor/Anchor.tsx

@@ -0,0 +1,58 @@
+import React, {forwardRef} from 'react'
+import type {ComponentProps, ReactElement} from 'react'
+// import {Link} from "react-router";
+
+import {$anchor} from "./Anchor.styles";
+
+export type UIAnchorProps = Omit<ComponentProps<'a'>, 'ref'> & {
+    newWindow?: boolean
+}
+
+function Link(props: any) {
+    return <div>Link</div>
+}
+
+export const UIAnchor = forwardRef<HTMLAnchorElement, UIAnchorProps>(function (
+    {href = '', children, newWindow},
+    // ref is used in <NavbarMenu />
+    forwardedRef
+): ReactElement {
+    if (newWindow) {
+        return (
+            <Link
+                ref={forwardedRef}
+                to={href}
+                target="_blank"
+                rel="noreferrer"
+                className={$anchor.host}
+            >
+                {children}
+                <span> (opens in a new tab)</span>
+            </Link>
+        )
+    }
+
+    if (!href) {
+        return (
+            <Link
+                ref={forwardedRef}
+                to={href}
+                className={$anchor.host}
+            >
+                {children}
+            </Link>
+        )
+    }
+
+    return (
+        <Link
+            ref={forwardedRef}
+            to={href}
+            className={$anchor.host}
+        >
+            {children}
+        </Link>
+    )
+})
+
+UIAnchor.displayName = 'UIAnchor'

package/src/components/Anchor/index.ts

@@ -0,0 +1,7 @@
+export {
+    UIAnchor
+} from "./Anchor"
+
+export type {
+    UIAnchorProps,
+} from "./Anchor";

package/src/components/Nav/Nav.styles.tsx

@@ -0,0 +1,87 @@
+import {css} from "@linaria/core";
+
+export const $nav = {
+    host: css`
+        position: sticky;
+        top: 0;
+        z-index: 20;
+        width: 100%;
+        background: transparent;
+        display: flex;
+    `,
+    shadow: css`
+        pointer-events: none;
+        position: absolute;
+        z-index: -1;
+        height: 100%;
+        width: 100%;
+        background-color: white;
+    `,
+    nav: css`
+        display: flex;
+        width: 100%;
+        height: var(--xyd-navbar-height);
+        align-items: center;
+        justify-content: flex-end;
+        gap: 8px;
+        padding-left: calc(max(env(safe-area-inset-left), 16px));
+        padding-right: calc(max(env(safe-area-inset-right), 16px));
+    `,
+    nav$$middle: css`
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        align-items: center;
+    `
+};
+
+export const $list = {
+    host: css`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+    `,
+}
+
+export const $item = {
+    host: css`
+        font-size: 14px; /* 0.875rem */
+        position: relative;
+        white-space: nowrap;
+        color: #4b5563; /* Gray-600 */
+        padding: 6px 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        &:hover {
+            color: #1f2937; /* Gray-800 */
+        }
+
+        &[data-state="active"] {
+            font-weight: bold;
+            background: #f9f9f9;
+            border-radius: 8px;
+        }
+    `,
+    title1: css`
+        position: absolute;
+        inset: 0;
+        text-align: center;
+        align-items: center;
+        display: flex;
+        justify-content: center;
+    `,
+    title2: css`
+        visibility: hidden;
+        font-weight: 500;
+    `,
+};
+
+export const $logo = {
+    host: css`
+        display: flex;
+        align-items: center;
+        margin-right: auto;
+    `
+}

package/src/components/Nav/Nav.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import * as RadixTabs from "@radix-ui/react-tabs";
+
+import {$nav, $list, $item, $logo} from "./Nav.styles";
+
+export interface NavProps {
+    children: React.ReactNode
+    value: string
+    onChange: (value: string) => void
+    logo?: React.ReactNode;
+    kind?: "middle"
+}
+
+export function Nav({children, value, onChange, logo, kind}: NavProps) {
+    return <RadixTabs.Root asChild value={value} onValueChange={onChange}>
+        <div className={`${$nav.host}`}>
+            <div className={$nav.shadow}/>
+            <nav className={`
+                ${$nav.nav}
+                ${kind === "middle" && $nav.nav$$middle}
+            `}>
+                <div className={`
+                    ${$logo.host}
+                    xyd_ui-comp-nav-logo
+                `}>
+                    {logo}
+                </div>
+                <RadixTabs.List asChild>
+                    <div className={$list.host}>
+                        {children}
+                    </div>
+                </RadixTabs.List>
+                {kind === "middle" && <div/>}
+            </nav>
+        </div>
+    </RadixTabs.Root>
+}
+
+export interface NavItemProps {
+    children: React.ReactNode;
+    href: string;
+    value: string;
+}
+
+Nav.Item = function NavItem({children, value, href}) {
+    return <RadixTabs.Trigger asChild value={value}>
+        <a
+            href={href}
+            className={`${$item.host}`}
+        >
+            <span className={$item.title1}>{children}</span>
+            <span className={$item.title2}>{children}</span>
+        </a>
+    </RadixTabs.Trigger>
+};
+

package/src/components/Nav/index.ts

@@ -0,0 +1,8 @@
+export {
+    Nav
+} from "./Nav"
+
+export type {
+    NavProps,
+    NavItemProps
+} from "./Nav";

package/src/components/Sidebar/Collapse.styles.tsx

@@ -0,0 +1,24 @@
+import { css } from "@linaria/core";
+
+export const $collapse = {
+    container: css`
+        transform: translateZ(0);
+        overflow: hidden;
+        transition: all 300ms ease-in-out;
+
+        //@media (prefers-reduced-motion: reduce) {
+        //    transition: none;
+        //}
+    `,
+    base: css`
+        opacity: 0;
+        transition: opacity 500ms ease-in-out;
+
+        //@media (prefers-reduced-motion: reduce) {
+        //    transition: none;
+        //}
+    `,
+    open: css`
+        opacity: 1;
+    `,
+};

package/src/components/Sidebar/Collapse.tsx

@@ -0,0 +1,84 @@
+import React, {useEffect, useRef} from "react";
+import type {ReactElement, ReactNode} from "react";
+import {$collapse} from "./Collapse.styles";
+
+export interface UICollapseProps {
+    children: ReactNode;
+    isOpen: boolean;
+    horizontal?: boolean;
+}
+
+export function UICollapse({
+                               children,
+                               isOpen,
+                               horizontal = false,
+                           }: UICollapseProps): ReactElement {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const innerRef = useRef<HTMLDivElement>(null);
+    const animationRef = useRef<number | null>(null);
+    const initialOpen = useRef(isOpen);
+    const initialRender = useRef(true);
+
+    useEffect(() => {
+        const container = containerRef.current;
+        const inner = innerRef.current;
+
+        if (animationRef.current) {
+            clearTimeout(animationRef.current);
+        }
+        if (initialRender.current || !container || !inner) return;
+
+        if (isOpen) {
+            // Opening animation
+            if (horizontal) {
+                inner.style.width = `${inner.scrollWidth}px`;
+                container.style.width = `${inner.scrollWidth}px`;
+            } else {
+                inner.style.height = `${inner.scrollHeight}px`;
+                container.style.height = `${inner.scrollHeight}px`;
+            }
+
+            animationRef.current = window.setTimeout(() => {
+                container.style.removeProperty(horizontal ? "width" : "height");
+            }, 300);
+        } else {
+            // Closing animation
+            if (horizontal) {
+                const width = container.scrollWidth; // Cache current width
+                container.style.width = `${width}px`; // Set to fixed width first
+
+                // Force reflow for Firefox
+                container.offsetWidth;
+
+                container.style.width = "0px";
+            } else {
+                const height = container.scrollHeight; // Cache current height
+                container.style.height = `${height}px`; // Set to fixed height first
+
+                // Force reflow for Firefox
+                container.offsetHeight;
+
+                container.style.height = "0px";
+            }
+        }
+    }, [horizontal, isOpen]);
+
+    useEffect(() => {
+        initialRender.current = false;
+    }, []);
+
+    return (
+        <div
+            ref={containerRef}
+            className={`${$collapse.container}`}
+            style={initialOpen.current || horizontal ? undefined : {height: 0}}
+        >
+            <div
+                ref={innerRef}
+                className={`${$collapse.base} ${isOpen ? $collapse.open : ""}`}
+            >
+                {children}
+            </div>
+        </div>
+    );
+}

package/src/components/Sidebar/Sidebar.styles.tsx

@@ -0,0 +1,117 @@
+import {css} from "@linaria/core";
+
+export const $sidebar = {
+    host: css`
+        background: #f9f9f9;
+        height: 100%;
+        border-radius: 0.5rem;
+        display: flex;
+        flex-direction: column;
+    `,
+    ul: css`
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: 100%;
+        padding: 1rem;
+
+        // TODO: get height of top
+        //height: calc(100vh - 54px);
+    `
+}
+
+export const $footer = {
+    host: css`
+        padding: 1rem;
+        //box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
+        box-shadow: 0 -2px 10px rgba(237, 237, 237, .1);
+        //border: 1px solid rgb(227, 227, 235);
+        //border-top: 1px solid rgb(227, 227, 235);
+        border-top: 1px solid #ededed;
+    `,
+    item$host: css`
+        display: flex;
+        width: 100%;
+        padding: 2px;
+        color: #6e6e80;
+    `,
+    item: css`
+        display: flex;
+        align-items: center;
+        width: 100%;
+        gap: 7px;
+        font-size: 14px;
+        padding: 4px 8px;
+
+        &:hover {
+            background: #ececf1;
+            color: #111827;
+            border-radius: 4px;
+
+            svg {
+                fill: #111827;
+            }
+        }
+
+        svg {
+            fill: #6e6e80;
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+        }
+    `
+}
+
+export const $item = {
+    host: css`
+        color: #6e6e80;
+        font-size: 14px;
+    `,
+    link: css`
+        display: flex;
+        width: 100%;
+        padding: 2px;
+        font-weight: 500;
+    `,
+    link$$active: css`
+        background: #fff;
+        color: #7051d4;
+        border-radius: 4px;
+    `,
+    link$$activeSecondary: css`
+        background: unset;
+        color: #111827;
+        font-weight: 500;
+    `,
+    link$item: css`
+        display: flex;
+        width: 100%;
+        padding: 4px 8px;
+
+        &:hover {
+            background: #ececf1;
+            color: #111827;
+            border-radius: 4px;
+        }
+    `
+}
+
+export const $tree = {
+    host: css`
+        margin-left: 8px;
+    `,
+}
+
+export const $itemHeader = {
+    host: css`
+        // TODO: calc based on items?
+        padding-left: 10px;
+        margin-bottom: 6px;
+        margin-top: 16px;
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 600;
+        letter-spacing: 1px;
+        color: #111827;
+    `
+}
+

package/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,121 @@
+import React from "react"
+
+import {$sidebar, $footer, $item, $tree, $itemHeader} from "./Sidebar.styles";
+import {UICollapse} from "./Collapse";
+
+export interface UISidebarProps {
+    children: React.ReactNode;
+    footerItems?: React.ReactNode;
+}
+
+export function UISidebar({children, footerItems}: UISidebarProps) {
+    // TODO: in the future theming api?
+    return <div className={`
+        ${$sidebar.host}
+        xyd_ui-comp-sidebar
+    `}>
+        <ul className={$sidebar.ul}>
+            {children}
+        </ul>
+        {footerItems && <SidebarFooter>
+            {footerItems}
+        </SidebarFooter>}
+    </div>
+}
+
+export interface UISidebarItemProps {
+    children: React.ReactNode;
+    button?: boolean;
+    href?: string;
+    active?: boolean;
+    activeTheme?: "secondary";
+    onClick?: (v: any) => void
+}
+
+// TODO: move to ui
+function Link({children, ...props}) {
+    return <a {...props}>
+        {children}
+    </a>
+}
+
+UISidebar.Item = function SidebarItem({
+                                          children,
+                                          button,
+                                          href,
+                                          active,
+                                          activeTheme,
+                                          onClick
+                                      }: UISidebarItemProps) {
+    const [firstChild, ...restChilds] = React.Children.toArray(children)
+
+    const ButtonOrAnchor = button ? 'button' : Link
+
+    return <li
+        className={$item.host}
+    >
+        <ButtonOrAnchor
+            href={button ? undefined : href}
+            onClick={button ? onClick : undefined}
+            className={`
+                ${$item.link}
+            `}
+        >
+            <div className={`
+                ${$item.link$item}
+                ${active && $item.link$$active}
+                ${active && activeTheme === "secondary" && $item.link$$activeSecondary}
+            `}>
+                {firstChild}
+            </div>
+        </ButtonOrAnchor>
+        {restChilds}
+    </li>
+}
+
+export interface UISidebarItemHeaderProps {
+    children: React.ReactNode;
+}
+
+UISidebar.ItemHeader = function SidebarItemHeader({children}: UISidebarItemHeaderProps) {
+    return <li className={$itemHeader.host}>
+        {children}
+    </li>
+}
+
+export interface UISidebarSubTreeProps {
+    children: React.ReactNode;
+    isOpen?: boolean;
+}
+
+UISidebar.SubTree = function SidebarSubItem({children, isOpen}: UISidebarSubTreeProps) {
+    return <ul className={$tree.host}>
+        <UICollapse isOpen={isOpen || false}>
+            {children}
+        </UICollapse>
+    </ul>
+}
+
+function SidebarFooter({children}: { children: React.ReactNode }) {
+    return <div className={$footer.host}>
+        <ul>
+            {children}
+        </ul>
+    </div>
+}
+
+export interface SidebarFooterItemProps {
+    children: React.ReactNode;
+    href?: string;
+    icon?: React.ReactNode;
+}
+
+UISidebar.FooterItem = function SidebarFooter({children, href, icon}: SidebarFooterItemProps) {
+    return <li className={$footer.item$host}>
+        <a className={$footer.item} href={href}>
+            {icon}
+            {children}
+        </a>
+    </li>
+}
+

package/src/components/Sidebar/index.ts

@@ -0,0 +1,11 @@
+export {
+    UISidebar,
+} from "./Sidebar";
+
+export type {
+    UISidebarProps,
+    UISidebarItemProps,
+    UISidebarItemHeaderProps,
+
+    SidebarFooterItemProps
+} from "./Sidebar";

package/src/components/SubNav/SubNav.styles.tsx

@@ -0,0 +1,81 @@
+import {css} from "@linaria/core";
+
+export const $subNav = {
+    host: css`
+        align-items: center;
+        background-color: #f6f6f7;
+        border-radius: 0.50rem;
+        display: flex;
+        flex-direction: row;
+
+        width: 100%;
+        height: 44px;
+        margin-top: 3px;
+        padding: 0 0.25rem;
+    `,
+    prefix: css`
+        color: #44474a;
+        //font: var(--font-sans-font-nav-category-base);
+        font-size: 12px;
+        font-weight: 600;
+        padding-left: 0.50rem;
+        padding-right: 1.50rem;
+        position: relative;
+        text-transform: uppercase;
+
+        &:after {
+            background: #d2d5d8;
+            border-radius: 1px;
+            content: " ";
+            height: 0.75rem;
+            position: absolute;
+            right: 0.50rem;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 2px;
+        }
+    `,
+    ul: css`
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+    `,
+    li: css`
+        display: flex;
+        height: 100%;
+
+        align-items: center;
+        position: relative;
+
+        &[data-state="active"] {
+            font-weight: 500;
+
+            a {
+                color: #202223;
+            }
+
+            a:after {
+                background-color: #7051d4;
+                border-radius: 1px;
+                bottom: 0;
+                content: " ";
+                height: 2px;
+                left: 0;
+                position: absolute;
+                width: 100%;
+            }
+        }
+    `,
+    link: css`
+        color: #4b5563;
+        //font: var(--font-sans-font-nav-item-active-base);
+        line-height: 2.75rem;
+        display: block;
+        height: 100%;
+        padding: 0 0.50rem;
+
+        &:hover {
+            color: #202223;
+        }
+    `
+}

package/src/components/SubNav/SubNav.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import * as RadixTabs from "@radix-ui/react-tabs";
+
+import {$subNav} from "./SubNav.styles";
+
+export interface SubNavProps {
+    children: React.ReactNode
+    title: string
+    value: string
+    onChange: (value: string) => void
+}
+
+export function SubNav({children, title, value, onChange}: SubNavProps) {
+    return <RadixTabs.Root asChild value={value} onValueChange={onChange}>
+        <nav className={$subNav.host}>
+            <div className={$subNav.prefix}>
+                {title}
+            </div>
+            <RadixTabs.List asChild>
+                <ul className={$subNav.ul}>
+                    {children}
+                </ul>
+            </RadixTabs.List>
+        </nav>
+    </RadixTabs.Root>
+}
+
+export interface SubNavItemProps {
+    children: React.ReactNode
+    value: string
+    href?: string
+}
+
+SubNav.Item = function SubNavItem({children, value, href}: SubNavItemProps) {
+    return <RadixTabs.Trigger asChild value={value}>
+        <li className={$subNav.li}>
+            <a href={href} className={`${$subNav.link}`}>
+                {children}
+            </a>
+        </li>
+    </RadixTabs.Trigger>
+}

package/src/components/SubNav/index.ts

@@ -0,0 +1,7 @@
+export {
+    SubNav
+} from "./SubNav"
+
+export type {
+    SubNavProps
+} from "./SubNav";

package/src/components/Toc/Toc.styles.tsx

@@ -0,0 +1,56 @@
+import {css} from '@linaria/core';
+
+export const $toc = {
+    host: css`
+        position: relative;
+        padding-left: 16px;
+    `,
+    ul: css`
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    `,
+    li: css`
+        position: relative;
+        line-height: 1.5;
+
+        margin: 0 0 10px;
+        padding: 0;
+    `,
+    link: css`
+        display: inline-block;
+        font-size: 14px;
+        color: #6e6e80;
+        line-height: 1.4;
+        text-wrap: pretty;
+        transition: color .15s ease;
+    `,
+    link$$active: css`
+        font-weight: 500;
+        color: #353740;
+    `
+}
+
+const cubizEnter = 'cubic-bezier(.19, 1, .22, 1)';
+
+export const $scroller = {
+    host: css`
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 2px;
+
+        background-color: #ececf1;
+    `,
+    scroll: css`
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 2px;
+        height: var(--active-track-height); // TODO: this must be dynamic
+        transform: translateY(var(--active-track-top)); // TODO: this must be dynamic
+        background-color: #353740;
+        transition: height .4s ${cubizEnter}, transform .4s ${cubizEnter};
+    `
+}

package/src/components/Toc/Toc.tsx

@@ -0,0 +1,153 @@
+import React, {useState, useEffect, useContext} from "react"
+import {Link} from "react-router";
+
+import {$toc, $scroller} from "./Toc.styles";
+
+export interface TocProps {
+    children: React.ReactNode;
+    defaultValue?: string
+}
+
+const Context = React.createContext({
+    value: "",
+    onChange: (v: string) => {
+    }
+})
+
+// TODO: based on scroller?
+export function Toc({children, defaultValue}: TocProps) {
+    const [activeTrackHeight, setActiveTrackHeight] = useState(0)
+    const [activeTrackTop, setActiveTrackTop] = useState(0)
+
+    const [value, setValue] = useState(defaultValue || "")
+
+    // TODO: more reactish implt?
+    function handleScroll() {
+        const activeElement = document.querySelector(`.${$toc.link$$active}`);
+        if (!activeElement) {
+            return;
+        }
+
+        const {offsetHeight} = activeElement as HTMLElement;
+        setActiveTrackHeight(offsetHeight);
+
+        if (!activeElement?.parentElement) {
+            return
+        }
+
+        const {offsetTop} = activeElement.parentElement as HTMLElement;
+        setActiveTrackTop(offsetTop);
+    }
+
+    function onChange(v: string) {
+        setValue(v)
+    }
+
+
+    // TODO: more reactish
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            (entries) => {
+                let set = false
+                entries.forEach(entry => {
+                    if (set) {
+                        return
+                    }
+                    if (!entry.isIntersecting) {
+                        return
+                    }
+
+                    if (entry.target instanceof HTMLHeadingElement) {
+                        const rect = entry.target.getBoundingClientRect();
+                        const isVisible = rect.top >= 0 && rect.bottom <= window.innerHeight;
+
+                        if (isVisible) {
+                            set = true
+                            setValue(entry.target.innerText);
+                        }
+                    }
+                });
+            },
+            {threshold: 0.3}
+        );
+
+        document.querySelectorAll("h2").forEach(ref => {
+            if (ref) observer.observe(ref);
+        });
+
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+
+    useEffect(() => {
+        handleScroll(); // Initial call to set the values
+    }, [value]);
+
+    return <Context.Provider value={{
+        value: value,
+        onChange
+    }}>
+        <div className={$toc.host}>
+            <div className={$scroller.host}>
+                <div
+                    style={{
+                        // @ts-ignore
+                        "--active-track-height": `${activeTrackHeight}px`,
+                        "--active-track-top": `${activeTrackTop}px`,
+                    }}
+                    className={$scroller.scroll}
+                />
+            </div>
+            <ul className={$toc.ul}>
+                {children}
+            </ul>
+        </div>
+    </Context.Provider>
+}
+
+export interface TocItemProps {
+    children: React.ReactNode;
+    value: string;
+}
+
+Toc.Item = function TocItem({
+                                children,
+                                value = "#",
+                            }: TocItemProps) {
+    const {
+        value: rootValue,
+        onChange
+    } = useContext(Context);
+
+    const href = "#" + value
+    const active = rootValue === value;
+
+    return <li className={$toc.li}>
+        <a
+            className={`${$toc.link} ${active && $toc.link$$active}`}
+            href={href}
+            onClick={(e) => {
+                // TODO: use react-router but for some reason does not work
+                e.preventDefault()
+                onChange(value)
+
+                let found = false
+
+                // TODO: below is only a temporary solution
+                document.querySelectorAll("h2").forEach(e => {
+                    if (found) {
+                        return
+                    }
+
+                    if (e.innerText === value) {
+                        found = true
+                        e.scrollIntoView()
+                    }
+                })
+            }}
+        >
+            {children}
+        </a>
+    </li>
+}

package/src/components/Toc/index.ts

@@ -0,0 +1 @@
+export {Toc} from "./Toc";

package/src/components/index.ts

@@ -0,0 +1,13 @@
+export * from './Nav';
+
+export * from './Sidebar';
+
+export * from './SubNav';
+
+export * from './Toc';
+
+
+
+
+
+

package/src/types/index.ts

@@ -0,0 +1,23 @@
+export interface ITOC {
+    depth: number
+    value: string
+    children: ITOC[]
+}
+
+export interface IBreadcrumb {
+    title: string,
+    href: string
+}
+
+export interface INavLinks {
+    prev?: {
+        title: string,
+        href: string
+    }
+
+    next?: {
+        title: string,
+        href: string
+    }
+}
+

package/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "target": "ES6",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}