@xyd-js/components 0.1.0-xyd.1 → 0.1.0-xyd.10

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

@@ -0,0 +1,341 @@
+import {css} from "@linaria/core";
+
+const globalPageGutter = '8px';
+export const globalHeaderHeight = '50px';
+const globalHeaderWarningHeight = "0px";
+const contentTopSpace = "12px";
+
+const globalHeaderHeightWithSub = '94px';
+
+const cubicMove = "cubic-bezier(.65, 0, .35, 1)";
+const sidebarWidth = "250px";
+
+const tabletBreakpoint = '1024px';
+const mobileBreakpoint = '768px';
+
+// 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 LayoutPrimaryHost = css`
+    width: 100%;
+    overflow-x: hidden;
+    background: #fff;
+`;
+
+export const LayoutPrimaryHeader = 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;
+    }
+`;
+
+export const LayoutPrimaryHeaderContent = css`
+    display: flex;
+    align-items: center;
+    width: 100%;
+`;
+
+export const LayoutPrimaryHeaderSub = css`
+    flex-direction: column;
+    height: ${globalHeaderHeightWithSub};
+    transition: transform 200ms;
+`;
+
+export const LayoutPrimaryHeaderHideMain = css`
+    transform: translateY(calc(-${globalHeaderHeight} + 3px));
+`;
+
+export const LayoutPrimaryHamburgerButton = 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;
+    }
+`;
+
+export const LayoutPrimaryHamburgerIcon = css`
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+`;
+
+export const LayoutPrimaryHamburgerLine = css`
+    width: 100%;
+    height: 2px;
+    background: #000;
+    transition: transform 0.3s ${cubicMove};
+`;
+
+export const LayoutPrimaryHamburgerLineOpen = css`
+    &:first-child {
+        transform: translateY(11px) rotate(45deg);
+    }
+    &:nth-child(2) {
+        opacity: 0;
+    }
+    &:last-child {
+        transform: translateY(-11px) rotate(-45deg);
+    }
+`;
+
+export const LayoutPrimaryMain = css`
+    position: fixed;
+    display: flex;
+    top: calc(${globalHeaderHeight} + ${globalHeaderWarningHeight});
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: ${globalPageGutter};
+    overflow: hidden;
+
+    @media (max-width: ${tabletBreakpoint}) {
+        padding-top: calc(${globalHeaderHeight} + ${globalHeaderWarningHeight} + ${globalPageGutter});
+    }
+`;
+
+export const LayoutPrimaryMainSub = css`
+    top: calc(${globalHeaderHeightWithSub} + ${globalHeaderWarningHeight});
+
+    @media (max-width: ${tabletBreakpoint}) {
+        padding-top: calc(${globalHeaderHeightWithSub} + ${globalHeaderWarningHeight} + ${globalPageGutter});
+    }
+`;
+
+export const LayoutPrimaryStaticSidebar = css`
+    flex: none;
+    width: ${sidebarWidth};
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    height: 100%;
+    
+    @media (max-width: ${tabletBreakpoint}) {
+        display: none;
+    }
+`;
+
+export const LayoutPrimaryMobileSidebar = css`
+    display: none;
+
+    @media (max-width: ${tabletBreakpoint}) {
+        display: flex;
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: ${sidebarWidth};
+        background: #fff;
+        flex-direction: column;
+        z-index: 50;
+        transform: translateX(-100%);
+        transition: transform .3s ${cubicMove};
+        box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
+    }
+`;
+
+export const LayoutPrimaryMobileSidebarOpen = css`
+    @media (max-width: ${tabletBreakpoint}) {
+        transform: translateX(0);
+    }
+`;
+
+export const LayoutPrimarySidebarContent = css`
+    flex: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    height: 100%;
+`;
+
+export const LayoutPrimaryCloseButton = 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;
+`;
+
+export const LayoutPrimarySearchInput = 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;
+    }
+`;
+
+export const LayoutPrimaryCloseIcon = 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);
+    }
+`;
+
+export const LayoutPrimaryOverlay = css`
+    display: none;
+
+    @media (max-width: ${tabletBreakpoint}) {
+        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;
+        height: 100vh;
+    }
+`;
+
+export const LayoutPrimaryOverlayVisible = css`
+    opacity: 1;
+    pointer-events: auto;
+`;
+
+export const LayoutPrimaryPageHost = css`
+    position: relative;
+    flex: 1;
+    background: #fff;
+    overflow: hidden;
+    min-width: 0;
+    height: 100%;
+`;
+
+export const LayoutPrimaryPageScroll = css`
+    overflow-y: auto;
+    height: 100%;
+    -webkit-overflow-scrolling: touch;
+    padding: 0 48px;
+
+    @media (max-width: ${tabletBreakpoint}) {
+        padding: 0 32px;
+    }
+
+    @media (max-width: ${mobileBreakpoint}) {
+        padding: 0 24px;
+    }
+`;
+
+export const LayoutPrimaryPageContainer = css`
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 0 ${globalPageGutter};
+`;
+
+export const LayoutPrimaryPageContainerLarge = css`
+    max-width: 1200px;
+`;
+
+export const LayoutPrimaryPageArticleContainer = css`
+    display: flex;
+    gap: 48px;
+    padding: 48px 0;
+    min-height: 100%;
+
+    @media (max-width: ${tabletBreakpoint}) {
+        gap: 32px;
+    }
+
+    @media (max-width: ${mobileBreakpoint}) {
+        flex-direction: column;
+        padding: 24px 0;
+        gap: 24px;
+    }
+`;
+
+export const LayoutPrimaryArticleHost = css`
+    flex: 1;
+    min-width: 0;
+`;
+
+export const LayoutPrimaryArticleContent = css`
+    width: 100%;
+`;
+
+export const LayoutPrimaryArticleNav = css`
+    flex: none;
+    width: 256px;
+    position: sticky;
+    top: 0;
+    height: fit-content;
+    max-height: 100vh;
+    overflow-y: auto;
+    padding-right: 24px;
+    padding-top: ${contentTopSpace};
+
+    @media (max-width: ${tabletBreakpoint}) {
+        width: 200px;
+        padding-right: 16px;
+    }
+
+    @media (max-width: ${mobileBreakpoint}) {
+        width: 100%;
+        position: static;
+        max-height: none;
+        padding-right: 0;
+    }
+`;

