Merge pull request #92 from brainstormforce/storybook-fixes

Storybook Fixes

dist/force-ui.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom'), 'version' => '826a91be3e2c7572e3a3');
+<?php return array('dependencies' => array('react', 'react-dom'), 'version' => '8b50556bb9e94f18f3fd');

src/components/alert/alert.stories.js

@@ -1,4 +1,6 @@
 import Alert from './alert.jsx';
+import { fn } from '@storybook/test';
+import { Plus } from 'lucide-react';
 
 // Alert component story configuration
 export default {
@@ -43,17 +45,50 @@ export default {
 			name: 'Title',
 			description: 'Defines the title of the alert.',
 			control: 'text',
-			defaultValue: 'Title',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'Title' },
+			},
 		},
 		content: {
 			name: 'Content',
 			description: 'Defines the content of the alert.',
 			control: 'text',
-			defaultValue: 'This is a description',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'This is a description' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Defines the extra classes',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		onClose: {
+			name: 'On Close Event',
+			description: 'Callback function for close event',
+			control: 'function',
+			table: {
+				type: { summary: 'function' },
+				defaultValue: { summary: '() => {}' },
+			},
+		},
+		icon: {
+			name: 'Icon',
+			description: 'Custom Icon for the alert.',
+			control: 'object',
+			table: {
+				type: { summary: 'object' },
+				defaultValue: { summary: 'null' },
+			},
 		},
 		action: {
 			name: 'Action',
-			description: 'Defines the icon of the alert.',
+			description: 'Defines the description of the alert.',
 			control: 'object',
 			table: {
 				type: { summary: 'object' },
@@ -64,63 +99,65 @@ export default {
 				},
 			},
 		},
