@xyd-js/components 0.1.0-build.168

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

@@ -0,0 +1,129 @@
+import { css } from "@linaria/core";
+
+export const globals = css`
+    :global() {
+        html[data-color-primary="true"] {
+            xyd-guidecard [part="icon"] svg {
+                fill: var(--color-primary) !important;  // TODO: fix important
+                color: var(--color-primary) !important; // TODO: fix important
+            }
+        }
+    }
+`
+
+export const GuideHost = css`
+    @layer defaults {
+        display: block;
+        height: auto;
+        
+        &[data-kind="secondary"] {
+            display: flex;
+            position: relative;
+            overflow: hidden;
+            border: 1px solid var(--xyd-guidecard-border-color--secondary);
+            background: var(--xyd-guidecard-bgcolor--secondary);
+            border-radius: 8px;
+            padding: 24px;
+            z-index: 0;
+            transition: box-shadow .2s ease-in-out, background-image .2s ease;
+            /* height: auto; */
+            height: 100%;
+
+            &:hover {
+                background: var(--xyd-guidecard-bgcolor--secondary-hover);
+            }
+
+            &[data-size="md"] {
+                padding: 21px 25px 25px;
+            }
+        }
+
+        [part="link"] {
+            width: 100%;
+            height: 100%;
+        }
+
+        [part="item"] {
+            border-radius: 8px;
+            display: flex;
+            align-items: flex-start;
+
+            cursor: pointer;
+            transition: opacity .15s;
+
+            &:hover {
+                [part="pointer"] {
+                    opacity: 1;
+                    transform: translate(0);
+                }
+            }
+        }
+        &[data-kind="secondary"] [part="item"] {
+            width: 100%;
+            height: 100%;
+        }
+
+        [part="icon"] {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: var(--xyd-guidecard-icon-color);
+            transition: background .2s ease;
+            box-sizing: border-box;
+            flex-shrink: 0;
+
+            svg {
+                width: 24px;
+                height: 24px;
+            }
+        }
+
+        [part="right"] {
+            padding-left: 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        [part="title"] {
+            display: flex;
+            color: var(--xyd-guidecard-title-color);
+            align-items: center;
+            font-weight: var(--xyd-font-weight-semibold);
+            transition: color .15s;
+        }
+
+        [part="title-body"] {
+        }
+        &[data-size="md"] [part="title-body"] {
+        }
+
+        [part="body"] {
+            font-weight: var(--xyd-font-weight-normal);
+
+            color: var(--xyd-guidecard-color);
+            white-space: normal;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        &[data-size="md"] [part="body"] {
+        }
+
+        [part="pointer"] {
+            opacity: 0;
+            transform: translate(-4px);
+            display: flex;
+            justify-content: center;
+            transition: opacity .15s ease-in-out, transform .15s ease-in-out;
+        }
+    }
+`;
+
+export const GuideListHost = css`
+    @layer defaults {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        justify-content: center;
+        gap: 24px;
+    }
+`;

package/src/writer/GuideCard/GuideCard.tsx

@@ -0,0 +1,123 @@
+import React from "react"
+
+import * as cn from "./GuideCard.styles";
+
+import { Icon } from "../Icon"
+
+/**
+ * Props for the GuideCard component
+ */
+export interface GuideCardProps {
+    /** Content to be displayed in the card body */
+    children: React.ReactNode;
+
+    /** URL the card links to */
+    href: string
+
+    /** Title displayed at the top of the card */
+    title?: string;
+
+    /** Optional icon displayed to the left of the content */
+    icon?: React.ReactNode | string;
+
+    /** Visual style variant of the card */
+    kind?: "secondary"
+
+    /** Size variant of the card */
+    size?: "sm" | "md"
+
+    /** Additional CSS class names to apply to the card */
+    className?: string
+
+    /** Additional props to pass to the link element */
+    as?: React.ElementType
+}
+
+/**
+ * A card component that displays content with a title and optional icon.
+ * The entire card is clickable and links to the specified URL.
+ * 
+ * @category Component
+ */
+export function GuideCard({
+    children,
+    href,
+    icon,
+    title,
+    kind,
+    size,
+    className,
+    as,
+}: GuideCardProps) {
+    const Link = as || $Link
+
+    const iconElement = icon && typeof icon === 'string' ? <Icon name={icon} /> : icon
+
+    return <xyd-guidecard
+        className={`${cn.GuideHost} ${className || ""}`}
+        data-kind={kind}
+        data-size={size}
+    >
+        <Link part="link" href={href}>
+            <div part="item">
+                {iconElement && <div part="icon">
+                    {iconElement}
+                </div>}
+                <div part="right">
+                    {title && <GuideCard.Title>{title}</GuideCard.Title>}
+                    <div part="body">
+                        {children}
+                    </div>
+                </div>
+            </div>
+        </Link>
+    </xyd-guidecard>
+}
+GuideCard.Title = function GuideCardTitle({ children }: { children: React.ReactNode }) {
+    return <div part="title">
+        <div part="title-body">
+            {children}
+        </div>
+        <$Pointer />
+    </div>
+}
+
+/**
+ * A container component for grouping multiple GuideCard components.
+ * Provides consistent spacing and layout for a list of guide cards.
+ */
+GuideCard.List = function GuideCardList({ children }: { children: React.ReactNode }) {
+    return <xyd-guidecard-list className={cn.GuideListHost}>
+        {children}
+    </xyd-guidecard-list>
+}
+
+/**
+ * Internal component that renders the arrow pointer icon.
+ */
+function $Pointer() {
+    return <div part="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>
+}
+
+function $Link({ href, children, ...rest }) {
+    return <a
+        href={href}
+        {...rest}
+    >
+        {children}
+    </a>
+}

