migrate(admin): SDK admin and SDK app to Apsara v1 (rc.6)

web/apps/admin/package.json

@@ -17,7 +17,7 @@
     "@hookform/resolvers": "^3.0.1",
     "@radix-ui/react-form": "^0.1.8",
     "@radix-ui/react-icons": "^1.3.0",
-    "@raystack/apsara": "0.56.6",
+    "@raystack/apsara-v1": "npm:@raystack/apsara@1.0.0-rc.6",
     "@raystack/frontier": "workspace:^",
     "@raystack/proton": "0.1.0-7523cfd3a676d3fb72d63c8c4f0476738a2217b3",
     "@stitches/react": "^1.2.8",
@@ -37,7 +37,6 @@
     "react-router-dom": "^6.9.0",
     "react-select": "^5.8.0",
     "slugify": "^1.6.6",
-    "sonner": "^1.4.41",
     "swr": "^2.1.2",
     "usehooks-ts": "^3.1.1",
     "vite-tsconfig-paths": "^4.0.7",

web/apps/admin/src/App.tsx

@@ -1,7 +1,7 @@
-import { Flex } from "@raystack/apsara";
+import { Flex } from "@raystack/apsara-v1";
 import { Outlet } from "react-router-dom";
-import "@raystack/apsara/style.css";
-import "@raystack/apsara/normalize.css";
+import "@raystack/apsara-v1/normalize.css";
+import "@raystack/apsara-v1/style.css";
 import "./App.css";
 import IAMSidebar from "./components/Sidebar";
 

web/apps/admin/src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Flex } from "@raystack/apsara";
+import { Box, Flex } from "@raystack/apsara-v1";
 
 type Props = {
   header?: React.ReactNode;

web/apps/admin/src/components/Price.tsx

@@ -1,4 +1,4 @@
-import { Flex } from "@raystack/apsara";
+import { Flex } from "@raystack/apsara-v1";
 import { getCurrencyValue } from "~/utils/helper";
 
 type PriceProps = {

web/apps/admin/src/components/Sidebar/index.tsx

@@ -2,17 +2,17 @@ import type React from "react";
 import { useContext } from "react";
 import {
   Avatar,
-  DropdownMenu,
+  Menu,
   Flex,
   Sidebar,
   Text,
   useTheme,
-} from "@raystack/apsara";
+} from "@raystack/apsara-v1";
 import { useMutation } from "@connectrpc/connect-query";
 import { FrontierServiceQueries } from "@raystack/proton/frontier";
 
 import styles from "./sidebar.module.css";
-import { OrganizationIcon } from "@raystack/apsara/icons";
+import { OrganizationIcon } from "@raystack/apsara-v1/icons";
 import IAMIcon from "~/assets/icons/iam.svg?react";
 import UserIcon from "~/assets/icons/users.svg?react";
 import InvoicesIcon from "~/assets/icons/invoices.svg?react";
@@ -157,7 +157,7 @@ export default function IAMSidebar() {
                   key={subItem.name}
                   active={isActive(subItem.to)}
                   data-test-id={`admin-sidebar-navigation-cell-${subItem.name}`}
-                  as={<Link to={subItem?.to ?? ""} />}>
+                  render={<Link to={subItem?.to ?? ""} />}>
                   {subItem.name}
                 </Sidebar.Item>
               ))}
@@ -168,7 +168,7 @@ export default function IAMSidebar() {
               key={nav.name}
               active={isActive(nav.to)}
               data-test-id={`admin-sidebar-navigation-cell-${nav.name}`}
-              as={<Link to={nav?.to ?? ""} />}>
+              render={<Link to={nav?.to ?? ""} />}>
               {nav.name}
             </Sidebar.Item>
           );
@@ -207,28 +207,30 @@ function UserDropdown() {
       : { icon: <SunIcon />, label: "Light" };
 
   return (
-    <DropdownMenu placement="top">
-      <DropdownMenu.Trigger asChild>
-        <Sidebar.Item
-          leadingIcon={
-            <Avatar src={user?.avatar} fallback={userInital} size={3} />
-          }
-          data-test-id="frontier-sdk-sidebar-logout">
-          {user?.email}
-        </Sidebar.Item>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        <DropdownMenu.Item
+    <Menu>
+      <Menu.Trigger
+        render={
+          <Sidebar.Item
+            leadingIcon={
+              <Avatar src={user?.avatar} fallback={userInital} size={3} />
+            }
+            data-test-id="frontier-sdk-sidebar-logout">
+            {user?.email}
+          </Sidebar.Item>
+        }
+      />
+      <Menu.Content side="top">
+        <Menu.Item
           onClick={toggleTheme}
           data-test-id="admin-toggle-theme">
           {themeData.icon} {themeData.label}
-        </DropdownMenu.Item>
-        <DropdownMenu.Item
+        </Menu.Item>
+        <Menu.Item
           onClick={() => logoutMutation.mutate({})}
           data-test-id="admin-logout-btn">
           Logout
-        </DropdownMenu.Item>
-      </DropdownMenu.Content>
-    </DropdownMenu>
+        </Menu.Item>
+      </Menu.Content>
+    </Menu>
   );
 }

