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

package/src/brand/CTABanner/CTABanner.tsx

@@ -1,127 +1,49 @@
-import React from "react"
-import {css} from "@linaria/core";
+import React from "react";
+import * as cn from "./CTABanner.styles";
 
-const $banner = {
-    host: css`
-        padding: 20px;
-    `,
-    container: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 80px;
-    `,
-    hero: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        gap: 40px;
-    `,
-    headingEffect: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-
-        background: -webkit-linear-gradient(
-                120deg,
-                var(--headingEffect-color-tertiary) 20%,
-                var(--headingEffect-color-tertiary) 30%,
-                var(--headingEffect-color-secondary) 60%,
-                var(--headingEffect-color-primary) 75%,
-                var(--headingEffect-color-primary) 85%
-        );
-        background-clip: text;
-        -webkit-text-fill-color: transparent;
-        animation: wave 5s infinite;
-        background-size: 200% 200%;
-        background-position: 50% 50%; // Start with all colors visible
+export interface CTABannerProps {
+    children: React.ReactNode;
+}
 
-        @keyframes wave {
-            0% {
-                background-position: 50% 50%;
-            }
-            50% {
-                background-position: 0% 50%;
-            }
-            100% {
-                background-position: 50% 50%;
-            }
-        }
-    `
+export interface CTABannerHeadingProps {
+    title: string;
+    subtitle: string;
 }
 
-export interface CTABannerProps {
-    children: React.ReactNode
+export interface CTABannerButtonGroupProps {
+    children: React.ReactNode;
 }
 
 export function CTABanner({children}: CTABannerProps) {
-    return <div className={$banner.host}>
-        <div className={$banner.container}>
-            <div className={$banner.hero}>
-                {children}
+    return (
+        <div className={cn.CTABannerHost}>
+            <div className={cn.CTABannerContainer}>
+                <div className={cn.CTABannerHero}>
+                    {children}
+                </div>
             </div>
         </div>
-    </div>
-}
-
-const $heading = {
-    host: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-    `,
-    title: css`
-        font-size: 76px;
-        font-weight: 900;
-        text-align: center;
-        letter-spacing: 3px;
-        margin: 0;
-    `,
-    subtitle: css`
-        color: #3c3c43;
-        font-size: 46px;
-        font-weight: 600;
-        text-align: center;
-    `
+    );
 }
 
