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

package/src/content/Content.tsx

@@ -1,171 +0,0 @@
-import React from 'react'
-
-import {
-    Badge,
-    Blockquote,
-    Callout,
-    Code,
-    Details,
-    GuideCard,
-    Heading,
-    Hr,
-    Table,
-    Tabs,
-    Steps,
-
-    IconCode,
-    IconCustomEvent,
-    IconFunnels,
-    IconMetrics,
-    IconSessionReplay,
-    IconAlert,
-    IconBrowser,
-    IconREST,
-    IconGraphQL,
-    IconWebhooks,
-    IconJSBrowser,
-    IconJSNode,
-    IconStorybook,
-    IconReactRouter,
-    IconNextJS,
-    IconAppTemplate
-} from '../writer'
-import {CodeSample} from "../coder";
-
-import {Content as ContentComponent} from "./Content/index";
-import {Subtitle} from "./Subtitle";
-import {Anchor} from "./Anchor";
-
-const EXTERNAL_HREF_REGEX = /https?:\/\//
-
-const Link = ({href = '', className = "", ...props}) => (
-    <Anchor
-        href={href}
-        newWindow={EXTERNAL_HREF_REGEX.test(href)}
-        {...props}
-    />
-)
-
-// TODO: options?
-export default function content() {
-    return {
-        ...stdContent(),
-        ...writerContent(),
-        ...helperContent(),
-        ...iconContent(),
-        ...coderContent(),
-        ...directiveContent(),
-    }
-}
-
-export function stdContent() {
-    return {
-        h1: (props) => <div><Heading id={props.children} {...props}/></div>,
-        h2: props => <div><Heading id={props.children} size={2} {...props} /></div>,
-        h3: props => <div><Heading id={props.children} size={3} {...props} /></div>,
-        h4: props => <div><Heading id={props.children} size={4} {...props} /></div>,
-        h5: props => <div><Heading id={props.children} size={5} {...props} /></div>,
-        h6: props => <div><Heading id={props.children} size={6} {...props} /></div>,
-        p: props => <p {...props} />,
-
-        ul: props => (
-            <ul{...props}>
-                {props.children}
-            </ul>
-        ),
-        ol: props => (
-            <ol{...props}
-            >
-                {props.children}
-            </ol>
-        ),
-        li: props => <li {...props} >
-            {props.children}
-        </li>,
-
-        table: Table,
-        tr: Table.Tr,
-        th: Table.Th,
-        td: Table.Td,
-
-        code: Code,
-        pre: props => {
-            const lang = (props?.children?.props?.className || "").replace("language-", "") // TODO: better solution
-
-            return <CodeSample
-                name={lang}
-                description={props?.children?.props?.meta}
-                codeblocks={[
-                    {
-                        value: props?.children?.props?.children,
-                        lang: lang,
-                        meta: lang,
-                    }
-                ]}
-                size="full" // TODO: in the future configurable
-            />
-        },
-        details: Details,
-        blockquote: Blockquote,
-
-        hr: Hr,
-        a: Link,
-    }
-}
-
-export function writerContent() {
-    return {
-        Callout,
-        Details,
-        GuideCard,
-        Steps,
-        Tabs,
-        Table,
-        Badge,
-    }
-}
-
-export function directiveContent() {
-    return {
-        DirectiveCodeSample: (props) => {
-            return <CodeSample
-                {...props}
-                codeblocks={JSON.parse(props.codeblocks)}
-            />
-        }
-    }
-}
-
-export function helperContent() {
-    return {
-        Content: ContentComponent,
-        Subtitle
-    }
-}
-
-export function iconContent() {
-    return {
-        IconSessionReplay,
-        IconMetrics,
-        IconFunnels,
-        IconCode,
-        IconCustomEvent,
-        IconAlert,
-        IconBrowser,
-        IconREST,
-        IconGraphQL,
-        IconWebhooks,
-        IconJSBrowser,
-        IconJSNode,
-        IconStorybook,
-        IconReactRouter,
-        IconNextJS,
-        IconAppTemplate,
-    }
-}
-
-export function coderContent() {
-    return {
-        CodeSample,
-    }
-}

package/src/content/Subtitle/Subtitle.tsx

@@ -1,21 +0,0 @@
-import React from "react"
-import {css} from "@linaria/core";
-
-const $subitlte = {
-    host: css`
-        margin-top: -18px;
-        font-size: 18px;
-        color: #7051d4;
-        font-weight: 300;
-    `
-}
-
-export interface SubtitleProps {
-    children: React.ReactNode
-}
-
-export function Subtitle({children}: SubtitleProps) {
-    return <div className={$subitlte.host}>
-        {children}
-    </div>
-}

package/src/content/Subtitle/index.tsx

@@ -1,3 +0,0 @@
-export type {SubtitleProps} from "./Subtitle";
-
-export {Subtitle} from "./Subtitle";

package/src/layouts/Layout.styles.tsx

@@ -1,151 +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 = "210px";
-
-// TODO: better solution - design tokens
-export const globals = css`
-    :global() {
-        :root {
-            --xyd-navbar-height: ${globalHeaderHeight};
-            --xyd-global-page-gutter: ${globalPageGutter};
-        }
-    }
-`;
-
-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;
-
-        //border-radius: 8px;
-        //border: 1px solid #ececf1;
-
-        overflow: hidden;
-        transition: opacity .3s ${cubicMove};
-
-        left: ${sidebarWidth};
-    `,
-    scroll: css`
-        //position: absolute;
-        //top: 0;
-        //right: 0;
-        //bottom: 0;
-        //left: 0;
-        //overflow: auto;
-
-        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-top: 20px;
-        max-width: 100%;
-        margin: 0 auto;
-    `,
-    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;
-    `
-}

package/src/layouts/Layout.tsx

@@ -1,121 +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"
-}
-
-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}>
-        <Layout.Header className={`
-            ${props.subheader && $layout.header$$sub}
-            ${hideMainHeader && $layout.header$$hideMain}
-        `}>
-            {props.header}
-        </Layout.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}
-                        `}>
-                            <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>
-}
-
-Layout.Header = function LayoutHeader({className, children}: { className?: string, children: React.ReactNode }) {
-    return <header className={`
-            ${$layout.header}
-            ${className}
-        `}>
-        {children}
-    </header>
-}