@xyd-js/ui 0.1.0-xyd.4 → 0.1.0-xyd.6

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

@@ -1,81 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

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

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

@@ -1,56 +0,0 @@
-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

@@ -1,152 +0,0 @@
-import React, {useState, useEffect, useContext} from "react"
-
-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

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

package/src/components/index.ts

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

package/src/types/index.ts

@@ -1,23 +0,0 @@
-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

@@ -1,41 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "esnext",
-    "esModuleInterop": true,
-    "moduleResolution": "bundler", // Update this line
-    "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,
-    "allowImportingTsExtensions": true,
-    "baseUrl": ".",
-    "paths": {
-      "*": ["*", "*.ts"]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}