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

package/rollup.config.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { fileURLToPath } from 'url';
+import {fileURLToPath} from 'url';
 
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
@@ -66,6 +66,25 @@ export default [
                         '@babel/preset-react'
                     ],
                 },
+                classNameSlug: (hash, title, {file}) => {
+                    // Get the full path after 'src/components/'
+                    const pathParts = file.split('/');
+                    const componentsIndex = pathParts.indexOf('src');
+                    if (componentsIndex === -1) return `XydComponents-Component-${title}`;
+
+                    // Get everything after 'components' directory
+                    const componentPath = pathParts
+                        .slice(componentsIndex + 1)
+                        .filter(part => !part.endsWith('.styles.tsx')) // Remove styles.tsx
+                        .join('-');
+
+                    // Use the title as the style name (it's already the variable name)
+                    const styleName = title.replace(/^\$/, ''); // Remove $ prefix if present
+
+                    // TODO: in the future hash + system to override styles for specific components if hash
+                    return `XydComponents-Component-${componentPath}__${styleName}`;
+                    // return `XydComponents-Component-${componentPath}__${styleName}_${hash}`;
+                }
             }),
             postcss({
                 extract: true,

package/src/brand/Button/Button.styles.tsx

@@ -0,0 +1,31 @@
+import {css} from "@linaria/core";
+
+export const ButtonHost = css`
+    display: inline-block;
+    border: 1px solid transparent;
+    text-align: center;
+    font-weight: 600;
+    white-space: nowrap;
+    border-radius: 20px;
+    padding: 0 20px;
+    line-height: 38px;
+    font-size: 14px;
+    border-color: transparent;
+    color: #3c3c43;
+    background-color: #f7f7f8;
+
+    transition: color .25s, border-color .25s, background-color .25s;
+
+    &:hover {
+        background: #e3e3e6;
+    }
+`;
+
+export const ButtonHostSecondary = css`
+    color: #fff;
+    background-color: rgb(112, 81, 212);
+
+    &:hover {
+        background-color: rgb(95, 59, 211)
+    }
+`; 

package/src/brand/Button/Button.tsx

@@ -1,37 +1,5 @@
 import React from "react";
-import {css} from "@linaria/core";
-
-const $button = {
-    host: css`
-        display: inline-block;
-        border: 1px solid transparent;
-        text-align: center;
-        font-weight: 600;
-        white-space: nowrap;
-        border-radius: 20px;
-        padding: 0 20px;
-        line-height: 38px;
-        font-size: 14px;
-        border-color: transparent;
-        color: #3c3c43;
-        background-color: #f7f7f8;
-
-        transition: color .25s, border-color .25s, background-color .25s;
-
-        &:hover {
-            background: #e3e3e6;
-        }
-    `,
-
-    host$$secondary: css`
-        color: #fff;
-        background-color: rgb(112, 81, 212);
-
-        &:hover {
-            background-color: rgb(95, 59, 211)
-        }
-    `
-}
+import * as cn from "./Button.styles";
 
 export interface ButtonProps {
     children: React.ReactNode
@@ -40,8 +8,8 @@ export interface ButtonProps {
 
 export function Button({children, kind}: ButtonProps) {
     return <button className={`
-        ${$button.host}
-        ${kind === "secondary" && $button.host$$secondary}
+        ${cn.ButtonHost}
+        ${kind === "secondary" && cn.ButtonHostSecondary}
     `}>
         {children}
     </button>

package/src/brand/CTABanner/CTABanner.styles.tsx

@@ -0,0 +1,82 @@
+import {css} from "@linaria/core";
+
+export const CTABannerHost = css`
+    padding: 20px;
+`;
+
+export const CTABannerContainer = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 80px;
+`;
+
+export const CTABannerHero = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 40px;
+`;
+
+export const CTABannerHeadingEffect = 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
+
+    @keyframes wave {
+        0% {
+            background-position: 50% 50%;
+        }
+        50% {
+            background-position: 0% 50%;
+        }
+        100% {
+            background-position: 50% 50%;
+        }
+    }
+`;
+
+export const CTABannerHeadingHost = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+`;
+
+export const CTABannerHeadingTitle = css`
+    font-size: 76px;
+    font-weight: 900;
+    text-align: center;
+    letter-spacing: 3px;
+    margin: 0;
+`;
+
+export const CTABannerHeadingSubtitle = css`
+    color: #3c3c43;
+    font-size: 46px;
+    font-weight: 600;
+    text-align: center;
+`;
+
+export const CTABannerButtonGroupHost = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+`; 

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,7 +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 * as cn from "./Code.styles";
+import {CodeLoader} from "./CodeLoader";
 
 export interface CodeProps {
     codeblocks: CodeThemeBlockProps[];
@@ -13,19 +14,13 @@ export interface CodeProps {
 }
 
 export function Code(props: CodeProps) {
-    return <Suspense fallback={<$Loading/>}>
+    return <Suspense fallback={<CodeLoader/>}>
         <CodeTheme codeblocks={props.codeblocks} theme={props.theme}>
             {props.children}
         </CodeTheme>
     </Suspense>
 }
 
-function $Loading() {
-    return <>
-        loading...
-    </>
-}
-
 // TODO: fix any
 Code.LineNumber = function LineNumber(props: any) {
     if (!props.children || !props.children.length) {
@@ -35,7 +30,7 @@ Code.LineNumber = function LineNumber(props: any) {
         <>
         <span
             style={{minWidth: `${props.width}ch`}}
-            className={$lineNumber.host}
+            className={cn.LineNumberHost}
         >
           {props.lineNumber}
         </span>
@@ -46,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>
 }
@@ -64,13 +59,15 @@ Code.Bg = function CodeLine(props: any) {
 Code.Pre = function CodePre(props: {
                                 codeblock: HighlightedCode,
                                 size?: "full",
-                                handlers: AnnotationHandler[]
+                                handlers: AnnotationHandler[],
+                                className?: string,
                             }
 ) {
     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}
         code={props.codeblock}

package/src/coder/Code/CodeLoader.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+import * as cn from "./Code.styles";
+import {Loader} from "../../ui";
+
+export function CodeLoader() {
+    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/Code/index.ts

@@ -5,8 +5,11 @@ export type {
     CodeProps
 } from "./Code"
 export {
-    Code
+    Code,
 } from "./Code"
+export {
+    CodeLoader,
+} from "./CodeLoader"
 export {
     highlight
 } from "./highlight"

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>