Merge branch 'dev' into component-improvement/date-picker

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

changelog.txt

@@ -1,15 +1,25 @@
-Version 1.3.2 - 18th December, 2024
-Fixed - Adjusted the color of the Switch component label and help text.
+Version 1.3.4 - 26th 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 - Added support for controlling selected dates through the 'selected' prop in DatePicker component.
+- Fixed - DatePicker component crash when navigating through years.
+
+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.
+
+Version 1.3.2 - 17th December, 2024
+- 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.2",
+    "version": "1.3.4",
     "description": "Library of components for the BSF project",
     "main": "./dist/force-ui.js",
     "module": "./dist/force-ui.js",

src/components/button/button.tsx

@@ -1,4 +1,9 @@
-import React, { forwardRef, type ElementType, type ReactNode } from 'react';
+import React, {
+	forwardRef,
+	Fragment,
+	type ElementType,
+	type ReactNode,
+} from 'react';
 import { cn } from '@/utilities/functions';
 
 export interface ButtonProps {
@@ -140,12 +145,14 @@ const Button: React.FunctionComponent<ButtonProps> = forwardRef(
 				disabled={ disabled }
 				{ ...rest }
 			>
-				{ iconLeft }
+				<Fragment key="left-icon">{ iconLeft }</Fragment>
 				{ children ? <span className="px-1">{ children }</span> : null }
-				{ iconRight }
+				<Fragment key="right-icon">{ iconRight }</Fragment>
 			</Tag>
 		);
 	}
 );
 
+Button.displayName = 'Button';
+
 export default Button;

src/components/label/label.tsx

@@ -78,6 +78,8 @@ const Label = forwardRef(
 	}
 );
 
