Universal header for example apps

examples/sn-react-component-docs/notes/universal-header/UniversalHeader.md

@@ -0,0 +1,8 @@
+### Universal header
+
+Universal header was created to standardize our exmaple apps. This header can be used by anyone.
+It has three main parts:
+
+- Hamburger menu (with links of our main documentation and helper stuff)
+- Title (can be overwritten)
+- Three-dot menu (can be a custom menu for your app)

examples/sn-react-component-docs/package.json

@@ -39,6 +39,7 @@
     "@sensenet/pickers-react": "^2.0.2",
     "@sensenet/query": "^2.0.0",
     "@sensenet/search-react": "^2.0.0",
+    "@sensenet/universal-header": "^1.0.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0"
   },

examples/sn-react-component-docs/stories/universal-header.stories.tsx

@@ -0,0 +1,25 @@
+import { UniversalHeader } from '@sensenet/universal-header'
+import { withKnobs } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+import universalHeaderNotes from '../notes/universal-header/UniversalHeader.md'
+
+storiesOf('Universal components', module)
+  .addDecorator(withKnobs)
+  .add(
+    'Universal header',
+    () => (
+      <UniversalHeader
+        title="Universal header"
+        renderThreeDotMenuItems={
+          <>
+            <div style={{ padding: '6px 16px ' }}>Example menu item</div>
+            <div style={{ padding: '6px 16px' }}>Another example menu item</div>
+          </>
+        }
+      />
+    ),
+    {
+      notes: { markdown: universalHeaderNotes },
+    },
+  )

packages/sn-universal-header/.gitignore

@@ -0,0 +1,71 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# build
+dist
+
+node_modules
+coverage
+documentation
+npm-debug.log
+debug.log
+dist
+.nyc_output
+package-lock.json
+temp

packages/sn-universal-header/README.md

@@ -0,0 +1,8 @@
+# @sensenet/universal-header-react
+
+Universal header was created to standardize our exmaple apps. This header can be used by anyone.
+It has three main parts:
+
+- Hamburger menu (with links of our main documentation and helper stuff)
+- Title (can be overwritten)
+- Three-dot menu (can be a custom menu for your app)

