Narrow component prop types, remove unused props and dead code (#2838)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

shared/components/cards/BodyPlaceholder.astro

@@ -1,16 +1,15 @@
 ---
 interface Props {
-  width?: number
   height?: number
-  ratio?: string
   class?: string
 }
 
-const { width = 400, height = 200, ratio, class: className } = Astro.props
+const width = 400
+const { height = 200, class: className } = Astro.props
 ---
 
 <div class={`card-body${className ? ` ${className}` : ''}`}>
-  <svg xmlns="http://www.w3.org/2000/svg" class="w-100 border rounded" preserveAspectRatio={ratio ? 'xMidYMid meet' : 'none'} width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+  <svg xmlns="http://www.w3.org/2000/svg" class="w-100 border rounded" preserveAspectRatio="none" width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
     <line x1="0" y1="0" x2={width} y2={height}></line>
     <line x1="0" y1={height} x2={width} y2="0"></line>
   </svg>

shared/components/cards/Card.astro

@@ -1,5 +1,4 @@
 ---
-import CardSubtitle from '@ui/CardSubtitle.astro';
 import Icon from '@ui/Icon.astro';
 import AvatarList from '@ui/AvatarList.astro';
 import Empty from '@ui/Empty.astro';
@@ -8,9 +7,6 @@ import photos from '@data/photos.json';
 import { requireIndex } from '@shared/lib/array';
 
 interface Props {
-	link?: boolean;
-	active?: boolean;
-	inactive?: boolean;
 	class?: string;
 	empty?: boolean;
 	imgTop?: boolean;
@@ -18,17 +14,9 @@ interface Props {
 	statusTop?: string;
 	statusBottom?: string;
 	statusStart?: string;
-	header?: boolean;
-	headerTitle?: string;
 	headerTabs?: boolean;
 	headerPills?: boolean;
-	alert?: string;
-	alertType?: string;
 	title?: string;
-	subtitle?: boolean;
-	body?: string;
-	button?: boolean;
-	footer?: boolean;
 	footerButton?: boolean;
 	footerButtons?: boolean;
 	/** a right-angle-bracket prefix pushes the element (and every following one) to the right — `right` is never reset */
@@ -37,9 +25,6 @@ interface Props {
 }
 
 const {
-	link = false,
-	active,
-	inactive,
 	class: className,
 	empty,
 	imgTop,
@@ -47,31 +32,16 @@ const {
 	statusTop,
 	statusBottom,
 	statusStart,
-	header,
-	headerTitle,
 	headerTabs,
 	headerPills,
-	alert,
-	alertType = 'success',
 	title,
-	subtitle,
-	body,
-	button,
-	footer,
 	footerButton,
 	footerButtons,
 	footerElements,
 	progress,
 }: Props = Astro.props;
 
-const Element = link ? 'a' : 'div';
-
-const classes = [
-	'card',
-	active && 'card-active',
-	inactive && 'card-inactive',
-	className,
-]
+const classes = ['card', className]
 
 // footer-elements parsing — `right` is never reset once set across iterations.
 let right = false;
@@ -84,14 +54,14 @@ const footerEls = (footerElements ?? []).map((element: string) => {
 		return { el, right };
 	});
 
-const hasHeader = header || headerTitle || headerTabs || headerPills;
-const hasFooter = footer || footerButton || footerButtons || footerElements;
+const hasHeader = headerTabs || headerPills;
+const hasFooter = footerButton || footerButtons || footerElements;
 
 const imgTopPhoto = requireIndex(photos as { file: string; title: string }[], 7);
 const imgBottomPhoto = requireIndex(photos as { file: string; title: string }[], 11);
 ---
 
-<Element href={link ? '#' : undefined} class:list={classes}>
+<div class:list={classes}>
 	{
 		empty ? (
 			<Empty illustration="not-found" height={160} />
@@ -142,32 +112,18 @@ const imgBottomPhoto = requireIndex(photos as { file: string; title: string }[],
 								</li>
 							</ul>
 						) : (
-							<h3 class="card-title" set:html={headerTitle ?? 'Header title'} />
+							<h3 class="card-title">Header title</h3>
 						)}
 					</div>
 				)}
 
-				{alert && <div class={`card-alert alert alert-${alertType} mb-0`} set:html={alert} />}
 				<div class="card-body">
 					{title && <h3 class="card-title" set:html={title} />}
-					{subtitle && <CardSubtitle as="div">Card subtitle</CardSubtitle>}
 
-					{body ? (
-						<p class="text-secondary" set:html={body} />
-					) : (
-						<p class="text-secondary">
-							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque
-							minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
-						</p>
-					)}
-
-					{button && (
-						<div class="card-text">
-							<a href="#" class="btn btn-primary">
-								Go somewhere
-							</a>
-						</div>
-					)}
+					<p class="text-secondary">
+						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque
+						minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
+					</p>
 				</div>
 
 				{hasFooter && (
@@ -228,4 +184,4 @@ const imgBottomPhoto = requireIndex(photos as { file: string; title: string }[],
 			</Fragment>
 		)
 	}
-</Element>
+</div>

shared/components/cards/CardTabs.astro

@@ -1,14 +1,11 @@
 ---
 // Tabs/content blocks are HTML strings (different order when `bottom`).
 interface Props {
-  /** tabs-count — present but unused */
-  count?: number
   id?: string
   bottom?: boolean
-  borderless?: boolean
 }
 
-const { id = 'top', bottom, borderless } = Astro.props
+const { id = 'top', bottom } = Astro.props
 
 const tabs = ['Activity', 'Profile', 'Settings']
 
@@ -37,7 +34,7 @@ ${tabs
 ---
 
 <!-- Cards with tabs component -->
-<div class={`card-tabs${borderless ? ' border-0' : ''}`}>
+<div class="card-tabs">
   {
     bottom ? (
       <Fragment>

shared/components/cards/CarouselCard.astro

@@ -14,12 +14,12 @@ interface Props {
   controls?: boolean
   captions?: boolean
   offset?: number
-  limit?: number
   fade?: boolean
 }
 
-const { id: idProp, title = 'Carousel', indicators, indicatorsThumb, indicatorsThumbRatio, indicatorsDot, indicatorsVertical, controls, captions, offset = 0, limit = 5, fade } = Astro.props
+const { id: idProp, title = 'Carousel', indicators, indicatorsThumb, indicatorsThumbRatio, indicatorsDot, indicatorsVertical, controls, captions, offset = 0, fade } = Astro.props
 
+const limit = 5
 const carouselId = idProp ?? 'carousel'
 const filteredPhotos = (photos as { file: string; title?: string; horizontal?: boolean }[]).filter((p) => p.horizontal)
 const slides = filteredPhotos.slice(offset, offset + limit)

shared/components/cards/MapVectorCard.astro

@@ -3,10 +3,10 @@ import MapVector from '@ui/MapVector.astro'
 
 interface Props {
   title?: string
-  map?: string
 }
 
-const { title, map = 'world' } = Astro.props
+const { title } = Astro.props
+const map = 'world'
 ---
 
 <div class="card">

shared/components/cards/ProfileContact.astro

@@ -12,10 +12,10 @@ interface Person {
 
 interface Props {
   person: Person
-  color?: string
 }
 
-const { person, color = 'yellow' } = Astro.props
+const { person } = Astro.props
+const color = 'yellow'
 ---
 
 <div class={`card card-gradient card-gradient-${color}`}>

shared/components/cards/ProjectKanban.astro

@@ -9,17 +9,16 @@ interface Props {
   badge?: string
   offset?: number
   limit?: number
-  percentage?: number | string
   percentageColor?: string
   due?: string
   value?: number | string
 }
 
-const { title = 'Task Title', badge, offset = 40, limit = 7, percentage, percentageColor = 'green', due = '2 days', value = 20 } = Astro.props
+const { title = 'Task Title', badge, offset = 40, limit = 7, percentageColor = 'green', due = '2 days', value = 20 } = Astro.props
 ---
 
 <div class="card">
-  <Progress value={percentage ?? value} class="card-progress" color={percentageColor} />
+  <Progress value={value} class="card-progress" color={percentageColor} />
   <div class="card-body">
     <CardTitle>
       <a href="#">{title}</a>

shared/components/cards/ProjectSummary.astro

@@ -4,31 +4,26 @@ import AvatarList from '@ui/AvatarList.astro'
 import Progress from '@ui/Progress.astro'
 
 interface Props {
-  title?: string
-  date?: string
   stageColor?: string
-  stage?: string
-  projectColor?: string
-  percentage?: number | string
-  percentageColor?: string
-  avatarOffset?: number
-  avatarLimit?: number
 }
 
-const { title = 'New website', date = '28 Aug 2019', stageColor = 'green', stage = 'Waiting', projectColor, percentage, percentageColor, avatarOffset, avatarLimit } = Astro.props
+const { stageColor = 'green' } = Astro.props
+const title = 'New website'
+const date = '28 Aug 2019'
+const stage = 'Waiting'
 ---
 
 <div class="card">
   <div class="card-body p-4 py-5 text-center">
-    <Avatar size="xl" placeholder="W" class="mb-4" color={projectColor} />
+    <Avatar size="xl" placeholder="W" class="mb-4" />
     <h3 class="mb-0">{title}</h3>
     <p class="text-secondary">Due to: {date}</p>
     <p class="mb-3">
       <span class={`badge bg-${stageColor}-lt`}>{stage}</span>
     </p>
     <div>
-      <AvatarList stacked offset={avatarOffset} limit={avatarLimit} />
+      <AvatarList stacked />
     </div>
   </div>
-  <Progress class="card-progress" value={percentage} color={percentageColor} />
+  <Progress class="card-progress" />
 </div>

shared/components/cards/SmallStats.astro

@@ -4,8 +4,6 @@
 import Icon from '@ui/Icon.astro'
 import Avatar from '@ui/Avatar.astro'
 import ChartSparkline from '@ui/ChartSparkline.astro'
-import Trending from '@ui/Trending.astro'
-import Button from '@ui/Button.astro'
 
 interface Props {
   icon?: string
@@ -19,16 +17,12 @@ interface Props {
   chartType?: string
   chartPosition?: string
   chartData?: string | number
-  chartLabel?: string
-  chartLabelIcon?: string
   smallIcon?: string
   descriptionValue?: string
   descriptionValueColor?: string
-  trending?: number
-  button?: string
 }
 
-const { icon, color, lt, title, description, class: className, id, personId, chartType = 'line', chartPosition = 'right', chartData, smallIcon, descriptionValue, descriptionValueColor, trending, button } = Astro.props
+const { icon, color, lt, title, description, class: className, id, personId, chartType = 'line', chartPosition = 'right', chartData, smallIcon, descriptionValue, descriptionValueColor } = Astro.props
 
 const chartColor = color ?? 'primary'
 const avatarClass = [color ? `bg-${color}${lt ? '-lt' : ' text-white'}` : '', 'avatar', 'avatar-square']
@@ -73,22 +67,6 @@ const avatarClass = [color ? `bg-${color}${lt ? '-lt' : ' text-white'}` : '', 'a
           </div>
         )
       }
-
-      {
-        trending && (
-          <div class="col-auto">
-            <Trending value={trending} />
-          </div>
-        )
-      }
-
-      {
-        button && (
-          <div class="col-auto">
-            <Button text={button} size="sm" />
-          </div>
-        )
-      }
     </div>
   </div>
 </div>

shared/components/cards/TabsCard.astro

@@ -5,8 +5,6 @@ import DropdownMenu from '@ui/DropdownMenu.astro'
 interface Props {
   id: string
   icons?: boolean
-  /** hide-text param; not used by current call sites */
-  hideText?: boolean
   reverse?: boolean
   justified?: boolean
   activity?: boolean
@@ -16,9 +14,8 @@ interface Props {
   animation?: boolean
 }
 
-const { id, icons, hideText, reverse = false, justified, activity, disabled, dropdown, settings, animation } = Astro.props
+const { id, icons, reverse = false, justified, activity, disabled, dropdown, settings, animation } = Astro.props
 
-const iconClass = hideText ? undefined : 'me-2'
 const navClass = `nav nav-tabs card-header-tabs${reverse ? ' flex-row-reverse' : ''}${justified ? ' nav-fill' : ''}`
 const paneClass = `tab-pane${animation ? ' fade' : ''}`
 ---
@@ -27,18 +24,18 @@ const paneClass = `tab-pane${animation ? ' fade' : ''}`
   <div class="card-header">
     <ul class={navClass} role="tablist">
       <li class="nav-item" role="presentation">
-        <a href={`#tabs-home-${id}`} id={`tabs-home-${id}-tab`} class="nav-link active" data-bs-toggle="tab" data-bs-target={`#tabs-home-${id}`} role="tab" aria-controls={`tabs-home-${id}`} aria-selected="true">{icons && <Icon name="home" class={iconClass} />}{!hideText && 'Home'}</a>
+        <a href={`#tabs-home-${id}`} id={`tabs-home-${id}-tab`} class="nav-link active" data-bs-toggle="tab" data-bs-target={`#tabs-home-${id}`} role="tab" aria-controls={`tabs-home-${id}`} aria-selected="true">{icons && <Icon name="home" class="me-2" />}Home</a>
       </li>
       <li class="nav-item" role="presentation">
-        <a href={`#tabs-profile-${id}`} id={`tabs-profile-${id}-tab`} class="nav-link" data-bs-toggle="tab" data-bs-target={`#tabs-profile-${id}`} role="tab" aria-controls={`tabs-profile-${id}`} aria-selected="false">{icons && <Icon name="user" class={iconClass} />}{!hideText && 'Profile'}</a>
+        <a href={`#tabs-profile-${id}`} id={`tabs-profile-${id}-tab`} class="nav-link" data-bs-toggle="tab" data-bs-target={`#tabs-profile-${id}`} role="tab" aria-controls={`tabs-profile-${id}`} aria-selected="false">{icons && <Icon name="user" class="me-2" />}Profile</a>
       </li>
 
       {
         activity && (
           <li class="nav-item" role="presentation">
             <a href={`#tabs-activity-${id}`} id={`tabs-activity-${id}-tab`} class="nav-link" data-bs-toggle="tab" data-bs-target={`#tabs-activity-${id}`} role="tab" aria-controls={`tabs-activity-${id}`} aria-selected="false">
-              {icons && <Icon name="activity" class={iconClass} />}
-              {!hideText && 'Activity'}
+              {icons && <Icon name="activity" class="me-2" />}
+              Activity
             </a>
           </li>
         )
@@ -48,8 +45,8 @@ const paneClass = `tab-pane${animation ? ' fade' : ''}`
         disabled && (
           <li class="nav-item" role="presentation">
             <a href="#" class="nav-link disabled" data-bs-toggle="tab" role="tab" aria-selected="false" aria-disabled="true" tabindex="-1">
-              {icons && <Icon name="x" class={iconClass} />}
-              {!hideText && 'Disabled'}
+              {icons && <Icon name="x" class="me-2" />}
+              Disabled
             </a>
           </li>
         )

shared/components/cards/UserInfo.astro

@@ -16,18 +16,12 @@ interface Person {
   [key: string]: unknown
 }
 
-interface Props {
-  title?: string
-  personId?: number
-}
-
-const { title = 'Basic info', personId = 25 } = Astro.props
-const person = requireIndex(people as Person[], personId - 1)
+const person = requireIndex(people as Person[], 24)
 ---
 
 <div class="card">
   <div class="card-body">
-    <h3 class="card-title">{title}</h3>
+    <h3 class="card-title">Basic info</h3>
     <div class="mb-2">
       <Icon name="book" class="me-2 text-secondary" />
       Went to: <strong>{person.university}</strong>

shared/components/cards/UsersList.astro

@@ -16,7 +16,6 @@ interface Person {
 }
 
 interface Props {
-  limit?: number
   offset?: number
   hoverable?: boolean
   checkbox?: boolean
@@ -32,7 +31,9 @@ interface Props {
   hover?: boolean
 }
 
-const { limit = 8, offset = 0, hoverable = false, checkbox, checkedIds, title = 'Last commits', class: className } = Astro.props
+const { offset = 0, hoverable = false, checkbox, checkedIds, title = 'Last commits', class: className } = Astro.props
+
+const limit = 8
 
 const colors = ['green', 'red', 'yellow', 'x', 'x']
 const commitList = commits as { description: string }[]

shared/components/cards/UsersList2.astro

@@ -12,13 +12,14 @@ interface Person {
 }
 
 interface Props {
-  limit?: number
-  offset?: number
-  title?: string
   class?: string
 }
 
-const { limit = 10, offset = 0, title = 'Top users', class: className } = Astro.props
+const { class: className } = Astro.props
+
+const limit = 10
+const offset = 0
+const title = 'Top users'
 
 const colors = ['green', 'red', 'yellow', 'x', 'x'] as const
 const statusLabels: Record<(typeof colors)[number], string> = { green: 'Online', red: 'Busy', yellow: 'Away', x: 'Offline' }

shared/components/cards/UsersListHeaders.astro

@@ -15,11 +15,7 @@ interface Person {
   [key: string]: unknown
 }
 
-interface Props {
-  title?: string
-}
-
-const { title = 'People' } = Astro.props
+const title = 'People'
 
 const commitList = commits as { description: string }[]