mirror of
				https://github.com/lingble/chatwoot.git
				synced 2025-11-04 13:07:55 +00:00 
			
		
		
		
	This PR has the initial version of the new sidebar targeted for the next major redesign of the app. This PR includes the following changes - Components in the `layouts-next` and `base-next` directories in `dashboard/components` - Two generic components `Avatar` and `Icon` - `SidebarGroup` component to manage expandable sidebar groups with nested navigation items. This includes handling active states, transitions, and permissions. - `SidebarGroupHeader` component to display the header of each navigation group with optional icons and active state indication. - `SidebarGroupLeaf` component for individual navigation items within a group, supporting icons and active state. - `SidebarGroupSeparator` component to visually separate nested navigation items. (They look a lot like header) - `SidebarGroupEmptyLeaf` component to render empty state of any navigation groups. ---- Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Pranav <pranavrajs@gmail.com>
		
			
				
	
	
		
			112 lines
		
	
	
		
			3.6 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			112 lines
		
	
	
		
			3.6 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
/// <reference types="vitest" />
 | 
						|
 | 
						|
/**
 | 
						|
What's going on with library mode?
 | 
						|
 | 
						|
Glad you asked, here's a quick rundown:
 | 
						|
 | 
						|
1. vite-plugin-ruby will automatically bring all the entrypoints like dashbord and widget as input to vite.
 | 
						|
2. vite needs to be in library mode to build the SDK as a single file. (UMD) format and set `inlineDynamicImports` to true.
 | 
						|
3. But when setting `inlineDynamicImports` to true, vite will not be able to handle mutliple entrypoints.
 | 
						|
 | 
						|
This puts us in a deadlock, now there are two ways around this, either add another separate build pipeline to
 | 
						|
the app using vanilla rollup or rspack or something. The second option is to remove sdk building from the main pipeline
 | 
						|
and build it separately using Vite itself, toggled by an ENV variable.
 | 
						|
 | 
						|
`BUILD_MODE=library bin/vite build` should build only the SDK and save it to `public/packs/js/sdk.js`
 | 
						|
`bin/vite build` will build the rest of the app as usual. But exclude the SDK.
 | 
						|
 | 
						|
We need to edit the `asset:precompile` rake task to include the SDK in the precompile list.
 | 
						|
*/
 | 
						|
import { defineConfig } from 'vite';
 | 
						|
import ruby from 'vite-plugin-ruby';
 | 
						|
import path from 'path';
 | 
						|
import vue from '@vitejs/plugin-vue';
 | 
						|
 | 
						|
const isLibraryMode = process.env.BUILD_MODE === 'library';
 | 
						|
const isTestMode = process.env.TEST === 'true';
 | 
						|
 | 
						|
const vueOptions = {
 | 
						|
  template: {
 | 
						|
    compilerOptions: {
 | 
						|
      isCustomElement: tag => ['ninja-keys'].includes(tag),
 | 
						|
    },
 | 
						|
  },
 | 
						|
};
 | 
						|
 | 
						|
let plugins = [ruby(), vue(vueOptions)];
 | 
						|
 | 
						|
if (isLibraryMode) {
 | 
						|
  plugins = [];
 | 
						|
} else if (isTestMode) {
 | 
						|
  plugins = [vue(vueOptions)];
 | 
						|
}
 | 
						|
 | 
						|
export default defineConfig({
 | 
						|
  plugins: plugins,
 | 
						|
  build: {
 | 
						|
    rollupOptions: {
 | 
						|
      output: {
 | 
						|
        // [NOTE] when not in library mode, no new keys will be addedd or overwritten
 | 
						|
        // setting dir: isLibraryMode ? 'public/packs' : undefined will not work
 | 
						|
        ...(isLibraryMode
 | 
						|
          ? {
 | 
						|
              dir: 'public/packs',
 | 
						|
              entryFileNames: chunkInfo => {
 | 
						|
                if (chunkInfo.name === 'sdk') {
 | 
						|
                  return 'js/sdk.js';
 | 
						|
                }
 | 
						|
                return '[name].js';
 | 
						|
              },
 | 
						|
            }
 | 
						|
          : {}),
 | 
						|
        inlineDynamicImports: isLibraryMode, // Disable code-splitting for SDK
 | 
						|
      },
 | 
						|
    },
 | 
						|
    lib: isLibraryMode
 | 
						|
      ? {
 | 
						|
          entry: path.resolve(__dirname, './app/javascript/entrypoints/sdk.js'),
 | 
						|
          formats: ['iife'], // IIFE format for single file
 | 
						|
          name: 'sdk',
 | 
						|
        }
 | 
						|
      : undefined,
 | 
						|
  },
 | 
						|
  resolve: {
 | 
						|
    alias: {
 | 
						|
      vue: 'vue/dist/vue.esm-bundler.js',
 | 
						|
      components: path.resolve('./app/javascript/dashboard/components'),
 | 
						|
      next: path.resolve('./app/javascript/dashboard/components-next'),
 | 
						|
      v3: path.resolve('./app/javascript/v3'),
 | 
						|
      dashboard: path.resolve('./app/javascript/dashboard'),
 | 
						|
      helpers: path.resolve('./app/javascript/shared/helpers'),
 | 
						|
      shared: path.resolve('./app/javascript/shared'),
 | 
						|
      survey: path.resolve('./app/javascript/survey'),
 | 
						|
      widget: path.resolve('./app/javascript/widget'),
 | 
						|
      assets: path.resolve('./app/javascript/dashboard/assets'),
 | 
						|
    },
 | 
						|
  },
 | 
						|
  test: {
 | 
						|
    environment: 'jsdom',
 | 
						|
    include: ['app/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
 | 
						|
    coverage: {
 | 
						|
      reporter: ['lcov', 'text'],
 | 
						|
      include: ['app/**/*.js', 'app/**/*.vue'],
 | 
						|
      exclude: [
 | 
						|
        'app/**/*.@(spec|stories|routes).js',
 | 
						|
        '**/specs/**/*',
 | 
						|
        '**/i18n/**/*',
 | 
						|
      ],
 | 
						|
    },
 | 
						|
    globals: true,
 | 
						|
    outputFile: 'coverage/sonar-report.xml',
 | 
						|
    server: {
 | 
						|
      deps: {
 | 
						|
        inline: ['tinykeys', '@material/mwc-icon'],
 | 
						|
      },
 | 
						|
    },
 | 
						|
    setupFiles: ['fake-indexeddb/auto', 'vitest.setup.js'],
 | 
						|
    mockReset: true,
 | 
						|
    clearMocks: true,
 | 
						|
  },
 | 
						|
});
 |