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

package/src/writer/Callout/Callout.tsx

@@ -1,12 +1,40 @@
 import React from "react"
 
-import {$callout, $icon, $message} from "./Callout.styles";
+import * as cn from "./Callout.styles";
 
+/**
+ * Props for the Callout component
+ */
 export interface CalloutProps {
+    /** Additional CSS class name to be applied to the callout */
+    className?: string;
+    
+    /** Content to be displayed inside the callout */
     children: React.ReactNode;
 }
 
-function InfoIcon() {
+/**
+ * A Callout component that displays important information or notices in a visually distinct way.
+ * It includes an info icon and a message area for content.
+ * 
+ * @category Component
+ */
+export function Callout({ className, children }: CalloutProps) {
+    return <xyd-callout
+        className={`${cn.CalloutHost} ${className || ''}`}
+    >
+        <div part="icon">
+            <$IconInfo />
+        </div>
+        <div part="message">
+            <div part="message-body">
+                {children}
+            </div>
+        </div>
+    </xyd-callout>
+}
+
+function $IconInfo() {
     return <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -14,7 +42,7 @@ function InfoIcon() {
         fill="currentColor"
         viewBox="0 0 24 24"
     >
-        <path d="M13 12a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0v-4Zm-1-2.5A1.25 1.25 0 1 0 12 7a1.25 1.25 0 0 0 0 2.5Z"/>
+        <path d="M13 12a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0v-4Zm-1-2.5A1.25 1.25 0 1 0 12 7a1.25 1.25 0 0 0 0 2.5Z" />
         <path
             fillRule="evenodd"
             d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"
@@ -22,16 +50,3 @@ function InfoIcon() {
         />
     </svg>
 }
-
-export function Callout({children}: CalloutProps) {
-    return <div className={`${$callout.host} ${$callout.$$neutral}`}>
-        <div className={$icon.host}>
-            <InfoIcon/>
-        </div>
-        <div className={$message.host}>
-            <div className={$message.body}>
-                {children}
-            </div>
-        </div>
-    </div>
-}

package/src/writer/Card/Card.styles.tsx

@@ -0,0 +1,47 @@
+import { css } from "@linaria/core"
+
+export const CardHost = css`
+    background-color: var(--xyd-card-bgcolor);
+    border-radius: 8px;
+    box-shadow: 0 1px 2px 0 var(--xyd-card-shadow-color);
+    flex-direction: column;
+    display: flex;
+    overflow: hidden;
+
+    &[data-shadow="md"] {
+        box-shadow: 0 5px 40px var(--xyd-card-shadow-color);
+    }
+
+    [part="image-container"] {
+        border-bottom: 2px solid var(--xyd-card-border-color);
+        height: 200px;
+        overflow: hidden;
+        position: relative;
+
+        [part="bg"] {
+            background-size: cover;
+            background-repeat: no-repeat;
+            position: relative;
+            height: 100%;
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            margin-bottom: -4px;
+        }
+    }
+
+    [part="body"] {
+        padding: 16px;
+
+        [part="header"] {
+            margin-right: 4px;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 12px;
+            display: flex;
+        }
+    }
+`

package/src/writer/Card/Card.tsx

@@ -0,0 +1,69 @@
+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
+
+    imgSrc?: string
+    imgAlt?: string
+
+    shadow?: "md"
+}
+
+export function Card(props: CardProps) {
+    const {
+        title,
+        description,
+        imgSrc,
+        imgAlt,
+        shadow,
+        href,
+        link,
+    } = 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>
+            </div>
+        )}
+
+        <div part="body">
+            <div part="header">
+                {Link && href ?
+                    <Text weight="bold">
+                        <Link href={href}>
+                            {title}
+                        </Link>
+                    </Text>
+                    : <Text weight="bold">
+                        {title}
+                    </Text>}
+                <Button size="sm" kind="secondary">
+                    Source
+                </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

@@ -1,17 +1,16 @@
 import {css} from "@linaria/core";
 
-export const $code = {
-    host: css`
+export const CodeHost = css`
+    @layer defaults {
         display: inline-block;
         padding: 0 .3em;
         border-radius: 6px;
         margin: 0 3px;
-        border: .5px solid #ececf1;
-
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 1.6em;
-
-        background: linear-gradient(45deg, #f7f7f8 0%, rgba(247, 247, 248, 1) 100%);
-    `
-}
+        border: .5px solid var(--xyd-code-border-color);
+        background: var(--xyd-code-bgcolor);
+        
+        & [part="content"] {
+            position: relative;
+        }
+    }
+`;

package/src/writer/Code/Code.tsx

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

package/src/writer/ColorSchemeButton/ColorSchemeButton.tsx

@@ -0,0 +1,172 @@
+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() {
+    const [currentScheme, setCurrentScheme] = useState<string>('light')
+
+    // 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();
+                    setCurrentScheme(preferred || "light");
+                } else {
+                    setCurrentScheme(scheme);
+                }
+            }
+        };
+
+        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);
+    }
+
+    return [currentScheme, changeColorScheme]
+}
+
+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

@@ -1,76 +1,93 @@
-import {css} from "@linaria/core";
+import { css } from "@linaria/core";
 
-export const $details = {
-    host: css`
-        border-top: 1px solid #ececf1;
+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;
+        }
 
-        &[open] summary svg[data-icon="true"] { // TODO: bad solution
+        &[open] [part="summary"] svg[data-icon="true"] { 
             transform: rotate(90deg);
         }
-    `,
-    host$$secondary: css`
-        background-color: #f7f7f8;
-        border: 1px solid #ececf1;
-        border-radius: 8px;
-    `,
-    summary: css`
-        padding: 16px 14px 16px 0;
-        font-size: 18px;
-        cursor: pointer;
-        font-weight: 500;
-        font-variant-numeric: tabular-nums;
-        line-height: 1.4;
-        transition: color 0.3s;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-start;
-        list-style: none;
 
-        &:hover {
-            color: #565869;
+        [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;
+            }
         }
-    `,
-    summary$$secondary: css`
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        cursor: pointer;
-        padding: 20px 24px;
-    `,
-    summaryDeep: css`
-        display: flex;
-        align-items: center;
-        margin-bottom: 8px;
-    `,
-    summaryDeep$text: css`
-        color: #6e6e80;
-        text-transform: uppercase;
-        font-size: 12px;
-        line-height: 16px;
-        letter-spacing: .08em;
-        margin-left: 8px;
-        font-weight: 700;
-    `,
-    label: css`
-        flex: 1 1 auto;
-    `,
-    icon: css`
-        flex: 0 0 auto;
-        font-size: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding-right: 6px;
-    `,
-    content: css`
-        padding: 0 24px 20px;
-    `,
-    content$$secondary: css`
-        // TODO: also bad
 
-        code {
-            background: white;
+        [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;
+        }
+    }
+`;
+