@xyd-js/components 0.1.0-xyd.0

package/src/writer/GuideCard/GuideCard.styles.tsx

@@ -0,0 +1,115 @@
+import {css} from "@linaria/core";
+
+export const $guide = {
+    host: css`
+    `,
+    host$$secondary: css`
+        //flex-grow: 1;
+        //width: 100%;
+        display: flex;
+        position: relative;
+        overflow: hidden;
+        border: .5px solid #ececf1;
+        background: linear-gradient(238deg, rgba(247, 247, 248, .5) 0%, rgba(247, 247, 248, 1) 100%);
+        border-radius: 8px;
+        padding: 16px 20px 20px;
+        z-index: 0;
+        transition: box-shadow .2s ease-in-out, background-image .2s ease;
+
+        &:hover {
+            background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);
+        }
+    `,
+    host$$secondary$$md: css`
+        padding: 21px 25px 25px;
+    `,
+    link: css`
+        width: 100%;
+        height: 100%;
+    `,
+    item: css`
+        border-radius: 8px;
+        display: flex;
+
+        align-items: flex-start;
+        cursor: pointer;
+        transition: opacity .15s;
+
+        &:hover {
+            [data-pointer="true"] {
+                opacity: 1;
+                transform: translate(0);
+            }
+        }
+    `,
+    item$$secondary: css`
+        width: 100%;
+        height: 100%;
+    `,
+    icon: css`
+        line-height: 0px;
+        font-size: 24px;
+        border-radius: 8px;
+        width: 48px;
+        height: 48px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #353740;
+        border: 1px solid #ececf1;
+        background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);
+        transition: background .2s ease;
+        box-sizing: border-box;
+        flex-shrink: 0;
+    `,
+    right: css`
+        padding-left: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    `,
+    title: css`
+        display: flex;
+        color: #202123;
+        font-weight: 400;
+        align-items: center;
+        transition: color .15s;
+    `,
+    titleBody: css`
+        font-size: 16px;
+        line-height: 20px;
+    `,
+    titleBody$$md: css`
+        font-size: 18px;
+    `,
+    body: css`
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+
+        color: #6e6e80;
+        white-space: normal;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    `,
+    body$$md: css`
+        font-size: 16px;
+    `,
+    pointer: css`
+        opacity: 0;
+        transform: translate(-4px);
+        display: flex;
+        justify-content: center;
+        transition: opacity .15s ease-in-out, transform .15s ease-in-out;
+    `
+}
+
+
+export const $list = {
+    host: css`
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        justify-content: center;
+        gap: 30px;
+    `
+}

package/src/writer/GuideCard/GuideCard.tsx

@@ -0,0 +1,81 @@
+import React from "react"
+
+import {$guide, $list} from "./GuideCard.styles";
+
+export interface GuideCardProps {
+    children: React.ReactNode;
+    href: string
+    title: string;
+    icon?: React.ReactNode;
+    kind?: "secondary"
+    size?: "sm" | "md"
+}
+
+export function GuideCard({
+                              children,
+                              href,
+                              icon,
+                              title,
+                              kind,
+                              size,
+
+                          }: GuideCardProps) {
+    return <div className={`
+        ${$guide.host}
+        ${kind === "secondary" && $guide.host$$secondary}
+        ${kind === "secondary" && size == "md" && $guide.host$$secondary$$md}
+    `}>
+        <a className={$guide.link} href={href}>
+            <div className={`
+                ${$guide.item}
+                ${kind === "secondary" && $guide.item$$secondary}
+            `}>
+                {icon && <div className={$guide.icon}>
+                    {icon}
+                </div>}
+                <div className={$guide.right}>
+                    <div className={$guide.title}>
+                        <div className={`
+                            ${$guide.title} 
+                            ${$guide.titleBody}
+                            ${size == "md" && $guide.titleBody$$md}
+                        `}>
+                            {title}
+                        </div>
+                        <$Pointer/>
+                    </div>
+                    <div className={`
+                        ${$guide.body}
+                        ${size == "md" && $guide.body$$md}
+                    `}>
+                        {children}
+                    </div>
+                </div>
+            </div>
+        </a>
+    </div>
+}
+
+GuideCard.List = function GuideCardList({children}: { children: React.ReactNode }) {
+    return <div className={$list.host}>
+        {children}
+    </div>
+}
+
+function $Pointer() {
+    return <div data-pointer="true" className={$guide.pointer}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={24}
+            height={24}
+            fill="currentColor"
+            viewBox="0 0 24 24"
+        >
+            <path
+                fillRule="evenodd"
+                d="M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z"
+                clipRule="evenodd"
+            />
+        </svg>
+    </div>
+}

