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

package/src/system/SearchButton/SearchButton.styles.tsx

@@ -0,0 +1,86 @@
+import { css } from "@linaria/core";
+
+export const SearchButton = css`
+    @layer defaults {
+        background-color: transparent;
+        border-radius: 8px;
+        border: 1px solid var(--dark32);
+        color: var(--text-primary);
+        background: var(--dark16);
+        font-size: var(--xyd-font-size-small);
+        font-weight: var(--xyd-font-weight-semibold);
+        height: 36px;
+        justify-content: space-between;
+        display: flex;
+        align-items: center;
+        flex: 1;
+
+        padding: 0 8px;
+        margin: 12px 0 0;
+        user-select: none;
+        width: 100%;
+        transition: border-color .15s ease;
+
+        
+        max-width: 300px;
+        margin: 0;
+
+        cursor: pointer;
+
+        &:hover {
+            background: var(--dark16);
+            box-shadow: none;
+            color: var(--dark48);
+            outline: none;
+
+            box-shadow: none;
+            border-color: var(--dark48);
+        }
+        
+        [part="container"] {
+            align-items: center;
+            display: flex;
+        }
+
+        [part="placeholder"] {
+            display: block !important;
+            font-size: var(--xyd-font-size-small);
+            color: var(--dark48);
+            font-weight: var(--xyd-font-weight-normal);
+        }
+
+        [part="icon"] {
+            stroke-width: 1.4;
+            color: var(--dark48) !important;
+            height: 15px;
+            transition: color .15s var(--cubic-enter);
+        }
+        
+
+        [part="keys"] {
+            display: flex;
+            gap: 4px;
+            min-width: auto;
+        }
+
+        [part="key"] {
+            align-items: center;
+            background: var(--dark16);
+            border-radius: 3px;
+            box-shadow: none;
+            color: var(--dark48);
+            display: flex;
+            height: 18px;
+            line-height: 18px;
+            justify-content: center;
+            font-size: 12px;
+            letter-spacing: 1px;
+            position: relative;
+            padding: 0;
+            margin: 0;
+            border: 0px;
+            top: 0;
+            width: 20px;
+        }
+    }
+`

package/src/system/SearchButton/SearchButton.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useRef } from 'react';
+
+import * as cn from "./SearchButton.styles";
+
+interface SearchButtonProps {
+  onClick?: () => void;
+  placeholder?: string;
+  shortcutKeys?: string[];
+}
+
+export function SearchButton({
+  shortcutKeys = ['⌘', 'K'],
+  ...props
+}: SearchButtonProps) {
+  useShortcuts(shortcutKeys, () => props.onClick?.());
+
+  useEffect(() => {
+    // @ts-ignore - !!! FIX IN THE FUTURE !!! its a fix for loading virtual-component:Search twice? original and from plugin - check if exists on prod
+    window.__UNSAFE_xyd_search_button_inited = true
+
+    return () => {
+      // @ts-ignore
+      window.__UNSAFE_xyd_search_button_inited = false
+    }
+  }, [])
+
+  return (
+    <xyd-search-button
+      className={cn.SearchButton}
+      aria-label="Search"
+      onClick={props.onClick}
+    >
+      <span part="container">
+        <svg
+          width={20}
+          height={20}
+          part="icon"
+          viewBox="0 0 20 20"
+        >
+          <path
+            d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+            stroke="currentColor"
+            fill="none"
+            fillRule="evenodd"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        <span part="placeholder">{props.placeholder || "Search"}</span>
+      </span>
+
+      {
+        shortcutKeys.length > 0 && (
+          <span part="keys">
+            {shortcutKeys.map((key, index) => (
+              <kbd key={index} part="key">{key}</kbd>
+            ))}
+          </span>
+        )
+      }
+    </xyd-search-button>
+  )
+}
+
+function useShortcuts(shortcutKeys: string[], onTrigger: () => void): void {
+  // Keep latest handler reference to avoid stale closures
+  const savedHandler = useRef(onTrigger);
+
+  useEffect(() => {
+    savedHandler.current = onTrigger;
+  }, [onTrigger]);
+
+  useEffect(() => {
+    // @ts-ignore
+    if (window.__UNSAFE_xyd_search_button_inited) {
+      return
+    }
+
+    const listener = (event: KeyboardEvent) => {
+      // For single key shortcuts
+      if (shortcutKeys.length === 1) {
+        if (event.key.toLowerCase() === shortcutKeys[0].toLowerCase()) {
+          event.preventDefault();
+
+          savedHandler.current();
+        }
+        return;
+      }
+
+      // For modifier combinations
+      if (shortcutKeys.length === 2) {
+        const [modifier, key] = shortcutKeys;
+        const pressedKey = event.key.toLowerCase();
+
+        const isModifierMatch =
+          (modifier === '⌘' && event.metaKey) ||
+          (modifier === 'Ctrl' && event.ctrlKey);
+
+        if (isModifierMatch && pressedKey === key.toLowerCase()) {
+          event.preventDefault();
+
+          savedHandler.current();
+        }
+      }
+    };
+
+    // Use capture phase and listen to both keydown and keyup
+    window.addEventListener('keydown', listener, { capture: true });
+    window.addEventListener('keyup', listener, { capture: true });
+
+    return () => {
+      window.removeEventListener('keydown', listener, { capture: true });
+      window.removeEventListener('keyup', listener, { capture: true });
+    };
+  }, []);
+}

