@xyd-js/atlas 0.1.0-xyd.12 → 0.1.0-xyd.13

package/src/components/Code/CodeSample/CodeSample.tsx

@@ -13,13 +13,7 @@ import {
 } from "@/components/Code";
 import {theme as defaultTheme} from "@/components/Code/default-theme" // TODO: support multiple themes
 import {withLocalStored} from "@/components/Code/CodeSample/withLocalStored";
-import {
-    $sample,
-    $languages,
-    $code,
-    $mark,
-    $lineNumber
-} from "./CodeSample.styles";
+import * as cn from "./CodeSample.styles";
 import {CodeLoader} from "@xyd-js/components/coder";
 
 // TODO: try to use codehiki in build time / ASYNC !!! - we need rr server-components
@@ -67,23 +61,23 @@ export function CodeSample(props: CodeSampleProps) {
 
     return (
         <$$LocalStoredTab
-            className={$sample.host}
+            className={cn.CodeSampleHost}
             style={highlighted[0]?.style}
             localStorageKey={`preferredLanguage[${name}]`}
             defaultValue={highlighted[0]?.meta}
         >
-            <div className={$languages.host}>
+            <div className={cn.CodeSampleLanguagesHost}>
                 <$Description description={props.description}/>
 
-                <TabsPrimitive.List className={$languages.list}>
+                <TabsPrimitive.List className={cn.CodeSampleLanguagesList}>
                     {props.codeblocks?.map(({meta}, i) => (
-                        <TabsPrimitive.Trigger value={meta!} key={i} className={$languages.button}>
+                        <TabsPrimitive.Trigger value={meta!} key={i} className={cn.CodeSampleLanguagesButton}>
                             {meta}
                         </TabsPrimitive.Trigger>
                     ))}
                 </TabsPrimitive.List>
 
-                <div className={$languages.copy}>
+                <div className={cn.CodeSampleLanguagesCopy}>
                     {props.codeblocks?.map((codeblock, i) => (
                         <TabsPrimitive.Content value={codeblock.meta!} asChild key={i}>
                             <CodeCopy text={codeblock.value}/>
@@ -95,7 +89,7 @@ export function CodeSample(props: CodeSampleProps) {
             {highlighted?.map((codeblock, i) => (
                 <TabsPrimitive.Content value={codeblock.meta} key={i}>
                     <Pre
-                        className={$code.host}
+                        className={cn.CodeSampleCodeHost}
                         style={codeblock?.style || codeblock?.style}
                         code={codeblock}
                         handlers={[mark, lineNumber]}
@@ -107,8 +101,8 @@ export function CodeSample(props: CodeSampleProps) {
 }
 
 function $Description(props: { description: string }) {
-    return <div className={$languages.description}>
-        <div className={$languages.description$item}>
+    return <div className={cn.CodeSampleLanguagesDescription}>
+        <div className={cn.CodeSampleLanguagesDescriptionItem}>
             {props.description}
         </div>
     </div>
@@ -118,10 +112,10 @@ const mark: AnnotationHandler = {
     name: "Mark",
     Line: ({annotation, ...props}) => {
         return (
-            <div className={`${$mark.host} ${annotation && $mark.$$annotated}`}>
+            <div className={`${cn.CodeSampleMarkHost} ${annotation && cn.CodeSampleMarkAnnotated}`}>
                 <InnerLine
                     merge={props}
-                    className={$mark.line}
+                    className={cn.CodeSampleMarkLine}
                 />
             </div>
         )
@@ -137,7 +131,7 @@ const lineNumber: AnnotationHandler = {
             <>
         <span
             style={{minWidth: `${width}ch`}}
-            className={$lineNumber.host}
+            className={cn.CodeSampleLineNumberHost}
         >
           {props.lineNumber}
         </span>

package/src/components/Code/CodeSampleButtons/CodeSampleButtons.styles.tsx

@@ -1,137 +1,59 @@
 import {css} from "@linaria/core";
 
-export const $sample = {
-    host: css`
-        position: relative;
-        max-width: 100%;
-    `,
-    container: css`
-        display: flex;
-        align-items: center;
-        border-radius: 8px;
-        background-color: var(--XydAtlas-Component-Code-SampleButtons__color-containerBackground);
-    `
-}
-
-export const $arrow = {
-    host: css`
-        padding: 8px;
-        background-color: #ffffff;
-        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    `,
-    icon: css`
-        width: 16px;
-        height: 16px;
-    `
-}
-
-export const $scroller = {
-    host: css`
-        overflow-x: auto;
-        flex-grow: 1;
-    `,
-    container: css`
-        display: inline-flex;
-        gap: 4px;
-
-        padding: 4px;
-        margin-left: 4px;
-    `
-}
-
-export const $button = {
-    host: css`
-        padding: 0.5rem 1rem;
-
-        border-radius: 0.375rem;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        font-weight: 500;
-        white-space: nowrap;
-
-        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 300ms;
-
-        color: var(--XydAtlas-Component-Code-SampleButtons__color);
-        
-        &:hover {
-            color: var(--XydAtlas-Component-Code-SampleButtons__color--active);
-        }
-    `,
-    $$active: css`
+export const CodeSampleButtonsHost = css`
+    position: relative;
+    max-width: 100%;
+`;
+
+export const CodeSampleButtonsContainer = css`
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    background-color: var(--XydAtlas-Component-Code-SampleButtons__color-containerBackground);
+`;
+
+export const CodeSampleButtonsArrowHost = css`
+    padding: 8px;
+    background-color: #ffffff;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+`;
+
+export const CodeSampleButtonsArrowIcon = css`
+    width: 16px;
+    height: 16px;
+`;
+
+export const CodeSampleButtonsScrollerHost = css`
+    overflow-x: auto;
+    flex-grow: 1;
+`;
+
+export const CodeSampleButtonsScrollerContainer = css`
+    display: inline-flex;
+    gap: 4px;
+    padding: 4px;
+    margin-left: 4px;
+`;
+
+export const CodeSampleButtonsButtonHost = css`
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    white-space: nowrap;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    color: var(--XydAtlas-Component-Code-SampleButtons__color);
+    
+    &:hover {
         color: var(--XydAtlas-Component-Code-SampleButtons__color--active);
-        background-color: var(--XydAtlas-Component-Code-SampleButtons__color-background--active);
-        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    `
-}
-
-/*
-import {css} from "@linaria/core";
-
-export const $sample = {
-    host: css`
-        position: relative;
-        max-width: 100%;
-    `,
-    container: css`
-        display: flex;
-        align-items: center;
-        border-radius: 8px;
-        background-color: #F3F4F6;
-    `
-}
-
-export const $arrow = {
-    host: css`
-        padding: 8px;
-        background-color: #ffffff;
-        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    `,
-    icon: css`
-        width: 16px;
-        height: 16px;
-    `
-}
-
-export const $scroller = {
-    host: css`
-        overflow-x: auto;
-        flex-grow: 1;
-    `,
-    container: css`
-        display: inline-flex;
-        gap: 4px;
-
-        padding: 4px;
-        margin-left: 4px;
-    `
-}
-
-export const $button = {
-    host: css`
-        padding: 0.5rem 1rem;
-
-        border-radius: 0.375rem;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        font-weight: 500;
-        white-space: nowrap;
-
-        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 300ms;
-
-        color: #6B7280;
-
-        &:hover {
-            color: #111827;
-        }
-    `,
-    $$active: css`
-        color: #111827;
-        background-color: #ffffff;
-        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    `
-}
- */
+    }
+`;
+
+export const CodeSampleButtonsButtonActive = css`
+    color: var(--XydAtlas-Component-Code-SampleButtons__color--active);
+    background-color: var(--XydAtlas-Component-Code-SampleButtons__color-background--active);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+`;

package/src/components/Code/CodeSampleButtons/CodeSampleButtons.tsx

@@ -5,18 +5,11 @@ import {Example} from "@xyd-js/uniform";
 
 import {MDXReference, mdxValue} from "@/utils/mdx";
 
-import {
-    $sample,
-    $arrow,
-    $scroller,
-    $button
-} from "./CodeSampleButtons.styles";
+import * as cn from "./CodeSampleButtons.styles";
 
 export interface CodeExampleButtonsProps {
     examples: MDXReference<Example[]>
-
     activeExample: MDXReference<Example> | null
-
     onClick: (example: MDXReference<Example>) => void
 }
 
@@ -47,40 +40,40 @@ export function CodeExampleButtons({examples, activeExample, onClick}: CodeExamp
     }
 
     return (
-        <div className={$sample.host}>
-            <div className={$sample.container}>
+        <div className={cn.CodeSampleButtonsHost}>
+            <div className={cn.CodeSampleButtonsContainer}>
                 {showLeftArrow && (
                     <button
                         onClick={() => scroll('left')}
-                        className={$arrow.host}
+                        className={cn.CodeSampleButtonsArrowHost}
                     >
-                        <ChevronLeft className={$arrow.icon}/>
+                        <ChevronLeft className={cn.CodeSampleButtonsArrowIcon}/>
                     </button>
                 )}
                 <div
                     ref={scrollContainerRef}
                     onScroll={handleScroll}
-                    className={$scroller.host}
+                    className={cn.CodeSampleButtonsScrollerHost}
                 >
-                    <div className={$scroller.container}>
+                    <div className={cn.CodeSampleButtonsScrollerContainer}>
                         {examples?.map((example) => (
-                            <$SampleButton
+                            <SampleButton
                                 key={example.codeblock.title}
                                 onClick={() => onClick(example)}
                                 example={example}
                                 activeExample={activeExample}
                             >
                                 {mdxValue(example.codeblock.title || null)}
-                            </$SampleButton>
+                            </SampleButton>
                         ))}
                     </div>
                 </div>
                 {showRightArrow && (
                     <button
                         onClick={() => scroll('right')}
-                        className={$arrow.host}
+                        className={cn.CodeSampleButtonsArrowHost}
                     >
-                        <ChevronRight className={$arrow.icon}/>
+                        <ChevronRight className={cn.CodeSampleButtonsArrowIcon}/>
                     </button>
                 )}
             </div>
@@ -88,7 +81,7 @@ export function CodeExampleButtons({examples, activeExample, onClick}: CodeExamp
     )
 }
 
-function $SampleButton({onClick, children, activeExample, example}: {
+function SampleButton({onClick, children, activeExample, example}: {
     onClick: () => void,
     children: React.ReactNode,
     example: MDXReference<Example>,
@@ -99,7 +92,7 @@ function $SampleButton({onClick, children, activeExample, example}: {
 
     return <button
         onClick={onClick}
-        className={`${$button.host} ${markExampleAsActive && $button.$$active}`}
+        className={`${cn.CodeSampleButtonsButtonHost} ${markExampleAsActive && cn.CodeSampleButtonsButtonActive}`}
     >
         {children}
     </button>

package/src/components/Code/CodeCopy/CodeCopy.style.tsx

@@ -1,19 +0,0 @@
-import {css} from "@linaria/core";
-
-export const $copy = {
-    host: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        padding: 8px;
-
-        border-radius: 6px;
-
-        cursor: pointer;
-
-        &:hover {
-            background: var(--XydAtlas-Component-Code-Copy__color-background--active);
-        }
-    `
-}

package/src/utils/linaria.ts

@@ -1,20 +0,0 @@
-import {generateClassName} from '@linaria/utils';
-
-export function createCustomClassName(moduleName: string) {
-    return (componentPath: string, styleName: string, hash: string) => {
-        // Convert component path to PascalCase
-        const componentParts = componentPath.split('/');
-        const componentName = componentParts
-            .map(part => part.charAt(0).toUpperCase() + part.slice(1))
-            .join('-');
-
-        // Convert style name to camelCase
-        const styleNameFormatted = styleName
-            .replace(/^[A-Z]/, c => c.toLowerCase())
-            .replace(/([A-Z])/g, c => `-${c.toLowerCase()}`);
-
-        // Construct the class name following the pattern:
-        // Module-Component-ComponentName__styleName_hash
-        return `${moduleName}-Component-${componentName}__${styleNameFormatted}_${hash}`;
-    };
-}