Skip to content

Commit 4e87a62

Browse files
rohanchkrabrtyrohanchkrabrty
authored
fix: docs ui improvements and component improvements (#560)
* fix: docs ui improvements * feat: component improvements * feat: component improvements * Feat component improvements (#561) * feat: changes * feat: component improvements * feat: component improvements * fix: update navbar background * fix: docs sidebar header * feat: docs improvements * fix: datatable demo * fix: spinner playground control in doc * fix: docs changes
1 parent cffe70d commit 4e87a62

130 files changed

Lines changed: 679 additions & 384 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/www/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"remark-gfm": "^4.0.1",
3535
"remark-mdx": "^3.1.0",
3636
"unist-util-visit": "^5.0.0",
37-
"zod": "^3.24.2"
37+
"zod": "^4.1.12"
3838
},
3939
"devDependencies": {
4040
"@raystack/tools-config": "workspace:*",

‎apps/www/public/assets/logo.png‎

-51 KB
Binary file not shown.

‎apps/www/public/assets/logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/www/source.config.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import * as path from 'node:path';
2-
import { fileURLToPath } from 'url';
3-
import { SourceSchema, TagSchema } from '@/lib/types';
42
import {
53
rehypeToc,
64
remarkGfm,
@@ -16,10 +14,12 @@ import {
1614
metaSchema
1715
} from 'fumadocs-mdx/config';
1816
import {
19-
GeneratorOptions,
2017
createGenerator,
18+
GeneratorOptions,
2119
remarkAutoTypeTable
2220
} from 'fumadocs-typescript';
21+
import { fileURLToPath } from 'url';
22+
import { SourceSchema, TagSchema } from '@/lib/types';
2323

2424
const relative = (s: string): string =>
2525
path.resolve(fileURLToPath(new URL(s, import.meta.url)));

‎apps/www/src/app/docs/[[...slug]]/page.module.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
max-width: 806px;
33
padding: var(--rs-space-15) var(--rs-space-7);
44
width: 100%;
5+
gap: var(--rs-space-12);
6+
min-height: calc(100vh - 50px);
57
}
68

79
:global(.prose) {

‎apps/www/src/app/docs/[[...slug]]/page.tsx‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import DocsNavbar from '@/components/docs/navbar';
2-
import { mdxComponents } from '@/components/mdx';
3-
import TableOfContents from '@/components/toc/toc';
4-
import { docs } from '@/lib/source';
51
import { Flex, Headline, Text } from '@raystack/apsara';
62
import { createRelativeLink } from 'fumadocs-ui/mdx';
73
import type { Metadata } from 'next';
84
import { notFound } from 'next/navigation';
5+
import DocsFooter from '@/components/docs/footer';
6+
import DocsNavbar from '@/components/docs/navbar';
7+
import { mdxComponents } from '@/components/mdx';
8+
import TableOfContents from '@/components/toc/toc';
9+
import { docs } from '@/lib/source';
910
import styles from './page.module.css';
1011

1112
export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
@@ -15,8 +16,6 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
1516

1617
const MDX = page.data.body;
1718

18-
console.log('page', page);
19-
2019
return (
2120
<Flex
2221
direction='column'
@@ -33,22 +32,25 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
3332
/>
3433
<Flex width='full' align='start'>
3534
<Flex direction='column' align='center' justify='center' width='full'>
36-
<Flex direction='column' gap={6} className={styles.content}>
37-
<Flex direction='column' gap={3}>
38-
<Headline size='t4'>{page.data.title}</Headline>
39-
<Text size='regular' variant='secondary'>
40-
{page.data.description}
41-
</Text>
42-
</Flex>
43-
<Flex direction='column' className='prose'>
44-
<MDX
45-
components={{
46-
...mdxComponents,
47-
// this allows you to link to other pages with relative file paths
48-
a: createRelativeLink(docs, page)
49-
}}
50-
/>
35+
<Flex direction='column' className={styles.content} justify='between'>
36+
<Flex direction='column' gap={6}>
37+
<Flex direction='column' gap={3}>
38+
<Headline size='t4'>{page.data.title}</Headline>
39+
<Text size='regular' variant='secondary'>
40+
{page.data.description}
41+
</Text>
42+
</Flex>
43+
<Flex direction='column' className='prose'>
44+
<MDX
45+
components={{
46+
...mdxComponents,
47+
// this allows you to link to other pages with relative file paths
48+
a: createRelativeLink(docs, page)
49+
}}
50+
/>
51+
</Flex>
5152
</Flex>
53+
<DocsFooter url={page.url} />
5254
</Flex>
5355
</Flex>
5456
<aside
@@ -58,6 +60,7 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
5860
position: 'sticky',
5961
top: '50px',
6062
padding: '40px 0',
63+
paddingRight: 'var(--rs-space-7)',
6164
display: 'flex',
6265
flexDirection: 'column',
6366
justifyContent: 'center',

‎apps/www/src/app/docs/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import DocsSidebar from '@/components/docs/sidebar';
2-
import { docs } from '@/lib/source';
31
import { Flex } from '@raystack/apsara';
42
import type { ReactNode } from 'react';
3+
import DocsSidebar from '@/components/docs/sidebar';
4+
import { docs } from '@/lib/source';
55
import styles from './layout.module.css';
66

77
export default function Layout({ children }: { children: ReactNode }) {

‎apps/www/src/components/datatable-demo.tsx‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -46,24 +46,29 @@ export type Payment = {
4646
};
4747

4848
export const columns: DataTableColumnDef<Payment, unknown>[] = [
49-
{
50-
accessorKey: 'select',
51-
header: '',
52-
cell: ({ row }) => (
53-
<Checkbox
54-
checked={row.getIsSelected()}
55-
onCheckedChange={value => row.toggleSelected(!!value)}
56-
aria-label='Select row'
57-
/>
58-
),
59-
enableSorting: false,
60-
enableHiding: false
61-
},
6249
{
6350
accessorKey: 'status',
6451
header: 'Status',
52+
styles: {
53+
cell: {
54+
paddingLeft: 'var(--rs-space-7)'
55+
},
56+
header: {
57+
paddingLeft: 'var(--rs-space-7)'
58+
}
59+
},
6560
cell: ({ row }) => (
66-
<div className='capitalize'>{row.getValue('status')}</div>
61+
<Flex gap={3} align='center'>
62+
<Checkbox
63+
checked={row.getIsSelected()}
64+
onCheckedChange={value => row.toggleSelected(!!value)}
65+
aria-label='Select row'
66+
style={{
67+
display: 'block'
68+
}}
69+
/>
70+
<div className='capitalize'>{row.getValue('status')}</div>
71+
</Flex>
6772
),
6873
filterOptions: [
6974
{

‎apps/www/src/components/demo/demo-controls.tsx‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { camelCaseToWords } from '@/lib/utils';
21
import {
32
InfoCircledIcon,
43
Pencil2Icon,
@@ -15,6 +14,7 @@ import {
1514
Text
1615
} from '@raystack/apsara';
1716
import { cx } from 'class-variance-authority';
17+
import { camelCaseToWords } from '@/lib/utils';
1818
import styles from './styles.module.css';
1919
import {
2020
ComponentPropsType,
@@ -48,6 +48,7 @@ export default function DemoControls({
4848
const propValue = componentProps?.[prop] ?? '';
4949
const isCheckbox = control.type === 'checkbox';
5050
const isIcon = control.type === 'icon';
51+
const isIconOptional = control.isIconOptional ?? true;
5152

5253
// For checkbox and icon types, render in a special container
5354
if (isCheckbox || isIcon) {
@@ -61,18 +62,20 @@ export default function DemoControls({
6162
<Text variant='secondary' size='small' weight='medium'>
6263
{propLabel}
6364
</Text>
64-
<Switch
65-
size='small'
66-
checked={!!componentProps[prop]}
67-
onCheckedChange={checked => {
68-
if (isCheckbox) onPropChange(prop, checked);
69-
else
70-
onPropChange(
71-
prop,
72-
checked ? String(ICONS_MAP.plus.value) : ''
73-
);
74-
}}
75-
/>
65+
{isIconOptional && (
66+
<Switch
67+
size='small'
68+
checked={!!componentProps[prop]}
69+
onCheckedChange={checked => {
70+
if (isCheckbox) onPropChange(prop, checked);
71+
else
72+
onPropChange(
73+
prop,
74+
checked ? String(ICONS_MAP.plus.value) : ''
75+
);
76+
}}
77+
/>
78+
)}
7679
</Flex>
7780
{isIcon && (
7881
<Flex gap={2} align='center' className={styles.iconContainer}>
@@ -90,6 +93,12 @@ export default function DemoControls({
9093
e.stopPropagation();
9194
}}
9295
aria-label={`Select ${icon.value || 'none'} icon`}
96+
style={{
97+
color:
98+
propValue === icon.value
99+
? 'var(--rs-color-background-accent-emphasis)'
100+
: undefined
101+
}}
93102
>
94103
{icon.icon}
95104
</IconButton>

‎apps/www/src/components/demo/demo.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
UploadIcon
99
} from '@radix-ui/react-icons';
1010
import * as Apsara from '@raystack/apsara';
11+
import dayjs from 'dayjs';
1112
import { Home, Info, Laugh, X } from 'lucide-react';
1213
import NextLink from 'next/link';
1314
import { Suspense } from 'react';
@@ -35,7 +36,8 @@ export default function Demo(props: DemoProps) {
3536
TransformIcon,
3637
Pencil2Icon,
3738
InfoCircledIcon,
38-
UploadIcon
39+
UploadIcon,
40+
dayjs
3941
}
4042
} = props;
4143

0 commit comments

Comments
 (0)