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

package/index.ts

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

package/rollup.config.js

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

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

package/src/components/Anchor/Anchor.tsx

@@ -1,57 +0,0 @@
-import React, {forwardRef} from 'react'
-import type {ComponentProps, ReactElement} from 'react'
-
-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

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

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

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

@@ -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";