Dev to Staging

README.md

@@ -14,7 +14,7 @@ Using Force UI as a dependency in package.json -
 
 ```json
 "dependencies": {
-  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.4.0"
+  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.4.1"
 }
 ```
 
@@ -28,7 +28,7 @@ npm install
 Or you can directly run the following command to install the package -
 
 ```bash
-npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.4.0
+npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.4.1
 ```
 
 <br />

changelog.txt

@@ -1,3 +1,7 @@
+Version 1.4.1 - 10th February, 2025
+- Improvement: Show active preset with background color in the DatePicker component.
+- Improvement: Introduced a new property in the Select component for personalized search beyond the component.
+
 Version 1.4.0 - 27th January, 2025
 - New: Added a Hamburger Menu component.
 - Improvement: Added Y-axis tick formatter to the BarChart component.

gulpfile.js

@@ -0,0 +1,103 @@
+import gulp from 'gulp';
+import replace from 'gulp-replace';
+import inquirer from 'inquirer';
+import { exec } from 'child_process';
+
+/* eslint-disable no-console */
+
+function updateVersion( newVersion ) {
+	// Update README.md - handle both dependency formats
+	gulp.src( './README.md' )
+		.pipe(
+			replace(
+				/@bsf\/force-ui@git\+https:\/\/github\.com\/brainstormforce\/force-ui\.git#[0-9]+\.[0-9]+\.[0-9]+/g,
+				`@bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#${ newVersion }`
+			)
+		)
+		.pipe(
+			replace(
+				/@bsf\/force-ui": "git\+https:\/\/github\.com\/brainstormforce\/force-ui#[0-9]+\.[0-9]+\.[0-9]+/g,
+				`@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#${ newVersion }`
+			)
+		)
+		.pipe( gulp.dest( './' ) );
+
+	// Update package.json
+	gulp.src( './package.json' )
+		.pipe(
+			replace(
+				/"version": "[0-9]+\.[0-9]+\.[0-9]+"/,
+				`"version": "${ newVersion }"`
+			)
+		)
+		.pipe( gulp.dest( './' ) );
+
+	// Update version.json
+	gulp.src( './version.json' )
+		.pipe(
+			replace(
+				/"force-ui": "[0-9]+\.[0-9]+\.[0-9]+"/,
+				`"force-ui": "${ newVersion }"`
+			)
+		)
+		.pipe( gulp.dest( './' ) );
+}
+
+// Bump version in all files
+gulp.task( 'bump-and-update', function( done ) {
+	// Get the new version from command line arguments
+	let newVersion = process.argv[ 3 ];
+
+	// If the version is not provided as an argument, prompt for it
+	if ( ! newVersion ) {
+		inquirer
+			.prompt( [
+				{
+					type: 'input',
+					name: 'version',
+					message: 'Enter the new version:',
+				},
+			] )
+			.then( ( answers ) => {
+				newVersion = answers.version;
+				updateVersion( newVersion );
+				console.log( '✅ Bumped version successfully' );
+				done();
+			} )
+			.catch( ( error ) => {
+				console.error( `Error: ${ error.message }` );
+				console.error( '❌ Failed to bump version' );
+				done( error );
+			} );
+	} else {
+		try {
+			updateVersion( newVersion );
+			console.log( '✅ Bumped version successfully' );
+			done();
+		} catch ( error ) {
+			console.error( `Error: ${ error.message }` );
+			console.error( '❌ Failed to bump version' );
+			done( error );
+		}
+	}
+} );
+
+// Update package-lock.json
+gulp.task( 'update-package-lock', function( done ) {
+	exec( 'npm i', ( error, stdout, stderr ) => {
+		if ( error ) {
+			console.error( `Error: ${ error.message }` );
+			done( error );
+			return;
+		}
+		if ( stderr ) {
+			console.error( `stderr: ${ stderr }` );
+		}
+		console.log( `stdout: ${ stdout }` );
+		console.log( '✅ Updated package-lock.json successfully' );
+		done();
+	} );
+} );
+
+// Bump version and update package-lock.json
+gulp.task( 'bump', gulp.series( 'bump-and-update', 'update-package-lock' ) );

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.4.0",
+    "version": "1.4.1",
     "description": "Library of components for the BSF project",
     "main": "./dist/force-ui.js",
     "module": "./dist/force-ui.js",
@@ -107,6 +107,10 @@
         "eslint-plugin-react-refresh": "^0.4.12",
         "eslint-plugin-storybook": "^0.9.0",
         "globals": "^15.9.0",
