@xyd-js/atlas 0.1.0-xyd.15 → 0.1.0-xyd.18

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

@@ -1,8 +1,9 @@
 import {css} from "@linaria/core";
 
 export const ApiRefSamplesContainerHost = css`
+    height: fit-content;
     position: sticky;
-    top: 6rem;
+    top: 12px;
     display: flex;
     gap: 32px;
     flex-direction: column;

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

@@ -1,45 +1,63 @@
-import {Example, ExampleRoot} from "@xyd-js/uniform";
-import React, {useState} from "react";
+import React, {useState, useMemo} from "react";
 
-import {MDXReference} from "@/utils/mdx"
-import {CodeExampleButtons, CodeSample} from "@/components/Code";
-import type {MDXCodeSampleBlock} from "@/components/Code/CodeSample/CodeSample";
+import {ExampleRoot} from "@xyd-js/uniform";
+import {CodeSample, type CodeThemeBlockProps} from "@xyd-js/components/coder";
+
+import {CodeExampleButtons} from "@/components/Code";
+import {useSyntaxHighlight} from "@/components/Atlas/AtlasContext";
 
 import * as cn from "./ApiRefSamples.styles";
 
 export interface ApiRefSamplesProps {
-    examples: MDXReference<ExampleRoot>
+    examples: ExampleRoot
 }
 
 export function ApiRefSamples({examples}: ApiRefSamplesProps) {
-    return <div className={cn.ApiRefSamplesContainerHost}>
+    const syntaxHighlight = useSyntaxHighlight()
+    const [activeExampleIndices, setActiveExampleIndices] = useState<Record<number, number>>({})
+
+    const handleExampleChange = (groupIndex: number, exampleIndex: number) => {
+        setActiveExampleIndices(prev => ({
+            ...prev,
+            [groupIndex]: exampleIndex
+        }))
+    }
+
+    return <atlas-apiref-samples className={cn.ApiRefSamplesContainerHost}>
         {
-            examples.groups?.map(({description, examples}, i) => {
-                const [activeExample, setActiveExample] = useState<MDXReference<Example> | null>(examples?.[0])
+            examples.groups?.map(({description, examples: example}, i) => {
+                const activeExampleIndex = activeExampleIndices[i] || 0
+                const activeExample = example[activeExampleIndex]
 
-                const codeblocks = activeExample?.codeblock?.tabs?.map(tab => {
-                    return tab.code as unknown as MDXCodeSampleBlock // TODO: because atlas use mdx uniform reference - we need to unify it !!!
-                })
+                const codeblocks = activeExample?.codeblock?.tabs?.map(tab => ({
+                    value: String(tab.code || ""),
+                    lang: String(tab.language || ""),
+                    meta: String(tab.context || ""),
+                    highlighted: tab.highlighted
+                } as CodeThemeBlockProps)) || []
 
                 return <div key={i} className={cn.ApiRefSamplesGroupHost}>
                     {
-                        examples?.length > 1
+                        example?.length > 1
                             ? <CodeExampleButtons
                                 activeExample={activeExample}
-                                examples={examples}
-                                onClick={(example) => {
-                                    setActiveExample(example)
+                                examples={example}
+                                onClick={(ex) => {
+                                    const index = example.findIndex(e => e === ex)
+                                    handleExampleChange(i, index)
                                 }}
                             />
                             : null
                     }
                     <CodeSample
                         name={String(i)}
-                        description={description?.title || ""}
-                        codeblocks={codeblocks || []}
+                        description={description || ""}
+                        codeblocks={codeblocks}
+                        theme={syntaxHighlight || undefined}
+                        // controlByMeta
                     />
                 </div>
             })
         }
-    </div>
+    </atlas-apiref-samples>
 }

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

@@ -2,4 +2,4 @@ import {css} from "@linaria/core";
 
 export const AtlasHost = css`
     width: 100%;
-`;
+`;

package/src/components/Atlas/Atlas.tsx

@@ -1,27 +1,43 @@
 import React from "react";
 