+Label.displayName = 'Label';
+
 export default Label as <T extends object>(
 	props: LabelProps & T,
 	ref: React.Ref<HTMLElement>

src/components/line-chart/line-chart.tsx

@@ -5,6 +5,7 @@ import {
 	YAxis,
 	CartesianGrid,
 	Tooltip,
+	ResponsiveContainer,
 } from 'recharts';
 import ChartTooltipContent from './chart-tooltip-content';
 import Label from '../label';
@@ -64,10 +65,10 @@ interface LineChartProps {
 	yAxisFontColor?: string;
 
 	/** Width of the chart container. */
-	chartWidth?: number;
+	chartWidth?: number | string;
 
 	/** Height of the chart container. */
-	chartHeight?: number;
+	chartHeight?: number | string;
 
 	/** Determines whether dots are shown on each data point. */
 	withDots?: boolean;
@@ -124,56 +125,59 @@ const LineChart = ( {
 	}
 
 	return (
-		<LineChartWrapper
-			{ ...lineChartWrapperProps }
-			width={ chartWidth }
-			height={ chartHeight }
-			data={ data }
-		>
-			{ showCartesianGrid && <CartesianGrid vertical={ false } /> }
-			{ showXAxis && (
-				<XAxis
-					dataKey={ xAxisDataKey }
-					tickLine={ false }
-					axisLine={ false }
-					tickMargin={ 8 }
-					tickFormatter={ tickFormatter }
-					tick={ { fontSize: fontSizeVariant, fill: xAxisFontColor } }
-				/>
-			) }
-			{ showYAxis && (
-				<YAxis
-					dataKey={ yAxisDataKey }
-					tickLine={ false }
-					axisLine={ false }
-					tickMargin={ 8 }
-					tick={ { fontSize: fontSizeVariant, fill: yAxisFontColor } }
-				/>
-			) }
-
-			{ showTooltip && (
-				<Tooltip
-					content={
-						<ChartTooltipContent
-							indicator={ tooltipIndicator }
-							labelKey={ tooltipLabelKey }
-						/>
-					}
-				/>
-			) }
-
-			{ dataKeys.map( ( key, index ) => (
-				<Line
-					key={ key }
-					type="natural"
-					dataKey={ key }
-					stroke={ appliedColors[ index ].stroke }
-					fill={ appliedColors[ index ].stroke }
-					strokeWidth={ 2 }
-					dot={ withDots }
-				/>
-			) ) }
-		</LineChartWrapper>
+		<ResponsiveContainer width={ chartWidth } height={ chartHeight }>
+			<LineChartWrapper { ...lineChartWrapperProps } data={ data }>
+				{ showCartesianGrid && <CartesianGrid vertical={ false } /> }
+				{ showXAxis && (
+					<XAxis
+						dataKey={ xAxisDataKey }
+						tickLine={ false }
+						axisLine={ false }
+						tickMargin={ 8 }
+						tickFormatter={ tickFormatter }
+						tick={ {
+							fontSize: fontSizeVariant,
+							fill: xAxisFontColor,
+						} }
+					/>
+				) }
+				{ showYAxis && (
+					<YAxis
+						dataKey={ yAxisDataKey }
+						tickLine={ false }
+						axisLine={ false }
+						tickMargin={ 8 }
+						tick={ {
+							fontSize: fontSizeVariant,
+							fill: yAxisFontColor,
+						} }
+					/>
+				) }
+
+				{ showTooltip && (
+					<Tooltip
+						content={
+							<ChartTooltipContent
+								indicator={ tooltipIndicator }
+								labelKey={ tooltipLabelKey }
+							/>
+						}
+					/>
+				) }
+
+				{ dataKeys.map( ( key, index ) => (
+					<Line
+						key={ key }
+						type="natural"
+						dataKey={ key }
+						stroke={ appliedColors[ index ].stroke }
+						fill={ appliedColors[ index ].stroke }
+						strokeWidth={ 2 }
+						dot={ withDots }
+					/>
+				) ) }
+			</LineChartWrapper>
+		</ResponsiveContainer>
 	);
 };
 

src/components/select/component-style.ts

@@ -49,3 +49,11 @@ export const disabledClassNames = {
 	icon: 'group-disabled:text-icon-disabled',
 	text: 'group-disabled:text-field-color-disabled',
 };
+
+export const optionGroupDividerClassNames =
+	'h-px my-2 w-full border-border-subtle border-b border-t-0 border-solid';
+export const optionGroupDividerSizeClassNames = {
+	sm: 'w-[calc(100%+0.75rem)] translate-x-[-0.375rem]',
+	md: 'w-[calc(100%+1rem)] translate-x-[-0.5rem]',
+	lg: 'w-[calc(100%+1rem)] translate-x-[-0.5rem]',
+};

src/components/select/select-atom.stories.tsx

@@ -13,6 +13,32 @@ const options = [
 	{ id: '8', name: 'Pink' },
 ];
 
+const groupedOptions = [
+	{
+		label: 'Warm Colors',
+		options: [
+			{ id: '1', name: 'Red' },
+			{ id: '2', name: 'Orange' },
+			{ id: '3', name: 'Yellow' },
+		],
+	},
+	{
+		label: 'Cool Colors',
+		options: [
+			{ id: '4', name: 'Green' },
+			{ id: '5', name: 'Cyan' },
+			{ id: '6', name: 'Blue' },
+		],
+	},
+	{
+		label: 'Other Colors',
+		options: [
+			{ id: '7', name: 'Purple' },
+			{ id: '8', name: 'Pink' },
+		],
+	},
+];
+
 const meta: Meta<typeof Select> = {
 	title: 'Atoms/Select',
 	component: Select,
@@ -21,6 +47,7 @@ const meta: Meta<typeof Select> = {
 		'Select.Portal': Select.Portal,
 		'Select.Options': Select.Options,
 		'Select.Option': Select.Option,
+		'Select.OptionGroup': Select.OptionGroup,
 	} as Record<string, React.ComponentType<unknown>>,
 	parameters: {
 		layout: 'centered',
@@ -267,3 +294,76 @@ SelectWithSearchWithoutPortal.args = {
 	combobox: true,
 	disabled: false,
 };
+
+const GroupedSelectTemplate: Story = ( {
+	size,
+	multiple,
+	combobox,
+	disabled,
+} ) => (
+	<div className="w-80">
+		<Select
+			key={ `${ size }-${ multiple }-${ combobox }-${ disabled }` }
+			size={ size }
+			multiple={ multiple }
+			combobox={ combobox }
+			disabled={ disabled }
+			onChange={ ( value ) => value }
+		>
+			<Select.Button
+				placeholder={
+					multiple ? 'Select multiple options' : 'Select an option'
+				}
+				label={ multiple ? 'Select Multiple Colors' : 'Select a Color' }
+			/>
+			<Select.Portal>
+				<Select.Options>
+					{ groupedOptions.map( ( group ) => (
+						<Select.OptionGroup
+							key={ group.label }
+							label={ group.label }
+						>
+							{ group.options.map( ( option ) => (
+								<Select.Option key={ option.id } value={ option }>
+									{ option.name }
+								</Select.Option>
+							) ) }
+						</Select.OptionGroup>
+					) ) }
+				</Select.Options>
+			</Select.Portal>
+		</Select>
+	</div>
+);
+
+export const GroupedSelect = GroupedSelectTemplate.bind( {} );
+GroupedSelect.args = {
+	size: 'md',
+	multiple: false,
+	combobox: false,
+	disabled: false,
+};
+
+export const GroupedSelectWithSearch = GroupedSelectTemplate.bind( {} );
+GroupedSelectWithSearch.args = {
+	size: 'md',
+	multiple: false,
+	combobox: true,
+	disabled: false,
+};
+
+GroupedSelect.play = async ( { canvasElement } ) => {
+	const canvas = within( canvasElement );
+	const selectButton = await canvas.findByRole( 'combobox' );
+	await userEvent.click( selectButton );
+
+	const listBox = await screen.findByRole( 'listbox' );
+	expect( listBox ).toHaveTextContent( 'Warm Colors' );
+	expect( listBox ).toHaveTextContent( 'Cool Colors' );
+	expect( listBox ).toHaveTextContent( 'Red' );
+
+	const allOptions = await screen.findAllByRole( 'option' );
+	await userEvent.click( allOptions[ 0 ] );
+
+	expect( selectButton ).toHaveTextContent( 'Red' );
+};

src/components/select/select-types.ts

@@ -99,8 +99,17 @@ export interface SelectButtonProps extends AriaAttributes {
 	className?: string;
 }
 
+export interface SelectOptionGroupProps {
+	/** Label for the option group */
+	label: string;
+	/** Children options */
+	children: ReactNode;
+	/** Additional class name for the option group */
+	className?: string;
+}
+
 export interface SelectOptionsProps {
-	/** Expects the `Select.Option` children of the Select.Options Component. */
+	/** Expects the `Select.Option` or `Select.OptionGroup` children */
 	children?: ReactNode;
 	/** Key used to identify searched value using the key. Default is 'id'. */
 	searchBy?: string;