Skip to content

chore: upgrade apsara rc.4 → rc.7, fix breaking changes, auto-expand sidebar groups #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rsbh merged 9 commits into from
May 15, 2026
Merged

chore: upgrade apsara rc.4 → rc.7, fix breaking changes, auto-expand sidebar groups #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3f79f38
chore: upgrade @raystack/apsara to 1.0.0-rc.5
rsbh May 14, 2026
37eae9e
chore: upgrade @raystack/apsara to 1.0.0-rc.6
rsbh May 14, 2026
3dead21
fix: rename InputField to Input for apsara rc.6 compatibility
rsbh May 14, 2026
6808aec
fix: replace string gap props with numbers for apsara rc.6
rsbh May 14, 2026
b4c3919
fix: update Link to use external prop for apsara rc.6
rsbh May 14, 2026
e619d67
chore: upgrade @raystack/apsara to 1.0.0-rc.7
rsbh May 14, 2026
047bca5
feat: auto-open sidebar folder when active page is inside it
rsbh May 14, 2026
b86e0eb
chore: remove unused apsara re-export wrappers
rsbh May 15, 2026
13cb191
refactor: use onValueChange instead of onChange for Input
rsbh May 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions bun.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/chronicle/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"@opentelemetry/sdk-metrics": "^2.6.1",
"@opentelemetry/semantic-conventions": "^1.40.0",
"@radix-ui/react-icons": "^1.3.2",
"@raystack/apsara": "1.0.0-rc.4",
"@raystack/apsara": "1.0.0-rc.7",
"@shikijs/rehype": "^4.0.2",
"@vitejs/plugin-react": "^6.0.1",
"chalk": "^5.6.2",
Expand Down
28 changes: 14 additions & 14 deletions packages/chronicle/src/components/api/playground-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { useState, useCallback, useMemo } from 'react'
import type { OpenAPIV3 } from 'openapi-types'
import { Dialog, Button, Badge, IconButton, InputField, CopyButton, Select, Menu } from '@raystack/apsara'
import { Dialog, Button, Badge, IconButton, Input, CopyButton, Select, Menu } from '@raystack/apsara'
import { Cross2Icon, ChevronDownIcon, ChevronUpIcon, PlayIcon, PlusIcon } from '@radix-ui/react-icons'
import { CounterClockwiseClockIcon, CodeIcon } from '@radix-ui/react-icons'
import { MethodBadge } from '@/components/api/method-badge'
Expand Down Expand Up @@ -263,29 +263,29 @@ export function PlaygroundDialog({
<div className={styles.fieldRow}>
<span className={styles.fieldLabel}>Username</span>
<div className={styles.fieldInput}>
<InputField size="small" placeholder="Enter username" value={basicUser} onChange={(e) => setBasicUser(e.target.value)} />
<Input size="small" placeholder="Enter username" value={basicUser} onValueChange={setBasicUser} />
</div>
</div>
<div className={styles.fieldRow}>
<span className={styles.fieldLabel}>Password</span>
<div className={styles.fieldInput}>
<InputField size="small" type="password" placeholder="Enter password" value={basicPass} onChange={(e) => setBasicPass(e.target.value)} />
<Input size="small" type="password" placeholder="Enter password" value={basicPass} onValueChange={setBasicPass} />
</div>
</div>
</>
) : currentScheme.type !== 'none' ? (
<div className={styles.fieldRow}>
<span className={styles.fieldLabel}>{currentScheme.headerName}</span>
<div className={styles.fieldInput}>
<InputField size="small" placeholder={currentScheme.placeholder} value={authToken} onChange={(e) => setAuthToken(e.target.value)} />
<Input size="small" placeholder={currentScheme.placeholder} value={authToken} onValueChange={setAuthToken} />
</div>
</div>
) : null}
{headerFields.filter((f) => f.name !== currentScheme.headerName).map((f) => (
<div key={f.name} className={styles.fieldRow}>
<span className={styles.fieldLabel}>{f.name}</span>
<div className={styles.fieldInput}>
<InputField size="small" placeholder="Enter value" value={headerValues[f.name] ?? ''} onChange={(e) => setHeaderValues({ ...headerValues, [f.name]: e.target.value })} />
<Input size="small" placeholder="Enter value" value={headerValues[f.name] ?? ''} onValueChange={(v) => setHeaderValues({ ...headerValues, [f.name]: v })} />
</div>
</div>
))}
Expand All @@ -307,11 +307,11 @@ export function PlaygroundDialog({
<div key={f.name} className={styles.fieldRow}>
<span className={styles.fieldLabel}>{f.name}</span>
<div className={styles.fieldInput}>
<InputField
<Input
size="small"
placeholder="Enter value"
value={pathValues[f.name] ?? ''}
onChange={(e) => setPathValues({ ...pathValues, [f.name]: e.target.value })}
onValueChange={(v) => setPathValues({ ...pathValues, [f.name]: v })}
/>
</div>
</div>
Expand All @@ -332,11 +332,11 @@ export function PlaygroundDialog({
<div key={f.name} className={styles.fieldRow}>
<span className={styles.fieldLabel}>{f.name}</span>
<div className={styles.fieldInput}>
<InputField
<Input
size="small"
placeholder={f.description ?? 'Enter value'}
value={queryValues[f.name] ?? ''}
onChange={(e) => setQueryValues({ ...queryValues, [f.name]: e.target.value })}
onValueChange={(v) => setQueryValues({ ...queryValues, [f.name]: v })}
/>
</div>
</div>
Expand Down Expand Up @@ -494,13 +494,13 @@ function BodyFieldRow({ field, value, onChange }: {
{items.map((item, i) => (
<div key={i} className={styles.arrayItemRow}>
<div className={styles.fieldInput}>
<InputField
<Input
size="small"
placeholder={`${field.name}[${i}]`}
value={String(item)}
onChange={(e) => {
onValueChange={(v) => {
const updated = [...items]
updated[i] = e.target.value
updated[i] = v
onChange(updated)
}}
/>
Expand Down Expand Up @@ -539,11 +539,11 @@ function BodyFieldRow({ field, value, onChange }: {
<div className={styles.fieldRow}>
<span className={styles.fieldLabel}>{field.name} {field.required && <Badge variant="danger" size="micro">required</Badge>}</span>
<div className={styles.fieldInput}>
<InputField
<Input
size="small"
placeholder={field.description ?? 'Enter value'}
value={String(value ?? '')}
onChange={(e) => onChange(e.target.value)}
onValueChange={(v) => onChange(v)}
/>
</div>
</div>
Expand Down
3 changes: 0 additions & 3 deletions packages/chronicle/src/components/common/breadcrumb.tsx
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions packages/chronicle/src/components/common/button.tsx
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions packages/chronicle/src/components/common/code-block.tsx
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions packages/chronicle/src/components/common/dialog.tsx
View file
Open in desktop

This file was deleted.

10 changes: 0 additions & 10 deletions packages/chronicle/src/components/common/index.ts
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions packages/chronicle/src/components/common/input-field.tsx
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions packages/chronicle/src/components/common/sidebar.tsx
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions packages/chronicle/src/components/common/switch.tsx
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions packages/chronicle/src/components/common/table.tsx
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions packages/chronicle/src/components/common/tabs.tsx
View file
Open in desktop

This file was deleted.

36 changes: 5 additions & 31 deletions packages/chronicle/src/components/mdx/link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { Link as ApsaraLink } from '@raystack/apsara';
import type { ComponentProps, MouseEvent } from 'react';
import { useNavigate } from 'react-router';
import type { ComponentProps } from 'react';
import { Link as RouterLink } from 'react-router';

type LinkProps = ComponentProps<'a'>;

export function Link({ href, children, onClick: onClickProp, ...props }: LinkProps) {
const navigate = useNavigate();

export function Link({ href, children, ...props }: LinkProps) {
if (!href) {
return <span {...props}>{children}</span>;
}
Expand All @@ -16,12 +14,7 @@ export function Link({ href, children, onClick: onClickProp, ...props }: LinkPro

if (isExternal) {
return (
<ApsaraLink
href={href}
target='_blank'
rel='noopener noreferrer'
{...props}
>
<ApsaraLink href={href} external {...props}>
{children}
</ApsaraLink>
);
Expand All @@ -35,27 +28,8 @@ export function Link({ href, children, onClick: onClickProp, ...props }: LinkPro
);
}

const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
if (
e.defaultPrevented ||
e.button !== 0 ||
e.metaKey ||
e.ctrlKey ||
e.shiftKey ||
e.altKey
) {
return;
}

onClickProp?.(e);
if (e.defaultPrevented) return;

e.preventDefault();
navigate(href);
};

return (
<ApsaraLink href={href} {...props} onClick={onClick}>
<ApsaraLink render={<RouterLink to={href} />} {...props}>
{children}
</ApsaraLink>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/chronicle/src/themes/default/ContentDirButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function ContentDirButtons() {
const { visible, overflow } = splitContentButtons(entries, MAX_VISIBLE);

return (
<Flex gap='small' align='center'>
<Flex gap={3} align='center'>
{visible.map(entry => (
<RouterLink
key={entry.href}
Expand Down
24 changes: 18 additions & 6 deletions packages/chronicle/src/themes/default/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { getLandingEntries } from '@/lib/config';
import { getActiveContentDir } from '@/lib/navigation';
import { usePageContext } from '@/lib/page-context';
import type { Node, Root } from 'fumadocs-core/page-tree';
import { NodeType } from '@/lib/tree-utils';
import type { ThemeLayoutProps } from '@/types';
import styles from './Layout.module.css';
import { OpenInAI } from './OpenInAI';
Expand Down Expand Up @@ -117,7 +118,7 @@ export function Layout({
>
<Sidebar.Header className={styles.sidebarHeader}>
<SidebarLogo config={config} />
<Flex gap='small' align='center'>
<Flex gap={3} align='center'>
{config.search?.enabled && <Search />}
<ClientThemeSwitcher size={16} />
</Flex>
Expand Down Expand Up @@ -186,8 +187,8 @@ export function Layout({
<div className={styles.cardWrapper}>
<div className={styles.card}>
<nav className={styles.subNav}>
<Flex align='center' gap='small' className={styles.subNavLeft}>
<Flex align='center' gap='extra-small'>
<Flex align='center' gap={3} className={styles.subNavLeft}>
<Flex align='center' gap={2}>
<IconButton
size={2}
disabled={!prev}
Expand All @@ -207,7 +208,7 @@ export function Layout({
</Flex>
<Breadcrumbs slug={slug} tree={tree} />
</Flex>
<Flex align='center' gap='small'>
<Flex align='center' gap={3}>
{isApiRoute && <TestRequestButton />}
{isApiRoute && <ViewDocsButton />}
<OpenInAI />
Expand All @@ -224,6 +225,15 @@ export function Layout({
);
}

function hasActiveDescendant(node: Node, pathname: string): boolean {
if (node.type === NodeType.Page) return pathname === node.url;
if (node.type === NodeType.Folder) {
if (node.index && pathname === node.index.url) return true;
return node.children.some(child => hasActiveDescendant(child, pathname));
}
return false;
}

function SidebarNode({
item,
pathname,
Expand All @@ -240,13 +250,15 @@ function SidebarNode({
if (item.type === 'folder') {
if (depth > 1) return null;
const icon = typeof item.icon === 'string' ? iconMap[item.icon] : item.icon;
const hasActiveChild = hasActiveDescendant(item, pathname);
return (
<Sidebar.Group
className={styles.navGroup}
data-depth={depth}
label={item.name?.toString() ?? ''}
leadingIcon={icon ?? undefined}
collapsible={depth === 1}
defaultOpen={hasActiveChild}
Comment thread
rsbh marked this conversation as resolved.
classNames={{
items: styles.groupItems,
header: styles.navGroupHeader,
Expand Down Expand Up @@ -305,7 +317,7 @@ function ApiSidebarNode({ item, pathname }: { item: Node; pathname: string }) {

if (item.type === 'folder') {
return (
<Flex direction='column' gap='small' className={styles.apiGroup}>
<Flex direction='column' gap={3} className={styles.apiGroup}>
<span className={styles.apiGroupLabel}>{item.name?.toString()}</span>
<Flex direction='column'>
{item.children.map((child, i) => (
Expand All @@ -329,7 +341,7 @@ function ApiSidebarNode({ item, pathname }: { item: Node; pathname: string }) {
return (
<Flex
align='center'
gap='small'
gap={3}
className={`${styles.apiItem} ${isActive ? styles.apiItemActive : ''}`}
render={<RouterLink to={href} />}
>
Expand Down
4 changes: 2 additions & 2 deletions packages/chronicle/src/themes/default/VersionSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function VersionSwitcher() {
/>
}
>
<Flex gap='small' align='center'>
<Flex gap={3} align='center'>
{active?.label ?? 'Version'}
{active?.badge ? (
<Badge variant={active.badge.variant} size='micro'>
Expand All @@ -43,7 +43,7 @@ export function VersionSwitcher() {
key={v.dir ?? '_latest'}
onClick={() => navigate(getVersionHomeHref(config, v.dir))}
>
<Flex gap='small' align='center'>
<Flex gap={3} align='center'>
{v.label}
{v.badge ? (
<Badge variant={v.badge.variant} size='micro'>
Expand Down
4 changes: 2 additions & 2 deletions packages/chronicle/src/themes/paper/VersionSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export function VersionSwitcher() {
/>
}
>
<Flex gap='small' align='center' justify='start'>
<Flex gap={3} align='center' justify='start'>
{active?.label ?? 'Version'}
{active?.badge ? (
<Badge variant={active.badge.variant} size='micro'>
Expand All @@ -44,7 +44,7 @@ export function VersionSwitcher() {
key={v.dir ?? '_latest'}
onClick={() => navigate(getVersionHomeHref(config, v.dir))}
>
<Flex gap='small' align='center'>
<Flex gap={3} align='center'>
{v.label}
{v.badge ? (
<Badge variant={v.badge.variant} size='micro'>
Expand Down
Loading