@xyd-js/components 0.1.0-xyd.4 → 0.1.0-xyd.52

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

@@ -1,73 +1,93 @@
-import {css} from "@linaria/core";
+import { css } from "@linaria/core";
 
-export const $heading = {
-    host: css`
-        line-height: 40px;
-        font-weight: 300;
-        color: #202123;
+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: inline-block;
+        display: table;
         margin: 0;
         padding: 0 24px 0 0;
         scroll-margin-top: 30px;
-        cursor: pointer;
+        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;
             }
         }
-    `,
-    h1: css`
-        font-size: 36px;
 
-        code {
-            font-size: 30px;
+        &[data-kind="muted"] {
+            color: var(--xyd-heading-color--muted);
+            cursor: default;
+            font-weight: var(--xyd-font-weight-medium);
         }
-    `,
-    h2: css`
-        font-size: 30px;
 
-        code {
-            font-size: 24px;
+        &[data-size="1"] {
+            font-size: var(--xyd-font-size-2xl);
+            line-height: var(--xyd-line-height-2xl);
         }
-    `,
-    h3: css`
-        font-size: 26px;
 
-        code {
-            font-size: 22px;
+        &[data-size="2"] {
+            font-size: var(--xyd-font-size-xxlarge);
+            line-height: var(--xyd-line-height-xxlarge);
         }
-    `,
-    h4: css`
-        font-size: 22px;
 
-        code {
-            font-size: 18px;
+        &[data-size="3"] {
+            font-size: var(--xyd-font-size-xlarge);
+            line-height: var(--xyd-line-height-xlarge);
         }
-    `,
-    h5: css`
-        font-size: 18px;
 
-        code {
-            font-size: 14px;
+        &[data-size="4"] {
+            font-size: var(--xyd-font-size-large);
+            line-height: var(--xyd-line-height-large);
         }
-    `,
-    h6: css`
-        font-size: 16px;
 
-        code {
-            font-size: 12px;
+        &[data-size="5"] {
+            font-size: var(--xyd-font-size-medium);
+            line-height: var(--xyd-line-height-medium);
         }
-    `,
-    link: css`
-        position: absolute;
-        top: 50%;
-        right: 0;
-        margin-top: -6px;
-        opacity: 0;
-        color: #7051d4;
-        transition: opacity .15s ease;
-    `
-}
+
+        &[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

@@ -1,47 +1,117 @@
-import React, {useRef} from "react"
+import React, { } from "react"
 
-import {$heading} from "./Heading.styles";
+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
 }
 
