feat(cms): reformat sidebar navigation

tenseijs · Nov 8, 2021 · 5553add · 5553add
1 parent 5cbb67d
commit 5553add
Show file tree

Hide file tree

Showing 10 changed files with 163 additions and 82 deletions.
diff --git a/packages/auth/auth.d.ts b/packages/auth/auth.d.ts
@@ -4,7 +4,7 @@ import { GraphQLPluginContext, DataPayload } from '@tensei/common'
 declare module '@tensei/common' {
   interface GraphQLPluginContext {
     // @ts-ignore
-    authUser: DataPayload & import('@tensei/orm').UserModel
+    authUser: import('@tensei/orm').UserModel & DataPayload
     // @ts-ignore
     team: import('@tensei/orm').TeamModel
   }

diff --git a/packages/auth/package.json b/packages/auth/package.json
@@ -5,7 +5,8 @@
   "license": "MIT",
   "files": [
     "build/",
-    "auth.d.ts"
+    "auth.d.ts",
+    "types.d.ts"
   ],
   "types": "types.d.ts",
   "devDependencies": {

diff --git a/packages/auth/types.d.ts b/packages/auth/types.d.ts
@@ -1,8 +1,7 @@
+import { PermissionContract, RoleContract } from './build'
 export * from './build'
 
 declare module '@tensei/orm' {
-  import { TeamModel, MembershipModel } from '@tensei/orm'
-
   export interface UserModel {
     allTeams: () => Promise<TeamModel[]>
     ownsTeam: (team: TeamModel) => Promise<boolean>
@@ -12,5 +11,11 @@ declare module '@tensei/orm' {
     hasTeamPermission: (team: TeamModel, permission: string) => Promise<boolean>
 
     // Roles and permissions
+    hasRole: () => boolean
+    hasPermission: () => boolean
+    assignRole: () => Promise<void>
+    removeRole: () => Promise<void>
+    getAllPermissions: () => PermissionContract[]
+    getAllRoles: () => RoleContract[]
   }
 }
diff --git a/packages/cms/main.tsx b/packages/cms/main.tsx
@@ -13,16 +13,19 @@ import { useEuiTheme, EuiThemeProvider } from '@tensei/eui/lib/services/theme'
 interface ThemeExtensions {
   colors: {
     bgShade: string
+    primaryTransparent: string
   }
 }
 
 const extensions = {
   colors: {
     LIGHT: {
-      bgShade: '#f9f9f9'
+      bgShade: '#f9f9f9',
+      primaryTransparent: 'rgba(35, 70, 248, 0.2)'
     },
     DARK: {
-      bgShade: '#f9f9f9'
+      bgShade: '#f9f9f9',
+      primaryTransparent: 'rgba(35, 70, 248, 0.2)'
     }
   }
 }

diff --git a/packages/cms/pages/components/dashboard/layout/layout.tsx b/packages/cms/pages/components/dashboard/layout/layout.tsx
@@ -7,17 +7,45 @@ import { EuiTitle } from '@tensei/eui/lib/components/title'
 import { useEuiTheme } from '@tensei/eui/lib/services/theme'
 import { EuiSpacer } from '@tensei/eui/lib/components/spacer'
 import { EuiButton } from '@tensei/eui/lib/components/button'
+import { EuiAvatar } from '@tensei/eui/lib/components/avatar'
+import { EuiButtonEmpty } from '@tensei/eui/lib/components/button/button_empty'
 
 const Sidebar = styled.div<{
   bg?: string
 }>`
   display: flex;
   flex-direction: column;
-  width: 248px;
+  width: 64px;
   height: 100%;
   position: relative;
   border-right: ${({ theme }) => theme.border.thin};
-  background-color: ${({ theme }) => theme.colors.bgShade};
+`
+
+const NestedSidebar = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 260px;
+  height: 100%;
+  position: relative;
+  border-right: ${({ theme }) => theme.border.thin};
+`
+
+const NestedSidebarHeader = styled.div`
+  height: 75px;
+  padding: 0 1.75rem;
+  display: flex;
+  align-items: center;
+`
+
+const NestedSidebarTitleUnderline = styled.div`
+  width: 25%;
+  margin: 0 1.75rem;
+  ${({ theme }) => `border-bottom: ${theme.border.thin}`}
+`
+
+const SidebarWrapper = styled.div`
+  display: flex;
+  height: 100%;
 `
 
 const Wrapper = styled.div`
@@ -27,40 +55,66 @@ const Wrapper = styled.div`
 `
 
 const Workspace = styled.div`
-  padding: 18px 25px;
   display: flex;
   align-items: center;
+  justify-content: center;
   height: 75px;
+  border-bottom: ${({ theme }) => theme.border.thin};
+`
+
+const GroupName = styled(EuiText)`
+  font-size: 10px;
+  text-align: center;
+  text-transform: uppercase;
+  ${({ theme }) => `color: ${theme.colors.subdued}`}
 `
 
 const SidebarContainer = styled.div`
   flex-grow: 1;
 `
 
 const Footer = styled.div`
-  height: 160px;
+  height: 170px;
   width: 100%;
-  padding: 18px 25px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 1rem;
   border-top: ${({ theme }) => theme.border.thin};
 `
 
-const NavItem = styled.div`
+const NavItem = styled.button<{
+  active?: boolean
+}>`
   display: flex;
   align-items: center;
+  padding: 0.75rem;
+  margin-bottom: 0.5rem;
+  ${({ active, theme }) =>
+    active
+      ? `
+    background-color: ${theme.colors.primaryTransparent};
+    border-radius: ${theme.border.radius.medium};
+    `
+      : ``}
 
   svg {
-    margin-right: 10px;
+    width: 1.25rem;
+    height: 1.25rem;
+    fill: currentColor;
+    ${({ active, theme }) =>
+      active
+        ? `
+    color: ${theme.colors.primaryText};
+    `
+        : ``}
   }
 `
 
-const WorkspaceName = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: 12px;
+const Logo = styled.img`
+  ${({ theme }) => `border-radius: 10px;`}
 `
 
-const Logo = styled.img``
-
 const Body = styled.div`
   display: flex;
   flex-direction: column;
@@ -103,54 +157,82 @@ const CollapseExpandIcon = styled.button`
   background-color: ${({ theme }) => theme.colors.ghost};
 `
 
+const StyledAvatarButton = styled.button`
+  margin-top: 0.75rem;
+`
+
+const TitleAndBackButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+`
+
 export const DashboardLayout: React.FunctionComponent = ({ children }) => {
   const { euiTheme } = useEuiTheme()
+  console.log(euiTheme)
   return (
     <Wrapper>
-      <Sidebar>
-        <CollapseExpandIcon>
-          <EuiIcon size="s" type="arrowLeft" />
-        </CollapseExpandIcon>
-
-        <SidebarContainer>
-          <Workspace>
-            <Logo
-              width={40}
-              height={40}
-              src={
-                'https://res.cloudinary.com/bahdcoder/image/upload/v1630016927/Asset_5_4x_hykfhh.png'
-              }
-            ></Logo>
-            <WorkspaceName>
-              <EuiTitle size="xs">
-                <h1>Tensei</h1>
-              </EuiTitle>
-              <EuiText size="xs" color="slategray">
-                Workspace
-              </EuiText>
-            </WorkspaceName>
-          </Workspace>
-
-          <EuiSpacer size="l" />
-        </SidebarContainer>
-
-        <Footer>
-          <NavItem>
-            <EuiIcon type="gear" />
-            <EuiText>Settings</EuiText>
-          </NavItem>
-          <EuiSpacer size="s" />
-          <NavItem>
-            <EuiIcon type="help" />
-            <EuiText>Help</EuiText>
-          </NavItem>
-        </Footer>
-      </Sidebar>
+      <SidebarWrapper>
+        <Sidebar>
+          <SidebarContainer>
+            <Workspace>
+              <Logo
+                width={40}
+                height={40}
+                src={
+                  'https://res.cloudinary.com/bahdcoder/image/upload/v1630016927/Asset_5_4x_hykfhh.png'
+                }
+              ></Logo>
+            </Workspace>
+
+            <EuiSpacer size="l" />
+
+            <GroupName textAlign="center">Main</GroupName>
+
+            <EuiSpacer size="l" />
+
+            <GroupName textAlign="center">Team</GroupName>
+          </SidebarContainer>
+
+          <Footer>
+            <NavItem active>
+              <EuiIcon type="gear" />
+            </NavItem>
+            <EuiSpacer size="s" />
+            <NavItem>
+              <EuiIcon type="help" />
+            </NavItem>
+
+            <StyledAvatarButton>
+              <EuiAvatar
+                name="Kati Frantz"
+                imageUrl="https://avatars2.githubusercontent.com/u/19477966?v=4"
+              />
+            </StyledAvatarButton>
+          </Footer>
+        </Sidebar>
+        <NestedSidebar>
+          <CollapseExpandIcon>
+            <EuiIcon size="s" type="arrowLeft" />
+          </CollapseExpandIcon>
+          <NestedSidebarHeader>
+            <EuiTitle size="s">
+              <h1>Content</h1>
+            </EuiTitle>
+          </NestedSidebarHeader>
+          <NestedSidebarTitleUnderline />
+        </NestedSidebar>
+      </SidebarWrapper>
       <Body>
         <Topbar>
-          <EuiTitle size="s">
-            <h1>Content</h1>
-          </EuiTitle>
+          <TitleAndBackButtonContainer>
+            <EuiButtonEmpty iconType="arrowLeft" href="/back">
+              Back
+            </EuiButtonEmpty>
+            <EuiTitle size="xs">
+              <h3>Content</h3>
+            </EuiTitle>
+          </TitleAndBackButtonContainer>
 
           <EuiButton fill color="primary">
             Add new product

diff --git a/packages/cms/plugin/index.ts b/packages/cms/plugin/index.ts
@@ -350,18 +350,6 @@ class CmsPlugin {
     }
   }
 
-  private getRolesAndPermissionsNames() {
-    return `${this.resources.role.data.camelCaseNamePlural}.${this.resources.permission.data.camelCaseNamePlural}`
-  }
-
-  private getRoleUserKey() {
-    return this.resources.role.data.camelCaseNamePlural
-  }
-
-  private getPermissionUserKey() {
-    return this.resources.permission.data.camelCaseNamePlural
-  }
-
   public dashboards(dashboards: DashboardContract[]) {
     this.config.dashboards = [...this.config.dashboards, ...dashboards]
 
@@ -472,19 +460,19 @@ class CmsPlugin {
                 if (user === false) {
                   return response.status(422).json([
                     {
-                      message: 'The first name is required.',
+                      message: 'Please provide your first name.',
                       field: 'firstName'
                     },
                     {
-                      message: 'The last name is required.',
+                      message: 'Please provide your last name.',
                       field: 'lastName'
                     },
                     {
-                      message: 'The email is required.',
+                      message: 'Please provide your email',
                       field: 'email'
                     },
                     {
-                      message: 'The password is required.',
+                      message: 'Please provide your password',
                       field: 'password'
                     }
                   ])
@@ -513,11 +501,11 @@ class CmsPlugin {
               if (user === false) {
                 return response.status(422).json([
                   {
-                    message: 'The email is required.',
+                    message: 'Please provide your email.',
                     field: 'email'
                   },
                   {
-                    message: 'The password is required.',
+                    message: 'Please provide your password.',
                     field: 'password'
                   }
                 ])

diff --git a/packages/cms/styled.d.ts b/packages/cms/styled.d.ts
@@ -4,6 +4,7 @@ import { EuiThemeComputed } from '@tensei/eui/lib/services/theme'
 interface ThemeExtensions {
   colors: {
     bgShade: string
+    primaryTransparent: string
   }
 }
 

diff --git a/packages/common/typings/express.d.ts b/packages/common/typings/express.d.ts
@@ -32,7 +32,7 @@ declare global {
       styles: Asset[]
       logger: Logger
       // @ts-ignore
-      authUser: DataPayload & import('@tensei/orm').UserModel
+      authUser: import('@tensei/orm').UserModel & DataPayload
       // @ts-ignore
       team: import('@tensei/orm').TeamModel
       originatedFromDashboard: boolean | undefined

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -17,7 +17,8 @@
     "prettier": "prettier --write './**/*.{js,json,ts,css}'",
     "build": "tsc --p tsconfig.json && yarn copy:files",
     "dev": "tsc --watch --p tsconfig.json",
-    "copy:files": "copyfiles welcome.html build/"
+    "copy:files": "copyfiles welcome.html build/",
+    "postinstall": "yarn tensei orm:types"
   },
   "dependencies": {
     "@mikro-orm/core": "^4.3.2",