package/src/writer/GuideCard/index.ts

@@ -0,0 +1 @@
+export {GuideCard} from "./GuideCard";

package/src/writer/Heading/Heading.styles.tsx

@@ -0,0 +1,73 @@
+import {css} from "@linaria/core";
+
+export const $heading = {
+    host: css`
+        line-height: 40px;
+        font-weight: 300;
+        color: #202123;
+
+        position: relative;
+        display: inline-block;
+        margin: 0;
+        padding: 0 24px 0 0;
+        scroll-margin-top: 30px;
+        cursor: pointer;
+
+        &:hover {
+            svg {
+                opacity: 1;
+            }
+        }
+    `,
+    h1: css`
+        font-size: 36px;
+
+        code {
+            font-size: 30px;
+        }
+    `,
+    h2: css`
+        font-size: 30px;
+
+        code {
+            font-size: 24px;
+        }
+    `,
+    h3: css`
+        font-size: 26px;
+
+        code {
+            font-size: 22px;
+        }
+    `,
+    h4: css`
+        font-size: 22px;
+
+        code {
+            font-size: 18px;
+        }
+    `,
+    h5: css`
+        font-size: 18px;
+
+        code {
+            font-size: 14px;
+        }
+    `,
+    h6: css`
+        font-size: 16px;
+
+        code {
+            font-size: 12px;
+        }
+    `,
+    link: css`
+        position: absolute;
+        top: 50%;
+        right: 0;
+        margin-top: -6px;
+        opacity: 0;
+        color: #7051d4;
+        transition: opacity .15s ease;
+    `
+}

package/src/writer/Heading/Heading.tsx

