feat: Initial dashboard layout

decentralized-identity · Jan 24, 2020 · 31b69a8 · 31b69a8
1 parent e43335e
commit 31b69a8
Show file tree

Hide file tree

Showing 8 changed files with 318 additions and 6 deletions.
diff --git a/examples/react-graphql/client/@types/rimble-ui.d.ts b/examples/react-graphql/client/@types/rimble-ui.d.ts
@@ -0,0 +1 @@
+declare module 'rimble-ui'
diff --git a/examples/react-graphql/client/package.json b/examples/react-graphql/client/package.json
@@ -11,13 +11,15 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@types/styled-components": "^4.4.2",
     "apollo-boost": "^0.4.7",
     "graphql": "^14.5.8",
     "react": "^16.12.0",
     "react-apollo": "^3.1.3",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.0",
     "rimble-ui": "^0.11.1",
+    "styled-components": "^5.0.0",
     "typescript": "~3.7.2"
   },
   "scripts": {

diff --git a/examples/react-graphql/client/src/index.tsx b/examples/react-graphql/client/src/index.tsx
@@ -1,9 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import App from './App'
+import Dashboard from './views/Dashboard/Dashboard'
 import ApolloClient from 'apollo-boost'
 import { ApolloProvider } from 'react-apollo'
 import * as serviceWorker from './serviceWorker'
+import { BaseStyles, theme } from 'rimble-ui'
+import { ThemeProvider } from 'styled-components'
+
+import '../src/styles/base.css'
 
 const client = new ApolloClient({
   uri: 'http://localhost:4000/',
@@ -22,7 +26,22 @@ const client = new ApolloClient({
 
 ReactDOM.render(
   <ApolloProvider client={client}>
-    <App />
+    <ThemeProvider
+      theme={Object.assign({}, theme, {
+        colors: {
+          ...theme.colors, // keeps existing colors
+          text: '#EEE', // sets color for text
+          background: '#222', // sets color for background
+          primary: '#3259D6', // sets primary color
+        },
+        fontSizes: [12, 14, 16, 20, 24, 32, 48, 64], // sets font scale
+        space: [0, 4, 8, 16, 32, 64, 128, 256], // sets spacing scale
+      })}
+    >
+      <BaseStyles id="base_styles_container">
+        <Dashboard />
+      </BaseStyles>
+    </ThemeProvider>
   </ApolloProvider>,
   document.getElementById('root'),
 )

diff --git a/examples/react-graphql/client/src/styles/base.css b/examples/react-graphql/client/src/styles/base.css
@@ -0,0 +1,26 @@
+html {
+  background-color: #f5f5f5;
+  overflow: hidden;
+}
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'proxima-nova';
+  overflow: hidden;
+  font-size: 16px;
+}
+
+#root {
+  display: flex;
+  height: 100vh;
+}
+
+#base_styles_container {
+  display: flex;
+  flex: 1;
+}
+
+* {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
diff --git a/examples/react-graphql/client/src/views/Dashboard/Dashboard.tsx b/examples/react-graphql/client/src/views/Dashboard/Dashboard.tsx
@@ -0,0 +1,147 @@
+import React, { useState } from 'react'
+import { useQuery, useMutation } from '@apollo/react-hooks'
+
+import { Flex, Box, Text, Heading, Button, Icon } from 'rimble-ui'
+
+interface DashboardProps {}
+
+const Dashboard: React.FC<DashboardProps> = () => {
+  const [sidePanelOpen, toggleSidePanel] = useState(false)
+
+  return (
+    <Flex flexDirection={'row'} flex={1}>
+      <Box p={3} bg="#1C1C1C">
+        <Box borderRadius={1} width={40} height={40} bg="white"></Box>
+      </Box>
+      <Box p={3} width={220} bg="#28292B" borderRight={1} borderColor={'#4B4B4B'}>
+        <Box mb={32}>
+          <Heading as={'h3'}>Daf Dashboard</Heading>
+          <Text>Description</Text>
+        </Box>
+        <Box bg="#222222" mb={2} p={1} pl={3} borderRadius={1}>
+          <Text>Activity</Text>
+        </Box>
+        <Box bg="#983587" mb={2} p={1} pl={3} borderRadius={1}>
+          <Text>Explore</Text>
+        </Box>
+        <Box bg="#222222" mb={2} p={1} pl={3} borderRadius={1}>
+          <Text>Issue Credential</Text>
+        </Box>
+        <Box bg="#222222" mb={2} p={1} pl={3} borderRadius={1}>
+          <Text>Request</Text>
+        </Box>
+        <Box bg="#222222" mb={2} p={1} pl={3} borderRadius={1}>
+          <Text>Link 1</Text>
+        </Box>
+        <Box bg="#222222" mb={2} p={1} pl={3} borderRadius={1}>
+          <Text>Link 1</Text>
+        </Box>
+      </Box>
+      <Box flex={1} bg="#1C1C1C">
+        <Box
+          p={3}
+          bg="#1C1C1C"
+          borderBottom={1}
+          borderColor={'#4B4B4B'}
+          flexDirection={'row'}
+          display={'flex'}
+          justifyContent={'space-between'}
+        >
+          <Heading as={'h4'}>Page Header</Heading>
+          <Icon name={'Menu'} color={'#CCC'} size={35} onClick={() => toggleSidePanel(!sidePanelOpen)} />
+        </Box>
+
+        <Box p={3} flex={1} height={'100%'} overflow={'scroll'} pb={64}>
+          <Box borderRadius={1} bg="#2B2B2B" flex={1} mb={32}>
+            <Box p={3} borderBottom={1} borderColor={'#4B4B4B'}>
+              <Heading as={'h5'}>Panel Header</Heading>
+            </Box>
+            <Box p={3}>Panel body</Box>
+          </Box>
+
+          <Box borderRadius={1} bg="#222222" flex={1} mb={32}>
+            <Box p={3} borderBottom={1} borderColor={'#4B4B4B'}>
+              <Heading as={'h5'}>Panel Header</Heading>
+            </Box>
+            <Box p={3}>Panel body</Box>
+          </Box>
+
+          <Box borderRadius={1} bg="#222222" flex={1} mb={32}>
+            <Box p={3} borderBottom={1} borderColor={'#4B4B4B'}>
+              <Heading as={'h5'}>Panel Header</Heading>
+            </Box>
+            <Box p={3}>Panel body</Box>
+          </Box>
+
+          <Box borderRadius={1} bg="#222222" flex={1} mb={32}>
+            <Box p={3} borderBottom={1} borderColor={'#4B4B4B'}>
+              <Heading as={'h5'}>Panel Header</Heading>
+            </Box>
+            <Box p={3}>Panel body</Box>
+          </Box>
+
+          <Box borderRadius={1} bg="#222222" flex={1} mb={32}>
+            <Box p={3} borderBottom={1} borderColor={'#4B4B4B'}>
+              <Heading as={'h5'}>Panel Header</Heading>
+            </Box>
+            <Box p={3}>Panel body</Box>
+          </Box>
+
+          <Box borderRadius={1} bg="#222222" flex={1} mb={32}>
+            <Box p={3} borderBottom={1} borderColor={'#4B4B4B'}>
+              <Heading as={'h5'}>Panel Header</Heading>
+            </Box>
+            <Box p={3}>Panel body</Box>
+          </Box>
+
+          <Box borderRadius={1} bg="#222222" flex={1} mb={32}>
+            <Box p={3} borderBottom={1} borderColor={'#4B4B4B'}>
+              <Heading as={'h5'}>Panel Header</Heading>
+            </Box>
+            <Box p={3}>Panel body</Box>
+          </Box>
+
+          <Box borderRadius={1} bg="#222222" flex={1} mb={32}>
+            <Box p={3} borderBottom={1} borderColor={'#4B4B4B'}>
+              <Heading as={'h5'}>Panel Header</Heading>
+            </Box>
+            <Box p={3}>Panel body</Box>
+          </Box>
+
+          <Box borderRadius={1} bg="#222222" flex={1} mb={32}>
+            <Box p={3} borderBottom={1} borderColor={'#4B4B4B'}>
+              <Heading as={'h5'}>Panel Header</Heading>
+            </Box>
+            <Box p={3}>Panel body</Box>
+          </Box>
+
+          <Box borderRadius={1} bg="#222222" flex={1} mb={32}>
+            <Box p={3} borderBottom={1} borderColor={'#4B4B4B'}>
+              <Heading as={'h5'}>Panel Header</Heading>
+            </Box>
+            <Box p={3}>Panel body</Box>
+          </Box>
+
+          <Box borderRadius={1} bg="#222222" flex={1} mb={32}>
+            <Box p={3} borderBottom={1} borderColor={'#4B4B4B'}>
+              <Heading as={'h5'}>Panel Header</Heading>
+            </Box>
+            <Box p={3}>Panel body</Box>
+          </Box>
+        </Box>
+      </Box>
+      {sidePanelOpen && (
+        <Box width={350} bg="#1C1C1C" borderLeft={1} borderColor={'#4B4B4B'}>
+          <Box p={3}>
+            <Heading as={'h4'}>Context Panel</Heading>
+          </Box>
+          <Box p={3}>
+            <Text>We can show contextual information here</Text>
+          </Box>
+        </Box>
+      )}
+    </Flex>
+  )
+}
+
+export default Dashboard
diff --git a/examples/react-graphql/client/src/views/__tests__/Dashboard.snapshot.test.tsx b/examples/react-graphql/client/src/views/__tests__/Dashboard.snapshot.test.tsx
diff --git a/examples/react-graphql/client/tsconfig.json b/examples/react-graphql/client/tsconfig.json
@@ -15,5 +15,5 @@
     "noEmit": true,
     "jsx": "react"
   },
-  "include": ["src"]
+  "include": ["./src/**/*", "@types"]
 }