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

package/src/components/ApiRef/ApiRefProperties/ApiRefProperties.tsx

@@ -2,40 +2,31 @@ import React, {useState} from "react";
 import {DefinitionProperty} from "@xyd-js/uniform";
 
 import {MDXReference, mdxValue} from "@/utils/mdx"
-import {
-    $ul,
-    $li,
-    $description,
-    $dl,
-    $propNameCode,
-    $propTypeCode,
-    $subProps,
-    $propToggle,
-} from "./ApiRefProperties.styles";
+import * as cn from "./ApiRefProperties.styles";
 
 export interface ApiRefPropertiesProps {
     properties: MDXReference<DefinitionProperty[]>
 }
 
 export function ApiRefProperties({properties}: ApiRefPropertiesProps) {
-    return <ul className={$ul.host}>
+    return <ul className={cn.ApiRefPropertiesUlHost}>
         {
             properties?.map((property, i) => (
-                <li className={$li.host} key={i}>
-                    <dl className={$dl.host}>
-                        <$PropName name="name" value={mdxValue(property.name)}/>
-                        <$PropType
+                <li className={cn.ApiRefPropertiesLiHost} key={i}>
+                    <dl className={cn.ApiRefPropertiesDlHost}>
+                        <PropName name="name" value={mdxValue(property.name)}/>
+                        <PropType
                             name="type"
                             value={mdxValue(property.type)}
                             href={propertyTypeHref(property)}
                         />
                     </dl>
-                    <div className={$description.host}>
+                    <div className={cn.ApiRefPropertiesDescriptionHost}>
                         {property.children}
                     </div>
                     {
                         property.properties ?
-                            <$SubProperties
+                            <SubProperties
                                 properties={property.properties as MDXReference<DefinitionProperty>[]}
                             /> : null
                     }
@@ -45,21 +36,21 @@ export function ApiRefProperties({properties}: ApiRefPropertiesProps) {
     </ul>
 }
 
-function $PropName({name, value}: { name: string, value: string }) {
+function PropName({name, value}: { name: string, value: string }) {
     return <>
         <dd>
-            <code className={$propNameCode.host}>{value}</code>
+            <code className={cn.ApiRefPropertiesPropNameCodeHost}>{value}</code>
         </dd>
     </>
 }
 
-function $PropType({name, value, href}: { name: string, value: string, href?: string }) {
+function PropType({name, value, href}: { name: string, value: string, href?: string }) {
     return <>
         <dd>
-            <code className={$propTypeCode.host}>
+            <code className={cn.ApiRefPropertiesPropTypeCodeHost}>
                 {
                     href
-                        ? <a className={$propTypeCode.link} href={href}>{value}</a>
+                        ? <a className={cn.ApiRefPropertiesPropTypeCodeLink} href={href}>{value}</a>
                         : value
                 }
             </code>
@@ -67,37 +58,37 @@ function $PropType({name, value, href}: { name: string, value: string, href?: st
     </>
 }
 
-function $SubProperties({properties}: { properties: MDXReference<DefinitionProperty>[] }) {
+function SubProperties({properties}: { properties: MDXReference<DefinitionProperty>[] }) {
     const [expanded, setExpanded] = useState(false)
 
     return <>
-        <$PropToggle
+        <PropToggle
             onClick={() => setExpanded(!expanded)}
             isExpanded={expanded}
         />
 
         <div
-            className={`${$subProps.host} ${expanded && $subProps.host$$expanded}`}
+            className={`${cn.ApiRefPropertiesSubPropsHost} ${expanded && cn.ApiRefPropertiesSubPropsHostExpanded}`}
         >
-            <div className={$subProps.box}>
-                <ul role="list" className={$subProps.ul}>
+            <div className={cn.ApiRefPropertiesSubPropsBox}>
+                <ul role="list" className={cn.ApiRefPropertiesSubPropsUl}>
                     {
                         properties?.map((prop, i) => {
-                            return <li className={$subProps.li} key={i}>
-                                <dl className={$dl.host}>
-                                    <$PropName name="name" value={mdxValue(prop.name)}/>
-                                    <$PropType
+                            return <li className={cn.ApiRefPropertiesSubPropsLi} key={i}>
+                                <dl className={cn.ApiRefPropertiesDlHost}>
+                                    <PropName name="name" value={mdxValue(prop.name)}/>
+                                    <PropType
                                         name="type"
                                         value={mdxValue(prop.type)}
                                         href={propertyTypeHref(prop)}
                                     />
                                 </dl>
-                                <div className={$description.host}>
+                                <div className={cn.ApiRefPropertiesDescriptionHost}>
                                     {prop.children}
                                 </div>
                                 {
                                     prop.properties ?
-                                        <$SubProperties
+                                        <SubProperties
                                             properties={prop.properties as MDXReference<DefinitionProperty>[]}/> : null
                                 }
                             </li>
@@ -109,19 +100,18 @@ function $SubProperties({properties}: { properties: MDXReference<DefinitionPrope
     </>
 }
 
-
 interface PropsToggleProps {
     isExpanded: boolean
     onClick: () => void
 }
 
-function $PropToggle(props: PropsToggleProps) {
+function PropToggle(props: PropsToggleProps) {
     return (
         <button
             aria-expanded={props.isExpanded}
             aria-controls="chat/object-usage_table"
             onClick={props.onClick}
-            className={$propToggle.host}
+            className={cn.ApiRefPropertiesPropToggleHost}
         >
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -140,7 +130,7 @@ function $PropToggle(props: PropsToggleProps) {
                     clipRule="evenodd"
                 />
             </svg>
-            <span className={$propToggle.link}>{props.isExpanded ? 'Hide properties' : 'Show properties'}</span>
+            <span className={cn.ApiRefPropertiesPropToggleLink}>{props.isExpanded ? 'Hide properties' : 'Show properties'}</span>
         </button>
     )
 }

package/src/components/ApiRef/ApiRefSamples/ApiRefSamples.styles.tsx

@@ -1,28 +1,23 @@
 import {css} from "@linaria/core";
 
-export const $container = {
-    host: css`
-        position: sticky;
-        top: 6rem;
+export const ApiRefSamplesContainerHost = css`
+    position: sticky;
+    top: 6rem;
+    display: flex;
+    gap: 32px;
+    flex-direction: column;
 
-        display: flex;
-        gap: 32px;
-        flex-direction: column;
+    &:first-child {
+        margin-top: 0;
+    }
 
-        &:first-child {
-            margin-top: 0;
-        }
+    &:last-child {
+        margin-bottom: 0;
+    }
+`;
 
-        &:last-child {
-            margin-bottom: 0;
-        }
-    `
-}
-
-export const $group = {
-    host: css`
-        gap: 10px;
-        display: flex;
-        flex-direction: column;
-    `
-}
+export const ApiRefSamplesGroupHost = css`
+    gap: 10px;
+    display: flex;
+    flex-direction: column;
+`;

package/src/components/ApiRef/ApiRefSamples/ApiRefSamples.tsx

@@ -5,17 +5,14 @@ import {MDXReference} from "@/utils/mdx"
 import {CodeExampleButtons, CodeSample} from "@/components/Code";
 import type {MDXCodeSampleBlock} from "@/components/Code/CodeSample/CodeSample";
 
-import {
-    $container,
-    $group
-} from "./ApiRefSamples.styles";
+import * as cn from "./ApiRefSamples.styles";
 
 export interface ApiRefSamplesProps {
     examples: MDXReference<ExampleRoot>
 }
 
 export function ApiRefSamples({examples}: ApiRefSamplesProps) {
-    return <div className={$container.host}>
+    return <div className={cn.ApiRefSamplesContainerHost}>
         {
             examples.groups?.map(({description, examples}, i) => {
                 const [activeExample, setActiveExample] = useState<MDXReference<Example> | null>(examples?.[0])
@@ -24,7 +21,7 @@ export function ApiRefSamples({examples}: ApiRefSamplesProps) {
                     return tab.code as unknown as MDXCodeSampleBlock // TODO: because atlas use mdx uniform reference - we need to unify it !!!
                 })
 
-                return <div key={i} className={$group.host}>
+                return <div key={i} className={cn.ApiRefSamplesGroupHost}>
                     {
                         examples?.length > 1
                             ? <CodeExampleButtons

package/src/components/Atlas/Atlas.styles.tsx

@@ -1,7 +1,5 @@
 import {css} from "@linaria/core";
 
-export const $atlas = {
-    host: css`
-        width: 100%;
-    `
-}
+export const AtlasHost = css`
+    width: 100%;
+`;

package/src/components/Atlas/Atlas.tsx

@@ -5,21 +5,18 @@ import {Reference} from "@xyd-js/uniform";
 import {MDXReference} from "@/utils/mdx";
 import {ApiRefItem} from "@/components/ApiRef";
 
-import {
-    $atlas
-} from "@/components/Atlas/Atlas.styles";
+import * as cn from "@/components/Atlas/Atlas.styles";
 
 export interface AtlasProps {
     references: MDXReference<Reference[]> | []
 }
 
 export function Atlas(props: AtlasProps) {
-    return <div className={$atlas.host}>
+    return <div className={cn.AtlasHost}>
         {
             props.references?.map((reference, i) => <div key={i}>
                     <ApiRefItem
                         reference={{
-
                             ...reference
                         }}
                     />

package/src/components/Atlas/AtlasLazy/AtlasLazy.styles.tsx

@@ -1,10 +1,9 @@
 import {css} from "@linaria/core";
 
-export const $item = {
-    host: css`
-        padding: 16px 0;
-    `,
-    $$first: css`
-        padding: 4px 0;
-    `
-}
+export const AtlasLazyItemHost = css`
+    padding: 16px 0;
+`;
+
+export const AtlasLazyItemFirst = css`
+    padding: 4px 0;
+`;

package/src/components/Atlas/AtlasLazy/AtlasLazy.tsx

@@ -4,9 +4,7 @@ import {Reference} from "@xyd-js/uniform";
 
 import {MDXReference} from "@/utils/mdx";
 import {ApiRefItem} from "@/components/ApiRef";
-import {
-    $item
-} from "./AtlasLazy.styles";
+import * as cn from "./AtlasLazy.styles";
 
 export interface AtlasLazyProps {
     references: MDXReference<Reference>[]
@@ -21,7 +19,7 @@ export function AtlasLazy(props: AtlasLazyProps) {
             key={i}
             // TODO: slug should be passed from reference or somrthing
             // ref={`api-reference/${reference.title}` === slug ? targetRef : null} // Attach ref to the 30th item
-            className={`${$item.host} ${i === 0 && $item.$$first}`}
+            className={`${cn.AtlasLazyItemHost} ${i === 0 && cn.AtlasLazyItemFirst}`}
             // TODO: slug prefix props
             data-slug={`${props.urlPrefix}/${reference.canonical?.title}`}
         >

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

@@ -0,0 +1,17 @@
+import {css} from "@linaria/core";
+
+export const CodeCopyHost = 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/components/Code/CodeCopy/CodeCopy.tsx

@@ -1,9 +1,7 @@
 import React, {useState} from "react"
 import {Copy, CopyCheck, 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/components/Code/CodeSample/CodeSample.styles.tsx

@@ -1,134 +1,131 @@
 import {css} from "@linaria/core";
 
-export const $sample = {
-    host: css`
-        flex: 1 1 0;
-        overflow: hidden;
-        min-width: 0;
-        max-width: 512px;
-
-        border: 1px solid var(--XydAtlas-Component-Code-Sample__color-border);
-        border-radius: 16px;
-    `,
-}
-
-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;
-    `,
-    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: var(--XydAtlas-Component-Code-Sample__color);
-
-        &[data-state="active"] {
-            color: var(--XydAtlas-Component-Code-Sample__color--active);
-            border-bottom: 1px solid var(--XydAtlas-Component-Code-Sample__color--active);
-            border-bottom-left-radius: 0px;
-            border-bottom-right-radius: 0px;
-        }
-
-        &:hover {
-            transition: ease-in 0.1s;
-            background: var(--XydAtlas-Component-Code-Sample__color-background);
-        }
-    `,
-    description: css`
-        display: flex;
-        align-items: center;
-        gap: 4px;
-
-        font-size: 14px;
-        color: var(--XydAtlas-Component-Code-Sample__color);
-
-        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;
-    `
-}
-
-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 var(--XydAtlas-Component-Code-Sample__color-border);
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px;
-
-        font-size: 14px;
-        line-height: 20px;
-        white-space: pre-wrap;
-        word-break: break-all;
-
-        overflow-y: scroll;
-    `
-}
-
-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: var(--XydAtlas-Component-Code-Sample__color-markBorder--active);
-        background-color: var(--XydAtlas-Component-Code-Sample__color-markBackground--active);
-    `
-}
-
-export const $lineNumber = {
-    host: css`
-        margin: 0 4px;
-        //text-align: right;
-        user-select: none;
-        opacity: 0.5;
-    `
-}
+export const CodeSampleHost = css`
+    flex: 1 1 0;
+    overflow: hidden;
+    min-width: 0;
+    max-width: 512px;
+
+    border: 1px solid var(--XydAtlas-Component-Code-Sample__color-border);
+    border-radius: 16px;
+`;
+
+export const CodeSampleLanguagesHost = 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 CodeSampleLanguagesList = css`
+    display: flex;
+    flex-grow: 1;
+    justify-content: end;
+    gap: 8px;
+    padding: 0 10px;
+`;
+
+export const CodeSampleLanguagesButton = css`
+    all: unset;
+
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 6px;
+    padding: 6px;
+
+    font-size: 14px;
+    color: var(--XydAtlas-Component-Code-Sample__color);
+
+    &[data-state="active"] {
+        color: var(--XydAtlas-Component-Code-Sample__color--active);
+        border-bottom: 1px solid var(--XydAtlas-Component-Code-Sample__color--active);
+        border-bottom-left-radius: 0px;
+        border-bottom-right-radius: 0px;
+    }
+
+    &:hover {
+        transition: ease-in 0.1s;
+        background: var(--XydAtlas-Component-Code-Sample__color-background);
+    }
+`;
+
+export const CodeSampleLanguagesDescription = css`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    font-size: 14px;
+    color: var(--XydAtlas-Component-Code-Sample__color);
+
+    margin-left: 4px;
+    margin-right: 4px;
+`;
+
+export const CodeSampleLanguagesDescriptionItem = css`
+    display: flex;
+    padding-left: 16px;
+    padding-right: 16px;
+    flex: 1 1 0%;
+    gap: 16px;
+    border-radius: 4px;
+`;
+
+export const CodeSampleLanguagesCopy = css`
+    display: flex;
+    padding-left: 8px;
+    padding-right: 8px;
+    align-items: center;
+`;
+
+export const CodeSampleCodeHost = 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 var(--XydAtlas-Component-Code-Sample__color-border);
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+
+    font-size: 14px;
+    line-height: 20px;
+    white-space: pre-wrap;
+    word-break: break-all;
+
+    overflow-y: scroll;
+`;
+
+export const CodeSampleMarkHost = css`
+    display: flex;
+    border-left-width: 4px;
+    border-color: transparent;
+    margin: 4px 0;
+`;
+
+export const CodeSampleMarkLine = css`
+    flex: 1 1 0%;
+`;
+
+export const CodeSampleMarkAnnotated = css`
+    border-color: var(--XydAtlas-Component-Code-Sample__color-markBorder--active);
+    background-color: var(--XydAtlas-Component-Code-Sample__color-markBackground--active);
+`;
+
+export const CodeSampleLineNumberHost = css`
+    margin: 0 4px;
+    //text-align: right;
+    user-select: none;
+    opacity: 0.5;
+`;