@madgex/design-system - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

.vscode/launch.json

@@ -8,2 +8,10 @@ {
     {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch via NPM",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run-script", "debug"],
+      "port": 9229
+    },
+    {
       "name": "GulpTester",
@@ -10,0 +18,0 @@ "type": "node",

fractal.js

@@ -1,7 +0,5 @@
-const Fractal = require('@frctl/fractal');
+const fractal = (module.exports = require('@frctl/fractal').create()); // eslint-disable-line
+const path = require('path');
 
-const fractal = Fractal.create();
-// const fractal = (module.exports = require('@frctl/fractal').create());
 const mandelbrot = require('@frctl/mandelbrot');
-const path = require('path');
 const nunjucks = require('@frctl/nunjucks')({
@@ -22,16 +20,19 @@ paths: [path.resolve(__dirname, 'src/components'), path.resolve(__dirname, 'src/')],
 });
-const pkg = require('./package.json');
-const tokens = require('./tokens/build/js/_variables-module');
 
-fractal.components.engine(nunjucks); // use Nunjucks for components
-fractal.components.set('ext', '.njk');
+const pkg = require(path.join(__dirname, 'package.json')); // eslint-disable-line
+const tokens = require('./dist/_tokens/js/_tokens-module');
+const icons = require('./dist/assets/icons.json');
 
-/*
- * Give your project a title.
+/**
+ * Metadata
  */
 fractal.set('project.title', 'Madgex Design System');
+// Provide the package.json "version" to the templates
 fractal.set('project.version', pkg.version);
 
-/*
- * Tell Fractal where to look for components.
+fractal.components.engine(nunjucks); // use Nunjucks for components
+fractal.components.set('ext', '.njk');
+
+/**
+ * Files location
  */
@@ -50,4 +51,11 @@ fractal.components.set('path', path.join(__dirname, 'src/components'));
   tokens,
+  icons,
 });
 
+/**
+ * Build options
+ */
+// If you change the build destination, you should adapt webpack.common.js "output.path" too.
+fractal.web.set('builder.dest', path.join(__dirname, '/public'));
+
 /*
@@ -59,6 +67,2 @@ * Tell the Fractal web preview plugin where to look for static assets.
 const madgexTheme = mandelbrot({
-  // skin: 'black',
-  // any other theme configuration values here
-  // nav: ['docs', 'components'],
-  // which panels to show
   panels: ['html', 'notes', 'view', 'context', 'resources', 'info'],
@@ -80,5 +84,6 @@ styles: ['default', '/assets/css/styles.css'],
 
-/* Set the static HTML build destination */
-fractal.web.set('builder.dest', `${__dirname}/public`);
-
-module.exports = fractal;
+/**
+ * Server configuration
+ */
+fractal.web.set('server.port', 4000);
+fractal.web.set('server.sync', true);

gulpfile.js

 const gulp = require('gulp');
 const del = require('del');
-const { tokens } = require('./tasks/tokens');
-const { css } = require('./tasks/css');
-const { fractalStart, fractalBuild } = require('./tasks/fractal');
+const { tokens } = require('./gulp-tasks/tokens');
+const { css } = require('./gulp-tasks/css');
+const { svgsprite } = require('./gulp-tasks/svgsprite');
+const { jsbundle } = require('./gulp-tasks/js-bundle');
+const { fractalStart, fractalBuild } = require('./gulp-tasks/fractal');
 
@@ -16,3 +18,3 @@ // ---
   gulp.watch(['src/core/**/*.scss', 'src/components/**/*.scss'], { awaitWriteFinish: true }, gulp.series(css));
-  gulp.watch('tokens/**/*.json', gulp.series(tokens));
+  gulp.watch('src/tokens/**/*.json', gulp.series(tokens));
   // gulp.watch('./assets/js/**/*', gulp.series(scriptsLint, scripts));
@@ -22,3 +24,3 @@ }
 const watch = gulp.parallel(watchFiles);
-const build = gulp.series(clean, tokens, css, fractalBuild);
+const build = gulp.series(clean, tokens, svgsprite, css, jsbundle, fractalBuild);
 const dev = gulp.series(build, fractalStart, watch);
@@ -28,2 +30,4 @@
 exports.css = css;
+exports.jsbundle = jsbundle;
+exports.svgsprite = svgsprite;
 exports.build = build;
@@ -30,0 +34,0 @@ exports.dev = dev;