package/src/writer/GuideCard/index.ts

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

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

@@ -0,0 +1,93 @@
+import { css } from "@linaria/core";
+
+export const HeadingHost = css`
+    @layer defaults {
+        color: var(--xyd-heading-color);
+        line-height: var(--xyd-line-height-xlarge);
+        font-weight: var(--xyd-font-weight-semibold);
+
+        position: relative;
+        display: table;
+        margin: 0;
+        padding: 0 24px 0 0;
+        scroll-margin-top: 30px;
+        cursor: default;
+
+        &[id] {
+            cursor: pointer;
+        }
+        &[data-noanchor="true"] {
+            cursor: default;
+        }
+
+        &[data-has-label="true"] {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+
+            xyd-badge {
+                font-size: var(--xyd-font-size-xsmall);
+                line-height: var(--xyd-line-height-xsmall);
+                letter-spacing: 2px;
+            }
+        }
+
+        &:hover {
+            svg {
+                opacity: 1;
+            }
+        }
+
+        &[data-kind="muted"] {
+            color: var(--xyd-heading-color--muted);
+            cursor: default;
+            font-weight: var(--xyd-font-weight-medium);
+        }
+
+        &[data-size="1"] {
+            font-size: var(--xyd-font-size-2xl);
+            line-height: var(--xyd-line-height-2xl);
+        }
+
+        &[data-size="2"] {
+            font-size: var(--xyd-font-size-xxlarge);
+            line-height: var(--xyd-line-height-xxlarge);
+        }
+
+        &[data-size="3"] {
+            font-size: var(--xyd-font-size-xlarge);
+            line-height: var(--xyd-line-height-xlarge);
+        }
+
+        &[data-size="4"] {
+            font-size: var(--xyd-font-size-large);
+            line-height: var(--xyd-line-height-large);
+        }
+
+        &[data-size="5"] {
+            font-size: var(--xyd-font-size-medium);
+            line-height: var(--xyd-line-height-medium);
+        }
+
+        &[data-size="6"] {
+            font-size: var(--xyd-font-size-small);
+            line-height: var(--xyd-line-height-small);
+        }
+
+        [part="icon"] {
+            position: absolute;
+            top: 50%;
+            right: 0;
+            margin-top: -6px;
+            opacity: 0;
+            color: var(--xyd-heading-icon-color);
+            transition: opacity .15s ease;
+        }
+        &[data-active="true"] {
+            [part="icon"] {
+                opacity: 1;
+            }
+        }
+    }
+`;
+

package/src/writer/Heading/Heading.tsx