packages/sn-universal-header/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@sensenet/universal-header",
+  "version": "1.0.0",
+  "description": "A React component rendering a universal header.",
+  "main": "dist/index.js",
+  "typings": "./dist/index.d.ts",
+  "scripts": {
+    "fix:prettier": "prettier \"{,!(dist|temp|bundle)/**/}*.{ts,tsx}\" --write",
+    "build": "tsc -b"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SenseNet/sn-client.git"
+  },
+  "keywords": [
+    "sensenet",
+    "cms",
+    "csp",
+    "react",
+    "reactjs",
+    "icons",
+    "components"
+  ],
+  "author": "Sense/Net <snteam@sensenet.com> (http://sensenet.com/)",
+  "license": "GPL-2.0",
+  "bugs": {
+    "url": "https://github.com/SenseNet/sn-client/issues"
+  },
+  "homepage": "https://sensenet.com",
+  "peerDependencies": {
+    "@material-ui/core": "^4.11.3",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "clsx": "^1.1.1",
+    "tslib": "^2.1.0"
+  },
+  "devDependencies": {
+    "@material-ui/core": "^4.11.3",
+    "@types/enzyme": "^3.10.7",
+    "@types/jest": "^26.0.20",
+    "@types/node": "^14.14.31",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "enzyme-to-json": "^3.6.1",
+    "jest": "^26.6.1",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "ts-jest": "^26.5.2",
+    "typescript": "^4.1.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/sn-universal-header/src/components/hamburger-menu.tsx

@@ -0,0 +1,121 @@
+import {
+  ClickAwayListener,
+  createStyles,
+  IconButton,
+  Link,
+  makeStyles,
+  MenuItem,
+  MenuList,
+  Paper,
+  Theme,
+} from '@material-ui/core'
+import { Menu as MenuIcon, MenuOpen as MenuOpenIcon } from '@material-ui/icons'
+import React, { useEffect, useRef, useState } from 'react'
+import { HEADER_HEIGHT } from '.'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    iconButton: {
+      padding: 0,
+      '&:hover': {
+        background: 'none',
+      },
+    },
+    menuIcon: {
+      color: theme.palette.common.white,
+      marginRight: '20px',
+      '&:hover': {
+        color: '#a49ec5',
+      },
+    },
+    menuIconActive: {
+      marginRight: '20px',
+      color: '#a49ec5',
+    },
+    popperWrapper: {
+      position: 'absolute',
+      top: HEADER_HEIGHT,
+      left: 0,
+      width: 'auto',
+      backgroundColor: '#F6F6F6',
+      border: '1px solid #E2E2E2',
+    },
+    menuItem: {
+      textDecoration: 'underline',
+      color: theme.palette.primary.main,
+      fontSize: '14px',
+    },
+  }),
+)
+
+export type HamburgerMenuClassKey = Partial<ReturnType<typeof useStyles>>
+
+interface HamburgerMenuProps {
+  classes?: HamburgerMenuClassKey
+}
+
+export const HamburgerMenu: React.FunctionComponent<HamburgerMenuProps> = (props) => {
+  const classes = useStyles(props)
+
+  const anchorRef = useRef<HTMLButtonElement>(null)
+  const [isPopperOpen, setIsPopperOpen] = useState(false)
+
+  const handleToggle = () => {
+    setIsPopperOpen((prevOpen) => !prevOpen)
+  }
+
+  const handleClose = (event: React.MouseEvent<EventTarget>) => {
+    if (anchorRef.current?.contains(event.target as HTMLElement)) {
+      return
+    }
+
+    setIsPopperOpen(false)
+  }
+
+  const prevOpen = useRef(isPopperOpen)
+  useEffect(() => {
+    if (prevOpen.current === true && isPopperOpen === false) {
+      anchorRef.current!.focus()
+    }
+
+    prevOpen.current = isPopperOpen
+  }, [isPopperOpen])
+
+  return (
+    <div>
+      <IconButton className={classes.iconButton} onClick={handleToggle} ref={anchorRef}>
+        {isPopperOpen ? <MenuOpenIcon className={classes.menuIconActive} /> : <MenuIcon className={classes.menuIcon} />}
+      </IconButton>
+      {isPopperOpen ? (
+        <Paper className={classes.popperWrapper}>
+          <ClickAwayListener onClickAway={handleClose}>
+            <MenuList autoFocusItem={isPopperOpen}>
+              <Link href="https://github.com/SenseNet/sn-client/tree/master/examples/sn-react-tasklist" target="_blank">
+                <MenuItem className={classes.menuItem}>View source on github</MenuItem>
+              </Link>
+              <Link
+                href="https://docs.sensenet.com/tutorials/getting-started/getting-started-with-react"
+                target="_blank">
+                <MenuItem className={classes.menuItem}>Develop your application</MenuItem>
+              </Link>
+              <Link href="https://docs.sensenet.com/" target="_blank">
+                <MenuItem className={classes.menuItem}>sensenet documentation</MenuItem>
+              </Link>
+              <Link href="https://docs.sensenet.com/example-apps" target="_blank">
+                <MenuItem className={classes.menuItem}>More examples</MenuItem>
+              </Link>
+              <Link
+                href="https://is.sensenet.com/Account/Registration?returnUrl=%2Fconnect%2Fauthorize%2Fcallback%3Fclient_id%3Dspa%26redirect_uri%3Dhttps%253A%252F%252Fprofile.sensenet.com%252Fauthentication%252Fcallback%26response_type%3Dcode%26scope%3Dopenid%2520profile%2520sensenet%26state%3D10ff2f66ac7f4a4da1436832a10cdc83%26code_challenge%3DU4n_OVI0Q6zg3PRutc_bsOr6txMXZRSSzkwbWCiqnuo%26code_challenge_method%3DS256%26response_mode%3Dquery%26snrepo%3Dhttps%253A%252F%252Fsnover.service.sensenet.com"
+                target="_blank">
+                <MenuItem className={classes.menuItem}>Get your own repo</MenuItem>
+              </Link>
+              <Link href="https://www.sensenet.com/help-center" target="_blank">
+                <MenuItem className={classes.menuItem}>Help center</MenuItem>
+              </Link>
+            </MenuList>
+          </ClickAwayListener>
+        </Paper>
+      ) : null}
+    </div>
+  )
+}

packages/sn-universal-header/src/components/header.tsx

@@ -0,0 +1,55 @@
+import { AppBar, createStyles, makeStyles, Toolbar } from '@material-ui/core'
+import React from 'react'
+import { HamburgerMenu, HamburgerMenuClassKey } from './hamburger-menu'
+import { ThreeDotMenu, ThreeDotMenuClassKey } from './three-dot-menu'
+
+export const HEADER_HEIGHT = '64px'
+
+const useStyles = makeStyles(() => {
+  return createStyles({
+    appBar: {
+      height: HEADER_HEIGHT,
+      backgroundColor: '#342cac',
+      boxShadow: 'none',
+    },
+    toolBar: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      height: '100%',
+      paddingRight: 0,
+      paddingLeft: '20px',
+    },
+    hamburgerAndTitleContainer: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+  })
+})
+
+type UniversalHeaderClassKey = Partial<ReturnType<typeof useStyles>>
+
+interface UniversalHeaderProps {
+  title: string
+  renderThreeDotMenuItems?: React.ReactNode
+  classes?: UniversalHeaderClassKey
+  hamburgerMenuClasses?: HamburgerMenuClassKey
+  threeDotMenuClasses?: ThreeDotMenuClassKey
+}
+
+export const UniversalHeader: React.FunctionComponent<UniversalHeaderProps> = (props) => {
+  const classes = useStyles(props)
+
+  return (
+    <AppBar position="sticky" className={classes.appBar}>
+      <Toolbar className={classes.toolBar}>
+        <div className={classes.hamburgerAndTitleContainer}>
+          <HamburgerMenu classes={props.hamburgerMenuClasses} />
+          <div>{props.title}</div>
+        </div>
+        {props.renderThreeDotMenuItems && (
+          <ThreeDotMenu classes={props.threeDotMenuClasses} menuItems={props.renderThreeDotMenuItems} />
+        )}
+      </Toolbar>
+    </AppBar>
+  )
+}

packages/sn-universal-header/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './hamburger-menu'
+export * from './header'
+export * from './three-dot-menu'