@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/docs/pwa/pwa.scss

@@ -0,0 +1,26 @@
+@use "../../core/theme/_config.scss" with (
+  $primary: 'deeppurple',
+  $secondary: 'deeporange',
+  $warn: 'red',
+  $background: 'bluegray',
+  $foreground: (#006064, #E0F7FA),
+);
+
+@use "../../core/color";
+@use "../../core/overlay";
+@use "../../core/ripple";
+
+@use "../../components/appbar";
+@use "../../components/banner";
+@use "../../components/button";
+@use "../../components/card";
+@use "../../components/dialog";
+@use "../../components/divider";
+@use "../../components/fab";
+@use "../../components/grid";
+@use "../../components/layout";
+@use "../../components/list";
+@use "../../components/menu";
+@use "../../components/selection";
+@use "../../components/snackbar";
+@use "../../components/type";

package/docs/spec.scss

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

package/docs/themes/_component-themes.scss

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

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

@@ -0,0 +1,17 @@
+@use "../../core/theme/_config.scss" with (
+  $primary: 'deeppurple',
+  $secondary: 'deeporange',
+  $warn: 'red',
+  $background: 'bluegray',
+  $foreground: (#006064, #E0F7FA),
+  $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: Merriweather, sans-serif;
+}
+

package/docs/themes/theme-colored.scss

@@ -0,0 +1,17 @@
+@use "../../core/theme/_config.scss" with (
+  $primary: 'deeppurple',
+  $secondary: 'deeporange',
+  $warn: 'red',
+  $background: 'bluegray',
+  $foreground: (#006064, #E0F7FA),
+  $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: Merriweather, sans-serif;
+}
+

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,12 +1,18 @@
 {
   "name": "@shortfuse/materialdesignweb",
-  "version": "0.0.9",
+  "version": "0.4.0",
   "description": "Material Design for Web",
-  "main": "components/index.js",
+  "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"
+    "analyze:docs": "webpack-bundle-analyzer stats.json",
+    "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",
@@ -17,35 +23,44 @@
     "design",
     "web"
   ],
+  "exports": {
+    "./": "./"
+  },
   "author": "Carlos Lopez Jr. <clshortfuse@gmail.com> (https://shortfuse.org/)",
   "license": "ISC",
+  "sideEffects": false,
   "bugs": {
     "url": "https://github.com/clshortfuse/materialdesignweb/issues"
   },
   "homepage": "https://github.com/clshortfuse/materialdesignweb#readme",
   "devDependencies": {
-    "autoprefixer": "^8.2.0",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "css-loader": "^0.28.9",
-    "cssnano": "^3.10.0",
-    "eslint": "^4.17.0",
-    "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-plugin-import": "^2.8.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "html-loader": "^0.5.5",
-    "node-sass": "^4.7.2",
-    "postcss-loader": "^2.1.0",
-    "pug": "^2.0.0-rc.4",
-    "pug-html-loader": "^1.1.5",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.1",
-    "stylelint": "^8.4.0",
-    "stylelint-config-recommended-scss": "^3.0.0",
-    "stylelint-scss": "^2.3.0",
-    "webpack": "^3.11.0",
-    "webpack-dev-server": "^2.11.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/templates/index.pug

@@ -0,0 +1,3 @@
+include ../components/button/index.pug
+include ../components/selection/index.pug
+include ../components/textfield/index.pug

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/components/_index.scss

@@ -1,4 +0,0 @@
-@import './all-components.scss';
-@import './theming/theming.scss';
-
-@include buildMDWThemes();

package/components/all-components.scss

@@ -1,14 +0,0 @@
-@import './core/bottomnav/style.scss';
-@import './core/button/style.scss';
-@import './core/menu/style.scss';
-@import './core/list/style.scss';
-@import './core/progress/style.scss';
-@import './core/selection/style.scss';
-@import './core/tab/style.scss';
-@import './core/textfield/style.scss';
-@import './core/toolbar/style.scss';
-@import './core/tooltip/style.scss';
-@import './core/type/style.scss';
-
-@import './complex/dialog/style.scss';
-@import './complex/navdrawer/style.scss';