@xyd-js/theme-poetry 0.1.0-xyd.6 → 0.1.0-xyd.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyd-js/theme-poetry",
-  "version": "0.1.0-xyd.6",
+  "version": "0.1.0-xyd.9",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -12,6 +12,11 @@
       "import": "./dist/index.js"
     }
   },
+  "files": [
+    "dist",
+    "public",
+    "package.json"
+  ],
   "dependencies": {
     "@linaria/atomic": "^6.2.0",
     "@linaria/core": "^6.2.0",
@@ -22,7 +27,7 @@
     "react-dom": "^18.3.1",
     "react-router": "^7.1.1",
     "@xyd-js/components": "0.1.0-xyd.2",
-    "@xyd-js/framework": "0.1.0-xyd.17"
+    "@xyd-js/framework": "0.1.0-xyd.18"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.26.0",

package/rollup.config.js

@@ -1,77 +0,0 @@
-import {createRequire} from "module";
-
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import typescript from '@rollup/plugin-typescript';
-import dts from 'rollup-plugin-dts';
-import postcss from 'rollup-plugin-postcss';
-import postcssImport from 'postcss-import';
-import wyw from '@wyw-in-js/rollup';
-
-const require = createRequire(import.meta.url);
-const {dependencies} = require('./package.json', {assert: {type: 'json'}});
-
-// unify theme build system
-const external = [
-    ...Object.keys(dependencies),
-    'react',
-    'react-router',
-
-    // TODO: another `@xyd` packages?
-    '@xyd-js/framework/react'
-];
-
-export default [
-    {
-        input: {
-            index: './src/index.ts'
-        },
-        output: [
-            {
-                dir: 'dist',
-                format: 'esm',
-                sourcemap: true,
-                entryFileNames: '[name].js'
-            }
-        ],
-        plugins: [
-            wyw({
-                include: ['**/*.{ts,tsx}'],
-                babelOptions: {
-                    presets: [
-                        '@babel/preset-typescript',
-                        '@babel/preset-react'
-                    ],
-                },
-            }),
-            resolve(),
-            commonjs(),
-            typescript({
-                tsconfig: './tsconfig.json',
-            }),
-            postcss({
-                extensions: ['.css'],
-                plugins: [postcssImport()],
-                extract: true, // Extract CSS into a separate file
-                minimize: true, // Minify the CSS
-            }),
-        ],
-        external
-    },
-    {
-        input: './src/index.ts',
-        output: {
-            file: 'dist/index.d.ts',
-            format: 'es',
-        },
-        plugins: [
-            dts({
-                respectExternal: true, // Ignore unresolved imports
-            }),
-        ],
-        external: [
-            ...external,
-            /\.css$/ // Mark CSS imports as external
-        ],
-    },
-];

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";

package/src/index.css

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

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

package/src/override.css

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

package/src/theme.tsx

@@ -1,78 +0,0 @@
-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'; TODO: FINISH !!!
-
-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

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

@@ -1,37 +0,0 @@
-{
-  "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"
-  ]
-}