Universal header for example apps (#1231)

* implement header

* make threedotmenu optional

* fix styles

* fix style again

* fix height

* fix findings

* fix findings

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-react": "^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-react'
+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-react/.babelrc.js

@@ -0,0 +1,57 @@
+const { BABEL_ENV } = process.env
+const isBundling = BABEL_ENV === 'bundle'
+
+const sharedPresets = ['@babel/typescript', '@babel/preset-react']
+
+const shared = {
+  presets: sharedPresets,
+  plugins: [],
+}
+
+!isBundling && shared.plugins.push('@babel/plugin-transform-runtime')
+
+module.exports = {
+  env: {
+    esm: {
+      ...shared,
+      presets: [
+        [
+          '@babel/env',
+          {
+            targets: 'chrome 79, last 1 edge version, last 1 safari version, last 1 firefox version, node 14',
+            modules: false,
+          },
+        ],
+        ...sharedPresets,
+      ],
+      plugins: [...shared.plugins, 'babel-plugin-add-import-extension'],
+    },
+    bundle: {
+      ...shared,
+      presets: [
+        [
+          '@babel/env',
+          {
+            targets: '> 0.5%, last 2 versions, not dead, not IE 11',
+          },
+        ],
+        ...sharedPresets,
+      ],
+    },
+    cjs: {
+      ...shared,
+      presets: [
+        [
+          '@babel/env',
+          {
+            modules: 'commonjs',
+            targets: {
+              node: '10.0',
+            },
+          },
+        ],
+        ...sharedPresets,
+      ],
+    },
+  },
+}

packages/sn-universal-header-react/.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-react/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-react/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@sensenet/universal-header-react",
+  "version": "1.0.0",
+  "description": "A React component rendering a universal header.",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "exports": {
+    "require": "./dist/cjs/index.js",
+    "import": "./dist/esm/index.js"
+  },
+  "typings": "./dist/types/index.d.ts",
+  "scripts": {
+    "clean": "rimraf dist",
+    "fix:prettier": "prettier \"{,!(dist|temp|bundle)/**/}*.{ts,tsx}\" --write",
+    "dev": "npm-run-all -p \"build:types -w\" \"build:esm -w\"",
+    "build:release": "npm-run-all -p build:esm build:cjs build:bundles",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --extensions '.ts,.tsx' --out-dir 'dist/esm' --source-maps --copy-files",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --extensions '.ts,.tsx' --out-dir 'dist/cjs' --source-maps --copy-files",
+    "build:bundles": "cross-env BABEL_ENV=bundle rollup -c",
+    "build:types": "tsc -p tsconfig.json"
+  },
+  "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.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.13.9",
+    "clsx": "^1.1.1",
+    "tslib": "^2.1.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.13.0",
+    "@babel/core": "^7.13.13",
+    "@babel/plugin-transform-runtime": "^7.13.9",
+    "@babel/preset-env": "^7.13.5",
+    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "@material-ui/core": "^4.11.3",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@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",
+    "babel-plugin-add-import-extension": "^1.5.0",
+    "cross-env": "^7.0.3",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "enzyme-to-json": "^3.6.1",
+    "jest": "^26.6.1",
+    "npm-run-all": "^4.1.5",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "rollup": "^2.43.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-terser": "^7.0.2",
+    "ts-jest": "^26.5.2",
+    "typescript": "^4.1.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=10.0.0"
+  }
+}

packages/sn-universal-header-react/rollup.config.js

@@ -0,0 +1,37 @@
+import babel from '@rollup/plugin-babel'
+import resolve from '@rollup/plugin-node-resolve'
+import external from 'rollup-plugin-peer-deps-external'
+import { terser } from 'rollup-plugin-terser'
+
+const extensions = ['.ts', '.tsx']
+
+module.exports = {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: 'dist/bundle.esm.min.js',
+      format: 'esm',
+      plugins: [],
+    },
+    {
+      file: 'dist/bundle.min.js',
+      format: 'umd',
+      name: 'SnUniversalHeader',
+      globals: {
+        react: 'React',
+      },
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    external(),
+    resolve({ extensions }),
+    babel({
+      babelHelpers: 'bundled',
+      include: ['src/**/*.ts(x)?'],
+      extensions,
+      exclude: /node_modules/,
+    }),
+    terser(),
+  ],
+}