fix(#736): updates for doc issues found in apsara audit

apps/www/src/app/not-found.tsx

@@ -0,0 +1,19 @@
+import { Flex, Separator, Text } from '@raystack/apsara';
+
+export default function NotFound() {
+  return (
+    <Flex
+      align='center'
+      justify='center'
+      gap='large'
+      width='full'
+      style={{ height: '100vh' }}
+    >
+      <Text size={10} weight='bold'>
+        404
+      </Text>
+      <Separator orientation='vertical' style={{ height: '48px' }} />
+      <Text size={7}>This page could not be found.</Text>
+    </Flex>
+  );
+}

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

@@ -2,11 +2,9 @@ import {
   Checkbox,
   DataTable,
   DataTableColumnDef,
-  Flex,
-  Switch,
-  Text
+  Flex
 } from '@raystack/apsara';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
 const statuses = ['pending', 'processing', 'success', 'failed'] as const;
 
@@ -31,12 +29,12 @@ export const columns: DataTableColumnDef<Payment, unknown>[] = [
     header: 'Status',
     styles: {
       cell: {
-        width: 120,
+        width: 180,
         flex: 'none',
         paddingLeft: 'var(--rs-space-7)'
       },
       header: {
-        width: 120,
+        width: 180,
         flex: 'none',
         paddingLeft: 'var(--rs-space-7)'
       }
@@ -110,16 +108,29 @@ export const columns: DataTableColumnDef<Payment, unknown>[] = [
 ];
 
 const DataTableDemo = () => {
-  const [virtualized, setVirtualized] = useState(true);
-
   const data = useMemo(() => generateData(100), []);
+  return (
+    <Flex direction='column' gap={4} width='full'>
+      <div style={{ height: 400 }}>
+        <DataTable
+          data={data}
+          mode='client'
+          columns={columns}
+          defaultSort={{ name: 'email', order: 'asc' }}
+        >
+          <DataTable.Toolbar />
+          <DataTable.Content />
+        </DataTable>
+      </div>
+    </Flex>
+  );
+};
+
+const DataTableVirtualizedDemo = () => {
+  const data = useMemo(() => generateData(1000), []);
 
   return (
-    <Flex direction='column' gap='4' width='full'>
-      <Flex align='center' gap='2'>
-        <Switch checked={virtualized} onCheckedChange={setVirtualized} />
-        <Text>Virtualized (100 rows)</Text>
-      </Flex>
+    <Flex direction='column' gap={4} width='full'>
       <div style={{ height: 400 }}>
         <DataTable
           data={data}
@@ -128,15 +139,11 @@ const DataTableDemo = () => {
           defaultSort={{ name: 'email', order: 'asc' }}
         >
           <DataTable.Toolbar />
-          {virtualized ? (
-            <DataTable.VirtualizedContent rowHeight={44.5} />
-          ) : (
-            <DataTable.Content />
-          )}
+          <DataTable.VirtualizedContent rowHeight={44.5} />
         </DataTable>
       </div>
     </Flex>
   );
 };
 
-export default DataTableDemo;
+export { DataTableDemo, DataTableVirtualizedDemo };

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

@@ -54,7 +54,8 @@ const getUpdatedProps = (
 export default function DemoPlayground({
   scope,
   controls,
-  getCode
+  getCode,
+  style
 }: DemoPlaygroundProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -98,7 +99,7 @@ export default function DemoPlayground({
 
   return (
     <>
-      <DemoPreview type='code' code={previewCode} scope={scope} />
+      <DemoPreview type='code' code={previewCode} scope={scope} style={style} />
       <Dialog open={openPlayground} onOpenChange={setOpenPlayground}>
         <Dialog.Content
           className={styles.playgroundDialog}
@@ -136,7 +137,10 @@ export default function DemoPlayground({
                 )}
               >
                 <div className={cx(styles.preview, styles.playgroundPreview)}>
-                  <Preview className={styles.playgroundPreviewContent} />
+                  <Preview
+                    className={styles.playgroundPreviewContent}
+                    style={style}
+                  />
                 </div>
                 <DemoControls
                   controls={controls}

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

@@ -12,7 +12,8 @@ export default function DemoPreview({
   code,
   tabs,
   scope,
-  codePreview
+  codePreview,
+  style
 }: DemoPreviewProps) {
   const [activeTab, setActiveTab] = useState(0);
   const [activeCodePreviewTab, setActiveCodePreviewTab] = useState(0);
@@ -40,7 +41,7 @@ export default function DemoPreview({
           </div>
         )}
         <div className={styles.preview}>
-          <Preview />
+          <Preview style={style} />
         </div>
 
         {Array.isArray(codePreview) ? (

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

@@ -36,8 +36,9 @@ import dayjs from 'dayjs';
 import { Home, Info, Laugh, X } from 'lucide-react';
 import NextLink from 'next/link';
 import { Suspense } from 'react';
-import DataTableDemo from '../datatable-demo';
+import { DataTableDemo, DataTableVirtualizedDemo } from '../datatable-demo';
 import DataTableSelectionDemo from '../datatable-selection-demo';
+import ChipInputDemo from '../inputfield-chip-demo';
 import LinearMenuDemo from '../linear-dropdown-demo';
 import PopoverColorPicker from '../popover-color-picker';
 import DemoPlayground from './demo-playground';
@@ -55,6 +56,8 @@ export default function Demo(props: DemoProps) {
       OrganizationIcon,
       SidebarIcon,
       DataTableDemo,
+      DataTableVirtualizedDemo,
+      ChipInputDemo,
       DataTableSelectionDemo,
       LinearMenuDemo,
       PopoverColorPicker,

apps/www/src/components/demo/styles.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   border-radius: var(--rs-radius-2, 4px);
-  overflow: hidden;
+  overflow: clip;
   border: 1px solid var(--rs-color-border-base-primary);
   width: 100%;
 }
@@ -15,6 +15,7 @@
 
 .preview {
   flex: 1;
+  height: 100%;
   position: relative;
   display: flex;
   align-items: center;

apps/www/src/components/demo/types.ts

@@ -1,3 +1,5 @@
+import { CSSProperties } from 'react';
+
 export type ScopeType = Record<string, unknown>;
 
 type TabProps = {
@@ -10,13 +12,15 @@ export type DemoPreviewProps = {
   tabs?: { name: string; code: string }[];
   scope?: ScopeType;
   codePreview?: string | TabProps[];
+  style?: CSSProperties;
 };
 
 export type DemoPlaygroundProps = {
   type: 'playground';
   controls: ControlsType;
   getCode: GetCodeType;
   scope?: ScopeType;
+  style?: CSSProperties;
 };
 
 export type DemoProps = {

apps/www/src/components/inputfield-chip-demo.tsx

@@ -0,0 +1,33 @@
+import { InputField } from '@raystack/apsara';
+import { useState } from 'react';
+
+export default function ChipInputDemo() {
+  const [chips, setChips] = useState([
+    { label: 'Tag1' },
+    { label: 'Tag2' },
+    { label: 'Tag3' },
+    { label: 'Tag4' },
+    { label: 'Tag5' }
+  ]);
+  const [input, setInput] = useState('');
+
+  return (
+    <InputField
+      placeholder='Type and press Enter...'
+      width='560px'
+      value={input}
+      onChange={e => setInput(e.target.value)}
+      onKeyDown={e => {
+        if (e.key === 'Enter' && input.trim()) {
+          setChips(prev => [...prev, { label: input.trim() }]);
+          setInput('');
+        }
+      }}
+      chips={chips.map((c, i) => ({
+        label: c.label,
+        onRemove: () => setChips(prev => prev.filter((_, j) => j !== i))
+      }))}
+      maxChipsVisible={4}
+    />
+  );
+}

apps/www/src/components/playground/calendar-examples.tsx

@@ -9,7 +9,7 @@ export function CalendarExamples() {
       <Flex gap='medium' direction='column'>
         <Calendar numberOfMonths={2} />
         <RangePicker inputFieldsProps={{ startDate: { size: 'small' } }} />
-        <DatePicker inputFieldProps={{ size: 'medium' }} />
+        <DatePicker inputFieldProps={{ size: 'small' }} />
       </Flex>
     </PlaygroundLayout>
   );

apps/www/src/components/playground/data-table-examples.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import DataTableDemo from '../datatable-demo';
+import { DataTableDemo } from '../datatable-demo';
 import PlaygroundLayout from './playground-layout';
 
 export function DataTableExamples() {

apps/www/src/components/preview/preview.module.css

@@ -1,9 +1,10 @@
 .preview {
-  padding: 0;
+  padding: var(--rs-space-10);
   width: 100%;
-  height: 100%;
+  height: stretch;
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
-  overflow: auto;
-}
+  overflow: visible;
+}

apps/www/src/components/preview/preview.tsx

@@ -2,6 +2,17 @@ import { cx } from 'class-variance-authority';
 import { LivePreview } from 'react-live';
 import styles from './preview.module.css';
 
-export default function Preview({ className }: { className?: string }) {
-  return <LivePreview className={cx(styles.preview, 'not-prose', className)} />;
+export default function Preview({
+  className,
+  style
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <LivePreview
+      className={cx(styles.preview, 'not-prose', className)}
+      style={style}
+    />
+  );
 }

apps/www/src/content/docs/components/accordion/demo.ts

@@ -2,6 +2,10 @@
 
 import { getPropsString } from '@/lib/utils';
 
+const styleDemo = {
+  alignItems: 'flex-start'
+};
+
 export const getCode = (props: Record<string, unknown>) => {
   return `<Accordion${getPropsString(props)}>
         <Accordion.Item value="item-1">
@@ -33,11 +37,13 @@ export const playground = {
       defaultValue: false
     }
   },
+  style: styleDemo,
   getCode
 };
 
 export const typeDemo = {
   type: 'code',
+  style: styleDemo,
   tabs: [
     {
       name: 'Single',
@@ -91,6 +97,7 @@ export const typeDemo = {
 };
 export const controlledDemo = {
   type: 'code',
+  style: styleDemo,
   code: `
   function ControlledAccordion() {
   const [value, setValue] = React.useState('item-1');
@@ -112,6 +119,7 @@ export const controlledDemo = {
 
 export const disabledDemo = {
   type: 'code',
+  style: styleDemo,
   code: `
 <Accordion>
   <Accordion.Item value="item-1">
@@ -131,6 +139,7 @@ export const disabledDemo = {
 
 export const customContentDemo = {
   type: 'code',
+  style: styleDemo,
   code: `
 <Accordion>
   <Accordion.Item value="item-1">

apps/www/src/content/docs/components/announcement-bar/demo.ts

@@ -19,5 +19,8 @@ export const playground = {
     actionLabel: { type: 'text', initialValue: 'Read More' },
     actionIcon: { type: 'icon', defaultValue: '' }
   },
-  getCode
+  getCode,
+  style: {
+    padding: 0
+  }
 };