@@ -0,0 +1,53 @@
+import React, {useRef} from "react"
+
+import {$heading} from "./Heading.styles";
+
+export interface HeadingProps {
+    children: React.ReactNode
+    size: 1 | 2 | 3 | 4 | 5 | 6
+    as?: "div" | "span"
+    id?: string
+    onClick?: () => void
+}
+
+export function Heading({children, size = 1, as, id, onClick}: HeadingProps) {
+    let HeadingComponent = as ? as : `h${size}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+
+    const obRef = useRef<HTMLAnchorElement>(null)
+
+    return <HeadingComponent
+        className={`
+            ${$heading.host}
+            ${size === 1 && $heading.h1}
+            ${size === 2 && $heading.h2}
+            ${size === 3 && $heading.h3}
+            ${size === 4 && $heading.h4}
+            ${size === 5 && $heading.h5}
+            ${size === 6 && $heading.h6}
+            xyd_comp-comp-heading
+        `}
+        onClick={onClick}
+    >
+        {children}
+
+        {id && <$Anchor/>}
+    </HeadingComponent>
+}
+
+function $Anchor() {
+    return <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="currentColor"
+        viewBox="0 0 24 24"
+        className={$heading.link}
+        role="presentation"
+    >
+        <path
+            fillRule="evenodd"
+            d="M18.293 5.707a4.657 4.657 0 0 0-6.586 0l-1 1a1 1 0 1 1-1.414-1.414l1-1a6.657 6.657 0 1 1 9.414 9.414l-1 1a1 1 0 0 1-1.414-1.414l1-1a4.657 4.657 0 0 0 0-6.586Zm-2.586 2.586a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414l6-6a1 1 0 0 1 1.414 0Zm-9 1a1 1 0 0 1 0 1.414l-1 1a4.657 4.657 0 0 0 6.586 6.586l1-1a1 1 0 0 1 1.414 1.414l-1 1a6.657 6.657 0 1 1-9.414-9.414l1-1a1 1 0 0 1 1.414 0Z"
+            clipRule="evenodd"
+        />
+    </svg>
+}

package/src/writer/Heading/index.ts

@@ -0,0 +1,7 @@
+export {
+    Heading
+} from "./Heading";
+
+export type {
+    HeadingProps
+} from "./Heading"

package/src/writer/Hr/Hr.styles.tsx

@@ -0,0 +1,7 @@
+import {css} from "@linaria/core";
+
+export const $hr = {
+    host: css`
+        border-color: rgb(229 229 229 / 0.7);
+    `
+}

package/src/writer/Hr/Hr.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+
+import {$hr} from "./Hr.styles";
+
+export interface HrProps {
+    children: React.ReactNode;
+}
+
+export function Hr({children}: HrProps) {
+    return <hr className={$hr.host}>
+        {children}
+    </hr>
+}

package/src/writer/Hr/index.ts

@@ -0,0 +1,3 @@
+export {Hr} from "./Hr"
+
+export type {HrProps} from "./Hr"

package/src/writer/Icon/index.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+
+// TODO: better icon system
+
+export function IconSessionReplay() {
+    return <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M10 8L16 12L10 16V8Z"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+}
+
+export function IconMetrics() {
+    return <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M21 7L13.2273 14.9167L9.13636 10.75L3 17"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M16 7H21V12"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+}
+
+export function IconFunnels() {
+    return <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M12 20L12 10"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M6 20L6 4"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M18 20L18 16"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+}
+
+export function IconCode() {
+    return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24}>
+        <path
+            fillRule="evenodd"
+            d="M14.447 7.106a1 1 0 0 1 .447 1.341l-4 8a1 1 0 1 1-1.788-.894l4-8a1 1 0 0 1 1.341-.447ZM6.6 7.2a1 1 0 0 1 .2 1.4L4.25 12l2.55 3.4a1 1 0 0 1-1.6 1.2l-3-4a1 1 0 0 1 0-1.2l3-4a1 1 0 0 1 1.4-.2Zm10.8 0a1 1 0 0 1 1.4.2l3 4a1 1 0 0 1 0 1.2l-3 4a1 1 0 0 1-1.6-1.2l2.55-3.4-2.55-3.4a1 1 0 0 1 .2-1.4Z"
+            clipRule="evenodd"
+        />
+    </svg>
+}
+
+export function IconCustomEvent() {
+    return <svg
+        width={24}
+        height={24}
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M3.66179 8.03142L6.54954 1.79004C6.63136 1.6132 6.80847 1.5 7.00333 1.5H10.7236C11.0872 1.5 11.3292 1.87581 11.1788 2.20685L9.18871 6.58625C9.03827 6.9173 9.28029 7.2931 9.64391 7.2931L11.589 7.2931C12.0146 7.2931 12.2456 7.79098 11.9708 8.11596L6.77738 14.2573C6.4593 14.6334 5.84636 14.3715 5.89839 13.8816L6.3857 9.2942C6.41708 8.99882 6.18554 8.74138 5.8885 8.74138H4.11558C3.75048 8.74138 3.50848 8.36278 3.66179 8.03142Z"
+            stroke="black"
+            strokeWidth={1.2}
+            strokeLinejoin="round"
+        />
+    </svg>
+}

package/src/writer/NavLinks/NavLinks.styles.ts

@@ -0,0 +1,32 @@
+import {css} from "@linaria/core";
+
+export const $navLinks = {
+    host: css`
+        display: flex;
+        padding-top: 2rem;
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+        justify-content: space-between;
+        align-items: center;
+        border-top-width: 1px;
+    `,
+    link: css`
+        display: flex;
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+        gap: 0.25rem;
+        align-items: center;
+        font-size: 1rem;
+        line-height: 1.5rem;
+        font-weight: 500;
+        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 300ms;
+        max-width: 50%;
+    `,
+    icon: css`
+        display: inline;
+        height: 1.25rem;
+        flex-shrink: 0;
+    `,
+};

package/src/writer/NavLinks/NavLinks.tsx

@@ -0,0 +1,48 @@
+import React from "react"
+import {ArrowLeftIcon, ArrowRightIcon} from '@radix-ui/react-icons'
+
+import {$navLinks} from "./NavLinks.styles";
+
+function Anchor({children, ...rest}) {
+    return <a {...rest}>
+        {children}
+    </a>
+}
+
+export interface NavLinksProps {
+    prev?: {
+        title: string
+        href: string
+    }
+    next?: {
+        title: string
+        href: string
+    }
+}
+
+export function NavLinks(props: NavLinksProps) {
+    return (
+        <div className={$navLinks.host}>
+            {props.prev ? (
+                <Anchor
+                    href={props.prev.href}
+                    title={props.prev.title}
+                    className={$navLinks.link}
+                >
+                    <ArrowLeftIcon className={$navLinks.icon}/>
+                    {props.prev.title}
+                </Anchor>
+            ) : <div/>}
+            {props.next && (
+                <Anchor
+                    href={props.next.href}
+                    title={props.next.title}
+                    className={$navLinks.link}
+                >
+                    {props.next.title}
+                    <ArrowRightIcon className={$navLinks.icon}/>
+                </Anchor>
+            )}
+        </div>
+    )
+}

package/src/writer/NavLinks/index.ts

@@ -0,0 +1,7 @@
+export {
+    NavLinks
+} from "./NavLinks"
+
+export type {
+    NavLinksProps,
+} from "./NavLinks";

package/src/writer/Pre/Pre.styles.tsx

@@ -0,0 +1,13 @@
+import {css} from "@linaria/core";
+
+export const $pre = {
+    host: css`
+        margin-top: 0;
+        border-radius: 6px;
+        padding: 16px;
+        border: 0;
+
+        background-color: rgb(246, 248, 250);
+        overflow: auto;
+    `
+}

package/src/writer/Pre/Pre.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+
+import {$pre} from "./Pre.styles"
+
+export interface PreProps {
+    children: React.ReactNode
+}
+
+export function Pre({children}: PreProps) {
+    return <pre className={$pre.host}>
+        {children}
+    </pre>
+}

package/src/writer/Pre/index.ts

@@ -0,0 +1,3 @@
+export {Pre} from "./Pre"
+
+export type {PreProps} from "./Pre"

package/src/writer/README.md

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

package/src/writer/Steps/Steps.styles.tsx

@@ -0,0 +1,36 @@
+import {css} from "@linaria/core";
+
+export const $steps = {
+    host: css`
+        padding-left: 0;
+        list-style: none;
+        counter-reset: ordered-listitem;
+
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    `,
+    li: css`
+        padding-left: 32px;
+        position: relative;
+        line-height: 1.5;
+
+        &::after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            counter-increment: ordered-listitem;
+            content: counter(ordered-listitem);
+
+            background: #ececf1;
+            color: #353740;
+            font-size: 12px;
+            line-height: 24px;
+            font-weight: 500;
+            text-align: center;
+            height: 24px;
+            width: 24px;
+            border-radius: 12px;
+        }
+    `,
+}

package/src/writer/Steps/Steps.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+
+import {$steps} from "./Steps.styles";
+
+export interface StepsProps {
+    children: React.ReactNode;
+}
+
+export function Steps({children}: StepsProps) {
+    return <ol className={$steps.host}>
+        {children}
+    </ol>
+
+}
+
+export interface StepsItemProps {
+    children: React.ReactNode;
+}
+
+Steps.Item = function StepsItem({children}: StepsItemProps) {
+    return <li className={$steps.li}>
+        {children}
+    </li>
+}

package/src/writer/Steps/index.ts

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