@@ -0,0 +1,123 @@
+import React, { } from "react"
+
+import * as cn from "./Heading.styles";
+import { Badge } from "../../../writer";
+
+/**
+ * Props for the Heading component
+ * @interface HeadingProps
+ */
+export interface HeadingProps {
+    /** Content to be rendered inside the heading */
+    children: React.ReactNode
+
+    /** The size of the heading (1-6, corresponding to h1-h6) */
+    size: 1 | 2 | 3 | 4 | 5 | 6
+
+    /** Optional HTML element to render as (div or span) */
+    as?: "div" | "span"
+
+    /** Optional ID for the heading element */
+    id?: string
+
+    /** Optional visual style variant */
+    kind?: "muted"
+
+    /** Optional click handler */
+    onClick?: () => void
+
+    /** Optional additional CSS class name */
+    className?: string
+
+    /** Optional active state */
+    active?: boolean
+
+    /** Optional label for the heading */
+    label?: string
+
+    /** Optional subtitle for the heading */
+    subtitle?: string
+
+    /** Optional to hide the anchor icon */
+    noanchor?: boolean
+
+    /** Optional ref for the heading element */
+    ref?: React.RefObject<HTMLHeadingElement>
+
+    style?: React.CSSProperties
+}
+
+/**
+ * A flexible heading component that can render as any heading level (h1-h6) or as a div/span
+ * 
+ * @category Component
+ */
+export function Heading(props: HeadingProps) {
+    const {
+        children,
+        size = 1,
+        as,
+        id,
+        onClick,
+        className,
+        kind,
+        active,
+        label,
+        subtitle,
+        noanchor,
+        ref,
+        style,
+    } = props
+    let HeadingComponent = as ? as : `h${size}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+
+    return <>
+        <HeadingComponent
+            style={style || undefined}
+            className={` ${cn.HeadingHost}  ${className || ''}`}
+            data-size={size}
+            data-kind={kind}
+            data-has-label={String(label ? "true" : "false")}
+            data-noanchor={String(noanchor || "false")}
+            data-active={String(active || "false")}
+            onClick={noanchor ? undefined : onClick}
+            id={id}
+            ref={ref}
+        >
+            {children}
+
+            {label && <Badge size="sm">{label}</Badge>}
+
+            {id && !noanchor && <$Anchor />}
+        </HeadingComponent>
+
+        {
+            subtitle ? <Heading
+                {...props}
+                size={4}
+                kind="muted"
+                subtitle={undefined} 
+                label={undefined}
+            >
+                {subtitle}
+            </Heading> : null
+        }
+    </>
+}
+
+function $Anchor() {
+    return <svg
+        part="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="currentColor"
+        viewBox="0 0 24 24"
+        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 HrHost = css`
+    @layer defaults {
+        border: 0.5px solid var(--xyd-hr-border-color);
+    }
+`;

package/src/writer/Hr/Hr.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+
+import * as cn from "./Hr.styles";
+
+export interface HrProps {
+}
+
+export function Hr() {
+    return <hr part="hr" className={cn.HrHost}/>
+}

package/src/writer/Hr/index.ts

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

package/src/writer/Icon/Icon.styles.tsx

@@ -0,0 +1,15 @@
+import { css } from "@linaria/core";
+
+export const ExternalArrowHost = css`
+    @layer defaults {
+        --external-arrow2-size: 7px;
+
+        width: var(--external-arrow2-size);
+        height: var(--external-arrow2-size);
+        margin-top: calc(var(--external-arrow2-size) * -1);
+        margin-left: calc(var(--external-arrow2-size) / 2);
+
+        fill: currentColor;
+        color: currentColor;
+    }
+`;

package/src/writer/Icon/Icon.tsx

@@ -0,0 +1,99 @@
+import React, {createContext, ReactElement, SVGProps, use} from "react";
+import parse, { HTMLReactParserOptions, Element } from "html-react-parser";
+
+import * as cn from "./Icon.styles"
+// TODO: html-react-parser is not the best choice, but it works for now
+
+export const IconProvider = createContext({
+    iconSet: {}
+})
+
+interface IconProps {
+    name: string;
+    size?: number;
+    color?: string;
+}
+
+export function Icon(props: IconProps): ReactElement | null {
+    const {name, size = 24, color} = props
+
+    const iconProvider = use(IconProvider)
+    const iconSet = iconProvider?.iconSet
+
+    if (!iconSet) {
+        return null
+    }
+
+    const ico = iconSet[name]
+    if (!ico || !ico.svg) {
+        return null
+    }
+
+    const icon = parseIcon(ico.svg) as ReactElement<SVGProps<SVGSVGElement>>
+
+    if (React.isValidElement(icon)) {
+        return React.cloneElement(icon, {
+            width: size,
+            height: size,
+            color: color || icon.props.color || 'currentColor',
+            fill: color || icon.props.fill || 'currentColor',
+            style: {
+                width: size,
+                height: size,
+                color: color || icon.props.color || 'currentColor',
+                fill: color || icon.props.color || 'currentColor',
+            }
+        })
+    }
+
+    return null
+}
+
+Icon.ExternalArrow = function ExternalArrow() {
+    return <svg
+        className={cn.ExternalArrowHost}
+        aria-hidden="true"
+        viewBox="0 0 6 6"
+    >
+        <path
+            d="M1.25215 5.54731L0.622742 4.9179L3.78169 1.75597H1.3834L1.38936 0.890915H5.27615V4.78069H4.40513L4.41109 2.38538L1.25215 5.54731Z"
+            fill="var(--accents-3)"
+        />
+    </svg>
+}
+
+
+function parseIcon(svg: string) {
+    const options: HTMLReactParserOptions = {
+      htmlparser2: { xmlMode: true }, // preserves case of *attributes*, still lowercase tags
+      replace(domNode) {
+        if (domNode.type === "tag") {
+          const el = domNode as Element;
+  
+          // ✅ Fix tag name casing
+          if (el.name === "lineargradient") el.name = "linearGradient";
+          if (el.name === "radialgradient") el.name = "radialGradient";
+          if (el.name === "clippath") el.name = "clipPath";
+          if (el.name === "pattern") el.name = "pattern"; // example: stays same
+  
+          // ✅ Fix attribute casing for React
+          const attrs = el.attribs || {};
+          if ("stop-color" in attrs) {
+            attrs.stopColor = attrs["stop-color"];
+            delete attrs["stop-color"];
+          }
+          if ("fill-rule" in attrs) {
+            attrs.fillRule = attrs["fill-rule"];
+            delete attrs["fill-rule"];
+          }
+          if ("clip-rule" in attrs) {
+            attrs.clipRule = attrs["clip-rule"];
+            delete attrs["clip-rule"];
+          }
+        }
+        return domNode;
+      },
+    };
+  
+    return parse(svg, options);
+  }

package/src/writer/Icon/index.ts

@@ -0,0 +1 @@
+export * from "./Icon"