Merge pull request #52 from 1Hive/website-two-dot-o

Redesign website to be more in line with new aragonDS

website/package.json

@@ -3,22 +3,27 @@
   "version": "1.0.0",
   "main": "index.html",
   "scripts": {
-    "start": "parcel src/index.html --open",
-    "build": "parcel build src/index.html && cp src/dao.svg dist",
-    "now-build": "npm run build",
-    "lint": "eslint src"
+    "start": "parcel src/index.html --open && npx copy-aragon-ui-assets dist",
+    "build": "parcel build src/index.html && npx copy-aragon-ui-assets dist",
+    "lint": "eslint src",
+    "now-build": "npm run build"
   },
   "dependencies": {
-    "@aragon/ui": "0.27.0",
-    "react": "16.6.1",
-    "react-dom": "16.6.1",
-    "styled-components": "3.4.10"
+    "@aragon/ui": "^1.0.0-alpha.19",
+    "date-fns": "^2.0.1",
+    "graphql-hooks": "^3.6.1",
+    "prop-types": "^15.7.2",
+    "qs": "^6.8.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-router": "^5.0.1",
+    "react-router-dom": "^5.0.1",
+    "styled-components": "^4.3.2"
   },
   "devDependencies": {
-    "@types/react": "16.7.2",
-    "@types/react-dom": "16.0.9",
-    "@types/styled-components": "4.0.3",
+    "@babel/core": "^7.5.5",
     "babel-eslint": "^10.0.2",
+    "babel-plugin-styled-components": "^1.10.6",
     "eslint": "^6.1.0",
     "eslint-config-standard": "^13.0.1",
     "eslint-plugin-import": "^2.18.2",
@@ -27,5 +32,10 @@
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-standard": "^4.0.0",
     "parcel-bundler": "^1.6.1"
+  },
+  "babel": {
+    "plugins": [
+      "babel-plugin-styled-components"
+    ]
   }
 }

website/src/components/Filter/DateRangeFilter.js

@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { _DateRange as DateRange } from '@aragon/ui'
+
+export const FILTER_TYPE_DATE_RANGE = Symbol('FILTER_TYPE_DATE_RANGE')
+export function DateRangeFilter ({
+  name,
+  onChange
+}) {
+  const [dateRange, setDateRange] = useState({})
+  useEffect(() => {
+    if (!dateRange.start || !dateRange.end) return
+
+    onChange(name, {
+      between: dateRange
+    })
+  }, [name, dateRange])
+
+  return <DateRange
+    onChange={setDateRange}
+    startDate={dateRange.start}
+    endDate={dateRange.end}
+  />
+}
+
+DateRangeFilter.propTypes = {
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+}

website/src/components/Filter/Filter.js

@@ -0,0 +1,85 @@
+import React, { useState, useCallback, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { Box, Button, GU } from '@aragon/ui'
+import { FILTER_TYPE_DATE_RANGE, DateRangeFilter } from './DateRangeFilter'
+import { FILTER_TYPE_LIST, ListFilter } from './ListFilter'
+import { breakpoint } from '../../utils/breakpoint'
+
+export function Filter ({
+  filters = [],
+  onChange
+}) {
+  const [filter, setFilter] = useState({})
+
+  const setFilterValue = useCallback((key, value) => {
+    setFilter((currentFilter) => ({
+      ...currentFilter,
+      [key]: value
+    }))
+  })
+
+  useEffect(() => {
+    onChange(filter)
+  }, [filter])
+
+  const hasFilter = !!Object.keys(filter).length
+  const clearFilter = useCallback(() => {
+    setFilter({})
+  }, [])
+
+  const columns = Math.max(
+    filters.length + 1,
+    12
+  )
+
+  return <Box css={`margin-bottom: ${2 * GU}px`}>
+    <div css={`
+      display: grid;
+      grid-gap: ${1 * GU}px;
+      grid-template-columns: 1fr;
+
+      ${breakpoint('medium')`
+        grid-template-columns: repeat(${columns}, 1fr);
+        grid-template-rows: auto;
+      `}
+    `}>
+      {filters.map((filter) => {
+        switch (filter.type) {
+          case FILTER_TYPE_LIST:
+            return <ListFilter
+              name={filter.name}
+              onChange={setFilterValue}
+              items={filter.items}
+              placeholder={filter.placeholder}
+            />
+          case FILTER_TYPE_DATE_RANGE:
+            return <DateRangeFilter
+              name={filter.name}
+              onChange={setFilterValue}
+            />
+          default:
+            throw new Error(`Unknown filter type ${filter.type}`)
+        }
+      })}
+      {hasFilter &&
+        <Button
+          css={breakpoint('medium')`grid-column: ${columns};`}
+          onClick={clearFilter}
+        >
+          Clear
+        </Button>
+      }
+    </div>
+  </Box>
+}
+
+Filter.propTypes = {
+  filters: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf([
+      FILTER_TYPE_LIST,
+      FILTER_TYPE_DATE_RANGE
+    ]).isRequired,
+    name: PropTypes.string.isRequired
+  })),
+  onChange: PropTypes.func.isRequired
+}