-export function Heading({children, size = 1, as, id, onClick}: HeadingProps) {
+/**
+ * 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"
 
-    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}
+    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>
 
-        {id && <$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"
-        className={$heading.link}
         role="presentation"
     >
         <path

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

@@ -1,7 +1,7 @@
 import {css} from "@linaria/core";
 
-export const $hr = {
-    host: css`
-        border-color: rgb(229 229 229 / 0.7);
-    `
-}
+export const HrHost = css`
+    @layer defaults {
+        border: 0.5px solid var(--xyd-hr-border-color);
+    }
+`;

package/src/writer/Hr/Hr.tsx

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

package/src/writer/Icon/Icon.tsx

@@ -0,0 +1,48 @@
+import React, {createContext, ReactElement, SVGProps, use} from "react";
+import parse from 'html-react-parser';
+
+// 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 = parse(ico.svg) as ReactElement<SVGProps<SVGSVGElement>>
+    if (React.isValidElement(icon)) {
+        return React.cloneElement(icon, {
+            width: size,
+            height: size,
+            color: color || icon.props.color || 'currentColor',
+            style: {
+                width: size,
+                height: size,
+                color: color || icon.props.color || 'currentColor',
+            }
+        })
+    }
+
+    return null
+}
+
+

package/src/writer/Icon/index.ts

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

package/src/writer/Image/Image.styles.tsx

@@ -0,0 +1,9 @@
+import { css } from "@linaria/core"
+
+export const ImageHost = css`
+    @layer defaults {
+        width: 100%;
+        border-radius: 16px;
+        box-shadow: 0 2px 16px rgba(0,0,0,0.06);
+    }
+`;

package/src/writer/Image/Image.tsx

@@ -0,0 +1,19 @@
+
+
+import React from 'react';
+
+import * as cn from "./Image.styles"
+
+export interface ImageProps {
+    src: string
+    alt: string
+    style?: React.CSSProperties
+}
+
+export function Image(props: ImageProps) {
+    return <img
+        src={props.src}
+        alt={props.alt}
+        className={cn.ImageHost}
+    />
+}

package/src/writer/Image/index.ts

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

package/src/writer/List/List.styles.tsx

@@ -0,0 +1,47 @@
+import { css } from '@linaria/core'
+
+export default {
+    List: css`
+        @layer defaults {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            ol& {
+                list-style-type: decimal;
+                padding-inline-start: 1.625em;
+            }
+        }
+    `,
+    Item: css`
+        @layer defaults {
+            ul & {
+                margin-bottom: 0.5rem;
+                position: relative;
+                padding-inline-start: .375em;
+                padding-left: 2em !important;
+            }
+
+            /*  TODO: IN THE FUTURE BETTER SOLUTION IS NEEDED */
+            xyd-grid-decorator ul & {
+                padding-left: 0 !important;
+            }
+
+            ul &::before {
+                content: "";
+                width: .375em;
+                height: .375em;
+                position: absolute;
+                top: 0.5em;
+                left: .5em;
+                border-radius: 50%;
+                background-color: var(--xyd-list-item-bgcolor);
+            }
+
+            ol &::marker {
+                padding-inline-start: .375em;
+                color: var(--xyd-list-marker-color);
+            }
+        }
+    `
+}

package/src/writer/List/List.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+
+import cn from "./List.styles";
+
+export interface ListProps {
+    children: React.ReactNode;
+}
+
+export function List({ children }: ListProps) {
+    return <ul className={cn.List}>
+        {children}
+    </ul>
+}
+
+export function ListOl({ children }: ListProps) {
+    return <ol className={cn.List}>
+        {children}
+    </ol>
+}
+
+export interface ListItemProps {
+    children: React.ReactNode;
+}
+
+function ListItem({ children }: ListItemProps) {
+    return <li className={cn.Item}>{children}</li>
+}
+
+List.Item = ListItem;

package/src/writer/List/index.ts

@@ -0,0 +1,4 @@
+export {
+    List,
+    ListOl
+} from "./List";

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

@@ -1,7 +1,8 @@
 import {css} from "@linaria/core";
 
-export const $navLinks = {
-    host: css`
+export const NavLinksHost = css`
+    @layer defaults {
+        font-weight: var(--xyd-font-weight-semibold);
         display: flex;
         padding-top: 2rem;
         margin-top: 2rem;
@@ -9,24 +10,23 @@ export const $navLinks = {
         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;
-    `,
-};
+        border-color: var(--xyd-navlinks-border-color);
+
+        [part="link"] {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            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%;
+        }
+
+        [part="icon"] {
+            display: inline;
+            height: 1.25rem;
+            flex-shrink: 0;
+        }
+    }
+`;
+

package/src/writer/NavLinks/NavLinks.tsx

@@ -1,13 +1,6 @@
 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>
-}
+import * as cn from "./NavLinks.styles";
 
 export interface NavLinksProps {
     prev?: {
@@ -18,31 +11,85 @@ export interface NavLinksProps {
         title: string
         href: string
     }
+
+    as?: React.ElementType
+
+    className?: string
 }
 
-export function NavLinks(props: NavLinksProps) {
+export function NavLinks(
+    props: NavLinksProps
+) {
+    const Link = props.as || $Anchor
+
     return (
-        <div className={$navLinks.host}>
+        <xyd-navlinks
+            className={`${cn.NavLinksHost} ${props.className || ""}`}
+        >
             {props.prev ? (
-                <Anchor
+                <Link
                     href={props.prev.href}
                     title={props.prev.title}
-                    className={$navLinks.link}
+                    part="link"
                 >
-                    <ArrowLeftIcon className={$navLinks.icon}/>
+                    <$ArrowLeftIcon part="icon"/>
                     {props.prev.title}
-                </Anchor>
+                </Link>
             ) : <div/>}
             {props.next && (
-                <Anchor
+                <Link
                     href={props.next.href}
                     title={props.next.title}
-                    className={$navLinks.link}
+                    part="link"
                 >
                     {props.next.title}
-                    <ArrowRightIcon className={$navLinks.icon}/>
-                </Anchor>
+                    <$ArrowRightIcon part="icon"/>
+                </Link>
             )}
-        </div>
+        </xyd-navlinks>
     )
 }
+
+
+function $Anchor({children, ...rest}) {
+    return <a {...rest}>
+        {children}
+    </a>
+}
+
+
+function $ArrowRightIcon(props: React.SVGProps<SVGSVGElement>) {
+    return <svg
+        width={15}
+        height={15}
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path
+            d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+        />
+    </svg>
+}
+
+function $ArrowLeftIcon(props: React.SVGProps<SVGSVGElement>) {
+    return  <svg
+        width={15}
+        height={15}
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path
+            d="M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+        />
+    </svg>
+}

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

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