Resolve conflicts

.github/workflows/chromatic.yml

@@ -3,7 +3,7 @@ name: "Chromatic"
 on:
     push:
         branches:
-        - storybook-setup
+        - staging
 
 jobs:
   chromatic:

dist/force-ui.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom'), 'version' => '1abd25382f1362ffc1b1');
+<?php return array('dependencies' => array('react', 'react-dom'), 'version' => '27e54a60318d13aa0c6c');

package.json

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

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

@@ -54,6 +54,7 @@ const EditorInputComponent = ( {
 	autoFocus = false,
 	options = [],
 	by = 'name',
+	trigger = '@',
 	menuComponent,
 	menuItemComponent,
 	className,
@@ -118,6 +119,7 @@ const EditorInputComponent = ( {
 					size={ size }
 					by={ by }
 					optionsArray={ options }
+					trigger={ trigger }
 				/>
 				<OnChangePlugin
 					onChange={ handleOnChange }

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

@@ -1,95 +1,77 @@
 import { useCallback, useState, useMemo } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import {
-	LexicalTypeaheadMenuPlugin,
-} from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import { LexicalTypeaheadMenuPlugin } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 import { $createMentionNode } from './mention-node';
 import OptionItem from './mention-option-item';
 import useMentionLookupService from './mention-hooks';
 import EditorCombobox from './mention-combobox';
 
-const PUNCTUATION =
-	'\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
-
-const TRIGGERS = [ '@' ].join( '' );
-
-const VALID_CHARS = '[^' + TRIGGERS + PUNCTUATION + '\\s]';
-
-const VALID_JOINS =
-	'(?:' +
-	'\\.[ |$]|' + // E.g. "r. " in "Mr. Smith"
-	' |' + // E.g. " " in "Josh Duck"
-	'[' +
-	PUNCTUATION +
-	']|' + // E.g. "-' in "Salier-Hellendag"
-	')';
-
-const LENGTH_LIMIT = 75;
-
-const AtSignMentionsRegex = new RegExp(
-	'(^|\\s|\\()(' +
-		'[' +
-		TRIGGERS +
-		']' +
-		'((?:' +
-		VALID_CHARS +
-		VALID_JOINS +
-		'){0,' +
-		LENGTH_LIMIT +
-		'})' +
-		')$'
-);
-
-// 50 is the longest alias length limit.
-const ALIAS_LENGTH_LIMIT = 50;
-
-// Regex used to match alias.
-const AtSignMentionsRegexAliasRegex = new RegExp(
-	'(^|\\s|\\()(' +
-		'[' +
-		TRIGGERS +
-		']' +
-		'((?:' +
-		VALID_CHARS +
-		'){0,' +
-		ALIAS_LENGTH_LIMIT +
-		'})' +
-		')$'
-);
-
-function checkForAtSignMentions( text ) {
-	let match = AtSignMentionsRegex.exec( text );
-
-	if ( match === null ) {
-		match = AtSignMentionsRegexAliasRegex.exec( text );
-	}
-	if ( match !== null ) {
-		// The strategy ignores leading whitespace but we need to know it's
-		// length to add it to the leadOffset
-		const maybeLeadingWhitespace = match[ 1 ];
-
-		const matchingString = match[ 3 ];
-		if ( matchingString.length >= 0 ) {
-			return {
-				leadOffset: match.index + maybeLeadingWhitespace.length,
-				matchingString,
-				replaceableString: match[ 2 ],
-			};
-		}
-	}
-	return null;
-}
-
 const MentionPlugin = ( {
 	optionsArray,
 	by = 'name',
 	size = 'md',
+	trigger = '@', // Default trigger value
 	menuComponent: MenuComponent = EditorCombobox,
 	menuItemComponent: MenuItemComponent = EditorCombobox.Item,
 } ) => {
+	// Define PUNCTUATION and other necessary variables inside the component
+	const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
+
+	const TRIGGERS = [ trigger ].join( '' ); // Use the trigger prop dynamically
+
+	const VALID_CHARS = '[^' + TRIGGERS + PUNCTUATION + '\\s]';
+
+	const VALID_JOINS =
+		'(?:' +
+		'\\.[ |$]|' + // E.g. "r. " in "Mr. Smith"
+		' |' + // E.g. " " in "Josh Duck"
+		'[' +
+		PUNCTUATION +
+		']|' + // E.g. "-' in "Salier-Hellendag"
+		')';
+
+	const LENGTH_LIMIT = 75;
+
+	const AtSignMentionsRegex = new RegExp(
+		`(^|\\s|\\()([${ TRIGGERS }]((?:${ VALID_CHARS }${ VALID_JOINS }){0,${ LENGTH_LIMIT }}))$`
+	);
+
+	// 50 is the longest alias length limit
+	const ALIAS_LENGTH_LIMIT = 50;
+
+	// Regex used to match alias
+	const AtSignMentionsRegexAliasRegex = new RegExp(
+		`(^|\\s|\\()([${ TRIGGERS }]((?:${ VALID_CHARS }){0,${ ALIAS_LENGTH_LIMIT }}))$`
+	);
+
+	// Define checkForAtSignMentions function inside the component where it has access to the regex
+	const checkForAtSignMentions = ( text ) => {
+		let match = AtSignMentionsRegex.exec( text );
+
+		if ( match === null ) {
+			match = AtSignMentionsRegexAliasRegex.exec( text );
+		}
+		if ( match !== null ) {
+			// The strategy ignores leading whitespace but we need to know its
+			// length to add it to the leadOffset
+			const maybeLeadingWhitespace = match[ 1 ];
+
+			const matchingString = match[ 3 ];
+			if ( matchingString.length >= 0 ) {
+				return {
+					leadOffset: match.index + maybeLeadingWhitespace.length,
+					matchingString,
+					replaceableString: match[ 2 ],
+				};
+			}
+		}
+		return null;
+	};
+
 	const [ editor ] = useLexicalComposerContext();
 	const [ queryString, setQueryString ] = useState( null );
 
+	// Use the hook to get lookup results
 	const results = useMentionLookupService( optionsArray, queryString, by );
 
 	const onSelectOption = useCallback(
@@ -117,7 +99,7 @@ const MentionPlugin = ( {
 		<LexicalTypeaheadMenuPlugin
 			onQueryChange={ setQueryString }
 			onSelectOption={ onSelectOption }
-			triggerFn={ checkForAtSignMentions }
+			triggerFn={ checkForAtSignMentions } // Use the locally defined function
 			options={ options }
 			menuRenderFn={ (
 				anchorElementRef,

src/components/switch/switch.jsx

@@ -100,7 +100,7 @@ const SwitchComponent = (
 
 	const colorClassNames = {
 		primary: {
-			input: 'bg-toggle-off hover:bg-toggle-off-hover checked:bg-toggle-on checked:hover:bg-toggle-on-hover focus:ring focus:ring-toggle-on focus:ring-offset-4 border border-solid border-toggle-off-border checked:border-toggle-on-border shadow-toggleContainer focus:outline-none checked:focus:border-toggle-on-border focus:border-toggle-off-border',
+			input: 'bg-toggle-off checked:bg-toggle-on focus:ring focus:ring-toggle-on focus:ring-offset-4 border border-solid border-toggle-off-border checked:border-toggle-on-border shadow-toggleContainer focus:outline-none checked:focus:border-toggle-on-border focus:border-toggle-off-border',
 			toggleDial: 'bg-toggle-dial-background shadow-toggleDial',
 		},
 	};
@@ -139,7 +139,8 @@ const SwitchComponent = (
 					className={ cn(
 						"peer appearance-none absolute bg-blue-gray-100 rounded-full cursor-pointer transition-colors duration-300 h-full w-full  before:content-[''] checked:before:content-[''] m-0 checked:[background-image:none]",
 						colorClassNames[ color ].input,
-						disabled && disabledClassNames.input
+						disabled && disabledClassNames.input,
+						! disabled && 'hover:bg-toggle-off-hover checked:hover:bg-toggle-on-hover'
 					) }
 					checked={ getValue() }
 					onChange={ handleChange }
@@ -150,10 +151,11 @@ const SwitchComponent = (
 				<label
 					htmlFor={ switchId }
 					className={ cn(
-						"bg-white border border-blue-gray-100 rounded-full absolute cursor-pointer shadow-md before:content[''] before:transition-opacity before:opacity-0 hover:before:opacity-10 before:hidden border-none transition-all duration-300",
+						"bg-white border border-blue-gray-100 rounded-full absolute cursor-pointer shadow-md before:content[''] before:transition-opacity before:opacity-0 before:hidden border-none transition-all duration-300",
 						sizeClassNames[ size ].toggleDial,
 						colorClassNames[ color ].toggleDial,
-						disabled && disabledClassNames.toggleDial
+						disabled && disabledClassNames.toggleDial,
+						! disabled && 'hover:before:opacity-10'
 					) }
 				/>
 			</div>

src/components/tabs/tabs.jsx

@@ -25,7 +25,7 @@ const TabsGroup = ( props ) => {
 		orientation = 'horizontal', // Orientation of the tabs ('horizontal', 'vertical').
 		variant = 'pill', // Style variant of the tabs ('pill', 'rounded', 'underline').
 		iconPosition = 'left', // Position of the icon in the tab ('left' or 'right').
-		width = 'auto', // Width of the tabs ('auto' or 'full').
+		width = 'full', // Width of the tabs ('auto' or 'full').
 	} = props;
 
 	// Handle change event.
@@ -77,13 +77,17 @@ const TabsGroup = ( props ) => {
 	// Base classes for the TabsGroup.
 	const baseClasses = `box-border [&>*]:box-border flex items-center ${ widthClasses } ${ orientationClasses }`;
 
+	// Container background color.
+	const backgroundColorClass = variant !== 'underline' ? 'bg-tab-background' : '';
+
 	// Merge classes.
 	const groupClassName = cn(
 		baseClasses,
 		borderRadius,
 		padding,
 		gap,
 		border,
+		backgroundColorClass,
 		className
 	);
 
@@ -140,10 +144,10 @@ const TabComponent = ( props, ref ) => {
 
 	// Determine size classes.
 	const sizes = {
-		xs: 'px-1.5 py-0.5 text-xs [&>svg]:size-3',
-		sm: variant === 'underline' ? 'py-1.5 text-sm [&>svg]:size-4' : 'px-3 py-1.5 text-sm [&>svg]:size-4',
-		md: variant === 'underline' ? 'py-2 text-base [&>svg]:size-5' : 'px-3.5 py-1.5 text-base [&>svg]:size-5',
-		lg: variant === 'underline' ? 'p-2.5 text-lg [&>svg]:size-6' : 'px-3.5 py-1.5 text-lg [&>svg]:size-6',
+		xs: 'px-1.5 py-0.5 text-xs [&_svg]:size-3',
+		sm: variant === 'underline' ? 'py-1.5 text-sm [&_svg]:size-4' : 'px-3 py-1.5 text-sm [&_svg]:size-4',
+		md: variant === 'underline' ? 'py-2 text-base [&_svg]:size-5' : 'px-3.5 py-1.5 text-base [&_svg]:size-5',
+		lg: variant === 'underline' ? 'p-2.5 text-lg [&_svg]:size-6' : 'px-3.5 py-1.5 text-lg [&_svg]:size-6',
 	}[ size ];
 
 	// Determine width and orientation classes for tabs.
@@ -152,24 +156,24 @@ const TabComponent = ( props, ref ) => {
         orientation === 'vertical' ? 'w-full justify-between' : '';
 
 	// Base classes for the Tab.
-	const baseClasses = cn( 'relative border-none bg-transparent text-text-secondary cursor-pointer flex items-center justify-center transition-colors duration-200', fullWidth, orientationClasses );
+	const baseClasses = cn( 'relative border-none bg-transparent text-text-secondary cursor-pointer flex items-center justify-center transition-[box-shadow,color,background-color] duration-200', fullWidth, orientationClasses );
 
 	const borderClasses = 'border-none';
 
 	let variantClasses = 'rounded-full';
 	if ( variant === 'rounded' ) {
 		variantClasses = 'rounded-md';
 	} else if ( variant === 'underline' ) {
-		variantClasses = 'rounded-none w-fit max-w-fit';
+		variantClasses = 'rounded-none';
 	}
 
 	// Additional classes.
-	const hoverClasses = '';
+	const hoverClasses = 'hover:text-text-primary group';
 	const focusClasses = 'focus:outline-none';
 	const disabledClasses = disabled
 		? 'text-text-disabled cursor-not-allowed'
 		: '';
-	const activeClasses = activeItem === slug ? 'bg-background-primary text-text-primary' : '';
+	const activeClasses = activeItem === slug ? 'bg-background-primary text-text-primary shadow-sm' : '';
 
 	// Merge classes.
 	const tabClassName = cn(
@@ -207,11 +211,11 @@ const TabComponent = ( props, ref ) => {
 			) }
 			<span className={ iconParentClasses }>
 				{ iconPosition === 'left' && icon && (
-					<span className="mr-1">{ icon }</span>
+					<span className="mr-1 contents center-center group-hover:text-text-primary">{ icon }</span>
 				) }
 				{ text }
 				{ iconPosition === 'right' && icon && (
-					<span className="ml-1">{ icon }</span>
+					<span className="ml-1 contents center-center group-hover:text-text-primary">{ icon }</span>
 				) }
 			</span>
 			{ badge && isValidElement( badge ) && badge }