Merge pull request #235 from brainstormforce/staging

`v1.3.4`

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.3.3"
+  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.3.4"
 }
 ```
 
@@ -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.3.3
+npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.3.4
 ```
 
 <br />

changelog.txt

@@ -1,19 +1,32 @@
+Version 1.3.4 - 31th December, 2024
+- Improvement - Enhanced the UI of the Table and Line chart component for responsive design.
+- Improvement - Added option group to the Select component.
+- Improvement - Updated the Table component design.
+- Improvement - Added support for controlling selected dates through the 'selected' prop in DatePicker component.
+- Improvement - Enhanced the UI of the Drawer component.
+- Improvement - Added a new prop to the Badge component to disable hover effect.
+- Fixed - Adjusted search icon size in Select combobox for better visual consistency.
+- Fixed - Focus ring offset of Select, Switch, Checkbox, and dropdown component.
+- Fixed - Checkbox/Switch toggle behavior with hint text and adjusted help text size.
+- Fixed - DatePicker component crash when navigating through years.
+- Fixed - DatePicker component UI styles for better visual consistency.
+
 Version 1.3.3 - 20th December, 2024
-Fixed - React `Each child in a list should have a unique "key" prop` console warning.
-Fixed - Toaster content overlapping with the close button.
+- Fixed - React `Each child in a list should have a unique "key" prop` console warning.
+- Fixed - Toaster content overlapping with the close button.
 
 Version 1.3.2 - 17th December, 2024
-Fixed - Adjusted the color of the Switch component label and help text.
+- Fixed - Adjusted the color of the Switch component label and help text.
 
 Version 1.3.1 - 17th December, 2024
-Fixed - The underline issue to enhance visual consistency.
-Fixed - Issue with the Select component where a check mark was displayed even when no item was selected.
-Fixed - Design mismatch in the Switch component.
-Fixed - Text, icon size, alignment, and color inconsistencies in the Date Picker to ensure a uniform appearance.
-Fixed - Input ref not pointing to the input field.
-Fixed - Icon size and alignment issues in the Menu component for better visual clarity.
-Fixed - Sidebar height not being overridable.
-Improvement - Removed backdrop blur to enhance performance and visual clarity.
+- Fixed - The underline issue to enhance visual consistency.
+- Fixed - Issue with the Select component where a check mark was displayed even when no item was selected.
+- Fixed - Design mismatch in the Switch component.
+- Fixed - Text, icon size, alignment, and color inconsistencies in the Date Picker to ensure a uniform appearance.
+- Fixed - Input ref not pointing to the input field.
+- Fixed - Icon size and alignment issues in the Menu component for better visual clarity.
+- Fixed - Sidebar height not being overridable.
+- Improvement - Removed backdrop blur to enhance performance and visual clarity.
 
 Version 1.3.0 - 16th December, 2024
 - New - Table component.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.3.3",
+    "version": "1.3.4",
     "description": "Library of components for the BSF project",
     "main": "./dist/force-ui.js",
     "module": "./dist/force-ui.js",

src/components/accordion/accordion.stories.tsx

