typescript strictness cleanup

apps/www/package.json

@@ -41,6 +41,7 @@
     "@raystack/tools-config": "workspace:*",
     "@types/mdx": "^2.0.13",
     "@types/node": "^24.9.2",
+    "@types/prettier": "^2",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "typescript": "^5.9.3"

apps/www/src/app/examples/table/page.tsx

@@ -113,7 +113,8 @@ const Page = () => {
       let shouldShow = true;
       if (filters.includes('email')) {
         shouldShow = item.email.includes(
-          tableQuery?.filters?.[filters.indexOf('email')]?.value || ''
+          (tableQuery?.filters?.[filters.indexOf('email')]?.value as string) ||
+            ''
         );
       }
       if (shouldShow && filters.includes('amount')) {
@@ -122,9 +123,11 @@ const Page = () => {
           tableQuery?.filters?.[filters.indexOf('amount')]?.value;
       }
       if (shouldShow && filters.includes('status')) {
-        shouldShow = tableQuery?.filters?.[
-          filters.indexOf('status')
-        ]?.value.includes(item.status);
+        shouldShow = (
+          (tableQuery?.filters?.[filters.indexOf('status')]?.value as
+            | string[]
+            | undefined) ?? []
+        ).includes(item.status);
       }
       return shouldShow;
     });

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

@@ -45,9 +45,9 @@ export type PropChangeHandlerType = (
   value: string | boolean | number
 ) => void;
 
-export type ComponentPropsType = Record<string, any>;
+export type ComponentPropsType = Record<string, unknown>;
 
 export type GetCodeType = (
-  updatedProps: Record<string, any>,
-  props: Record<string, any>
+  updatedProps: ComponentPropsType,
+  props: ComponentPropsType
 ) => string;

apps/www/src/components/icon-details/icon-details.tsx

@@ -3,12 +3,12 @@
 import { Separator } from '@raystack/apsara';
 import { cx } from 'class-variance-authority';
 import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import { ReactSVGElement } from 'react';
+import { ComponentType, SVGProps } from 'react';
 import styles from './icon-details.module.css';
 
 export interface IconDetailsProps {
   name: string;
-  icon: (props: any) => ReactSVGElement;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
 }
 
 const SIZES = [12, 16, 24, 48, 64];

apps/www/src/components/mdx/mdx-components.tsx

