fix: docs ui improvements

Author: rohanchkrabrty

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

@@ -54,6 +54,9 @@ export const columns: DataTableColumnDef<Payment, unknown>[] = [
         checked={row.getIsSelected()}
         onCheckedChange={value => row.toggleSelected(!!value)}
         aria-label='Select row'
+        style={{
+          display: 'block'
+        }}
       />
     ),
     enableSorting: false,

apps/www/src/components/demo/demo-controls.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/demo/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;
 

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

@@ -11,8 +11,6 @@
   min-height: 368px;
   display: flex;
   width: 100%;
-  /* border-bottom: 0.5px solid var(--rs-color-border-base-primary); */
-  max-height: 340px;
 }
 
 .preview {
@@ -48,6 +46,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   flex-shrink: 0;
+  max-height: 400px;
 }
 .noShadow {
   box-shadow: none;

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

@@ -31,6 +31,7 @@ export type ControlType = {
   initialValue?: string | boolean;
   min?: number;
   max?: number;
+  isIconOptional?: boolean;
 };
 
 export type ControlsType = Record<string, ControlType>;

apps/www/src/components/mdx/mdx-components.module.css

@@ -44,17 +44,17 @@
   margin-top: var(--rs-space-4);
 }
 
-:global(.prose) ul,
-:global(.prose) ol {
+:global(.prose) ul:not([data-demo] ul),
+:global(.prose) ol:not([data-demo] ol) {
   padding-left: var(--rs-space-5);
   margin: 0;
 }
 
-:global(.prose) ul li,
-:global(.prose) ol li {
+:global(.prose) ul:not([data-demo] ul) li,
+:global(.prose) ol:not([data-demo] ol) li {
   margin-bottom: var(--rs-space-3);
 }
-:global(.prose) ul li:first-child,
-:global(.prose) ol li:first-child {
+:global(.prose) ul:not([data-demo] ul) li:first-child,
+:global(.prose) ol:not([data-demo] ol) li:first-child {
   margin-top: var(--rs-space-3);
 }

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

@@ -5,4 +5,5 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow: auto;
 }

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

@@ -48,6 +48,7 @@
   line-height: var(--rs-line-height-mono-small);
   letter-spacing: var(--rs-letter-spacing-mono-small);
   color: var(--rs-color-foreground-base-primary);
+  padding: var(--rs-space-3) var(--rs-space-4);
 }
 
 .propName {
@@ -74,6 +75,10 @@
   background: transparent;
   padding: 0;
 }
+.fieldCode :global(.token-line) > span {
+  display: flex;
+  flex-wrap: wrap;
+}
 
 .fieldLabel {
   width: 200px;

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

@@ -14,10 +14,7 @@ export const preview = {
     },
     {
       name: 'Date Picker',
-      code: `
-      <Flex style={{height:200}}>
-        <DatePicker />
-      </Flex>`
+      code: `<DatePicker />`
     }
   ]
 };
@@ -116,7 +113,7 @@ export const dateInfoDemo = {
         gap={2}
         style={{ fontSize: '8px', color: 'var(--rs-color-foreground-base-secondary)' }}
       >
-        <BellIcon style={{ width: '8px', height: '8px' }} />
+        <Info style={{ width: '8px', height: '8px' }} />
         <Text style={{ fontSize: '8px' }} color='secondary'>25%</Text>
       </Flex>
     )

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

@@ -5,7 +5,7 @@ import { getPropsString } from '@/lib/utils';
 export const getCode = (props: any) => {
   const { children, ...rest } = props;
 
-  return `<Container${getPropsString(rest)}>${children}</Container>`;
+  return `<Container${getPropsString(rest)}><Text>${children}</Text></Container>`;
 };
 
 export const playground = {