From 7c8bee314d3226ac6f0240710a5cda041b328abb Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 4 Mar 2025 20:13:57 +0600 Subject: [PATCH 1/8] wip: Tree shaking --- package.json | 18 +++++++++------ src/theme/default-config.js | 2 +- vite.config.ts | 44 +++++++++++++++++++++++++++++++++---- 3 files changed, 52 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 2863dab2..f5610754 100644 --- a/package.json +++ b/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", diff --git a/src/theme/default-config.js b/src/theme/default-config.js index aae1e35e..15b1b4e3 100644 --- a/src/theme/default-config.js +++ b/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: { diff --git a/vite.config.ts b/vite.config.ts index 121b0e5d..7f19eb05 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -13,15 +13,43 @@ export default defineConfig({ withTW: resolve(process.cwd(), 'src/utilities/withTW.js'), }, name: '[name]', - fileName: '[name]', + fileName: (format, entryName) => `${entryName}.${format}.js`, formats: ['es', 'cjs'], }, outDir: 'dist', rollupOptions: { - // make sure to externalize deps that shouldn't be bundled - // into your library external: ['react', 'react-dom', 'react/jsx-runtime'], + output: [ + { + format: 'es', + preserveModules: true, + preserveModulesRoot: 'src', + entryFileNames: '[name].es.js', + chunkFileNames: '[name]-[hash].es.js', + manualChunks: undefined, + }, + { + format: 'cjs', + preserveModules: true, + preserveModulesRoot: 'src', + entryFileNames: '[name].cjs.js', + chunkFileNames: '[name]-[hash].cjs.js', + manualChunks: undefined, + } + ], + 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 +62,15 @@ export default defineConfig({ }, plugins: [ react(), - dts({ rollupTypes: true, tsconfigPath: './tsconfig.app.json' }), + dts({ + rollupTypes: true, + tsconfigPath: './tsconfig.app.json', + insertTypesEntry: true, + }), preserveDirectives(), ], + esbuild: { + treeShaking: true, + legalComments: 'none', + }, }); From d747f5640ccb2cbd28a3b773258b66793c8ef081 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 4 Mar 2025 20:41:46 +0600 Subject: [PATCH 2/8] Exclude node_modules --- vite.config.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/vite.config.ts b/vite.config.ts index 7f19eb05..4f5d7856 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -14,27 +14,29 @@ export default defineConfig({ }, name: '[name]', fileName: (format, entryName) => `${entryName}.${format}.js`, - formats: ['es', 'cjs'], }, outDir: 'dist', rollupOptions: { - external: ['react', 'react-dom', 'react/jsx-runtime'], + external: [ + 'react', + 'react-dom', + 'react/jsx-runtime', + /node_modules/, + ], output: [ { format: 'es', preserveModules: true, preserveModulesRoot: 'src', entryFileNames: '[name].es.js', - chunkFileNames: '[name]-[hash].es.js', - manualChunks: undefined, + chunkFileNames: '[name]-[hash].es.js' }, { format: 'cjs', preserveModules: true, preserveModulesRoot: 'src', entryFileNames: '[name].cjs.js', - chunkFileNames: '[name]-[hash].cjs.js', - manualChunks: undefined, + chunkFileNames: '[name]-[hash].cjs.js' } ], treeshake: { @@ -66,6 +68,7 @@ export default defineConfig({ rollupTypes: true, tsconfigPath: './tsconfig.app.json', insertTypesEntry: true, + exclude: ['**/node_modules/**', '**/_virtual/**'], }), preserveDirectives(), ], From 8dcb98eb90d6cc8c92d054c297b51460e528feb2 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Tue, 4 Mar 2025 21:07:53 +0600 Subject: [PATCH 3/8] fix: Build time warning --- vite.config.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/vite.config.ts b/vite.config.ts index 4f5d7856..183981ef 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -29,14 +29,16 @@ export default defineConfig({ preserveModules: true, preserveModulesRoot: 'src', entryFileNames: '[name].es.js', - chunkFileNames: '[name]-[hash].es.js' + chunkFileNames: '[name]-[hash].es.js', + exports: 'named', }, { format: 'cjs', preserveModules: true, preserveModulesRoot: 'src', entryFileNames: '[name].cjs.js', - chunkFileNames: '[name]-[hash].cjs.js' + chunkFileNames: '[name]-[hash].cjs.js', + exports: 'named', } ], treeshake: { From c49eca1b77ea158374b97e6e126f240a9f8c0920 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Wed, 5 Mar 2025 13:20:59 +0600 Subject: [PATCH 4/8] Update vite.config.ts --- vite.config.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/vite.config.ts b/vite.config.ts index 183981ef..0d5feac3 100644 --- a/vite.config.ts +++ b/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({ @@ -21,7 +22,10 @@ export default defineConfig({ 'react', 'react-dom', 'react/jsx-runtime', - /node_modules/, + ...Object.keys(pkg.dependencies), + ...Object.keys(pkg.peerDependencies), + ...Object.keys(pkg.devDependencies), + /^@lexical\//, ], output: [ { From 4c3a7679358335bfd67a4ac7f39102b92d7ecce2 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Thu, 6 Mar 2025 10:58:29 +0600 Subject: [PATCH 5/8] Update destructive button ring color --- src/components/button/button.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 729edca4..34b82136 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -76,6 +76,7 @@ const Button: React.FunctionComponent = 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 = forwardRef( sizeClassNames, variantClassNames, destructiveClassNames, + commonDestructiveClassName, loadingClass, { 'cursor-default': disabled, From f5567caae14bd9b04e5da6899096e477443c2dc4 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Thu, 6 Mar 2025 11:25:07 +0600 Subject: [PATCH 6/8] feat: Add xs size option to Switch component --- changelog.txt | 1 + src/components/switch/switch.tsx | 22 +++++++++++++++------- src/theme/default-config.js | 6 ++++++ 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/changelog.txt b/changelog.txt index f0bb6ea7..a727d1e1 100644 --- a/changelog.txt +++ b/changelog.txt @@ -2,6 +2,7 @@ Version 1.4.2 - 4th March, 2025 - 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. +- New - Added new size 'xs' to the Switch component. Version 1.4.1 - 10th February, 2025 - Improvement - Show active preset with background color in the DatePicker component. diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index d0e73ca4..f83031e8 100644 --- a/src/components/switch/switch.tsx +++ b/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 ( -
+
{ heading && (