@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/docs/themes/theme-default-fallbacks.scss

@@ -0,0 +1,17 @@
+@use "../../core/theme/_config.scss" with (
+  $primary: 'blue',
+  $secondary: 'pink',
+  $warn: 'red',
+  $background: 'gray',
+  $foreground: (#000, #fff),
+  $inks: ('primary', 'secondary', 'warn', 'amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal'),
+  $surfaces: ('primary', 'secondary', 'warn', 'background', 'amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal'),
+  $cssvars: false,
+);
+
+@use "./_component-themes.scss";
+
+:root {
+  font-family: Roboto, sans-serif;
+}
+

package/docs/themes/theme-default.scss

@@ -0,0 +1,17 @@
+@use "../../core/theme/_config.scss" with (
+  $primary: 'blue',
+  $secondary: 'pink',
+  $warn: 'red',
+  $background: 'gray',
+  $foreground: (#000, #fff),
+  $inks: ('primary', 'secondary', 'warn', 'amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal'),
+  $surfaces: ('primary', 'secondary', 'warn', 'background', 'amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal'),
+  $fallbacks: false,
+);
+
+@use "./_component-themes.scss";
+
+:root {
+  font-family: Roboto, sans-serif;
+}
+

package/jsconfig.json

@@ -1,8 +1,10 @@
 {
   "compilerOptions": {
     "checkJs": true,
-    "target": "es6",
-    "module": "es6"
+    "noImplicitAny": true,
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "Node",
   },
   "exclude": [
     "**/node_modules/*",

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@shortfuse/materialdesignweb",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Material Design for Web",
   "main": "index.js",
+  "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start:docs": "webpack-dev-server -w --env.target=docs --host 0.0.0.0",
-    "build:docs": "webpack --env.target=docs",
-    "stats:docs": "webpack --env.target=docs --profile --json > stats.json",
     "analyze:docs": "webpack-bundle-analyzer stats.json",
-    "dist": "webpack"
+    "build:docs": "webpack --config webpack.config.cjs --env target=docs",
+    "deploy:docs": "scripts/deploy-docs.sh",
+    "dist": "webpack",
+    "pretest": "eslint --ignore-path .gitignore .",
+    "start:docs": "webpack serve --config webpack.config.cjs --env target=docs --host 0.0.0.0",
+    "stats:docs": "webpack --config webpack.config.cjs --env target=docs --profile --json > stats.json",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
@@ -20,6 +23,9 @@
     "design",
     "web"
   ],
+  "exports": {
+    "./": "./"
+  },
   "author": "Carlos Lopez Jr. <clshortfuse@gmail.com> (https://shortfuse.org/)",
   "license": "ISC",
   "sideEffects": false,
@@ -28,26 +34,33 @@
   },
   "homepage": "https://github.com/clshortfuse/materialdesignweb#readme",
   "devDependencies": {
-    "@babel/preset-env": "^7.4.3",
-    "babel-loader": "^8.0.5",
-    "css-loader": "^2.1.1",
-    "cssnano": "^4.1.10",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-plugin-import": "^2.16.0",
-    "extract-loader": "^3.1.0",
-    "file-loader": "^3.0.1",
-    "html-loader": "^0.5.5",
-    "postcss-loader": "^3.0.0",
-    "pug-html-loader": "^1.1.5",
-    "sass-loader": "^7.1.0",
-    "stylelint": "^9.10.1",
-    "stylelint-config-recommended-scss": "^3.2.0",
-    "stylelint-config-sass-guidelines": "^5.3.0",
-    "stylelint-scss": "^3.5.4",
-    "webpack": "^4.29.6",
-    "webpack-bundle-analyzer": "^3.3.2",
-    "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.3.1"
+    "@babel/preset-env": "^7.12.1",
+    "@typescript-eslint/eslint-plugin": "5.7.0",
+    "@typescript-eslint/parser": "5.7.0",
+    "babel-loader": "^8.2.3",
+    "clean-css": "^5.2.2",
+    "css-loader": "^6.5.1",
+    "cssnano": "^5.0.14",
+    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-plugin-eta": "github:clshortfuse/eslint-plugin-eta",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsdoc": "^37.2.0",
+    "eta": "^1.12.0",
+    "extract-loader": "^5.1.0",
+    "fibers": "^5.0.0",
+    "file-loader": "^6.2.0",
+    "html-loader": "^1.3.2",
+    "postcss-loader": "^6.2.1",
+    "sass": "^1.27.0",
+    "sass-loader": "^12.4.0",
+    "stylelint": "^13.7.2",
+    "stylelint-config-recommended-scss": "^4.2.0",
+    "stylelint-config-sass-guidelines": "^7.1.0",
+    "stylelint-scss": "^3.18.0",
+    "typescript": "^4.5.4",
+    "webpack": "^5.4.0",
+    "webpack-bundle-analyzer": "^4.1.0",
+    "webpack-cli": "^4.2.0",
+    "webpack-dev-server": "^4.7.0"
   }
 }

package/scripts/deploy-docs.sh

@@ -0,0 +1,9 @@
+if [ -z $(git status --untracked-files=no --porcelain) ];
+then
+    git add dist/docs -f
+    git commit -m "Update Docs"
+    git push origin `git subtree split --prefix dist/docs master`:gh-pages --force
+    git reset HEAD~
+else
+    echo "Need clean working directory to publish"
+fi

package/templates/index.eta

@@ -0,0 +1,2 @@
+<% var entry = Object.keys(it)[0]; -%>
+<%~ includeFile(`../components/${entry}/index.eta`, it[entry]) -%>

package/utils/function.js

@@ -0,0 +1,3 @@
+/** @return {void} */
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export function noop() {}

package/webpack.config.cjs

@@ -0,0 +1,257 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const fs = require('fs');
+const path = require('path');
+
+const eta = require('eta');
+const sass = require('sass');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+const isProduction = (process.env.NODE_ENV === 'production');
+
+/** @typedef {import('webpack').Configuration} WebpackConfiguration */
+
+/**
+ * @param {Object<string,string>} env
+ * @return {Object}
+ */
+function getComponentsConfig(env) {
+  const DEST = (isProduction ? 'dist/full' : 'test/full');
+  return {
+    entry: {
+      materialdesignweb: [
+        path.resolve(__dirname, './index.js'),
+        path.resolve(__dirname, './index.scss'),
+      ],
+    },
+    mode: process.env.NODE_ENV || 'development',
+    devtool: 'nosources-source-map',
+    optimization: {
+      usedExports: false,
+    },
+    output: {
+      filename: 'materialdesignweb.min.js',
+      path: path.resolve(__dirname, DEST),
+    },
+    plugins: [
+      new BundleAnalyzerPlugin({
+        analyzerMode: 'static',
+        openAnalyzer: false,
+        generateStatsFile: false,
+        defaultSizes: 'gzip',
+        logLevel: 'error',
+      }),
+    ],
+    module: {
+      rules: [{
+        test: /\.js$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ['@babel/preset-env'],
+            ],
+          },
+        },
+      }, {
+        test: /\.scss$/,
+        use: [
+          'file-loader?name=materialdesignweb.min.css',
+          'extract-loader',
+          'css-loader?import=false',
+          'clean-css-loader?{"level":{2:{"restructureRules":true}}}',
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: sass,
+            },
+          },
+        ],
+      }],
+    },
+  };
+}
+
+/**
+ * @param {Object<string,string>} env
+ * @return {WebpackConfiguration}
+ */
+function getDocsConfig(env) {
+  const plugins = [
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false,
+      generateStatsFile: false,
+      defaultSizes: 'gzip',
+      logLevel: 'error',
+    }),
+  ];
+  /** @type {Object.<string, string[]>} */
+  const entries = {};
+  ['.', 'pwa', 'pages', 'themes'].map((folder) => path.join('./docs', folder))
+    .forEach((folderPath) => fs.readdirSync(folderPath).forEach((filename) => {
+      if (filename[0] === '_') {
+        return;
+      }
+      if (filename.endsWith('.pug')) return;
+      if (fs.statSync(path.join(folderPath, filename)).isDirectory()) {
+        return;
+      }
+      const noExt = filename.substring(0, filename.lastIndexOf('.'));
+      if (!entries[`${noExt}`]) {
+        entries[`${noExt}`] = [];
+      }
+      entries[`${noExt}`].push(path.resolve(`${folderPath}/${filename}`));
+    }));
+  const DEST = (isProduction ? 'dist/docs' : 'test/docs');
+
+  let port = parseInt(env.port ?? process.env.port, 10);
+  if (Number.isNaN(port)) {
+    port = 8080;
+  }
+
+  /** @type {WebpackConfiguration} */
+  const webpackConfig = {
+    entry: entries,
+    context: path.resolve(__dirname, 'docs'),
+    devtool: isProduction ? 'source-map' : 'nosources-source-map',
+    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+    devServer: {
+      host: '0.0.0.0',
+      port,
+      // static: path.resolve(__dirname, DEST),
+      compress: true,
+      hot: false,
+      liveReload: false,
+      client: false,
+    },
+    output: {
+      filename: '[name].min.js',
+      chunkFilename: '[name].min.js',
+      path: path.resolve(__dirname, DEST),
+    },
+    optimization: {
+      usedExports: true,
+      splitChunks: {
+        chunks: 'all',
+        cacheGroups: {
+          framework: {
+            test(module, chunks) {
+              if (module && module.resource && module.resource.match(/prerender/)) {
+                return false;
+              }
+              /** @type {import('webpack').ChunkGraph} */
+              const { chunkGraph } = chunks;
+
+              if (chunkGraph && [...chunkGraph.getModuleChunksIterable(module)]?.some((chunk) => chunk.name.match(/prerender/))) {
+                return false;
+              }
+              if (module && module.resource && module.resource.match(/[\\/]docs[\\/]/)) {
+                return false;
+              }
+              if (module && module.resource && module.resource.match(/[\\/](components|core|adapters)[\\/]/)) {
+                return true;
+              }
+              return false;
+            },
+            name: 'entire-framework',
+            minSize: 0,
+            minChunks: 1,
+            priority: 20,
+            chunks: 'all',
+            reuseExistingChunk: true,
+          },
+          default: {
+            test(module, chunks) {
+              if (module && module.resource && module.resource.match(/prerender/)) {
+                return false;
+              }
+              /** @type {import('webpack').ChunkGraph} */
+              const { chunkGraph } = chunks;
+              if (chunkGraph && [...chunkGraph.getModuleChunksIterable(module)]?.some((chunk) => chunk.name.match(/prerender/))) {
+                return false;
+              }
+              if (module && module.resource && module.resource.match(/[\\/]docs[\\/]/)) {
+                return true;
+              }
+              return false;
+            },
+            name: 'docs.common',
+            minSize: 0,
+            minChunks: 2,
+            priority: 0,
+            chunks: 'all',
+            reuseExistingChunk: true,
+          },
+        },
+      },
+    },
+    module: {
+      rules: [{
+        test: /\.js$/,
+        exclude: /(node_modules|bower_components)/,
+        use: [
+          'babel-loader?{"presets":["@babel/preset-env"]}',
+        ],
+      }, {
+        test: /\.scss$/,
+        use: [
+          'file-loader?name=[name].min.css',
+          'extract-loader',
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: ['cssnano'],
+              },
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: sass,
+            },
+          },
+        ],
+      }, {
+        test: /\.eta$/,
+        use: [
+          'file-loader?&name=[name].html',
+          'extract-loader',
+          {
+            loader: 'html-loader',
+            options: {
+              minimize: {
+                collapseBooleanAttributes: true,
+                minifyCSS: true,
+              },
+              attributes: false,
+              preprocessor(content, loaderContext) {
+                return eta.render(content, {}, { filename: loaderContext.resourcePath });
+              },
+            },
+          },
+        ],
+      }],
+    },
+    plugins,
+  };
+  return webpackConfig;
+}
+
+/**
+ * @param {Object<string,string>} env
+ * @return {WebpackConfiguration}
+ */
+function makeWebPackConfig(env = {}) {
+  const target = env.target || process.env.target;
+  if (target === 'docs') {
+    return getDocsConfig(env);
+  }
+  return getComponentsConfig(env);
+}
+
+module.exports = makeWebPackConfig;

