@xyd-js/components 0.1.0-xyd.7 → 0.1.0-xyd.94

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,93 +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;
+            }
+        }
+
+        [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;
         }
-    `,
-    summary$$secondary: css`
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        cursor: pointer;
-        padding: 20px 24px;
-    `,
-    summary$$tertiary: css`
-        padding: 10px 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;
-    `,
-    summaryDeep$text$$tertiary: css`
-        text-transform: none;
-        
-        code {
-            background: white;
+
+        // 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);
+            }
         }
-    `,
-    label: css`
-        flex: 1 1 auto;
-    `,
-    label$$tertriary: css`
-        padding: 10px;
-    `,
-    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="icon"] {
+            flex: 0 0 auto;
+            font-size: var(--xyd-font-size-medium);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-right: 6px;
         }
-    `,
-    content$$tertiary: css`
-        background: white;
-        padding-top: 20px;
-    `
-}
+    }
+`;
+

package/src/writer/Details/Details.tsx

@@ -1,32 +1,68 @@
 import React from "react"
 
-import {$details} from "./Details.styles";
+import * as cn from "./Details.styles";
 
-interface BaseDetailsProps {
+/**
+ * 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;
 
-    icon?: React.SVGProps<SVGSVGElement>;
+    /** Optional icon element to be displayed in the summary */
+    icon?: React.ReactElement;
+
+    /** Optional CSS class name for custom styling */
+    className?: string;
 }
 
-interface TertiaryDetailsProps extends BaseDetailsProps {
+/**
+ * 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;
 }
 
-interface SecondaryDetailsProps extends BaseDetailsProps {
+/**
+ * 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;
 }
 
-interface PrimaryDetailsProps extends BaseDetailsProps {
+/**
+ * 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
 
-export function Details(props: DetailsProps) {
-    const {children, label} = props;
+/**
+ * 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;
 
     let title
 
@@ -38,54 +74,45 @@ export function Details(props: DetailsProps) {
 
     const kind = props.kind || "primary";
 
-    return <details className={`
-        ${$details.host} 
-        ${isDeepKind && $details.host$$secondary}
-   `}>
-        <summary className={`
-        ${$details.summary} 
-        ${isDeepKind && $details.summary$$secondary}
-        ${kind === "tertiary" ? $details.summary$$tertiary : ""}
-   `}>
-            {kind === "primary" && <>
-                    {props.icon ? props.icon : <$Icon/>}
-                <$Label>
-                    {label}
-                </$Label>
-            </>}
-            {isDeepKind && <>
+    return <details
+        part="details"
+        className={`${cn.DetailsHost} ${props.className || ""}`}
+        data-kind={props.kind}
+    >
+        <summary part="summary">
+            {kind === "primary" && (
+                <>
+                    {props.icon || <$Icon />}
+                    <div part="summary-deep-label">
+                        {label}
+                    </div>
+                </>
+            )}
+
+            {isDeepKind && (
                 <div>
-                    <div className={$details.summaryDeep}>
-                        <>
-                            {props.icon ? props.icon : <$IconDeep/>}
-                        </>
-                        <div className={`
-                            ${$details.summaryDeep$text}
-                            ${$details.summaryDeep$text$$tertiary}
-                        `}>
+                    <div part="summary-deep">
+                        {props.icon || <$IconDeep />}
+                        <div part="summary-deep-text">
                             {title}
                         </div>
                     </div>
-                    <$Label>
+                    <div part="summary-deep-label">
                         {label}
-                    </$Label>
-                </div>
-                <$Icon/>
-            </>}
+                    </div>
+                </div> 
+            )}
+            {isDeepKind && <$Icon />}
         </summary>
 
-        <div className={`
-            ${$details.content}
-            ${isDeepKind && $details.content$$secondary}
-            ${kind === "tertiary" && $details.content$$tertiary}
-        `}>
+        <div part="content">
             {children}
         </div>
     </details>
 }
 
 function $Icon() {
-    return <div className={$details.icon}>
+    return <div part="icon">
         <svg
             // TODO: bad solution
             data-icon="true"
@@ -124,16 +151,9 @@ function $IconDeep() {
         </g>
         <defs>
             <clipPath id="clip0_1689_2180">
-                <rect width={24} height={24} fill="white"/>
+                <rect width={24} height={24} fill="white" />
             </clipPath>
         </defs>
     </svg>
 }
 
-function $Label({children}: {
-    children?: React.ReactNode
-}) {
-    return <div className={$details.label}>
-        {children}
-    </div>
-}

package/src/writer/Example/index.tsx

@@ -0,0 +1,5 @@
+import React from "react"
+
+export function Example() {
+    return <div>Example xD 2</div>
+}