Update user authentication and refactor UI components

Refactored the user authentication method in the dashboard from getSession to getUser, and updated its related variables accordingly. UI components have also been modified, which includes streamlining the importation of the 'cn' function and exporting the 'Stepper' function directly. Lastly, the 'Stepper' function is now included in the package.json for the UI component package.

apps/web/app/(dashboard)/home/_components/home-sidebar.tsx

@@ -16,7 +16,7 @@ import { loadUserWorkspace } from '../_lib/load-user-workspace';
 
 export function HomeSidebar() {
   const collapsed = getSidebarCollapsed();
-  const { accounts, session } = use(loadUserWorkspace());
+  const { accounts, user } = use(loadUserWorkspace());
 
   return (
     <Sidebar collapsed={collapsed}>
@@ -38,10 +38,7 @@ export function HomeSidebar() {
 
       <div className={'absolute bottom-4 left-0 w-full'}>
         <SidebarContent>
-          <ProfileAccountDropdownContainer
-            collapsed={collapsed}
-            user={session?.user ?? null}
-          />
+          <ProfileAccountDropdownContainer collapsed={collapsed} user={user} />
         </SidebarContent>
       </div>
     </Sidebar>

apps/web/app/(dashboard)/home/_lib/load-user-workspace.ts

@@ -10,11 +10,11 @@ export const loadUserWorkspace = cache(async () => {
   const loadAccounts = featureFlagsConfig.enableTeamAccounts;
 
   const accounts = loadAccounts ? await loadUserAccounts(client) : [];
-  const { data } = await client.auth.getSession();
+  const { data } = await client.auth.getUser();
 
   return {
     accounts,
-    session: data.session,
+    user: data.user,
   };
 });
 

packages/ui/package.json

@@ -124,7 +124,8 @@
     "./profile-avatar": "./src/makerkit/profile-avatar.tsx",
     "./mode-toggle": "./src/makerkit/mode-toggle.tsx",
     "./enhanced-data-table": "./src/makerkit/data-table.tsx",
-    "./language-selector": "./src/makerkit/language-selector.tsx"
+    "./language-selector": "./src/makerkit/language-selector.tsx",
+    "./stepper": "./src/makerkit/stepper.tsx"
   },
   "typesVersions": {
     "*": {

packages/ui/src/makerkit/stepper.tsx

@@ -4,7 +4,7 @@ import { Fragment, useCallback } from 'react';
 
 import { cva } from 'class-variance-authority';
 
-import { cn } from '../utils/cn';
+import { cn } from '../utils';
 import { If } from './if';
 import { Trans } from './trans';
 
@@ -20,7 +20,7 @@ const classNameBuilder = getClassNameBuilder();
  *   - currentStep {number} - The index of the currently active step.
  *   - variant {string} (optional) - The variant of the stepper component (default: 'default').
  **/
-function Stepper(props: {
+export function Stepper(props: {
   steps: string[];
   currentStep: number;
   variant?: Variant;
@@ -78,8 +78,6 @@ function Stepper(props: {
   );
 }
 
-export default Stepper;
-
 function getClassNameBuilder() {
   return cva(``, {
     variants: {