-import {Reference} from "@xyd-js/uniform";
+import { MDXCommonAtlasProps } from "./types";
+import { AtlasDecorator } from "./AtlasDecorator";
+import { AtlasPrimary } from "./AtlasPrimary";
+import { AtlasSecondary } from "./AtlasSecondary";
 
-import {MDXReference} from "@/utils/mdx";
-import {ApiRefItem} from "@/components/ApiRef";
+import * as cn from "./Atlas.styles";
 
-import * as cn from "@/components/Atlas/Atlas.styles";
-
-export interface AtlasProps {
-    references: MDXReference<Reference[]> | []
+interface AtlasProps<T> extends MDXCommonAtlasProps<T> {
+    kind: "secondary" | "primary" | undefined | null
 }
 
-export function Atlas(props: AtlasProps) {
-    return <div className={cn.AtlasHost}>
-        {
-            props.references?.map((reference, i) => <div key={i}>
-                    <ApiRefItem
-                        reference={{
-                            ...reference
-                        }}
-                    />
-                </div>
-            )
+export function Atlas<T>(props: AtlasProps<T>) {
+    let AtlasComponent: React.FC<MDXCommonAtlasProps<T>>;
+
+    if (props.kind === "secondary") {
+        AtlasComponent = AtlasSecondary;
+    } else {
+        AtlasComponent = AtlasPrimary;
+    }
+
+    let references = props.references
+    {
+        // TODO: find better solution - if we pass from md then its string
+        if (references && typeof references === "string") { // TODO: DO IT BETTER
+            try {
+                references = JSON.parse(references)
+            } catch (error) {
+                console.error("Error parsing references", error)
+            }
         }
-    </div>
+    }
+
+    return <AtlasDecorator>
+        <div className={cn.AtlasHost}>
+            <AtlasComponent
+                references={references}
+                apiRefItemKind={props.apiRefItemKind}
+            />
+        </div>
+    </AtlasDecorator>
 }

package/src/components/Atlas/AtlasContext.tsx

@@ -0,0 +1,47 @@
+import { createContext, useContext } from "react";
+
+import { type Theme } from "@code-hike/lighter";
+
+export interface VariantToggleConfig {
+    key: string;
+    defaultValue: string;
+}
+
+export const AtlasContext = createContext<{
+    syntaxHighlight: Theme | null,
+    baseMatch?: string,
+    variantToggles?: VariantToggleConfig[], // Array of toggle configurations
+    Link?: any
+}>({
+    syntaxHighlight: null
+})
+
+export function useSyntaxHighlight() {
+    const context = useContext(AtlasContext)
+
+    if (!context) {
+        throw new Error("useSyntaxHighlight must be used within a AtlasContext")
+    }
+
+    return context.syntaxHighlight
+}
+
+export function useBaseMatch() {
+    const context = useContext(AtlasContext)
+
+    if (!context) {
+        throw new Error("useBaseMatch must be used within a AtlasContext")
+    }
+
+    return context.baseMatch
+}
+
+export function useVariantToggles() {
+    const context = useContext(AtlasContext)
+
+    if (!context) {
+        throw new Error("useVariantToggles must be used within a AtlasContext")
+    }
+
+    return context.variantToggles || []
+}

package/src/components/Atlas/AtlasDecorator.styles.ts

@@ -0,0 +1,22 @@
+import { css } from "@linaria/core";
+
+export default {
+    AtlasDecoratorHost: css`
+        @layer templates {
+           atlas-apiref-proptype {
+                font-size: var(--xyd-font-size-xsmall);
+                line-height: var(--xyd-line-height-xsmall);
+           }
+
+           atlas-apiref-item-showcase {
+            font-size: var(--xyd-font-size-small);
+            line-height: var(--xyd-line-height-medium);
+
+            p {
+                font-size: var(--xyd-font-size-small);
+                line-height: var(--xyd-line-height-medium);
+            }
+           }
+        }
+    `
+}

package/src/components/Atlas/AtlasDecorator.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import cn from "./AtlasDecorator.styles";
+
+interface AtlasDecoratorProps {
+    children: React.ReactNode
+}
+
+export function AtlasDecorator({ children }: AtlasDecoratorProps) {
+    return <atlas-decorator
+        className={cn.AtlasDecoratorHost}
+    >
+        {children}
+    </atlas-decorator>
+}

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

@@ -2,12 +2,12 @@ import React, {useEffect, useRef} from "react";
 
 import {Reference} from "@xyd-js/uniform";
 
-import {MDXReference} from "@/utils/mdx";
 import {ApiRefItem} from "@/components/ApiRef";
+
 import * as cn from "./AtlasLazy.styles";
 
 export interface AtlasLazyProps {
-    references: MDXReference<Reference>[]
+    references: Reference[]
     urlPrefix: string
     slug: string,
     onLoaded?: () => void

package/src/components/Atlas/AtlasPrimary.tsx

@@ -0,0 +1,21 @@
+import React, {} from "react";
+
+import {ApiRefItem} from "@/components/ApiRef";
+
+import {MDXCommonAtlasProps} from "./types";
+
+export function AtlasPrimary<T>(props: MDXCommonAtlasProps<T>) {
+    return <>
+        {
+            props.references?.map((reference, i) =>
+                <ApiRefItem
+                    key={i}
+                    reference={{
+                        ...reference
+                    }}
+                    kind={props.apiRefItemKind || undefined}
+                />
+            )
+        }
+    </>
+}

package/src/components/Atlas/AtlasSecondary.tsx

@@ -0,0 +1,148 @@
+import * as React from "react"
+
+import {type Theme} from "@code-hike/lighter";
+
+import {
+    Heading,
+    Table,
+    Details,
+    Code,
+} from "@xyd-js/components/writer";
+import {CodeSample} from "@xyd-js/components/coder";
+
+import {MDXCommonAtlasProps} from "@/components/Atlas/types";
+import {useSyntaxHighlight} from "./AtlasContext";
+import {IconQuote} from "@/components/Icon";
+
+// TODO: interface should be imported from somewhere
+interface CodeSourceContext {
+    fileName: string;
+    fileFullPath: string;
+    sourcecode: string;
+}
+
+const MAX_REFERENCES = 2;
+
+interface ReferenceItemProps {
+    reference: any;
+    index: number;
+    syntaxHighlight: Theme | null;
+}
+
+
+export function AtlasSecondary<T>({references}: MDXCommonAtlasProps<T>) {
+    const syntaxHighlight = useSyntaxHighlight()
+
+    if (!references) return null;
+
+    const initialReferences = references.slice(0, MAX_REFERENCES);
+    const remainingReferences = references.slice(MAX_REFERENCES);
+
+    const showMoreText = remainingReferences.length > 0 ?
+        `Show more (${remainingReferences.length}) reference${remainingReferences.length === 1 ? '' : 's'}` :
+        '';
+
+    return (
+        <>
+            {initialReferences.map((reference, i) => (
+                <$ReferenceItem
+                    key={i}
+                    reference={reference}
+                    index={i}
+                    syntaxHighlight={syntaxHighlight}
+                />
+            ))}
+
+            {remainingReferences.length > 0 && (
+                <Details
+                    label={showMoreText}
+                >
+                    {remainingReferences.map((reference, i) => (
+                        <$ReferenceItem
+                            key={i + MAX_REFERENCES}
+                            reference={reference}
+                            index={i + MAX_REFERENCES}
+                            syntaxHighlight={syntaxHighlight}
+                        />
+                    ))}
+                </Details>
+            )}
+        </>
+    )
+}
+
+function $ReferenceItem({reference, index, syntaxHighlight}: ReferenceItemProps) {
+    return (
+        <React.Fragment key={index}>
+            <Heading size={3}>
+                {reference.title}
+            </Heading>
+
+            {/*<p>*/}
+            {/*    {uniformChild(reference.description)}*/}
+            {/*</p>*/}
+
+            {
+                reference.context?.fileName && <Details
+                    label=""
+                    kind="tertiary"
+                    title={<>
+                        Source code in <Code>{reference.context.fileFullPath}</Code>
+                    </>}
+                    icon={<IconQuote/>}>
+                    <CodeSample
+                        name={reference.context.fileName}
+                        description={reference.context.sourcecode.description}
+                        theme={syntaxHighlight || undefined}
+                        codeblocks={[
+                            {
+                                lang: reference.context.sourcecode.lang,
+                                meta: "",
+                                value: reference.context.sourcecode.code
+                            }
+                        ]}
+                    />
+                    {/* {parseChild(reference.context.sourcecode)} */}
+                </Details>
+            }
+
+            {
+                reference.definitions.map((definition: any, index: number) => {
+                    return (
+                        <React.Fragment key={index}>
+                            <Heading size={4}>
+                                {definition.title}
+                            </Heading>
+                            <Table>
+                                <Table.Head>
+                                    <Table.Tr>
+                                        <Table.Th>Name</Table.Th>
+                                        <Table.Th>Type</Table.Th>
+                                        <Table.Th>Description</Table.Th>
+                                    </Table.Tr>
+                                </Table.Head>
+                                <Table.Body>
+                                    {definition.properties?.map((property: any, propIndex: number) => (
+                                        <Table.Tr key={propIndex}>
+                                            <Table.Td>
+                                                <Code>{property.name}</Code>
+                                            </Table.Td>
+                                            <Table.Td>
+                                                <Code>{property.type}</Code>
+                                            </Table.Td>
+                                            <Table.Td muted>
+                                                {property.description}
+                                            </Table.Td>
+                                        </Table.Tr>
+                                    ))}
+                                </Table.Body>
+                            </Table>
+                        </React.Fragment>
+                    )
+                })
+            }
+
+            <br/>
+        </React.Fragment>
+    )
+}

package/src/components/Atlas/index.ts

@@ -1,3 +1,7 @@
-export * from "./Atlas"
+export { AtlasLazy } from "./AtlasLazy"
 
-export * from "./AtlasLazy"
+export { Atlas } from "./Atlas"
+
+export { AtlasContext, type VariantToggleConfig } from "./AtlasContext"
+
+export type { AtlasProps } from "./types"

package/src/components/Atlas/types.ts

@@ -0,0 +1,11 @@
+import type { Reference } from "@xyd-js/uniform";
+
+// TODO unify MDXCommonAtlasProps and AtlasProps
+export interface MDXCommonAtlasProps<T> {
+    references: Reference<T>[] | []
+    apiRefItemKind?: "secondary"
+}
+
+export interface AtlasProps {
+    references: Reference<any>[]
+}

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

@@ -6,7 +6,8 @@ export const CodeSampleButtonsHost = css`
 `;
 
 export const CodeSampleButtonsContainer = css`
-    display: flex;
+    display: inline-flex;
+    width: 100%;
     align-items: center;
     border-radius: 8px;
     background-color: var(--XydAtlas-Component-Code-SampleButtons__color-containerBackground);
@@ -26,6 +27,7 @@ export const CodeSampleButtonsArrowIcon = css`
 export const CodeSampleButtonsScrollerHost = css`
     overflow-x: auto;
     flex-grow: 1;
+    font-weight: var(--xyd-font-weight-semibold);
 `;
 
 export const CodeSampleButtonsScrollerContainer = css`
@@ -36,11 +38,8 @@ export const CodeSampleButtonsScrollerContainer = css`
 `;
 
 export const CodeSampleButtonsButtonHost = css`
-    padding: 0.5rem 1rem;
+    padding: 4px 16px;
     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);

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

@@ -3,14 +3,12 @@ import {ChevronLeft, ChevronRight} from "lucide-react"
 
 import {Example} from "@xyd-js/uniform";
 
-import {MDXReference, mdxValue} from "@/utils/mdx";
-
 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) {
@@ -63,7 +61,7 @@ export function CodeExampleButtons({examples, activeExample, onClick}: CodeExamp
                                 example={example}
                                 activeExample={activeExample}
                             >
-                                {mdxValue(example.codeblock.title || null)}
+                                {(example.codeblock.title || null)}
                             </SampleButton>
                         ))}
                     </div>
@@ -84,8 +82,8 @@ export function CodeExampleButtons({examples, activeExample, onClick}: CodeExamp
 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)

package/src/components/Code/index.ts

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