@xyd-js/atlas 0.1.0-xyd.8 → 0.1.0-xyd.99

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

@@ -1,143 +1,58 @@
 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(--atlas-comp-code-sample_buttons-container-background);
-        background-color: #F3F4F6;
-    `
-}
-
-export const $arrow = {
-    host: css`
-        padding: 8px;
-        //background-color: var(--atlas-comp-code-sample_buttons-background--active);
-        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(--atlas-comp-code-sample_buttons-color);
-        color: #6B7280;
-        
-        &:hover {
-            //color: var(--atlas-comp-code-sample_buttons-color--active);
-            color: #111827;
-        }
-    `,
-    $$active: css`
-        //color: var(--atlas-comp-code-sample_buttons-color--active);
-        //background-color: var(--atlas-comp-code-sample_buttons-background--active);
-        color: #111827;
-        background-color: #ffffff;
-        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 CodeSampleButtonsHost = css`
+    position: relative;
+    max-width: 100%;
+`;
+
+export const CodeSampleButtonsContainer = css`
+    display: inline-flex;
+    width: 100%;
+    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;
+    font-weight: var(--xyd-font-weight-semibold);
+`;
+
+export const CodeSampleButtonsScrollerContainer = css`
+    display: inline-flex;
+    gap: 4px;
+    padding: 4px;
+    margin-left: 4px;
+`;
+
+export const CodeSampleButtonsButtonHost = css`
+    padding: 4px 16px;
+    border-radius: 0.375rem;
+    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);
+    }
+`;
+
+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

@@ -3,21 +3,12 @@ import {ChevronLeft, ChevronRight} from "lucide-react"
 
 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
+    examples: Example[]
+    activeExample: Example | null
+    onClick: (example: Example) => void
 }
 
 export function CodeExampleButtons({examples, activeExample, onClick}: CodeExampleButtonsProps) {
@@ -47,40 +38,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>
+                                {(example.codeblock.title || null)}
+                            </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,18 +79,18 @@ 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>,
-    activeExample: MDXReference<Example> | null,
+    example: Example,
+    activeExample: Example | null,
 }) {
     const markExampleAsActive = (activeExample?.description && activeExample?.description === example?.description) ||
         (activeExample?.codeblock?.title && activeExample?.codeblock?.title === example.codeblock.title)
 
     return <button
         onClick={onClick}
-        className={`${$button.host} ${markExampleAsActive && $button.$$active}`}
+        className={`${cn.CodeSampleButtonsButtonHost} ${markExampleAsActive && cn.CodeSampleButtonsButtonActive}`}
     >
         {children}
     </button>

package/src/components/Code/index.ts

@@ -1,6 +1,2 @@
-export * from "./CodeCopy";
-
-export * from "./CodeSample";
-
 export * from "./CodeSampleButtons";