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

Author: rohanchkrabrty

apps/www/package.json

@@ -34,7 +34,7 @@
     "remark-gfm": "^4.0.1",
     "remark-mdx": "^3.1.0",
     "unist-util-visit": "^5.0.0",
-    "zod": "^3.24.2"
+    "zod": "^4.1.12"
   },
   "devDependencies": {
     "@raystack/tools-config": "workspace:*",

apps/www/public/assets/logo.png

@@ -1,6 +1,4 @@
 import * as path from 'node:path';
-import { fileURLToPath } from 'url';
-import { SourceSchema, TagSchema } from '@/lib/types';
 import {
   rehypeToc,
   remarkGfm,
@@ -16,10 +14,12 @@ import {
   metaSchema
 } from 'fumadocs-mdx/config';
 import {
-  GeneratorOptions,
   createGenerator,
+  GeneratorOptions,
   remarkAutoTypeTable
 } from 'fumadocs-typescript';
+import { fileURLToPath } from 'url';
+import { SourceSchema, TagSchema } from '@/lib/types';
 
 const relative = (s: string): string =>
   path.resolve(fileURLToPath(new URL(s, import.meta.url)));

apps/www/public/assets/logo.svg

@@ -2,6 +2,8 @@
   max-width: 806px;
   padding: var(--rs-space-15) var(--rs-space-7);
   width: 100%;
+  gap: var(--rs-space-12);
+  min-height: calc(100vh - 50px);
 }
 
 :global(.prose) {

apps/www/source.config.ts

@@ -1,11 +1,12 @@
-import DocsNavbar from '@/components/docs/navbar';
-import { mdxComponents } from '@/components/mdx';
-import TableOfContents from '@/components/toc/toc';
-import { docs } from '@/lib/source';
 import { Flex, Headline, Text } from '@raystack/apsara';
 import { createRelativeLink } from 'fumadocs-ui/mdx';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
+import DocsFooter from '@/components/docs/footer';
+import DocsNavbar from '@/components/docs/navbar';
+import { mdxComponents } from '@/components/mdx';
+import TableOfContents from '@/components/toc/toc';
+import { docs } from '@/lib/source';
 import styles from './page.module.css';
 
 export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
@@ -15,8 +16,6 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
 
   const MDX = page.data.body;
 
-  console.log('page', page);
-
   return (
     <Flex
       direction='column'
@@ -33,22 +32,25 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
       />
       <Flex width='full' align='start'>
         <Flex direction='column' align='center' justify='center' width='full'>
-          <Flex direction='column' gap={6} className={styles.content}>
-            <Flex direction='column' gap={3}>
-              <Headline size='t4'>{page.data.title}</Headline>
-              <Text size='regular' variant='secondary'>
-                {page.data.description}
-              </Text>
-            </Flex>
-            <Flex direction='column' className='prose'>
-              <MDX
-                components={{
-                  ...mdxComponents,
-                  // this allows you to link to other pages with relative file paths
-                  a: createRelativeLink(docs, page)
-                }}
-              />
+          <Flex direction='column' className={styles.content} justify='between'>
+            <Flex direction='column' gap={6}>
+              <Flex direction='column' gap={3}>
+                <Headline size='t4'>{page.data.title}</Headline>
+                <Text size='regular' variant='secondary'>
+                  {page.data.description}
+                </Text>
+              </Flex>
+              <Flex direction='column' className='prose'>
+                <MDX
+                  components={{
+                    ...mdxComponents,
+                    // this allows you to link to other pages with relative file paths
+                    a: createRelativeLink(docs, page)
+                  }}
+                />
+              </Flex>
             </Flex>
+            <DocsFooter url={page.url} />
           </Flex>
         </Flex>
         <aside
@@ -58,6 +60,7 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
             position: 'sticky',
             top: '50px',
             padding: '40px 0',
+            paddingRight: 'var(--rs-space-7)',
             display: 'flex',
             flexDirection: 'column',
             justifyContent: 'center',

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

@@ -1,7 +1,7 @@
-import DocsSidebar from '@/components/docs/sidebar';
-import { docs } from '@/lib/source';
 import { Flex } from '@raystack/apsara';
 import type { ReactNode } from 'react';
+import DocsSidebar from '@/components/docs/sidebar';
+import { docs } from '@/lib/source';
 import styles from './layout.module.css';
 
 export default function Layout({ children }: { children: ReactNode }) {

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

@@ -46,24 +46,29 @@ export type Payment = {
 };
 
 export const columns: DataTableColumnDef<Payment, unknown>[] = [
-  {
-    accessorKey: 'select',
-    header: '',
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={value => row.toggleSelected(!!value)}
-        aria-label='Select row'
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false
-  },
   {
     accessorKey: 'status',
     header: 'Status',
+    styles: {
+      cell: {
+        paddingLeft: 'var(--rs-space-7)'
+      },
+      header: {
+        paddingLeft: 'var(--rs-space-7)'
+      }
+    },
     cell: ({ row }) => (
-      <div className='capitalize'>{row.getValue('status')}</div>
+      <Flex gap={3} align='center'>
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={value => row.toggleSelected(!!value)}
+          aria-label='Select row'
+          style={{
+            display: 'block'
+          }}
+        />
+        <div className='capitalize'>{row.getValue('status')}</div>
+      </Flex>
     ),
     filterOptions: [
       {

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

@@ -1,4 +1,3 @@
-import { camelCaseToWords } from '@/lib/utils';
 import {
   InfoCircledIcon,
   Pencil2Icon,
@@ -15,6 +14,7 @@ import {
   Text
 } from '@raystack/apsara';
 import { cx } from 'class-variance-authority';
+import { camelCaseToWords } from '@/lib/utils';
 import styles from './styles.module.css';
 import {
   ComponentPropsType,
@@ -48,6 +48,7 @@ export default function DemoControls({
         const propValue = componentProps?.[prop] ?? '';
         const isCheckbox = control.type === 'checkbox';
         const isIcon = control.type === 'icon';
+        const isIconOptional = control.isIconOptional ?? true;
 
         // For checkbox and icon types, render in a special container
         if (isCheckbox || isIcon) {
@@ -61,18 +62,20 @@ export default function DemoControls({
                 <Text variant='secondary' size='small' weight='medium'>
                   {propLabel}
                 </Text>
-                <Switch
-                  size='small'
-                  checked={!!componentProps[prop]}
-                  onCheckedChange={checked => {
-                    if (isCheckbox) onPropChange(prop, checked);
-                    else
-                      onPropChange(
-                        prop,
-                        checked ? String(ICONS_MAP.plus.value) : ''
-                      );
-                  }}
-                />
+                {isIconOptional && (
+                  <Switch
+                    size='small'
+                    checked={!!componentProps[prop]}
+                    onCheckedChange={checked => {
+                      if (isCheckbox) onPropChange(prop, checked);
+                      else
+                        onPropChange(
+                          prop,
+                          checked ? String(ICONS_MAP.plus.value) : ''
+                        );
+                    }}
+                  />
+                )}
               </Flex>
               {isIcon && (
                 <Flex gap={2} align='center' className={styles.iconContainer}>
@@ -90,6 +93,12 @@ export default function DemoControls({
                         e.stopPropagation();
                       }}
                       aria-label={`Select ${icon.value || 'none'} icon`}
+                      style={{
+                        color:
+                          propValue === icon.value
+                            ? 'var(--rs-color-background-accent-emphasis)'
+                            : undefined
+                      }}
                     >
                       {icon.icon}
                     </IconButton>

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

@@ -8,6 +8,7 @@ import {
   UploadIcon
 } from '@radix-ui/react-icons';
 import * as Apsara from '@raystack/apsara';
+import dayjs from 'dayjs';
 import { Home, Info, Laugh, X } from 'lucide-react';
 import NextLink from 'next/link';
 import { Suspense } from 'react';
@@ -35,7 +36,8 @@ export default function Demo(props: DemoProps) {
       TransformIcon,
       Pencil2Icon,
       InfoCircledIcon,
-      UploadIcon
+      UploadIcon,
+      dayjs
     }
   } = props;