@xyd-js/ui 0.1.0-xyd.0 → 0.1.0-xyd.10

package/src/components/Nav/Nav.tsx

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

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

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

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

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

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

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

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

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};
-    `
-}