@xyd-js/theme-poetry 0.1.0-xyd.5 → 0.1.0-xyd.68

package/src/components/Layouts/Layout.styles.tsx

@@ -1,145 +0,0 @@
-import {css} from "@linaria/core";
-
-const globalPageGutter = '8px';
-export const globalHeaderHeight = '46px';
-const globalHeaderWarningHeight = "0px";
-const contentTopSpace = "12px";
-
-const globalHeaderHeightWithSub = '90px';
-
-const cubicMove = "cubic-bezier(.65, 0, .35, 1)";
-const sidebarWidth = "450px";
-
-// TODO: better solution - design tokens
-export const globals = css`
-    :global() {
-        :root {
-            --xyd-navbar-height: ${globalHeaderHeight};
-            --xyd-sidebar-width: ${sidebarWidth};
-        }
-    }
-`;
-
-export const $layout = {
-    host: css`
-        width: 100%;
-    `,
-    header: css`
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        position: fixed;
-        top: ${globalHeaderWarningHeight};
-        right: ${globalPageGutter};
-        left: ${globalPageGutter};
-
-        height: ${globalHeaderHeight};
-    `,
-    header$$sub: css`
-        flex-direction: column;
-        height: ${globalHeaderHeightWithSub};
-        transition: transform 200ms;
-    `,
-    header$$hideMain: css`
-        transform: translateY(calc(-${globalHeaderHeight} + 3px));
-    `,
-    main: css`
-        position: fixed;
-        top: calc(${globalHeaderHeight} + ${globalHeaderWarningHeight});
-        bottom: ${globalPageGutter};
-        left: ${globalPageGutter};
-        right: ${globalPageGutter};
-    }`,
-    main$$sub: css`
-        top: calc(${globalHeaderHeightWithSub} + ${globalHeaderWarningHeight});
-        transition: top 200ms;
-    `,
-    sidebar: 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 $page = {
-    host: css`
-        position: absolute;
-        top: ${contentTopSpace};
-        right: 0;
-        bottom: 0;
-        z-index: 201;
-        background: #fff;
-
-        overflow: hidden;
-        transition: opacity .3s ${cubicMove};
-
-        left: ${sidebarWidth};
-    `,
-    scroll: css`
-        overflow: scroll;
-        height: 100%;
-        
-    `,
-    container: 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;
-    `,
-    articleContainer: css`
-        width: 980px;
-        padding: 40px 56px;
-        padding-left: 0;
-        padding-top: 20px;
-        margin: 0 auto;
-        margin-left: 100px;
-        max-width: 100%;
-    `,
-    articleContainer$$fullWidth: css`
-        width: 1200px;
-    `,
-}
-
-export const $article = {
-    host: css`
-        display: flex;
-        gap: 30px;
-        width: 100%;
-        align-items: flex-start;;
-    `,
-    content: css`
-        flex: 1 1 0;
-        overflow: hidden;
-    `,
-    nav: css`
-        position: sticky;
-        top: 30px;
-        width: 180px;
-        margin-top: 0;
-        margin-left: 50px;
-        padding-left: 16px;
-        flex: none;
-    `,
-    nav$$equal: css`
-        flex: 1;
-    `
-}

package/src/components/Layouts/Layout.tsx

@@ -1,116 +0,0 @@
-import React, {useEffect, useState} from "react"
-
-import {$layout, $page, $article, globalHeaderHeight} from "./Layout.styles"
-
-export interface LayoutProps {
-    header: React.ReactNode;
-    aside: React.ReactNode;
-    content: React.ReactNode;
-    contentNav: React.ReactNode;
-    subheader?: boolean;
-    kind?: "fullwidth" | "equal"
-}
-
-// TODO: move scroller to xyd-foo
-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(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(`.${$page.scroll}`)?.addEventListener("scroll", onScroll)
-        document.querySelector(`.${$page.scroll}`)?.addEventListener("scrollend", onScrollFinish)
-
-        return () => {
-            document.querySelector(`.${$page.scroll}`)?.removeEventListener("scroll", onScroll)
-            document.querySelector(`.${$page.scroll}`)?.removeEventListener("scrollend", onScrollFinish)
-        }
-    }, []);
-
-    return <div className={$layout.host}>
-        <header className={`
-            ${$layout.header}
-            ${props.subheader && $layout.header$$sub}
-            ${hideMainHeader && $layout.header$$hideMain}
-        `}>
-            {props.header}
-        </header>
-        <main className={`
-            ${$layout.main}
-            ${!hideMainHeader && props.subheader && $layout.main$$sub}
-        `}>
-            <aside className={$layout.sidebar}>
-                {props.aside}
-            </aside>
-            <div className={$page.host}>
-                <div className={$page.scroll}>
-                    <div className={$page.container}>
-                        <div className={`
-                            ${$page.articleContainer}
-                            ${props.kind == "fullwidth" && $page.articleContainer$$fullWidth}
-                            ${props.kind == "equal" && $page.articleContainer$$fullWidth}
-                        `}>
-                            <article className={$article.host}>
-                                <section className={$article.content}>
-                                    {props.content}
-                                </section>
-                                {
-                                    props.contentNav && <nav className={`
-                                    ${$article.nav}
-                                    ${props.kind == "equal" && $article.nav$$equal}
-                                `}>
-                                        {props.contentNav}
-                                    </nav>
-                                }
-                            </article>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </main>
-    </div>
-}

package/src/components/Layouts/index.ts

@@ -1,5 +0,0 @@
-export {
-    Layout
-} from "./Layout";
-
-export type {LayoutProps} from "./Layout";