web/apps/admin/src/components/Sidebar/sidebar.module.css

@@ -6,6 +6,10 @@
   width: 220px !important;
 }
 
+.sidebar :global(.sidebar-module_main__qDvo4) {
+  gap: var(--rs-space-1);
+}
+
 .sidebar-group {
   margin-top: var(--rs-space-5);
 }

web/apps/admin/src/components/assign-role.tsx

@@ -5,8 +5,8 @@ import {
   Flex,
   Label,
   Text,
-  toast,
-} from "@raystack/apsara";
+  toastManager,
+} from "@raystack/apsara-v1";
 import { useCallback } from "react";
 import type {
   SearchOrganizationUsersResponse_OrganizationUser,
@@ -139,9 +139,9 @@ export const AssignRole = ({
         onRoleUpdate();
       }
 
-      toast.success("Role assigned successfully");
+      toastManager.add({ title: "Role assigned successfully", type: "success" });
     } catch (error) {
-      toast.error("Failed to assign role");
+      toastManager.add({ title: "Failed to assign role", type: "error" });
       console.error(error);
     }
   };
@@ -187,16 +187,18 @@ export const AssignRole = ({
             </Flex>
           </Dialog.Body>
           <Dialog.Footer>
-            <Dialog.Close asChild>
-              <Button
-                type="button"
-                variant="outline"
-                color="neutral"
-                data-test-id="assign-role-cancel-button"
-              >
-                Cancel
-              </Button>
-            </Dialog.Close>
+            <Dialog.Close
+              render={
+                <Button
+                  type="button"
+                  variant="outline"
+                  color="neutral"
+                  data-test-id="assign-role-cancel-button"
+                >
+                  Cancel
+                </Button>
+              }
+            />
             <Button
               type="submit"
               data-test-id="assign-role-update-button"

web/apps/admin/src/components/collapsable-search/index.tsx

@@ -1,5 +1,5 @@
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { IconButton, Search } from "@raystack/apsara";
+import { IconButton, Search } from "@raystack/apsara-v1";
 import React, { useState } from "react";
 
 interface CollapsableSearchProps {

web/apps/admin/src/components/dialog/header.tsx

@@ -1,4 +1,4 @@
-import { Flex, Image, Text } from "@raystack/apsara";
+import { Flex, Image, Text } from "@raystack/apsara-v1";
 
 type DialogHeaderProps = {
   title?: string;

web/apps/admin/src/components/error-boundary.tsx

@@ -1,5 +1,5 @@
 import React, { Component, ReactNode } from "react";
-import { EmptyState } from "@raystack/apsara";
+import { EmptyState } from "@raystack/apsara-v1";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 
 interface Props {

web/apps/admin/src/components/page-header.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Text } from "@raystack/apsara";
+import { Flex, Text } from "@raystack/apsara-v1";
 import { Link } from "react-router-dom";
 import styles from "./page-header.module.css";
 export type PageHeaderTypes = {
@@ -25,8 +25,8 @@ export default function PageHeader({
       style={{ padding: "16px 24px", ...style }}
       {...props}
     >
-      <Flex align="center" gap="medium">
-        <Flex align="center" gap="small" className={styles.breadcrumb}>
+      <Flex align="center" gap={5}>
+        <Flex align="center" gap={3} className={styles.breadcrumb}>
           <Text style={{ fontSize: "14px", fontWeight: "500" }}>{title}</Text>
           {breadcrumb.map((item) => (
             <Link
@@ -35,13 +35,13 @@ export default function PageHeader({
               style={{ display: "flex", flexDirection: "row", gap: "8px" }}
             >
               <Flex align="center">
-                <Text size={1}>{item.name}</Text>
+                <Text size="mini">{item.name}</Text>
               </Flex>
             </Link>
           ))}
         </Flex>
       </Flex>
-      <Flex gap="small">{children}</Flex>
+      <Flex gap={3}>{children}</Flex>
     </Flex>
   );
 }

web/apps/admin/src/components/sheet/header.tsx

@@ -1,5 +1,5 @@
 import { Cross1Icon } from "@radix-ui/react-icons";
-import { Flex, Text } from "@raystack/apsara";
+import { Flex, Text } from "@raystack/apsara-v1";
 
 type SheetHeaderProps = {
   title: string;
@@ -9,7 +9,7 @@ type SheetHeaderProps = {
 export function SheetHeader({ title, onClick }: SheetHeaderProps) {
   return (
     <Flex justify="between" style={styles.header}>
-      <Text size={4} style={{ fontWeight: "500" }}>
+      <Text size="regular" weight="medium">
         {title}
       </Text>
       <Cross1Icon

web/apps/admin/src/components/states/Loading.tsx

@@ -1,4 +1,4 @@
-import { Flex, Spinner } from "@raystack/apsara";
+import { Flex, Spinner } from "@raystack/apsara-v1";
 
 export default function LoadingState() {
   return (

web/apps/admin/src/components/states/Unauthorized.tsx

@@ -1,5 +1,5 @@
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
-import { Button, EmptyState, Flex } from "@raystack/apsara";
+import { Button, EmptyState, Flex } from "@raystack/apsara-v1";
 import { useMutation } from "@connectrpc/connect-query";
 import { FrontierServiceQueries } from "@raystack/proton/frontier";
 

web/apps/admin/src/configs/theme.tsx

@@ -1,4 +1,4 @@
-import { ThemeProviderProps } from "@raystack/apsara";
+import { ThemeProviderProps } from "@raystack/apsara-v1";
 
 export const themeConfig: ThemeProviderProps = {
   defaultTheme: "system",

web/apps/admin/src/containers/login.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Box, Flex, Image } from "@raystack/apsara";
-import { Header, MagicLink } from "@raystack/frontier/react";
+import { Box, Flex, Image } from "@raystack/apsara-v1";
+import { AuthHeader, MagicLinkView } from "@raystack/frontier/client";
 import { useContext } from "react";
 import PageTitle from "~/components/page-title";
 import { AppContext } from "~/contexts/App";
@@ -26,7 +26,7 @@ export default function Login() {
           }}
         >
           <Flex direction="column" gap={5} style={{ width: "100%" }}>
-            <Header
+            <AuthHeader
               logo={
                 config?.logo ? (
                   <Image
@@ -42,7 +42,7 @@ export default function Login() {
               }
               title={`Login to ${config?.title || defaultConfig.title}`}
             />
-            <MagicLink open />
+            <MagicLinkView open inline />
           </Flex>
         </Flex>
       </Box>

web/apps/admin/src/containers/magiclink.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Flex, Image } from "@raystack/apsara";
-import { MagicLinkVerify } from "@raystack/frontier/react";
+import { Flex, Image } from "@raystack/apsara-v1";
+import { MagicLinkVerifyView } from "@raystack/frontier/client";
 import IAMIcon from "~/assets/icons/iam.svg?react";
 import { AppContext } from "~/contexts/App";
 import { useContext } from "react";
@@ -15,7 +15,7 @@ export default function MagicLink() {
       justify="center"
       style={{ height: "100vh", textAlign: "center" }}
     >
-      <MagicLinkVerify
+      <MagicLinkVerifyView
         logo={
           config?.logo ? (
             <Image

web/apps/admin/src/hooks/useRQL.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react";
-import type { DataTableQuery } from "@raystack/apsara";
+import type { DataTableQuery } from "@raystack/apsara-v1";
 import type {
   RQLQueryGroupResponse,
   RQLQueryPaginationResponse

web/apps/admin/src/layout/auth.tsx

@@ -1,4 +1,4 @@
-import { FrontierProvider } from "@raystack/frontier/react";
+import { FrontierProvider } from "@raystack/frontier/client";
 import { Outlet } from "react-router-dom";
 import { frontierConfig } from "~/configs/frontier";
 import { themeConfig } from "~/configs/theme";

web/apps/admin/src/main.tsx

@@ -1,4 +1,4 @@
-import { ThemeProvider, ToastContainer } from "@raystack/apsara";
+import { ThemeProvider, Toast } from "@raystack/apsara-v1";
 import { SkeletonTheme } from "react-loading-skeleton";
 import React from "react";
 import ReactDOM from "react-dom/client";
@@ -20,10 +20,11 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
             baseColor="var(--rs-color-background-base-primary-hover)"
           >
             <ConnectProvider>
-              <AppContextProvider>
-                <Routes />
-              </AppContextProvider>
-              <ToastContainer richColors />
+              <Toast.Provider>
+                <AppContextProvider>
+                  <Routes />
+                </AppContextProvider>
+              </Toast.Provider>
             </ConnectProvider>
           </SkeletonTheme>
         </ThemeProvider>

web/apps/admin/src/routes.tsx

@@ -1,4 +1,3 @@
-// import { MagicLinkVerify } from "@raystack/frontier/react";
 import * as R from "ramda";
 import { memo, useContext } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";

web/apps/admin/src/utils/transform-query.ts

@@ -1,4 +1,4 @@
-import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
+import type { DataTableQuery, DataTableSort } from "@raystack/apsara-v1";
 import type { RQLRequest, RQLFilter, RQLSort } from "@raystack/proton/frontier";
 import { RQLRequestSchema, RQLFilterSchema, RQLSortSchema } from "@raystack/proton/frontier";
 import { create } from "@bufbuild/protobuf";
@@ -19,9 +19,7 @@ export interface TransformOptions {
 /**
  * Converts a filter value to the appropriate RQLFilter value format
  */
-function convertFilterValue(
-  value: string | number | boolean | null | undefined,
-): RQLFilter["value"] {
+function convertFilterValue(value: unknown): RQLFilter["value"] {
   switch (typeof value) {
     case "boolean":
       return { case: "boolValue", value };
@@ -30,7 +28,7 @@ function convertFilterValue(
     case "string":
       return { case: "stringValue", value };
     default:
-      return { case: "stringValue", value: value ?? "" };
+      return { case: "stringValue", value: value == null ? "" : String(value) };
   }
 }