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

package/src/layouts/LayoutPrimary/LayoutPrimary.styles.tsx

@@ -0,0 +1,320 @@
+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 = "300px";
+
+// TODO: better solution - design tokens
+export const globals = css`
+    :global() {
+        :root {
+            --xyd-navbar-height: ${globalHeaderHeight};
+            --xyd-global-page-gutter: ${globalPageGutter};
+            --xyd-sidebar-width: ${sidebarWidth};
+        }
+    }
+`;
+
+export const $layout = {
+    host: css`
+        width: 100%;
+        overflow-x: hidden;
+        background: #fff;
+    `,
+    header: css`
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: fixed;
+        top: ${globalHeaderWarningHeight};
+        right: ${globalPageGutter};
+        left: ${globalPageGutter};
+        height: ${globalHeaderHeight};
+        z-index: 20;
+        background: #fff;
+
+        @media (max-width: 768px) {
+            padding: 0;
+        }
+    `,
+    primaryHeaderContent: css`
+        display: flex;
+        align-items: center;
+        width: 100%;
+    `,
+    header$$sub: css`
+        flex-direction: column;
+        height: ${globalHeaderHeightWithSub};
+        transition: transform 200ms;
+    `,
+    header$$hideMain: css`
+        transform: translateY(calc(-${globalHeaderHeight} + 3px));
+    `,
+    hamburgerButton: css`
+        display: none;
+
+        @media (max-width: 768px) {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+            border: none;
+            background: none;
+            cursor: pointer;
+            padding: 0;
+        }
+    `,
+    hamburgerIcon: css`
+        width: 24px;
+        height: 24px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    `,
+    hamburgerLine: css`
+        width: 100%;
+        height: 2px;
+        background: #000;
+        transition: transform 0.3s ${cubicMove};
+    `,
+    hamburgerLine$$open: css`
+        &:first-child {
+            transform: translateY(11px) rotate(45deg);
+        }
+        &:nth-child(2) {
+            opacity: 0;
+        }
+        &:last-child {
+            transform: translateY(-11px) rotate(-45deg);
+        }
+    `,
+    main: css`
+        position: fixed;
+        display: flex;
+        top: calc(${globalHeaderHeight} + ${globalHeaderWarningHeight});
+        bottom: ${globalPageGutter};
+        left: ${globalPageGutter};
+        right: ${globalPageGutter};
+        margin-top: ${globalPageGutter};
+    `,
+    main$$sub: css`
+        top: calc(${globalHeaderHeightWithSub} + ${globalHeaderWarningHeight});
+        transition: top 200ms;
+    `,
+    staticSidebar: css`
+        flex: none;
+        width: ${sidebarWidth};
+        background: #fff;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        position: relative;
+        
+        @media (max-width: 768px) {
+            display: none;
+        }
+    `,
+    mobileSidebar: css`
+        display: none;
+
+        @media (max-width: 768px) {
+            display: flex;
+            position: fixed;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            width: ${sidebarWidth};
+            background: #fff;
+            flex-direction: column;
+            overflow: hidden;
+            z-index: 50;
+            transform: translateX(-100%);
+            transition: transform .3s ${cubicMove};
+            box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
+        }
+    `,
+    mobileSidebar$$open: css`
+        transform: translateX(0);
+    `,
+    sidebarContent: css`
+        flex: 1;
+        overflow-y: auto;
+    `,
+    closeButton: css`
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: none;
+        padding: 0;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    `,
+    searchInput: css`
+        width: 100%;
+        height: 40px;
+        padding: 0 12px;
+        border: 1px solid #eaeaea;
+        border-radius: 6px;
+        font-size: 14px;
+        outline: none;
+        transition: border-color 0.2s;
+
+        &:focus {
+            border-color: #666;
+        }
+    `,
+    closeIcon: css`
+        width: 20px;
+        height: 20px;
+        position: relative;
+
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: #666;
+            transform-origin: center;
+        }
+
+        &::before {
+            transform: rotate(45deg);
+        }
+
+        &::after {
+            transform: rotate(-45deg);
+        }
+    `,
+    overlay: css`
+        display: none;
+
+        @media (max-width: 768px) {
+            display: block;
+            position: fixed;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background: rgba(0, 0, 0, 0.6);
+            transition: opacity .3s;
+            opacity: 0;
+            pointer-events: none;
+            z-index: 40;
+        }
+    `,
+    overlay$$visible: css`
+        opacity: 1;
+        pointer-events: auto;
+    `
+}
+
+export const $page = {
+    host: css`
+        position: relative;
+        top: ${contentTopSpace};
+        flex: 1;
+        background: #fff;
+        overflow: hidden;
+        min-width: 0;
+    `,
+    scroll: css`
+        overflow-y: auto;
+        height: 100%;
+        -webkit-overflow-scrolling: touch;
+        padding: 0 48px;
+
+        @media (max-width: 1024px) {
+            padding: 0 32px;
+        }
+
+        @media (max-width: 768px) {
+            padding: 0 24px;
+        }
+    `,
+    container: css`
+        padding: 40px 0;
+        width: 100%;
+        max-width: 900px;
+        margin: 0 auto;
+        font-size: 15px;
+        line-height: 24px;
+
+        @media (max-width: 768px) {
+            padding: 24px 0;
+        }
+    `,
+    container$$large: css`
+        max-width: 1200px;
+    `,
+    articleContainer: css`
+        width: 100%;
+        max-width: 100%;
+        margin: 0 auto;
+        box-sizing: border-box;
+    `,
+}
+
+export const $article = {
+    host: css`
+        display: flex;
+        gap: 64px;
+        width: 100%;
+        align-items: flex-start;
+        box-sizing: border-box;
+
+        @media (max-width: 1024px) {
+            gap: 48px;
+        }
+
+        @media (max-width: 768px) {
+            flex-direction: column;
+            gap: 32px;
+        }
+    `,
+    content: css`
+        flex: 1;
+        min-width: 0;
+        max-width: 100%;
+    `,
+    nav: css`
+        position: sticky;
+        top: 24px;
+        width: 200px;
+        min-width: 200px;
+        flex: none;
+        padding-left: 24px;
+
+        @media (max-width: 1024px) {
+            display: none;
+            width: 180px;
+            min-width: 180px;
+            padding-left: 16px;
+        }
+
+        @media (max-width: 768px) {
+            display: block;
+            position: static;
+            width: 100%;
+            min-width: 100%;
+            padding-left: 0;
+            padding-top: 24px;
+            border-top: 1px solid #eaeaea;
+        }
+    `
+}

