@xyd-js/atlas 0.1.0-xyd.1 → 0.1.0-xyd.10

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

@@ -21,8 +21,6 @@ export const $li = {
         margin: 0;
         padding: 0;
 
-        border-top: 1px solid var(--atlas-comp-apiref-properties-border-color);
-
         &:first-child {
             padding-top: 0;
         }
@@ -81,6 +79,14 @@ export const $propTypeCode = {
         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 = {
@@ -106,11 +112,10 @@ export const $subProps = {
         list-style: none;
 
         border: none;
+        border-left: 1px solid var(--atlas-comp-apiref-properties-border-color);
     `,
     li: css`
         padding: 0 16px;
-
-        border-top: 1px solid var(--atlas-comp-apiref-properties-border-color);
     `,
 }
 

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

@@ -24,7 +24,11 @@ export function ApiRefProperties({properties}: ApiRefPropertiesProps) {
                 <li className={$li.host} key={i}>
                     <dl className={$dl.host}>
                         <$PropName name="name" value={mdxValue(property.name)}/>
-                        <$PropType name="type" value={mdxValue(property.type)}/>
+                        <$PropType
+                            name="type"
+                            value={mdxValue(property.type)}
+                            href={propertyTypeHref(property)}
+                        />
                     </dl>
                     <div className={$description.host}>
                         {property.children}
@@ -49,15 +53,20 @@ function $PropName({name, value}: { name: string, value: string }) {
     </>
 }
 
-function $PropType({name, value}: { name: string, value: string }) {
+function $PropType({name, value, href}: { name: string, value: string, href?: string }) {
     return <>
         <dd>
-            <code className={$propTypeCode.host}>{value}</code>
+            <code className={$propTypeCode.host}>
+                {
+                    href
+                        ? <a className={$propTypeCode.link} href={href}>{value}</a>
+                        : value
+                }
+            </code>
         </dd>
     </>
 }
 
-// const styles$ =
 function $SubProperties({properties}: { properties: MDXReference<DefinitionProperty>[] }) {
     const [expanded, setExpanded] = useState(false)
 
@@ -77,7 +86,11 @@ function $SubProperties({properties}: { properties: MDXReference<DefinitionPrope
                             return <li className={$subProps.li} key={i}>
                                 <dl className={$dl.host}>
                                     <$PropName name="name" value={mdxValue(prop.name)}/>
-                                    <$PropType name="type" value={mdxValue(prop.type)}/>
+                                    <$PropType
+                                        name="type"
+                                        value={mdxValue(prop.type)}
+                                        href={propertyTypeHref(prop)}
+                                    />
                                 </dl>
                                 <div className={$description.host}>
                                     {prop.children}
@@ -132,3 +145,13 @@ function $PropToggle(props: PropsToggleProps) {
     )
 }
 
+function propertyTypeHref(property: MDXReference<DefinitionProperty>) {
+    if (property?.context?.graphqlBuiltInType?.title === "true") { // graphqlBuiltInType should be a boolean
+        return undefined
+    }
+
+    // TODO: FINISH SLUG
+    return property.context?.graphqlTypeShort?.title
+        ? `/docs/api/graphql/${property.context?.graphqlTypeShort?.title}-${mdxValue(property.context?.graphqlTypeFlat?.title)}`
+        : undefined
+}

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

@@ -17,7 +17,7 @@ export interface ApiRefSamplesProps {
 export function ApiRefSamples({examples}: ApiRefSamplesProps) {
     return <div className={$container.host}>
         {
-            examples.groups.map(({description, examples}, i) => {
+            examples.groups?.map(({description, examples}, i) => {
                 const [activeExample, setActiveExample] = useState<MDXReference<Example> | null>(examples?.[0])
 
                 const codeblocks = activeExample?.codeblock?.tabs?.map(tab => {

package/src/components/Atlas/Atlas.tsx

@@ -16,8 +16,13 @@ export interface AtlasProps {
 export function Atlas(props: AtlasProps) {
     return <div className={$atlas.host}>
         {
-            props.references.map((reference, i) => <div key={i}>
-                    <ApiRefItem reference={reference}/>
+            props.references?.map((reference, i) => <div key={i}>
+                    <ApiRefItem
+                        reference={{
+
+                            ...reference
+                        }}
+                    />
                 </div>
             )
         }

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

@@ -1,5 +1,4 @@
 import React, {useEffect, useRef} from "react";
-import {useNavigate} from "react-router";
 
 import {Reference} from "@xyd-js/uniform";
 
@@ -17,7 +16,7 @@ export interface AtlasLazyProps {
 }
 
 export function AtlasLazy(props: AtlasLazyProps) {
-    return props.references.map((reference: any, i: number) => <>
+    return props.references?.map((reference: any, i: number) => <>
         <div
             key={i}
             // TODO: slug should be passed from reference or somrthing

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

@@ -9,14 +9,16 @@ export const $sample = {
         display: flex;
         align-items: center;
         border-radius: 8px;
-        background-color: var(--atlas-comp-code-sample_buttons-container-background);
+        //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: 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`
@@ -53,15 +55,89 @@ export const $button = {
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 300ms;
 
-        color: var(--atlas-comp-code-sample_buttons-color);
+        //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: 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);
     `
-}
+}
+ */

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

@@ -63,7 +63,7 @@ export function CodeExampleButtons({examples, activeExample, onClick}: CodeExamp
                     className={$scroller.host}
                 >
                     <div className={$scroller.container}>
-                        {examples.map((example) => (
+                        {examples?.map((example) => (
                             <$SampleButton
                                 key={example.codeblock.title}
                                 onClick={() => onClick(example)}

package/src/docs/AtlasExample/todo-app.uniform.json

@@ -36,7 +36,7 @@
           {
             "name": "id",
             "type": "ID!",
-            "description": "The unique ID of the user",
+            "description": "The unique ID of the user, more details [here](#/example).",
             "properties": []
           },
           {