Merge pull request #68 from brainstormforce/stories-1

SUR-288 - Stories

dist/force-ui.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom'), 'version' => '733b350573fb7f5c07b3');
+<?php return array('dependencies' => array('react', 'react-dom'), 'version' => '37a62a0e88dc6a48352f');

src/components/avatar/avatar.stories.jsx

@@ -0,0 +1,90 @@
+import { User, Bell } from 'lucide-react';
+import Avatar from './avatar.jsx';
+
+// Avatar component story configuration
+export default {
+	title: 'Atoms/Avatar',
+	component: Avatar,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		variant: {
+			name: 'Variant',
+			description: 'Defines the style variant of the avatar.',
+			control: 'select',
+			options: [ 'primary', 'dark', 'primaryLight', 'white', 'gray' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'primary' },
+			},
+		},
+		size: {
+			name: 'Size',
+			description: 'Defines the size of the avatar.',
+			control: 'select',
+			options: [ 'xs', 'sm', 'md', 'lg' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'md' },
+			},
+		},
+		border: {
+			name: 'Border',
+			description: 'Defines the border of the avatar.',
+			control: 'select',
+			options: [ 'subtle', 'none', 'ring' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'subtle' },
+			},
+		},
+		className: { name: 'Classname', control: 'text', defaultValue: '' },
+		url: { name: 'URL', control: 'text', defaultValue: '' },
+		children: { name: 'Children', control: 'text', defaultValue: 'Button' },
+	},
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+	args: {
+		variant: 'primary',
+		children: 'Avatar',
+	},
+};
+
+export const White = {
+	args: {
+		variant: 'white',
+		children: 'Avatar',
+	},
+};
+
+export const Gray = {
+	args: {
+		variant: 'gray',
+		children: <User />,
+	},
+};
+
+export const PrimaryLight = {
+	args: {
+		variant: 'primaryLight',
+		children: <Bell />,
+	},
+};
+
+export const Dark = {
+	args: {
+		variant: 'dark',
+		children: 'Avatar',
+	},
+};
+
+export const URLAvatar = {
+	args: {
+		variant: 'primary',
+		url: 'https://0.gravatar.com/avatar/05d8f4a5468440075f82adcea83d5cc3?s=128&d=mm&r=g',
+	},
+};

src/components/button/button.jsx

@@ -12,13 +12,16 @@ const Button = ( props ) => {
 		disabled = false,
 		destructive = false, // true, false
 		icon = null, // icon component
-		iconPosition = 'left', // left, right
+		iconPosition = 'left', // left, right,
+		loading = false,
 		...rest
 	} = props;
 
 	const commonClass =
 		'border border-solid cursor-pointer transition-colors duration-300 ease-in-out text-xs font-semibold focus:ring-2 focus:ring-toggle-on focus:ring-offset-2 disabled:text-text-disabled';
 
+	const loadingClass = loading ? 'opacity-50 disabled:cursor-not-allowed' : '';
+
 	const variantClassNames = {
 		primary:
 			'text-text-on-color bg-button-primary hover:bg-button-primary-hover border-button-primary hover:border-button-primary-hover disabled:bg-button-disabled disabled:border-button-disabled',
@@ -71,6 +74,7 @@ const Button = ( props ) => {
 				sizeClassNames,
 				variantClassNames,
 				destructiveClassNames,
+				loadingClass,
 				className
 			) }
 			disabled={ disabled }

src/components/checkbox/checkbox.stories.jsx

