docs: add missing controlled datepicker example #1640

SarthakPandey2002 · 2025-12-10T13:13:28Z

Description

Adds the missing controlled datepicker example that was referenced in the documentation but not rendering.

Fixes

Closes #1588

Changes

Added datepicker.value.tsx example file demonstrating:
- Controlled datepicker using value prop
- onChange handler with state management
- Setting date programmatically with "Set to Today" button
- Clearing date by passing null with "Clear" button
- Displaying selected date to show state changes

Summary by CodeRabbit

Documentation
- Added a client-side React example demonstrating a state-controlled Datepicker with buttons to set today or clear the selection and a live display of the chosen date, providing a practical reference for implementing interactive date selection.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

…by adding the missing datepicker.value.tsx example file that demonstrates controlled datepicker usage with value prop and ability to clear by passing null

changeset-bot · 2025-12-10T13:13:31Z

⚠️ No Changeset found

Latest commit: 159fd48

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2025-12-10T13:13:32Z

@SarthakAltudo is attempting to deploy a commit to the Themesberg Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2025-12-10T13:13:52Z

Walkthrough

Adds a new client-side React example implementing a controlled Datepicker component with helper buttons and exported example metadata, and re-exports that metadata from the example index. (No other behavioral changes.)

Changes

Cohort / File(s)	Change Summary
Controlled Datepicker example `apps/web/examples/datepicker/datepicker.value.tsx`, `apps/web/examples/datepicker/index.ts`	New example component (`datepicker.value.tsx`) providing a state-controlled Datepicker with value/onChange, "Today" and "Clear" buttons, conditional display of selected date, and exported `value: CodeData`; `index.ts` re-exports `value`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Verify imports from flowbite-react and JSX types
Confirm selectedDate state and onChange wiring
Check setToday / clear handlers and date formatting
Ensure exported value metadata shape matches other examples and index.ts re-export is correct

Suggested reviewers

SutuSebastian

Poem

🐰 I hopped into code to set the day,
A picker held steady along the way.
One button brings the sun, one makes it clear,
Examples now render, the path is near. ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding a missing controlled datepicker example to the documentation.
Linked Issues check	✅ Passed	The pull request implements the required controlled datepicker example with value prop, onChange handler, and programmatic state management as specified in issue #1588.
Out of Scope Changes check	✅ Passed	All changes are within scope: the new datepicker.value.tsx example file and corresponding index.ts export directly address the missing example referenced in issue #1588.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b43b142 and 159fd48.

📒 Files selected for processing (1)

apps/web/examples/datepicker/datepicker.value.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

apps/web/examples/datepicker/datepicker.value.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: 🧰 Build

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/web/examples/datepicker/datepicker.value.tsx (1)

1-69: Resolve Prettier/code style warning from CI

CI reports a Prettier/style issue for this file. Please run the repo’s formatter (for example, pnpm lint or Prettier with --write as configured here) to normalize formatting before merging, rather than formatting manually.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9d7731e and 7c75eab.

📒 Files selected for processing (1)

apps/web/examples/datepicker/datepicker.value.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2024-07-27T04:19:32.056Z

Learnt from: rluders
Repo: themesberg/flowbite-react PR: 1314
File: packages/ui/src/components/Datepicker/helpers.ts:112-119
Timestamp: 2024-07-27T04:19:32.056Z
Learning: The `getFormattedDate` function in `packages/ui/src/components/Datepicker/helpers.ts` should use `DateFNSFormat` directly with the date and format string for proper localization support, mapping language codes to locale objects from `date-fns/locale`.

Applied to files:

apps/web/examples/datepicker/datepicker.value.tsx

🧬 Code graph analysis (1)

apps/web/examples/datepicker/datepicker.value.tsx (2)

packages/ui/src/components/Button/Button.tsx (1)

Button (65-109)

apps/web/components/code-demo.tsx (1)

CodeData (48-48)

🪛 GitHub Actions: CI

apps/web/examples/datepicker/datepicker.value.tsx

[warning] 1-1: Code style issues found in the above file. Run Prettier with --write to fix.

🔇 Additional comments (3)

apps/web/examples/datepicker/datepicker.value.tsx (3)

7-35: Stringified example matches the live component usage

