@xyd-js/components 0.1.0-xyd.0

package/src/coder/CodeSample/withLocalStored.tsx

@@ -0,0 +1,50 @@
+import React, {useState, useEffect} from "react"
+
+export interface CodeTabsProps {
+    $localStorageKey: string
+    $defaultValue: string
+
+    children: React.ReactNode
+}
+
+// TODO: interface
+export function withLocalStored(Component: any) {
+    return function LocalStored(props: CodeTabsProps) {
+        const [value, setValue] = useState(
+            typeof localStorage !== "undefined"
+                ? localStorage?.getItem(props.$localStorageKey) || props.$defaultValue
+                : props.$defaultValue,
+        )
+
+        useEffect(() => {
+            const handler = (e: StorageEvent) => {
+                if (e.key === props.$localStorageKey) {
+                    setValue(e.newValue || props.$defaultValue)
+                }
+            }
+            window.addEventListener("storage", handler)
+            return () => {
+                window.removeEventListener("storage", handler)
+            }
+        }, [props.$localStorageKey])
+
+        function onValueChange(value: string) {
+            localStorage.setItem(props.$localStorageKey, value)
+            window.dispatchEvent(
+                new StorageEvent("storage", {
+                    key: props.$localStorageKey,
+                    newValue: value,
+                }),
+            )
+        }
+
+        return (
+            <Component
+                onValueChange={onValueChange}
+                value={value}
+            >
+                {props.children}
+            </Component>
+        )
+    }
+}

package/src/coder/README.md

@@ -0,0 +1 @@
+# @xyd-js/components/coder

package/src/coder/index.ts

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

package/src/content/Anchor/Anchor.tsx

@@ -0,0 +1,63 @@
+import React, {forwardRef} from 'react'
+import type {ComponentProps, ReactElement} from 'react'
+
+import {css} from "@linaria/core";
+
+const $anchor = {
+    host: css`
+        color: #7051d4;
+    `,
+};
+
+export type AnchorProps = Omit<ComponentProps<'a'>, 'ref'> & {
+    newWindow?: boolean
+}
+
+// TODO: where react-router?
+
+export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function (
+    {href = '', children, newWindow},
+    // ref is used in <NavbarMenu />
+    forwardedRef
+): ReactElement {
+    if (newWindow) {
+        return (
+            <a
+                ref={forwardedRef}
+                to={href}
+                href={href}
+                target="_blank"
+                rel="noreferrer"
+                className={$anchor.host}
+            >
+                {children}
+            </a>
+        )
+    }
+
+    if (!href) {
+        return (
+            <a
+                ref={forwardedRef}
+                to={href}
+                href={href}
+                className={$anchor.host}
+            >
+                {children}
+            </a>
+        )
+    }
+
+    return (
+        <a
+            ref={forwardedRef}
+            to={href}
+            href={href}
+            className={$anchor.host}
+        >
+            {children}
+        </a>
+    )
+})
+
+Anchor.displayName = 'Anchor'

package/src/content/Anchor/index.tsx

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

package/src/content/Content/Content.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import {css} from "@linaria/core";
+
+const $content = {
+    host: css`
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+    `
+}
+
+export interface ContentProps {
+    children: React.ReactNode
+}
+
+export function Content({children}: ContentProps) {
+    return <div className={$content.host}>
+        {children}
+    </div>
+}

package/src/content/Content/index.tsx

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

package/src/content/Content.tsx

@@ -0,0 +1,137 @@
+import React from 'react'
+
+import {
+    Badge,
+    Blockquote,
+    Callout,
+    Code,
+    Details,
+    GuideCard,
+    Heading,
+    Hr,
+    Table,
+    Tabs,
+    Steps,
+
+    IconCode,
+    IconCustomEvent,
+    IconFunnels,
+    IconMetrics,
+    IconSessionReplay,
+} 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(),
+    }
+}
+
+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 helperContent() {
+    return {
+        Content: ContentComponent,
+        Subtitle
+    }
+}
+
+export function iconContent() {
+    return {
+        IconSessionReplay,
+        IconMetrics,
+        IconFunnels,
+        IconCode,
+        IconCustomEvent,
+    }
+}
+
+export function coderContent() {
+    return {
+        CodeSample,
+    }
+}

package/src/content/Subtitle/Subtitle.tsx

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

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

package/src/content/index.ts

@@ -0,0 +1,3 @@
+export * from "./Content"
+
+export {default as MDX} from "./Content"

package/src/layouts/Layout.styles.tsx

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

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

package/src/layouts/index.ts

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

package/src/pages/HomePage/HomePage.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import {css} from "@linaria/core";
+
+import {
+    GuideCard,
+} from "../../writer"
+import {Button, CTABanner} from "../../brand"
+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
+
+    children?: React.ReactNode
+    hero?: IHomePageHero
+    footer?: React.ReactNode
+    features?: IHomePageFeature[]
+}
+
+export function HomePage(props: HomePageProps) {
+    return <HomeView
+        header={props.header}
+        body={<HomeView.Body>
+            <$Hero {...props}/>
+
+            {props.hero?.actions && <$Cards {...props}/>}
+
+            {props.children}
+        </HomeView.Body>}
+        footer={props.footer}
+    />
+}
+
+function $Hero(props: HomePageProps) {
+    return <CTABanner>
+        <CTABanner.Heading
+            title={props.hero?.text || ""}
+            headingEffect={props.hero?.textEffect}
+            subtitle={props.hero?.subtitle}
+        />
+        {props?.hero?.actions && <CTABanner.ButtonGroup>
+            {props?.hero?.actions.map((action, index) => (
+                <a href={action.href}>
+                    <Button key={action.text + index} kind={action.kind}>
+                        {action.text}
+                    </Button>
+                </a>
+            ))}
+        </CTABanner.ButtonGroup>}
+    </CTABanner>
+}
+
+function $Cards(props: HomePageProps) {
+    // TODO: cards gridTemplateColumns based on elements
+    return <div
+        className={`
+            ${$cards.host}
+            xyd_page-comp-homepage-cards
+        `}>
+        {props.features?.map((feat, index) => (
+            <GuideCard
+                key={feat.title + index}
+                href={feat.href || ""}
+                title={feat.title}
+                icon={feat.icon}
+                kind="secondary"
+                size="md"
+            >
+                {feat.description}
+            </GuideCard>
+        ))}
+    </div>
+}
+
+

package/src/pages/HomePage/index.ts

@@ -0,0 +1,5 @@
+export type * from "./types"
+
+export type {HomePageProps} from "./HomePage"
+
+export {HomePage} from "./HomePage"