website/src/components/Filter/ListFilter.js

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { DropDown } from '@aragon/ui'
+
+export const FILTER_TYPE_LIST = Symbol('FILTER_TYPE_LIST')
+export function ListFilter ({
+  name,
+  onChange,
+  items = [],
+  placeholder
+}) {
+  const [selectedItem, setSelectedItem] = useState()
+  useEffect(() => {
+    if (!items[selectedItem]) return
+
+    onChange(name, {
+      eq: items[selectedItem].value
+    })
+  }, [name, items, selectedItem])
+
+  return <DropDown
+    placeholder={placeholder}
+    items={items.map(({ label }) => label)}
+    selected={selectedItem}
+    onChange={(index) => setSelectedItem(index)}
+  />
+}
+
+ListFilter.propTypes = {
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.any.isRequired
+  })),
+  placeholder: PropTypes.string
+}

website/src/components/Filter/index.js

@@ -0,0 +1,3 @@
+export { FILTER_TYPE_DATE_RANGE } from './DateRangeFilter'
+export { FILTER_TYPE_LIST } from './ListFilter'
+export { Filter } from './Filter'

website/src/components/Layout/Content.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+
+export const Content = styled.div`
+  padding: 1em;
+  width: 100%;
+`

website/src/components/Layout/Layout.js

@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react'
+import PropTypes from 'prop-types'
+import { BREAKPOINTS, useViewport, Layout as BaseLayout } from '@aragon/ui'
+import { breakpoint } from '../../utils/breakpoint'
+
+function getSizes (breakpoints) {
+  return Object.entries(breakpoints)
+    .filter(([name]) => name !== 'min')
+    .sort((a, b) => a[1] - b[1])
+}
+
+function getLayoutSize (parentWidth, breakpoints) {
+  const sizes = getSizes(breakpoints)
+
+  let index = sizes.length
+  while (index--) {
+    if (parentWidth >= sizes[index][1]) {
+      return [
+        sizes[index][0],
+        sizes[index][1]
+      ]
+    }
+  }
+
+  return sizes[0]
+}
+
+function Layout ({
+  children,
+  ...props
+}) {
+  const { width: viewportWidth } = useViewport()
+
+  const [layoutName, layoutWidth] = useMemo(
+    () =>
+      getLayoutSize(
+        viewportWidth,
+        BREAKPOINTS
+      ),
+    [viewportWidth]
+  )
+
+  return (
+    <BaseLayout.__Context.Provider value={{ layoutWidth, layoutName }}>
+      <div
+        {...props}
+        css={`
+          display: flex;
+          flex-direction: column;
+          ${breakpoint('medium')`
+            flex-direction: row;
+          `}
+          margin: 0 auto;
+        `}
+      >
+        {children}
+      </div>
+    </BaseLayout.__Context.Provider>
+  )
+}
+
+Layout.propTypes = {
+  children: PropTypes.node
+}
+
+export { Layout }

website/src/components/Layout/Sidebar.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { breakpoint } from '../../utils/breakpoint'
+
+const SidebarOuter = styled.div`
+  width: 100%;
+  ${breakpoint('medium')`
+    width: 75px;
+  `}
+`
+
+const SidebarInner = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background-color: #e0e6f0;
+  justify-content: space-between;
+
+  ${breakpoint('medium')`
+    position: fixed;
+    height: 100%;
+    flex-direction: column;
+    justify-content: normal;
+  `}
+
+  > a {
+    display: block;
+    height: 43px;
+    width: 43px;
+
+    ${breakpoint('medium')`
+      margin-bottom: 25px;
+    `}
+
+    > svg {
+      width: 43px;
+      height: 43px;
+      color: #979797;
+      padding: 5px;
+    }
+
+    &.active, &:hover {
+      > svg {
+        color: #7C80F2;
+        cursor: pointer;
+        background-color: rgba(0, 0, 0, 0.05);
+        border-radius: 25%;
+      }
+    }
+  }
+
+  .logo {
+    width: 41px;
+    height: 41px;
+    margin-top: auto;
+  }
+`
+
+export const Sidebar = ({ children }) =>
+  <SidebarOuter>
+    <SidebarInner>
+      {children}
+    </SidebarInner>
+  </SidebarOuter>
+
+Sidebar.propTypes = {
+  children: PropTypes.node
+}

website/src/components/Layout/index.js

@@ -0,0 +1,3 @@
+export { Layout } from './Layout'
+export { Content } from './Content'
+export { Sidebar } from './Sidebar'