The code string mirrors the live Component implementation and clearly demonstrates a controlled Datepicker with value and onChange, plus "Set to Today" and "Clear" actions. This should render well in the docs as a self-contained snippet.

37-58: Controlled Datepicker behavior looks correct

The component correctly models a controlled Datepicker: selectedDate state, value={selectedDate}, onChange={setSelectedDate}, and safe rendering of selectedDate.toLocaleDateString() behind a truthy check. The "Set to Today" and "Clear" buttons exercise both non-null and null values, which aligns with the controlled example the docs describe.

60-69: CodeData export aligns with docs infra expectations

The value: CodeData object uses type: "single", provides the TSX code, a githubSlug matching the file path, and an actual <Component /> instance. This is consistent with how other examples are wired and should allow <Example name="datepicker.value" /> to resolve and render correctly.

vercel · 2025-12-10T13:25:02Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
flowbite-react	Ready	Preview	Comment	Dec 11, 2025 1:38pm
flowbite-react-storybook	Ready	Preview	Comment	Dec 11, 2025 1:38pm

SutuSebastian · 2025-12-10T13:28:35Z

Thanks for the contribution!
Looking good, just run bun run format to format the files.

SutuSebastian

Make sure to export the newly created demo file in apps/web/examples/datepicker/index.ts like:

export { value } from "./datepicker.value";

SutuSebastian

run bun run format to format the files

SarthakPandey2002 · 2025-12-11T12:25:59Z

run bun run format to format the files

Hi @SutuSebastian I'm unable to run bun run format locally due to a Windows path separator issue in the Rollup config
My code follows the exact same structure as other datepicker examples. Could you run the formatter on your end or let me know if there's a workaround? Thanks!

SutuSebastian · 2025-12-11T12:53:23Z

@SarthakPandey2002 that's actually a bug, good catch!

to by-pass ur issue, in packages/ui/rollup.config.js, update:

from

!path.includes(tailwindPluginCssFile)

to

!path.replace(/\\/g, "/").includes(tailwindPluginCssFile)

and run the format command again

SarthakPandey2002 · 2025-12-11T13:21:05Z

@SutuSebastian formatting changes done

SutuSebastian

LGTM, thanks!

docs: add missing controlled datepicker example Fixes themesberg#1588 …

7c75eab

…by adding the missing datepicker.value.tsx example file that demonstrates controlled datepicker usage with value prop and ability to clear by passing null

coderabbitai bot reviewed Dec 10, 2025

View reviewed changes

vercel bot deployed to Preview – flowbite-react-storybook December 10, 2025 13:25 View deployment

vercel bot deployed to Preview – flowbite-react December 10, 2025 13:28 View deployment

SutuSebastian requested changes Dec 10, 2025

View reviewed changes

chore: add export for value example

b43b142

SutuSebastian requested changes Dec 11, 2025

View reviewed changes

fix: add controlled datepicker example

159fd48

vercel bot deployed to Preview – flowbite-react December 11, 2025 13:38 View deployment

SutuSebastian approved these changes Dec 11, 2025

View reviewed changes

SutuSebastian merged commit 0a50833 into themesberg:main Dec 11, 2025
7 of 8 checks passed

Uh oh!

docs: add missing controlled datepicker example #1640

docs: add missing controlled datepicker example #1640

Uh oh!

Conversation

SarthakPandey2002 commented Dec 10, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Fixes

Changes

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented Dec 10, 2025

Uh oh!

coderabbitai bot commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SutuSebastian commented Dec 10, 2025

Uh oh!

SutuSebastian left a comment

Choose a reason for hiding this comment

Uh oh!

SutuSebastian left a comment

Choose a reason for hiding this comment

Uh oh!

SarthakPandey2002 commented Dec 11, 2025

Uh oh!

SutuSebastian commented Dec 11, 2025

Uh oh!

SarthakPandey2002 commented Dec 11, 2025

Uh oh!

SutuSebastian left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

SarthakPandey2002 commented Dec 10, 2025 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Dec 10, 2025 •

edited

Loading

coderabbitai bot commented Dec 10, 2025 •

edited

Loading

vercel bot commented Dec 10, 2025 •

edited

Loading