diff --git a/README.md b/README.md index 4b7971a..4a70e61 100644 --- a/README.md +++ b/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 diff --git a/{{cookiecutter.project_slug}}/.nvmrc b/{{cookiecutter.project_slug}}/.nvmrc index 8351c19..2f5ee74 100644 --- a/{{cookiecutter.project_slug}}/.nvmrc +++ b/{{cookiecutter.project_slug}}/.nvmrc @@ -1 +1 @@ -14 +14.15.1 diff --git a/{{cookiecutter.project_slug}}/README.md b/{{cookiecutter.project_slug}}/README.md index d5eab6b..04f4560 100644 --- a/{{cookiecutter.project_slug}}/README.md +++ b/{{cookiecutter.project_slug}}/README.md @@ -11,6 +11,14 @@ TODO: describe: ## Install +```sh +$ yarn install +``` + +```sh +$ yarn develop +``` + TODO: describe installation instructions ## Documentation diff --git a/{{cookiecutter.project_slug}}/babel.config.js b/{{cookiecutter.project_slug}}/babel.config.js index 771fbad..ddfceee 100644 --- a/{{cookiecutter.project_slug}}/babel.config.js +++ b/{{cookiecutter.project_slug}}/babel.config.js @@ -1,3 +1,4 @@ module.exports = { presets: ['@babel/preset-react'], + plugins: ['babel-plugin-styled-components'], } diff --git a/{{cookiecutter.project_slug}}/package.json b/{{cookiecutter.project_slug}}/package.json index cc8314d..8108ad3 100644 --- a/{{cookiecutter.project_slug}}/package.json +++ b/{{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", diff --git a/{{cookiecutter.project_slug}}/src/App.js b/{{cookiecutter.project_slug}}/src/App.js index 76e3648..15e25b4 100644 --- a/{{cookiecutter.project_slug}}/src/App.js +++ b/{{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 ( - - - - - + + + + + + + + + ) } diff --git a/{{cookiecutter.project_slug}}/src/components/Header.js b/{{cookiecutter.project_slug}}/src/components/Header.js index 14139c1..6eb2b3f 100644 --- a/{{cookiecutter.project_slug}}/src/components/Header.js +++ b/{{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 ( - -

🌱 {siteName}

- +
+ 🌱 {siteName} + +
) } diff --git a/{{cookiecutter.project_slug}}/src/components/PageLayout.js b/{{cookiecutter.project_slug}}/src/components/PageLayout.js index 0df3397..11c2f18 100644 --- a/{{cookiecutter.project_slug}}/src/components/PageLayout.js +++ b/{{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 ( - - - - {children} - - - +
+
+ {children} +
+
) } PageLayout.propTypes = { - theme: PropTypes.object.isRequired, noMargin: PropTypes.bool, children: PropTypes.oneOfType([ PropTypes.element, diff --git a/{{cookiecutter.project_slug}}/src/config/index.js b/{{cookiecutter.project_slug}}/src/config/index.js index 0cbb11c..0f32cdb 100644 --- a/{{cookiecutter.project_slug}}/src/config/index.js +++ b/{{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, } diff --git a/{{cookiecutter.project_slug}}/src/config/theme.js b/{{cookiecutter.project_slug}}/src/config/theme.js index 8248cc6..51845c1 100644 --- a/{{cookiecutter.project_slug}}/src/config/theme.js +++ b/{{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 + ) } + diff --git a/{{cookiecutter.project_slug}}/src/pages/Home.js b/{{cookiecutter.project_slug}}/src/pages/Home.js index 74febe2..2cc22dc 100644 --- a/{{cookiecutter.project_slug}}/src/pages/Home.js +++ b/{{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 ( - +
@@ -16,5 +16,4 @@ export default function Home({ siteName, theme }) { Home.propTypes = { siteName: PropTypes.string.isRequired, - theme: PropTypes.object.isRequired, }