Adds ui-lib

README.md

@@ -11,7 +11,7 @@ Install the `cookiecutter` command line tool: `brew install cookiecutter`
 Generate a new project using this template:
 
 ```
-cookiecutter gh:developmentseed/cookiecutter-react-mapboxgl --checkout parcel
+cookiecutter gh:developmentseed/cookiecutter-react-mapboxgl --checkout ui-lib
 ```
 
 ## License

{{cookiecutter.project_slug}}/.nvmrc

@@ -1 +1 @@
-14
+14.15.1

{{cookiecutter.project_slug}}/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['@babel/preset-react'],
+  plugins: ['babel-plugin-styled-components'],
 }

{{cookiecutter.project_slug}}/package.json

@@ -32,6 +32,7 @@
     "@babel/preset-react": "^7.12.1",
     "axe-core": "^4.0.2",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-styled-components": "^1.12.0",
     "cypress": "^6.5.0",
     "cypress-axe": "0.12.1",
     "eslint": "^7.12.1",
@@ -50,6 +51,15 @@
     "prettier": "^2.1.2"
   },
   "dependencies": {
+    "@devseed-ui/button": "^3.0.2",
+    "@devseed-ui/collecticons": "^3.0.0",
+    "@devseed-ui/dropdown": "^2.0.2",
+    "@devseed-ui/form": "^1.0.3",
+    "@devseed-ui/global-loading": "^2.0.1",
+    "@devseed-ui/theme-provider": "^3.0.0",
+    "@devseed-ui/toolbar": "^2.1.0",
+    "@devseed-ui/typography": "^1.0.0",
+    "lodash.defaultsdeep": "^4.6.1",
     "mapbox-gl": "^1.13.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",

{{cookiecutter.project_slug}}/src/App.js

@@ -1,18 +1,25 @@
 import React from 'react'
 import { BrowserRouter, Switch, Route } from 'react-router-dom'
+import { DevseedUiThemeProvider } from '@devseed-ui/theme-provider'
 
-import Home from './pages/Home'
+import { CollecticonsGlobalStyle } from '@devseed-ui/collecticons'
+import GlobalLoadingProvider from '@devseed-ui/global-loading'
 
+import Home from './pages/Home'
 import config from './config'
 
 export default function App() {
   return (
     <BrowserRouter>
-      <Switch>
-        <Route path='/'>
-          <Home siteName={config.siteName} theme={config.theme} />
-        </Route>
-      </Switch>
+      <DevseedUiThemeProvider theme={config.themeOverrides}>
+        <CollecticonsGlobalStyle />
+        <GlobalLoadingProvider />
+        <Switch>
+          <Route path='/'>
+            <Home siteName={config.siteName} />
+          </Route>
+        </Switch>
+      </DevseedUiThemeProvider>
     </BrowserRouter>
   )
 }

{{cookiecutter.project_slug}}/src/components/Header.js

@@ -1,16 +1,30 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 
-const HeaderContainer = styled.header`
-  padding: 1em;
-`
+import { Heading } from '@devseed-ui/typography'
+import { Button } from '@devseed-ui/button'
 
 export default function Header({ siteName }) {
   return (
-    <HeaderContainer>
-      <h1>🌱 {siteName}</h1>
-    </HeaderContainer>
+    <div
+      css={`
+        display: inline-flex;
+        justify-content: space-between;
+        width: 100%;
+        padding: 0 1rem;
+      `}
+    >
+      <Heading variation='primary'>🌱 {siteName}</Heading>
+      <Button
+        variation='base-plain'
+        size='medium'
+        className='button-class'
+        title='sample button'
+        onClick={() => {}}
+      >
+        Click Me
+      </Button>
+    </div>
   )
 }
 

{{cookiecutter.project_slug}}/src/components/PageLayout.js

@@ -1,32 +1,28 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import styled, { ThemeProvider } from 'styled-components'
 
-const PageContainer = styled.div`
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-`
-
-const MainContent = styled.main`
-  width: 100%;
-`
-
-export default function PageLayout({ theme, children }) {
+export default function PageLayout({ children }) {
   return (
-    <ThemeProvider theme={theme}>
-      <PageContainer>
-        <MainContent>
-          {children}
-        </MainContent>
-      </PageContainer>
-    </ThemeProvider>
+    <div
+      css={`
+        height: 100%;
+        overflow: hidden;
+        display: flex;
+        flex-direction: row;
+      `}
+    >
+      <main
+        css={`
+          width: 100%;
+        `}
+      >
+        {children}
+      </main>
+    </div>
   )
 }
 
 PageLayout.propTypes = {
-  theme: PropTypes.object.isRequired,
   noMargin: PropTypes.bool,
   children: PropTypes.oneOfType([
     PropTypes.element,

{{cookiecutter.project_slug}}/src/config/index.js

@@ -1,4 +1,4 @@
-import theme from './theme'
+import themeOverrides from './theme'
 
 if (!process.env.MAPBOX_ACCESS_TOKEN) {
   throw new Error('MAPBOX_ACCESS_TOKEN env var is required')
@@ -7,5 +7,5 @@ if (!process.env.MAPBOX_ACCESS_TOKEN) {
 export default {
   siteName: process.env.SITE_NAME,
   mapboxAccessToken: process.env.MAPBOX_ACCESS_TOKEN,
-  theme,
+  themeOverrides,
 }

{{cookiecutter.project_slug}}/src/config/theme.js

@@ -1,19 +1,19 @@
-export default {
-  colors: {
-    primary: '#304CA2',
-    highlight: '#F98E08',
-    background: '#FFFFFF',
-    text: '#373E49',
-  },
-  fonts: {
-    body: 'Open Sans, sans-serif',
-    heading: 'Open Sans, sans-serif',
-  },
-  fontSizes: [10, 12, 14, 16, 32, 52],
-  fontWeights: {
-    body: 400,
-    heading: 700,
-    bold: 700,
-  },
-  space: [0, 4, 8, 16, 32, 70],
+import defaultsDeep from 'lodash.defaultsdeep'
+
+export function themeOverrides(uiTheme) {
+  const baseColor = '#2C3E50'
+
+  return defaultsDeep(
+    {
+      color: {
+        base: baseColor,
+        baseDark: baseColor,
+        primary: '#2276ac',
+        secondary: '#17557c',
+        link: '#2276ac',
+      },
+    },
+    uiTheme
+  )
 }
+

{{cookiecutter.project_slug}}/src/pages/Home.js

@@ -5,9 +5,9 @@ import PageLayout from '../components/PageLayout'
 import Header from '../components/Header'
 import Map from '../components/Map'
 
-export default function Home({ siteName, theme }) {
+export default function Home({ siteName }) {
   return (
-    <PageLayout theme={theme}>
+    <PageLayout>
       <Header siteName={siteName} />
       <Map />
     </PageLayout>
@@ -16,5 +16,4 @@ export default function Home({ siteName, theme }) {
 
 Home.propTypes = {
   siteName: PropTypes.string.isRequired,
-  theme: PropTypes.object.isRequired,
 }