-export interface CTABannerHeadingProps {
-    title: string
-    subtitle: string | React.ReactNode
-    headingEffect?: boolean
-}
-
-CTABanner.Heading = function CTABannerHeading({title, subtitle, headingEffect}: CTABannerHeadingProps) {
-    return <div className={$heading.host}>
-        <h1 className={$heading.title}>
-            {
-                headingEffect
-                    ? <span className={$banner.headingEffect}>
-                        {title}
-                      </span>
-                    : title
-            }
-        </h1>
-        <p className={$heading.subtitle}>
-            {subtitle}
-        </p>
-    </div>
+function Heading({title, subtitle}: CTABannerHeadingProps) {
+    return (
+        <div className={cn.CTABannerHeadingHost}>
+            <div className={cn.CTABannerHeadingEffect}>
+                <h1 className={cn.CTABannerHeadingTitle}>{title}</h1>
+            </div>
+            <h2 className={cn.CTABannerHeadingSubtitle}>{subtitle}</h2>
+        </div>
+    );
 }
 
-const $btnGroup = {
-    host: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 10px;
-    `
+function ButtonGroup({children}: CTABannerButtonGroupProps) {
+    return (
+        <div className={cn.CTABannerButtonGroupHost}>
+            {children}
+        </div>
+    );
 }
 
-CTABanner.ButtonGroup = function CTABannerButtonGroup({children}) {
-    return <div className={$btnGroup.host}>
-        {children}
-    </div>
-}
+CTABanner.Heading = Heading;
+CTABanner.ButtonGroup = ButtonGroup;

package/src/brand/Footer/Footer.styles.tsx

@@ -0,0 +1,21 @@
+import {css} from "@linaria/core";
+
+export const FooterHost = css`
+    position: relative;
+    border-top: 1px solid #f0f0f0;
+    padding: 32px;
+    background-color: #fff;
+`;
+
+export const FooterContainer = css`
+    margin: 0 auto;
+    max-width: 1200px;
+    text-align: center;
+`;
+
+export const FooterTextContainer = css`
+    line-height: 24px;
+    font-size: 14px;
+    font-weight: 500;
+    color: rgba(60, 60, 67, .78);
+`; 

package/src/brand/Footer/Footer.tsx

@@ -1,34 +1,14 @@
 import React from "react";
-import {css} from "@linaria/core";
-
-const $footer = {
-    host: css`
-        position: relative;
-        border-top: 1px solid #f0f0f0;
-        padding: 32px;
-        background-color: #fff;
-    `,
-    container: css`
-        margin: 0 auto;
-        max-width: 1200px;
-        text-align: center;
-    `,
-    textContainer: css`
-        line-height: 24px;
-        font-size: 14px;
-        font-weight: 500;
-        color: rgba(60, 60, 67, .78);
-    `
-}
+import * as cn from "./Footer.styles";
 
 export interface FooterProps {
     children?: React.ReactNode
 }
 
 export function Footer({children}: FooterProps) {
-    return <footer className={$footer.host}>
-        <div className={$footer.container}>
-            <div className={$footer.textContainer}>
+    return <footer className={cn.FooterHost}>
+        <div className={cn.FooterContainer}>
+            <div className={cn.FooterTextContainer}>
                 {children}
             </div>
         </div>

package/src/brand/TODO.md

@@ -0,0 +1 @@
+DELETE `brand`

package/src/coder/Code/Code.styles.tsx

@@ -1,50 +1,47 @@
 import {css} from "@linaria/core";
 
-export const $mark = {
-    host: css`
-        display: flex;
-        border-left-width: 4px;
-        border-color: transparent;
-        margin: 4px 0;
-    `,
-    line: css`
-        flex: 1 1 0%;
-    `,
-    $$annotated: css`
-        border-color: #60A5FA;
-        background-color: #EEF2FF;
-    `
-}
-
-export const $lineNumber = {
-    host: css`
-        margin: 0 12px 0px 4px;
-        //text-align: right;
-        user-select: none;
-        opacity: 0.5;
-    `
-}
-
-export const $code = {
-    host: css`
-        max-height: 400px;
-        background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%) !important;
-
-        margin: 0;
-        padding: 8px 16px;
-
-        border-top: 1px solid rgb(236, 236, 241);
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px;
-
-        font-size: 12px;
-        line-height: 20px;
-        white-space: pre-wrap;
-        word-break: break-all;
-
-        overflow-y: scroll;
-    `,
-    host$$full: css`
-        max-height: 100%;   
-    `
-}
+export const MarkHost = css`
+    display: flex;
+    border-left-width: 4px;
+    border-color: transparent;
+    margin: 4px 0;
+`;
+
+export const MarkLine = css`
+    flex: 1 1 0%;
+`;
+
+export const MarkAnnotated = css`
+    border-color: #60A5FA;
+    background-color: #EEF2FF;
+`;
+
+export const LineNumberHost = css`
+    margin: 0 12px 0px 4px;
+    //text-align: right;
+    user-select: none;
+    opacity: 0.5;
+`;
+
+export const CodeHost = css`
+    max-height: 400px;
+    background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%) !important;
+
+    margin: 0;
+    padding: 8px 16px;
+
+    border-top: 1px solid rgb(236, 236, 241);
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+
+    font-size: 12px;
+    line-height: 20px;
+    white-space: pre-wrap;
+    word-break: break-all;
+
+    overflow-y: scroll;
+`;
+
+export const CodeHostFull = css`
+    max-height: 100%;   
+`;

package/src/coder/Code/Code.tsx

@@ -4,8 +4,8 @@ import {InnerLine, Pre} from "codehike/code";
 import {Theme} from "@code-hike/lighter";
 
 import {CodeTheme, type CodeThemeBlockProps} from "../CodeTheme";
-import {$lineNumber, $mark, $code} from "./Code.styles.tsx";
-import {CodeLoader} from "./CodeLoader.tsx";
+import * as cn from "./Code.styles";
+import {CodeLoader} from "./CodeLoader";
 
 export interface CodeProps {
     codeblocks: CodeThemeBlockProps[];
@@ -30,7 +30,7 @@ Code.LineNumber = function LineNumber(props: any) {
         <>
         <span
             style={{minWidth: `${props.width}ch`}}
-            className={$lineNumber.host}
+            className={cn.LineNumberHost}
         >
           {props.lineNumber}
         </span>
@@ -41,17 +41,17 @@ Code.LineNumber = function LineNumber(props: any) {
 
 // TODO: fix any
 Code.Mark = function Mark(props: any) {
-    return <div className={`${$mark.host} ${props.annotation && $mark.$$annotated}`}>
+    return <div className={`${cn.MarkHost} ${props.annotation && cn.MarkAnnotated}`}>
         <InnerLine
             merge={props}
-            className={$mark.line}
+            className={cn.MarkLine}
         />
     </div>
 }
 
 // TODO: fix any
 Code.Bg = function CodeLine(props: any) {
-    return <span className={`${props.annotation && $mark.$$annotated}`}>
+    return <span className={`${props.annotation && cn.MarkAnnotated}`}>
         {props.children}
     </span>
 }
@@ -65,8 +65,8 @@ Code.Pre = function CodePre(props: {
 ) {
     return <Pre
         className={`