@@ -11,9 +11,9 @@ export default {
 	},
 	tags: [ 'autodocs' ],
 	subcomponents: {
-		Item: Accordion.Item,
-		Trigger: Accordion.Trigger,
-		Content: Accordion.Content,
+		'Accordion.Item': Accordion.Item,
+		'Accordion.Trigger': Accordion.Trigger,
+		'Accordion.Content': Accordion.Content,
 	},
 	decorators: [
 		( Story ) => (

src/components/badge/badge.tsx

@@ -27,6 +27,11 @@ export interface BadgeProps {
 	 * Custom Icon for the badge.
 	 */
 	icon?: ReactNode;
+	/**
+	 * Disable hover effect.
+	 * @default false
+	 */
+	disableHover?: boolean;
 	/**
 	 * Defines if the badge is disabled.
 	 */
@@ -60,12 +65,13 @@ const Badge = forwardRef<Ref, BadgeProps>(
 			onClose = () => {},
 			closable = false,
 			onMouseDown = () => {},
+			disableHover = false,
 		},
 		ref
 	) => {
 		// Base classes - Mandatory classes
 		const baseClasses =
-			'font-medium border-badge-border-gray flex items-center justify-center border border-solid box-border max-w-full';
+			'font-medium border-badge-border-gray flex items-center justify-center border border-solid box-border max-w-full transition-colors duration-150 ease-in-out';
 
 		// Size classes - Based on the size prop
 		const sizeClasses = {
@@ -82,18 +88,29 @@ const Badge = forwardRef<Ref, BadgeProps>(
 			rounded: 'rounded',
 		};
 
+		// Hover classes - Based on the variant prop
+		const hoverClasses = {
+			neutral: 'hover:bg-badge-hover-gray',
+			red: 'hover:bg-badge-hover-red',
+			yellow: 'hover:bg-badge-hover-yellow',
+			green: 'hover:bg-badge-hover-green',
+			blue: 'hover:bg-badge-hover-sky',
+			inverse: 'hover:bg-badge-hover-inverse',
+			disabled: 'hover:bg-badge-hover-disabled',
+		};
+
 		// Variant classes - Based on the variant prop
 		const variantClasses = {
 			neutral:
-				'bg-badge-background-gray hover:bg-badge-hover-gray text-badge-color-gray border-badge-border-gray',
-			red: 'bg-badge-background-red hover:bg-badge-hover-red text-badge-color-red border-badge-border-red',
-			yellow: 'bg-badge-background-yellow hover:bg-badge-hover-yellow text-badge-color-yellow border-badge-border-yellow',
-			green: 'bg-badge-background-green hover:bg-badge-hover-green text-badge-color-green border-badge-border-green',
-			blue: 'bg-badge-background-sky hover:bg-badge-hover-sky text-badge-color-sky border-badge-border-sky',
+				'bg-badge-background-gray text-badge-color-gray border-badge-border-gray',
+			red: 'bg-badge-background-red text-badge-color-red border-badge-border-red',
+			yellow: 'bg-badge-background-yellow text-badge-color-yellow border-badge-border-yellow',
+			green: 'bg-badge-background-green text-badge-color-green border-badge-border-green',
+			blue: 'bg-badge-background-sky text-badge-color-sky border-badge-border-sky',
 			inverse:
-				'bg-background-inverse hover:bg-badge-hover-inverse text-text-inverse border-background-inverse',
+				'bg-background-inverse text-text-inverse border-background-inverse',
 			disabled:
-				'bg-badge-background-disabled hover:bg-badge-hover-disabled text-badge-color-disabled border-badge-border-disabled disabled cursor-not-allowed',
+				'bg-badge-background-disabled text-badge-color-disabled border-badge-border-disabled disabled cursor-not-allowed',
 		};
 
 		let filteredClasses = '';
@@ -127,6 +144,7 @@ const Badge = forwardRef<Ref, BadgeProps>(
 					typeClasses[ type ],
 					'gap-0.5',
 					filteredClasses,
+					! disableHover && hoverClasses[ variant ],
 					className
 				) }
 				ref={ ref }

src/components/checkbox/checkbox.tsx

@@ -8,6 +8,7 @@ import {
 import { nanoid } from 'nanoid';
 import { cn } from '@/utilities/functions';
 import { Check, Minus } from 'lucide-react';
+import Label from '../label/label';
 
 // Types for Component Props
 export declare interface CheckboxProps {
@@ -59,7 +60,7 @@ export const CheckboxComponent = (
 			checkbox: 'size-4 rounded gap-1',
 			icon: 'size-3',
 			text: 'text-sm', // text class for sm
-			description: 'text-xs',
+			description: 'text-sm',
 			gap: 'gap-0.5',
 		},
 		md: {
@@ -73,7 +74,7 @@ export const CheckboxComponent = (
 	const colorClassNames = {
 		primary: {
 			checkbox:
-				'border-border-strong hover:border-border-interactive checked:border-border-interactive bg-white checked:bg-toggle-on checked:hover:bg-toggle-on-hover checked:hover:border-toggle-on-hover focus:ring-2 focus:ring-offset-4 focus:ring-focus',
+				'border-border-strong hover:border-border-interactive checked:border-border-interactive bg-white checked:bg-toggle-on checked:hover:bg-toggle-on-hover checked:hover:border-toggle-on-hover focus:ring-2 focus:ring-offset-2 focus:ring-focus',
 			icon: 'text-white',
 		},
 	};
@@ -116,27 +117,30 @@ export const CheckboxComponent = (
 		return (
 			<div className={ sizeClassNames[ size ].gap }>
 				{ label?.heading && (
-					<p
+					<Label
 						className={ cn(
 							'text-text-primary font-medium leading-4 m-0',
 							sizeClassNames[ size ].text,
 							sizeClassNames[ size ].gap,
 							disabled && 'text-text-disabled'
 						) }
+						htmlFor={ checkboxId }
 					>
 						{ label?.heading }
-					</p>
+					</Label>
 				) }
 				{ label?.description && (
-					<p
+					<Label
+						tag="p"
 						className={ cn(
-							'text-text-secondary font-normal leading-5 m-0',
+							'font-normal leading-5 m-0',
 							sizeClassNames[ size ].description,
 							disabled && 'text-text-disabled'
 						) }
+						variant="help"
 					>
 						{ label?.description }
-					</p>
+					</Label>
 				) }
 			</div>
 		);
@@ -187,17 +191,7 @@ export const CheckboxComponent = (
 					) }
 				</span>
 			</label>
-			{ !! label && (
-				<label
-					className={ cn(
-						'cursor-pointer',
-						disabled && 'cursor-not-allowed'
-					) }
-					htmlFor={ checkboxId }
-				>
-					{ renderLabel() }
-				</label>
-			) }
+			{ !! label && renderLabel() }
 		</div>
 	);
 };

src/components/datepicker/datepicker-component.tsx

@@ -175,7 +175,7 @@ const DatePickerComponent = ( {
 			}
 		};
 
-		const handleYearClick = ( { yearValue }: { yearValue: number } ) => {
+		const handleYearClick = ( yearValue: number ) => {
 			setSelectedYear( yearValue );
 			setShowYearSelect( false );
 			setShowMonthSelect( true );
@@ -245,13 +245,7 @@ const DatePickerComponent = ( {
 							<Button
 								key={ yearValue }
 								variant="ghost"
-								onClick={ () =>
-									handleYearClick(
-										yearValue as unknown as {
-											yearValue: number;
-										}
-									)
-								}
+								onClick={ () => handleYearClick( yearValue ) }
 								className={ cn(
 									'h-10 w-full text-center font-normal relative',
 									yearValue === selectedYear &&
@@ -367,7 +361,7 @@ const DatePickerComponent = ( {
 
 		// Common class for disabled outside days
 		const disabledOutsideClass =
-			'bg-transperant opacity-50 text-text-disabled cursor-auto';
+			'bg-transparent opacity-50 text-text-disabled cursor-auto';
 
 		const buttonClasses = cn(
 			'h-10 w-10 flex items-center justify-center transition text-text-secondary relative text-sm',
@@ -397,7 +391,7 @@ const DatePickerComponent = ( {
 			>
 				{ ( ! showOutsideDates || ( isPartOfRange && shouldShowDay ) ) &&
 					format( day.date, 'd' ) }
-				{ isToday && (
+				{ isToday && shouldShowDay && (
 					<span className="absolute h-1 w-1 bg-background-brand rounded-full bottom-1"></span>
 				) }
 			</button>

src/components/datepicker/datepicker.tsx

@@ -11,6 +11,7 @@ import {
 	subWeeks,
 	subMonths,
 } from 'date-fns';
+import { getDefaultSelectedValue } from './utils';
 
 export interface DatePickerProps {
 	/** Defines the selection selectionType of the date picker: single, range, or multiple dates. */
@@ -33,6 +34,8 @@ export interface DatePickerProps {
 	showOutsideDays?: boolean;
 	/** Show or hide the footer. */
 	isFooter?: boolean;
+	/** Selected date value. */
+	selected?: Date | Date[] | TDateRange | null;
 }
 
 const DatePicker = ( {
@@ -46,17 +49,30 @@ const DatePicker = ( {
 	cancelButtonText = 'Cancel',
 	showOutsideDays = true,
 	isFooter = true,
+	selected,
 	...props
 }: DatePickerProps ) => {
 	const [ selectedDates, setSelectedDates ] = useState<
 		TDateRange | Date | Date[] | null
 	>( () => {
-		if ( selectionType === 'multiple' ) {
-			return [];
-		} else if ( selectionType === 'range' ) {
-			return { from: null, to: null };
+		if ( ! selected ) {
+			return getDefaultSelectedValue( selectionType );
 		}
-		return null;
+
+		// Type guards for different selection types
+		const isValidMultiple =
+			selectionType === 'multiple' && Array.isArray( selected );
+		const isValidRange =
+			selectionType === 'range' && 'from' in selected && 'to' in selected;
+		const isValidSingle =
+			selectionType === 'single' && selected instanceof Date;
+
+		// Return selected if valid, otherwise return default value
+		if ( isValidMultiple || isValidRange || isValidSingle ) {
+			return selected;
+		}
+
+		return getDefaultSelectedValue( selectionType );
 	} );
 
 	const handleSelect = ( selectedDate: Date | Date[] | TDateRange | null ) => {
@@ -192,13 +208,13 @@ const DatePicker = ( {
 	if ( variant === 'presets' ) {
 		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">
+				<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="font-medium text-sm"
+							className="text-left font-medium text-sm text-nowrap w-full"
 						>
 							{ preset.label }
 						</Button>
@@ -218,7 +234,7 @@ const DatePicker = ( {
 					width="w-auto"
 					numberOfMonths={ 2 }
 					footer={
-						<div className="flex justify-end p-2 gap-3 border border-solid border-border-subtle border-t-0 rounded-md rounded-tl-none rounded-tr-none bg-background-primary">
+						<div className="flex justify-end p-2 gap-3 border-l border-r border-t-0 border-b border-solid border-border-subtle bg-background-primary rounded-br-md">
 							<Button
 								variant="outline"
 								onClick={ handleCancelClick }

src/components/datepicker/utils.tsx

@@ -13,3 +13,13 @@ export const formatWeekdayName = ( date: Date ) => {
 export const generateYearRange = ( start: number, count = 24 ) => {
 	return Array.from( { length: count }, ( _, i ) => start + i );
 };
+
+export const getDefaultSelectedValue = ( type: string ) => {
+	if ( type === 'multiple' ) {
+		return [];
+	}
+	if ( type === 'range' ) {
+		return { from: null, to: null };
+	}
+	return null;
+};

src/components/drawer/drawer-body.tsx

@@ -15,7 +15,7 @@ const DrawerBody = ( { children, className, ...props }: DrawerBodyProps ) => {
 	return (
 		<div
 			className={ cn(
-				'px-5 flex flex-col flex-1 overflow-y-auto overflow-x-hidden',
+				'px-5 pb-4 pt-2 flex flex-col flex-1 overflow-y-auto overflow-x-hidden',
 				className
 			) }
 			{ ...props }

src/components/drawer/drawer-footer.tsx

@@ -28,9 +28,11 @@ const DrawerFooter = ( { children, className }: DrawerFooterProps ) => {
 	return (
 		<div
 			className={ cn(
-				'p-5 flex justify-end gap-3 mt-auto',
+				'px-5 py-4 flex justify-end gap-3 mt-auto',
 				{
 					'bg-background-secondary': design === 'footer-divided',
+					'border-t border-b-0 border-x-0 border-solid border-border-subtle':
+						design === 'footer-bordered',
 				},
 				className
 			) }