package/src/layouts/LayoutPrimary/LayoutPrimary.tsx

@@ -0,0 +1,157 @@
+import React, {useEffect, useState} from "react"
+
+import * as cn from "./LayoutPrimary.styles"
+
+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={cn.LayoutPrimaryHost}>
+        <header className={` 
+            ${cn.LayoutPrimaryHeader}
+            ${props.subheader && cn.LayoutPrimaryHeaderSub}
+            ${hideMainHeader && cn.LayoutPrimaryHeaderHideMain}
+        `}>
+            <div className={cn.LayoutPrimaryHeaderContent}>
+                {props.header}
+                <button
+                    className={cn.LayoutPrimaryHamburgerButton}
+                    onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}
+                    aria-label="Toggle navigation menu"
+                >
+                    <div className={cn.LayoutPrimaryHamburgerIcon}>
+                        <span
+                            className={`${cn.LayoutPrimaryHamburgerLine} ${isMobileNavOpen ? cn.LayoutPrimaryHamburgerLineOpen : ''}`}/>
+                        <span
+                            className={`${cn.LayoutPrimaryHamburgerLine} ${isMobileNavOpen ? cn.LayoutPrimaryHamburgerLineOpen : ''}`}/>
+                        <span
+                            className={`${cn.LayoutPrimaryHamburgerLine} ${isMobileNavOpen ? cn.LayoutPrimaryHamburgerLineOpen : ''}`}/>
+                    </div>
+                </button>
+            </div>
+            {props.subheader}
+        </header>
+
+        {/* Mobile Drawer Sidebar */}
+        <div
+            className={`${cn.LayoutPrimaryOverlay} ${isMobileNavOpen ? cn.LayoutPrimaryOverlayVisible : ''}`}
+            onClick={() => setIsMobileNavOpen(false)}
+        />
+        <aside className={`
+            ${cn.LayoutPrimaryMobileSidebar}
+            ${isMobileNavOpen ? cn.LayoutPrimaryMobileSidebarOpen : ''}
+        `}>
+            <div className={cn.LayoutPrimarySidebarContent}>
+                {props.aside}
+            </div>
+            <button
+                className={cn.LayoutPrimaryCloseButton}
+                onClick={() => setIsMobileNavOpen(false)}
+                aria-label="Close navigation menu"
+            >
+                <div className={cn.LayoutPrimaryCloseIcon}/>
+            </button>
+        </aside>
+
+        <main className={`
+            ${cn.LayoutPrimaryMain}
+            ${!hideMainHeader && props.subheader && cn.LayoutPrimaryMainSub}
+        `}>
+            {/* Desktop Static Sidebar */}
+            <aside className={cn.LayoutPrimaryStaticSidebar}>
+                {props.aside}
+            </aside>
+
+            <div className={cn.LayoutPrimaryPageHost}>
+                <div className={cn.LayoutPrimaryPageScroll}>
+                    <div className={`
+                        ${cn.LayoutPrimaryPageContainer}
+                        ${props.layoutSize == "large" && cn.LayoutPrimaryPageContainerLarge}
+                    `}>
+                        <div className={cn.LayoutPrimaryPageArticleContainer}>
+                            <article className={cn.LayoutPrimaryArticleHost}>
+                                <section className={cn.LayoutPrimaryArticleContent}>
+                                    {props.content}
+                                </section>
+                            </article>
+                            {props.contentNav && <nav className={cn.LayoutPrimaryArticleNav}>
+                                {props.contentNav}
+                            </nav>}
+                        </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(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(() => {
+        document.querySelector(`.${cn.LayoutPrimaryPageScroll}`)?.addEventListener("scroll", onScroll)
+        document.querySelector(`.${cn.LayoutPrimaryPageScroll}`)?.addEventListener("scrollend", onScrollFinish)
+
+        return () => {
+            document.querySelector(`.${cn.LayoutPrimaryPageScroll}`)?.removeEventListener("scroll", onScroll)
+            document.querySelector(`.${cn.LayoutPrimaryPageScroll}`)?.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/pages/HomePage/HomePage.styles.tsx

@@ -0,0 +1,16 @@
+import {css} from "@linaria/core";
+
+export const HomePageCardsHost = css`
+    display: grid;
+    grid-template-columns: repeat(2, 500px);
+    justify-content: center;
+    gap: 30px;
+
+    @media (max-width: 1200px) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
+`; 

package/src/pages/HomePage/HomePage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {css} from "@linaria/core";
+import * as cn from "./HomePage.styles";
 
 import {
     GuideCard,
@@ -9,23 +9,6 @@ import {HomeView} from "../../views"
 
 import {IHomePageHero, IHomePageFeature} from "./types";
 
-const $cards = {
-    host: css`
-        display: grid;
-        grid-template-columns: repeat(2, 500px);
-        justify-content: center;
-        gap: 30px;
-
-        @media (max-width: 1200px) {
-            grid-template-columns: repeat(2, 1fr);
-        }
-
-        @media (max-width: 768px) {
-            grid-template-columns: 1fr;
-        }
-    `,
-}
-
 export interface HomePageProps {
     header: React.ReactNode
 
@@ -50,11 +33,14 @@ export function HomePage(props: HomePageProps) {
 }
 
 function $Hero(props: HomePageProps) {
+    const subtitle = typeof props.hero?.subtitle === 'string' 
+        ? props.hero.subtitle 
+        : props.hero?.subtitle?.toString() || "";
+
     return <CTABanner>
         <CTABanner.Heading
             title={props.hero?.text || ""}
-            headingEffect={props.hero?.textEffect}
-            subtitle={props.hero?.subtitle}
+            subtitle={subtitle}
         />
         {props?.hero?.actions && <CTABanner.ButtonGroup>
             {props?.hero?.actions.map((action, index) => (
@@ -72,7 +58,7 @@ function $Cards(props: HomePageProps) {
     // TODO: cards gridTemplateColumns based on elements
     return <div
         className={`
-            ${$cards.host}
+            ${cn.HomePageCardsHost}
             xyd_page-comp-homepage-cards
         `}>
         {props.features?.map((feat, index) => (

package/src/pages/TODO.md

@@ -0,0 +1 @@
+move to `@xyd-js/pages` ?

package/src/pages/index.ts

@@ -1 +1,2 @@
+// TODO: rename to @xyd-js/components/themes . `HomePage` -> `BaseTheme`
 export * from "./HomePage"

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

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

@@ -0,0 +1,26 @@
+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/TODO.md

@@ -0,0 +1,2 @@
+rename to `@xyd-js/components/kit` /  `@xyd-js/components/ui-kit` ?
+

package/src/ui/index.ts

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

package/src/utils/useStyle.ts

@@ -0,0 +1,19 @@
+import {css} from '@linaria/core';
+
+type StyleObject = Record<string, string>;
+type StyleFunction = (strings: TemplateStringsArray, ...values: any[]) => string;
+
+export function useStyle<T extends StyleObject>(component: { styles: T }) {
+    const styled = {} as Record<keyof T, StyleFunction>;
+
+    for (const key of Object.keys(component.styles)) {
+        styled[key as keyof T] = (strings: TemplateStringsArray, ...values: any[]) => {
+            const customStyles = css`
+                ${strings.reduce((result, str, i) => result + str + (values[i] || ''), '')}
+            `;
+            return `${component.styles[key]} ${customStyles}`;
+        };
+    }
+
+    return styled;
+}