@xyd-js/components 0.1.0-xyd.11 → 0.1.0-xyd.13

package/src/writer/Button/Button.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+import * as cn from "./Button.styles";
+
+export interface ButtonProps {
+    children?: React.ReactNode;
+    kind?: "primary" | "secondary" | "tertiary" | undefined
+    theme?: "ghost";
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    icon?: React.ReactElement;
+    iconPosition?: "left" | "right";
+    href?: string;
+}
+
+export function Button({
+    children,
+    kind = "primary",
+    theme,
+    size = "md",
+    className,
+    onClick,
+    disabled = false,
+    icon,
+    iconPosition = "left",
+    href
+}: ButtonProps) {
+    let Component = href ? "a" : "button"
+
+    let hrefProps = {}
+
+    if (href) {
+        hrefProps = {
+            href,
+            target: "_blank",
+        }
+    }
+
+    if (theme === "ghost") {
+        kind = undefined
+    }
+
+    return (
+        <Component
+            className={`${cn.ButtonHost} ${className || ''}`}
+            data-button={true}
+            data-kind={kind}
+            data-size={size}
+            data-theme={theme}
+            data-has-icon={!!icon}
+            data-icon-position={iconPosition}
+            onClick={onClick}
+            disabled={disabled}
+            {...hrefProps}
+        >
+            {icon && iconPosition === "left" && (
+                <span part="icon" className={cn.ButtonIcon}>
+                    {icon}
+                </span>
+            )}
+            {
+                children ? <span part="content">
+                    {children}
+                </span> : null
+            }
+            {icon && iconPosition === "right" && (
+                <span part="icon" className={cn.ButtonIcon}>
+                    {icon}
+                </span>
+            )}
+        </Component>
+    );
+}

package/src/writer/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonProps } from "./Button";

package/src/writer/Callout/Callout.styles.tsx

@@ -1,46 +1,39 @@
 import {css} from "@linaria/core";
 
 export const CalloutHost = css`
-    display: inline-flex;
-    align-items: center;
-
-    position: relative;
-    width: 100%;
-    min-width: 275px;
-    padding: 8px 12px;
-
-    border-radius: 8px;
-
-    text-align: center;
-
-    border: 1px solid #ececf1;
-`;
-
-export const CalloutNeutral = css`
-    background-color: #f7f7f8;
-
-    border-color: #ececf1;
-`;
-
-export const CalloutIcon = css`
-    display: inline-flex;
-    margin-right: 14px;
-    flex: 0 0 auto;
-    align-self: flex-start;
-
-    color: #6e6e80;
-    font-size: 20px;
-    margin-top: 2px;
-`;
-
-export const CalloutMessage = css`
-    color: #353740;
-    text-align: left;
-
-    flex: 1 1 auto;
-`;
-
-export const CalloutMessageBody = css`
-    font-size: 14px;
-    line-height: 20px;
+    @layer defaults {
+        display: inline-flex;
+        align-items: center;
+        position: relative;
+        width: 100%;
+        min-width: 275px;
+        padding: 8px 12px;
+        border-radius: 8px;
+        text-align: center;
+        border: 1px solid var(--xyd-callout-border-color);
+        background-color: var(--xyd-callout-bgcolor);
+        
+        code {
+            background: var(--white);
+        }
+        
+        [part="icon"] {
+            display: inline-flex;
+            margin-right: 14px;
+            flex: 0 0 auto;
+            align-self: flex-start;
+            color: var(--xyd-callout-icon-color);
+            margin-top: 2px;
+        }
+        
+        [part="message"] {
+            color: var(--xyd-callout-message-color);
+            text-align: left;
+            flex: 1 1 auto;
+        }
+        
+        [part="message-body"] {
+        }
+        
+    }
 `;

package/src/writer/Callout/Callout.tsx

@@ -2,11 +2,39 @@ import React from "react"
 
 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={`${cn.CalloutHost} ${cn.CalloutNeutral}`}>
-        <div className={cn.CalloutIcon}>
-            <InfoIcon/>
-        </div>
-        <div className={cn.CalloutMessage}>
-            <div className={cn.CalloutMessageBody}>
-                {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,15 +1,16 @@
 import {css} from "@linaria/core";
 
 export const CodeHost = css`
-    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%);
+    @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

@@ -3,11 +3,14 @@ import React from "react"
 import * as cn from "./Code.styles";
 
 export interface CodeProps {
+    className?: string;
     children: React.ReactNode;
 }
 
-export function Code({children}: CodeProps) {
-    return <code className={cn.CodeHost}>
-        {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";