maz-ui 2.4.2 → 2.4.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 LouisMazel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# maz-ui
+
+[![license](https://img.shields.io/github/license/LouisMazel/maz-ui.svg?style=flat-square)](https://github.com/LouisMazel/maz-ui/blob/master/LICENSE)
+[![vue 2](https://img.shields.io/badge/vue-2-42b983.svg?style=flat-square)](https://vuejs.org)
+[![npm](https://img.shields.io/npm/v/maz-ui.svg?style=flat-square)](https://www.npmjs.com/package/maz-ui)
+[![npm](https://img.shields.io/npm/dt/maz-ui.svg?style=flat-square)](https://www.npmjs.com/package/maz-ui)
+[![Codacy grade](https://img.shields.io/codacy/grade/3d15a7c11bfe47c69a2aed93cc67cc29.svg?style=flat-square)](https://www.codacy.com/app/LouisMazel/maz-ui)
+
+[![npm](https://nodei.co/npm/maz-ui.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/maz-ui)
+
+> [Maz-ui](https://louismazel.github.io/maz-ui/) is a stand-alone components library for [VueJS](https://vuejs.org) & [NuxtJS](https://nuxtjs.org/) (v2.x)
+
+## Documentation & Components
+
+[Documentation & Components](https://louismazel.github.io/maz-ui/)
+
+## Install
+
+[Get Started](https://louismazel.github.io/maz-ui/documentation/get-started)
+
+```shell
+npm install maz-ui
+
+# Or yarn add maz-ui
+```
+
+### On demande install
+
+To optimize your bundle size, it's recommanded to use the [on demand install](https://louismazel.github.io/maz-ui/documentation/get-started)
+
+```javascript
+import Vue from 'vue'
+import {
+  ...
+  MazBtn
+  MazInput
+  MazPicker
+  MazPhoneNumberInput
+  ...
+} from 'maz-ui'
+
+...
+Vue.use(MazBtn)
+Vue.use(MazInput)
+Vue.use(MazPicker)
+Vue.use(MazPhoneNumberInput)
+...
+```
+
+### Quick Start - Fully install (not recommanded)
+
+```javascript
+import Vue from "vue";
+import "maz-ui/lib/css/index.css";
+import MazUi from "maz-ui";
+
+Vue.use(MazUi);
+```
+
+## Contribute
+
+Read documentation of [CONTRIBUTING.md](./.github/CONTRIBUTING.md)
+
+## LICENSE
+
+[MIT](LICENSE)

package/bin/index.js

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+
+const chalk = require('chalk')
+const clear = require('clear')
+const figlet = require('figlet')
+const path = require('path')
+const { Command } = require('commander')
+
+const VERSION = require('../package').version
+const NAME = require('../package').name
+const PREFIX = 'maz-'
+const generateRootCss = require('./lib/index.js')
+
+const program = new Command()
+
+clear()
+console.log(
+  chalk.bold.keyword('dodgerblue')(
+    figlet.textSync(NAME, { horizontalLayout: 'full' })
+  )
+)
+console.log()
+console.log(chalk.bold.keyword('dodgerblue')(`${NAME} v${VERSION}`))
+console.log()
+
+program
+  .version(`${NAME} ${VERSION}`)
+  .usage('<command> [options]')
+
+program
+  .arguments('[command]')
+  .action((cmd) => {
+    program.outputHelp()
+    if (cmd) {
+      console.log()
+      console.log(
+        chalk.red(`  ⛔️ Unknown command ${chalk.bold.keyword('dodgerblue')(cmd)}.`)
+      )
+      console.log()
+    }
+  })
+
+program.on('--help', () => {
+  console.log()
+  console.log(`  Run ${chalk.bold.keyword('dodgerblue')('maz <command> --help')} for detailed usage of given command.`)
+  console.log()
+})
+
+program
+  .command('get-theme')
+  .option('-c, --config <path-to-config-file>', 'Optionnal: Provide path to config file - Ex: "./maz-ui.config.js"')
+  .description('Generate css variables')
+  .action(async (options) => {
+    const configPath = path.resolve(process.env.PWD, options.config ? options.config : './maz-ui.config.js')
+    const config = require(configPath)
+    const output = config.output
+    const colors = config.theme
+    delete config.output
+    generateRootCss(PREFIX, colors, output)
+    process.exit(0)
+  })
+
+program.parse(process.argv)

package/bin/lib/_constantes/default-colors.js

@@ -0,0 +1,69 @@
+module.exports = {
+  mainColors: {
+    primary: 'dodgerblue',
+    secondary: '#1CD1A1',
+    third: '#C41AF9',
+    danger: 'orangered',
+    success: 'yellowgreen',
+    info: '#17A2B8',
+    warning: '#FFA300',
+    light: '#EEEEEE',
+    dark: '#21222E',
+    grey: '#999999',
+    default: '#CCCCCC',
+    black: 'black',
+    white: 'white',
+    transparent: '#FFFFFF00',
+    disabled: '#F2F2F2'
+  },
+  typo: {
+    'base-font-size': '16px',
+    'base-font-family': 'system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Helvetica, Arial, sans-serif, \'Apple Color Emoji\', \'Segoe UI Emoji\', \'Segoe UI Symbol\'',
+    'base-font-weight': '400',
+    'base-line-height': '1.5'
+  },
+  border: {
+    'border-width': '2px',
+    'border-radius': '8px'
+  },
+  light: {
+    typo: {
+      'text-color': '#212121',
+      'muted-color': 'rgba(0, 0, 0, .54)',
+      'placeholder-color': '#A7A7A7',
+      'icon-color': '#DEDEDE'
+    },
+    layout: {
+      'bg-color': 'white',
+      'bg-color-light': '#F2F2F2',
+      'overlay-color': 'rgba(86, 87, 117, .7)'
+    },
+    borderColor: {
+      'border-color': '#EEEEEE'
+    },
+    state: {
+      'hover-color': '#F2F2F2',
+      'disabled-color': '#F2F2F2'
+    }
+  },
+  dark: {
+    typo: {
+      'text-color': '#EEEEEE',
+      'muted-color': 'rgba(255, 255, 255, .54)',
+      'placeholder-color': 'rgba(255, 255, 255, .6)',
+      'icon-color': '#65678F'
+    },
+    layout: {
+      'bg-color': '#21222E',
+      'bg-color-light': '#303144',
+      'overlay-color': 'rgba(86, 87, 117, .7)'
+    },
+    borderColor: {
+      'border-color': '#3B3C53'
+    },
+    state: {
+      'hover-color': '#2E2F40',
+      'disabled-color': '#CCCCCC'
+    }
+  }
+}

package/bin/lib/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (color: object, output: string) => object
+export default _default

package/bin/lib/index.js

@@ -0,0 +1,145 @@
+const { isColorName, colorNameToHex, shadeColor, hexToRgba } = require('color-transformer-ui')
+const generateRootCss = require('./methods/generate-root-css')
+
+const getAlpha = (color, coef) => {
+  const alpha = color.length === 7 ? hexToRgba(color, coef) : 'transparent'
+
+  const outputCoef = coef * 100 < 10 ? `0${coef * 100}` : coef * 100
+
+  return {
+    alpha,
+    coef: outputCoef
+  }
+}
+
+const getMainVariants = (color) => {
+  if (isColorName(color)) color = colorNameToHex(color)
+  const darken = shadeColor(color, -20)
+  const alpha = getAlpha(color, 0.05)
+  const alpha5 = getAlpha(color, 0.5)
+  const alpha4 = getAlpha(color, 0.4)
+  const alpha6 = getAlpha(color, 0.6)
+
+  return [color, darken, [alpha, alpha4, alpha5, alpha6]]
+}
+
+const getLayoutVariants = (color) => {
+  if (isColorName(color)) color = colorNameToHex(color)
+  const darken = shadeColor(color, -10)
+
+  return [color, darken]
+}
+
+const getStateVariants = (color, dark) => {
+  if (isColorName(color)) color = colorNameToHex(color)
+  const darken = dark ? shadeColor(color, 15) : shadeColor(color, -10)
+
+  return [color, darken]
+}
+
+module.exports = (prefix, theme, output) => {
+  if (!prefix) throw new Error('The "prefix" should be defined')
+  if (!output) throw new Error('No "output" found in maz-ui.config.js - Ex: "output: ./assets/root-vars.css"')
+  if (!theme || !Object.keys(theme).length) throw new Error('No colors provided in maz-ui-config.js - Ex: "{ theme: { mainColors: { primary: "red" } } }"')
+
+  const results = {
+    light: {},
+    dark: {}
+  }
+
+  /**
+   * Main Colors
+   */
+  if (theme.main) {
+    Object.entries(theme.main).forEach((values) => {
+      const variants = getMainVariants(values[1])
+      results.light[`--${prefix}${values[0]}`] = variants[0]
+      results.light[`--${prefix}${values[0]}-darken`] = variants[1]
+      variants[2].forEach((v) => {
+        results.light[`--${prefix}${values[0]}-alpha-${v.coef}`] = v.alpha
+      })
+    })
+  }
+
+  /**
+   * Typo base
+   */
+  if (theme.typo) {
+    Object.entries(theme.typo).forEach((values) => {
+      results.light[`--${prefix}${values[0]}`] = values[1]
+    })
+  }
+
+  /**
+   * Border
+   */
+  if (theme.border) {
+    Object.entries(theme.border).forEach((values) => {
+      results.light[`--${prefix}${values[0]}`] = values[1]
+    })
+  }
+
+  /**
+   * Light
+   */
+  if (theme.light) {
+    if (theme.light.typo) {
+      Object.entries(theme.light.typo).forEach((values) => {
+        results.light[`--${prefix}${values[0]}`] = values[1]
+      })
+    }
+    if (theme.light.layout) {
+      Object.entries(theme.light.layout).forEach((values) => {
+        results.light[`--${prefix}${values[0]}`] = values[1]
+      })
+    }
+
+    if (theme.light.borderColor) {
+      Object.entries(theme.light.borderColor).forEach((values) => {
+        const variants = getLayoutVariants(values[1])
+        results.light[`--${prefix}${values[0]}`] = variants[0]
+        results.light[`--${prefix}${values[0]}-darken`] = variants[1]
+      })
+    }
+    if (theme.light.state) {
+      Object.entries(theme.light.state).forEach((values) => {
+        const variants = getStateVariants(values[1])
+        results.light[`--${prefix}${values[0]}`] = variants[0]
+        results.light[`--${prefix}${values[0]}-darken`] = variants[1]
+      })
+    }
+  }
+
+  /**
+   * Dark
+   */
+  if (theme.dark) {
+    if (theme.dark.typo) {
+      Object.entries(theme.dark.typo).forEach((values) => {
+        results.dark[`--${prefix}${values[0]}`] = values[1]
+      })
+    }
+    if (theme.dark.layout) {
+      Object.entries(theme.dark.layout).forEach((values) => {
+        results.dark[`--${prefix}${values[0]}`] = values[1]
+      })
+    }
+    if (theme.dark.borderColor) {
+      Object.entries(theme.dark.borderColor).forEach((values) => {
+        const variants = getLayoutVariants(values[1])
+        results.dark[`--${prefix}${values[0]}`] = variants[0]
+        results.dark[`--${prefix}${values[0]}-darken`] = variants[1]
+      })
+    }
+    if (theme.dark.state) {
+      Object.entries(theme.dark.state).forEach((values) => {
+        const variants = getStateVariants(values[1], true)
+        results.dark[`--${prefix}${values[0]}`] = variants[0]
+        results.dark[`--${prefix}${values[0]}-darken`] = variants[1]
+      })
+    }
+  }
+
+  generateRootCss(results, output)
+  return results
+}

package/bin/lib/methods/generate-root-css.js

@@ -0,0 +1,49 @@
+const fs = require('fs')
+const { EOL: endOfLine } = require('os')
+const render = require('json-templater/string')
+
+const LIGHT_TEMPLATE = `
+/* Automatically generated by 'maz-ui' */
+
+/* stylelint-disable */
+
+:root {
+{{light_include}}
+}`
+
+const DARK_TEMPLATE = `.maz-is-dark {
+{{dark_include}}
+}`
+
+const END_TEMPLATE = `
+/* stylelint-enable */`
+
+
+
+module.exports = (variables, output) => {
+  const lightProperties = Object.entries(variables.light)
+    .map((values) => `  ${values[0]}: ${values[1]};`)
+    .join(endOfLine)
+  const darkProperties = Object.entries(variables.dark)
+    .map((values) => `  ${values[0]}: ${values[1]};`)
+    .join(endOfLine)
+
+  const lightTemplate = render(LIGHT_TEMPLATE, {
+    light_include: lightProperties,
+    dark_include: darkProperties
+  })
+
+  const darkTemplate = render(DARK_TEMPLATE, {
+    light_include: lightProperties,
+    dark_include: darkProperties
+  })
+
+  const result = `
+  ${lightTemplate}
+  ${darkProperties ? darkTemplate : ''}
+  ${END_TEMPLATE}
+  `.trim()
+
+  fs.writeFileSync(output, result)
+  console.log('\x1B[32m', '[build root css file] DONE:', output)
+}

package/bin/lib/methods/get-theme-settings.js

@@ -0,0 +1,58 @@
+const defaultTheme = require('./../_constantes/default-colors')
+
+module.exports = (opts) => {
+  return {
+    mainColors: {
+      ...defaultTheme.mainColors,
+      ...opts.mainColors
+    },
+    typo: {
+      ...defaultTheme.typo,
+      ...opts.typo
+    },
+    border: {
+      ...defaultTheme.border,
+      ...opts.border
+    },
+    light: {
+      typo: {
+        ...defaultTheme.light.typo,
+        ...(opts.light ? opts.light.typo : {})
+      },
+      layout: {
+        ...defaultTheme.light.layout,
+        ...(opts.light ? opts.light.layout : {})
+      },
+      state: {
+        ...defaultTheme.light.state,
+        ...(opts.light ? opts.light.state : {})
+      },
+      borderColor: {
+        ...defaultTheme.light.borderColor,
+        ...(opts.light ? opts.light.borderColor : {})
+      }
+    },
+    dark: {
+      typo: {
+        ...defaultTheme.dark.typo,
+        ...(opts.dark ? opts.dark.typo : {})
+      },
+      layout: {
+        ...defaultTheme.dark.layout,
+        ...(opts.dark ? opts.dark.layout : {})
+      },
+      state: {
+        ...defaultTheme.dark.state,
+        ...(opts.dark ? opts.dark.state : {})
+      },
+      borderColor: {
+        ...defaultTheme.dark.borderColor,
+        ...(opts.dark ? opts.dark.borderColor : {})
+      }
+    },
+    breakpoints: {
+      ...defaultTheme.breakpoints,
+      ...opts.breakpoints
+    }
+  }
+}

package/bin/lib/methods/set-css-vars.js

@@ -0,0 +1,11 @@
+module.exports = (variables) => {
+  const root = document.documentElement.style
+
+  Object.entries(variables.light).forEach((values) => {
+    root.setProperty(values[0], values[1])
+  })
+
+  Object.entries(variables.dark).forEach((values) => {
+    root.setProperty(values[0], values[1])
+  })
+}