@@ -66,49 +66,47 @@ const mdxComponents = {
   img: Image,
   h1: (props: HTMLAttributes<HTMLHeadingElement>) => (
     <Headline
-      as='h1'
+      render={<h1 />}
       size='t4'
       {...props}
       className={cx(styles['prose-h1'], props.className)}
     />
   ),
   h2: (props: HTMLAttributes<HTMLHeadingElement>) => (
     <Headline
-      as='h2'
+      render={<h2 />}
       size='t3'
       {...props}
       className={cx(styles['prose-h2'], props.className)}
     />
   ),
   h3: (props: HTMLAttributes<HTMLHeadingElement>) => (
     <Headline
-      as='h3'
+      render={<h3 />}
       size='t2'
       {...props}
       className={cx(styles['prose-h3'], props.className)}
     />
   ),
   h4: (props: HTMLAttributes<HTMLHeadingElement>) => (
     <Headline
-      as='h4'
+      render={<h4 />}
       size='t1'
       {...props}
       className={cx(styles['prose-h4'], props.className)}
     />
   ),
   h5: (props: HTMLAttributes<HTMLHeadingElement>) => (
     <Text
-      //@ts-expect-error - Text component type doesn't support h5 element
-      as='h5'
+      render={<h5 />}
       size='large'
       {...props}
       className={cx(styles['prose-h5'], props.className)}
     />
   ),
   h6: (props: HTMLAttributes<HTMLHeadingElement>) => (
     <Text
-      // @ts-expect-error - Text component type doesn't support h6 element
-      as='h6'
+      render={<h6 />}
       size='regular'
       {...props}
       className={cx(styles['prose-h6'], props.className)}

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

@@ -1,12 +1,13 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
 const styleDemo = {
   alignItems: 'flex-start'
 };
 
-export const getCode = (props: Record<string, unknown>) => {
+export const getCode = (props: ComponentPropsType) => {
   return `<Accordion${getPropsString(props)}>
         <Accordion.Item value="item-1">
           <Accordion.Trigger>Is it accessible?</Accordion.Trigger>

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

@@ -1,9 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
-  console.log('props:', props);
+export const getCode = (props: ComponentPropsType) => {
   return `<Amount${getPropsString(props)}/>`;
 };
 

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

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   return `<AnnouncementBar${getPropsString(props)}/>`;
 };
 

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

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   return `<Avatar${getPropsString(props)}/>`;
 };
 

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

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   return `<Badge${getPropsString(props)}/>`;
 };
 

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

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   return `<Breadcrumb${getPropsString(props)}>
         <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
         <Breadcrumb.Separator/>

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

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   const { children, ...rest } = props;
   return `<Button${getPropsString(rest)}>${children}</Button>`;
 };

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

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   const { children, ...rest } = props;
   return `<Callout${getPropsString(
     rest

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

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   if (props.checked === 'false') props.checked = false;
   else if (props.checked === 'true') props.checked = true;
 

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

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   const { children, ...rest } = props;
 
   return `<Chip${getPropsString(rest)}>${children}</Chip>`;

apps/www/src/content/docs/components/code-block/demo.ts

@@ -1,5 +1,6 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
 const jsxCode = `{\`function add(a, b) {
@@ -34,7 +35,7 @@ const longCode = `{\`<Dialog>
   </Dialog.Content>
 </Dialog>\`}`;
 
-const getCode = (props: Record<string, unknown>) => {
+const getCode = (props: ComponentPropsType) => {
   const { children, maxLines, defaultValue = 'jsx', ...rest } = props;
   return `<CodeBlock${getPropsString({ ...rest, ...(maxLines ? { maxLines: Number(maxLines) } : {}), defaultValue })}>
   <CodeBlock.Header>

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

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: Record<string, unknown>) => {
+export const getCode = (props: ComponentPropsType) => {
   const { multiple, ...rest } = props;
   return `
   <Combobox${getPropsString({ ...(multiple ? { multiple } : {}) })}>

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

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   const { children, ...rest } = props;
 
   return `<Container${getPropsString(rest)}><Text>${children}</Text></Container>`;

apps/www/src/content/docs/components/context-menu/demo.ts

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   const contentProps = props.autocomplete
     ? ' searchPlaceholder="Search..."'
     : '';

apps/www/src/content/docs/components/copy-button/demo.ts

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   return `<CopyButton${getPropsString(props)}/>`;
 };
 

apps/www/src/content/docs/components/datatable/props.ts

@@ -53,14 +53,14 @@ export interface DataTableProps {
    * Return a stable unique id for each row (used as React key).
    * Use for sortable/filterable tables to avoid key issues when rows reorder.
    */
-  getRowId?: (row: any, index: number) => string;
+  getRowId?: (row: unknown, index: number) => string;
 }
 
 export interface DataTableQuery {
   filters?: Array<{
     name: string;
     operator: FilterOperatorTypes;
-    value: any;
+    value: unknown;
   }>;
   sort?: Array<{
     key: string;

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

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: Record<string, unknown>) => {
+export const getCode = (props: ComponentPropsType) => {
   return `
     <Drawer${getPropsString(props)}>
       <Drawer.Trigger render={<Button />}>Drawer</Drawer.Trigger>

apps/www/src/content/docs/components/empty-state/demo.ts

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   const { primaryAction, secondaryAction, ...rest } = props;
   const primaryActionCode = primaryAction
     ? `<Button>Primary Action</Button>`

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

@@ -1,10 +1,11 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   const { label, description, error, required, ...rest } = props;
-  const fieldProps: Record<string, unknown> = {};
+  const fieldProps: ComponentPropsType = {};
   if (label) fieldProps.label = label;
   if (description) fieldProps.description = description;
   if (error) fieldProps.error = error;

apps/www/src/content/docs/components/filter-chip/demo.ts

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   const { onRemove, ...rest } = props;
   const onRemoveProp = onRemove ? `onRemove={() => alert("Removed")}` : '';
 

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

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   return `
     <Flex${getPropsString(props)} style={{width:"100%",height:"100%"}}>
       <Button>Button 1</Button>

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

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   return `
     <Grid${getPropsString(props)} style={{width:"100%",height:"100%"}}>
       <Button>Button 1</Button>

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

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: Record<string, unknown>) => {
+export const getCode = (props: ComponentPropsType) => {
   const { children, ...rest } = props;
   return `<Headline${getPropsString(rest)}>${children}</Headline>`;
 };

apps/www/src/content/docs/components/icon-button/demo.ts

@@ -1,8 +1,9 @@
 'use client';
 
+import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
-export const getCode = (props: any) => {
+export const getCode = (props: ComponentPropsType) => {
   const { children, ...rest } = props;
   return `<IconButton${getPropsString(rest)}>${children}</IconButton>`;
 };