fix: support new ui (#280)

raystack · Jul 25, 2023 · f7f409b · f7f409b
1 parent 6034a3d
commit f7f409b
Show file tree

Hide file tree

Showing 41 changed files with 604 additions and 2,095 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -10,10 +10,12 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.0.1",
-    "@raystack/apsara": "0.9.7",
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-form": "^0.0.2",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@raystack/apsara": "0.10.5",
     "@stitches/react": "^1.2.8",
+    "@tanstack/react-table": "^8.9.3",
     "dotenv": "^16.0.3",
     "ramda": "^0.29.0",
     "re-resizable": "^6.9.9",

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -1,24 +1,78 @@
-import { Flex } from "@raystack/apsara";
+import { Flex, ScrollArea, Sidebar } from "@raystack/apsara";
+import "@raystack/apsara/index.css";
 import { Outlet } from "react-router-dom";
 import "./App.css";
-import Layout from "./components/Layout";
-import Sidebar from "./components/sidebar/Sidebar";
+
+export type NavigationItemsTypes = {
+  active?: boolean;
+  to?: string;
+  name: string;
+  icon?: React.ReactNode;
+};
+
+const BRAND_NAME = "Shield";
+const navigationItems: NavigationItemsTypes[] = [
+  {
+    name: "Dashboard",
+    to: `/console/dashboard`,
+  },
+  {
+    name: "Organisations",
+    to: `/console/organisations`,
+  },
+  {
+    name: "Projects",
+    to: `/console/projects`,
+  },
+  {
+    name: "Users",
+    to: `/console/users`,
+  },
+  {
+    name: "Groups",
+    to: `/console/groups`,
+  },
+  {
+    name: "Roles",
+    to: `/console/roles`,
+  },
+];
 
 function App() {
   return (
-    <Layout
-      sidebar={
-        <Sidebar>
-          <Flex direction="column" css={{ width: "100%" }}>
-            <Sidebar.Header></Sidebar.Header>
-            <Sidebar.Content></Sidebar.Content>
+    <div style={{ display: "flex", height: "100vh", overflow: "hidden" }}>
+      <Sidebar>
+        <Flex direction="column" style={{ maxWidth: "250px" }}>
+          <Sidebar.Logo name={BRAND_NAME} />
+          <Flex
+            // @ts-ignore
+            style={{
+              marginTop: "22px",
+              maxHeight: "calc(100vh - 120px)",
+            }}
+          >
+            <ScrollArea style={{ paddingRight: "var(--mr-16)", width: "100%" }}>
+              <Sidebar.Navigations>
+                {navigationItems.map((nav) => (
+                  <Sidebar.NavigationCell
+                    key={nav.name}
+                    href={nav.to}
+                    active={nav.active}
+                  >
+                    {nav.name}
+                  </Sidebar.NavigationCell>
+                ))}
+              </Sidebar.Navigations>
+            </ScrollArea>
           </Flex>
-          <Sidebar.Footer></Sidebar.Footer>
-        </Sidebar>
-      }
-    >
-      <Outlet />
-    </Layout>
+        </Flex>
+        <Sidebar.Footer></Sidebar.Footer>
+      </Sidebar>
+      <Flex style={{ flexGrow: "1", overflow: "auto" }}>
+        <Outlet />
+      </Flex>
+      ;
+    </div>
   );
 }
 

diff --git a/ui/src/components/CustomField.tsx b/ui/src/components/CustomField.tsx
@@ -0,0 +1,56 @@
+import {
+  FormControl,
+  FormField,
+  FormLabel,
+  FormMessage,
+} from "@radix-ui/react-form";
+import { Flex, Text, TextField } from "@raystack/apsara";
+
+import { Control, Controller, UseFormRegister } from "react-hook-form";
+import { capitalizeFirstLetter } from "~/utils/helper";
+
+type CustomFieldNameProps = {
+  name: string;
+  register: UseFormRegister<any>;
+  control: Control<any, any>;
+};
+
+export const CustomFieldName = ({
+  name,
+  register,
+  control,
+}: CustomFieldNameProps) => {
+  return (
+    <FormField name={name}>
+      <Flex
+        gap="medium"
+        style={{
+          alignItems: "baseline",
+          justifyContent: "space-between",
+        }}
+      >
+        <FormLabel>
+          <Text>{capitalizeFirstLetter(name)}</Text>
+        </FormLabel>
+        <FormMessage match="valueMissing">Please enter your {name}</FormMessage>
+        <FormMessage match="typeMismatch">
+          Please provide a valid {name}
+        </FormMessage>
+      </Flex>
+      <FormControl asChild>
+        <Controller
+          name={name}
+          control={control}
+          rules={{ required: true }}
+          render={({ field }) => (
+            <TextField {...field} required placeholder={`Enter your ${name}`} />
+          )}
+        />
+      </FormControl>
+    </FormField>
+  );
+};
+
+const styles = {
+  main: { padding: "32px", width: "80%", margin: 0 },
+};
diff --git a/ui/src/components/DialogTable.tsx b/ui/src/components/DialogTable.tsx
@@ -1,6 +1,5 @@
-import { Flex, Table } from "@raystack/apsara";
+import { DataTable, Flex } from "@raystack/apsara";
 import { ColumnDef } from "@tanstack/table-core";
-import { tableStyle } from "~/styles";
 
 type DialogTableProps = {
   columns: ColumnDef<any, any>[];
@@ -15,11 +14,16 @@ export default function DialogTable({
   return (
     <Flex
       direction="row"
-      css={{ height: "100%", width: "100%", minWidth: "1020px" }}
+      style={{ height: "100%", width: "100%", minWidth: "1020px" }}
     >
-      <Table css={tableStyle} columns={columns} data={data ?? []}>
-        {header && <Table.TopContainer>{header}</Table.TopContainer>}
-      </Table>
+      <DataTable
+        data={data ?? []}
+        // @ts-ignore
+        columns={columns}
+        style={{ width: "100%" }}
+      >
+        {header && <DataTable.Toolbar>{header}</DataTable.Toolbar>}
+      </DataTable>
     </Flex>
   );
 }
diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
@@ -1,6 +1,5 @@
-import { Box, Flex, styled } from "@raystack/apsara";
+import { Box, Flex } from "@raystack/apsara";
 import React from "react";
-import Resizable from "~/components/Resizable";
 
 type Props = {
   header?: React.ReactNode;
@@ -16,25 +15,17 @@ const RESIZABLE = {
   maxWidth: "330px",
   minHeight: "100%",
 };
-const ResizableContainer = styled(Resizable, {});
+
 export default function Layout({ header, children, sidebar }: Props) {
   return (
     <Box>
-      <Flex direction={"row"} css={containerStyle}>
-        <ResizableContainer
-          minWidth={RESIZABLE.minWidth}
-          maxWidth={RESIZABLE.maxWidth}
-          minHeight={RESIZABLE.minHeight}
-          defaultSize={{
-            width: RESIZABLE.width,
-            height: RESIZABLE.height,
-          }}
-        >
+      <Flex direction={"row"} style={containerStyle}>
+        <Flex direction="column" style={{ width: "250px" }}>
           {sidebar}
-        </ResizableContainer>
-        <Flex as={"main"} direction="column" css={mainContainerStyle}>
+        </Flex>
+        <Flex direction="column" style={{ flexGrow: 1, position: "relative" }}>
           {header}
-          <Flex css={contentContainerStyle}>{children}</Flex>
+          <Flex style={contentContainerStyle}>{children}</Flex>
         </Flex>
       </Flex>
     </Box>
@@ -49,10 +40,7 @@ const containerStyle = {
   alignItems: "stretch",
 };
 
-const mainContainerStyle = {
-  flexGrow: 1,
-  position: "relative",
-};
+
 
 const contentContainerStyle = {
   overflow: "auto",

diff --git a/ui/src/components/Resizable.tsx b/ui/src/components/Resizable.tsx
diff --git a/ui/src/components/dialog/header.tsx b/ui/src/components/dialog/header.tsx
@@ -8,9 +8,9 @@ export function DialogHeader({ title }: DialogHeaderProps) {
     <Flex
       justify="between"
       align="center"
-      css={{ padding: "16px 32px", width: "98%", height: "52px" }}
+      style={{ padding: "16px 32px", width: "98%", height: "52px" }}
     >
-      <Text css={{ fontSize: "14px", fontWeight: "500" }}>{title}</Text>
+      <Text style={{ fontSize: "14px", fontWeight: "500" }}>{title}</Text>
       <Image src="/share.svg" />
     </Flex>
   );

diff --git a/ui/src/components/sheet/footer.tsx b/ui/src/components/sheet/footer.tsx
@@ -7,7 +7,7 @@ type SheetFooterProps = {
 };
 
 export function SheetFooter({ children, css }: SheetFooterProps) {
-  return <Flex css={{ ...styles.footer, ...css }}>{children}</Flex>;
+  return <Flex style={{ ...styles.footer, ...css }}>{children}</Flex>;
 }
 
 const styles = {

diff --git a/ui/src/components/sheet/header.tsx b/ui/src/components/sheet/header.tsx
@@ -1,5 +1,5 @@
-import { Flex, Text } from "@raystack/apsara";
 import { Cross1Icon } from "@radix-ui/react-icons";
+import { Flex, Text } from "@raystack/apsara";
 
 type SheetHeaderProps = {
   title: string;
@@ -8,8 +8,8 @@ type SheetHeaderProps = {
 
 export function SheetHeader({ title, onClick }: SheetHeaderProps) {
   return (
-    <Flex css={styles.header}>
-      <Text size="4" css={{ fontWeight: "500" }}>
+    <Flex justify="between" style={styles.header}>
+      <Text size={4} style={{ fontWeight: "500" }}>
         {title}
       </Text>
       <Cross1Icon onClick={onClick} />
@@ -19,9 +19,7 @@ export function SheetHeader({ title, onClick }: SheetHeaderProps) {
 
 const styles = {
   header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
     padding: "18px 32px",
-    borderBottom: "1px solid $gray4",
+    borderBottom: "1px solid var(--border-base)",
   },
 };
diff --git a/ui/src/components/sidebar/Sidebar.tsx b/ui/src/components/sidebar/Sidebar.tsx