v1.3.0

.storybook/preview.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
-
+import '../src/tailwind.css';
 /** @type { import('@storybook/react').Preview } */
-import '../dist/style.css';
+
 const preview: Preview = {
 	parameters: {
 		controls: {
@@ -20,7 +20,7 @@ const preview: Preview = {
 	},
 	decorators: [
 		(Story) => (
-			<div style={{ fontFamily: 'Figtree, sans-serif' }}>
+			<div className="[&_*]:[font-family:Figtree,sans-serif] [&_*]:box-border">
 				<Story />
 			</div>
 		),

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.2.2"
+  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.3.0"
 }
 ```
 
@@ -25,6 +25,12 @@ And run the following command to install the package -
 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.0
+```
+
 <br />
 
 2. Once you install @bsf/force-ui you need to wrap your tailwind css configurations with the `withTW()` function coming from @bsf/force-ui/withTW.

changelog.txt

@@ -1,3 +1,7 @@
+Version 1.3.0 - 16th December, 2024
+- New - Table component.
+- Fixed - Asterisk missing on required input label.
+
 Version 1.2.2 - 4th December, 2024
 - Improvement - Removed margin and added new props to the Line Chart component for customizability.
 

package.json

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

src/components/checkbox/checkbox.tsx

@@ -145,14 +145,14 @@ export const CheckboxComponent = (
 	return (
 		<div
 			className={ cn(
-				'inline-flex items-center gap-2',
+				'inline-flex items-center justify-center gap-2',
 				!! label && 'items-start',
 				disabled && 'cursor-not-allowed'
 			) }
 		>
 			<label
 				className={ cn(
-					'relative flex items-center rounded-full p-0.5',
+					'relative flex items-center justify-center rounded-full p-0.5',
 					! disabled && 'cursor-pointer'
 				) }
 				htmlFor={ checkboxId }

src/components/index.ts

@@ -38,3 +38,4 @@ export { default as LineChart } from './line-chart';
 export { default as PieChart } from './pie-chart';
 export { default as AreaChart } from './area-chart';
 export { default as Dropzone } from './dropzone';
+export { default as Table } from './table';

src/components/input/input.stories.tsx

@@ -79,3 +79,13 @@ WithPrefixSuffix.args = {
 	suffix: '#',
 	defaultValue: '',
 };
+
+// Required Input with Label
+export const Required = Template.bind( {} );
+Required.args = {
+	type: 'text',
+	size: 'sm',
+	required: true,
+	label: 'Required Input',
+	defaultValue: 'Required Input',
+};

src/components/input/input.tsx

@@ -5,10 +5,12 @@ import React, {
 	forwardRef,
 	useRef,
 	type ReactNode,
+	LabelHTMLAttributes,
 } from 'react';
 import { nanoid } from 'nanoid';
 import { cn } from '@/utilities/functions';
 import { Upload, X } from 'lucide-react';
+import Label from '../label';
 
 export declare interface InputProps {
 	/** Unique identifier for the input element. */
@@ -52,6 +54,9 @@ export declare interface InputProps {
 
 	/** Placeholder text for the input field. */
 	placeholder?: string;
+
+	/** Indicates whether the input is required. */
+	required?: boolean;
 }
 
 export const InputComponent = (
@@ -245,12 +250,13 @@ export const InputComponent = (
 			return null;
 		}
 		return (
-			<label
-				className={ cn( labelClasses[ size ], 'text-field-label' ) }
+			<Label<LabelHTMLAttributes<HTMLLabelElement>>
+				className={ cn( labelClasses[ size ] ) }
 				htmlFor={ inputId }
+				{ ...( props?.required && { required: true } ) }
 			>
 				{ label }
-			</label>
+			</Label>
 		);
 	}, [ label, size, inputId ] );
 

src/components/label/label.tsx

@@ -17,7 +17,7 @@ export interface LabelProps {
 }
 
 const Label = forwardRef(
-	(
+	<T extends object>(
 		{
 			children = null,
 			tag: Tag = 'label',
@@ -26,7 +26,7 @@ const Label = forwardRef(
 			variant = 'neutral', // neutral, help, error, disabled
 			required = false,
 			...props
-		}: LabelProps,
+		}: LabelProps & T,
 		ref: React.Ref<HTMLElement>
 	) => {
 		// Base classes. - Mandatory classes.
@@ -78,4 +78,7 @@ const Label = forwardRef(
 	}
 );
 
-export default Label;
+export default Label as <T extends object>(
+	props: LabelProps & T,
+	ref: React.Ref<HTMLElement>
+) => React.ReactNode;

src/components/pagination/pagination.tsx

@@ -1,10 +1,4 @@
-import {
-	createContext,
-	useContext,
-	forwardRef,
-	type ReactNode,
-	type ElementType,
-} from 'react';
+import { createContext, useContext, forwardRef, type ReactNode } from 'react';
 import { cn, callAll } from '@/utilities/functions';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { disabledClassNames, sizeClassNames } from './component-style';
@@ -33,14 +27,14 @@ export interface PaginationProps extends PaginationCommonProps {
 	disabled?: boolean;
 }
 
-export interface PaginationItemProps extends PaginationCommonProps {
+export interface PaginationItemProps
+	extends PaginationCommonProps,
+		PaginationButtonProps {
 	/** Marks the pagination item as active. */
 	isActive?: boolean;
 }
 
 export interface PaginationButtonProps extends PaginationCommonProps {
-	/** The element type of the pagination button. */
-	as?: ElementType;
 	/** Marks the button as active. */
 	isActive?: boolean;
 	/** Disables the button. */

src/components/table/index.ts

@@ -0,0 +1 @@
+export { default } from './table';