package/_spec.scss

@@ -1,27 +0,0 @@
-@import './core/color/_spec.scss';
-@import './core/overlay/_spec.scss';
-@import './core/ripple/_spec.scss';
-
-@import './components/appbar/_spec.scss';
-@import './components/banner/_spec.scss';
-@import './components/bottomnav/_spec.scss';
-@import './components/button/_spec.scss';
-@import './components/card/_spec.scss';
-@import './components/chip/_spec.scss';
-@import './components/datatable/_spec.scss';
-@import './components/dialog/_spec.scss';
-@import './components/divider/_spec.scss';
-@import './components/elevation/_spec.scss';
-@import './components/fab/_spec.scss';
-@import './components/grid/_spec.scss';
-@import './components/layout/_spec.scss';
-@import './components/list/_spec.scss';
-@import './components/menu/_spec.scss';
-@import './components/progress/_spec.scss';
-@import './components/selection/_spec.scss';
-@import './components/slider/_spec.scss';
-@import './components/snackbar/_spec.scss';
-@import './components/tab/_spec.scss';
-@import './components/textfield/_spec.scss';
-@import './components/tooltip/_spec.scss';
-@import './components/type/_spec.scss';

package/_theme.scss

@@ -1,27 +0,0 @@
-@import './core/color/_theme.scss';
-@import './core/overlay/_theme.scss';
-@import './core/ripple/_theme.scss';
-
-@import './components/appbar/_theme.scss';
-@import './components/banner/_theme.scss';
-@import './components/bottomnav/_theme.scss';
-@import './components/button/_theme.scss';
-@import './components/card/_theme.scss';
-@import './components/chip/_theme.scss';
-@import './components/datatable/_theme.scss';
-@import './components/dialog/_theme.scss';
-@import './components/divider/_theme.scss';
-@import './components/elevation/_theme.scss';
-@import './components/fab/_theme.scss';
-@import './components/grid/_theme.scss';
-@import './components/layout/_theme.scss';
-@import './components/list/_theme.scss';
-@import './components/menu/_theme.scss';
-@import './components/progress/_theme.scss';
-@import './components/selection/_theme.scss';
-@import './components/slider/_theme.scss';
-@import './components/snackbar/_theme.scss';
-@import './components/tab/_theme.scss';
-@import './components/textfield/_theme.scss';
-@import './components/tooltip/_theme.scss';
-@import './components/type/_theme.scss';