package.json

 {
   "name": "@madgex/design-system",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "scripts": {
+    "clean": "rimraf dist public tokens/build",
     "commit": "commit",
     "semantic-release": "semantic-release --prepare && npm run build && semantic-release --publish",
-    "tokens": "style-dictionary --config ./tokens/_config.js build",
-    "dev": "gulp dev",
-    "build": "npm run tokens && gulp build",
+    "tokens": "style-dictionary --config ./src/tokens/_config.js build",
+    "start": "gulp dev",
+    "build": "gulp build",
+    "build:icons": "svgo -f src/icons ./dist/assets/icons",
+    "build:webpack": "NODE_ENV=production webpack",
+    "build:fractal": "NODE_ENV=production fractal build",
     "lint": "eslint .",
@@ -21,20 +25,45 @@ "lint-fix": "eslint . --fix"
     "@babel/preset-env": "^7.4.4",
-    "@commitlint/cli": "^7.5.2",
-    "@commitlint/config-conventional": "^7.5.0",
-    "@commitlint/prompt-cli": "^7.5.0",
+    "@commitlint/cli": "^7.6.1",
+    "@commitlint/config-conventional": "^7.6.0",
+    "@commitlint/prompt-cli": "^7.6.1",
     "@frctl/fractal": "^1.1.7",
     "@frctl/mandelbrot": "^1.2.1",
-    "@frctl/nunjucks": "^2.0.0",
+    "@frctl/nunjucks": "^2.0.1",
     "@madgex/eslint-config-madgex": "^1.2.0",
-    "commitizen": "^3.0.7",
+    "autoprefixer": "^9.5.1",
+    "babel-loader": "^8.0.6",
+    "commitizen": "^3.1.1",
+    "concurrently": "^4.1.0",
+    "css-loader": "^2.1.1",
+    "cssnano": "^4.1.10",
     "cz-conventional-changelog": "^2.1.0",
-    "del": "^4.1.0",
+    "del": "^4.1.1",
+    "file-loader": "^3.0.1",
     "flat": "^4.1.0",
-    "gulp": "^4.0.0",
+    "glob": "^7.1.4",
+    "gulp": "^4.0.2",
+    "gulp-rename": "^1.4.0",
     "gulp-sass": "^4.0.2",
+    "gulp-svgmin": "^2.2.0",
+    "gulp-svgstore": "^7.0.1",
     "gulp-tap": "^1.0.1",
-    "husky": "^1.3.1",
-    "lint-staged": "^8.1.5",
-    "semantic-release": "^15.13.3",
-    "style-dictionary": "^2.7.0"
+    "husky": "^2.3.0",
+    "lint-staged": "^8.1.7",
+    "mini-css-extract-plugin": "^0.6.0",
+    "node-sass": "^4.12.0",
+    "postcss": "^7.0.16",
+    "postcss-cli": "^6.1.2",
+    "postcss-loader": "^3.0.0",
+    "rimraf": "^2.6.3",
+    "sass-loader": "^7.1.0",
+    "semantic-release": "^15.13.12",
+    "style-dictionary": "^2.7.0",
+    "style-loader": "^0.23.1",
+    "svg-sprite-loader": "^4.1.6",
+    "svgo": "^1.2.2",
+    "svgo-loader": "^2.2.0",
+    "webpack": "^4.31.0",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.4.0",
+    "webpack-stream": "^5.2.1"
   },
@@ -41,0 +70,0 @@ "config": {

README.md

@@ -1,112 +0,23 @@
-# Basic Style Dictionary
+# Madgex Design System
 
-This example code is bare-bones to show you what this framework can do. If you have the style-dictionary module installed globally, just cd into this directory and run:
-```bash
-style-dictionary build
-```
+A work-in progress Design System for building a UI for Madgex products.
 
-You should see something like this output:
-```
-Reading config file from ./config.json
-Building all platforms
+## Usage
 
-scss
-✔︎ build/scss/_variables.scss
-
-android
-✔︎ build/android/font_dimens.xml
-
-ios
-✔︎ build/ios/StyleDictionaryColor.h
-✔︎ build/ios/StyleDictionaryColor.m
+```bash
+npm install @madgex/design-system --save
 ```
 
-Pat yourself on the back, you just built your first style dictionary! Moving on, take a look at what we have built. This should have created a build directory and it should look like this:
-```
-├── android/
-│   ├── font_dimens.xml
-│   ├── colors.xml
-├── scss/
-│   ├── _variables.scss
-├── ios/
-│   ├── StyleDictionaryColor.h
-│   ├── StyleDictionaryColor.m
-```
+## Importing styles
 
-If you open `config.json` you will see there are 3 platforms defined: scss, android, ios. Each platform has a transformGroup, buildPath, and files. The buildPath and files of the platform should match up to the files what were built. The files built should look like these:
+You'll need to import the Madgex DS styles into your main Sass file.
 
-**Android**
-```xml
-<!-- font_dimens.xml -->
-<resources>
-  <dimen name="size_font_small">12.00sp</dimen>
-  <dimen name="size_font_medium">16.00sp</dimen>
-  <dimen name="size_font_large">32.00sp</dimen>
-  <dimen name="size_font_base">16.00sp</dimen>
-</resources>
+To import add the below to your Sass file:
 
-<!-- colors.xml -->
-<resources>
-  <color name="color_base_gray_light">#CCCCCC</color>
-  <color name="color_base_gray_medium">#999999</color>
-  <color name="color_base_gray_dark">#111111</color>
-  <color name="color_font_base">#111111</color>
-  <color name="color_font_secondary">#999999</color>
-  <color name="color_font_tertiary">#CCCCCC</color>
-</resources>
-```
-
-**SCSS**
 ```scss
-// variables.scss
-$color-base-gray-light: #CCCCCC;
-$color-base-gray-medium: #999999;
-$color-base-gray-dark: #111111;
-$color-font-base: #111111;
-$color-font-secondary: #999999;
-$color-font-tertiary: #CCCCCC;
-$size-font-small: 0.75rem;
-$size-font-medium: 1rem;
-$size-font-large: 2rem;
-$size-font-base: 1rem;
+@import 'node_modules/@madgex/design-system/public/css/index.css';
 ```
 
-**iOS**
-```objc
-@implementation StyleDictionaryColor
+## Releases
 
-+ (UIColor *)color:(StyleDictionaryColorName)colorEnum{
-  return [[self values] objectAtIndex:colorEnum];
-}
-
-+ (NSArray *)values {
-  static NSArray* colorArray;
-  static dispatch_once_t onceToken;
-
-  dispatch_once(&onceToken, ^{
-    colorArray = @[
-[UIColor colorWithRed:0.80f green:0.80f blue:0.80f alpha:1.0f],
-[UIColor colorWithRed:0.60f green:0.60f blue:0.60f alpha:1.0f],
-[UIColor colorWithRed:0.07f green:0.07f blue:0.07f alpha:1.0f],
-[UIColor colorWithRed:0.07f green:0.07f blue:0.07f alpha:1.0f],
-[UIColor colorWithRed:0.60f green:0.60f blue:0.60f alpha:1.0f],
-[UIColor colorWithRed:0.80f green:0.80f blue:0.80f alpha:1.0f]
-    ];
-  });
-
-  return colorArray;
-}
-
-@end
-```
-
-Pretty nifty! This shows a few things happening:
-1. The build system does a deep merge of all the property JSON files defined in the `source` attribute of `config.json`. This allows you to split up the property JSON files however you want. There are 2 JSON files with `color` as the top level key, but they get merged properly.
-1. The build system resolves references to other style properties. `{size.font.medium.value}` gets resolved properly
-1. The build system handles references to property values in other files as well as you can see in `properties/color/font.json`
-
-Now lets make a change and see how that affects things. Open up `properties/color/base.json` and change `"#111111"` to `"#000000"`. After you make that change, save the file and re-run the build command `style-dictionary build`. Open up the build files and take a look.
-
-**Huzzah!**
-
-Now go forth and create! Take a look at all the built-in [transforms](https://amzn.github.io/style-dictionary/#/transforms?id=pre-defined-transforms) and [formats](https://amzn.github.io/style-dictionary/#/formats?id=pre-defined-formats).
+With every commit to `master` the build server attempts to create a new version using [semantic-release](https://semantic-release.gitbook.io/semantic-release/) and deploys to `NPM`.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48385

increased by20.64%

Number of package files

54

increased by31.71%

Lines of code

742

increased by54.26%

Worsened metrics

Dev dependency count

45

increased by125%

Number of lines in readme file

24

decreased by-78.76%

Number of low supply chain risk alerts

4

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes