feat(ui): add Button, Modal, Spinner, Toast, and Tooltip components with styles

- Implemented Button component with various props for customization.
- Created Modal component with header, content, and footer subcomponents.
- Added Spinner component for loading indicators.
- Developed Toast component for displaying notifications.
- Introduced Tooltip component for contextual hints with keyboard shortcuts.
- Added corresponding CSS modules for styling each component.
- Updated index file to export new components.
- Configured TypeScript settings for the UI package.

apps/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@discord-clone/web",
   "private": true,
-  "version": "1.0.40",
+  "version": "1.0.50",
   "type": "module",
   "scripts": {
     "dev": "vite",

apps/web/src/main.jsx

@@ -7,10 +7,8 @@ import App from '@discord-clone/shared/src/App';
 import { ThemeProvider } from '@discord-clone/shared/src/contexts/ThemeContext';
 import { VoiceProvider } from '@discord-clone/shared/src/contexts/VoiceContext';
 import { SearchProvider } from '@discord-clone/shared/src/contexts/SearchContext';
-import { UpdateProvider } from '@discord-clone/shared/src/components/UpdateBanner';
 import webPlatform from '@discord-clone/platform-web';
-import '@discord-clone/shared/src/styles/themes.css';
-import '@discord-clone/shared/src/index.css';
+import '@discord-clone/shared/src/global.css';
 
 const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL);
 
@@ -19,15 +17,13 @@ ReactDOM.createRoot(document.getElementById('root')).render(
     <PlatformProvider platform={webPlatform}>
       <ThemeProvider>
         <ConvexProvider client={convex}>
-          <UpdateProvider>
-            <SearchProvider>
-              <VoiceProvider>
-                <BrowserRouter>
-                  <App />
-                </BrowserRouter>
-              </VoiceProvider>
-            </SearchProvider>
-          </UpdateProvider>
+          <SearchProvider>
+            <VoiceProvider>
+              <BrowserRouter>
+                <App />
+              </BrowserRouter>
+            </VoiceProvider>
+          </SearchProvider>
         </ConvexProvider>
       </ThemeProvider>
     </PlatformProvider>

apps/web/vite.config.js

@@ -72,6 +72,25 @@ export default defineConfig({
     alias: {
       '@discord-clone/shared': path.resolve(__dirname, '../../packages/shared'),
       '@discord-clone/platform-web': path.resolve(__dirname, '../../packages/platform-web'),
+      '@discord-clone/ui': path.resolve(__dirname, '../../packages/ui/src'),
+      '@discord-clone/constants': path.resolve(__dirname, '../../packages/constants/src'),
+      '@brycord/ui': path.resolve(__dirname, '../../packages/ui/src'),
+      '@brycord/constants': path.resolve(__dirname, '../../packages/constants/src'),
+      '@brycord/matrix-client': path.resolve(__dirname, '../../packages/shared/src/_shims/matrix-client.ts'),
+      '@app/stores': path.resolve(__dirname, '../../packages/shared/src/_shims/stores'),
+      '@app/actions': path.resolve(__dirname, '../../packages/shared/src/_shims/actions'),
+      '@app/components': path.resolve(__dirname, '../../packages/shared/src/components'),
+      '@app/hooks': path.resolve(__dirname, '../../packages/shared/src/_shims/app/hooks'),
+      '@app/utils': path.resolve(__dirname, '../../packages/shared/src/_shims/app/utils'),
+      '@app/data': path.resolve(__dirname, '../../packages/shared/src/_shims/app/data'),
+      '@app': path.resolve(__dirname, '../../packages/shared/src/_shims/app'),
+      'mobx-react-lite': path.resolve(__dirname, '../../packages/shared/src/_shims/mobx-react-lite.ts'),
+      mobx: path.resolve(__dirname, '../../packages/shared/src/_shims/mobx.ts'),
+    },
+  },
+  css: {
+    modules: {
+      localsConvention: 'camelCaseOnly',
     },
   },
   build: {