Merge pull request #12 from commitd/sh-develop

Author: stuarthendren

.gitignore

@@ -6,3 +6,4 @@ node_modules
 .rts2_cache_esm
 .rts2_cache_umd
 dist
+.vscode

example/package.json

@@ -24,6 +24,6 @@
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.8.4",
     "parcel": "^1.12.3",
-    "typescript": "^3.8.3"
+    "typescript": "^4.0.5"
   }
 }

example/yarn.lock

@@ -1345,9 +1345,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001043:
-  version "1.0.30001048"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001048.tgz#4bb4f1bc2eb304e5e1154da80b93dee3f1cf447e"
-  integrity sha512-g1iSHKVxornw0K8LG9LLdf+Fxnv7T1Z+mMsf0/YYLclQX4Cd522Ap0Lrw6NFqHgezit78dtyWxzlV2Xfc7vgRg==
+  version "1.0.30001156"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001156.tgz"
+  integrity sha512-z7qztybA2eFZTB6Z3yvaQBIoJpQtsewRD74adw2UbRWwsRq3jIPvgrQGawBMbfafekQaD21FWuXNcywtTDGGCw==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -5002,10 +5002,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^3.8.3:
-  version "3.8.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
-  integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
+typescript@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389"
+  integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==
 
 uncss@^0.17.2:
   version "0.17.3"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@committed/layout",
-  "version": "2.1.1",
+  "version": "4.0.0",
   "description": "Committed layout library",
   "author": "Committed",
   "license": "MIT",
@@ -29,8 +29,9 @@
     "deploy-storybook": "storybook-to-ghpages"
   },
   "peerDependencies": {
-    "@committed/components": ">=3.0.2",
+    "@committed/components": ">=4.0.0",
     "@material-ui/core": "4.x",
+    "@material-ui/icons": "4.x",
     "react": ">=16"
   },
   "husky": {
@@ -57,6 +58,7 @@
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
     "babel-loader": "^8.1.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "husky": "^4.2.5",
     "lorem-ipsum": "^2.0.3",
     "prettier": "^2.0.5",
@@ -65,8 +67,8 @@
     "react-dom": "^16.13.1",
     "react-is": "^16.13.1",
     "ts-loader": "^7.0.2",
-    "tsdx": "^0.13.2",
-    "tslib": "^1.11.1",
-    "typescript": "^3.8.3"
+    "tsdx": "^0.14.1",
+    "tslib": "^2.0.3",
+    "typescript": "^4.0.5"
   }
 }

src/Header.tsx

@@ -1,16 +1,16 @@
-import React, { ReactNode, CSSProperties } from 'react'
-import { PropTypes } from '@material-ui/core'
 import {
   AppBar,
-  Toolbar,
   IconButton,
-  Icons,
+  IconButtonProps,
   makeStyles,
-  useTheme,
+  Toolbar,
   ToolbarProps,
-  IconButtonProps,
+  useTheme,
 } from '@committed/components'
+import { PropTypes } from '@material-ui/core'
 import useScrollTrigger from '@material-ui/core/useScrollTrigger'
+import React, { CSSProperties, ReactNode } from 'react'
+import { Icons } from './Icons'
 import { useLayout } from './Root'
 import { Layout, Position } from './types'
 

src/Icons.tsx

@@ -0,0 +1,18 @@
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'
+import ChevronLeft from '@material-ui/icons/ChevronLeftSharp'
+import ChevronRight from '@material-ui/icons/ChevronRightSharp'
+import Menu from '@material-ui/icons/MenuSharp'
+
+export type { SvgIconProps as IconProps }
+type SvgIconComponent = typeof SvgIcon
+
+/**
+ * Icons component exports relevant icons for the project
+ */
+export const Icons: {
+  [key: string]: SvgIconComponent
+} = {
+  ChevronLeft,
+  ChevronRight,
+  Menu,
+}

stories/Example.tsx

