@xyd-js/components 0.1.0-build.168

package/src/writer/Card/Card.tsx

@@ -0,0 +1,94 @@
+import React from "react"
+
+import { Button } from "../Button"
+import { Text } from "../Text"
+
+import * as cn from "./Card.styles"
+
+interface CardProps {
+    title: string
+    href?: string
+    link?: React.ElementType
+
+    description?: string
+    btnText?: string
+
+    imgSrc?: string
+    imgAlt?: string
+
+    logoSrc?: string
+    logoAlt?: string
+
+    shadow?: "md"
+}
+
+export function Card(props: CardProps) {
+    const {
+        title,
+        description,
+        imgSrc,
+        imgAlt,
+        logoSrc,
+        logoAlt,
+        shadow,
+        href,
+        link,
+        btnText,
+    } = props
+
+    const Link = link
+
+    return <xyd-card
+        data-shadow={shadow || undefined}
+        className={cn.CardHost}
+    >
+        {imgSrc && (
+            <div part="image-container">
+                <div part="bg">
+                    <img src={imgSrc} alt={imgAlt} />
+                    <div part="bg-shadow" />
+                </div>
+
+                {
+                    Link && href && logoSrc && <Link
+                        target="_blank"
+                        rel="noopener"
+                        part="author-link"
+                        href={href}
+                    >
+                        <img
+                            src={logoSrc}
+                            alt={logoAlt}
+                        />
+                    </Link>
+                }
+
+            </div>
+        )}
+
+        <div part="body">
+            <div part="header">
+                {Link && href && !logoSrc ?
+                    <Text weight="bold">
+                        <Link href={href}>
+                            {title}
+                        </Link>
+                    </Text>
+                    : <Text weight="bold">
+                        {title}
+                    </Text>}
+                {
+                    btnText && <Button size="md" kind="secondary">
+                        {btnText}
+                    </Button>
+                }
+            </div>
+            <div part="description">
+                <Text size="small">
+                    {description}
+                </Text>
+            </div>
+        </div>
+    </xyd-card>
+}
+

package/src/writer/Card/index.ts

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

package/src/writer/Code/Code.styles.tsx

@@ -0,0 +1,16 @@
+import {css} from "@linaria/core";
+
+export const CodeHost = css`
+    @layer defaults {
+        display: inline-block;
+        padding: 0 .3em;
+        border-radius: 6px;
+        margin: 0 3px;
+        border: .5px solid var(--xyd-code-border-color);
+        background: var(--xyd-code-bgcolor);
+        
+        & [part="content"] {
+            position: relative;
+        }
+    }
+`;

package/src/writer/Code/Code.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+
+import * as cn from "./Code.styles";
+
+export interface CodeProps {
+    className?: string;
+    children: React.ReactNode;
+}
+
+export function Code({ className, children }: CodeProps) {
+    return <code className={`${cn.CodeHost} ${className || ''}`}>
+        <span part="content">
+            {children}
+        </span>
+    </code>
+}

package/src/writer/Code/index.ts

@@ -0,0 +1,3 @@
+export {Code} from "./Code"
+
+export type {CodeProps} from "./Code"

package/src/writer/ColorSchemeButton/ColorSchemeButton.tsx

