@xyd-js/components 0.1.0-xyd.11 → 0.1.0-xyd.13

package/src/layouts/Layout.styles.tsx

@@ -1,155 +0,0 @@
-import {css} from "@linaria/core";
-
-const globalPageGutter = '8px';
-export const globalHeaderHeight = '40px';
-const globalHeaderWarningHeight = "0px";
-const contentTopSpace = "12px";
-
-const globalHeaderHeightWithSub = '94px';
-
-const cubicMove = "cubic-bezier(.65, 0, .35, 1)";
-const sidebarWidth = "210px";
-
-// TODO: better solution - design tokens
-export const globals = css`
-    :global() {
-        :root {
-            --xyd-navbar-height: ${globalHeaderHeight};
-            --xyd-global-page-gutter: ${globalPageGutter};
-        }
-    }
-`;
-
-export const LayoutHost = css`
-    width: 100%;
-`;
-
-export const LayoutHeader = css`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    position: fixed;
-    top: ${globalHeaderWarningHeight};
-    right: ${globalPageGutter};
-    left: ${globalPageGutter};
-
-    height: ${globalHeaderHeight};
-`;
-
-export const LayoutHeaderSub = css`
-    flex-direction: column;
-    height: ${globalHeaderHeightWithSub};
-    transition: transform 200ms;
-`;
-
-export const LayoutHeaderHideMain = css`
-    transform: translateY(calc(-${globalHeaderHeight} + 3px));
-`;
-
-export const LayoutMain = css`
-    position: fixed;
-    top: calc(${globalHeaderHeight} + ${globalHeaderWarningHeight});
-    bottom: ${globalPageGutter};
-    left: ${globalPageGutter};
-    right: ${globalPageGutter};
-}`;
-
-export const LayoutMainSub = css`
-    top: calc(${globalHeaderHeightWithSub} + ${globalHeaderWarningHeight});
-    transition: top 200ms;
-`;
-
-export const LayoutSidebar = css`
-    flex-direction: column;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    z-index: 101;
-    width: ${sidebarWidth};
-    border: 0;
-    padding: ${contentTopSpace} 0 0;
-    overflow: visible;
-    background: none;
-    border-radius: 0;
-    opacity: 1;
-    visibility: visible;
-    transition: opacity .3s ${cubicMove};
-`;
-
-export const PageHost = css`
-    position: absolute;
-    top: ${contentTopSpace};
-    right: 0;
-    bottom: 0;
-    z-index: 201;
-    background: #fff;
-
-    //border-radius: 8px;
-    //border: 1px solid #ececf1;
-
-    overflow: hidden;
-    transition: opacity .3s ${cubicMove};
-
-    left: ${sidebarWidth};
-`;
-
-export const PageScroll = css`
-    //position: absolute;
-    //top: 0;
-    //right: 0;
-    //bottom: 0;
-    //left: 0;
-    //overflow: auto;
-
-    overflow: scroll;
-    height: 100%;
-`;
-
-export const PageContainer = css`
-    padding: 0;
-    width: 100%;
-    //position: relative; TODO: unset if during client render?
-    min-height: 100%;
-
-    max-width: 100%;
-    margin: 0 auto;
-    font-size: 15px;
-    line-height: 24px;
-`;
-
-export const PageArticleContainer = css`
-    width: 980px;
-    padding: 40px 56px;
-    padding-top: 20px;
-    max-width: 100%;
-    margin: 0 auto;
-`;
-
-export const PageArticleContainerFullWidth = css`
-    width: 1200px;
-`;
-
-export const ArticleHost = css`
-    display: flex;
-    gap: 30px;
-    width: 100%;
-    align-items: flex-start;;
-`;
-
-export const ArticleContent = css`
-    flex: 1 1 0;
-    overflow: hidden;
-`;
-
-export const ArticleNav = css`
-    position: sticky;
-    top: 30px;
-    width: 180px;
-    margin-top: 0;
-    margin-left: 50px;
-    padding-left: 16px;
-    flex: none;
-`;

package/src/layouts/Layout.tsx

