Merge pull request #311 from internetarchive/start-package-dir

New package: mobile-top-nav
internetarchive · Oct 8, 2019 · ac5e42d · ac5e42d
2 parents 43e633e + 51965c7
commit ac5e42d
Show file tree

Hide file tree

Showing 25 changed files with 17,933 additions and 49 deletions.
diff --git a/packages/mobile-top-nav/.eslintrc b/packages/mobile-top-nav/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:lit/recommended", "../../.eslintrc.json"]
+}
diff --git a/packages/mobile-top-nav/.gitignore b/packages/mobile-top-nav/.gitignore
@@ -0,0 +1,13 @@
+/node_modules/
+
+## testing
+/coverage/
+
+## temp folders
+/.tmp/
+
+# build
+/_site/
+/lib/
+
+*.log
diff --git a/packages/mobile-top-nav/.storybook/.babelrc b/packages/mobile-top-nav/.storybook/.babelrc
@@ -0,0 +1,15 @@
+{
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-object-rest-spread"
+  ],
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry",
+        "corejs": "2",
+      }
+    ]
+  ]
+}
diff --git a/packages/mobile-top-nav/.storybook/addons.js b/packages/mobile-top-nav/.storybook/addons.js
@@ -0,0 +1,7 @@
+import '@storybook/addon-a11y/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-storysource/register';
+import '@storybook/addon-viewport/register';
diff --git a/packages/mobile-top-nav/.storybook/config.js b/packages/mobile-top-nav/.storybook/config.js
@@ -0,0 +1,11 @@
+import { configure, addDecorator } from '@storybook/polymer';
+import { withA11y } from '@storybook/addon-a11y';
+import '@storybook/addon-console';
+
+const req = require.context('../stories', true, /\.stories\.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+addDecorator(withA11y);
+configure(loadStories, module);
diff --git a/packages/mobile-top-nav/.storybook/webpack.config.js b/packages/mobile-top-nav/.storybook/webpack.config.js
@@ -0,0 +1,5 @@
+const defaultConfig = require('@open-wc/demoing-storybook/default-storybook-webpack-config.js');
+
+module.exports = ({ config }) => {
+  return defaultConfig({ config, transpilePackages: ['lit-html', 'lit-element', '@open-wc'] });
+};
diff --git a/packages/mobile-top-nav/LICENSE b/packages/mobile-top-nav/LICENSE
diff --git a/packages/mobile-top-nav/README.md b/packages/mobile-top-nav/README.md
@@ -0,0 +1,86 @@
+# \<scrubber-bar>
+
+A customizable scrubber bar useful for scrubbing through media.
+
+
+## Installation
+```bash
+yarn add @internetarchive/mobile-top-nav
+```
+
+## Usage
+```js
+// ia-mobile-top-nav.js
+import IAMobileTopNav from '@internetarchive/mobile-top-nav';
+export default IAMobileTopNav;
+```
+
+```html
+<!-- index.html -->
+<script type="module">
+  import './ia-mobile-top-nav.js';
+</script>
+
+<style>
+  scrubber-bar {
+    --thumbColor: white;
+    --thumbBorder: 1px solid black;
+    --trackFillColor: blue;
+    --trackColor: purple;
+    --trackBorder: 1px solid black;
+    --trackBorderRadius: 5px;
+    --trackHeight: 10px;
+    --thumbDiameter: 20px;
+    --scrubberBarHeight: 20px;
+    --thumbBorderRadius: 10px;
+    --webkitThumbTopMargin: -6px;
+  }
+</style>
+
+<scrubber-bar id="scrubberbar"></scrubber-bar>
+
+<script>
+  const scrubberBar = document.getElementById('scrubberbar');
+
+  // listen for value changes
+  scrubberBar.addEventListener('valuechange', e => {
+    console.log('Value has changed, new value:', e.detail.value);
+  });
+
+  // set a different value
+  scrubberBar.value = 23;
+</script>
+
+```
+
+# Development
+
+## Prerequisite
+```bash
+yarn install
+```
+
+## Start Development Server
+```bash
+yarn start  // start development server and typescript compiler
+```
+
+## Testing
+```bash
+yarn test
+```
+
+## Testing via browserstack
+```bash
+yarn test:bs
+```
+
+## Demoing using storybook
+```bash
+yarn storybook
+```
+
+## Linting
+```bash
+yarn lint
+```
diff --git a/topnav/index.html → packages/mobile-top-nav/demo/index.html b/topnav/index.html → packages/mobile-top-nav/demo/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <script type="module" src="topnav-element.js"></script>
+    <script type="module" src="/src/topnav-element.js"></script>
     <title>topnav-element</title>
     <style>
       body {

diff --git a/packages/mobile-top-nav/index.js b/packages/mobile-top-nav/index.js
@@ -0,0 +1,3 @@
+import IAMobileTopNav from './src/topnav-element';
+
+export default IAMobileTopNav;
diff --git a/packages/mobile-top-nav/karma.bs.config.js b/packages/mobile-top-nav/karma.bs.config.js
@@ -0,0 +1,16 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const merge = require('webpack-merge');
+const bsSettings = require('@open-wc/testing-karma-bs/bs-settings.js');
+const createBaseConfig = require('./karma.conf.js');
+
+module.exports = config => {
+  config.set(
+    merge(bsSettings(config), createBaseConfig(config), {
+      browserStack: {
+        project: 'mobile-top-nav',
+      },
+    }),
+  );
+
+  return config;
+};
diff --git a/packages/mobile-top-nav/karma.conf.js b/packages/mobile-top-nav/karma.conf.js
@@ -0,0 +1,24 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const { createDefaultConfig } = require('@open-wc/testing-karma');
+const merge = require('webpack-merge');
+
+module.exports = config => {
+  config.set(
+    merge(createDefaultConfig(config), {
+      files: [
+        // runs all files ending with .test in the test folder,
+        // can be overwritten by passing a --grep flag. examples:
+        //
+        // npm run test -- --grep test/foo/bar.test.js
+        // npm run test -- --grep test/bar/*
+        { pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' },
+      ],
+
+      esm: {
+        nodeResolve: true,
+      },
+      // you can overwrite/extend the config further
+    }),
+  );
+  return config;
+};
diff --git a/packages/mobile-top-nav/package.json b/packages/mobile-top-nav/package.json
@@ -0,0 +1,70 @@
+{
+  "name": "@internetarchive/mobile-top-nav",
+  "version": "0.0.0",
+  "description": "Top Nav for Internet Archive that is optimized for the mobile experience",
+  "license": "AGPL-3.0-only",
+  "main": "index.js",
+  "module": "index.js",
+  "scripts": {
+    "start": "owc-dev-server --open ./demo/index.html",
+    "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
+    "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore",
+    "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
+    "format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore",
+    "lint": "npm run lint:eslint && npm run lint:prettier",
+    "format": "npm run format:eslint && npm run format:prettier",
+    "test": "npm run build && karma start --coverage",
+    "test:watch": "karma start --auto-watch=true --single-run=false",
+    "test:update-snapshots": "karma start --update-snapshots",
+    "test:prune-snapshots": "karma start --prune-snapshots",
+    "test:compatibility": "karma start --compatibility all --coverage",
+    "test:compatibility:watch": "karma start --compatibility all --auto-watch=true --single-run=false",
+    "test:bs": "karma start karma.bs.config.js --compatibility all --coverage",
+    "site:build": "npm run storybook:build",
+    "storybook": "start-storybook -p 9001",
+    "storybook:build": "build-storybook -o _site -s storybook-static"
+  },
+  "dependencies": {
+    "lit-element": "^2.2.1",
+    "lit-html": "^1.0.0"
+  },
+  "devDependencies": {
+    "@open-wc/demoing-storybook": "^0.3.0",
+    "@open-wc/eslint-config": "^1.0.0",
+    "@open-wc/polyfills-loader": "^0.2.1",
+    "@open-wc/prettier-config": "^0.1.10",
+    "@open-wc/testing": "^2.0.0",
+    "@open-wc/testing-karma": "^3.0.0",
+    "@open-wc/testing-karma-bs": "^1.0.0",
+    "owc-dev-server": "^0.1.2",
+    "@storybook/react": "^5.1.11",
+    "concurrently": "^4.1.2",
+    "es-dev-server": "^1.5.0",
+    "eslint": "^6.1.0",
+    "eslint-plugin-lit": "^0.5.0",
+    "gulp": "^4.0.2",
+    "husky": "^1.0.0",
+    "lint-staged": "^8.0.0",
+    "polymer-cli": "^1.9.11",
+    "webpack-merge": "^4.1.5"
+  },
+  "eslintConfig": {
+    "extends": [
+      "@open-wc/eslint-config",
+      "eslint-config-prettier"
+    ]
+  },
+  "prettier": "@open-wc/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "prettier --write",
+      "git add"
+    ]
+  }
+}
diff --git a/topnav/assets/img/hamburger.js → ...obile-top-nav/src/assets/img/hamburger.js b/topnav/assets/img/hamburger.js → ...obile-top-nav/src/assets/img/hamburger.js
@@ -1,7 +1,6 @@
 import { LitElement, html } from 'lit-element';
 
 class HamBurger extends LitElement {
-
   static get properties() {
     return {
       colour: { type: String }

diff --git a/topnav/assets/img/ia-logo.svg → ...mobile-top-nav/src/assets/img/ia-logo.svg b/topnav/assets/img/ia-logo.svg → ...mobile-top-nav/src/assets/img/ia-logo.svg
diff --git a/topnav/assets/img/media-menu-images.js → ...p-nav/src/assets/img/media-menu-images.js b/topnav/assets/img/media-menu-images.js → ...p-nav/src/assets/img/media-menu-images.js
diff --git a/topnav/assets/img/search.js → ...s/mobile-top-nav/src/assets/img/search.js b/topnav/assets/img/search.js → ...s/mobile-top-nav/src/assets/img/search.js
@@ -1,7 +1,6 @@
 import { LitElement, html } from 'lit-element';
 
 class Search extends LitElement {
-
   static get properties() {
     return {
       colour: { type: String }

diff --git a/topnav/assets/img/user.js → ...ges/mobile-top-nav/src/assets/img/user.js b/topnav/assets/img/user.js → ...ges/mobile-top-nav/src/assets/img/user.js
@@ -1,7 +1,6 @@
 import { LitElement, html } from 'lit-element';
 
 class User extends LitElement {
-
   static get properties() {
     return {
       colour: { type: String }

diff --git a/topnav/media-menu.js → packages/mobile-top-nav/src/media-menu.js b/topnav/media-menu.js → packages/mobile-top-nav/src/media-menu.js
@@ -4,7 +4,6 @@ import './media-slider';
 import './assets/img/media-menu-images';
 
 class MediaMenu extends LitElement {
-
   static get properties() {
     return {
       mediaMenuOpen: { type: Boolean },

diff --git a/topnav/media-slider.js → packages/mobile-top-nav/src/media-slider.js b/topnav/media-slider.js → packages/mobile-top-nav/src/media-slider.js
@@ -1,7 +1,6 @@
 import { LitElement, html, css } from 'lit-element';
 
 class MediaSlider extends LitElement {
-
   static get properties() {
     return {
       mediaSliderOpen: { type: Boolean },
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import IAMobileTopNav from './src/topnav-element';

		export default IAMobileTopNav;