@@ -0,0 +1,191 @@
+import React, { useEffect, useState } from "react";
+
+import { Button } from "../Button";
+
+export function ColorSchemeButton() {
+    const [currentScheme, changeColorScheme] = useColorScheme() as [string, () => void]
+
+    return <Button
+        size="sm"
+        theme="ghost"
+        icon={currentScheme === "dark" ? <IconDarkMode /> : <IconLightMode />}
+        onClick={changeColorScheme}
+    />
+}
+
+export function useColorScheme(): ["dark" | "light" | null, () => void] {
+    const [currentScheme, setCurrentScheme] = useState<"dark" | "light" | null>(null)
+
+    // TODO: context 
+    useEffect(() => {
+        const updateScheme = () => {
+            const html = document.querySelector("html");
+            if (html) {
+                const scheme = html.getAttribute("data-color-scheme") || "os";
+                if (scheme === "os") {
+                    const preferred = getPreferredColorScheme();
+                    const finalScheme = preferred || "light";
+                    setCurrentScheme(finalScheme);
+                    updateColorSchemeInHead(finalScheme);
+                } else {
+                    const finalScheme = scheme as "dark" | "light";
+                    setCurrentScheme(finalScheme);
+                    updateColorSchemeInHead(finalScheme);
+                }
+            }
+        };
+
+        updateScheme();
+
+        // Listen for changes to the color scheme
+        const observer = new MutationObserver(updateScheme);
+        const html = document.querySelector("html");
+        if (html) {
+            observer.observe(html, { attributes: true, attributeFilter: ['data-color-scheme'] });
+        }
+
+        return () => observer.disconnect();
+    }, []);
+
+    function changeColorScheme() {
+        let colorScheme = ""
+
+        const preferredColorScheme = getPreferredColorScheme()
+        if (preferredColorScheme) {
+            colorScheme = preferredColorScheme === "dark" ? "light" : "dark"
+        }
+
+        const html = document.querySelector("html");
+        if (!html) return;
+
+        const currentScheme = html.getAttribute("data-color-scheme");
+        if (currentScheme && currentScheme !== "os") {
+            colorScheme = currentScheme === "dark" ? "light" : "dark";
+        }
+        if (!colorScheme) {
+            colorScheme = "light"
+        }
+
+        html.setAttribute("data-color-scheme", colorScheme);
+        localStorage.setItem("xyd-color-scheme", colorScheme);
+        updateColorSchemeInHead(colorScheme as "dark" | "light");
+    }
+
+    return [currentScheme, changeColorScheme]
+}
+
+
+// Function to update color-scheme in document head
+function updateColorSchemeInHead(scheme: "dark" | "light") {
+    let styleElement = document.querySelector('style[data-color-scheme-style]');
+
+    if (!styleElement) {
+        styleElement = document.createElement('style');
+        styleElement.setAttribute('data-color-scheme-style', 'true');
+        document.head.appendChild(styleElement);
+    }
+
+    styleElement.textContent = `:root { color-scheme: ${scheme}; }`;
+}
+
+function getPreferredColorScheme() {
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return 'dark';
+    }
+
+    if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+        return 'light';
+    }
+
+    return null
+}
+
+
+function IconLightMode() {
+    return <svg
+        width={16}
+        height={16}
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <g clipPath="url(#clip0_2880_7340)">
+            <path
+                d="M8 1.11133V2.00022"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M12.8711 3.12891L12.2427 3.75735"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M14.8889 8H14"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M12.8711 12.8711L12.2427 12.2427"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M8 14.8889V14"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M3.12891 12.8711L3.75735 12.2427"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M1.11133 8H2.00022"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M3.12891 3.12891L3.75735 3.75735"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M8.00043 11.7782C10.0868 11.7782 11.7782 10.0868 11.7782 8.00043C11.7782 5.91402 10.0868 4.22266 8.00043 4.22266C5.91402 4.22266 4.22266 5.91402 4.22266 8.00043C4.22266 10.0868 5.91402 11.7782 8.00043 11.7782Z"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_2880_7340">
+                <rect width={16} height={16} fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+}
+
+function IconDarkMode() {
+    return <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={16}
+        height={16}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+    </svg>
+}

package/src/writer/ColorSchemeButton/index.ts

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

package/src/writer/Details/Details.styles.tsx

@@ -0,0 +1,101 @@
+import { css } from "@linaria/core";
+
+export const DetailsHost = css`
+    @layer defaults {
+        border-top: 1px solid var(--xyd-details-border-color);
+    
+        &[data-kind="secondary"], &[data-kind="tertiary"] {
+            background-color:  var(--xyd-details-bgcolor--secondary);
+            border: 1px solid var(--xyd-details-border-color);
+            border-radius: 8px;
+        }
+
+        &[data-kind="tertiary"] {
+            padding: 8px;
+
+            [part="content"] {
+                border-radius: 8px;
+            }
+        }
+
+        &[open] [part="summary"] svg[data-icon="true"] { 
+            transform: rotate(90deg);
+        }
+
+        [part="summary"] {
+            padding: 16px 14px 16px 0;
+            cursor: pointer;
+            font-weight: var(--xyd-font-weight-medium);
+            font-variant-numeric: tabular-nums;
+            transition: color 0.3s;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-start;
+            list-style: none;
+
+            &:hover {
+                color: var(--xyd-details-summary-color--active);
+            }
+        }
+
+        &[data-kind="tertiary"] [part="summary"]{
+            padding: 10px 24px;
+        }
+        &[data-kind="secondary"],
+        &[data-kind="tertiary"] {
+            [part="summary"] {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                cursor: pointer;
+                padding: 20px 24px;
+            }
+        }
+
+        [part="summary-deep"] {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+
+        [part="summary-deep-text"] {
+            color: var(--xyd-details-summary-color);
+            text-transform: none;
+            letter-spacing: .08em;
+            margin-left: 8px;
+            font-weight: var(--xyd-font-weight-bold);
+
+            code {
+                background: var(--xyd-details-summary-code-bgcolor);
+            }
+        }
+
+        [part="summary-deep-label"] {
+            flex: 1 1 auto;
+        }
+
+        // TODO: after migration to web-components should be removed cuz 'part="content"' can be also in another element as child
+        & > [part="content"] { 
+            padding: 0 24px 20px;
+        }
+        &[data-kind="tertiary"] > [part="content"] {
+            background-color: var(--xyd-details-content-bgcolor);
+            padding-top: 20px;
+
+            code {
+                background: var(--xyd-details-content-bgcolor);
+            }
+        }
+
+        [part="icon"] {
+            flex: 0 0 auto;
+            font-size: var(--xyd-font-size-medium);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-right: 6px;
+        }
+    }
+`;
+

package/src/writer/Details/Details.tsx