+        "gulp": "^5.0.0",
+        "gulp-cli": "^3.0.0",
+        "gulp-replace": "^1.1.4",
+        "inquirer": "^12.4.1",
         "postcss": "^8.4.39",
         "prettier": "^3.2.5",
         "rollup-preserve-directives": "^1.1.2",
@@ -116,7 +120,7 @@
         "tailwindcss": "^3.4.10",
         "typescript": "5.4.2",
         "typescript-eslint": "^8.7.0",
-        "vite": "^5.4.8",
+        "vite": "^5.4.14",
         "vite-plugin-dts": "^4.2.3"
     },
     "browserslist": [

src/components/datepicker/datepicker.stories.tsx

@@ -162,6 +162,11 @@ WithPresets.args = {
 			},
 		},
 	],
+	// set last_week selected for testing.
+	selected: {
+		from: startOfMonth( new Date() ),
+		to: endOfMonth( new Date() ),
+	},
 	onApply: () => {
 		//code
 	},

src/components/datepicker/datepicker.tsx

@@ -9,9 +9,11 @@ import {
 	startOfMonth,
 	endOfMonth,
 	subDays,
+	startOfDay,
 } from 'date-fns';
 import { getDefaultSelectedValue } from './utils';
 import { type PropsBase } from 'react-day-picker';
+import { cn } from '@/utilities/functions';
 
 export interface DatePickerProps {
 	/** Defines the selection selectionType of the date picker: single, range, or multiple dates. */
@@ -114,8 +116,8 @@ const DatePicker = ( {
 		{
 			label: 'Last 7 Days',
 			range: {
-				from: subDays( new Date(), 6 ),
-				to: new Date(),
+				from: startOfDay( subDays( new Date(), 6 ) ),
+				to: startOfDay( new Date() ),
 			},
 		},
 		{
@@ -128,8 +130,8 @@ const DatePicker = ( {
 		{
 			label: 'Last 30 Days',
 			range: {
-				from: subDays( new Date(), 29 ),
-				to: new Date(),
+				from: startOfDay( subDays( new Date(), 29 ) ),
+				to: startOfDay( new Date() ),
 			},
 		},
 	];
@@ -226,16 +228,30 @@ const DatePicker = ( {
 		return (
 			<div className="flex flex-row shadow-datepicker-wrapper">
 				<div className="flex flex-col gap-1 p-3 items-start border border-solid border-border-subtle border-r-0 rounded-tl-md rounded-bl-md bg-background-primary">
-					{ presets.map( ( preset, index ) => (
-						<Button
-							key={ index }
-							onClick={ () => handlePresetClick( preset.range ) }
-							variant="ghost"
-							className="text-left font-medium text-sm text-nowrap w-full"
-						>
-							{ preset.label }
-						</Button>
-					) ) }
+					{ presets.map( ( preset, index ) => {
+						const isSelected =
+							selectedDates &&
+							'from' in selectedDates &&
+							'to' in selectedDates &&
+							selectedDates.from?.getTime() ===
+								preset.range.from.getTime() &&
+							selectedDates.to?.getTime() ===
+								preset.range.to.getTime();
+
+						return (
+							<Button
+								key={ index }
+								onClick={ () => handlePresetClick( preset.range ) }
+								variant="ghost"
+								className={ cn(
+									'text-left font-medium text-sm text-nowrap w-full',
+									isSelected && 'bg-brand-background-50'
+								) }
+							>
+								{ preset.label }
+							</Button>
+						);
+					} ) }
 				</div>
 				<DatePickerComponent
 					{ ...props }

src/components/select/select-types.ts

@@ -69,6 +69,10 @@ export type SelectProps = {
 	defaultValue?: SelectOptionValue | SelectOptionValue[];
 	/** Placeholder text for search box. */
 	searchPlaceholder?: string;
+	/** Function to fetch options. If provided, the search functionality will be handled outside of the select component. */
+	searchFn?: ( keyword: string ) => Promise<void>;
+	/** Delay in milliseconds for debounced search. If the searchFn is provided, the debounceDelay will be used to debounce the search. */
+	debounceDelay?: number;
 };
 
 export interface SelectPortalProps {
@@ -167,4 +171,6 @@ export type SelectContextValue = {
 	onChange: SelectOnChange;
 	value?: SelectOptionValue | SelectOptionValue[];
 	searchPlaceholder?: string;
+	searchFn?: ( keyword: string ) => Promise<void>;
+	debounceDelay?: number;
 };