feat(layout): grid layout and svg icon support

packages/poolbase-app/design-system/components/index.tsx

@@ -0,0 +1 @@
+

packages/poolbase-app/package.json

@@ -48,8 +48,10 @@
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
     "@types/theme-ui": "^0.3.0",
+    "@types/theme-ui__components": "^0.2.3",
     "@typescript-eslint/eslint-plugin": "^2.19.1",
     "@typescript-eslint/parser": "^2.19.1",
+    "babel-plugin-inline-react-svg": "^1.1.1",
     "cpx": "1.5.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.9.0",

packages/poolbase-app/src/app/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["inline-react-svg"]
+}

packages/poolbase-app/src/app/components/Header.tsx

@@ -1,8 +1,11 @@
-import React from 'react';
-import { useColorMode } from 'theme-ui';
+/** @jsx jsx */
+import { jsx, IconButton, useColorMode } from 'theme-ui';
 import Router from 'next/router';
+
 import { AuthUser } from '../interfaces';
 import logout from '../utils/auth/logout';
+import Moon from '../../../../design-system/assets/svg/moon.svg';
+import Sun from '../../../../design-system/assets/svg/sun.svg';
 
 interface PropsWithAuthUser {
   AuthUser: AuthUser;
@@ -11,8 +14,14 @@ interface PropsWithAuthUser {
 export default function Header({ AuthUser }: PropsWithAuthUser): JSX.Element {
   const [colorMode, setColorMode] = useColorMode();
   return (
-    <header>
-      <p>You're signed in. Email: {AuthUser.email}</p>
+    <header
+      sx={{
+        bg: 'grayDark',
+      }}
+    >
+      <p sx={{
+        color: 'white',
+      }}>You're signed in. Email: {AuthUser.email}</p>
       <p
         style={{
           display: 'inlinelock',
@@ -31,9 +40,11 @@ export default function Header({ AuthUser }: PropsWithAuthUser): JSX.Element {
       >
         Log out
       </p>
-      <button onClick={(): void => setColorMode(colorMode === 'light' ? 'dark' : 'light')}>
-        Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
-      </button>
+      <IconButton sx={{
+        color: 'white',
+      }} onClick={(): void => setColorMode(colorMode === 'light' ? 'dark' : 'light')} aria-label={`Toggle ${colorMode === 'light' ? 'Dark' : 'Light'}`}>
+        {colorMode === 'light' ? <Moon /> : <Sun />}
+      </IconButton>
     </header>
   );
 }

packages/poolbase-app/src/app/components/PageLayout.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+/** @jsx jsx */
+import { jsx, Grid } from 'theme-ui';
 import { get } from 'lodash/object';
 import { NextPage } from 'next';
 import { PropsWithAuthUserInfo } from '../interfaces';
@@ -11,8 +12,9 @@ const PageLayout: NextPage<PropsWithAuthUserInfo> = (
 ): JSX.Element => {
   const { AuthUserInfo, children } = props;
   const AuthUser = get(AuthUserInfo, 'AuthUser', null);
+
   return (
-    <div>
+    <>
       {!AuthUser ? (
         <div>
           <p>Sign in</p>
@@ -21,12 +23,18 @@ const PageLayout: NextPage<PropsWithAuthUserInfo> = (
           </div>
         </div>
       ) : (
-        <div>
+        <Grid
+          gap={0}
+          columns={[0, '200px 1fr']}
+          sx={{
+            height: '100%',
+          }}
+        >
           <Header AuthUser={AuthUser} />
           <div>{children}</div>
-        </div>
+        </Grid>
       )}
-    </div>
+    </>
   );
 };
 

packages/poolbase-app/src/app/pages/_app.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import App from 'next/app';
 import { ThemeProvider } from 'theme-ui';
 
-import theme from '../theme';
+import theme from '../../../design-system/theme';
 
 class MyApp extends App {
   public render(): JSX.Element {

packages/poolbase-app/src/app/pages/_document.tsx

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 /* eslint react/no-danger: 0 */
-import React from 'react';
+import { jsx } from 'theme-ui';
 import { get } from 'lodash/object';
 import Document, { DocumentContext, Html, Head, Main, NextScript, DocumentInitialProps } from 'next/document';
 
@@ -31,7 +32,11 @@ export default class CustomDocument extends Document<CustomDocumentProps> {
     // Alternatively, you could use a store, like Redux.
     const { AuthUserInfo } = this.props;
     return (
-      <Html>
+      <Html
+        sx={{
+          height: '100%',
+        }}
+      >
         <Head>
           <script
             id="__MY_AUTH_USER_INFO"
@@ -41,7 +46,14 @@ export default class CustomDocument extends Document<CustomDocumentProps> {
             }}
           />
         </Head>
-        <body>
+        <body
+          sx={{
+            height: '100%',
+            '& > div': {
+              height: '100%',
+            }
+          }}
+        >
           <Main />
           <NextScript />
         </body>

packages/poolbase-app/src/app/types/svg.d.ts

@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import React = require('react');
+  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}

packages/poolbase-app/src/app/types/theme-ui/index.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { IntrinsicSxElements, SxProps, BoxProps, ResponsiveValue } from 'theme-ui';
+
+declare module 'theme-ui' {
+  type SxComponent<T extends SxProps = IntrinsicSxElements['div']> = React.ComponentElement<
+    T & { as?: React.ElementType }
+  >;
+  const Button: SxComponent;
+  const Box: SxComponent;
+  interface IntrinsicSxElements {
+    span: JSX.IntrinsicElements['span'] & SxProps;
+  }
+  export interface GridProps extends BoxProps {
+    /**
+     * Minimum width of child elements
+     */
+    width?: ResponsiveValue<string | number>;
+    /**
+     * 	Number of columns to use for the layout (cannot be used in conjunction with the width prop)
+     */
+    columns?: ResponsiveValue<string | number>;
+    /**
+     * Space between child elements
+     */
+    gap?: ResponsiveValue<string | number>;
+  }
+  export const Grid: ForwardRef<HTMLDivElement, GridProps>;
+}

packages/poolbase-app/yarn.lock

@@ -289,7 +289,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.7.2", "@babel/parser@^7.8.6", "@babel/parser@^7.9.0":
+"@babel/parser@^7.0.0", "@babel/parser@^7.7.2", "@babel/parser@^7.8.6", "@babel/parser@^7.9.0":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
   integrity sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==
@@ -1749,7 +1749,7 @@
     "@types/theme-ui__components" "*"
     csstype "^2.6.6"
 
-"@types/theme-ui__components@*":
+"@types/theme-ui__components@*", "@types/theme-ui__components@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@types/theme-ui__components/-/theme-ui__components-0.2.3.tgz#470c286375f5177d2607f34da4b38c315e66907c"
   integrity sha512-g0q3IpJxDXPQvWhaVSXJroB74dxD6HAHAfCbb3unV7iaoovrLact1Yxan5cDRMqHf8d7ub3JAvpSmGSdlNJ5OQ==
@@ -2362,6 +2362,17 @@ babel-plugin-emotion@^10.0.27:
     find-root "^1.1.0"
     source-map "^0.5.7"
 
+babel-plugin-inline-react-svg@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-inline-react-svg/-/babel-plugin-inline-react-svg-1.1.1.tgz#3fce30c5653a6c032c21ccc2b3e0141cd494b1d8"
+  integrity sha512-KCCzSKJUigDXd/dxJDE6uNyVTYE46FiTt8Md3vpYHtbADeTjOLJq5LkmaVpISplxKCK25VZU8sha2Km6uIEFJA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/parser" "^7.0.0"
+    lodash.isplainobject "^4.0.6"
+    resolve "^1.10.0"
+    svgo "^0.7.2"
+
 babel-plugin-macros@^2.0.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
@@ -2844,6 +2855,13 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+clap@^1.0.9:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51"
+  integrity sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==
+  dependencies:
+    chalk "^1.1.3"
+
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -2901,6 +2919,13 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+coa@~1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.4.tgz#a9ef153660d6a86a8bdec0289a5c684d217432fd"
+  integrity sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=
+  dependencies:
+    q "^1.1.2"
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@@ -2931,6 +2956,11 @@ colors@1.2.5:
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.2.5.tgz#89c7ad9a374bc030df8013241f68136ed8835afc"
   integrity sha512-erNRLao/Y3Fv54qUa0LBB+//Uf3YwMUmdJinN20yMXm9zdKKqH9wt7R9IIVZ+K7ShzfpLV/Zg8+VyrBJYB4lpg==
 
+colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+  integrity sha1-FopHAXVran9RoSzgyXv6KMCE7WM=
+
 colour@~0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/colour/-/colour-0.7.1.tgz#9cb169917ec5d12c0736d3e8685746df1cadf778"
@@ -3342,6 +3372,14 @@ cssnano-simple@1.0.0:
     cssnano-preset-simple "^1.0.0"
     postcss "^7.0.18"
 
+csso@~2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
+  integrity sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=
+  dependencies:
+    clap "^1.0.9"
+    source-map "^0.5.3"
+
 csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.6, csstype@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
@@ -3932,6 +3970,11 @@ espree@^6.1.2:
     acorn-jsx "^5.1.0"
     eslint-visitor-keys "^1.1.0"
 
+esprima@^2.6.0:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+  integrity sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=
+
 esprima@^4.0.0, esprima@~4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
@@ -5473,6 +5516,14 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+js-yaml@~3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
+  integrity sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -6113,7 +6164,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.4:
+mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.4, mkdirp@~0.5.1:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.4.tgz#fd01504a6797ec5c9be81ff43d204961ed64a512"
   integrity sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==
@@ -7549,6 +7600,11 @@ puppeteer@^2.1.1:
     rimraf "^2.6.1"
     ws "^6.1.0"
 
+q@^1.1.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
+
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
@@ -8020,7 +8076,7 @@ sass-loader@8.0.2:
     schema-utils "^2.6.1"
     semver "^6.3.0"
 
-sax@^1.2.4:
+sax@^1.2.4, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -8259,7 +8315,7 @@ source-map@0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
-source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -8586,6 +8642,19 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
+svgo@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
+  integrity sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=
+  dependencies:
+    coa "~1.0.1"
+    colors "~1.1.2"
+    csso "~2.3.1"
+    js-yaml "~3.7.0"
+    mkdirp "~0.5.1"
+    sax "~1.2.1"
+    whet.extend "~0.9.9"
+
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
@@ -9138,6 +9207,11 @@ whatwg-fetch@3.0.0, whatwg-fetch@>=0.10.0:
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
   integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
 
+whet.extend@~0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
+  integrity sha1-+HfVv2SMl+WqVC+twW1qJZucEaE=
+
 which-boxed-primitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"