Fix the task due dates and drop dead props, classes and a dead script (#2934)

.changeset/fix-dead-props-stale-notes.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Fixed task cards not showing their due date and removed dead props and classes such as `fluidSearch` and `text-*-lt-fg`.

core/.build/compare-variables.ts

@@ -1,83 +0,0 @@
-import { readFileSync } from 'node:fs'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-// Get __dirname in ES modules
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-// File paths (relative to core/.build directory)
-const bootstrapPath = path.join(__dirname, '../node_modules/bootstrap/scss/_variables.scss')
-const tablerPath = path.join(__dirname, '../scss/_variables.scss')
-
-// Function to extract variable names from SCSS file
-function extractVariables(filePath: string): Set<string> {
-  const content = readFileSync(filePath, 'utf8')
-  const variables = new Set<string>()
-
-  // Regex to find SCSS variables
-  // Looks for patterns like: $variable-name: value
-  // Includes variables in maps and lists
-  const variableRegex = /\$([a-zA-Z0-9_-]+)\s*[:=]/g
-
-  let match: RegExpExecArray | null
-  while ((match = variableRegex.exec(content)) !== null) {
-    const varName = match[1]
-    variables.add(varName)
-  }
-
-  return variables
-}
-
-// Main function
-function compareVariables(): void {
-  console.log('Analyzing Bootstrap variables...')
-  const bootstrapVars = extractVariables(bootstrapPath)
-  console.log(`Found ${bootstrapVars.size} variables in Bootstrap\n`)
-
-  console.log('Analyzing Tabler variables...')
-  const tablerVars = extractVariables(tablerPath)
-  console.log(`Found ${tablerVars.size} variables in Tabler\n`)
-
-  // Find variables that are in Bootstrap but not in Tabler
-  const missingInTabler: string[] = []
-  for (const varName of bootstrapVars) {
-    if (!tablerVars.has(varName)) {
-      missingInTabler.push(varName)
-    }
-  }
-
-  // Sort alphabetically
-  missingInTabler.sort()
-
-  console.log('='.repeat(60))
-  console.log(`Variables in Bootstrap that are missing in Tabler: ${missingInTabler.length}`)
-  console.log('='.repeat(60))
-
-  if (missingInTabler.length === 0) {
-    console.log('All Bootstrap variables are present in Tabler!')
-  } else {
-    console.log('\nList of missing variables:\n')
-    missingInTabler.forEach((varName: string, index: number) => {
-      console.log(`${(index + 1).toString().padStart(4)}. $${varName}`)
-    })
-  }
-
-  // Optionally: show statistics
-  console.log('\n' + '='.repeat(60))
-  console.log('Statistics:')
-  console.log(`  Bootstrap: ${bootstrapVars.size} variables`)
-  console.log(`  Tabler:    ${tablerVars.size} variables`)
-  console.log(`  Missing:    ${missingInTabler.length} variables`)
-  console.log(`  Coverage:   ${((1 - missingInTabler.length / bootstrapVars.size) * 100).toFixed(1)}%`)
-  console.log('='.repeat(60))
-}
-
-// Run analysis
-try {
-  compareVariables()
-} catch (error) {
-  const errorMessage = error instanceof Error ? error.message : String(error)
-  console.error('Error during analysis:', errorMessage)
-  process.exit(1)
-}

docs/components/DocsToc.astro

@@ -24,7 +24,6 @@ interface Props {
 
 const { toc = [], editUrl, sourceUrl, markdownUrl } = Astro.props
 
-// shared/data/illustrations.json has 125 entries.
 const illustrationsCount = 130
 ---
 

preview/pages/colors.astro

@@ -61,7 +61,7 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
                 <div class="col-12">
                   <div class="row align-items-center">
                     <div class="col-auto">
-                      <Avatar shape="square" class={`bg-${name}-lt text-${name}-lt-fg`} placeholder={color.abbr} />
+                      <Avatar shape="square" class={`bg-${name}-lt`} placeholder={color.abbr} />
                     </div>
                     <div class="col">
                       {color.title}

preview/pages/emails.astro

@@ -68,7 +68,7 @@ const emailEntries = Object.entries(emails)
                 </Prose>
 
                 <div class="mt-6">
-                  <a href={site.emails.buy_link} class="btn btn-primary w-100" target="_blank">Buy {site.emails.count} emails for {site.emails.price}</a>
+                  <a href={site.emails.buy_link} class="btn btn-primary w-100" target="_blank">Buy all emails for {site.emails.price}</a>
                 </div>
               </div>
             </div>

preview/pages/lists.astro

@@ -20,7 +20,7 @@ import DocsLink from '@ui/DocsLink.astro'
           <UsersList2 />
         </div>
         <div class="col-12">
-          <UsersList offset={8} checkbox hover checkedIds={[2, 5, 8]} title="Contacts" />
+          <UsersList offset={8} checkbox checkedIds={[2, 5, 8]} title="Contacts" />
         </div>
         <div class="col-12">
           <Card>

preview/pages/navigation.astro

@@ -25,7 +25,7 @@ import DocsLink from '@ui/DocsLink.astro'
     </div>
 
     <div class="mb-3">
-      <Navbar sample condensed dark background="primary" hideBrand hideIcons fluidSearch hideUsername personId={7} />
+      <Navbar sample condensed dark background="primary" hideBrand hideIcons hideUsername personId={7} />
     </div>
 
     <div class="mb-3">

preview/pages/onboarding.astro

@@ -1,5 +1,4 @@
 ---
-// NOTE: `current=2` passed to ProgressSteps is a no-op (reads `active`, not `current`) — only step 1 is active.
 import BaseLayout from '@shared/layouts/BaseLayout.astro'
 import Logo from '@shared/components/navbar/Logo.astro'
 import ProgressSteps from '@ui/ProgressSteps.astro'

preview/pages/sign-in-illustration.astro

@@ -3,8 +3,6 @@ import SingleLayout from '@shared/layouts/SingleLayout.astro'
 import Logo from '@shared/components/navbar/Logo.astro'
 import SignInCard from '@shared/components/cards/SignInCard.astro'
 import Illustration from '@ui/Illustration.astro'
-
-// show-header prop ignored — SignInCard renders header unconditionally.
 ---
 
 <SingleLayout title="Sign in with illustration" containerSize="normal" hideLogo>

preview/pages/social-icons.astro

@@ -1,5 +1,4 @@
 ---
-// plugins: ['social'] front matter is inert — .social styles ship globally in tabler-socials.css.
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import ButtonList from '@ui/ButtonList.astro'
 import Trending from '@ui/Trending.astro'

shared/components/cards/UsersList.astro

@@ -16,8 +16,6 @@ interface Props {
   checkedIds?: number[]
   title?: string
   class?: string
-  /** Unused; only `hoverable` toggles the star column. */
-  hover?: boolean
 }
 
 const { offset = 0, hoverable = false, checkbox, checkedIds, title = 'Last commits', class: className } = Astro.props

shared/components/cards/charts/SocialReferrals.astro

@@ -1,5 +1,4 @@
 ---
-// legend=true at call site is inert — Chart reads legend from chart data, not props.
 import CardTitle from '@ui/CardTitle.astro'
 import Chart from '@shared/components/demo/Chart.astro'
 import DropdownDays from '@shared/components/demo/DropdownDays.astro'

shared/components/modals/SignatureModalContent.astro

@@ -1,6 +1,4 @@
 ---
-// The `sample` flag is unused.
-
 import CardSubtitle from '@ui/CardSubtitle.astro'
 import ModalClose from './ModalClose.astro'
 import CardTitle from '@ui/CardTitle.astro'

shared/components/navbar/Navbar.astro

@@ -29,7 +29,6 @@ interface Props {
 	background?: string;
 	/** inline `background:` style on the header */
 	backgroundColor?: string;
-	fluidSearch?: boolean;
 	/** extra classes on the header */
 	class?: string | undefined;
 }

shared/components/navbar/NavbarSearch.astro

@@ -1,5 +1,4 @@
 ---
-// breakpoint param (default 'lg') is unused.
 // Form action is "./" for root-level pages.
 import InputIcon from '@ui/form/InputIcon.astro'
 

shared/components/navbar/NavbarSide.astro

@@ -6,6 +6,7 @@ import NavbarSideNotifications from './NavbarSideNotifications.astro'
 import NavbarSideApps from './NavbarSideApps.astro'
 import NavbarSideLanguage from './NavbarSideLanguage.astro'
 import NavbarSideUser from './NavbarSideUser.astro'
+import { site } from '@shared/lib/site'
 
 /** Bootstrap responsive breakpoint used for `d-{breakpoint}-flex` — $grid-breakpoints minus xs */
 export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
@@ -38,8 +39,6 @@ const {
   showLanguageSelector = false,
   showUser = false,
 } = Astro.props
-
-const githubSponsorsUrl = 'https://github.com/sponsors/codecalm'
 ---
 
 <!-- BEGIN NAVBAR ACTIONS -->
@@ -48,7 +47,7 @@ const githubSponsorsUrl = 'https://github.com/sponsors/codecalm'
     !condensed && (
       <div class={`nav-item d-none d-${breakpoint}-flex me-3`}>
         <ButtonList>
-          <Button icon="heart" iconColor="pink" text="Sponsor" href={githubSponsorsUrl} external />
+          <Button icon="heart" iconColor="pink" text="Sponsor" href={site.githubSponsorsUrl} external />
         </ButtonList>
       </div>
     )

shared/components/parts/Tasks.astro

@@ -1,6 +1,4 @@
 ---
-// task['due-date'] is undefined (field is due_date) — due-date branch never renders.
-// Avatar offset uses task['users-offset'] (hyphenated key).
 import Icon from '@ui/Icon.astro'
 import PeopleAvatarList from '@shared/components/demo/PeopleAvatarList.astro'
 import CardTitle from '@ui/CardTitle.astro'
@@ -54,11 +52,11 @@ const data = tasksData as unknown as { columns: Column[] }
                       <div class="row">
                         <div class="col">{task.users && <PeopleAvatarList stacked={true} size="xs" offset={task['users-offset'] ?? 0} limit={task.users} />}</div>
 
-                        {task['due-date'] && (
+                        {task.due_date && (
                           <div class="col-auto">
                             <a href="#" class="link-warning">
                               <Icon name="calendar" />
-                              {task['due-date']}
+                              {task.due_date}
                             </a>
                           </div>
                         )}

shared/lib/site.ts

@@ -13,7 +13,7 @@ export const site = {
   githubUrl: 'https://github.com/tabler/tabler',
   githubSponsorsUrl: 'https://github.com/sponsors/codecalm',
   icons: { link: 'https://tabler.io/icons' },
-  emails: { price: '$29', buy_link: 'https://r.tabler.io/buy-emails', count: '' },
+  emails: { price: '$29', buy_link: 'https://r.tabler.io/buy-emails' },
   // Dev Google Maps API key for local development builds.
   googleMapsDevKey: 'AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw',
   // From shared/data/icons-info.json.

shared/ui/Badge.astro

@@ -8,7 +8,7 @@ interface Props {
   text?: string
   color?: string
   size?: BadgeSize | undefined
-  /** -lt colour variant + text-{color}-lt-fg */
+  /** -lt soft colour variant */
   light?: boolean
   class?: string
   icon?: string
@@ -19,7 +19,7 @@ interface Props {
 
 const { text, color, size, light, class: className, icon, iconEnd, ...rest } = Astro.props
 
-const classes = ['badge', size && `badge-${size}`, color && `bg-${color}${light ? '-lt' : ''} text-${color}${light ? '-lt' : ''}-fg`, className]
+const classes = ['badge', size && `badge-${size}`, color && (light ? `bg-${color}-lt` : `bg-${color} text-${color}-fg`), className]
 ---
 
 <span class:list={classes} {...rest}>{icon && <Icon name={icon} />}{text}{iconEnd && <Icon name={iconEnd} />}</span>

shared/ui/HrText.astro

@@ -1,7 +1,7 @@
 ---
 interface Props {
   text: string
-  /** hr-text-{position} (core/scss/ui/typo/_hr.scss); center is the default look */
+  /** hr-text-{position} (core/scss/ui/typo/_hr.scss); center is the default look and emits no class */
   position?: 'start' | 'center' | 'end' | undefined
   class?: string
   /** remaining attributes (id, data-*, aria-*, …) are forwarded to the root element */
@@ -10,7 +10,7 @@ interface Props {
 
 const { text, position, class: className, ...rest } = Astro.props
 
-const classes = ['hr-text', position && `hr-text-${position.toLowerCase()}`, className]
+const classes = ['hr-text', position && position !== 'center' && `hr-text-${position}`, className]
 ---
 
 <div class:list={classes} {...rest}>{text}</div>