Merge pull request #245 from brainstormforce/component-improvements

SRML-102 - Select and LineChart Component improvement and fixes

.github/workflows/code-reviewer.yml

@@ -1,43 +1,43 @@
 name: BSF Code Reviewer
 
 on:
-  pull_request:
-    types: [opened, synchronize, edited]
+    pull_request:
+        types: [opened, synchronize, edited]
 
 permissions: write-all
 
 jobs:
-  CHECK_SHORTCODE:
-    if: contains(github.event.pull_request.body, '[BSF-PR-SUMMARY]')
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v3
+    CHECK_SHORTCODE:
+        if: contains(github.event.pull_request.body, '[BSF-PR-SUMMARY]')
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout Repository
+              uses: actions/checkout@v3
 
-      - name: WRITE PR SUMMARY
-        uses: brainstormforce/pull-request-reviewer@master
-        with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-          ACTION_CONTEXT: 'CHECK_SHORTCODE'
-          EXCLUDE_EXTENSIONS: "md, yml, lock"
-          INCLUDE_EXTENSIONS: "php, js, jsx, ts, tsx, css, scss, html, json"
-          EXCLUDE_PATHS: "node_modules/"
+            - name: WRITE PR SUMMARY
+              uses: brainstormforce/pull-request-reviewer@master
+              with:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                  OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+                  ACTION_CONTEXT: 'CHECK_SHORTCODE'
+                  EXCLUDE_EXTENSIONS: 'md, yml, lock'
+                  INCLUDE_EXTENSIONS: 'php, js, jsx, ts, tsx, css, scss, html, json'
+                  EXCLUDE_PATHS: 'node_modules/'
 
-  CODE_REVIEW:
-    needs: CHECK_SHORTCODE
-    if: always()
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v3
+    CODE_REVIEW:
+        needs: CHECK_SHORTCODE
+        if: always()
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout Repository
+              uses: actions/checkout@v3
 
-      - name: AI CODE REVIEW
-        uses: brainstormforce/pull-request-reviewer@master
-        with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-          ACTION_CONTEXT: "CODE_REVIEW"
-          EXCLUDE_EXTENSIONS: "md, yml, lock"
-          INCLUDE_EXTENSIONS: "php, js, jsx, ts, tsx, css, scss, html, json"
-          EXCLUDE_PATHS: "node_modules/"
+            - name: AI CODE REVIEW
+              uses: brainstormforce/pull-request-reviewer@master
+              with:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                  OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+                  ACTION_CONTEXT: 'CODE_REVIEW'
+                  EXCLUDE_EXTENSIONS: 'md, yml, lock'
+                  INCLUDE_EXTENSIONS: 'php, js, jsx, ts, tsx, css, scss, html, json'
+                  EXCLUDE_PATHS: 'node_modules/'

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

changelog.txt

@@ -1,3 +1,8 @@
+Version 1.3.6 - 9th January, 2025
+- Improvement: Optimized the Select component item search logic and reorganized props for improved usability.
+- Improvement: Added a vertical dashed line feature to the LineChart.
+- Fixed: LineChart component Tooltip does not show the required information.
+
 Version 1.3.5 - 6th January, 2025
 - Improvement: Display a light blue color on hover when selecting a date range.
 

package.json

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

src/components/badge/badge.tsx

@@ -6,7 +6,7 @@ export interface BadgeProps {
 	/**
 	 * Defines the Label of the badge.
 	 */
-	label?: string;
+	label?: ReactNode;
 	/**
 	 * Defines the size of the badge.
 	 */

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

@@ -81,14 +81,26 @@ interface LineChartProps {
 		CategoricalChartProps,
 		'width' | 'height' | 'data'
 	>;
+	/**
+	 * The stroke dasharray for the Cartesian grid.
+	 * @default '3 3'
+	 * @see https://recharts.org/en-US/api/CartesianGrid
+	 */
+	strokeDasharray?: string;
+
+	/**
+	 * The color of the Cartesian grid lines.
+	 * @default '#E5E7EB'
+	 */
+	gridColor?: string;
 }
 
 const LineChart = ( {
 	data,
 	dataKeys = [],
 	colors = [],
-	showXAxis = true,
-	showYAxis = true,
+	showXAxis = false,
+	showYAxis = false,
 	showTooltip = true,
 	tooltipIndicator = 'dot', // dot, line, dashed
 	tooltipLabelKey,
@@ -103,6 +115,8 @@ const LineChart = ( {
 	chartHeight = 200,
 	withDots = false,
 	lineChartWrapperProps,
+	strokeDasharray = '3 3',
+	gridColor = '#E5E7EB',
 }: LineChartProps ) => {
 	const defaultColors = [ { stroke: '#2563EB' }, { stroke: '#38BDF8' } ];
 
@@ -127,32 +141,36 @@ const LineChart = ( {
 	return (
 		<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,
-						} }
+				{ showCartesianGrid && (
+					<CartesianGrid
+						strokeDasharray={ strokeDasharray }
+						horizontal={ false }
+						stroke={ gridColor }
 					/>
 				) }
+				<XAxis
+					dataKey={ xAxisDataKey }
+					tickLine={ false }
+					axisLine={ false }
+					tickMargin={ 8 }
+					tickFormatter={ tickFormatter }
+					tick={ {
+						fontSize: fontSizeVariant,
+						fill: xAxisFontColor,
+					} }
+					hide={ ! showXAxis }
+				/>
+				<YAxis
+					dataKey={ yAxisDataKey }
+					tickLine={ false }
+					axisLine={ false }
+					tickMargin={ 8 }
+					tick={ {
+						fontSize: fontSizeVariant,
+						fill: yAxisFontColor,
+					} }
+					hide={ ! showYAxis }
+				/>
 
 				{ showTooltip && (
 					<Tooltip