package/src/system/SearchButton/index.ts

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

package/src/system/index.ts

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

package/src/utils/useStyle.ts

@@ -0,0 +1,19 @@
+import {css} from '@linaria/core';
+
+type StyleObject = Record<string, string>;
+type StyleFunction = (strings: TemplateStringsArray, ...values: any[]) => string;
+
+export function useStyle<T extends StyleObject>(component: { styles: T }) {
+    const styled = {} as Record<keyof T, StyleFunction>;
+
+    for (const key of Object.keys(component.styles)) {
+        styled[key as keyof T] = (strings: TemplateStringsArray, ...values: any[]) => {
+            const customStyles = css`
+                ${strings.reduce((result, str, i) => result + str + (values[i] || ''), '')}
+            `;
+            return `${component.styles[key]} ${customStyles}`;
+        };
+    }
+
+    return styled;
+} 

package/src/views/HomeView/HomeView.styles.tsx

@@ -0,0 +1,37 @@
+import {css} from "@linaria/core";
+
+export const HomeViewHost = css`
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+`;
+
+export const HomeViewBodyHost = css`
+    background: radial-gradient(circle, hsl(0 0% 9% / .3) 1px, transparent 1px);
+    backdrop-filter: sepia(10%);
+    background-size: 30px 30px;
+    padding: 60px;
+    flex: 1;
+`;
+
+export const HomeViewBodyHostSecondary = css`
+    background: repeating-linear-gradient(to right, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px);
+`;
+
+export const HomeViewBodyContent = css`
+    width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 80px;
+
+    @media (max-width: 1200px) {
+        width: 100%;
+        padding: 0 20px;
+    }
+
+    @media (max-width: 768px) {
+        width: 100%;
+        padding: 0 10px;
+    }
+`; 

package/src/views/HomeView/HomeView.tsx

@@ -1,13 +1,5 @@
 import React from "react"