-		className: {
-			name: 'Classname',
-			description: 'Defines the extra classes',
-			control: 'text',
-			defaultValue: '',
-		},
 	},
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Neutral = {
 	args: {
 		variant: 'neutral',
+		onClose: fn(),
 	},
 };
 
 export const Info = {
 	args: {
 		variant: 'info',
 		disabled: true,
+		onClose: fn(),
 	},
 };
 
 export const Warning = {
 	args: {
 		variant: 'warning',
+		onClose: fn(),
 	},
 };
 
 export const Error = {
 	args: {
 		variant: 'error',
+		onClose: fn(),
 	},
 };
 
 export const Success = {
 	args: {
 		variant: 'success',
+		onClose: fn(),
 	},
 };
 
 export const Stack = {
 	args: {
 		variant: 'info',
 		design: 'stack',
+		onClose: fn(),
 	},
 };
 
 export const Dark = {
 	args: {
 		variant: 'error',
 		theme: 'dark',
+		onClose: fn(),
 	},
 };
 
 export const WithAction = {
 	args: {
+		onClose: fn(),
 		variant: 'info',
 		design: 'stack',
 		action: {
@@ -133,8 +170,9 @@ export const WithAction = {
 
 export const WithCustomIcon = {
 	args: {
+		onClose: fn(),
 		variant: 'info',
-		// icon: <Plus />,
+		icon: <Plus />,
 		action: {
 			label: 'My Action',
 			onClick: () => {},

src/components/avatar/avatar.stories.jsx

@@ -40,9 +40,32 @@ export default {
 				defaultValue: { summary: 'subtle' },
 			},
 		},
-		className: { name: 'Classname', control: 'text', defaultValue: '' },
-		url: { name: 'URL', control: 'text', defaultValue: '' },
-		children: { name: 'Children', control: 'text', defaultValue: 'Button' },
+		className: {
+			name: 'Class Name',
+			description: 'Defines the extra classes',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		url: {
+			name: 'URL',
+			description: 'The URL of the Avatar image',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		children: {
+			name: 'Children',
+			control: 'object',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
 	},
 };
 

src/components/badge/badge.jsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import { cn } from '@/utilities/functions';
-import { X, Info } from 'lucide-react';
+import { X } from 'lucide-react';
 
 /**
  * Badge component.
@@ -13,10 +13,10 @@ const BadgeComponent = ( props, ref ) => {
 		className = '',
 		type = 'pill', // pill, rounded
 		variant = 'neutral', // neutral, red, yellow, green, blue, inverse
-		icon = <Info />,
+		icon = null,
 		disabled = false,
 		onClose = () => {},
-		closable = true,
+		closable = false,
 		onMouseDown = () => {},
 	} = props;
 

src/components/badge/badge.stories.js

@@ -1,5 +1,5 @@
 import Badge from './badge.jsx';
-import { fn } from '@storybook/test';
+import { Info } from 'lucide-react';
 
 // Badge component story configuration
 export default {
@@ -58,92 +58,116 @@ export default {
 				defaultValue: { summary: 'true' },
 			},
 		},
-		label: { control: 'text', defaultValue: 'Badge' },
+		label: {
+			control: 'text',
+			name: 'Label',
+			description: 'Defines the Label of the badge.',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'Badge' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Defines the extra classes',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		onClose: {
+			name: 'On Close Event',
+			description: 'Callback function for close event',
+			control: 'function',
+			table: {
+				type: { summary: 'function' },
+				defaultValue: { summary: '() => {}' },
+			},
+		},
+		onMouseDown: {
+			name: 'On Mouse Down Event',
+			description: 'Callback function for mouse down event',
+			control: 'function',
+			table: {
+				type: { summary: 'function' },
+				defaultValue: { summary: '() => {}' },
+			},
+		},
+		icon: {
+			name: 'Icon',
+			description: 'Custom Icon for the badge.',
+			control: 'object',
+			table: {
+				type: { summary: 'object' },
+				defaultValue: { summary: <Info /> },
+			},
+		},
 	},
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Neutral = {
 	args: {
 		variant: 'neutral',
-		children: 'Badge',
+		icon: <Info />,
 		type: 'pill',
 		size: 'sm',
 		label: 'Badge',
-		onClose: fn(),
-		onMouseDown: fn(),
 	},
 };
 
 export const Disabled = {
 	args: {
 		variant: 'neutral',
-		children: 'Badge',
 		type: 'pill',
 		size: 'sm',
 		label: 'Badge',
-		onClose: fn(),
-		onMouseDown: fn(),
 		disabled: true,
 	},
 };
 
 export const Red = {
 	args: {
 		variant: 'red',
-		children: 'Badge',
 		type: 'rounded',
 		size: 'sm',
 		label: 'Badge',
-		onClose: fn(),
-		onMouseDown: fn(),
 	},
 };
 
 export const Yellow = {
 	args: {
 		variant: 'yellow',
-		children: 'Badge',
 		type: 'rounded',
 		size: 'sm',
 		label: 'Badge',
-		onClose: fn(),
-		onMouseDown: fn(),
 	},
 };
 
 export const Green = {
 	args: {
 		variant: 'green',
-		children: 'Badge',
 		type: 'rounded',
 		size: 'sm',
 		label: 'Badge',
-		onClose: fn(),
-		onMouseDown: fn(),
 	},
 };
 
 export const Blue = {
 	args: {
 		variant: 'blue',
-		children: 'Badge',
 		type: 'rounded',
 		size: 'sm',
 		label: 'Badge',
-		onClose: fn(),
-		onMouseDown: fn(),
 	},
 };
 
 export const Inverse = {
 	args: {
 		variant: 'inverse',
-		children: 'Badge',
 		type: 'rounded',
 		size: 'sm',
 		label: 'Badge',
-		onClose: fn(),
-		onMouseDown: fn(),
 	},
 };

src/components/badge/readme.md

@@ -49,11 +49,12 @@ The `Badge` component can show notifications, counts, or status information on n
 
 ### `closable`
 - **Type:** `boolean`
-- **Default:** `true`
+- **Default:** `false`
 - **Description:** Defines whether the badge is closable or not. This parameter will decide if the cross icon is shown or not.
 
 ### `icon`
 - **Type:** `ReactNode`
+- **Default:** null
 - **Description:** An icon component to be displayed left of the Badge.
 
 ### `onClose`

src/components/button/button.stories.js

@@ -79,7 +79,23 @@ export default {
 				defaultValue: { summary: 'false' },
 			},
 		},
-		children: { control: 'text', defaultValue: 'Button' },
+		icon: {
+			name: 'Icon',
+			description: 'Custom Icon for the button.',
+			control: 'object',
+			table: {
+				type: { summary: 'object' },
+				defaultValue: { summary: 'null' },
+			},
+		},
+		children: {
+			name: 'Children',
+			control: 'object',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
 	},
 };
 

src/components/checkbox/checkbox.stories.jsx

@@ -19,7 +19,7 @@ export default {
 			},
 		},
 		label: {
-			name: 'Name',
+			name: 'Label',
 			description: 'Defines the label of the checkbox',
 			control: 'object',
 			table: {