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.

packages/constants/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@discord-clone/constants",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "devDependencies": {
+    "typescript": "^5.7.0"
+  }
+}

packages/constants/src/ChannelTypes.ts

@@ -0,0 +1,9 @@
+export const ChannelTypes = {
+	TEXT: 'text',
+	VOICE: 'voice',
+	CATEGORY: 'category',
+	DM: 'dm',
+	GROUP_DM: 'group_dm',
+} as const;
+
+export type ChannelType = (typeof ChannelTypes)[keyof typeof ChannelTypes];

packages/constants/src/PermissionFlags.ts

@@ -0,0 +1,37 @@
+export const PermissionFlags = {
+	MANAGE_SERVER: 1 << 0,
+	MANAGE_CHANNELS: 1 << 1,
+	MANAGE_ROLES: 1 << 2,
+	MANAGE_MESSAGES: 1 << 3,
+	KICK_MEMBERS: 1 << 4,
+	BAN_MEMBERS: 1 << 5,
+	SEND_MESSAGES: 1 << 6,
+	SEND_FILES: 1 << 7,
+	ADD_REACTIONS: 1 << 8,
+	CONNECT_VOICE: 1 << 9,
+	SPEAK: 1 << 10,
+	STREAM: 1 << 11,
+	MUTE_MEMBERS: 1 << 12,
+	DEAFEN_MEMBERS: 1 << 13,
+	MOVE_MEMBERS: 1 << 14,
+	MENTION_EVERYONE: 1 << 15,
+	VIEW_CHANNEL: 1 << 16,
+	CREATE_INVITE: 1 << 17,
+	CHANGE_NICKNAME: 1 << 18,
+	MANAGE_NICKNAMES: 1 << 19,
+	MANAGE_EMOJIS: 1 << 20,
+	ADMINISTRATOR: 1 << 31,
+} as const;
+
+export type PermissionFlag = (typeof PermissionFlags)[keyof typeof PermissionFlags];
+
+export function hasPermission(permissions: number, flag: number): boolean {
+	if (permissions & PermissionFlags.ADMINISTRATOR) return true;
+	return (permissions & flag) === flag;
+}
+
+export function combinePermissions(...flags: number[]): number {
+	return flags.reduce((acc, flag) => acc | flag, 0);
+}
+
+export const MAX_ROLES_PER_SERVER = 25;

packages/constants/src/Routes.ts

@@ -0,0 +1,19 @@
+export const Routes = {
+	HOME: '/',
+	LOGIN: '/login',
+	REGISTER: '/register',
+	SETUP_ENCRYPTION: '/setup-encryption',
+
+	ME: '/channels/@me',
+	NOTIFICATIONS: '/notifications',
+	YOU: '/you',
+
+	dmChannel: (channelId: string) => `/channels/@me/${channelId}`,
+	serverChannel: (serverId: string, channelId?: string) =>
+		channelId ? `/channels/${serverId}/${channelId}` : `/channels/${serverId}`,
+	channelMessage: (serverId: string, channelId: string, messageId: string) =>
+		`/channels/${serverId}/${channelId}/${messageId}`,
+
+	isDMRoute: (path: string) => path.startsWith('/channels/@me'),
+	isServerRoute: (path: string) => path.startsWith('/channels/') && !path.startsWith('/channels/@'),
+} as const;

packages/constants/src/StatusTypes.ts

@@ -0,0 +1,17 @@
+export const StatusTypes = {
+	ONLINE: 'online',
+	IDLE: 'idle',
+	DND: 'dnd',
+	OFFLINE: 'offline',
+	INVISIBLE: 'invisible',
+} as const;
+
+export type StatusType = (typeof StatusTypes)[keyof typeof StatusTypes];
+
+export enum PresenceStatus {
+	Online = 'online',
+	Idle = 'idle',
+	DoNotDisturb = 'dnd',
+	Offline = 'offline',
+	Invisible = 'invisible',
+}

packages/constants/src/index.ts

@@ -0,0 +1,9 @@
+export { ChannelTypes } from './ChannelTypes';
+export {
+	PermissionFlags,
+	hasPermission,
+	combinePermissions,
+	MAX_ROLES_PER_SERVER,
+} from './PermissionFlags';
+export { StatusTypes, PresenceStatus } from './StatusTypes';
+export { Routes } from './Routes';

packages/constants/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src"]
+}