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

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

@@ -1,159 +1,145 @@
 import {css} from "@linaria/core";
 
-export const $ul = {
-    host: css`
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: column;
-        gap: 16px;
+export const ApiRefPropertiesUlHost = css`
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    gap: 16px;
+
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+
+    border: none;
+`;
+
+export const ApiRefPropertiesLiHost = css`
+    margin: 0;
+    padding: 0;
+
+    &:first-child {
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+    }
+`;
+
+export const ApiRefPropertiesDescriptionHost = css`
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--XydAtlas-Component-ApiRef-Properties__color-description);
+`;
+
+export const ApiRefPropertiesDlHost = css`
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    margin: 8px 0;
+
+    dd {
+        margin-inline-start: 0px;
+    }
+`;
+
+export const ApiRefPropertiesPropNameCodeHost = css`
+    display: inline-flex;
+    padding: 4px 0;
+    font-weight: 600;
+    font-size: 13px;
+    color: var(--XydAtlas-Component-ApiRef-Properties__color-propName);
+`;
+
+export const ApiRefPropertiesPropTypeCodeHost = css`
+    display: inline-flex;
+    padding: 4px 0;
+    border-radius: 4px;
+    font-size: 10px;
+    color: var(--XydAtlas-Component-ApiRef-Properties__color-propType);
+`;
+
+export const ApiRefPropertiesPropTypeCodeLink = css`
+    color: var(--XydAtlas-Component-ApiRef-Properties__color--active);
+    text-decoration: underline;
+    
+    &:hover {
+        text-decoration: none;
+        color: var(--XydAtlas-Sys-Color-Primary--hover);
+    }
+`;
 
-        padding: 0;
-        margin: 0;
+export const ApiRefPropertiesSubPropsHost = css`
+    padding: 8px;
+    border-style: none;
+    display: none;
+`;
 
-        list-style: none;
+export const ApiRefPropertiesSubPropsHostExpanded = css`
+    display: unset;
+`;
 
-        border: none;
-    `,
-}
+export const ApiRefPropertiesSubPropsBox = css`
+`;
 
-export const $li = {
-    host: css`
-        margin: 0;
-        padding: 0;
+export const ApiRefPropertiesSubPropsUl = css`
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    gap: 16px;
 
-        &:first-child {
-            padding-top: 0;
-        }
+    padding: 0;
+    margin: 0;
 
-        &:last-child {
-            padding-bottom: 0;
-        }
-    `,
-}
-
-export const $description = {
-    host: css`
-        font-size: 14px;
-        line-height: 22px;
-        color: var(--atlas-comp-apiref-properties-description-color);
-    `
-}
-
-export const $dl = {
-    host: css`
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        gap: 10px;
-
-        margin: 8px 0;
-
-        dd {
-            margin-inline-start: 0px;
-        }
-    `,
-}
+    list-style: none;
 
-export const $propNameCode = {
-    host: css`
-        display: inline-flex;
+    border: none;
+    border-left: 1px solid var(--XydAtlas-Component-ApiRef-Properties__color-border);
+`;
 
-        padding: 4px 0;
+export const ApiRefPropertiesSubPropsLi = css`
+    padding: 0 16px;
+`;
 
-        font-weight: 600;
-        font-size: 13px;
-        color: var(--atlas-comp-apiref-properties-prop__name-color);
-    `,
-}
-
-export const $propTypeCode = {
-    host: css`
-        display: inline-flex;
-
-        padding: 4px 0;
-
-        border-radius: 4px;
-
-        font-size: 10px;
-        color: var(--atlas-comp-apiref-properties-prop__type-color);
-    `,
-    link: css`
-        color: var(--atlas-comp-apiref-properties-color--active);
-        text-decoration: underline;
-        
-        &:hover {
-            text-decoration: none;
-        }
-    `
-}
-
-export const $subProps = {
-    host: css`
-        padding: 8px;
-        border-style: none;
-        display: none;
-    `,
-    host$$expanded: css`
-        display: unset;
-    `,
-    box: css`
-    `,
-    ul: css`
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: column;
-        gap: 16px;
-
-        padding: 0;
-        margin: 0;
-
-        list-style: none;
-
-        border: none;
-        border-left: 1px solid var(--atlas-comp-apiref-properties-border-color);
-    `,
-    li: css`
-        padding: 0 16px;
-    `,
-}
-
-export const $propToggle = {
-    host: css`
-        display: flex;
-        align-items: center;
-        padding: 0;
-        margin-top: 16px;
-
-        background: none;
-        outline: inherit;
-        border: none;
-
-        cursor: pointer;
-        color: inherit;
+export const ApiRefPropertiesPropToggleHost = css`
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin-top: 16px;
 
-        font-size: 13px;
+    background: none;
+    outline: inherit;
+    border: none;
 
-        svg {
-            font-size: 13px;
-        }
+    cursor: pointer;
+    color: inherit;
 
-        &:hover {
-            svg { // in the future it should be deprecated
-                transition: all ease-in .1s;
-                color: var(--atlas-comp-apiref-properties-color--active);
-            }
-        }
-    `,
-    link: css`
-        text-decoration: none;
-        cursor: pointer;
-        margin-left: 4px;
+    font-size: 13px;
 
-        &:hover {
+    svg {
+        font-size: 13px;
+    }
+
+    &:hover {
+        svg {
             transition: all ease-in .1s;
-            color: var(--atlas-comp-apiref-properties-color--active);
+            color: var(--XydAtlas-Component-ApiRef-Properties__color--active);
         }
-    `
-}
+    }
+`;
+
+export const ApiRefPropertiesPropToggleLink = css`
+    text-decoration: none;
+    cursor: pointer;
+    margin-left: 4px;
+
+    &:hover {
+        transition: all ease-in .1s;
+        color: var(--XydAtlas-Component-ApiRef-Properties__color--active);
+    }
+`;

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>