@xyd-js/theme-poetry 0.1.0-xyd.1

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

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

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

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

package/src/index.css

@@ -0,0 +1,67 @@
+@import "vars.css";
+
+@font-face {
+    font-family: 'Mona Sans';
+    src: url('../public/fonts/MonaSans/Mona-Sans.woff2') format('woff2 supports variations'),
+    url('../public/fonts/MonaSans/Mona-Sans.woff2') format('woff2-variations');
+    font-weight: 200 900;
+    font-stretch: 75% 125%;
+}
+
+html {
+    font-family: 'Mona Sans', serif;
+}
+
+body {
+    margin: 0;
+}
+
+ol, ul, menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none;
+}
+
+button, [role=button] {
+    cursor: pointer;
+}
+
+button, select {
+    text-transform: none;
+}
+
+button, input, optgroup, select, textarea {
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+*, :before, :after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+}
+
+p {
+    padding: 0;
+    margin: 0;
+}
+

package/src/index.ts

@@ -0,0 +1 @@
+export {default} from "./theme"

package/src/override.css

@@ -0,0 +1,7 @@
+.xyd_ui-comp-sidebar, .xyd_ui-comp-nav-logo {
+    padding-left: 200px;
+}
+
+.xyd_comp-comp-heading {
+    font-weight: 400;
+}

package/src/theme.tsx

@@ -0,0 +1,78 @@
+import React from "react"
+
+import {helperContent} from "@xyd-js/components/content"
+import type {
+    ITheme
+} from "@xyd-js/framework"
+import {
+    FwNav,
+    FwToc,
+    FwNavLinks,
+
+    FwSidebarGroups,
+} from "@xyd-js/framework/react"
+
+import {Layout} from "./components/Layouts";
+
+import "@xyd-js/ui/index.css";
+import "@xyd-js/components/index.css";
+// TODO: what about atlas? it's loaded by plugin - probably we need better mechanism for loading css
+import '@xyd-js/atlas/index.css';
+
+import './index.css';
+import './override.css';
+
+const {Content} = helperContent()
+
+export interface ThemeSettings {
+    hideToc?: boolean // TODO: better prop name?
+    sidebar?: {
+        onePathBehaviour?: boolean
+        clientSideRouting?: boolean
+    }
+    contentNav?: React.ReactNode
+    layout?: {
+        kind?: "fullwidth" | "equal"
+    }
+}
+
+export interface ThemeProps extends ITheme<ThemeSettings> {
+}
+
+export default function ThemePoetry(props: ThemeProps) {
+    return <Layout
+        header={<Navbar/>}
+        aside={<Sidebar themeSettings={props.themeSettings}/>}
+        content={<>
+            {/*TODO: optional breadcrumbs*/}
+            {/*{props.breadcrumbs ? <FwBreadcrumbs/> : undefined}*/}
+            <Content>
+                {props.children}
+            </Content>
+
+            <FwNavLinks/>
+        </>
+        }
+        contentNav={
+            props.themeSettings?.hideToc
+                ? null
+                : props.themeSettings?.contentNav ? props.themeSettings.contentNav : <FwToc/>
+        }
+        kind={props.themeSettings?.layout?.kind || undefined}
+    />
+}
+
+// TODO: finish search
+function Navbar() {
+    return <>
+        <FwNav kind="middle"/>
+    </>
+}
+
+// TODO: onePathBehaviour does not work - fix that
+function Sidebar({themeSettings}: { themeSettings?: ThemeSettings }) {
+    return <FwSidebarGroups
+        onePathBehaviour={themeSettings?.sidebar?.onePathBehaviour}
+        clientSideRouting={themeSettings?.sidebar?.clientSideRouting}
+    />
+}

package/src/vars.css

@@ -0,0 +1,5 @@
+:root {
+    --headingEffect-color-tertiary: rgba(23, 119, 184, 0.5);
+    --headingEffect-color-secondary: rgb(121, 85, 241);
+    --headingEffect-color-primary: rgb(255, 105, 180);
+}

package/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "target": "ES6",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
+  },
+  "include": [
+    "packages/css/src",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}