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.1",
     "@sensenet/query": "^1.2.0",
     "@sensenet/search-react": "^1.5.1",
+    "@sensenet/universal-header-react": "^1.0.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0"
   },
@@ -65,8 +66,8 @@
     "prop-types": "^15.7.2",
     "react-docgen-typescript-loader": "^3.7.1",
     "regenerator-runtime": "^0.13.7",
-    "ts-loader": "^8.0.17",
+    "ts-loader": "8.0.14",
     "uuid": "^8.3.2",
-    "webpack": "^5.24.1"
+    "webpack": "^4.44.2"
   }
 }

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"
+        threeDotMenuItems={
+          <>
+            <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