-            ${$code.host}
-            ${props?.size === "full" && $code.host$$full}
+            ${cn.CodeHost}
+            ${props?.size === "full" && cn.CodeHostFull}
             ${props.className}
         `}
         style={props.codeblock?.style || props.codeblock?.style}

package/src/coder/Code/CodeLoader.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-import {$code} from "./Code.styles.tsx";
+import * as cn from "./Code.styles";
 import {Loader} from "../../ui";
 
 export function CodeLoader() {
-    return <div className={$code.host}>
+    return <div className={cn.CodeHost}>
         <Loader/>
     </div>
 }

package/src/coder/Code/annotations.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import {AnnotationHandler} from "codehike/code";
 
-import {Code} from "./Code.tsx";
+import {Code} from "./Code";
 
 const markAnnotation: AnnotationHandler = {
     name: "mark",

package/src/coder/CodeCopy/CodeCopy.styles.tsx

@@ -0,0 +1,19 @@
+import {css} from "@linaria/core";
+
+export const CodeCopyHost = css`
+    all: unset;
+    
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    border-radius: 6px;
+    padding: 6px;
+
+    &:hover {
+        transition: ease-in 0.1s;
+        background: #e3e3eb;
+    }
+`; 

package/src/coder/CodeCopy/CodeCopy.tsx

@@ -1,9 +1,7 @@
 import React, {useState} from "react"
 import {Copy, CheckCheck} from "lucide-react"
 
-import {
-    $copy
-} from "./CodeCopy.style"
+import * as cn from "./CodeCopy.styles"
 
 export interface CodeCopyProps {
     text: string
@@ -24,7 +22,7 @@ export function CodeCopy({text}: CodeCopyProps) {
         <button
             aria-label="Copy to clipboard"
             onClick={onClick}
-            className={$copy.host}
+            className={cn.CodeCopyHost}
         >
             {copied ? <CheckCheck size={16}/> : <Copy size={16}/>}
         </button>

package/src/coder/CodeTabs/CodeTabs.styles.tsx

@@ -1,100 +1,104 @@
 import {css} from "@linaria/core";
 
-export const $sample = {
-    host: css`
-        overflow: hidden;
-        min-width: 0;
-        //flex: 1 1 0;
-        //max-width: 512px;
-
-        border: 1px solid rgb(236, 236, 241);
-        border-radius: 16px;
-    `,
-    pre$$single: css`
-        border: none !important; // TODO: bad, find another way - CodeSample another kind?
-    `
-}
-
-export const $languages = {
-    host: css`
-        display: flex;
-        flex: 1 1 0%;
-        //padding: 8px 0px;
-
-        background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%) !important;
-        
-        border-top-right-radius: 10px;
-        border-top-left-radius: 10px;
-        border-bottom: 0px;
-
-        min-width: 0;
-    `,
-    host$$single: css`
-      height: 0;
-    `,
-    list: css`
-        display: flex;
-        flex-grow: 1;
-        justify-content: end;
-        gap: 8px;
-        padding: 0 10px;
-    `,
-    button: css`
-        all: unset;
-
-        cursor: pointer;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        border-radius: 6px;
-        padding: 6px;
-
-        font-size: 14px;
-        color: rgb(53, 55, 64);
-        
-        &[data-state="active"] {
-            color: rgb(112, 81, 212);
-            border-bottom: 1px solid rgb(112, 81, 212);
-            border-bottom-left-radius: 0px;
-            border-bottom-right-radius: 0px;
-        }
-        
-        &:hover {
-            transition: ease-in 0.1s;
-            background: #e3e3eb;
-        }
-    `,
-    description: css`
-        display: flex;
-        align-items: center;
-        gap: 4px;
-
-        font-size: 14px;
-        color: rgb(53, 55, 64);
-        
-        margin-left: 4px;
-        margin-right: 4px;
-    `,
-    description$item: css`
-        display: flex;
-        padding-left: 16px;
-        padding-right: 16px;
-        flex: 1 1 0%;
-        gap: 16px;
-        border-radius: 4px;
-    `,
-    copy: css`
-        display: flex;
-        padding-left: 8px;
-        padding-right: 8px;
-        align-items: center;
-    `,
-    copy$$single: css`
-        top: 17px;
-        position: relative;
-        right: 5px;
-    `
-}
+export const CodeTabsHost = css`
+    overflow: hidden;
+    min-width: 0;
+    //flex: 1 1 0;
+    //max-width: 512px;
+
+    border: 1px solid rgb(236, 236, 241);
+    border-radius: 16px;
+`;
+
+export const CodeTabsPreSingle = css`
+    border: none !important; // TODO: bad, find another way - CodeSample another kind?
+`;
+
+export const CodeTabsLanguagesHost = css`
+    display: flex;
+    flex: 1 1 0%;
+    //padding: 8px 0px;
+
+    background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%) !important;
+    
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    border-bottom: 0px;
+
+    min-width: 0;
+`;
+
+export const CodeTabsLanguagesHostSingle = css`
+    height: 0;
+`;
+
+export const CodeTabsLanguagesList = css`
+    display: flex;
+    flex-grow: 1;
+    justify-content: end;
+    gap: 8px;
+    padding: 0 10px;
+`;
+
+export const CodeTabsLanguagesButton = css`
+    all: unset;
+
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 6px;
+    padding: 6px;
+
+    font-size: 14px;
+    color: rgb(53, 55, 64);
+    
+    &[data-state="active"] {
+        color: rgb(112, 81, 212);
+        border-bottom: 1px solid rgb(112, 81, 212);
+        border-bottom-left-radius: 0px;
+        border-bottom-right-radius: 0px;
+    }
+    
+    &:hover {
+        transition: ease-in 0.1s;
+        background: #e3e3eb;
+    }
+`;
+
+export const CodeTabsLanguagesDescription = css`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    font-size: 14px;
+    color: rgb(53, 55, 64);
+    
+    margin-left: 4px;
+    margin-right: 4px;
+`;
+
+export const CodeTabsLanguagesDescriptionItem = css`
+    display: flex;
+    padding-left: 16px;
+    padding-right: 16px;
+    flex: 1 1 0%;
+    gap: 16px;
+    border-radius: 4px;
+`;
+
+export const CodeTabsLanguagesCopy = css`
+    display: flex;
+    padding-left: 8px;
+    padding-right: 8px;
+    align-items: center;
+`;
+
+export const CodeTabsLanguagesCopySingle = css`
+    top: 17px;
+    position: relative;
+    right: 5px;
+`;