SUR-429, SUR-430, SUR-431 - Compatibility fixes and component improvements

changelog.txt

@@ -1,7 +1,11 @@
-Version 1.4.2 - 4th March, 2025
+Version 1.4.2 - 6th March, 2025
+- New - Added new size 'xs' to the Switch component.
 - Improvement - Adjusted the ring width and padding of the Radio Button component.
 - Improvement - Added shadow to the disabled switch component for better visual consistency.
 - Improvement - Add box-shadow to the Button component.
+- Improvement - Update destructive button ring color.
+- Fixed - Undefined JSX error when @wordpress/scripts version is above 28.
+- Fixed - Tree shaking not working.
 
 Version 1.4.1 - 10th February, 2025
 - Improvement - Show active preset with background color in the DatePicker component.

package.json

@@ -2,20 +2,24 @@
     "name": "@bsf/force-ui",
     "version": "1.4.2",
     "description": "Library of components for the BSF project",
-    "main": "./dist/force-ui.js",
-    "module": "./dist/force-ui.js",
+    "main": "./dist/force-ui.cjs.js",
+    "module": "./dist/force-ui.es.js",
+    "types": "./dist/force-ui.d.ts",
     "type": "module",
+    "sideEffects": false,
     "exports": {
         "./package.json": "./package.json",
         ".": {
-            "import": "./dist/force-ui.js",
-            "types": "./dist/force-ui.d.ts"
+            "types": "./dist/force-ui.d.ts",
+            "import": "./dist/force-ui.es.js",
+            "require": "./dist/force-ui.cjs.js"
         },
         "./withTW": {
-            "import": "./dist/withTW.js",
             "types": "./dist/withTW.d.ts",
-            "require": "./dist/withTW.cjs"
-        }
+            "import": "./dist/withTW.es.js",
+            "require": "./dist/withTW.cjs.js"
+        },
+        "./dist/*": "./dist/*"
     },
     "scripts": {
         "build": "cross-env tsc -b && vite build",

src/components/button/button.tsx

@@ -76,6 +76,7 @@ const Button: React.FunctionComponent<ButtonProps> = forwardRef(
 
 		const commonClass =
 			'outline outline-1 border-none 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 commonDestructiveClassName = destructive && 'focus:ring-focus-error';
 
 		const loadingClass = loading
 			? 'opacity-50 disabled:cursor-not-allowed'
@@ -136,6 +137,7 @@ const Button: React.FunctionComponent<ButtonProps> = forwardRef(
 					sizeClassNames,
 					variantClassNames,
 					destructiveClassNames,
+					commonDestructiveClassName,
 					loadingClass,
 					{
 						'cursor-default': disabled,

src/components/switch/switch.tsx

@@ -24,10 +24,10 @@ export interface SwitchProps {
 	defaultValue?: boolean;
 
 	/**
-	 *  Defines the size of the switch (e.g., 'sm', 'md').
+	 *  Defines the size of the switch (e.g., 'xs', 'sm', 'md').
 	 *  @default 'sm'
 	 */
-	size?: 'sm' | 'md';
+	size?: 'xs' | 'sm' | 'md';
 
 	/** Disables the switch if true. */
 	disabled?: boolean;
@@ -59,17 +59,20 @@ export const SwitchLabel = ( {
 	switchId: string;
 	disabled?: boolean;
 	children: ReactNode;
-	size: 'sm' | 'md';
+	size: SwitchProps['size'];
 } ) => {
 	const headingClasses = {
+		xs: 'text-xs leading-4 font-medium',
 		sm: 'text-sm leading-5 font-medium',
 		md: 'text-base leading-6 font-medium',
 	};
 	const descriptionClasses = {
+		xs: 'text-xs leading-4 font-normal',
 		sm: 'text-sm leading-5 font-normal',
 		md: 'text-sm leading-5 font-normal',
 	};
 	const gapClassNames = {
+		xs: 'space-y-0.5',
 		sm: 'space-y-0.5',
 		md: 'space-y-1',
 	};
@@ -87,11 +90,11 @@ export const SwitchLabel = ( {
 	const renderLabel = () => {
 		const { heading = '', description = '' } = label || {};
 		return (
-			<div className={ cn( 'space-y-0.5', gapClassNames[ size ] ) }>
+			<div className={ cn( 'space-y-0.5', gapClassNames[ size! ] ) }>
 				{ heading && (
 					<Label
 						htmlFor={ switchId }
-						className={ cn( 'm-0', headingClasses[ size ] ) }
+						className={ cn( 'm-0', headingClasses[ size! ] ) }
 						{ ...( disabled && { variant: 'disabled' } ) }
 					>
 						{ heading }
@@ -103,7 +106,7 @@ export const SwitchLabel = ( {
 						variant="help"
 						className={ cn(
 							'text-sm font-normal leading-5 m-0',
-							descriptionClasses[ size ]
+							descriptionClasses[ size! ]
 						) }
 						{ ...( disabled && { variant: 'disabled' } ) }
 					>
@@ -146,7 +149,7 @@ export const SwitchComponent = (
 	ref: React.ForwardedRef<HTMLInputElement>
 ) => {
 	// For backwards compatibility.
-	const normalSize = ( size as 'sm' | 'md' | 'lg' ) === 'lg' ? 'md' : size;
+	const normalSize = ( size as SwitchProps['size'] & 'lg' ) === 'lg' ? 'md' : size;
 
 	const isControlled = useMemo( () => typeof value !== 'undefined', [ value ] );
 	const switchId = useMemo( () => ( id ? id : `switch-${ nanoid() }` ), [] );
@@ -195,10 +198,15 @@ export const SwitchComponent = (
 			container: 'w-10 h-5',
 			toggleDial: 'size-3 peer-checked:translate-x-5',
 		},
+		xs: {
+			container: 'w-8 h-4',
+			toggleDial: 'size-2.5 peer-checked:translate-x-3.75',
+		},
 	};
 	const toggleDialHoverClassNames = {
 		md: 'group-hover/switch:size-5 group-focus-within/switch:size-5 group-focus-within/switch:left-0.5 group-hover/switch:left-0.5',
 		sm: 'group-hover/switch:size-4 group-focus-within/switch:size-4 group-focus-within/switch:left-0.5 group-hover/switch:left-0.5',
+		xs: 'group-hover/switch:size-3.25 group-focus-within/switch:size-3.25 group-focus-within/switch:left-0.5 group-hover/switch:left-0.5',
 	};
 
 	const disabledClassNames = {

src/theme/default-config.js

@@ -1,5 +1,5 @@
 const defaultTheme = {
-	content: [ 'node_modules/@bsf/force-ui/dist/force-ui.js' ],
+	content: [ 'node_modules/@bsf/force-ui/dist/components/**/*.js' ],
 	theme: {
 		extend: {
 			colors: {
@@ -198,6 +198,12 @@ const defaultTheme = {
 			fontSize: {
 				tiny: '0.625rem',
 			},
+			size: {
+				3.25: '0.8125rem', // 13px
+			},
+			translate: {
+				3.75: '0.9375rem', // 15px
+			},
 			spacing: {
 				4.5: '1.125rem', // 18px
 				5.5: '1.375rem', // 22px

vite.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
 import dts from 'vite-plugin-dts';
+import pkg from './package.json';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -13,15 +14,50 @@ export default defineConfig({
 				withTW: resolve(process.cwd(), 'src/utilities/withTW.js'),
 			},
 			name: '[name]',
-			fileName: '[name]',
-			formats: ['es', 'cjs'],
+			fileName: (format, entryName) => `${entryName}.${format}.js`,
 		},
 		outDir: 'dist',
 		rollupOptions: {
-			// make sure to externalize deps that shouldn't be bundled
-			// into your library
-			external: ['react', 'react-dom', 'react/jsx-runtime'],
+			external: [
+				'react', 
+				'react-dom', 
+				'react/jsx-runtime',
+				...Object.keys(pkg.dependencies),
+				...Object.keys(pkg.peerDependencies),
+				...Object.keys(pkg.devDependencies),
+				/^@lexical\//,
+			],
+			output: [
+				{
+					format: 'es',
+					preserveModules: true,
+					preserveModulesRoot: 'src',
+					entryFileNames: '[name].es.js',
+					chunkFileNames: '[name]-[hash].es.js',
+					exports: 'named',
+				},
+				{
+					format: 'cjs',
+					preserveModules: true,
+					preserveModulesRoot: 'src',
+					entryFileNames: '[name].cjs.js',
+					chunkFileNames: '[name]-[hash].cjs.js',
+					exports: 'named',
+				}
+			],
+			treeshake: {
+				moduleSideEffects: false,
+				propertyReadSideEffects: false,
+				tryCatchDeoptimization: false
+			},
 		},
+		minify: 'esbuild',
+		sourcemap: true,
+		emptyOutDir: true,
+		target: 'esnext',
+		cssCodeSplit: true,
+		reportCompressedSize: true,
+		chunkSizeWarningLimit: 100,
 	},
 	resolve: {
 		alias: {
@@ -34,7 +70,16 @@ export default defineConfig({
 	},
 	plugins: [
 		react(),
-		dts({ rollupTypes: true, tsconfigPath: './tsconfig.app.json' }),
+		dts({ 
+			rollupTypes: true,
+			tsconfigPath: './tsconfig.app.json',
+			insertTypesEntry: true,
+			exclude: ['**/node_modules/**', '**/_virtual/**'],
+		}),
 		preserveDirectives(),
 	],
+	esbuild: {
+		treeShaking: true,
+		legalComments: 'none',
+	},
 });