@@ -1,119 +0,0 @@
-import React, {useEffect, useState} from "react"
-
-import * as cn from "./Layout.styles"
-
-export interface LayoutProps {
-    header: React.ReactNode;
-    aside: React.ReactNode;
-    content: React.ReactNode;
-    contentNav: React.ReactNode;
-    subheader?: boolean;
-    kind?: "fullwidth"
-}
-
-export function Layout(props: LayoutProps) {
-    const [hideMainHeader, setHideMainHeader] = useState(false)
-    const [scrollTop, setScrollTop] = useState(0)
-    const [controlScrollPos, setControlScrollPos] = useState(0)
-
-    useEffect(() => {
-        if (scrollTop === controlScrollPos) {
-            return
-        }
-
-        const checkpoint = parseInt(cn.globalHeaderHeight, 10) / 2
-        const diff = scrollTop - controlScrollPos
-        const reversePosDiff = Math.abs(scrollTop - controlScrollPos)
-
-        if (diff > checkpoint) {
-            setHideMainHeader(true)
-        } else if (reversePosDiff > checkpoint) {
-            setHideMainHeader(false)
-        }
-    }, [
-        scrollTop,
-        controlScrollPos,
-    ]);
-
-    function onScroll(e: Event) {
-        if (!(e.target instanceof HTMLElement)) {
-            return
-        }
-
-        const scroll = e.target?.scrollTop
-        setScrollTop(scroll)
-    }
-
-    function onScrollFinish(e: Event) {
-        if (!(e.target instanceof HTMLElement)) {
-            return
-        }
-
-        setControlScrollPos(e.target?.scrollTop)
-    }
-
-    // TODO: by ref?
-    // TODO: MOVE SOMEWHERE ELSE BECAUSE IT DECREASE PERFORMANCE (RERENDER)
-    useEffect(() => {
-        // return // TODO: UNCOMMENT
-
-        if (!props.subheader) {
-            return
-        }
-
-        document.querySelector(`.${cn.PageScroll}`)?.addEventListener("scroll", onScroll)
-        document.querySelector(`.${cn.PageScroll}`)?.addEventListener("scrollend", onScrollFinish)
-
-        return () => {
-            document.querySelector(`.${cn.PageScroll}`)?.removeEventListener("scroll", onScroll)
-            document.querySelector(`.${cn.PageScroll}`)?.removeEventListener("scrollend", onScrollFinish)
-        }
-    }, []);
-
-    return <div className={cn.LayoutHost}>
-        <Layout.Header className={`
-            ${props.subheader && cn.LayoutHeaderSub}
-            ${hideMainHeader && cn.LayoutHeaderHideMain}
-        `}>
-            {props.header}
-        </Layout.Header>
-        <main className={`
-            ${cn.LayoutMain}
-            ${!hideMainHeader && props.subheader && cn.LayoutMainSub}
-        `}>
-            <aside className={cn.LayoutSidebar}>
-                {props.aside}
-            </aside>
-            <div className={cn.PageHost}>
-                <div className={cn.PageScroll}>
-                    <div className={cn.PageContainer}>
-                        <div className={`
-                            ${cn.PageArticleContainer}
-                            ${props.kind == "fullwidth" && cn.PageArticleContainerFullWidth}
-                        `}>
-                            <article className={cn.ArticleHost}>
-                                <section className={cn.ArticleContent}>
-                                    {props.content}
-                                </section>
-                                {
-                                    props.contentNav && <nav className={cn.ArticleNav}>
-                                        {props.contentNav}
-                                    </nav>
-                                }
-                            </article>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </main>
-    </div>
-}
-
-Layout.Header = function LayoutHeader({className, children}: { className?: string, children: React.ReactNode }) {
-    return <header className={`
-            ${cn.LayoutHeader}
-            ${className}
-        `}>
-        {children}
-    </header>
-}

package/src/ui/Loader/Loader.styles.tsx

@@ -1,54 +0,0 @@
-import {css} from "@linaria/core";
-
-export const LoaderHost = css`
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-`;
-
-export const LoaderDots = css`
-    display: flex;
-    gap: 4px;
-`;
-
-export const LoaderDot = css`
-    width: 8px;
-    height: 8px;
-    background-color: currentColor;
-    border-radius: 50%;
-    animation: pulse 1.4s infinite ease-in-out;
-    opacity: 0.6;
-
-    &:nth-of-type(2) {
-        animation-delay: 0.2s;
-    }
-
-    &:nth-of-type(3) {
-        animation-delay: 0.4s;
-    }
-
-    @keyframes pulse {
-        0%, 80%, 100% { 
-            transform: scale(0.6);
-            opacity: 0.4;
-        }
-        40% { 
-            transform: scale(1);
-            opacity: 1;
-        }
-    }
-`;
-
-export const LoaderSmall = css`
-    .${LoaderDot} {
-        width: 6px;
-        height: 6px;
-    }
-`;
-
-export const LoaderLarge = css`
-    .${LoaderDot} {
-        width: 12px;
-        height: 12px;
-    }
-`; 

package/src/ui/Loader/Loader.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import * as cn from "./Loader.styles";
-
-export interface LoaderProps {
-  size?: "small" | "medium" | "large";
-  className?: string;
-}
-
-export function Loader({ size = "medium", className }: LoaderProps) {
-  return (
-    <div 
-      className={`
-        ${cn.LoaderHost}
-        ${size === "small" && cn.LoaderSmall}
-        ${size === "large" && cn.LoaderLarge}
-        ${className}
-      `}
-    >
-      <div className={cn.LoaderDots}>
-        <div className={cn.LoaderDot} />
-        <div className={cn.LoaderDot} />
-        <div className={cn.LoaderDot} />
-      </div>
-    </div>
-  );
-} 

package/src/ui/index.ts

@@ -1 +0,0 @@
-export * from "./Loader/Loader";