package/src/layouts/LayoutPrimary/LayoutPrimary.tsx

@@ -0,0 +1,160 @@
+import React, {useEffect, useState} from "react"
+
+import {$layout, $page, $article, globalHeaderHeight} from "./LayoutPrimary.styles.tsx"
+
+export interface LayoutPrimaryProps {
+    header: React.ReactNode;
+    aside: React.ReactNode;
+    content: React.ReactNode;
+    contentNav: React.ReactNode;
+
+    subheader?: React.ReactNode;
+    layoutSize?: "large"
+}
+
+// TODO: move scroller to xyd-foo
+export function LayoutPrimary(props: LayoutPrimaryProps) {
+    const [isMobileNavOpen, setIsMobileNavOpen] = useState(false)
+
+    const {hideMainHeader} = props.subheader ? useSubHeader() : {hideMainHeader: false}
+
+    return <div className={$layout.host}>
+        <header className={` 
+            ${$layout.header}
+            ${props.subheader && $layout.header$$sub}
+            ${hideMainHeader && $layout.header$$hideMain}
+        `}>
+            <div className={$layout.primaryHeaderContent}>
+                {props.header}
+                <button
+                    className={$layout.hamburgerButton}
+                    onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}
+                    aria-label="Toggle navigation menu"
+                >
+                    <div className={$layout.hamburgerIcon}>
+                        <span className={`${$layout.hamburgerLine} ${isMobileNavOpen ? $layout.hamburgerLine$$open : ''}`}/>
+                        <span className={`${$layout.hamburgerLine} ${isMobileNavOpen ? $layout.hamburgerLine$$open : ''}`}/>
+                        <span className={`${$layout.hamburgerLine} ${isMobileNavOpen ? $layout.hamburgerLine$$open : ''}`}/>
+                    </div>
+                </button>
+            </div>
+            {props.subheader}
+        </header>
+
+        {/* Mobile Drawer Sidebar */}
+        <div
+            className={`${$layout.overlay} ${isMobileNavOpen ? $layout.overlay$$visible : ''}`}
+            onClick={() => setIsMobileNavOpen(false)}
+        />
+        <aside className={`
+            ${$layout.mobileSidebar}
+            ${isMobileNavOpen ? $layout.mobileSidebar$$open : ''}
+        `}>
+            <div className={$layout.sidebarContent}>
+                {props.aside}
+            </div>
+            <button
+                className={$layout.closeButton}
+                onClick={() => setIsMobileNavOpen(false)}
+                aria-label="Close navigation menu"
+            >
+                <div className={$layout.closeIcon}/>
+            </button>
+        </aside>
+
+        <main className={`
+            ${$layout.main}
+            ${!hideMainHeader && props.subheader && $layout.main$$sub}
+        `}>
+            {/* Desktop Static Sidebar */}
+            <aside className={$layout.staticSidebar}>
+                {props.aside}
+            </aside>
+
+            <div className={$page.host}>
+                <div className={$page.scroll}>
+                    <div className={`
+                        ${$page.container}
+                        ${props.layoutSize == "large" && $page.container$$large}
+                    `}>
+                        <div className={`
+                            ${$page.articleContainer}
+                        `}>
+                            <article className={$article.host}>
+                                <section className={$article.content}>
+                                    {props.content}
+                                </section>
+                                {
+                                    props.contentNav && <nav className={`
+                                    ${$article.nav}
+                                `}>
+                                        {props.contentNav}
+                                    </nav>
+                                }
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+}
+
+// TODO: move to `xyd-foo` or somewhere else
+function useSubHeader() {
+    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(() => {
+        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 {
+        hideMainHeader,
+    }
+}

package/src/layouts/LayoutPrimary/index.ts

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

package/src/layouts/index.ts

@@ -1,7 +1,13 @@
 // TODO: move this pkg @xyd-js/layouts ?
 
+export {
+    LayoutPrimary,
+    type LayoutPrimaryProps
+} from "./LayoutPrimary";
+
 export {
     Layout
 } from "./Layout";
 
-export type {LayoutProps} from "./Layout";
+export type {LayoutProps} from "./Layout";
+

package/src/writer/Badge/Badge.styles.tsx

@@ -12,12 +12,12 @@ export const $badge = {
         text-transform: none;
     `,
     host$$warning: css`
-        color: #000;
-        background-color: #f8d047;
+        color: #434e4e;
+        background-color: #ffffe1
     `,
     host$$info: css`
         color: #fff;
-        background-color: #1FA6F2;
+        background-color: #1971a8;
     `,
     host$$sm: css`
         font-size: 12px;

package/src/writer/NavLinks/NavLinks.styles.ts

@@ -9,6 +9,7 @@ export const $navLinks = {
         justify-content: space-between;
         align-items: center;
         border-top-width: 1px;
+        border-color: #ececf1;
     `,
     link: css`
         display: flex;

package/dist/_rollupPluginBabelHelpers-DzVepvvn.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_rollupPluginBabelHelpers-DzVepvvn.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_rollupPluginBabelHelpers-NA6nV2VK.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_rollupPluginBabelHelpers-NA6nV2VK.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}