-import {css} from "@linaria/core";
-
-const $homeView = {
-    host: css`
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh;
-    `,
-}
+import * as cn from "./HomeView.styles";
 
 export interface HomeViewProps {
     header: React.ReactNode
@@ -16,43 +8,13 @@ export interface HomeViewProps {
 }
 
 export function HomeView({header, body, footer}: HomeViewProps) {
-    return <div className={$homeView.host}>
+    return <div className={cn.HomeViewHost}>
         {header}
         {body}
         {footer}
     </div>
 }
 
-const $body = {
-    host: css`
-        background: radial-gradient(circle, hsl(0 0% 9% / .3) 1px, transparent 1px);
-        backdrop-filter: sepia(10%);
-        background-size: 30px 30px;
-        padding: 60px;
-        flex: 1;
-    `,
-    host$$secondary: css`
-        background: repeating-linear-gradient(to right, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px);
-    `,
-    body: css`
-        width: 1200px;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        gap: 80px;
-
-        @media (max-width: 1200px) {
-            width: 100%;
-            padding: 0 20px;
-        }
-
-        @media (max-width: 768px) {
-            width: 100%;
-            padding: 0 10px;
-        }
-    `
-}
-
 export interface HomeViewBodyProps {
     children: React.ReactNode
     kind?: "secondary"
@@ -60,12 +22,10 @@ export interface HomeViewBodyProps {
 
 HomeView.Body = function HomeViewBody({children, kind}: HomeViewBodyProps) {
     return <div className={`
-        ${$body.host}
-        ${kind === "secondary" ? $body.host$$secondary : ""}
+        ${cn.HomeViewBodyHost}
+        ${kind === "secondary" ? cn.HomeViewBodyHostSecondary : ""}
     `}>
-        <div className={`
-            ${$body.body}
-        `}>
+        <div className={cn.HomeViewBodyContent}>
             {children}
         </div>
     </div>

package/src/views/TODO.md

@@ -0,0 +1 @@
+move to `@xyd-js/pages` ?

package/src/writer/Anchor/Anchor.styles.tsx

@@ -0,0 +1,11 @@
+import {css} from "@linaria/core";
+
+export const AnchorHost = css`
+    @layer defaults {
+        color: var(--xyd-anchor-color);
+
+        &:hover {
+            color: var(--xyd-anchor-color--hover);
+        }
+    }
+`; 

package/src/writer/Anchor/Anchor.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react'
+import type { ComponentProps, ReactElement } from 'react'
+
+import * as cn from "./Anchor.styles";
+
+export type AnchorProps = Omit<ComponentProps<'a'>, 'ref'> & {
+    newWindow?: boolean
+    as?: React.ElementType
+}
+
+export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function (
+    { href = '', children, newWindow, as, ...props },
+    // ref is used in <NavbarMenu />
+    forwardedRef
+): ReactElement {
+    const Link = as || $Anchor
+
+    if (newWindow) {
+        return (
+            <Link
+                ref={forwardedRef}
+                href={href}
+                target="_blank"
+                rel="noreferrer"
+                className={cn.AnchorHost}
+                {...props}
+            >
+                {children}
+            </Link>
+        )
+    }
+
+    return (
+        <Link
+            ref={forwardedRef}
+            className={cn.AnchorHost}
+            href={href || undefined}
+            {...props}
+        >
+            {children}
+        </Link>
+    )
+})
+
+Anchor.displayName = 'Anchor'
+
+function $Anchor({ children, ...rest }) {
+    return <a {...rest}>
+        {children}
+    </a>
+}

package/src/writer/Anchor/index.tsx

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

package/src/writer/Badge/Badge.styles.tsx

@@ -1,33 +1,44 @@
 import {css} from "@linaria/core";
 
-export const $badge = {
-    host: css`
+export const BadgeHost = css`
+    @layer defaults {
         display: inline-flex;
         align-items: center;
-        line-height: 1rem;
-        font-style: normal;
-        font-weight: 500;
-        letter-spacing: normal;
-        white-space: nowrap;
-        text-transform: none;
-    `,
-    host$$warning: css`
-        color: #000;
-        background-color: #f8d047;
-    `,
-    host$$info: css`
-        color: #fff;
-        background-color: #1FA6F2;
-    `,
-    host$$sm: css`
-        font-size: 12px;
-        height: 18px;
-        padding: 0 6px;
-        gap: 3px;
-        border-radius: 6px;
-    `,
+        
+        /* Size variants */
+        &[data-size="xs"] {
+            height: 15px;
+            padding: 6px;
+            gap: 3px;
+            border-radius: 6px;
+            font-size: var(--xyd-font-size-xsmall);
+        }
+
+        &[data-size="sm"] {
+            height: 18px;
+            padding: 10px;
+            gap: 3px;
+            border-radius: 6px;
+            font-size: var(--xyd-font-size-xsmall);
+        }
+        
+        /* Kind variants */
+        &[data-kind="default"] {
+            color: var(--xyd-badge-color--default);
+            background-color: var(--xyd-badge-bgcolor--default);
+        }
+        &[data-kind="warning"] {
+            color: var(--xyd-badge-color--warning);
+            background-color: var(--xyd-badge-bgcolor--warning);
+        }
+        &[data-kind="info"] {
+            color: var(--xyd-badge-color--info);
+            background-color: var(--xyd-badge-bgcolor--info);
+        }
+
+        [part="child"] {
+            position: relative;
+        }
+    }
+`;
 
-    item: css`
-        position: relative;
-    `
-}

package/src/writer/Badge/Badge.tsx

@@ -1,30 +1,47 @@
 import React from "react"
 
-import {$badge} from "./Badge.styles";
+import * as cn from "./Badge.styles";
 
 export interface BadgeProps {
-    children: React.ReactNode;
+    /**
+     * The class name of the badge.
+     */
+    className?: string;
 
-    size?: "sm"
-    kind?: "warning" | "info"
+    /**
+     * The children of the badge.
+     */
+    children?: React.ReactNode;
+
+    /**
+     * The size of the badge.
+     */
+    size?: "sm" | "xs"
+
+    /**
+     * The kind of the badge.
+     */
+    kind?: "warning" | "info" | "default"
 }
 
+/**
+ * Badge component is used to display a badge.
+ * 
+ * @group Components
+ */
 export function Badge({
-                          children,
-                          size = "sm",
-                          kind = "warning"
-                      }: BadgeProps) {
-    return <div className={`
-        ${$badge.host}
-        
-        ${size === "sm" && $badge.host$$sm}
-        
-        ${kind === "warning" && $badge.host$$warning}
-        
-        ${kind === "info" && $badge.host$$info}
-    `}>
-        <span className={$badge.item}>
+    className,
+    children,
+    size = "sm",
+    kind = "default"
+}: BadgeProps) {
+    return <xyd-badge
+        className={`${cn.BadgeHost} ${className || ''}`}
+        data-size={size}
+        data-kind={kind}
+    >
+        <span part="child">
             {children}
         </span>
-    </div>
-}
+    </xyd-badge>
+}