@@ -0,0 +1,118 @@
+import Checkbox from './checkbox.jsx';
+
+// Avatar component story configuration
+export default {
+	title: 'Atoms/Checkbox',
+	component: Checkbox,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		id: {
+			name: 'ID',
+			description: 'Defines the ID of the checkbox.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		label: {
+			name: 'Name',
+			description: 'Defines the label of the checkbox',
+			control: 'object',
+			table: {
+				type: { summary: 'object' },
+				defaultValue: { summary: { heading: 'Checkbox Label', descriptio: 'Checkbox Description' } },
+			},
+		},
+		defaultChecked: {
+			name: 'Default Checked value.',
+			control: 'boolean',
+			defaultValue: false,
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		checked: {
+			name: 'Checked',
+			description: 'Defines the checked/unchecked value.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		onChange: {
+			name: 'On Change',
+			description: 'Defines the onChange callback.',
+			control: 'function',
+			table: {
+				type: { summary: 'object' },
+				defaultValue: { summary: ( value ) => {
+					return value;
+				} },
+			},
+		},
+		indeterminate: {
+			name: 'Indeterminate',
+			description: 'Defines if the checkbox is indeterminate.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		disabled: {
+			name: 'Disabled',
+			description: 'Defines if the checkbox is disabled.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		size: {
+			name: 'Size',
+			description: 'Defines the sizes of the checkbox.',
+			control: 'select', options: [ 'sm', 'md' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'md' },
+			},
+		},
+	},
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Small = {
+	args: {
+		size: 'sm',
+		label: {
+			heading: 'Checkbox Label',
+			description: 'Checkbox Description',
+		},
+	},
+};
+
+export const Medium = {
+	args: {
+		size: 'md',
+		label: {
+			heading: 'Checkbox Label',
+			description: 'Checkbox Description',
+		},
+	},
+};
+
+export const Disabled = {
+	args: {
+		label: {
+			heading: 'Checkbox Label',
+			description: 'Checkbox Description',
+		},
+		disabled: true,
+	},
+};

src/components/editor-input/editor-input.jsx

@@ -100,7 +100,7 @@ const EditorInputComponent = ( {
 						contentEditable={
 							<ContentEditable
 								className={ cn(
-									'editor-content',
+									'editor-content focus-visible:outline-none outline-none',
 									editableContentAreaCommonClassNames,
 									className
 								) }

src/components/editor-input/editor-input.stories.jsx

@@ -0,0 +1,144 @@
+import EditorInput from './editor-input.jsx';
+
+// Avatar component story configuration
+export default {
+	title: 'Atoms/EditorInput',
+	component: EditorInput,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		by: {
+			name: 'By',
+			description: 'The key to be used to display the label of the option in the editor input and in the editor after selecting any mention/tag option.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'name' },
+			},
+		},
+		options: {
+			name: 'Options',
+			description: 'Array of options to be displayed in the editor input. Each option should be an object  or string.',
+			control: 'array',
+			table: {
+				type: { summary: 'array' },
+				defaultValue: { summary: [
+					'Red',
+					'Orange',
+					'Yellow',
+					'Green',
+					'Cyan',
+					'Blue',
+					'Purple',
+					'Pink',
+				] },
+			},
+		},
+		disabled: {
+			name: 'Disabled',
+			description: 'Defines if the editor input is disabled.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		autoFocus: {
+			name: 'Auto Focus',
+			description: 'Defines if the editor input is focused automatically.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		onChange: {
+			name: 'On Change',
+			description: 'Callback function that is called when the value of the input changes. The function receives the updated value as an argument.',
+			control: 'function',
+			table: {
+				type: { summary: 'object' },
+				defaultValue: { summary: ( value ) => {
+					return value;
+				} },
+			},
+		},
+		size: {
+			name: 'Size',
+			description: 'Defines the sizes of the editor input.',
+			control: 'select', options: [ 'sm', 'md', 'lg' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'md' },
+			},
+		},
+		placeholder: {
+			name: 'Placeholder',
+			description: 'Placeholder text for the editor input field.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'Press @ to view variable suggestions' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Custom class name to be added to the editor input.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+	},
+};
+
+const options = [
+	'Red',
+	'Orange',
+	'Yellow',
+	'Green',
+	'Cyan',
+	'Blue',
+	'Purple',
+	'Pink',
+];
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Small = {
+	render: () => (
+		<div style={ { width: '900px', height: '200px' } }>
+			<EditorInput
+				size="sm"
+				options={ options }
+				onChange={ ( editorState ) => editorState.toJSON() }
+			/>
+		</div>
+	),
+};
+
+export const Medium = {
+	render: () => (
+		<div style={ { width: '900px', height: '200px' } }>
+			<EditorInput
+				size="md"
+				options={ options }
+				onChange={ ( editorState ) => editorState.toJSON() }
+			/>
+		</div>
+	),
+};
+
+export const Large = {
+	render: () => (
+		<div style={ { width: '900px', height: '200px' } }>
+			<EditorInput
+				size="lg"
+				options={ options }
+				onChange={ ( editorState ) => editorState.toJSON() }
+			/>
+		</div>
+	),
+};