package/components/list/expander.js

@@ -1,142 +0,0 @@
-import {
-  findElementParentByClassName,
-  iterateArrayLike,
-  nextTick,
-} from '../../core/dom';
-
-import * as Overlay from '../../core/overlay/index';
-import * as Ripple from '../../core/ripple/index';
-
-/**
- * @param {Element} listExpanderElement
- * @return {void}
- */
-export function attach(listExpanderElement) {
-  listExpanderElement.setAttribute('role', 'treeitem');
-
-  const listExpanderContent = listExpanderElement.getElementsByClassName('mdw-list__expander-content')[0];
-  if (listExpanderContent) {
-    listExpanderContent.setAttribute('role', 'none');
-
-    if (!listExpanderContent.hasAttribute('mdw-no-overlay')) {
-      listExpanderContent.classList.add('mdw-overlay');
-      Overlay.attach(listExpanderContent);
-    }
-
-    if (!listExpanderContent.hasAttribute('mdw-no-ripple')) {
-      listExpanderContent.classList.add('mdw-ripple');
-      Ripple.attach(listExpanderContent);
-    }
-    iterateArrayLike(listExpanderContent.getElementsByClassName('mdw-list__secondary'), (el) => {
-      el.setAttribute('aria-hidden', 'true');
-    });
-    iterateArrayLike(listExpanderContent.getElementsByClassName('mdw-list__icon'), (el) => {
-      el.setAttribute('aria-hidden', 'true');
-    });
-    iterateArrayLike(listExpanderContent.getElementsByClassName('mdw-list__avatar'), (el) => {
-      el.setAttribute('aria-hidden', 'true');
-    });
-    listExpanderContent.addEventListener('click', onItemClicked);
-  }
-  setExpanded(listExpanderElement, isExpanded(listExpanderElement));
-  listExpanderElement.addEventListener('blur', onBlur);
-  listExpanderElement.addEventListener('keydown', onKeyDown);
-
-  listExpanderElement.setAttribute('mdw-pre-expander-js', '');
-  setTimeout(() => {
-    if (listExpanderElement.hasAttribute('mdw-pre-expander-js')) {
-      listExpanderElement.removeAttribute('mdw-pre-expander-js');
-      listExpanderElement.setAttribute('mdw-expander-js', '');
-    }
-  }, 500);
-}
-
-/**
- * @param {KeyboardEvent} event
- * @return {void}
- */
-function onKeyDown(event) {
-  if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
-    return;
-  }
-  if (event.key !== 'Enter' && event.key !== 'Spacebar' && event.key !== ' ') {
-    return;
-  }
-  if (document.activeElement !== event.currentTarget) {
-    return;
-  }
-  event.stopPropagation();
-  event.preventDefault();
-  /** @type {HTMLElement} */
-  const listExpanderElement = (event.currentTarget);
-  const listExpanderContent = listExpanderElement.getElementsByClassName('mdw-list__expander-content')[0];
-  if (listExpanderContent) {
-    const newEvent = document.createEvent('Event');
-    newEvent.initEvent('click', true, true);
-    listExpanderContent.dispatchEvent(newEvent);
-  } else {
-    setExpanded(listExpanderElement, !isExpanded(listExpanderElement));
-  }
-}
-
-/**
- * @param {FocusEvent} event
- * @return {void}
- */
-function onBlur(event) {
-  /** @type {HTMLElement} */
-  const listExpanderElement = (event.currentTarget);
-  const listExpanderContent = listExpanderElement.getElementsByClassName('mdw-list__expander-content')[0];
-  if (listExpanderContent) {
-    listExpanderContent.removeAttribute('mdw-overlay-touch');
-  }
-}
-
-/**
- * @param {Element} listExpanderElement
- * @return {void}
- */
-export function detach(listExpanderElement) {
-  listExpanderElement.removeAttribute('mdw-pre-extender-js');
-  listExpanderElement.removeAttribute('mdw-extender-js');
-  listExpanderElement.removeEventListener('keydown', onKeyDown);
-  listExpanderElement.removeEventListener('blur', onBlur);
-  const listExpanderContent = listExpanderElement.getElementsByClassName('mdw-list__expander-content')[0];
-  if (listExpanderContent) {
-    listExpanderContent.removeEventListener('click', onItemClicked);
-  }
-}
-
-/**
- * @param {Element} listExpanderElement
- * @return {boolean}
- */
-export function isExpanded(listExpanderElement) {
-  return (listExpanderElement.getAttribute('aria-expanded') === 'true');
-}
-
-/**
- * @param {Element} listExpanderElement
- * @param {boolean} value
- * @return {void}
- */
-export function setExpanded(listExpanderElement, value) {
-  listExpanderElement.setAttribute('aria-expanded', value ? 'true' : 'false');
-  iterateArrayLike(listExpanderElement.querySelectorAll('[role="treeitem"]'), (treeitem) => {
-    treeitem.setAttribute('mdw-skip-tab', value ? 'false' : 'true');
-  });
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-export function onItemClicked(event) {
-  /** @type {HTMLElement} */
-  const firstChild = (event.currentTarget);
-  const listExpanderElement = findElementParentByClassName(firstChild, 'mdw-list__expander');
-  if (!listExpanderElement) {
-    return;
-  }
-  setExpanded(listExpanderElement, !isExpanded(listExpanderElement));
-}

package/components/list/itemgroup.js

@@ -1,22 +0,0 @@
-export const attachCore = setupAria;
-export const attach = attachCore;
-
-/**
- * @param {Element} listItemGroup
- * @return {void}
- */
-export function setupAria(listItemGroup) {
-  if (!listItemGroup.hasAttribute('role')) {
-    listItemGroup.setAttribute('role', 'group');
-  }
-}
-
-/**
- * @param {Element} listItemGroup
- * @return {void}
- */
-export function detachCore(listItemGroup) {
-  // noop
-}
-
-export const detach = detachCore;