@@ -3,11 +3,11 @@ import {
   Card,
   Container,
   IconButton,
-  Icons,
   List,
   ThemeProvider,
   Typography,
 } from '@committed/components'
+import AccountCircle from '@material-ui/icons/AccountCircleSharp'
 import { LoremIpsum } from 'lorem-ipsum'
 import React, { FC, ReactNode } from 'react'
 import {
@@ -53,26 +53,14 @@ export const Example: FC<{
           <Typography variant="h5">Application Name</Typography>
           <Box flexGrow={1} />
           <IconButton color="inherit">
-            <Icons.AccountCircle />
+            <AccountCircle />
           </IconButton>
         </Header>
         <Nav collapseIcon={collapseIcon} expandIcon={expandIcon}>
           <List>
-            <NavListItem
-              key="1"
-              text="Menu Item 1"
-              icon={<Icons.AccountCircle />}
-            />
-            <NavListItem
-              key="2"
-              text="Menu Item 2"
-              icon={<Icons.AccountCircle />}
-            />
-            <NavListItem
-              key="3"
-              text="Menu Item 3"
-              icon={<Icons.AccountCircle />}
-            />
+            <NavListItem key="1" text="Menu Item 1" icon={<AccountCircle />} />
+            <NavListItem key="2" text="Menu Item 2" icon={<AccountCircle />} />
+            <NavListItem key="3" text="Menu Item 3" icon={<AccountCircle />} />
           </List>
         </Nav>
         <Content>

stories/Icons.stories.tsx

@@ -1,5 +1,8 @@
+import { Typography } from '@committed/components'
+import Check from '@material-ui/icons/CheckSharp'
+import FormatAlignJustify from '@material-ui/icons/FormatAlignJustifySharp'
+import KeyboardBackspace from '@material-ui/icons/KeyboardBackspaceSharp'
 import React from 'react'
-import { Typography, Icons } from '@committed/components'
 import { Example } from './Example'
 
 export const SuppliedIcons = () => {
@@ -12,9 +15,9 @@ export const SuppliedIcons = () => {
           required Try changing the size of your window.
         </Typography>
       }
-      closeMenuIcon={<Icons.KeyboardBackspace />}
-      openMenuIcon={<Icons.FormatAlignJustify />}
-      collapseIcon={<Icons.Check />}
+      closeMenuIcon={<KeyboardBackspace />}
+      openMenuIcon={<FormatAlignJustify />}
+      collapseIcon={<Check />}
       expandIcon={<Typography>></Typography>}
     />
   )

stories/Nav.stories.tsx

@@ -1,12 +1,17 @@
+import { Divider, List, ThemeProvider, Typography } from '@committed/components'
+import Backup from '@material-ui/icons/BackupSharp'
+import Clear from '@material-ui/icons/ClearSharp'
+import Delete from '@material-ui/icons/DeleteSharp'
+import Folder from '@material-ui/icons/FolderSharp'
+import Forward from '@material-ui/icons/ForwardSharp'
+import OfflinePin from '@material-ui/icons/OfflinePinSharp'
+import People from '@material-ui/icons/PeopleSharp'
+import Publish from '@material-ui/icons/PublishSharp'
+import Schedule from '@material-ui/icons/ScheduleSharp'
+import Settings from '@material-ui/icons/SettingsSharp'
+import Star from '@material-ui/icons/StarSharp'
 import React from 'react'
-import { Root, Nav, NavListItem } from '../src'
-import {
-  ThemeProvider,
-  Typography,
-  Icons,
-  List,
-  Divider,
-} from '@committed/components'
+import { Nav, NavListItem, Root } from '../src'
 
 export const Use = () => {
   return (
@@ -29,7 +34,7 @@ export const CustomIcons = () => {
   return (
     <ThemeProvider>
       <Root fullscreen={false} style={{ minHeight: '50vh' }}>
-        <Nav collapseIcon={<Icons.Clear />} expandIcon={<Icons.Forward />}>
+        <Nav collapseIcon={<Clear />} expandIcon={<Forward />}>
           <Typography>This is the Nav</Typography>
         </Nav>
       </Root>
@@ -41,35 +46,35 @@ export const WithContent = () => {
   const list = [
     {
       primaryText: 'My Files',
-      icon: <Icons.Folder />,
+      icon: <Folder />,
     },
     {
       primaryText: 'Shared with me',
-      icon: <Icons.People />,
+      icon: <People />,
     },
     {
       primaryText: 'Starred',
-      icon: <Icons.Star />,
+      icon: <Star />,
     },
     {
       primaryText: 'Recent',
-      icon: <Icons.Schedule />,
+      icon: <Schedule />,
     },
     {
       primaryText: 'Offline',
-      icon: <Icons.OfflinePin />,
+      icon: <OfflinePin />,
     },
     {
       primaryText: 'Uploads',
-      icon: <Icons.Publish />,
+      icon: <Publish />,
     },
     {
       primaryText: 'Backups',
-      icon: <Icons.Backup />,
+      icon: <Backup />,
     },
     {
       primaryText: 'Trash',
-      icon: <Icons.Delete />,
+      icon: <Delete />,
     },
   ]
   return (
@@ -86,10 +91,7 @@ export const WithContent = () => {
               />
             ))}
             <Divider style={{ margin: '12px 0' }} />
-            <NavListItem
-              icon={<Icons.Settings />}
-              text={'Settings & account'}
-            />
+            <NavListItem icon={<Settings />} text={'Settings & account'} />
           </List>
         </Nav>
       </Root>

stories/NavListItem.stories.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import { Root, Header, Nav, NavListItem } from '../src'
-import { ThemeProvider, Icons, List } from '@committed/components'
+import People from '@material-ui/icons/PeopleSharp'
+import { ThemeProvider, List } from '@committed/components'
 
 export const Use = () => {
   return (
     <ThemeProvider>
       <Root fullscreen={false} style={{ minHeight: '50vh' }}>
         <Nav>
           <List>
-            <NavListItem icon={<Icons.People />} text="Shared with me" />
+            <NavListItem icon={<People />} text="Shared with me" />
           </List>
         </Nav>
       </Root>
@@ -27,8 +28,8 @@ export const Selected = () => {
       <Root fullscreen={false} style={{ minHeight: '50vh' }}>
         <Nav>
           <List>
-            <NavListItem icon={<Icons.People />} text="Selected" selected />
-            <NavListItem icon={<Icons.People />} text="Unselected" />
+            <NavListItem icon={<People />} text="Selected" selected />
+            <NavListItem icon={<People />} text="Unselected" />
           </List>
         </Nav>
       </Root>
@@ -47,8 +48,8 @@ export const CloseTemporary = () => {
         <Header />
         <Nav>
           <List>
-            <NavListItem icon={<Icons.People />} text="Selected" selected />
-            <NavListItem icon={<Icons.People />} text="Unselected" />
+            <NavListItem icon={<People />} text="Selected" selected />
+            <NavListItem icon={<People />} text="Unselected" />
           </List>
         </Nav>
       </Root>
@@ -69,13 +70,13 @@ export const ClosePersistent = () => {
           <List>
             <NavListItem
               closeFor={['persistent']}
-              icon={<Icons.People />}
+              icon={<People />}
               text="Selected"
               selected
             />
             <NavListItem
               closeFor={['persistent']}
-              icon={<Icons.People />}
+              icon={<People />}
               text="Unselected"
             />
           </List>
@@ -96,8 +97,8 @@ export const LeavePersistent = () => {
         <Header />
         <Nav>
           <List>
-            <NavListItem icon={<Icons.People />} text="Selected" selected />
-            <NavListItem icon={<Icons.People />} text="Unselected" />
+            <NavListItem icon={<People />} text="Selected" selected />
+            <NavListItem icon={<People />} text="Unselected" />
           </List>
         </Nav>
       </Root>