@@ -0,0 +1,168 @@
+import React, {} from "react"
+
+import * as cn from "./Details.styles";
+import {useUXClick, useUXEvents} from "../../uxsdk";
+
+/**
+ * Base interface for all Details component variants
+ */
+export interface BaseDetailsProps {
+    /** Content to be displayed inside the details element */
+    children: React.ReactNode;
+
+    /** Label text displayed in the summary */
+    label: string;
+
+    /** Optional icon element to be displayed in the summary */
+    icon?: React.ReactElement;
+
+    /** Optional CSS class name for custom styling */
+    className?: string;
+}
+
+/**
+ * Props for the tertiary variant of the Details component
+ */
+export interface TertiaryDetailsProps extends BaseDetailsProps {
+    /** Specifies the tertiary variant */
+    kind: "tertiary";
+
+    /** Title text or element displayed in the summary */
+    title: string | React.ReactNode;
+}
+
+/**
+ * Props for the secondary variant of the Details component
+ */
+export interface SecondaryDetailsProps extends BaseDetailsProps {
+    /** Specifies the secondary variant */
+    kind: "secondary";
+
+    /** Title text or element displayed in the summary */
+    title: string | React.ReactNode;
+}
+
+/**
+ * Props for the primary variant of the Details component
+ */
+export interface PrimaryDetailsProps extends BaseDetailsProps {
+    /** Specifies the primary variant (default) */
+    kind?: "primary";
+}
+
+/** Union type of all possible Details component variants */
+export type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps | TertiaryDetailsProps
+
+/**
+ * A collapsible details component that supports three variants: primary, secondary, and tertiary.
+ * Each variant has a different visual style and structure.
+ *
+ * @param props - The component props
+ * @returns A details element with collapsible content
+ *
+ * @category Component
+ */
+export function Details(props: DetailsProps): React.ReactElement {
+    const {children, label} = props;
+
+    const ux = useUXEvents();
+    const uxClick = useUXClick(
+        ux.docs.details.open,
+        ux.docs.details.close,
+        () => ({label})
+    )
+
+    let title
+
+    const isDeepKind = ["secondary", "tertiary"].includes(props.kind || "");
+
+    if (isDeepKind && "title" in props) {
+        title = props.title;
+    }
+
+    const kind = props.kind || "primary";
+
+    return <details
+        part="details"
+        className={`${cn.DetailsHost} ${props.className || ""}`}
+        data-kind={props.kind}
+        onClick={uxClick}
+    >
+        <summary part="summary">
+            {kind === "primary" && (
+                <>
+                    {props.icon || <$Icon/>}
+                    <div part="summary-deep-label">
+                        {label}
+                    </div>
+                </>
+            )}
+
+            {isDeepKind && (
+                <div>
+                    <div part="summary-deep">
+                        {props.icon || <$IconDeep/>}
+                        <div part="summary-deep-text">
+                            {title}
+                        </div>
+                    </div>
+                    <div part="summary-deep-label">
+                        {label}
+                    </div>
+                </div>
+            )}
+            {isDeepKind && <$Icon/>}
+        </summary>
+
+        <div part="content">
+            {children}
+        </div>
+    </details>
+}
+
+function $Icon() {
+    return <div part="icon">
+        <svg
+            // TODO: bad solution
+            data-icon="true"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+        >
+            <path
+                fillRule="evenodd"
+                d="M8.293 4.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L14.586 12 8.293 5.707a1 1 0 0 1 0-1.414Z"
+                clipRule="evenodd"
+            />
+        </svg>
+    </div>
+}
+
+function $IconDeep() {
+    return <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        stroke="none"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <g clipPath="url(#clip0_1689_2180)">
+            <path
+                d="M4.3 4.3L7.1 7.1M10.6 5.7V1.5M14.8 7.8L17.6 5M5.7 11.3H1.5M7.1 14.8L4.3 17.6M15.5 22.5L9.9 9.9L22.5 14.8L16.9 16.2L15.5 22.5Z"
+                stroke="currentColor"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_1689_2180">
+                <rect width={24} height={24} fill="white"/>
+            </clipPath>
+        </defs>
+    </svg>
+}
+

package/src/writer/Details/DetailsProps.tsx

@@ -0,0 +1,34 @@
+export interface DetailsProps {
+    /** Content to be displayed inside the details element */
+    children: React.ReactNode;
+
+    /** Label text displayed in the summary */
+    label: string;
+
+    /** Optional icon element to be displayed in the summary */
+    icon?: React.ReactElement;
+
+    /** Optional CSS class name for custom styling */
+    className?: string;
+
+    /**
+     * Which visual style to use.
+     * @default 'primary'
+     */
+    kind?: 'primary' | 'secondary' | 'tertiary';
+
+    /**
+     * Title text or element displayed in the summary.
+     * Required when `kind` is 'secondary' or 'tertiary'.
+     */
+    title?: React.ReactNode;
+}
+
+/**
+ * Props for the Details component
+ * 
+ * @category Component
+ */
+export function DetailsProps(props: DetailsProps) {
+    return props
+}

package/src/writer/Details/index.ts

@@ -0,0 +1,6 @@
+
+export {Details} from "./Details";
+
+export {DetailsProps as DetailsPropsProps} from "./DetailsProps";
+
+export type {DetailsProps} from "./Details";