From c01aefb1ca94ecb32c573373a82e948c7a10b50c Mon Sep 17 00:00:00 2001 From: drolsen Date: Wed, 1 Jul 2020 10:37:03 -0700 Subject: [PATCH 1/3] Metrics fixes --- build/configs/js/js.config.js | 8 +- build/configs/js/js.config.plugins.js | 411 ++++++++++++++++-- .../molecules/Readme/Readme.Container.js | 6 +- .../organisms/Metrics/Metrics.Container.js | 105 ++++- .../elements/organisms/Metrics/Metrics.css | 10 +- .../elements/organisms/Metrics/Metrics.jsx | 54 +++ package-lock.json | 90 +--- package.json | 4 +- src/elements/atoms/Button/Button.example.jsx | 5 +- src/elements/atoms/Button/Button.jsx | 4 +- 10 files changed, 566 insertions(+), 131 deletions(-) diff --git a/build/configs/js/js.config.js b/build/configs/js/js.config.js index dc8ef0e..1bf965e 100644 --- a/build/configs/js/js.config.js +++ b/build/configs/js/js.config.js @@ -5,7 +5,7 @@ const path = require('path'); const Package = require('../../../package.json'); const CopyWebpackPlugin = require('copy-webpack-plugin'); -const { ESDocs, JSXDocs, ESMetrics, Bundle } = require('./js.config.plugins.js'); +const { ESDocs, JSXDocs, ESMetrics, JSXMetrics, Bundle } = require('./js.config.plugins.js'); const babelPlugins = [ '@babel/plugin-proposal-object-rest-spread', // (see: https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread) @@ -22,6 +22,7 @@ const babelOptions = { // all js(x) files get ran through these build processes module.exports = { config: [{ + // Full transpile of JS and JSX files for rendering in browser 'test': /\.(jsx|js)$/, 'exclude': [path.resolve(__dirname, '../../../node_modules')], 'use': [ @@ -35,12 +36,14 @@ module.exports = { } ] }, { + // Pre transpile entry for JS Docs and Metrics building 'test': /\.js$/, 'exclude': [path.resolve(__dirname, '../../../node_modules')], 'use': [ { 'loader': 'babel-loader?cacheDirectory', // (see: https://www.npmjs.com/package/babel-loader) 'options': { + 'compact': false, 'plugins': [ ESMetrics, ESDocs @@ -52,14 +55,17 @@ module.exports = { } ] }, { + // Pre transpile entry for JSX Docs and Metrics building 'test': /\.jsx$/, 'exclude': [path.resolve(__dirname, '../../../node_modules')], 'use': [ { 'loader': 'babel-loader?cacheDirectory', // (see: https://www.npmjs.com/package/babel-loader) 'options': { + 'compact': false, 'presets': ['@babel/preset-react'], 'plugins': [ + JSXMetrics, JSXDocs, ...babelPlugins ] diff --git a/build/configs/js/js.config.plugins.js b/build/configs/js/js.config.plugins.js index ca66618..c0ff1ca 100644 --- a/build/configs/js/js.config.plugins.js +++ b/build/configs/js/js.config.plugins.js @@ -6,9 +6,12 @@ const fs = require('fs'); const path = require('path'); const { declare } = require('@babel/helper-plugin-utils'); +const types = require('@babel/types'); +const traverse = require('@babel/traverse').default; const getElementName = (pathing) => path.basename(path.resolve(__dirname, pathing)).split('.')[0]; + // Unslated's ECMA Script comment based docs const ESDocs = declare((api, opts) => { process.esDocsReset = () => {}; @@ -33,25 +36,13 @@ const ESDocs = declare((api, opts) => { return comment; }; - const getMethodParams = (containers) => { - let params = []; - Object.keys(containers.init.params).map((j) => { - params.push(containers.init.params[j].name); - }); - - return params; - }; - - const getEventParams = (params) => { - let collection = []; - if (params) { - Object.keys(params).map((j) => { - collection.push(params[j].name); - }); - } + const getMethodParams = (containers) => (containers) + ? [...Object.keys(containers.init.params).map((i) => containers.init.params[i].name)] + : []; - return collection; - }; + const getEventParams = (params) => (params) + ? [...Object.keys(params).map((i) => params[i].name)] + : []; const getSelectorTemplateLiteral = (expressions, quasis) => { let selector = ''; @@ -161,10 +152,6 @@ const ESDocs = declare((api, opts) => { element = endpoint.name; } - if (!element) { - console.log(element); - } - process.esDocs[elementName].events.push({ file: file.filename, line: container.loc.start.line, // line in document this is expressed @@ -193,7 +180,6 @@ const ESDocs = declare((api, opts) => { } if (args[0].type === 'TemplateLiteral') { - console.log(); process.esDocs[elementName].selectors.push({ file: file.filename, line: container.loc.start.line, // line in document this is expressed @@ -288,14 +274,31 @@ const JSXDocs = declare((api, opts) => { return collection; }; + const getAtomicLevel = (path) => { + if (path.indexOf('atoms') !== -1) { + return 'atoms'; + } + if (path.indexOf('modifiers') !== -1) { + return 'modifiers'; + } + if (path.indexOf('molecules') !== -1) { + return 'molecules'; + } + if (path.indexOf('organisms') !== -1) { + return 'organisms'; + } + if (path.indexOf('templates') !== -1) { + return 'templates'; + } + + return false; + }; + return { name: 'JSXDocs', + pre(state) {}, visitor: { - Program(ast, file) { - if (file.filename.indexOf('.jsx') !== -1 && file.filename.indexOf('.example.jsx') === -1) { - - } - }, + Program(ast, file) {}, Class(ast, file) { if (ast.node.superClass.object.name === 'React') { const elementName = ast.node.id.name; @@ -303,15 +306,107 @@ const JSXDocs = declare((api, opts) => { // If you build it, they will come. if (!process.jsxDocs[getElementName(file.filename)]) { - process.jsxDocs[getElementName(file.filename)] = {}; + process.jsxDocs[getElementName(file.filename)] = { + Level: undefined, + Tags: {}, + Using: {} + }; } - process.jsxDocs[getElementName(file.filename)][elementName] = { + process.jsxDocs[getElementName(file.filename)].Level = getAtomicLevel(file.filename); + process.jsxDocs[getElementName(file.filename)].Tags[elementName] = { description: getComment(ast.container), props: getPropTypes(classProperties, elementName) }; } } + }, + post(state) { + traverse(state.ast, { + ImportDeclaration: (ast) => { + const value = ast.node.source.value.toLowerCase(); + const levels = ['atoms', 'molecules', 'organisms', 'templates']; + + if ( + value.indexOf('.css') === -1 + && value.indexOf('.js') === -1 + && value.indexOf('.container') === -1 + && value.indexOf('.example') === -1 + ) { + // Determins used element types and levels (root or sub and atomic levels) + Object.keys(ast.container).map((i) => { + const node = ast.container[i]; + if (!node.source) { return false; } + + const sourceFilename = path.basename(ast.hub.file.opts.filename).split('.')[0]; + const sourceValue = node.source.value; + + if (sourceFilename.indexOf('@guide') !== -1) { return false; } + if (ast.hub.file.opts.filename.indexOf('guide') !== -1) { return false; } + + if ( + sourceValue && + sourceValue.indexOf('@guide') === -1 && + sourceValue.indexOf('@vars') === -1 && + sourceValue.indexOf('@src') === -1 && + sourceValue.indexOf('.json') === -1 && + sourceValue.indexOf('.jpg') === -1 && + sourceValue.indexOf('.svg') === -1 && + sourceValue.indexOf('.png') === -1 && + sourceValue.indexOf('.gif') === -1 && + sourceValue.indexOf('.ico') === -1 && + sourceValue.indexOf('.woff') === -1 && + sourceValue.indexOf('.woff2') === -1 && + sourceValue.indexOf('.ttf') === -1 && + sourceValue.indexOf('.eot') === -1 && + sourceValue.indexOf('!') === -1) { + const importedFilename = path.basename(sourceValue).split('.')[0]; + + Object.keys(node.specifiers).map((j) => { + if (!process.jsxDocs[sourceFilename]) { return false; } + if (sourceFilename === importedFilename) { return false; } + + if (node.specifiers[j].type === 'ImportDefaultSpecifier') { + // Direct import of element + const importedElementName = node.specifiers[j].local.name; + // if (process.jsxDocs[sourceFilename].uses[importedElementName]) { return false; } + if (importedElementName === importedFilename ) { + process.jsxDocs[sourceFilename].Using[importedElementName] = { + tagPath: sourceValue, + tagType: 'root', + tagLevel: getAtomicLevel(sourceValue) + }; + } + } + + if (node.specifiers[j].type === 'ImportSpecifier') { + // Mupltiple import of element and sub elements + const importedElementName = node.specifiers[j].imported.name; + // if (process.jsxDocs[sourceFilename].uses[importedElementName]) { return false; } + if (importedElementName === importedFilename) { + process.jsxDocs[sourceFilename].Using[importedElementName] = { + tagPath: sourceValue, + tagType: 'root', + tagLevel: getAtomicLevel(sourceValue) + }; + } else { + process.jsxDocs[sourceFilename].Using[importedElementName] = { + tagPath: sourceValue, + tagType: 'sub', + tagLevel: getAtomicLevel(sourceValue) + }; + } + } + + return false; + }); + } + + return false; + }); + } + } + }) } }; }); @@ -455,6 +550,252 @@ const ESMetrics = declare((api, opts) => { }; }); +const JSXMetrics = declare((api, opts) => { + process.jsxMetricsReset = () => { + return { + elements: { + all: 0, + root: 0, + sub: 0 + }, + props: { + all: 0, + string: 0, + element: 0, + func: 0, + node: 0, + oneOf: 0, + oneOfType: 0, + isRequired: 0 + }, + usage: { + all: 0, // total elements used within the project + sub: 0, // total sub elements being used + root: 0, // total main elements being used + atoms: 0, // total atom elements being used + molecules: 0, // total molecule elements being used + organisms: 0, // total organism elements being used + templates: 0 // total template elements being used + }, + examples: { + all: 0, // total examples within project + exported: 0, // total examples being exported to IO + reused: 0, // total examples being ran through Utils.getExample(); + atoms: 0, // total atom examples + molecules: 0, // total molecule examples + organisms: 0, // total organism examples + templates: 0 // total template examples + } + } + }; + + process.jsxMetrics = process.jsxMetricsReset(); + + // https://babeljs.io/docs/en/6.26.3/babel-types for all available babel AST types + const getComment = (prop) => (prop.leadingComments) ? Object.keys(prop.leadingComments).map((k) => prop.leadingComments[k].value).join(' ') : ''; + + const getPropTypes = (classProperties, elementName) => { + const collection = []; + + Object.keys(classProperties).map((i) => { + const classPropertyName = classProperties[i].key.name; + if (classPropertyName === 'propTypes') { + const propTypes = classProperties[i].value.properties; + Object.keys(propTypes).map((j) => { + const prop = propTypes[j]; + const propName = prop.key.name; + + + if (prop.value.object) { + const { object } = prop.value; + const { property } = prop.value; + collection.push({ + name: propName, + type: (object.property) ? object.property.name : property.name, + value: `${(object.name) ? object.name : `PropTypes.${object.property.name}`}.${property.name}`, + required: (object.property) ? property.name : false, + description: getComment(prop) + }) + } + + if (prop.value.callee) { + const { object } = prop.value.callee; + const { property } = prop.value.callee; + const { arguments } = prop.value; + + collection.push({ + name: propName, + type: (object.property) ? object.property.name : property.name, + value: `${object.name}.${property.name}([${ + Object.keys(arguments).map((k) => { + const { elements } = arguments[k]; + return Object.keys(elements).map((l) => { + return (elements[l].value) ? `'${elements[l].value}'` : `${elements[l].object.name}.${elements[l].property.name}`; + }); + }).join(', ') + }])`, + required: (object.property) ? property.name : false, + description: getComment(prop) + }); + } + }); + } + }); + + return collection; + }; + + return { + name: 'JSXMetrics', + visitor: { + Program(ast, file) { + this.cache++; + }, + Class(ast, file) { + if (ast.node.superClass.object.name === 'React') { + const fileName = getElementName(file.filename); + const elementName = ast.node.id.name; + const classProperties = ast.node.body.body; + const props = getPropTypes(classProperties, elementName); + + process.jsxMetrics.elements.all++; + + if (fileName === elementName) { + process.jsxMetrics.elements.root++; + } else { + process.jsxMetrics.elements.sub++; + } + + process.jsxMetrics.props.all += props.length; + + Object.keys(props).map((i) => { + if (props[i].type === 'string') { + process.jsxMetrics.props.string++; + } + if (props[i].type === 'element') { + process.jsxMetrics.props.element++; + } + if (props[i].type === 'function') { + process.jsxMetrics.props.func++; + } + if (props[i].type === 'node') { + process.jsxMetrics.props.node++; + } + if (props[i].type === 'oneOf') { + process.jsxMetrics.props.oneOf++; + } + if (props[i].type === 'oneOfType') { + process.jsxMetrics.props.oneOfType++; + } + if (props[i].type === 'isRequired') { + process.jsxMetrics.props.isRequired++; + } + }); + + /*// If you build it, they will come. + if (!process.jsxDocs[getElementName(file.filename)]) { + process.jsxDocs[getElementName(file.filename)] = {}; + } + + process.jsxDocs[getElementName(file.filename)][elementName] = { + description: getComment(ast.container), + props: getPropTypes(classProperties, elementName) + };*/ + } + }, + Declaration(ast, file) { + if (types.isImportDeclaration(ast)) { + const value = ast.node.source.value.toLowerCase(); + if ( + value.indexOf('.css') === -1 + && value.indexOf('.js') === -1 + && value.indexOf('.container') === -1 + && value.indexOf('.example') === -1 + ) { + // Determins used element types and levels (root or sub and atomic levels) + Object.keys(ast.container).map((i) => { + const node = ast.container[i]; + const sourceFilename = path.basename(ast.hub.file.opts.filename).split('.')[0]; + if (ast.hub.file.opts.filename.indexOf('guide') !== -1) { return false; } + + if (node.type === 'ImportDeclaration' && sourceFilename.indexOf('@guide') === -1) { + if (node.source) { + const sourceValue = node.source.value; + if ( + sourceValue && + sourceValue.indexOf('@guide') === -1 && + sourceValue.indexOf('@vars') === -1 && + sourceValue.indexOf('@src') === -1 && + sourceValue.indexOf('.json') === -1 && + sourceValue.indexOf('.jpg') === -1 && + sourceValue.indexOf('.svg') === -1 && + sourceValue.indexOf('.png') === -1 && + sourceValue.indexOf('.gif') === -1 && + sourceValue.indexOf('.ico') === -1 && + sourceValue.indexOf('.woff') === -1 && + sourceValue.indexOf('.woff2') === -1 && + sourceValue.indexOf('.ttf') === -1 && + sourceValue.indexOf('.eot') === -1 && + sourceValue.indexOf('!') === -1) { + const importedFilename = path.basename(sourceValue).split('.')[0]; + + Object.keys(node.specifiers).map((j) => { + if (node.specifiers[j].type === 'ImportDefaultSpecifier') { + // Direct import of element + const importedElementName = node.specifiers[j].local.name; + if (importedElementName === importedFilename) { + process.jsxMetrics.usage.root++; + } + } + + if (node.specifiers[j].type === 'ImportSpecifier') { + // Mupltiple import of element and sub elements + const importedElementName = node.specifiers[j].imported.name; + if (importedElementName === importedFilename) { + process.jsxMetrics.usage.root++; + } else { + process.jsxMetrics.usage.sub++; + } + } + + if (['ImportDefaultSpecifier', 'ImportSpecifier'].indexOf(node.specifiers[j].type) !== -1) { + process.jsxMetrics.usage.all++; + + if (value.indexOf('atoms') !== -1) { + process.jsxMetrics.usage.atoms++; + } + + if (value.indexOf('molecules') !== -1) { + process.jsxMetrics.usage.molecules++; + } + + if (value.indexOf('organisms') !== -1) { + process.jsxMetrics.usage.organisms++; + } + + if (value.indexOf('templates') !== -1) { + process.jsxMetrics.usage.templates++; + } + } + }); + } + } + } + }); + } + } + }, + Expression(ast, file) { + if (ast.node.name === 'Utils') { + if (ast.container.property.name.indexOf('getExample') !== -1) { + process.jsxMetrics.examples.reused++; + } + } + } + } + }; +}); + /* Helper plugin to compile our project metric and docs into guide.js */ @@ -466,8 +807,8 @@ class Bundle { files: [] }; - this.excludes = ['node_modules', '!', 'jsx', 'guide']; - this.includes = ['js', 'css', 'svg', 'jpg', 'png', 'gif', 'atoms', 'molecules', 'modifiers', 'organisms']; + this.excludes = ['node_modules', 'example.jsx', 'test.jsx', '!', 'guide']; + this.includes = ['js', 'jsx', 'css', 'svg', 'jpg', 'png', 'gif', 'atoms', 'molecules', 'modifiers', 'organisms']; } // Used to prevent unwanted file types into our file list buildup @@ -528,11 +869,13 @@ class Bundle { Object.keys(compilation.assets).map((i) => { if (i.indexOf('guide.js') !== -1) { this.stats.js = process.jsMetrics; + this.stats.jsx = process.jsxMetrics; this.stats.css = process.cssMetrics; + const source = ` var __stats__ = ${JSON.stringify(this.stats)}; - var __jsxDocs__ = ${JSON.stringify(process.jsxDocs)}; var __esDocs__ = ${JSON.stringify(process.esDocs)}; + var __jsxDocs__ = ${JSON.stringify(process.jsxDocs)}; \n ${compilation.assets[i].source()}; `; @@ -547,6 +890,7 @@ class Bundle { // The great memory leak prevention reset (DO NOT REMOVE!) process.jsMetrics = process.jsMetricsReset(); + process.jsxMetrics = process.jsxMetricsReset(); process.cssMetrics = process.cssMetricsReset(); } }); @@ -558,5 +902,6 @@ module.exports = { JSXDocs, ESDocs, ESMetrics, + JSXMetrics, Bundle }; diff --git a/build/guide/src/elements/molecules/Readme/Readme.Container.js b/build/guide/src/elements/molecules/Readme/Readme.Container.js index 16fccb7..7442ddf 100644 --- a/build/guide/src/elements/molecules/Readme/Readme.Container.js +++ b/build/guide/src/elements/molecules/Readme/Readme.Container.js @@ -21,12 +21,12 @@ export const GuideReadme = (el) => { const jsxPropsListing = () => { const collection = []; if (data.jsxDocs) { - Object.keys(data.jsxDocs).map((i, index) => { - const elementProps = data.jsxDocs[i].props; + Object.keys(data.jsxDocs.Tags).map((i, index) => { + const elementProps = data.jsxDocs.Tags[i].props; collection.push(`

<${i}>

-

${data.jsxDocs[i].description}

+

${data.jsxDocs.Tags[i].description}

diff --git a/build/guide/src/elements/organisms/Metrics/Metrics.Container.js b/build/guide/src/elements/organisms/Metrics/Metrics.Container.js index 8db3a1d..92eaec3 100644 --- a/build/guide/src/elements/organisms/Metrics/Metrics.Container.js +++ b/build/guide/src/elements/organisms/Metrics/Metrics.Container.js @@ -53,11 +53,13 @@ export const GuideMetrics = (el) => { JSAssetList: el.querySelector('.guide__welcome__assets-list.js'), CSSAssetList: el.querySelector('.guide__welcome__assets-list.css'), MediaAssetList: el.querySelector('.guide__welcome__assets-list.media'), + JSXAtomicList: el.querySelector('.atomic-jsx'), JSAtomicList: el.querySelector('.atomic-js'), CSSAtomicList: el.querySelector('.atomic-css'), MediaAtomicList: el.querySelector('.atomic-media'), cards: { all: el.querySelectorAll('.tabs__trigger'), + jsxSize: el.querySelector('.jsx-size'), jsSize: el.querySelector('.js-size'), cssSize: el.querySelector('.css-size'), mediaSize: el.querySelector('.media-size'), @@ -68,6 +70,7 @@ export const GuideMetrics = (el) => { totalErrors: el.querySelector('.total-errors') }, charts: { + JSXChart: el.querySelector('#jsx-chart'), JSChart: el.querySelector('#js-chart'), CSSChart: el.querySelector('#css-chart'), MediaChart: el.querySelector('#media-chart'), @@ -75,6 +78,32 @@ export const GuideMetrics = (el) => { TotalCSSChart: el.querySelector('#total-css'), TotalMediaChart: el.querySelector('#total-media') }, + jsxMetrics: { + roots: el.querySelector('.roots'), + subs: el.querySelector('.subs'), + props: el.querySelector('.props'), + strings: el.querySelector('.strings'), + elements: el.querySelector('.elements'), + funcs: el.querySelector('.funcs'), + nodes: el.querySelector('.nodes'), + oneOfs: el.querySelector('.oneOfs'), + oneOfTypes: el.querySelector('.oneOfTypes'), + isReuireds: el.querySelector('.isReuireds'), + used: el.querySelector('.used'), + usedRoots: el.querySelector('.used-roots'), + usedSubs: el.querySelector('.used-subs'), + usedAtoms: el.querySelector('.used-atoms'), + usedMolecules: el.querySelector('.used-molecules'), + usedOrganisms: el.querySelector('.used-organisms'), + usedTemplates: el.querySelector('.used-templates'), + examples: el.querySelector('.examples'), + exampleExports: el.querySelector('.example-exported'), + exampleReused: el.querySelector('.example-reused'), + exampleAtoms: el.querySelector('.example-atoms'), + exampleMolecules: el.querySelector('.example-molecules'), + exampleOrganisms: el.querySelector('.example-organisms'), + exampleTemplates: el.querySelector('.example-templates') + }, jsMetrics: { const: el.querySelector('.const'), lets: el.querySelector('.lets'), @@ -366,7 +395,47 @@ export const GuideMetrics = (el) => { return `${Math.round(total / 1000)}KB`; }; + const getRootTagTotal = (data) => Object.keys(data).map( + (i) => Object.keys(data[i].Tags).map( + (j) => ((i === j) ? 1 : 0) + ).reduce((a, b) => a + b, 0) + ).reduce((a, b) => a + b, 0); + + const getSubTagTotal = (data) => Object.keys(data).map( + (i) => Object.keys(data[i].Tags).map( + (j) => ((i !== j) ? 1 : 0) + ).reduce((a, b) => a + b, 0) + ).reduce((a, b) => a + b, 0); + + const getPropsTotal = (data, filter = false) => Object.keys(data).map( + (i) => Object.keys(data[i].Tags).map( + (j) => ( + (filter) + ? Object.keys(data[i].Tags[j].props).map( + (k) => ( + (data[i].Tags[j].props[k].type === filter) ? 1 : 0 + ) + ).reduce((a, b) => a + b, 0) + : data[i].Tags[j].props.length) + ).reduce((a, b) => a + b, 0) + ).reduce((a, b) => a + b, 0); + + const getUsedTagTotal = (data, filter = false, filterType = false) => Object.keys(data).map( + (i) => ( + (filter) + ? Object.keys(data[i].Using).map((j) => ( + (data[i].Using[j][filterType] === filter) ? 1 : 0 + )).reduce((a, b) => a + b, 0) + : Object.keys(data[i].Using).length + ) + ).reduce((a, b) => a + b, 0); + const init = () => { + // Install JSX Size card + ui.cards.jsxSize.innerHTML = getAssetsTotal(getFilteredData(__stats__, ['/*.jsx$']), 'JSX Size:'); + createAtomicList(ui.JSXAtomicList, getFilteredData(__stats__, ['/*.jsx$'])); + renderDoughnutChart(ui.charts.JSXChart, getFilteredData(__stats__, ['/*.jsx$']), 'Project JSX (files and atomic levels)'); + // Install JS Size card ui.cards.jsSize.innerHTML = getAssetsTotal(getFilteredData(__stats__, ['/*.js$']), 'JS Size:'); createAtomicList(ui.JSAtomicList, getFilteredData(__stats__, ['/*.js$'])); @@ -382,13 +451,35 @@ export const GuideMetrics = (el) => { createAtomicList(ui.MediaAtomicList, getFilteredData(__stats__, ['/*.svg', '/*.jpg', '/*.png'])); renderDoughnutChart(ui.charts.MediaChart, getFilteredData(__stats__, ['/*.svg', '/*.jpg', '/*.png']), 'Project Media (files and atomic levels)'); - if (process.env.NODE_ENV === 'development') { - // Install Total Builds card - // ui.cards.totalBuilds.innerHTML = `Build Counts / Time${__stats__.builds.count} / ${__stats__.builds.time}ms`; - - // Install Total Errors card - // ui.cards.totalErrors.innerHTML = `Build Fails${__stats__.builds.errors}`; - } + // Install JS Metrics + ui.jsxMetrics.roots.innerHTML = `${getRootTagTotal(__jsxDocs__)} / Root tags`; // eslint-disable-line + ui.jsxMetrics.subs.innerHTML = `${getSubTagTotal(__jsxDocs__)} / Sub tags`; // eslint-disable-line + + ui.jsxMetrics.props.innerHTML = `${getPropsTotal(__jsxDocs__)} / total props`; // eslint-disable-line + ui.jsxMetrics.strings.innerHTML = `${getPropsTotal(__jsxDocs__, 'string')} / propTypes.strings`; // eslint-disable-line + ui.jsxMetrics.elements.innerHTML = `${getPropsTotal(__jsxDocs__, 'element')} / propTypes.elements`; // eslint-disable-line + ui.jsxMetrics.funcs.innerHTML = `${getPropsTotal(__jsxDocs__, 'function')} / propTypes.functions`; // eslint-disable-line + ui.jsxMetrics.nodes.innerHTML = `${getPropsTotal(__jsxDocs__, 'node')} / propTypes.nodes`; // eslint-disable-line + ui.jsxMetrics.oneOfs.innerHTML = `${getPropsTotal(__jsxDocs__, 'oneOf')} / propTypes.oneOfs`; // eslint-disable-line + ui.jsxMetrics.oneOfTypes.innerHTML = `${getPropsTotal(__jsxDocs__, 'oneOfType')} / propTypes.oneOfTypes`; // eslint-disable-line + ui.jsxMetrics.isReuireds.innerHTML = `${getPropsTotal(__jsxDocs__, 'isRequired')} / propTypes.isRequired`; // eslint-disable-line + + ui.jsxMetrics.used.innerHTML = `${getUsedTagTotal(__jsxDocs__)} / used elements`; // eslint-disable-line + ui.jsxMetrics.usedRoots.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'root', 'tagType')} / used main elements`; // eslint-disable-line + ui.jsxMetrics.usedSubs.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'sub', 'tagType')} / used sub elements`; // eslint-disable-line + ui.jsxMetrics.usedAtoms.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'atoms', 'tagLevel')} / used atoms`; // eslint-disable-line + ui.jsxMetrics.usedMolecules.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'molecules', 'tagLevel')} / used molecules`; // eslint-disable-line + ui.jsxMetrics.usedOrganisms.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'organisms', 'tagLevel')} / used organisms`; // eslint-disable-line + ui.jsxMetrics.usedTemplates.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'templates', 'tagLevel')} / used templates`; // eslint-disable-line + + ui.jsxMetrics.examples.innerHTML = `${__stats__.jsx.examples.all} / examples`; + ui.jsxMetrics.exampleExports.innerHTML = `${__stats__.jsx.examples.exported} / exported examples`; + ui.jsxMetrics.exampleReused.innerHTML = `${__stats__.jsx.examples.reused} / reused examples`; + + ui.jsxMetrics.exampleAtoms.innerHTML = `${__stats__.jsx.examples.atoms} / atom examples`; + ui.jsxMetrics.exampleMolecules.innerHTML = `${__stats__.jsx.examples.molecules} / molecule examples`; + ui.jsxMetrics.exampleOrganisms.innerHTML = `${__stats__.jsx.examples.organisms} / organism examples`; + ui.jsxMetrics.exampleTemplates.innerHTML = `${__stats__.jsx.examples.templates} / template examples`; // Install JS Metrics ui.jsMetrics.variables.innerHTML = `${__stats__.js.variables.all} / variables`; diff --git a/build/guide/src/elements/organisms/Metrics/Metrics.css b/build/guide/src/elements/organisms/Metrics/Metrics.css index 18ad634..23fdb76 100644 --- a/build/guide/src/elements/organisms/Metrics/Metrics.css +++ b/build/guide/src/elements/organisms/Metrics/Metrics.css @@ -63,6 +63,7 @@ width: 100%; &.fall-flip { + margin: rem(5px); animation: 2s ease-in-out fall-flip forwards; } @@ -96,16 +97,21 @@ } &.guide__card:nth-child(1) { + background-color: #5a9af1; + color: var(--color-white); + } + + &.guide__card:nth-child(2) { background-color: #f1e05a; color: var(--color-black); } - &.guide__card:nth-child(2) { + &.guide__card:nth-child(3) { background-color: #563d7c; color: var(--color-white); } - &.guide__card:nth-child(3) { + &.guide__card:nth-child(4) { background-color: #90c185; color: var(--color-white); } diff --git a/build/guide/src/elements/organisms/Metrics/Metrics.jsx b/build/guide/src/elements/organisms/Metrics/Metrics.jsx index 32e7384..0866eed 100644 --- a/build/guide/src/elements/organisms/Metrics/Metrics.jsx +++ b/build/guide/src/elements/organisms/Metrics/Metrics.jsx @@ -21,6 +21,9 @@ export const Metrics = () => { + + + @@ -33,6 +36,57 @@ export const Metrics = () => { + {/* JSX React */} +
+ + + + + + + General JSX Metrics +
+
+
+
+ + Prop Metrics +
+
+
+
+
+
+
+
+
+
+ + Usage Metrics +
+
+
+
+
+
+
+
+
+ + Example Metrics +
+
+
+
+
+
+
+
+
+ + +
+ {/* JAVASCRIPT */}
diff --git a/package-lock.json b/package-lock.json index 7821260..46655ee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1208,14 +1208,22 @@ } }, "@babel/types": { - "version": "7.9.6", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.6.tgz", - "integrity": "sha512-qxXzvBO//jO9ZnoasKF1uJzHd2+M6Q2ZPIVfnFps8JJvXy0ZBbwbNOmE6SGIY5XOY6d1Bo5lb9d9RJ8nv3WSeA==", + "version": "7.10.3", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.3.tgz", + "integrity": "sha512-nZxaJhBXBQ8HVoIcGsf9qWep3Oh3jCENK54V4mRF7qaJabVsAYdbTtmSD8WmAp1R6ytPiu5apMwSXyxB1WlaBA==", "dev": true, "requires": { - "@babel/helper-validator-identifier": "^7.9.5", + "@babel/helper-validator-identifier": "^7.10.3", "lodash": "^4.17.13", "to-fast-properties": "^2.0.0" + }, + "dependencies": { + "@babel/helper-validator-identifier": { + "version": "7.10.3", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.3.tgz", + "integrity": "sha512-bU8JvtlYpJSBPuj1VUmKpFGaDZuLxASky3LhaKj3bmpSTY6VWooSM8msk+Z0CZoErFye2tlABF6yDkT3FOPAXw==", + "dev": true + } } }, "@jimp/bmp": { @@ -2003,50 +2011,6 @@ "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", "dev": true }, - "abstract-syntax-tree": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/abstract-syntax-tree/-/abstract-syntax-tree-2.7.0.tgz", - "integrity": "sha512-c12JhRqIQIkDEdO6riuWfplab3gOe0dPx17+XSpyyQcHpFV4S0BruHEeCFl0TcZQyU3m0KCV+Eut2nM2abGqtw==", - "dev": true, - "requires": { - "astring": "^1.3.0", - "asttv": "^1.0.1", - "esquery": "^1.0.1", - "estemplate": "^0.5.1", - "estraverse": "^4.2.0", - "meriyah": "^1.9.1", - "source-map": "^0.7.2", - "to-ast": "^1.0.0" - }, - "dependencies": { - "estemplate": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/estemplate/-/estemplate-0.5.1.tgz", - "integrity": "sha1-FxSp1GGQc4rJWLyv1J4CnNpWo54=", - "dev": true, - "requires": { - "esprima": "^2.7.2", - "estraverse": "^4.1.1" - } - }, - "source-map": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", - "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", - "dev": true - }, - "to-ast": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/to-ast/-/to-ast-1.0.0.tgz", - "integrity": "sha1-DEoxyMmO396arwGSx5S0yLEe4oc=", - "dev": true, - "requires": { - "ast-types": "^0.7.2", - "esprima": "^2.1.0" - } - } - } - }, "accepts": { "version": "1.3.7", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", @@ -2355,12 +2319,6 @@ "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=", "dev": true }, - "ast-types": { - "version": "0.7.8", - "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.7.8.tgz", - "integrity": "sha1-kC0uDWDQcb3NRtwRXhgJ7RHBOKk=", - "dev": true - }, "ast-types-flow": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz", @@ -2373,18 +2331,6 @@ "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==", "dev": true }, - "astring": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/astring/-/astring-1.4.3.tgz", - "integrity": "sha512-yJlJU/bmN820vL+cbWShu2YQU87dBP5V7BH2N4wODapRv27A2dZtUD0LgjP9lZENvPe9XRoSyWx+pZR6qKqNBw==", - "dev": true - }, - "asttv": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/asttv/-/asttv-1.0.1.tgz", - "integrity": "sha512-Ibk9v22jMFoK6yH09oOlea7SIwbDWDzT5nzO56VmCDM5s1sMP/FNqVAcimLuxtVnmgPa75Ffwre1EtQEbysZcg==", - "dev": true - }, "async": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", @@ -5703,12 +5649,6 @@ "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==", "dev": true }, - "esprima": { - "version": "2.7.3", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz", - "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=", - "dev": true - }, "esquery": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.3.1.tgz", @@ -9732,12 +9672,6 @@ "integrity": "sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==", "dev": true }, - "meriyah": { - "version": "1.9.12", - "resolved": "https://registry.npmjs.org/meriyah/-/meriyah-1.9.12.tgz", - "integrity": "sha512-EgnwghBfzhegstEg3GL17cyjXs/YZOzDGW4mDpiv+v4ZqZgfjNvjfjsAJ99IJMA3LyGvdC8nffZJRGX65FOqLQ==", - "dev": true - }, "methods": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", diff --git a/package.json b/package.json index 2dd34bc..509f1a1 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "@babel/preset-react": "^7.0.0", "@babel/register": "^7.5.5", "@babel/traverse": "^7.5.5", - "abstract-syntax-tree": "^2.4.0", + "@babel/types": "^7.10.3", "babel-eslint": "^10.0.3", "babel-loader": "^8.0.6", "clean-css": "^4.2.1", @@ -97,7 +97,7 @@ "file-loader": "^4.2.0", "fs-extra": "^8.1.0", "html-loader": "^0.5.5", - "html-webpack-plugin": "^4.0.0-beta.5", + "html-webpack-plugin": "^4.3.0", "image-webpack-loader": "^5.0.0", "loader-utils": "^2.0.0", "mini-css-extract-plugin": "^0.8.0", diff --git a/src/elements/atoms/Button/Button.example.jsx b/src/elements/atoms/Button/Button.example.jsx index 0601eff..1b7f8b5 100644 --- a/src/elements/atoms/Button/Button.example.jsx +++ b/src/elements/atoms/Button/Button.example.jsx @@ -28,10 +28,7 @@ export default [{ name: 'Default styling', component: ( - ), - options: { - background: '#666' - } + ) }, { name: 'Linked button', component: ( diff --git a/src/elements/atoms/Button/Button.jsx b/src/elements/atoms/Button/Button.jsx index 9718d4e..5be56d9 100644 --- a/src/elements/atoms/Button/Button.jsx +++ b/src/elements/atoms/Button/Button.jsx @@ -19,7 +19,9 @@ export class Button extends React.Component { /** If used, button becomes an anchor tag with button styles */ href: PropTypes.string, /** Children nodes being passed through */ - children: PropTypes.node + children: PropTypes.node, + /** Testing is all */ + newThing: PropTypes.string }; static defaultProps = { From 950c99daafd94302a8dc96fd214f4856900dec38 Mon Sep 17 00:00:00 2001 From: drolsen Date: Wed, 8 Jul 2020 08:48:58 -0700 Subject: [PATCH 2/3] Adding fixes for JSX and ECMA metrics and docs --- build/configs/css/css.config.plugins.js | 7 +- build/configs/js/.eslintrc | 2 + build/configs/js/js.config.js | 9 +- build/configs/js/js.config.plugins.js | 565 +++++++----------- build/configs/webpack/alias.config.js | 1 + .../organisms/Metrics/Metrics.Container.js | 247 ++++---- .../elements/organisms/Metrics/Metrics.css | 2 +- .../elements/organisms/Metrics/Metrics.jsx | 6 +- package-lock.json | 288 ++++++++- package.json | 4 + 10 files changed, 649 insertions(+), 482 deletions(-) diff --git a/build/configs/css/css.config.plugins.js b/build/configs/css/css.config.plugins.js index 7e95082..92cc682 100644 --- a/build/configs/css/css.config.plugins.js +++ b/build/configs/css/css.config.plugins.js @@ -583,7 +583,7 @@ const MetricsCSS = postcss.plugin('postcss-metrics', (options) => { } }; - return root => { + return (root) => { const __metrics = process.cssMetricsReset(); let metrics = {...__metrics}; @@ -611,7 +611,8 @@ const MetricsCSS = postcss.plugin('postcss-metrics', (options) => { let marginLeft = []; let marginRight = []; - if (root.source.input.css.indexOf('.guide__menu') === -1) { + if (root.source.input.css.indexOf('.guide') === -1) { + console.log(root.source.input.origin(1, 1)); const pseudoClasses = [ ':active', ':checked', @@ -657,7 +658,7 @@ const MetricsCSS = postcss.plugin('postcss-metrics', (options) => { root.walkRules(rule => { metrics.rules++; - if (rule.selector) { + if (rule.selector) { /* Selectors */ metrics.selectors++; diff --git a/build/configs/js/.eslintrc b/build/configs/js/.eslintrc index be25478..68a5f47 100644 --- a/build/configs/js/.eslintrc +++ b/build/configs/js/.eslintrc @@ -5,6 +5,7 @@ "arrow-parens": ["error", "always"], "camelcase": 0, "comma-dangle": ["error", "never"], + "guard-for-in": 0, "import/extensions": 0, "import/no-extraneous-dependencies": 0, "import/no-named-as-default": 0, @@ -21,6 +22,7 @@ "no-new": 0, "no-param-reassign": 0, "no-plusplus": 0, + "no-restricted-syntax": ["off", "forInStatement", "ForOfStatement"], "no-template-curly-in-string": 0, "react/destructuring-assignment": 0, "react/forbid-prop-types": 0, diff --git a/build/configs/js/js.config.js b/build/configs/js/js.config.js index 1bf965e..1a81a27 100644 --- a/build/configs/js/js.config.js +++ b/build/configs/js/js.config.js @@ -5,12 +5,16 @@ const path = require('path'); const Package = require('../../../package.json'); const CopyWebpackPlugin = require('copy-webpack-plugin'); -const { ESDocs, JSXDocs, ESMetrics, JSXMetrics, Bundle } = require('./js.config.plugins.js'); +const { ESDocs, JSXDocs, ESMetrics, Bundle } = require('./js.config.plugins.js'); const babelPlugins = [ '@babel/plugin-proposal-object-rest-spread', // (see: https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread) '@babel/plugin-proposal-class-properties', // (see: https://babeljs.io/docs/en/babel-plugin-transform-class-properties/) - '@babel/plugin-transform-react-display-name' // (see: https://www.npmjs.com/package/babel-plugin-add-react-displayname) + '@babel/plugin-transform-react-display-name', // (see: https://www.npmjs.com/package/babel-plugin-add-react-displayname) + '@babel/plugin-proposal-nullish-coalescing-operator', // (see: https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator) + '@babel/plugin-proposal-async-generator-functions', // (see: https://babeljs.io/docs/en/babel-plugin-proposal-async-generator-functions) + '@babel/plugin-transform-for-of', // (see: https://babeljs.io/docs/en/babel-plugin-transform-for-of) + '@babel/plugin-proposal-optional-chaining' // (see: https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining) ]; const babelOptions = { @@ -65,7 +69,6 @@ module.exports = { 'compact': false, 'presets': ['@babel/preset-react'], 'plugins': [ - JSXMetrics, JSXDocs, ...babelPlugins ] diff --git a/build/configs/js/js.config.plugins.js b/build/configs/js/js.config.plugins.js index c0ff1ca..9843c33 100644 --- a/build/configs/js/js.config.plugins.js +++ b/build/configs/js/js.config.plugins.js @@ -8,11 +8,12 @@ const path = require('path'); const { declare } = require('@babel/helper-plugin-utils'); const types = require('@babel/types'); const traverse = require('@babel/traverse').default; +const generator = require('@babel/generator').default; const getElementName = (pathing) => path.basename(path.resolve(__dirname, pathing)).split('.')[0]; -// Unslated's ECMA Script comment based docs +// Used to collect all metrics and docs from element .container.js files const ESDocs = declare((api, opts) => { process.esDocsReset = () => {}; process.esDocs = {}; @@ -83,17 +84,26 @@ const ESDocs = declare((api, opts) => { name: 'ESDocs', visitor: { Program(ast, file) { - if (file.filename.indexOf('.container.js') !== -1) { + if (file.filename.indexOf('.container') !== -1) { comments = ast.container.comments; // Grab elements name from file.filename const elementName = getElementName(file.filename); // Start element's collection entry point - process.esDocs[elementName] = {}; - process.esDocs[elementName].events = []; - process.esDocs[elementName].methods = []; - process.esDocs[elementName].selectors = []; + process.esDocs[elementName] = { + events: [], + methods: [], + expressions: [], + selectors: [], + variables: [], + utils: [], + loops: [], + promises: { + async: [], + await: [] + } + }; } }, Expression(ast, file) { @@ -110,8 +120,10 @@ const ESDocs = declare((api, opts) => { process.esDocs[elementName].methods.push({ name: container[i].id.name, type: ast.type, + kind: ast.kind, + params: getMethodParams(container[0]), comment: commentToSourceMatching(comments, ast, container[i].id.name), - params: getMethodParams(container[0]) + line: container.loc.start.line // line in document this is expressed }); } }); @@ -120,8 +132,10 @@ const ESDocs = declare((api, opts) => { process.esDocs[elementName].methods.push({ name: container.id.name, type: ast.type, + kind: ast.kind, + params: getMethodParams(container), comment: commentToSourceMatching(comments, ast, container.id.name), - params: getMethodParams(container) + line: container.loc.start.line // line in document this is expressed }); } } @@ -131,8 +145,9 @@ const ESDocs = declare((api, opts) => { process.esDocs[elementName].methods.push({ name: ast.name, type: ast.type, + params: getMethodParams(container), comment: commentToSourceMatching(comments, ast), - params: getMethodParams(container) + line: container.loc.start.line // line in document this is expressed }); } @@ -154,11 +169,12 @@ const ESDocs = declare((api, opts) => { process.esDocs[elementName].events.push({ file: file.filename, - line: container.loc.start.line, // line in document this is expressed element: element, eventType: args[0].value, // `click`, `mouseup`, keyup etc. callbackType: args[1].type, // callback kind `function(){}` or `() => {}` callbackParams: getEventParams(args[1].params), // params passed to listener callback + comments: commentToSourceMatching(comments, ast), + line: container.loc.start.line // line in document this is expressed }); } @@ -172,20 +188,22 @@ const ESDocs = declare((api, opts) => { if (args[0].type === 'StringLiteral') { process.esDocs[elementName].selectors.push({ file: file.filename, - line: container.loc.start.line, // line in document this is expressed element: callee.object.name, selector: args[0].value, // '#someId .someClass etc.' - selectorType: ast.node.property.name + selectorType: ast.node.property.name, + comments: commentToSourceMatching(comments, ast), + line: container.loc.start.line // line in document this is expressed }); } if (args[0].type === 'TemplateLiteral') { process.esDocs[elementName].selectors.push({ file: file.filename, - line: container.loc.start.line, // line in document this is expressed element: callee.object.name, selector: getSelectorTemplateLiteral(args[0].expressions, args[0].quasis), // templateliteral variable usage - selectorType: ast.node.property.name + selectorType: ast.node.property.name, + comments: commentToSourceMatching(comments, ast), + line: container.loc.start.line // line in document this is expressed }); } } @@ -207,16 +225,143 @@ const ESDocs = declare((api, opts) => { method.used.push(container.expression.callee.loc.start.line); } }); - } } } } + }, + VariableDeclaration(ast, file) { + if (file.filename.indexOf('.container') !== -1) { + const elementName = getElementName(file.filename); + process.esDocs[elementName].variables.push({ + type: ast.type, + kind: ast.node.kind, + name: ast.node.declarations[0].id.name, + comments: commentToSourceMatching(comments, ast), + line: ast.node.local + }); + } + }, + CallExpression(ast, file) { + const elementName = getElementName(file.filename); + if (file.filename.indexOf('.container') !== -1) { + // sometimes x.y(arguments) othertimes y(arguments) + process.esDocs[elementName].expressions.push({ + type: ast.node.type, + object: (ast.node.callee.object) ? ast.node.callee.object.name : null, + property: (ast.node.callee.property) ? ast.node.callee.property.name : null, + identifier: (ast.node.callee.name) ? ast.node.callee.name : null, + arguments: (ast.node.arguments) ? Object.keys(ast.node.arguments).map((i) => ast.node.arguments[i].type) : [], + comments: commentToSourceMatching(comments, ast), + line: ast.node.loc.start.line + }); + } + }, + AssignmentExpression(ast, file) { + const elementName = getElementName(file.filename); + if (file.filename.indexOf('.container') !== -1) { + process.esDocs[elementName].expressions.push({ + type: ast.node.type, + left: `${ast.node.left.object.name}.${ast.node.left.property.name}`, + operator: ast.node.operator, + comments: commentToSourceMatching(comments, ast), + line: ast.node.loc.start.line + }); + } + }, + MemberExpression(ast, file) { + const elementName = getElementName(file.filename); + if (file.filename.indexOf('.container') !== -1) { + process.esDocs[elementName].expressions.push({ + type: ast.node.type, + object: ast.node.object.name, + property: ast.node.property.name, + comments: commentToSourceMatching(comments, ast), + line: ast.node.loc.start.line + }); + + /* Utils Usage */ + if (ast.node.name === 'Utils') { + process.esDocs[elementName].utils.push({ + object: ast.node.name, + property: ast.node.property.name, + comments: commentToSourceMatching(comments, ast), + line: ast.node.loc.start.line + }); + } + + // Object Methods (keys, map) + if (ast.node.property.name === 'keys') { + process.esDocs[elementName].loops.push({ + type: 'ObjectKeysExpression', + keys: Object.keys(ast.container.arguments).map((i) => ast.container.arguments[i].property.name), + comments: commentToSourceMatching(comments, ast), + line: ast.node.loc.start.line + }); + } + } + }, + ForStatement(ast, file) { + const elementName = getElementName(file.filename); + if (file.filename.indexOf('container.js') !== -1) { + Object.keys(ast.container).map((i) => { + if (ast.container[i].type === 'ForStatement') { + process.esDocs[elementName].loops.push({ + type: 'ForStatement', + test: `${generator(ast.container[i].init, {}, ast.container[i].init).code} ${generator(ast.container[i].test, {}, ast.container[i].test).code} ${generator(ast.container[i].update, {}, ast.container[i].update).code}`, + comments: commentToSourceMatching(comments, ast), + line: ast.node.loc.start.line + }); + } + }); + } + }, + ForInStatement(ast, file) { + const elementName = getElementName(file.filename); + if (file.filename.indexOf('container.js') !== -1) { + Object.keys(ast.container).map((i) => { + if (ast.container[i].type === 'ForInStatement') { + process.esDocs[elementName].loops.push({ + type: 'ForInStatement', + test: `${generator(ast.container[i].left, {}, ast.container[i].left).code.replace(';', '')} in ${generator(ast.container[i].right, {}, ast.container[i].right).code}`, + comments: commentToSourceMatching(comments, ast), + line: ast.node.loc.start.line + }); + } + }); + } + }, + ForOfStatement(ast, file) { + const elementName = getElementName(file.filename); + if (file.filename.indexOf('container.js') !== -1) { + Object.keys(ast.container).map((i) => { + if (ast.container[i].type === 'ForOfStatement') { + process.esDocs[elementName].loops.push({ + type: 'ForOfStatement', + test: `${generator(ast.container[i].left, {}, ast.container[i].left).code.replace(';', '')} of ${generator(ast.container[i].right, {}, ast.container[i].right).code}`, + comments: commentToSourceMatching(comments, ast), + line: ast.node.loc.start.line + }); + } + }); + } + }, + WhileStatement(ast, file) { + const elementName = getElementName(file.filename); + if (file.filename.indexOf('container.js') !== -1) { + process.esDocs[elementName].loops.push({ + type: 'WhileStatement', + test: generator(ast.container.test, {}, ast.container.test), + comments: commentToSourceMatching(comments, ast), + line: ast.node.loc.start.line + }); + } } } }; }); +// Used to collect all metrcis and docs from element .jsx and example.jsx files const JSXDocs = declare((api, opts) => { process.jsxDocsReset = () => {}; process.jsxDocs = {}; @@ -294,9 +439,20 @@ const JSXDocs = declare((api, opts) => { return false; }; + // https://babeljs.io/docs/en/6.26.3/babel-types for all available babel AST types + // pre: used to make targeted updates to the collected data during dev builds + // visitor: used as the actual data collection all build types + // post: used as cleanup point for any collected data return { name: 'JSXDocs', - pre(state) {}, + pre(state) { + // Targeted reset for dev builds + const elementName = path.basename(state.hub.file.opts.filename).split('.')[0]; + if (process.jsxDocs[elementName]) { + process.jsxDocs[elementName].Using = {}; + process.jsxDocs[elementName].Reusing = {}; + } + }, visitor: { Program(ast, file) {}, Class(ast, file) { @@ -308,8 +464,10 @@ const JSXDocs = declare((api, opts) => { if (!process.jsxDocs[getElementName(file.filename)]) { process.jsxDocs[getElementName(file.filename)] = { Level: undefined, + Examples: 0, Tags: {}, - Using: {} + Using: {}, + Reusing: {} }; } @@ -405,12 +563,42 @@ const JSXDocs = declare((api, opts) => { return false; }); } + }, + CallExpression: (ast) => { + /* Capture getExample() usage metrics */ + if (ast.node.callee) { + if (ast.node.callee.property) { + if (ast.node.callee.property.name === 'getExample') { + if (ast.node.arguments) { + const sourceFilename = path.basename(ast.hub.file.opts.filename).split('.')[0]; + + const reusedExampleFileName = ast.node.arguments[0].name; + const resuedExampleIndex = ast.node.arguments[1].value; + + process.jsxDocs[sourceFilename].Reusing[reusedExampleFileName] = { + exampleIndex: resuedExampleIndex + } + } + } + } + } + }, + ExportDefaultDeclaration: (ast) => { + /* Captures element's example.jsx file metrics */ + const { filename } = ast.hub.file.opts; + if (filename.indexOf('.example') !== -1) { + const elementName = path.basename(filename).split('.')[0]; + if (process.jsxDocs[elementName]) { + process.jsxDocs[elementName].Examples = ast.node.declaration.elements[0].properties[0].value.elements.length; + } + } } }) } }; }); +// Fuck you stupid waste of time method! const ESMetrics = declare((api, opts) => { process.jsMetricsReset = () => { return { @@ -454,344 +642,13 @@ const ESMetrics = declare((api, opts) => { process.jsMetrics = process.jsMetricsReset(); // https://babeljs.io/docs/en/6.26.3/babel-types for all available babel AST types + // pre: used to make targeted updates to the collected data during dev builds + // visitor: used as the actual data collection all build types + // post: used as cleanup point for any collected data return { name: "metrics", visitor: { - Declaration(ast, file) { - if (file.filename.indexOf('container.js') !== -1) { - if (ast.type === 'VariableDeclaration') { - if (ast.node.kind === 'let') { // please note let === var - process.jsMetrics.variables.all++; - process.jsMetrics.variables.lets++; - } - - if (ast.node.kind === 'const') { - process.jsMetrics.variables.all++; - process.jsMetrics.variables.const++; - } - } - } - }, - Expression(ast, file) { - if (file.filename.indexOf('container.js') !== -1) { - /* Arrow Methods */ - if (ast.type === 'ArrowFunctionExpression') { - process.jsMetrics.methods.all++; - process.jsMetrics.methods.arrows++; - } - - if (ast.type === 'FunctionExpression') { - process.jsMetrics.methods.all++; - process.jsMetrics.methods.functions++; - } - - if (ast.type === 'CallExpression') { - process.jsMetrics.expressions.all++; - process.jsMetrics.expressions.calls++; - } - - if (ast.type === 'AssignmentExpression') { - process.jsMetrics.expressions.all++; - process.jsMetrics.expressions.assignments++; - } - - if (ast.type === 'MemberExpression') { - process.jsMetrics.expressions.all++; - process.jsMetrics.expressions.members++; - - /* Utils Usage */ - if (ast.node.name === 'Utils') { - // All Utils used - process.jsMetrics.utils.all++; - - // XHR Usage - if (ast.node.property.name === 'XHR') { - process.jsMetrics.utils.xhr++; - } - - // Fetch Usage - if (ast.node.property.name === 'Fetch') { - process.jsMetrics.utils.fetch++; - } - } - - // Object Methods (keys, map) - if (ast.node.property.name === 'keys') { - process.jsMetrics.loops.all++; - process.jsMetrics.loops.object++; - } - } - } - }, - For(ast, file) { - if (file.filename.indexOf('container.js') !== -1) { - process.jsMetrics.loops.all++; - - if (ast.type === 'ForStatement') { - process.jsMetrics.loops.for++; - } - - if (ast.type === 'ForInStatement') { - process.jsMetrics.loops.forIn++; - } - - if (ast.type === 'ForOfStatement') { - process.jsMetrics.loops.forOf++; - } - } - }, - While(ast, file) { - if (file.filename.indexOf('container.js') !== -1) { - process.jsMetrics.loops.all++; - process.jsMetrics.loops.while++; - } - } - } - }; -}); - -const JSXMetrics = declare((api, opts) => { - process.jsxMetricsReset = () => { - return { - elements: { - all: 0, - root: 0, - sub: 0 - }, - props: { - all: 0, - string: 0, - element: 0, - func: 0, - node: 0, - oneOf: 0, - oneOfType: 0, - isRequired: 0 - }, - usage: { - all: 0, // total elements used within the project - sub: 0, // total sub elements being used - root: 0, // total main elements being used - atoms: 0, // total atom elements being used - molecules: 0, // total molecule elements being used - organisms: 0, // total organism elements being used - templates: 0 // total template elements being used - }, - examples: { - all: 0, // total examples within project - exported: 0, // total examples being exported to IO - reused: 0, // total examples being ran through Utils.getExample(); - atoms: 0, // total atom examples - molecules: 0, // total molecule examples - organisms: 0, // total organism examples - templates: 0 // total template examples - } - } - }; - - process.jsxMetrics = process.jsxMetricsReset(); - - // https://babeljs.io/docs/en/6.26.3/babel-types for all available babel AST types - const getComment = (prop) => (prop.leadingComments) ? Object.keys(prop.leadingComments).map((k) => prop.leadingComments[k].value).join(' ') : ''; - - const getPropTypes = (classProperties, elementName) => { - const collection = []; - - Object.keys(classProperties).map((i) => { - const classPropertyName = classProperties[i].key.name; - if (classPropertyName === 'propTypes') { - const propTypes = classProperties[i].value.properties; - Object.keys(propTypes).map((j) => { - const prop = propTypes[j]; - const propName = prop.key.name; - - - if (prop.value.object) { - const { object } = prop.value; - const { property } = prop.value; - collection.push({ - name: propName, - type: (object.property) ? object.property.name : property.name, - value: `${(object.name) ? object.name : `PropTypes.${object.property.name}`}.${property.name}`, - required: (object.property) ? property.name : false, - description: getComment(prop) - }) - } - - if (prop.value.callee) { - const { object } = prop.value.callee; - const { property } = prop.value.callee; - const { arguments } = prop.value; - - collection.push({ - name: propName, - type: (object.property) ? object.property.name : property.name, - value: `${object.name}.${property.name}([${ - Object.keys(arguments).map((k) => { - const { elements } = arguments[k]; - return Object.keys(elements).map((l) => { - return (elements[l].value) ? `'${elements[l].value}'` : `${elements[l].object.name}.${elements[l].property.name}`; - }); - }).join(', ') - }])`, - required: (object.property) ? property.name : false, - description: getComment(prop) - }); - } - }); - } - }); - - return collection; - }; - - return { - name: 'JSXMetrics', - visitor: { - Program(ast, file) { - this.cache++; - }, - Class(ast, file) { - if (ast.node.superClass.object.name === 'React') { - const fileName = getElementName(file.filename); - const elementName = ast.node.id.name; - const classProperties = ast.node.body.body; - const props = getPropTypes(classProperties, elementName); - - process.jsxMetrics.elements.all++; - - if (fileName === elementName) { - process.jsxMetrics.elements.root++; - } else { - process.jsxMetrics.elements.sub++; - } - - process.jsxMetrics.props.all += props.length; - Object.keys(props).map((i) => { - if (props[i].type === 'string') { - process.jsxMetrics.props.string++; - } - if (props[i].type === 'element') { - process.jsxMetrics.props.element++; - } - if (props[i].type === 'function') { - process.jsxMetrics.props.func++; - } - if (props[i].type === 'node') { - process.jsxMetrics.props.node++; - } - if (props[i].type === 'oneOf') { - process.jsxMetrics.props.oneOf++; - } - if (props[i].type === 'oneOfType') { - process.jsxMetrics.props.oneOfType++; - } - if (props[i].type === 'isRequired') { - process.jsxMetrics.props.isRequired++; - } - }); - - /*// If you build it, they will come. - if (!process.jsxDocs[getElementName(file.filename)]) { - process.jsxDocs[getElementName(file.filename)] = {}; - } - - process.jsxDocs[getElementName(file.filename)][elementName] = { - description: getComment(ast.container), - props: getPropTypes(classProperties, elementName) - };*/ - } - }, - Declaration(ast, file) { - if (types.isImportDeclaration(ast)) { - const value = ast.node.source.value.toLowerCase(); - if ( - value.indexOf('.css') === -1 - && value.indexOf('.js') === -1 - && value.indexOf('.container') === -1 - && value.indexOf('.example') === -1 - ) { - // Determins used element types and levels (root or sub and atomic levels) - Object.keys(ast.container).map((i) => { - const node = ast.container[i]; - const sourceFilename = path.basename(ast.hub.file.opts.filename).split('.')[0]; - if (ast.hub.file.opts.filename.indexOf('guide') !== -1) { return false; } - - if (node.type === 'ImportDeclaration' && sourceFilename.indexOf('@guide') === -1) { - if (node.source) { - const sourceValue = node.source.value; - if ( - sourceValue && - sourceValue.indexOf('@guide') === -1 && - sourceValue.indexOf('@vars') === -1 && - sourceValue.indexOf('@src') === -1 && - sourceValue.indexOf('.json') === -1 && - sourceValue.indexOf('.jpg') === -1 && - sourceValue.indexOf('.svg') === -1 && - sourceValue.indexOf('.png') === -1 && - sourceValue.indexOf('.gif') === -1 && - sourceValue.indexOf('.ico') === -1 && - sourceValue.indexOf('.woff') === -1 && - sourceValue.indexOf('.woff2') === -1 && - sourceValue.indexOf('.ttf') === -1 && - sourceValue.indexOf('.eot') === -1 && - sourceValue.indexOf('!') === -1) { - const importedFilename = path.basename(sourceValue).split('.')[0]; - - Object.keys(node.specifiers).map((j) => { - if (node.specifiers[j].type === 'ImportDefaultSpecifier') { - // Direct import of element - const importedElementName = node.specifiers[j].local.name; - if (importedElementName === importedFilename) { - process.jsxMetrics.usage.root++; - } - } - - if (node.specifiers[j].type === 'ImportSpecifier') { - // Mupltiple import of element and sub elements - const importedElementName = node.specifiers[j].imported.name; - if (importedElementName === importedFilename) { - process.jsxMetrics.usage.root++; - } else { - process.jsxMetrics.usage.sub++; - } - } - - if (['ImportDefaultSpecifier', 'ImportSpecifier'].indexOf(node.specifiers[j].type) !== -1) { - process.jsxMetrics.usage.all++; - - if (value.indexOf('atoms') !== -1) { - process.jsxMetrics.usage.atoms++; - } - - if (value.indexOf('molecules') !== -1) { - process.jsxMetrics.usage.molecules++; - } - - if (value.indexOf('organisms') !== -1) { - process.jsxMetrics.usage.organisms++; - } - - if (value.indexOf('templates') !== -1) { - process.jsxMetrics.usage.templates++; - } - } - }); - } - } - } - }); - } - } - }, - Expression(ast, file) { - if (ast.node.name === 'Utils') { - if (ast.container.property.name.indexOf('getExample') !== -1) { - process.jsxMetrics.examples.reused++; - } - } - } } }; }); @@ -869,7 +726,6 @@ class Bundle { Object.keys(compilation.assets).map((i) => { if (i.indexOf('guide.js') !== -1) { this.stats.js = process.jsMetrics; - this.stats.jsx = process.jsxMetrics; this.stats.css = process.cssMetrics; const source = ` @@ -890,8 +746,10 @@ class Bundle { // The great memory leak prevention reset (DO NOT REMOVE!) process.jsMetrics = process.jsMetricsReset(); - process.jsxMetrics = process.jsxMetricsReset(); process.cssMetrics = process.cssMetricsReset(); + + this.stats.js = process.jsMetricsReset(); + this.stats.css = process.cssMetricsReset(); } }); }); @@ -902,6 +760,5 @@ module.exports = { JSXDocs, ESDocs, ESMetrics, - JSXMetrics, Bundle }; diff --git a/build/configs/webpack/alias.config.js b/build/configs/webpack/alias.config.js index fa0cc4a..b455e77 100644 --- a/build/configs/webpack/alias.config.js +++ b/build/configs/webpack/alias.config.js @@ -29,6 +29,7 @@ module.exports = { '@guideModifiers': path.resolve(__dirname, '../../guide/src/elements/modifiers/'), '@guideOrganisms': path.resolve(__dirname, '../../guide/src/elements/organisms/'), '@sly': path.resolve(__dirname, '../../../src/elements/modifiers/Sly/Sly'), + '@razor': path.resolve(__dirname, '../../../src/elements/modifiers/Razor/Razor'), Utils: path.resolve(__dirname, '../../../src/utilities.jsx'), GuideUtils: path.resolve(__dirname, '../../guide/guide.utilities.jsx') }, diff --git a/build/guide/src/elements/organisms/Metrics/Metrics.Container.js b/build/guide/src/elements/organisms/Metrics/Metrics.Container.js index 92eaec3..338dba4 100644 --- a/build/guide/src/elements/organisms/Metrics/Metrics.Container.js +++ b/build/guide/src/elements/organisms/Metrics/Metrics.Container.js @@ -413,7 +413,9 @@ export const GuideMetrics = (el) => { (filter) ? Object.keys(data[i].Tags[j].props).map( (k) => ( - (data[i].Tags[j].props[k].type === filter) ? 1 : 0 + (data[i].Tags[j].props[k].type === filter) // eslint-disable-line + ? 1 + : (filter === 'isRequired' && data[i].Tags[j].props[k].required) ? 1 : 0 // eslint-disable-line ) ).reduce((a, b) => a + b, 0) : data[i].Tags[j].props.length) @@ -430,6 +432,50 @@ export const GuideMetrics = (el) => { ) ).reduce((a, b) => a + b, 0); + const getReusedTagTotal = (data, filter = false) => Object.keys(data).map( + (i) => Object.keys(data[i].Reusing).map( + (j) => ( + (filter) // eslint-disable-line + ? (data[j].Level === filter) ? 1 : 0 // eslint-disable-line + : Object.keys(data[i].Reusing).length) + ).reduce((a, b) => a + b, 0) + ).reduce((a, b) => a + b, 0); + + const getExamplesTotal = (data, filter = false) => Object.keys(data).map( + (i) => ((filter) // eslint-disable-line + ? (data[i].Level === filter) ? data[i].Examples : 0 // eslint-disable-line + : data[i].Examples + ) + ).reduce((a, b) => a + b, 0); + + const getVariablesTotal = (data, filter = false) => Object.keys(data).map( + (i) => ((filter) // eslint-disable-line + ? Object.keys(data[i].variables).map((j) => (data[i].variables[j].kind === filter) ? 1 : 0).reduce((a, b) => a + b, 0) // eslint-disable-line + : data[i].variables.length + ) + ).reduce((a, b) => a + b, 0); + + const getLoopsTotal = (data, filter = false) => Object.keys(data).map( + (i) => ((filter) // eslint-disable-line + ? Object.keys(data[i].loops).map((j) => (data[i].loops[j].type === filter) ? 1 : 0).reduce((a, b) => a + b, 0) // eslint-disable-line + : data[i].loops.length + ) + ).reduce((a, b) => a + b, 0); + + const getMethodsTotal = (data, filter = false) => Object.keys(data).map( + (i) => ((filter) // eslint-disable-line + ? Object.keys(data[i].methods).map((j) => (data[i].methods[j].type === filter) ? 1 : 0).reduce((a, b) => a + b, 0) // eslint-disable-line + : data[i].methods.length + ) + ).reduce((a, b) => a + b, 0); + + const getExpressionsTotal = (data, filter = false) => Object.keys(data).map( + (i) => ((filter) // eslint-disable-line + ? Object.keys(data[i].expressions).map((j) => (data[i].expressions[j].type === filter) ? 1 : 0).reduce((a, b) => a + b, 0) // eslint-disable-line + : data[i].expressions.length + ) + ).reduce((a, b) => a + b, 0); + const init = () => { // Install JSX Size card ui.cards.jsxSize.innerHTML = getAssetsTotal(getFilteredData(__stats__, ['/*.jsx$']), 'JSX Size:'); @@ -452,114 +498,113 @@ export const GuideMetrics = (el) => { renderDoughnutChart(ui.charts.MediaChart, getFilteredData(__stats__, ['/*.svg', '/*.jpg', '/*.png']), 'Project Media (files and atomic levels)'); // Install JS Metrics - ui.jsxMetrics.roots.innerHTML = `${getRootTagTotal(__jsxDocs__)} / Root tags`; // eslint-disable-line - ui.jsxMetrics.subs.innerHTML = `${getSubTagTotal(__jsxDocs__)} / Sub tags`; // eslint-disable-line - - ui.jsxMetrics.props.innerHTML = `${getPropsTotal(__jsxDocs__)} / total props`; // eslint-disable-line - ui.jsxMetrics.strings.innerHTML = `${getPropsTotal(__jsxDocs__, 'string')} / propTypes.strings`; // eslint-disable-line - ui.jsxMetrics.elements.innerHTML = `${getPropsTotal(__jsxDocs__, 'element')} / propTypes.elements`; // eslint-disable-line - ui.jsxMetrics.funcs.innerHTML = `${getPropsTotal(__jsxDocs__, 'function')} / propTypes.functions`; // eslint-disable-line - ui.jsxMetrics.nodes.innerHTML = `${getPropsTotal(__jsxDocs__, 'node')} / propTypes.nodes`; // eslint-disable-line - ui.jsxMetrics.oneOfs.innerHTML = `${getPropsTotal(__jsxDocs__, 'oneOf')} / propTypes.oneOfs`; // eslint-disable-line - ui.jsxMetrics.oneOfTypes.innerHTML = `${getPropsTotal(__jsxDocs__, 'oneOfType')} / propTypes.oneOfTypes`; // eslint-disable-line - ui.jsxMetrics.isReuireds.innerHTML = `${getPropsTotal(__jsxDocs__, 'isRequired')} / propTypes.isRequired`; // eslint-disable-line - - ui.jsxMetrics.used.innerHTML = `${getUsedTagTotal(__jsxDocs__)} / used elements`; // eslint-disable-line - ui.jsxMetrics.usedRoots.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'root', 'tagType')} / used main elements`; // eslint-disable-line - ui.jsxMetrics.usedSubs.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'sub', 'tagType')} / used sub elements`; // eslint-disable-line - ui.jsxMetrics.usedAtoms.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'atoms', 'tagLevel')} / used atoms`; // eslint-disable-line - ui.jsxMetrics.usedMolecules.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'molecules', 'tagLevel')} / used molecules`; // eslint-disable-line - ui.jsxMetrics.usedOrganisms.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'organisms', 'tagLevel')} / used organisms`; // eslint-disable-line - ui.jsxMetrics.usedTemplates.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'templates', 'tagLevel')} / used templates`; // eslint-disable-line - - ui.jsxMetrics.examples.innerHTML = `${__stats__.jsx.examples.all} / examples`; - ui.jsxMetrics.exampleExports.innerHTML = `${__stats__.jsx.examples.exported} / exported examples`; - ui.jsxMetrics.exampleReused.innerHTML = `${__stats__.jsx.examples.reused} / reused examples`; - - ui.jsxMetrics.exampleAtoms.innerHTML = `${__stats__.jsx.examples.atoms} / atom examples`; - ui.jsxMetrics.exampleMolecules.innerHTML = `${__stats__.jsx.examples.molecules} / molecule examples`; - ui.jsxMetrics.exampleOrganisms.innerHTML = `${__stats__.jsx.examples.organisms} / organism examples`; - ui.jsxMetrics.exampleTemplates.innerHTML = `${__stats__.jsx.examples.templates} / template examples`; + ui.jsxMetrics.roots.innerHTML = `${getRootTagTotal(__jsxDocs__)} / Root elements`; // eslint-disable-line + ui.jsxMetrics.subs.innerHTML = `${getSubTagTotal(__jsxDocs__)} / Root__Sub elements`; // eslint-disable-line + + ui.jsxMetrics.props.innerHTML = `${getPropsTotal(__jsxDocs__)} / Total props`; // eslint-disable-line + ui.jsxMetrics.strings.innerHTML = `${getPropsTotal(__jsxDocs__, 'string')} / propTypes.strings`; // eslint-disable-line + ui.jsxMetrics.elements.innerHTML = `${getPropsTotal(__jsxDocs__, 'element')} / propTypes.elements`; // eslint-disable-line + ui.jsxMetrics.funcs.innerHTML = `${getPropsTotal(__jsxDocs__, 'function')} / propTypes.functions`; // eslint-disable-line + ui.jsxMetrics.nodes.innerHTML = `${getPropsTotal(__jsxDocs__, 'node')} / propTypes.nodes`; // eslint-disable-line + ui.jsxMetrics.oneOfs.innerHTML = `${getPropsTotal(__jsxDocs__, 'oneOf')} / propTypes.oneOfs`; // eslint-disable-line + ui.jsxMetrics.oneOfTypes.innerHTML = `${getPropsTotal(__jsxDocs__, 'oneOfType')} / propTypes.oneOfTypes`; // eslint-disable-line + ui.jsxMetrics.isReuireds.innerHTML = `${getPropsTotal(__jsxDocs__, 'isRequired')} / propTypes.isRequired`; // eslint-disable-line + + ui.jsxMetrics.used.innerHTML = `${getUsedTagTotal(__jsxDocs__)} / Total used`; // eslint-disable-line + ui.jsxMetrics.usedRoots.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'root', 'tagType')} / Root elements`; // eslint-disable-line + ui.jsxMetrics.usedSubs.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'sub', 'tagType')} / Sub elements`; // eslint-disable-line + ui.jsxMetrics.usedAtoms.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'atoms', 'tagLevel')} / Atoms`; // eslint-disable-line + ui.jsxMetrics.usedMolecules.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'molecules', 'tagLevel')} / Molecules used`; // eslint-disable-line + ui.jsxMetrics.usedOrganisms.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'organisms', 'tagLevel')} / Organisms used`; // eslint-disable-line + ui.jsxMetrics.usedTemplates.innerHTML = `${getUsedTagTotal(__jsxDocs__, 'templates', 'tagLevel')} / Templates used`; // eslint-disable-line + + ui.jsxMetrics.examples.innerHTML = `${getExamplesTotal(__jsxDocs__)} / Total examples`; // eslint-disable-line + ui.jsxMetrics.exampleExports.innerHTML = `FIXME / Exported`; // eslint-disable-line + ui.jsxMetrics.exampleReused.innerHTML = `${getReusedTagTotal(__jsxDocs__)} / Utils.getExample`; // eslint-disable-line + + ui.jsxMetrics.exampleAtoms.innerHTML = `${getExamplesTotal(__jsxDocs__, 'atoms')} / Atoms examples`; // eslint-disable-line + ui.jsxMetrics.exampleMolecules.innerHTML = `${getExamplesTotal(__jsxDocs__, 'molecules')} / Molecules examples`; // eslint-disable-line + ui.jsxMetrics.exampleOrganisms.innerHTML = `${getExamplesTotal(__jsxDocs__, 'organisms')} / Organisms examples`; // eslint-disable-line + ui.jsxMetrics.exampleTemplates.innerHTML = `${getExamplesTotal(__jsxDocs__, 'templates')} / Templates examples`; // eslint-disable-line // Install JS Metrics - ui.jsMetrics.variables.innerHTML = `${__stats__.js.variables.all} / variables`; - ui.jsMetrics.loops.innerHTML = `${__stats__.js.loops.all} / loops`; - ui.jsMetrics.methods.innerHTML = `${__stats__.js.methods.all} / functions`; - ui.jsMetrics.expressions.innerHTML = `${__stats__.js.expressions.all} / expressions`; + ui.jsMetrics.variables.innerHTML = `${getVariablesTotal(__esDocs__)} / Variables`; // eslint-disable-line + ui.jsMetrics.loops.innerHTML = `${getLoopsTotal(__esDocs__)} / Loops`; // eslint-disable-line + ui.jsMetrics.methods.innerHTML = `${getMethodsTotal(__esDocs__)} / Functions`; // eslint-disable-line + ui.jsMetrics.expressions.innerHTML = `${getExpressionsTotal(__esDocs__)} / Expressions`; // eslint-disable-line - ui.jsMetrics.const.innerHTML = `${__stats__.js.variables.const} / const`; - ui.jsMetrics.lets.innerHTML = `${__stats__.js.variables.lets} / lets`; + ui.jsMetrics.const.innerHTML = `${getVariablesTotal(__esDocs__, 'const')} / const`; // eslint-disable-line + ui.jsMetrics.lets.innerHTML = `${getVariablesTotal(__esDocs__, 'let')} / lets`; // eslint-disable-line - ui.jsMetrics.for.innerHTML = `${__stats__.js.loops.for} / for() loops`; - ui.jsMetrics.forIn.innerHTML = `${__stats__.js.loops.forIn} / forIn() loops`; - ui.jsMetrics.forOf.innerHTML = `${__stats__.js.loops.forOf} / forOf() loops`; - ui.jsMetrics.while.innerHTML = `${__stats__.js.loops.while} / while() loops`; - ui.jsMetrics.object.innerHTML = `${__stats__.js.loops.object} / object.key() loops`; + ui.jsMetrics.for.innerHTML = `${getLoopsTotal(__esDocs__, 'ForStatement')} / for() Loops`; // eslint-disable-line + ui.jsMetrics.forIn.innerHTML = `${getLoopsTotal(__esDocs__, 'ForInStatement')} / forIn() Loops`; // eslint-disable-line + ui.jsMetrics.forOf.innerHTML = `${getLoopsTotal(__esDocs__, 'ForOfStatement')} / forOf() Loops`; // eslint-disable-line + ui.jsMetrics.while.innerHTML = `${getLoopsTotal(__esDocs__, 'WhileStatement')} / while() Loops`; // eslint-disable-line + ui.jsMetrics.object.innerHTML = `${getLoopsTotal(__esDocs__, 'ObjectKeysExpression')} / object.key() Loops`; // eslint-disable-line - ui.jsMetrics.functions.innerHTML = `${__stats__.js.methods.functions} / Functions()`; - ui.jsMetrics.arrows.innerHTML = `${__stats__.js.methods.arrows} / (Arrows) =>`; + ui.jsMetrics.functions.innerHTML = `${getMethodsTotal(__esDocs__, 'FunctionExpression')} / Functions()`; // eslint-disable-line + ui.jsMetrics.arrows.innerHTML = `${getMethodsTotal(__esDocs__, 'ArrowFunctionExpression')} / (Arrows) =>`; // eslint-disable-line - ui.jsMetrics.calls.innerHTML = `${__stats__.js.expressions.calls} / x() calls`; - ui.jsMetrics.members.innerHTML = `${__stats__.js.expressions.members} / x.y() members`; - ui.jsMetrics.assignments.innerHTML = `${__stats__.js.expressions.assignments} / x = y assignments`; + ui.jsMetrics.calls.innerHTML = `${getExpressionsTotal(__esDocs__, 'CallExpression')} / x() Calls`; // eslint-disable-line + ui.jsMetrics.members.innerHTML = `${getExpressionsTotal(__esDocs__, 'MemberExpression')} / x.y() Members`; // eslint-disable-line + ui.jsMetrics.assignments.innerHTML = `${getExpressionsTotal(__esDocs__, 'AssignmentExpression')} / x = y Assignments`; // eslint-disable-line // Install CSS Metrics - ui.cssMetrics.selectors.innerHTML = `${__stats__.css.selectors} / selectors`; - ui.cssMetrics.declarations.innerHTML = `${__stats__.css.selectors} / declarations`; - ui.cssMetrics.declarations.innerHTML = `${__stats__.css.declarations} / declarations`; - ui.cssMetrics.properties.innerHTML = `${__stats__.css.properties} / properties`; - ui.cssMetrics.ids.innerHTML = `${__stats__.css.ids} / ids`; - ui.cssMetrics.classes.innerHTML = `${__stats__.css.classes} / classes`; - ui.cssMetrics.pseudoClass.innerHTML = `${__stats__.css.pseudo.class} / pseudo class`; - ui.cssMetrics.pseudoElement.innerHTML = `${__stats__.css.pseudo.element} / pseudo element`; - - ui.cssMetrics.display.innerHTML = `${__stats__.css.layout.display} / display`; - ui.cssMetrics.float.innerHTML = `${__stats__.css.layout.float} / float`; - ui.cssMetrics.width.innerHTML = `${__stats__.css.layout.width} / width`; - ui.cssMetrics.height.innerHTML = `${__stats__.css.layout.height} / height`; - ui.cssMetrics.maxWidth.innerHTML = `${__stats__.css.layout.maxWidth} / max-width`; - ui.cssMetrics.minWidth.innerHTML = `${__stats__.css.layout.minWidth} / min-width`; - ui.cssMetrics.maxHeight.innerHTML = `${__stats__.css.layout.maxHeight} / max-height`; - ui.cssMetrics.minHeight.innerHTML = `${__stats__.css.layout.minHeight} / min-height`; - - ui.cssMetrics.color.innerHTML = `${__stats__.css.skin.color} / color`; - ui.cssMetrics.backgroundColor.innerHTML = `${__stats__.css.skin.backgroundColor} / background-color`; - ui.cssMetrics.borderColor.innerHTML = `${__stats__.css.skin.borderColor} / border-color`; - ui.cssMetrics.boxShadow.innerHTML = `${__stats__.css.skin.boxShadow} / box-shadow`; - - ui.cssMetrics.family.innerHTML = `${__stats__.css.typography.family} / font-family`; - ui.cssMetrics.size.innerHTML = `${__stats__.css.typography.size} / font-size`; - ui.cssMetrics.weight.innerHTML = `${__stats__.css.typography.weight} / font-weight`; - ui.cssMetrics.alignment.innerHTML = `${__stats__.css.typography.alignment} / text-align`; - ui.cssMetrics.lineHeight.innerHTML = `${__stats__.css.typography.lineHeight} / line-height`; - ui.cssMetrics.letterSpace.innerHTML = `${__stats__.css.typography.letterSpace} / letter-spacing`; - ui.cssMetrics.decoration.innerHTML = `${__stats__.css.typography.decoration} / decoration`; - ui.cssMetrics.transform.innerHTML = `${__stats__.css.typography.transform} / transform`; - ui.cssMetrics.shadow.innerHTML = `${__stats__.css.typography.shadow} / shadow`; - - ui.cssMetrics.spacingPadding.innerHTML = `${__stats__.css.spacing.padding.all} / padding`; - ui.cssMetrics.spacingPaddingTop.innerHTML = `${__stats__.css.spacing.padding.top} / padding-top`; - ui.cssMetrics.spacingPaddingRight.innerHTML = `${__stats__.css.spacing.padding.right} / padding-right`; - ui.cssMetrics.spacingPaddingBottom.innerHTML = `${__stats__.css.spacing.padding.bottom} / padding-bottom`; - ui.cssMetrics.spacingPaddingLeft.innerHTML = `${__stats__.css.spacing.padding.left} / padding-left`; - - ui.cssMetrics.spacingMargin.innerHTML = `${__stats__.css.spacing.margin.all} / margin`; - ui.cssMetrics.spacingMarginTop.innerHTML = `${__stats__.css.spacing.margin.top} / margin-top`; - ui.cssMetrics.spacingMarginRight.innerHTML = `${__stats__.css.spacing.margin.right} / margin-right`; - ui.cssMetrics.spacingMarginBottom.innerHTML = `${__stats__.css.spacing.margin.bottom} / margin-bottom`; - ui.cssMetrics.spacingMarginLeft.innerHTML = `${__stats__.css.spacing.margin.left} / margin-left`; - - ui.cssMetrics.resetPadding.innerHTML = `${__stats__.css.resets.padding.all} / padding`; - ui.cssMetrics.resetPaddingTop.innerHTML = `${__stats__.css.resets.padding.top} / padding-top`; - ui.cssMetrics.resetPaddingRight.innerHTML = `${__stats__.css.resets.padding.right} / padding-right`; - ui.cssMetrics.resetPaddingBottom.innerHTML = `${__stats__.css.resets.padding.bottom} / padding-bottom`; - ui.cssMetrics.resetPaddingLeft.innerHTML = `${__stats__.css.resets.padding.left} / padding-left`; - - ui.cssMetrics.resetMargin.innerHTML = `${__stats__.css.resets.margin.all} / margin`; - ui.cssMetrics.resetMarginTop.innerHTML = `${__stats__.css.resets.margin.top} / margin-top`; - ui.cssMetrics.resetMarginRight.innerHTML = `${__stats__.css.resets.margin.right} / margin-right`; - ui.cssMetrics.resetMarginBottom.innerHTML = `${__stats__.css.resets.margin.bottom} / margin-bottom`; - ui.cssMetrics.resetMarginLeft.innerHTML = `${__stats__.css.resets.margin.left} / margin-left`; + ui.cssMetrics.selectors.innerHTML = `${__stats__.css.selectors} / Selectors`; + ui.cssMetrics.declarations.innerHTML = `${__stats__.css.selectors} / Declarations`; + ui.cssMetrics.properties.innerHTML = `${__stats__.css.properties} / Properties`; + ui.cssMetrics.ids.innerHTML = `${__stats__.css.ids} / #ids`; + ui.cssMetrics.classes.innerHTML = `${__stats__.css.classes} / .classes`; + ui.cssMetrics.pseudoClass.innerHTML = `${__stats__.css.pseudo.class} / Pseudo class`; + ui.cssMetrics.pseudoElement.innerHTML = `${__stats__.css.pseudo.element} / Pseudo element`; + + ui.cssMetrics.display.innerHTML = `${__stats__.css.layout.display} / Display`; + ui.cssMetrics.float.innerHTML = `${__stats__.css.layout.float} / Float`; + ui.cssMetrics.width.innerHTML = `${__stats__.css.layout.width} / Width`; + ui.cssMetrics.height.innerHTML = `${__stats__.css.layout.height} / Height`; + ui.cssMetrics.maxWidth.innerHTML = `${__stats__.css.layout.maxWidth} / Max-width`; + ui.cssMetrics.minWidth.innerHTML = `${__stats__.css.layout.minWidth} / Min-width`; + ui.cssMetrics.maxHeight.innerHTML = `${__stats__.css.layout.maxHeight} / Max-height`; + ui.cssMetrics.minHeight.innerHTML = `${__stats__.css.layout.minHeight} / Min-height`; + + ui.cssMetrics.color.innerHTML = `${__stats__.css.skin.color} / Color`; + ui.cssMetrics.backgroundColor.innerHTML = `${__stats__.css.skin.backgroundColor} / Background-color`; + ui.cssMetrics.borderColor.innerHTML = `${__stats__.css.skin.borderColor} / Border-color`; + ui.cssMetrics.boxShadow.innerHTML = `${__stats__.css.skin.boxShadow} / Box-shadow`; + + ui.cssMetrics.family.innerHTML = `${__stats__.css.typography.family} / Font-family`; + ui.cssMetrics.size.innerHTML = `${__stats__.css.typography.size} / Font-size`; + ui.cssMetrics.weight.innerHTML = `${__stats__.css.typography.weight} / Font-weight`; + ui.cssMetrics.alignment.innerHTML = `${__stats__.css.typography.alignment} / Text-align`; + ui.cssMetrics.lineHeight.innerHTML = `${__stats__.css.typography.lineHeight} / Line-height`; + ui.cssMetrics.letterSpace.innerHTML = `${__stats__.css.typography.letterSpace} / Letter-spacing`; + ui.cssMetrics.decoration.innerHTML = `${__stats__.css.typography.decoration} / Decoration`; + ui.cssMetrics.transform.innerHTML = `${__stats__.css.typography.transform} / Transform`; + ui.cssMetrics.shadow.innerHTML = `${__stats__.css.typography.shadow} / Shadow`; + + ui.cssMetrics.spacingPadding.innerHTML = `${__stats__.css.spacing.padding.all} / Padding`; + ui.cssMetrics.spacingPaddingTop.innerHTML = `${__stats__.css.spacing.padding.top} / Padding-top`; + ui.cssMetrics.spacingPaddingRight.innerHTML = `${__stats__.css.spacing.padding.right} / Padding-right`; + ui.cssMetrics.spacingPaddingBottom.innerHTML = `${__stats__.css.spacing.padding.bottom} / Padding-bottom`; + ui.cssMetrics.spacingPaddingLeft.innerHTML = `${__stats__.css.spacing.padding.left} / Padding-left`; + + ui.cssMetrics.spacingMargin.innerHTML = `${__stats__.css.spacing.margin.all} / Margin`; + ui.cssMetrics.spacingMarginTop.innerHTML = `${__stats__.css.spacing.margin.top} / Margin-top`; + ui.cssMetrics.spacingMarginRight.innerHTML = `${__stats__.css.spacing.margin.right} / Margin-right`; + ui.cssMetrics.spacingMarginBottom.innerHTML = `${__stats__.css.spacing.margin.bottom} / Margin-bottom`; + ui.cssMetrics.spacingMarginLeft.innerHTML = `${__stats__.css.spacing.margin.left} / Margin-left`; + + ui.cssMetrics.resetPadding.innerHTML = `${__stats__.css.resets.padding.all} / Padding`; + ui.cssMetrics.resetPaddingTop.innerHTML = `${__stats__.css.resets.padding.top} / Padding-top`; + ui.cssMetrics.resetPaddingRight.innerHTML = `${__stats__.css.resets.padding.right} / Padding-right`; + ui.cssMetrics.resetPaddingBottom.innerHTML = `${__stats__.css.resets.padding.bottom} / Padding-bottom`; + ui.cssMetrics.resetPaddingLeft.innerHTML = `${__stats__.css.resets.padding.left} / Padding-left`; + + ui.cssMetrics.resetMargin.innerHTML = `${__stats__.css.resets.margin.all} / Margin`; + ui.cssMetrics.resetMarginTop.innerHTML = `${__stats__.css.resets.margin.top} / Margin-top`; + ui.cssMetrics.resetMarginRight.innerHTML = `${__stats__.css.resets.margin.right} / Margin-right`; + ui.cssMetrics.resetMarginBottom.innerHTML = `${__stats__.css.resets.margin.bottom} / Margin-bottom`; + ui.cssMetrics.resetMarginLeft.innerHTML = `${__stats__.css.resets.margin.left} / Margin-left`; ui.cssMetrics.compDisplay.innerHTML = `Display
${__stats__.css.comparison.layout.display.unique} Unique ${__stats__.css.comparison.layout.display.repeated} Repeated`; ui.cssMetrics.compFloat.innerHTML = `Float
${__stats__.css.comparison.layout.float.unique} Unique ${__stats__.css.comparison.layout.float.repeated} Repeated`; diff --git a/build/guide/src/elements/organisms/Metrics/Metrics.css b/build/guide/src/elements/organisms/Metrics/Metrics.css index 23fdb76..d4f5062 100644 --- a/build/guide/src/elements/organisms/Metrics/Metrics.css +++ b/build/guide/src/elements/organisms/Metrics/Metrics.css @@ -31,7 +31,7 @@ align-items: flex-start; .guide__card__body { position: sticky; - align-self: top; + align-self: bottom; top: 0; bottom: 0; width: 100%; diff --git a/build/guide/src/elements/organisms/Metrics/Metrics.jsx b/build/guide/src/elements/organisms/Metrics/Metrics.jsx index 0866eed..29f57d0 100644 --- a/build/guide/src/elements/organisms/Metrics/Metrics.jsx +++ b/build/guide/src/elements/organisms/Metrics/Metrics.jsx @@ -50,7 +50,7 @@ export const Metrics = () => {
- Prop Metrics + JSX Prop Metrics
@@ -62,7 +62,7 @@ export const Metrics = () => {
- Usage Metrics + JSX Usage Metrics
@@ -73,7 +73,7 @@ export const Metrics = () => {
- Example Metrics + JSX Example Metrics
diff --git a/package-lock.json b/package-lock.json index 46655ee..1988039 100644 --- a/package-lock.json +++ b/package-lock.json @@ -62,6 +62,37 @@ } } }, + "@babel/generator": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.4.tgz", + "integrity": "sha512-toLIHUIAgcQygFZRAQcsLQV3CBuX6yOIru1kJk/qqqvcRmZrYe6WavZTSG+bB8MxhnL9YPf+pKQfuiP161q7ng==", + "dev": true, + "requires": { + "@babel/types": "^7.10.4", + "jsesc": "^2.5.1", + "lodash": "^4.17.13", + "source-map": "^0.5.0" + }, + "dependencies": { + "@babel/helper-validator-identifier": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", + "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==", + "dev": true + }, + "@babel/types": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.4.tgz", + "integrity": "sha512-UTCFOxC3FsFHb7lkRMVvgLzaRVamXuAs2Tz4wajva4WxtVY82eZeaUBtC2Zt95FU9TiznuC0Zk35tsim8jeVpg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "lodash": "^4.17.13", + "to-fast-properties": "^2.0.0" + } + } + } + }, "@babel/helper-annotate-as-pure": { "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz", @@ -434,14 +465,145 @@ "dev": true }, "@babel/plugin-proposal-async-generator-functions": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.8.3.tgz", - "integrity": "sha512-NZ9zLv848JsV3hs8ryEh7Uaz/0KsmPLqv0+PdkDJL1cJy0K4kOCFa8zc1E3mp+RHPQcpdfb/6GovEsW4VDrOMw==", + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.4.tgz", + "integrity": "sha512-MJbxGSmejEFVOANAezdO39SObkURO5o/8b6fSH6D1pi9RZQt+ldppKPXfqgUWpSQ9asM6xaSaSJIaeWMDRP0Zg==", "dev": true, "requires": { - "@babel/helper-plugin-utils": "^7.8.3", - "@babel/helper-remap-async-to-generator": "^7.8.3", + "@babel/helper-plugin-utils": "^7.10.4", + "@babel/helper-remap-async-to-generator": "^7.10.4", "@babel/plugin-syntax-async-generators": "^7.8.0" + }, + "dependencies": { + "@babel/code-frame": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", + "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==", + "dev": true, + "requires": { + "@babel/highlight": "^7.10.4" + } + }, + "@babel/helper-annotate-as-pure": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz", + "integrity": "sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==", + "dev": true, + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-function-name": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz", + "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.10.4", + "@babel/template": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz", + "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==", + "dev": true, + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-plugin-utils": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz", + "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==", + "dev": true + }, + "@babel/helper-remap-async-to-generator": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.10.4.tgz", + "integrity": "sha512-86Lsr6NNw3qTNl+TBcF1oRZMaVzJtbWTyTko+CQL/tvNvcGYEFKbLXDPxtW0HKk3McNOk4KzY55itGWCAGK5tg==", + "dev": true, + "requires": { + "@babel/helper-annotate-as-pure": "^7.10.4", + "@babel/helper-wrap-function": "^7.10.4", + "@babel/template": "^7.10.4", + "@babel/traverse": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz", + "integrity": "sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==", + "dev": true, + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-validator-identifier": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", + "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==", + "dev": true + }, + "@babel/helper-wrap-function": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz", + "integrity": "sha512-6py45WvEF0MhiLrdxtRjKjufwLL1/ob2qDJgg5JgNdojBAZSAKnAjkyOCNug6n+OBl4VW76XjvgSFTdaMcW0Ug==", + "dev": true, + "requires": { + "@babel/helper-function-name": "^7.10.4", + "@babel/template": "^7.10.4", + "@babel/traverse": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/highlight": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz", + "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.4.tgz", + "integrity": "sha512-8jHII4hf+YVDsskTF6WuMB3X4Eh+PsUkC2ljq22so5rHvH+T8BzyL94VOdyFLNR8tBSVXOTbNHOKpR4TfRxVtA==", + "dev": true + }, + "@babel/traverse": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.4.tgz", + "integrity": "sha512-aSy7p5THgSYm4YyxNGz6jZpXf+Ok40QF3aA2LyIONkDHpAcJzDUqlCKXv6peqYUs2gmic849C/t2HKw2a2K20Q==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/generator": "^7.10.4", + "@babel/helper-function-name": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.10.4", + "@babel/parser": "^7.10.4", + "@babel/types": "^7.10.4", + "debug": "^4.1.0", + "globals": "^11.1.0", + "lodash": "^4.17.13" + } + }, + "@babel/types": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.4.tgz", + "integrity": "sha512-UTCFOxC3FsFHb7lkRMVvgLzaRVamXuAs2Tz4wajva4WxtVY82eZeaUBtC2Zt95FU9TiznuC0Zk35tsim8jeVpg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "lodash": "^4.17.13", + "to-fast-properties": "^2.0.0" + } + } } }, "@babel/plugin-proposal-class-properties": { @@ -475,13 +637,21 @@ } }, "@babel/plugin-proposal-nullish-coalescing-operator": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz", - "integrity": "sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==", + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz", + "integrity": "sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw==", "dev": true, "requires": { - "@babel/helper-plugin-utils": "^7.8.3", + "@babel/helper-plugin-utils": "^7.10.4", "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0" + }, + "dependencies": { + "@babel/helper-plugin-utils": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz", + "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==", + "dev": true + } } }, "@babel/plugin-proposal-numeric-separator": { @@ -516,13 +686,21 @@ } }, "@babel/plugin-proposal-optional-chaining": { - "version": "7.9.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz", - "integrity": "sha512-NDn5tu3tcv4W30jNhmc2hyD5c56G6cXx4TesJubhxrJeCvuuMpttxr0OnNCqbZGhFjLrg+NIhxxC+BK5F6yS3w==", + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.10.4.tgz", + "integrity": "sha512-ZIhQIEeavTgouyMSdZRap4VPPHqJJ3NEs2cuHs5p0erH+iz6khB0qfgU8g7UuJkG88+fBMy23ZiU+nuHvekJeQ==", "dev": true, "requires": { - "@babel/helper-plugin-utils": "^7.8.3", + "@babel/helper-plugin-utils": "^7.10.4", "@babel/plugin-syntax-optional-chaining": "^7.8.0" + }, + "dependencies": { + "@babel/helper-plugin-utils": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz", + "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==", + "dev": true + } } }, "@babel/plugin-proposal-unicode-property-regex": { @@ -728,12 +906,20 @@ } }, "@babel/plugin-transform-for-of": { - "version": "7.9.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.9.0.tgz", - "integrity": "sha512-lTAnWOpMwOXpyDx06N+ywmF3jNbafZEqZ96CGYabxHrxNX8l5ny7dt4bK/rGwAh9utyP2b2Hv7PlZh1AAS54FQ==", + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.4.tgz", + "integrity": "sha512-ItdQfAzu9AlEqmusA/65TqJ79eRcgGmpPPFvBnGILXZH975G0LNjP1yjHvGgfuCxqrPPueXOPe+FsvxmxKiHHQ==", "dev": true, "requires": { - "@babel/helper-plugin-utils": "^7.8.3" + "@babel/helper-plugin-utils": "^7.10.4" + }, + "dependencies": { + "@babel/helper-plugin-utils": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz", + "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==", + "dev": true + } } }, "@babel/plugin-transform-function-name": { @@ -1176,6 +1362,62 @@ "regenerator-runtime": "^0.13.4" } }, + "@babel/template": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz", + "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/parser": "^7.10.4", + "@babel/types": "^7.10.4" + }, + "dependencies": { + "@babel/code-frame": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", + "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==", + "dev": true, + "requires": { + "@babel/highlight": "^7.10.4" + } + }, + "@babel/helper-validator-identifier": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", + "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==", + "dev": true + }, + "@babel/highlight": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz", + "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.4.tgz", + "integrity": "sha512-8jHII4hf+YVDsskTF6WuMB3X4Eh+PsUkC2ljq22so5rHvH+T8BzyL94VOdyFLNR8tBSVXOTbNHOKpR4TfRxVtA==", + "dev": true + }, + "@babel/types": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.4.tgz", + "integrity": "sha512-UTCFOxC3FsFHb7lkRMVvgLzaRVamXuAs2Tz4wajva4WxtVY82eZeaUBtC2Zt95FU9TiznuC0Zk35tsim8jeVpg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "lodash": "^4.17.13", + "to-fast-properties": "^2.0.0" + } + } + } + }, "@babel/traverse": { "version": "7.9.6", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.9.6.tgz", @@ -1226,6 +1468,12 @@ } } }, + "@figma/plugin-typings": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/@figma/plugin-typings/-/plugin-typings-1.15.0.tgz", + "integrity": "sha512-Lr6QShIKlQNW9qdnneGr5+TIXH+EvapyfDvaaZHj7rACqIEslkZmH1mV4AmQHEs9FK5rqJMmKfSkNUNM2fztPg==", + "dev": true + }, "@jimp/bmp": { "version": "0.9.8", "resolved": "https://registry.npmjs.org/@jimp/bmp/-/bmp-0.9.8.tgz", @@ -14527,6 +14775,12 @@ "is-typedarray": "^1.0.0" } }, + "typescript": { + "version": "3.9.6", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.6.tgz", + "integrity": "sha512-Pspx3oKAPJtjNwE92YS05HQoY7z2SFyOpHo9MqJor3BXAGNaPUs83CuVp9VISFkSjyRfiTpmKuAYGJB7S7hOxw==", + "dev": true + }, "uglify-js": { "version": "3.4.10", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz", diff --git a/package.json b/package.json index 509f1a1..eada4e6 100644 --- a/package.json +++ b/package.json @@ -69,8 +69,12 @@ "devDependencies": { "@babel/core": "^7.5.5", "@babel/parser": "^7.5.5", + "@babel/plugin-proposal-async-generator-functions": "^7.10.4", "@babel/plugin-proposal-class-properties": "^7.5.5", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4", "@babel/plugin-proposal-object-rest-spread": "^7.5.5", + "@babel/plugin-proposal-optional-chaining": "^7.10.4", + "@babel/plugin-transform-for-of": "^7.10.4", "@babel/plugin-transform-react-display-name": "^7.2.0", "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", From 769364a789dbc3b546870147f0f79dab8099384e Mon Sep 17 00:00:00 2001 From: drolsen Date: Wed, 8 Jul 2020 15:56:37 -0700 Subject: [PATCH 3/3] Fixing the output of razor static exports and adding razor modifier with examples --- build/configs/css/.csslintrc | 4 +- build/configs/css/css.config.js | 2 +- build/configs/css/css.config.plugins.js | 187 +++++----- build/configs/js/.eslintrc | 5 +- build/configs/js/js.config.plugins.js | 4 - build/configs/webpack/webpack.plugins.js | 8 +- build/guide/docs/jsx/README.md | 4 +- build/guide/figma/README.md | 40 +++ build/guide/figma/code.js | 29 ++ build/guide/figma/code.ts | 33 ++ build/guide/figma/manifest.json | 23 ++ build/guide/figma/package-lock.json | 20 ++ build/guide/figma/package.json | 15 + build/guide/figma/tsconfig.json | 9 + build/guide/figma/ui.html | 17 + build/guide/guide.utilities.jsx | 29 +- .../elements/molecules/Examples/Examples.jsx | 10 +- .../organisms/Metrics/Metrics.Container.js | 234 ++++++++----- build/scaffolding/elements/[name].example.jsx | 6 +- .../scaffolding/modifiers/[name].example.jsx | 6 +- build/static.jsx | 6 +- package-lock.json | 173 +++++++++- package.json | 1 + .../modifiers/Paddings/Paddings.example.jsx | 8 +- .../modifiers/Razor/Razor.example.jsx | 125 +++++++ src/elements/modifiers/Razor/Razor.jsx | 321 ++++++++++++++++++ 26 files changed, 1071 insertions(+), 248 deletions(-) create mode 100644 build/guide/figma/README.md create mode 100644 build/guide/figma/code.js create mode 100644 build/guide/figma/code.ts create mode 100644 build/guide/figma/manifest.json create mode 100644 build/guide/figma/package-lock.json create mode 100644 build/guide/figma/package.json create mode 100644 build/guide/figma/tsconfig.json create mode 100644 build/guide/figma/ui.html create mode 100644 src/elements/modifiers/Razor/Razor.example.jsx create mode 100644 src/elements/modifiers/Razor/Razor.jsx diff --git a/build/configs/css/.csslintrc b/build/configs/css/.csslintrc index ee16358..ce5fb86 100644 --- a/build/configs/css/.csslintrc +++ b/build/configs/css/.csslintrc @@ -15,7 +15,7 @@ "rule-empty-line-before": [ "always", { "except": ["first-nested"], "ignore": ["after-comment"] - } ], - "unit-whitelist": ["px", "em", "rem", "%", "deg", "vmin", "vmax", "vw", "vh", "ex", "ch", "in", "pt", "s"] + }], + "unit-whitelist": ["px", "em", "rem", "%", "deg", "vmin", "vmax", "vw", "vh", "ex", "ch", "in", "pt", "s", "ms", "cm", "fr"] } } diff --git a/build/configs/css/css.config.js b/build/configs/css/css.config.js index fbb2467..dbfb5ff 100644 --- a/build/configs/css/css.config.js +++ b/build/configs/css/css.config.js @@ -42,6 +42,7 @@ module.exports = { }), new POSTCSSInOut({ preBuild: [ + Plugins.MetricsCSS(), // Captures hoisted up metrics to the Unslated guide tools and examples imports({ // Bring resolve context to @import / url() usage (see: build/config/alias.config.js) resolve: (id, basedir) => { return ResolverFactory.createResolver({ @@ -66,7 +67,6 @@ module.exports = { Plugins.media(), // Allows for custom media queries Plugins.roots(), // Cleans up leftover :root declarations. Plugins.comments(), // Cleans up comments. - Plugins.MetricsCSS(), (Package.optimize.css) // Minification of our final CSS results. ? Plugins.minify() : () => {} diff --git a/build/configs/css/css.config.plugins.js b/build/configs/css/css.config.plugins.js index 92cc682..e4baec1 100644 --- a/build/configs/css/css.config.plugins.js +++ b/build/configs/css/css.config.plugins.js @@ -583,11 +583,11 @@ const MetricsCSS = postcss.plugin('postcss-metrics', (options) => { } }; - return (root) => { - const __metrics = process.cssMetricsReset(); - - let metrics = {...__metrics}; + if (!process.cssMetrics) { + process.cssMetrics = {}; + } + return (root) => { let ids = []; let classes = []; let float = []; @@ -611,8 +611,11 @@ const MetricsCSS = postcss.plugin('postcss-metrics', (options) => { let marginLeft = []; let marginRight = []; - if (root.source.input.css.indexOf('.guide') === -1) { - console.log(root.source.input.origin(1, 1)); + if (root.source.input.file.indexOf('guide') === -1) { + const fileName = path.basename(root.source.input.file).replace('.css', ''); + process.cssMetrics[fileName] = process.cssMetricsReset(); + const metrics = process.cssMetrics[fileName]; + const pseudoClasses = [ ':active', ':checked', @@ -656,37 +659,37 @@ const MetricsCSS = postcss.plugin('postcss-metrics', (options) => { ]; root.walkRules(rule => { - metrics.rules++; + process.cssMetrics[fileName].rules++; if (rule.selector) { /* Selectors */ - metrics.selectors++; + process.cssMetrics[fileName].selectors++; /* Ids */ if (rule.selector.toString().indexOf('#') !== -1) { ids.push(rule.selector.toString()); } - metrics.ids = reduceDuplicates(ids).join(' ').split('#').length - 1; + process.cssMetrics[fileName].ids = reduceDuplicates(ids).join(' ').split('#').length - 1; /* Classes */ if (rule.selector.toString().indexOf('.') !== -1) { classes.push(rule.selector.toString()); } - metrics.classes = reduceDuplicates(classes).join(' ').split('.').length - 1; + process.cssMetrics[fileName].classes = reduceDuplicates(classes).join(' ').split('.').length - 1; /* Pseudo Classes and Elements */ Object.keys(pseudoClasses).map((i) => { if (rule.selector.toString().indexOf(pseudoClasses[i]) !== -1) { - metrics.pseudo.class++; + process.cssMetrics[fileName].pseudo.class++; } }); Object.keys(pseudoElements).map((i) => { if (rule.selector.toString().indexOf(pseudoElements[i]) !== -1) { - metrics.pseudo.element++; + process.cssMetrics[fileName].pseudo.element++; } }); } @@ -694,163 +697,161 @@ const MetricsCSS = postcss.plugin('postcss-metrics', (options) => { root.walkDecls(decl => { if (decl) { - metrics.declarations++; + process.cssMetrics[fileName].declarations++; } if (decl.prop) { - metrics.properties++; + process.cssMetrics[fileName].properties++; } const prop = decl.prop.toString(); const value = decl.value.toString(); /* Layout */ - if (prop === 'float') { metrics.layout.float++; float.push(value); } + if (prop === 'float') { process.cssMetrics[fileName].layout.float++; float.push(value); } - if (prop === 'width') { metrics.layout.width++; width.push(value); } + if (prop === 'width') { process.cssMetrics[fileName].layout.width++; width.push(value); } - if (prop === 'height') { metrics.layout.width++; height.push(value); } + if (prop === 'height') { process.cssMetrics[fileName].layout.width++; height.push(value); } - if (prop === 'display') { metrics.layout.display++; display.push(value); } + if (prop === 'display') { process.cssMetrics[fileName].layout.display++; display.push(value); } - if (prop === 'min-width') { metrics.layout.minWidth++; minWidth.push(value); } + if (prop === 'min-width') { process.cssMetrics[fileName].layout.minWidth++; minWidth.push(value); } - if (prop === 'max-width') { metrics.layout.maxWidth++; maxWidth.push(value); } + if (prop === 'max-width') { process.cssMetrics[fileName].layout.maxWidth++; maxWidth.push(value); } - if (prop === 'min-height') { metrics.layout.minHeight++; minHeight.push(value); } + if (prop === 'min-height') { process.cssMetrics[fileName].layout.minHeight++; minHeight.push(value); } - if (prop === 'max-height') { metrics.layout.maxHeight++; maxHeight.push(value); } + if (prop === 'max-height') { process.cssMetrics[fileName].layout.maxHeight++; maxHeight.push(value); } /* Skins */ - if (prop === 'color') { metrics.skin.color++; } + if (prop === 'color') { process.cssMetrics[fileName].skin.color++; } - if (prop === 'background-color') { metrics.skin.backgroundColor++; } + if (prop === 'background-color') { process.cssMetrics[fileName].skin.backgroundColor++; } - if (prop === 'border-color') { metrics.skin.borderColor++; } + if (prop === 'border-color') { process.cssMetrics[fileName].skin.borderColor++; } - if (prop === 'box-shadow') { metrics.skin.boxShadow++; } + if (prop === 'box-shadow') { process.cssMetrics[fileName].skin.boxShadow++; } /* Typography */ - if (prop === 'font-family') { metrics.typography.family++; } + if (prop === 'font-family') { process.cssMetrics[fileName].typography.family++; } - if (prop === 'font-size') { metrics.typography.size++; } + if (prop === 'font-size') { process.cssMetrics[fileName].typography.size++; } - if (prop === 'font-weight') { metrics.typography.weight++; } + if (prop === 'font-weight') { process.cssMetrics[fileName].typography.weight++; } - if (prop === 'text-align') { metrics.typography.alignment++; } + if (prop === 'text-align') { process.cssMetrics[fileName].typography.alignment++; } - if (prop === 'line-height') { metrics.typography.lineHeight++; } + if (prop === 'line-height') { process.cssMetrics[fileName].typography.lineHeight++; } - if (prop === 'letter-spacing') { metrics.typography.letterSpace++; } + if (prop === 'letter-spacing') { process.cssMetrics[fileName].typography.letterSpace++; } - if (prop === 'text-decoration') { metrics.typography.decoration++; } + if (prop === 'text-decoration') { process.cssMetrics[fileName].typography.decoration++; } - if (prop === 'text-transform') { metrics.typography.transform++; } + if (prop === 'text-transform') { process.cssMetrics[fileName].typography.transform++; } - if (prop === 'text-shadow') { metrics.typography.textShadow++; } + if (prop === 'text-shadow') { process.cssMetrics[fileName].typography.textShadow++; } /* Spacing */ if (prop === 'padding') { - metrics.spacing.padding.all++; - if (parseInt(value) === 0) { metrics.resets.padding.all++; padding.push(value); } + process.cssMetrics[fileName].spacing.padding.all++; + if (parseInt(value) === 0) { process.cssMetrics[fileName].resets.padding.all++; padding.push(value); } } if (prop === 'padding-top') { - metrics.spacing.padding.top++; - if (parseInt(value) === 0) { metrics.resets.padding.top++; paddingTop.push(value); } + process.cssMetrics[fileName].spacing.padding.top++; + if (parseInt(value) === 0) { process.cssMetrics[fileName].resets.padding.top++; paddingTop.push(value); } } if (prop === 'padding-right') { - metrics.spacing.padding.right++; - if (parseInt(value) === 0) { metrics.resets.padding.right++; paddingRight.push(value); } + process.cssMetrics[fileName].spacing.padding.right++; + if (parseInt(value) === 0) { process.cssMetrics[fileName].resets.padding.right++; paddingRight.push(value); } } if (prop === 'padding-bottom') { - metrics.spacing.padding.bottom++; - if (parseInt(value) === 0) { metrics.resets.padding.bottom++; paddingBottom.push(value); } + process.cssMetrics[fileName].spacing.padding.bottom++; + if (parseInt(value) === 0) { process.cssMetrics[fileName].resets.padding.bottom++; paddingBottom.push(value); } } if (prop === 'padding-left') { - metrics.spacing.padding.left++; - if (parseInt(value) === 0) { metrics.resets.padding.left++; paddingLeft.push(value); } + process.cssMetrics[fileName].spacing.padding.left++; + if (parseInt(value) === 0) { process.cssMetrics[fileName].resets.padding.left++; paddingLeft.push(value); } } if (prop === 'margin') { - metrics.spacing.margin.all++; - if (parseInt(value) === 0) { metrics.resets.margin.all++; margin.push(value); } + process.cssMetrics[fileName].spacing.margin.all++; + if (parseInt(value) === 0) { process.cssMetrics[fileName].resets.margin.all++; margin.push(value); } } if (prop === 'margin-top') { - metrics.spacing.margin.top++; - if (parseInt(value) === 0) { metrics.resets.margin.top++; marginTop.push(value); } + process.cssMetrics[fileName].spacing.margin.top++; + if (parseInt(value) === 0) { process.cssMetrics[fileName].resets.margin.top++; marginTop.push(value); } } if (prop === 'margin-right') { - metrics.spacing.margin.right++; - if (parseInt(value) === 0) { metrics.resets.margin.right++; marginRight.push(value); } + process.cssMetrics[fileName].spacing.margin.right++; + if (parseInt(value) === 0) { process.cssMetrics[fileName].resets.margin.right++; marginRight.push(value); } } if (prop === 'margin-bottom') { - metrics.spacing.margin.bottom++; - if (parseInt(value) === 0) { metrics.resets.margin.bottom++; marginBottom.push(value); } + process.cssMetrics[fileName].spacing.margin.bottom++; + if (parseInt(value) === 0) { process.cssMetrics[fileName].resets.margin.bottom++; marginBottom.push(value); } } if (prop === 'margin-left') { - metrics.spacing.margin.left++; - if (parseInt(value) === 0) { metrics.resets.margin.left++; marginLeft.push(value); } + process.cssMetrics[fileName].spacing.margin.left++; + if (parseInt(value) === 0) { process.cssMetrics[fileName].resets.margin.left++; marginLeft.push(value); } } }); /* Layout Compairson */ - metrics.comparison.layout.display.unique = reduceDuplicates(display).length; - metrics.comparison.layout.display.repeated = display.length; + process.cssMetrics[fileName].comparison.layout.display.unique = reduceDuplicates(display).length; + process.cssMetrics[fileName].comparison.layout.display.repeated = display.length; - metrics.comparison.layout.float.unique = reduceDuplicates(float).length; - metrics.comparison.layout.float.repeated = float.length; + process.cssMetrics[fileName].comparison.layout.float.unique = reduceDuplicates(float).length; + process.cssMetrics[fileName].comparison.layout.float.repeated = float.length; - metrics.comparison.layout.width.unique = reduceDuplicates(width).length; - metrics.comparison.layout.width.repeated = width.length; + process.cssMetrics[fileName].comparison.layout.width.unique = reduceDuplicates(width).length; + process.cssMetrics[fileName].comparison.layout.width.repeated = width.length; - metrics.comparison.layout.height.unique = reduceDuplicates(height).length; - metrics.comparison.layout.height.repeated = height.length; + process.cssMetrics[fileName].comparison.layout.height.unique = reduceDuplicates(height).length; + process.cssMetrics[fileName].comparison.layout.height.repeated = height.length; - metrics.comparison.layout.maxWidth.unique = reduceDuplicates(maxWidth).length; - metrics.comparison.layout.maxWidth.repeated = maxWidth.length; + process.cssMetrics[fileName].comparison.layout.maxWidth.unique = reduceDuplicates(maxWidth).length; + process.cssMetrics[fileName].comparison.layout.maxWidth.repeated = maxWidth.length; - metrics.comparison.layout.minWidth.unique = reduceDuplicates(minWidth).length; - metrics.comparison.layout.minWidth.repeated = minWidth.length; + process.cssMetrics[fileName].comparison.layout.minWidth.unique = reduceDuplicates(minWidth).length; + process.cssMetrics[fileName].comparison.layout.minWidth.repeated = minWidth.length; - metrics.comparison.layout.maxHeight.unique = reduceDuplicates(maxHeight).length; - metrics.comparison.layout.maxHeight.repeated = maxHeight.length; + process.cssMetrics[fileName].comparison.layout.maxHeight.unique = reduceDuplicates(maxHeight).length; + process.cssMetrics[fileName].comparison.layout.maxHeight.repeated = maxHeight.length; - metrics.comparison.layout.minHeight.unique = reduceDuplicates(minHeight).length; - metrics.comparison.layout.minHeight.repeated = minHeight.length; + process.cssMetrics[fileName].comparison.layout.minHeight.unique = reduceDuplicates(minHeight).length; + process.cssMetrics[fileName].comparison.layout.minHeight.repeated = minHeight.length; /* Padding Compairson */ - metrics.comparison.padding.all.unique = reduceDuplicates(padding).length; - metrics.comparison.padding.all.repeated = padding.length; + process.cssMetrics[fileName].comparison.padding.all.unique = reduceDuplicates(padding).length; + process.cssMetrics[fileName].comparison.padding.all.repeated = padding.length; - metrics.comparison.padding.top.unique = reduceDuplicates(paddingTop).length; - metrics.comparison.padding.top.repeated = paddingTop.length; + process.cssMetrics[fileName].comparison.padding.top.unique = reduceDuplicates(paddingTop).length; + process.cssMetrics[fileName].comparison.padding.top.repeated = paddingTop.length; - metrics.comparison.padding.right.unique = reduceDuplicates(paddingRight).length; - metrics.comparison.padding.right.repeated = paddingRight.length; + process.cssMetrics[fileName].comparison.padding.right.unique = reduceDuplicates(paddingRight).length; + process.cssMetrics[fileName].comparison.padding.right.repeated = paddingRight.length; - metrics.comparison.padding.bottom.unique = reduceDuplicates(paddingBottom).length; - metrics.comparison.padding.bottom.repeated = paddingBottom.length; + process.cssMetrics[fileName].comparison.padding.bottom.unique = reduceDuplicates(paddingBottom).length; + process.cssMetrics[fileName].comparison.padding.bottom.repeated = paddingBottom.length; - metrics.comparison.padding.left.unique = reduceDuplicates(paddingLeft).length; - metrics.comparison.padding.left.repeated = paddingLeft.length; + process.cssMetrics[fileName].comparison.padding.left.unique = reduceDuplicates(paddingLeft).length; + process.cssMetrics[fileName].comparison.padding.left.repeated = paddingLeft.length; /* Margin Compairson */ - metrics.comparison.margin.all.unique = reduceDuplicates(margin).length; - metrics.comparison.margin.all.repeated = margin.length; - - metrics.comparison.margin.top.unique = reduceDuplicates(marginTop).length; - metrics.comparison.margin.top.repeated = marginTop.length; + process.cssMetrics[fileName].comparison.margin.all.unique = reduceDuplicates(margin).length; + process.cssMetrics[fileName].comparison.margin.all.repeated = margin.length; - metrics.comparison.margin.right.unique = reduceDuplicates(marginRight).length; - metrics.comparison.margin.right.repeated = marginRight.length; + process.cssMetrics[fileName].comparison.margin.top.unique = reduceDuplicates(marginTop).length; + process.cssMetrics[fileName].comparison.margin.top.repeated = marginTop.length; - metrics.comparison.margin.bottom.unique = reduceDuplicates(marginBottom).length; - metrics.comparison.margin.bottom.repeated = marginBottom.length; + process.cssMetrics[fileName].comparison.margin.right.unique = reduceDuplicates(marginRight).length; + process.cssMetrics[fileName].comparison.margin.right.repeated = marginRight.length; - metrics.comparison.margin.left.unique = reduceDuplicates(marginLeft).length; - metrics.comparison.margin.left.repeated = marginLeft.length; + process.cssMetrics[fileName].comparison.margin.bottom.unique = reduceDuplicates(marginBottom).length; + process.cssMetrics[fileName].comparison.margin.bottom.repeated = marginBottom.length; - process.cssMetrics = metrics; + process.cssMetrics[fileName].comparison.margin.left.unique = reduceDuplicates(marginLeft).length; + process.cssMetrics[fileName].comparison.margin.left.repeated = marginLeft.length; } } }); diff --git a/build/configs/js/.eslintrc b/build/configs/js/.eslintrc index 68a5f47..b5257ff 100644 --- a/build/configs/js/.eslintrc +++ b/build/configs/js/.eslintrc @@ -39,7 +39,10 @@ "react/require-default-props": 0, "react/jsx-props-no-spreading": 0, "react/static-property-placement": 0, - "react/jsx-fragments": 0 + "react/jsx-fragments": 0, + "react/no-unescaped-entities": [ "error", { + "forbid": [">", "}"] + }], }, "globals": { "__stats__": true, diff --git a/build/configs/js/js.config.plugins.js b/build/configs/js/js.config.plugins.js index 9843c33..73693d9 100644 --- a/build/configs/js/js.config.plugins.js +++ b/build/configs/js/js.config.plugins.js @@ -746,10 +746,6 @@ class Bundle { // The great memory leak prevention reset (DO NOT REMOVE!) process.jsMetrics = process.jsMetricsReset(); - process.cssMetrics = process.cssMetricsReset(); - - this.stats.js = process.jsMetricsReset(); - this.stats.css = process.cssMetricsReset(); } }); }); diff --git a/build/configs/webpack/webpack.plugins.js b/build/configs/webpack/webpack.plugins.js index 30adc8b..b05b7d8 100644 --- a/build/configs/webpack/webpack.plugins.js +++ b/build/configs/webpack/webpack.plugins.js @@ -62,7 +62,7 @@ class StaticBundle { } fs.writeFile( - path.resolve(__dirname, `../../../${Package.statics.dest}/${example.staticPath}`), + path.resolve(__dirname, `../../../${Package.statics.dest}/${example.exports}`), `\n\n${DOM.toString()}`, (e) => { if (e) { @@ -79,9 +79,9 @@ class StaticBundle { Object.keys(global.components).map((i) => { const example = global.components[i]; - if (example.staticPath) { - example.staticPath = example.staticPath.replace(/\\/g, '/'); - const fileless = example.staticPath.substring(0, example.staticPath.lastIndexOf("/")); + if (example.exports) { + example.exports = example.exports.replace(/\\/g, '/'); + const fileless = example.exports.substring(0, example.exports.lastIndexOf("/")); const dest = path.resolve(__dirname, `../../../${Package.statics.dest}${fileless}`).replace(/\\/g, '/'); fs.ensureDirSync(dest); diff --git a/build/guide/docs/jsx/README.md b/build/guide/docs/jsx/README.md index 6c921f7..21509a9 100644 --- a/build/guide/docs/jsx/README.md +++ b/build/guide/docs/jsx/README.md @@ -165,7 +165,7 @@ export default [{ { name: 'Default styling', description: '', - staticPath: '', + exports: '', component: ( Lorem ipsum ), @@ -174,7 +174,7 @@ export default [{ }, { name: 'Special styling', description: '', - staticPath: '', + exports: '', component: ( Lorem ipsum ), diff --git a/build/guide/figma/README.md b/build/guide/figma/README.md new file mode 100644 index 0000000..a0a69f8 --- /dev/null +++ b/build/guide/figma/README.md @@ -0,0 +1,40 @@ +Below are the steps to get your plugin running. You can also find instructions at: + + https://www.figma.com/plugin-docs/setup/ + +This plugin template uses Typescript and NPM, two standard tools in creating JavaScript applications. + +First, download Node.js which comes with NPM. This will allow you to install TypeScript and other +libraries. You can find the download link here: + + https://nodejs.org/en/download/ + +Next, install TypeScript using the command: + + npm install -g typescript + +Finally, in the directory of your plugin, get the latest type definitions for the plugin API by running: + + npm install --saveDev @figma/plugin-typings + +If you are familiar with JavaScript, TypeScript will look very familiar. In fact, valid JavaScript code +is already valid Typescript code. + +TypeScript adds type annotations to variables. This allows code editors such as Visual Studio Code +to provide information about the Figma API while you are writing code, as well as help catch bugs +you previously didn't notice. + +For more information, visit https://www.typescriptlang.org/ + +Using TypeScript requires a compiler to convert TypeScript (code.ts) into JavaScript (code.js) +for the browser to run. + +We recommend writing TypeScript code using Visual Studio code: + +1. Download Visual Studio Code if you haven't already: https://code.visualstudio.com/. +2. Open this directory in Visual Studio Code. +3. Compile TypeScript to JavaScript: Run the "Terminal > Run Build Task..." menu item, + then select "tsc: watch - tsconfig.json". You will have to do this again every time + you reopen Visual Studio Code. + +That's it! Visual Studio Code will regenerate the JavaScript file every time you save. diff --git a/build/guide/figma/code.js b/build/guide/figma/code.js new file mode 100644 index 0000000..36788ad --- /dev/null +++ b/build/guide/figma/code.js @@ -0,0 +1,29 @@ +// This plugin will open a modal to prompt the user to enter a number, and +// it will then create that many rectangles on the screen. +// This file holds the main code for the plugins. It has access to the *document*. +// You can access browser APIs in the diff --git a/build/guide/guide.utilities.jsx b/build/guide/guide.utilities.jsx index ae2a311..d5ad8d4 100644 --- a/build/guide/guide.utilities.jsx +++ b/build/guide/guide.utilities.jsx @@ -4,6 +4,7 @@ IMPORTANT NOTE: Never remove any methods marked "CORE:" as they are dependencies for the framework. */ +const pretty = require('pretty'); /* CORE: Helper method to convert raw int into bytes, kb or kb for display. @@ -281,33 +282,7 @@ const WCAGTest = (ratio, size, level) => { Please note, this can't be used on JSX syntax as it normalizes the tags to being lowercase */ -const XMLParser = (node, level) => { - let textNode; - const indentBefore = new Array(level++ + 1).join(' '); - const indentAfter = new Array(level - 1).join(' '); - - for (let i = 0; i < node.children.length; i++) { - if (level !== 1) { - textNode = document.createTextNode(`\n ${indentBefore}`); - node.insertBefore(textNode, node.children[i]); - } - - XMLParser(node.children[i], level); - - if (node.lastElementChild === node.children[i] && level !== 1) { - textNode = document.createTextNode(`\n ${indentAfter}`); - node.appendChild(textNode); - } - } - - return node; -}; - -const XMLFormat = (string) => { - const div = document.createElement('div'); - div.innerHTML = string.replace((/ {2}|\r\n|\n|\r/gm), '').trim(); - return XMLParser(div, 0).innerHTML.replace(/^\s+|\s+$/g, ''); -}; +const XMLFormat = (string) => pretty(string); /* diff --git a/build/guide/src/elements/molecules/Examples/Examples.jsx b/build/guide/src/elements/molecules/Examples/Examples.jsx index c20ab14..57a4806 100644 --- a/build/guide/src/elements/molecules/Examples/Examples.jsx +++ b/build/guide/src/elements/molecules/Examples/Examples.jsx @@ -49,18 +49,12 @@ export const Examples = (props) => { // HTML Prisim Code Snips const getHTMLPrisim = (component) => { let prisimData = ReactDOMServer.renderToStaticMarkup(component); - let indent = ''; - prisimData = prisimData.replace(/> { - indent += ' '; - return x.replace('><', `>\n${indent}<`); - }).trim(); - if (component.props.devonly === 'true') { - prisimData = prisimData.replace(/<(.*)devonly="true">((.|\n)*)<\/(.*)>/m, '$2').trim(); - } + prisimData = prisimData.replace(/\r?\n|\r/g, ''); prisimData = prisimData.replace(/>/g, '>'); prisimData = prisimData.replace(/</g, '<'); prisimData = prisimData.replace(/'/g, "'"); prisimData = prisimData.replace(/is="sly"/g, ''); + prisimData = prisimData.replace(/<(.*)devonly="true">((.|\n)*)<\/(.*)>/m, '$2').trim(); return Prism.highlight(GuideUtils.XMLFormat(prisimData), Prism.languages.html, 'html'); // eslint-disable-line }; diff --git a/build/guide/src/elements/organisms/Metrics/Metrics.Container.js b/build/guide/src/elements/organisms/Metrics/Metrics.Container.js index 338dba4..433c1bd 100644 --- a/build/guide/src/elements/organisms/Metrics/Metrics.Container.js +++ b/build/guide/src/elements/organisms/Metrics/Metrics.Container.js @@ -476,6 +476,87 @@ export const GuideMetrics = (el) => { ) ).reduce((a, b) => a + b, 0); + const getSelectorTotals = (data, filter = false) => Object.keys(data).map( + (i) => ((filter) // eslint-disable-line + ? (i === filter) ? data[i].selectors : 0 // eslint-disable-line + : data[i].selectors + ) + ).reduce((a, b) => a + b, 0); + + const getDeclarationsTotals = (data, filter = false) => Object.keys(data).map( + (i) => ((filter) // eslint-disable-line + ? (i === filter) ? data[i].declarations : 0 // eslint-disable-line + : data[i].declarations + ) + ).reduce((a, b) => a + b, 0); + + const getPropertiesTotals = (data, filter = false) => Object.keys(data).map( + (i) => ((filter) // eslint-disable-line + ? (i === filter) ? data[i].properties : 0 // eslint-disable-line + : data[i].properties + ) + ).reduce((a, b) => a + b, 0); + + const getIdsTotals = (data, filter = false) => Object.keys(data).map( + (i) => ((filter) // eslint-disable-line + ? (i === filter) ? data[i].ids : 0 // eslint-disable-line + : data[i].ids + ) + ).reduce((a, b) => a + b, 0); + + const getClassesTotals = (data, filter = false) => Object.keys(data).map( + (i) => ((filter) // eslint-disable-line + ? (i === filter) ? data[i].classes : 0 // eslint-disable-line + : data[i].classes + ) + ).reduce((a, b) => a + b, 0); + + const getPseudoTotals = (data, filter = false) => Object.keys(data).map( + (i) => ((filter) + ? data[i].pseudo[filter] + : Object.keys(data[i].pseudo).map((j) => data[i].pseudo[j]).reduce((a, b) => a + b, 0) + ) + ).reduce((a, b) => a + b, 0); + + const getLayoutTotals = (data, filter = false) => Object.keys(data).map( + (i) => ((filter) + ? data[i].layout[filter] + : Object.keys(data[i].layout).map((j) => data[i].layout[j]).reduce((a, b) => a + b, 0) + ) + ).reduce((a, b) => a + b, 0); + + const getSkinsTotals = (data, filter = false) => Object.keys(data).map( + (i) => ((filter) + ? data[i].skin[filter] + : Object.keys(data[i].skin).map((j) => data[i].skin[j]).reduce((a, b) => a + b, 0) + ) + ).reduce((a, b) => a + b, 0); + + const getTypographyTotals = (data, filter = false) => Object.keys(data).map( + (i) => ((filter) + ? data[i].typography[filter] + : Object.keys(data[i].typography).map((j) => data[i].typography[j]).reduce((a, b) => a + b, 0) + ) + ).reduce((a, b) => a + b, 0); + + const getSpacingTotals = (data, filter = false, side = false) => Object.keys(data).map( + (i) => (filter && side) // eslint-disable-line + ? data[i].spacing[filter][side] + : 0 + ).reduce((a, b) => a + b, 0); + + const getResetTotals = (data, filter = false, side = false) => Object.keys(data).map( + (i) => (filter && side) // eslint-disable-line + ? data[i].resets[filter][side] + : 0 + ).reduce((a, b) => a + b, 0); + + const getCompairsonTotals = (data, category = false, prop = false, type = false) => Object.keys(data).map( + (i) => (category && prop && type) // eslint-disable-line + ? data[i].comparison[category][prop][type] + : 0 + ).reduce((a, b) => a + b, 0); + const init = () => { // Install JSX Size card ui.cards.jsxSize.innerHTML = getAssetsTotal(getFilteredData(__stats__, ['/*.jsx$']), 'JSX Size:'); @@ -550,82 +631,83 @@ export const GuideMetrics = (el) => { ui.jsMetrics.assignments.innerHTML = `${getExpressionsTotal(__esDocs__, 'AssignmentExpression')} / x = y Assignments`; // eslint-disable-line // Install CSS Metrics - ui.cssMetrics.selectors.innerHTML = `${__stats__.css.selectors} / Selectors`; - ui.cssMetrics.declarations.innerHTML = `${__stats__.css.selectors} / Declarations`; - ui.cssMetrics.properties.innerHTML = `${__stats__.css.properties} / Properties`; - ui.cssMetrics.ids.innerHTML = `${__stats__.css.ids} / #ids`; - ui.cssMetrics.classes.innerHTML = `${__stats__.css.classes} / .classes`; - ui.cssMetrics.pseudoClass.innerHTML = `${__stats__.css.pseudo.class} / Pseudo class`; - ui.cssMetrics.pseudoElement.innerHTML = `${__stats__.css.pseudo.element} / Pseudo element`; - - ui.cssMetrics.display.innerHTML = `${__stats__.css.layout.display} / Display`; - ui.cssMetrics.float.innerHTML = `${__stats__.css.layout.float} / Float`; - ui.cssMetrics.width.innerHTML = `${__stats__.css.layout.width} / Width`; - ui.cssMetrics.height.innerHTML = `${__stats__.css.layout.height} / Height`; - ui.cssMetrics.maxWidth.innerHTML = `${__stats__.css.layout.maxWidth} / Max-width`; - ui.cssMetrics.minWidth.innerHTML = `${__stats__.css.layout.minWidth} / Min-width`; - ui.cssMetrics.maxHeight.innerHTML = `${__stats__.css.layout.maxHeight} / Max-height`; - ui.cssMetrics.minHeight.innerHTML = `${__stats__.css.layout.minHeight} / Min-height`; - - ui.cssMetrics.color.innerHTML = `${__stats__.css.skin.color} / Color`; - ui.cssMetrics.backgroundColor.innerHTML = `${__stats__.css.skin.backgroundColor} / Background-color`; - ui.cssMetrics.borderColor.innerHTML = `${__stats__.css.skin.borderColor} / Border-color`; - ui.cssMetrics.boxShadow.innerHTML = `${__stats__.css.skin.boxShadow} / Box-shadow`; - - ui.cssMetrics.family.innerHTML = `${__stats__.css.typography.family} / Font-family`; - ui.cssMetrics.size.innerHTML = `${__stats__.css.typography.size} / Font-size`; - ui.cssMetrics.weight.innerHTML = `${__stats__.css.typography.weight} / Font-weight`; - ui.cssMetrics.alignment.innerHTML = `${__stats__.css.typography.alignment} / Text-align`; - ui.cssMetrics.lineHeight.innerHTML = `${__stats__.css.typography.lineHeight} / Line-height`; - ui.cssMetrics.letterSpace.innerHTML = `${__stats__.css.typography.letterSpace} / Letter-spacing`; - ui.cssMetrics.decoration.innerHTML = `${__stats__.css.typography.decoration} / Decoration`; - ui.cssMetrics.transform.innerHTML = `${__stats__.css.typography.transform} / Transform`; - ui.cssMetrics.shadow.innerHTML = `${__stats__.css.typography.shadow} / Shadow`; - - ui.cssMetrics.spacingPadding.innerHTML = `${__stats__.css.spacing.padding.all} / Padding`; - ui.cssMetrics.spacingPaddingTop.innerHTML = `${__stats__.css.spacing.padding.top} / Padding-top`; - ui.cssMetrics.spacingPaddingRight.innerHTML = `${__stats__.css.spacing.padding.right} / Padding-right`; - ui.cssMetrics.spacingPaddingBottom.innerHTML = `${__stats__.css.spacing.padding.bottom} / Padding-bottom`; - ui.cssMetrics.spacingPaddingLeft.innerHTML = `${__stats__.css.spacing.padding.left} / Padding-left`; - - ui.cssMetrics.spacingMargin.innerHTML = `${__stats__.css.spacing.margin.all} / Margin`; - ui.cssMetrics.spacingMarginTop.innerHTML = `${__stats__.css.spacing.margin.top} / Margin-top`; - ui.cssMetrics.spacingMarginRight.innerHTML = `${__stats__.css.spacing.margin.right} / Margin-right`; - ui.cssMetrics.spacingMarginBottom.innerHTML = `${__stats__.css.spacing.margin.bottom} / Margin-bottom`; - ui.cssMetrics.spacingMarginLeft.innerHTML = `${__stats__.css.spacing.margin.left} / Margin-left`; - - ui.cssMetrics.resetPadding.innerHTML = `${__stats__.css.resets.padding.all} / Padding`; - ui.cssMetrics.resetPaddingTop.innerHTML = `${__stats__.css.resets.padding.top} / Padding-top`; - ui.cssMetrics.resetPaddingRight.innerHTML = `${__stats__.css.resets.padding.right} / Padding-right`; - ui.cssMetrics.resetPaddingBottom.innerHTML = `${__stats__.css.resets.padding.bottom} / Padding-bottom`; - ui.cssMetrics.resetPaddingLeft.innerHTML = `${__stats__.css.resets.padding.left} / Padding-left`; - - ui.cssMetrics.resetMargin.innerHTML = `${__stats__.css.resets.margin.all} / Margin`; - ui.cssMetrics.resetMarginTop.innerHTML = `${__stats__.css.resets.margin.top} / Margin-top`; - ui.cssMetrics.resetMarginRight.innerHTML = `${__stats__.css.resets.margin.right} / Margin-right`; - ui.cssMetrics.resetMarginBottom.innerHTML = `${__stats__.css.resets.margin.bottom} / Margin-bottom`; - ui.cssMetrics.resetMarginLeft.innerHTML = `${__stats__.css.resets.margin.left} / Margin-left`; - - ui.cssMetrics.compDisplay.innerHTML = `Display
${__stats__.css.comparison.layout.display.unique} Unique ${__stats__.css.comparison.layout.display.repeated} Repeated`; - ui.cssMetrics.compFloat.innerHTML = `Float
${__stats__.css.comparison.layout.float.unique} Unique ${__stats__.css.comparison.layout.float.repeated} Repeated`; - ui.cssMetrics.compWidth.innerHTML = `Width
${__stats__.css.comparison.layout.width.unique} Unique ${__stats__.css.comparison.layout.width.repeated} Repeated`; - ui.cssMetrics.compHeight.innerHTML = `Height
${__stats__.css.comparison.layout.height.unique} Unique ${__stats__.css.comparison.layout.height.repeated} Repeated`; - ui.cssMetrics.compMinWidth.innerHTML = `Min-width
${__stats__.css.comparison.layout.minWidth.unique} Unique ${__stats__.css.comparison.layout.minWidth.repeated} Repeated`; - ui.cssMetrics.compMaxWidth.innerHTML = `Max-width
${__stats__.css.comparison.layout.maxWidth.unique} Unique ${__stats__.css.comparison.layout.maxWidth.repeated} Repeated`; - ui.cssMetrics.compMinHeight.innerHTML = `Min-height
${__stats__.css.comparison.layout.minHeight.unique} Unique ${__stats__.css.comparison.layout.minHeight.repeated} Repeated`; - ui.cssMetrics.compMaxHeight.innerHTML = `Max-height
${__stats__.css.comparison.layout.maxHeight.unique} Unique ${__stats__.css.comparison.layout.maxHeight.repeated} Repeated`; - - ui.cssMetrics.compPadding.innerHTML = `Padding
${__stats__.css.comparison.padding.all.unique} Unique ${__stats__.css.comparison.padding.all.repeated} Repeated`; - ui.cssMetrics.compPaddingTop.innerHTML = `Padding-top
${__stats__.css.comparison.padding.top.unique} Unique ${__stats__.css.comparison.padding.top.repeated} Repeated`; - ui.cssMetrics.compPaddingRight.innerHTML = `Padding-right
${__stats__.css.comparison.padding.right.unique} Unique ${__stats__.css.comparison.padding.right.repeated} Repeated`; - ui.cssMetrics.compPaddingBottom.innerHTML = `Padding-bottom
${__stats__.css.comparison.padding.bottom.unique} Unique ${__stats__.css.comparison.padding.bottom.repeated} Repeated`; - ui.cssMetrics.compPaddingLeft.innerHTML = `Padding-left
${__stats__.css.comparison.padding.left.unique} Unique ${__stats__.css.comparison.padding.left.repeated} Repeated`; - - ui.cssMetrics.compMargin.innerHTML = `Margin
${__stats__.css.comparison.margin.all.unique} Unique ${__stats__.css.comparison.margin.all.repeated} Repeated`; - ui.cssMetrics.compMarginTop.innerHTML = `Margin-top
${__stats__.css.comparison.margin.top.unique} Unique ${__stats__.css.comparison.margin.top.repeated} Repeated`; - ui.cssMetrics.compMarginRight.innerHTML = `Margin-right
${__stats__.css.comparison.margin.right.unique} Unique ${__stats__.css.comparison.margin.right.repeated} Repeated`; - ui.cssMetrics.compMarginBottom.innerHTML = `Margin-bottom
${__stats__.css.comparison.margin.bottom.unique} Unique ${__stats__.css.comparison.margin.bottom.repeated} Repeated`; - ui.cssMetrics.compMarginLeft.innerHTML = `Margin-left
${__stats__.css.comparison.margin.left.unique} Unique ${__stats__.css.comparison.margin.left.repeated} Repeated`; + ui.cssMetrics.selectors.innerHTML = `${getSelectorTotals(__stats__.css)} / Selectors`; + ui.cssMetrics.declarations.innerHTML = `${getDeclarationsTotals(__stats__.css)} / Declarations`; + ui.cssMetrics.properties.innerHTML = `${getPropertiesTotals(__stats__.css)} / Properties`; + ui.cssMetrics.ids.innerHTML = `${getIdsTotals(__stats__.css)} / #ids`; + ui.cssMetrics.classes.innerHTML = `${getClassesTotals(__stats__.css)} / .classes`; + ui.cssMetrics.pseudoClass.innerHTML = `${getPseudoTotals(__stats__.css, 'class')} / Pseudo class`; + ui.cssMetrics.pseudoElement.innerHTML = `${getPseudoTotals(__stats__.css, 'element')} / Pseudo element`; + + ui.cssMetrics.display.innerHTML = `${getLayoutTotals(__stats__.css, 'display')} / Display`; + ui.cssMetrics.float.innerHTML = `${getLayoutTotals(__stats__.css, 'float')} / Float`; + ui.cssMetrics.width.innerHTML = `${getLayoutTotals(__stats__.css, 'width')} / Width`; + ui.cssMetrics.height.innerHTML = `${getLayoutTotals(__stats__.css, 'height')} / Height`; + ui.cssMetrics.maxWidth.innerHTML = `${getLayoutTotals(__stats__.css, 'maxWidth')} / Max-width`; + ui.cssMetrics.minWidth.innerHTML = `${getLayoutTotals(__stats__.css, 'minWidth')} / Min-width`; + ui.cssMetrics.maxHeight.innerHTML = `${getLayoutTotals(__stats__.css, 'maxHeight')} / Max-height`; + ui.cssMetrics.minHeight.innerHTML = `${getLayoutTotals(__stats__.css, 'minHeight')} / Min-height`; + + ui.cssMetrics.color.innerHTML = `${getSkinsTotals(__stats__.css, 'color')} / Color`; + ui.cssMetrics.backgroundColor.innerHTML = `${getSkinsTotals(__stats__.css, 'backgroundColor')} / Background-color`; + ui.cssMetrics.borderColor.innerHTML = `${getSkinsTotals(__stats__.css, 'borderColor')} / Border-color`; + ui.cssMetrics.boxShadow.innerHTML = `${getSkinsTotals(__stats__.css, 'boxShadow')} / Box-shadow`; + + ui.cssMetrics.family.innerHTML = `${getTypographyTotals(__stats__.css, 'family')} / Font-family`; + ui.cssMetrics.size.innerHTML = `${getTypographyTotals(__stats__.css, 'size')} / Font-size`; + ui.cssMetrics.weight.innerHTML = `${getTypographyTotals(__stats__.css, 'weight')} / Font-weight`; + ui.cssMetrics.alignment.innerHTML = `${getTypographyTotals(__stats__.css, 'alignment')} / Text-align`; + ui.cssMetrics.lineHeight.innerHTML = `${getTypographyTotals(__stats__.css, 'lineHeight')} / Line-height`; + ui.cssMetrics.letterSpace.innerHTML = `${getTypographyTotals(__stats__.css, 'letterSpace')} / Letter-spacing`; + ui.cssMetrics.decoration.innerHTML = `${getTypographyTotals(__stats__.css, 'decoration')} / Decoration`; + ui.cssMetrics.transform.innerHTML = `${getTypographyTotals(__stats__.css, 'transform')} / Transform`; + ui.cssMetrics.shadow.innerHTML = `${getTypographyTotals(__stats__.css, 'shadow')} / Shadow`; + + ui.cssMetrics.spacingPadding.innerHTML = `${getSpacingTotals(__stats__.css, 'padding', 'all')} / Padding`; + ui.cssMetrics.spacingPaddingTop.innerHTML = `${getSpacingTotals(__stats__.css, 'padding', 'top')} / Padding-top`; + ui.cssMetrics.spacingPaddingRight.innerHTML = `${getSpacingTotals(__stats__.css, 'padding', 'right')} / Padding-right`; + ui.cssMetrics.spacingPaddingBottom.innerHTML = `${getSpacingTotals(__stats__.css, 'padding', 'bottom')} / Padding-bottom`; + ui.cssMetrics.spacingPaddingLeft.innerHTML = `${getSpacingTotals(__stats__.css, 'padding', 'left')} / Padding-left`; + + ui.cssMetrics.spacingMargin.innerHTML = `${getSpacingTotals(__stats__.css, 'margin', 'all')} / Margin`; + ui.cssMetrics.spacingMarginTop.innerHTML = `${getSpacingTotals(__stats__.css, 'margin', 'top')} / Margin-top`; + ui.cssMetrics.spacingMarginRight.innerHTML = `${getSpacingTotals(__stats__.css, 'margin', 'right')} / Margin-right`; + ui.cssMetrics.spacingMarginBottom.innerHTML = `${getSpacingTotals(__stats__.css, 'margin', 'bottom')} / Margin-bottom`; + ui.cssMetrics.spacingMarginLeft.innerHTML = `${getSpacingTotals(__stats__.css, 'margin', 'left')} / Margin-left`; + + ui.cssMetrics.resetPadding.innerHTML = `${getResetTotals(__stats__.css, 'padding', 'all')} / Padding`; + ui.cssMetrics.resetPaddingTop.innerHTML = `${getResetTotals(__stats__.css, 'padding', 'top')} / Padding-top`; + ui.cssMetrics.resetPaddingRight.innerHTML = `${getResetTotals(__stats__.css, 'padding', 'right')} / Padding-right`; + ui.cssMetrics.resetPaddingBottom.innerHTML = `${getResetTotals(__stats__.css, 'padding', 'bottom')} / Padding-bottom`; + ui.cssMetrics.resetPaddingLeft.innerHTML = `${getResetTotals(__stats__.css, 'padding', 'left')} / Padding-left`; + + ui.cssMetrics.resetMargin.innerHTML = `${getResetTotals(__stats__.css, 'margin', 'all')} / Margin`; + ui.cssMetrics.resetMarginTop.innerHTML = `${getResetTotals(__stats__.css, 'margin', 'top')} / Margin-top`; + ui.cssMetrics.resetMarginRight.innerHTML = `${getResetTotals(__stats__.css, 'margin', 'right')} / Margin-right`; + ui.cssMetrics.resetMarginBottom.innerHTML = `${getResetTotals(__stats__.css, 'margin', 'bottom')} / Margin-bottom`; + ui.cssMetrics.resetMarginLeft.innerHTML = `${getResetTotals(__stats__.css, 'margin', 'left')} / Margin-left`; + + + ui.cssMetrics.compDisplay.innerHTML = `Display
${getCompairsonTotals(__stats__.css, 'layout', 'display', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'layout', 'display', 'repeated')} Repeated`; + ui.cssMetrics.compFloat.innerHTML = `Float
${getCompairsonTotals(__stats__.css, 'layout', 'float', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'layout', 'float', 'repeated')} Repeated`; + ui.cssMetrics.compWidth.innerHTML = `Width
${getCompairsonTotals(__stats__.css, 'layout', 'width', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'layout', 'width', 'repeated')} Repeated`; + ui.cssMetrics.compHeight.innerHTML = `Height
${getCompairsonTotals(__stats__.css, 'layout', 'height', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'layout', 'height', 'repeated')} Repeated`; + ui.cssMetrics.compMinWidth.innerHTML = `Min-width
${getCompairsonTotals(__stats__.css, 'layout', 'minWidth', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'layout', 'minWidth', 'repeated')} Repeated`; + ui.cssMetrics.compMaxWidth.innerHTML = `Max-width
${getCompairsonTotals(__stats__.css, 'layout', 'maxWidth', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'layout', 'maxWidth', 'repeated')} Repeated`; + ui.cssMetrics.compMinHeight.innerHTML = `Min-height
${getCompairsonTotals(__stats__.css, 'layout', 'minHeight', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'layout', 'minHeight', 'repeated')} Repeated`; + ui.cssMetrics.compMaxHeight.innerHTML = `Max-height
${getCompairsonTotals(__stats__.css, 'layout', 'maxHeight', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'layout', 'maxHeight', 'repeated')} Repeated`; + + ui.cssMetrics.compPadding.innerHTML = `Padding
${getCompairsonTotals(__stats__.css, 'padding', 'all', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'padding', 'all', 'repeated')} Repeated`; + ui.cssMetrics.compPaddingTop.innerHTML = `Padding-top
${getCompairsonTotals(__stats__.css, 'padding', 'top', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'padding', 'top', 'repeated')} Repeated`; + ui.cssMetrics.compPaddingRight.innerHTML = `Padding-right
${getCompairsonTotals(__stats__.css, 'padding', 'right', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'padding', 'right', 'repeated')} Repeated`; + ui.cssMetrics.compPaddingBottom.innerHTML = `Padding-bottom
${getCompairsonTotals(__stats__.css, 'padding', 'bottom', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'padding', 'bottom', 'repeated')} Repeated`; + ui.cssMetrics.compPaddingLeft.innerHTML = `Padding-left
${getCompairsonTotals(__stats__.css, 'padding', 'left', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'padding', 'left', 'repeated')} Repeated`; + + ui.cssMetrics.compMargin.innerHTML = `Margin
${getCompairsonTotals(__stats__.css, 'margin', 'all', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'margin', 'all', 'repeated')} Repeated`; + ui.cssMetrics.compMarginTop.innerHTML = `Margin-top
${getCompairsonTotals(__stats__.css, 'margin', 'top', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'margin', 'top', 'repeated')} Repeated`; + ui.cssMetrics.compMarginRight.innerHTML = `Margin-right
${getCompairsonTotals(__stats__.css, 'margin', 'right', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'margin', 'right', 'repeated')} Repeated`; + ui.cssMetrics.compMarginBottom.innerHTML = `Margin-bottom
${getCompairsonTotals(__stats__.css, 'margin', 'bottom', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'margin', 'bottom', 'repeated')} Repeated`; + ui.cssMetrics.compMarginLeft.innerHTML = `Margin-left
${getCompairsonTotals(__stats__.css, 'margin', 'left', 'unique')} Unique ${getCompairsonTotals(__stats__.css, 'margin', 'left', 'repeated')} Repeated`; // Install media metrics ui.mediaMetrics.counts.all.innerHTML = `Total / ${getMediaFiles(__stats__.files).length}`; diff --git a/build/scaffolding/elements/[name].example.jsx b/build/scaffolding/elements/[name].example.jsx index 4b806d3..8c75979 100644 --- a/build/scaffolding/elements/[name].example.jsx +++ b/build/scaffolding/elements/[name].example.jsx @@ -28,11 +28,11 @@ export default [{ { name: 'Default styling', description: '', - staticPath: '', + exports: '', + notes: '', component: ( <{{name}}>Lorem ipsum - ), - notes: '' + ) } ] }]; diff --git a/build/scaffolding/modifiers/[name].example.jsx b/build/scaffolding/modifiers/[name].example.jsx index e9fd957..04adc0f 100644 --- a/build/scaffolding/modifiers/[name].example.jsx +++ b/build/scaffolding/modifiers/[name].example.jsx @@ -26,11 +26,11 @@ export default [{ { name: 'Default styling', description: '', - staticPath: '', + exports: '', + notes: '', component: (
Lorem ipsum
- ), - notes: '' + ) } ] }]; diff --git a/build/static.jsx b/build/static.jsx index 53464cb..c4c8879 100644 --- a/build/static.jsx +++ b/build/static.jsx @@ -12,14 +12,14 @@ Object.keys(components).map((i) => { Object.keys(examples).map((j) => { const example = examples[j]; const { component } = example; - const { staticPath } = example; + const { exports } = example; const { name } = component.type; - if (staticPath) { + if (exports) { global.components.push({ name, source: component, - staticPath + exports }); } return false; diff --git a/package-lock.json b/package-lock.json index 1988039..ba03293 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1468,12 +1468,6 @@ } } }, - "@figma/plugin-typings": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/@figma/plugin-typings/-/plugin-typings-1.15.0.tgz", - "integrity": "sha512-Lr6QShIKlQNW9qdnneGr5+TIXH+EvapyfDvaaZHj7rACqIEslkZmH1mV4AmQHEs9FK5rqJMmKfSkNUNM2fztPg==", - "dev": true - }, "@jimp/bmp": { "version": "0.9.8", "resolved": "https://registry.npmjs.org/@jimp/bmp/-/bmp-0.9.8.tgz", @@ -2259,6 +2253,12 @@ "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", "dev": true }, + "abbrev": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", + "dev": true + }, "accepts": { "version": "1.3.7", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", @@ -4106,12 +4106,48 @@ "typedarray": "^0.0.6" } }, + "condense-newlines": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/condense-newlines/-/condense-newlines-0.2.1.tgz", + "integrity": "sha1-PemFVTE5R10yUCyDsC9gaE0kxV8=", + "dev": true, + "requires": { + "extend-shallow": "^2.0.1", + "is-whitespace": "^0.3.0", + "kind-of": "^3.0.2" + }, + "dependencies": { + "extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", + "dev": true, + "requires": { + "is-extendable": "^0.1.0" + } + }, + "is-buffer": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", + "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", + "dev": true + }, + "kind-of": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", + "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", + "dev": true, + "requires": { + "is-buffer": "^1.1.5" + } + } + } + }, "config-chain": { "version": "1.1.12", "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz", "integrity": "sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==", "dev": true, - "optional": true, "requires": { "ini": "^1.3.4", "proto-list": "~1.2.1" @@ -5266,6 +5302,36 @@ "safer-buffer": "^2.1.0" } }, + "editorconfig": { + "version": "0.15.3", + "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz", + "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==", + "dev": true, + "requires": { + "commander": "^2.19.0", + "lru-cache": "^4.1.5", + "semver": "^5.6.0", + "sigmund": "^1.0.1" + }, + "dependencies": { + "lru-cache": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", + "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", + "dev": true, + "requires": { + "pseudomap": "^1.0.2", + "yallist": "^2.1.2" + } + }, + "yallist": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", + "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", + "dev": true + } + } + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -9105,6 +9171,12 @@ "dev": true, "optional": true }, + "is-whitespace": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/is-whitespace/-/is-whitespace-0.3.0.tgz", + "integrity": "sha1-Fjnssb4DauxppUy7QBz77XEUq38=", + "dev": true + }, "is-whitespace-character": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz", @@ -9184,6 +9256,27 @@ "integrity": "sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ==", "dev": true }, + "js-beautify": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.11.0.tgz", + "integrity": "sha512-a26B+Cx7USQGSWnz9YxgJNMmML/QG2nqIaL7VVYPCXbqiKz8PN0waSNvroMtvAK6tY7g/wPdNWGEP+JTNIBr6A==", + "dev": true, + "requires": { + "config-chain": "^1.1.12", + "editorconfig": "^0.15.3", + "glob": "^7.1.3", + "mkdirp": "~1.0.3", + "nopt": "^4.0.3" + }, + "dependencies": { + "mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "dev": true + } + } + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -10445,6 +10538,16 @@ "integrity": "sha1-lKKxYzxPExdVMAfYlm/Q6EG2pMI=", "dev": true }, + "nopt": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz", + "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==", + "dev": true, + "requires": { + "abbrev": "1", + "osenv": "^0.1.4" + } + }, "normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -10840,6 +10943,12 @@ "arch": "^2.1.0" } }, + "os-homedir": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", + "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", + "dev": true + }, "os-locale": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz", @@ -10896,6 +11005,16 @@ "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true }, + "osenv": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", + "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", + "dev": true, + "requires": { + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.0" + } + }, "p-cancelable": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.3.0.tgz", @@ -11938,6 +12057,28 @@ "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=", "dev": true }, + "pretty": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/pretty/-/pretty-2.0.0.tgz", + "integrity": "sha1-rbx5YLe7/iiaVX3F9zdhmiINBqU=", + "dev": true, + "requires": { + "condense-newlines": "^0.2.1", + "extend-shallow": "^2.0.1", + "js-beautify": "^1.6.12" + }, + "dependencies": { + "extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", + "dev": true, + "requires": { + "is-extendable": "^0.1.0" + } + } + } + }, "pretty-error": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz", @@ -11982,8 +12123,7 @@ "version": "1.2.4", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=", - "dev": true, - "optional": true + "dev": true }, "proxy-addr": { "version": "2.0.6", @@ -12005,8 +12145,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", - "dev": true, - "optional": true + "dev": true }, "psl": { "version": "1.8.0", @@ -13177,6 +13316,12 @@ "object-inspect": "^1.7.0" } }, + "sigmund": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz", + "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=", + "dev": true + }, "signal-exit": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", @@ -14775,12 +14920,6 @@ "is-typedarray": "^1.0.0" } }, - "typescript": { - "version": "3.9.6", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.6.tgz", - "integrity": "sha512-Pspx3oKAPJtjNwE92YS05HQoY7z2SFyOpHo9MqJor3BXAGNaPUs83CuVp9VISFkSjyRfiTpmKuAYGJB7S7hOxw==", - "dev": true - }, "uglify-js": { "version": "3.4.10", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz", diff --git a/package.json b/package.json index eada4e6..4f472b5 100644 --- a/package.json +++ b/package.json @@ -112,6 +112,7 @@ "postcss-in-out": "^1.1.0", "postcss-loader": "^3.0.0", "postcss-nested": "^4.1.2", + "pretty": "^2.0.0", "react": "^16.9.0", "react-dom": "^16.9.0", "reset-css": "^4.0.1", diff --git a/src/elements/modifiers/Paddings/Paddings.example.jsx b/src/elements/modifiers/Paddings/Paddings.example.jsx index f9bdf3e..78b3ccb 100644 --- a/src/elements/modifiers/Paddings/Paddings.example.jsx +++ b/src/elements/modifiers/Paddings/Paddings.example.jsx @@ -26,7 +26,7 @@ export default [{ { name: 'Small padding', description: '', - staticPath: '', + exports: '', component: (
{Utils.ipsum('paragraph', 2)}
), @@ -34,7 +34,7 @@ export default [{ }, { name: 'Medium padding', description: '', - staticPath: '', + exports: '', component: (
{Utils.ipsum('paragraph', 2)}
), @@ -42,7 +42,7 @@ export default [{ }, { name: 'Large padding', description: '', - staticPath: '', + exports: '', component: (
{Utils.ipsum('paragraph', 2)}
), @@ -50,7 +50,7 @@ export default [{ }, { name: 'Extra large padding', description: '', - staticPath: '', + exports: '', component: (
{Utils.ipsum('paragraph', 2)}
), diff --git a/src/elements/modifiers/Razor/Razor.example.jsx b/src/elements/modifiers/Razor/Razor.example.jsx new file mode 100644 index 0000000..9343ffa --- /dev/null +++ b/src/elements/modifiers/Razor/Razor.example.jsx @@ -0,0 +1,125 @@ +import { + Using, + Inherit, + Model, + Call, + Code, + Helper, + Html, + If, + Else +} from '@razor'; + +import Button from '@atoms/Button/Button'; // Button used for example sakes + +export default [{ + examples: [ + { + name: '@using', + description: '', + exports: '', + component: ( + 
+          { /* Here we are envokng the "path" prop to load in a external resource */ }
+          
+
+          { /* Or you can envoke the "use" prop on that same external resource, but in block form */ }
+          
+            
+          
+
+ ), + options: { + showAsCode: true + }, + notes: '' + }, { + name: '@inherits', + description: '', + exports: '', + component: ( + // Here we are inheriting an external resource by again envoking the "path" prop + 
+          
+
+ ), + notes: '' + }, { + name: '@Model', + description: '', + exports: '', + component: ( + 
+          
+
+          
+
+ ), + notes: '' + }, { + name: '@if', + description: '', + exports: '', + component: ( + 
+          
+            
+          
+
+ ), + notes: '' + }, { + name: '@if/else', + description: '', + exports: '', + component: ( + 
+          
+            
+          
+          
+            
+          
+
+ ), + notes: '' + }, { + name: '@Html', + description: '', + exports: '', + component: ( + 
+          
+
+ ), + notes: '' + }, { + name: '@Helper', + description: '', + exports: '', + component: ( + 
+          
+            
+          
+
+ ), + notes: '' + }, { + name: '@ code fragments', + description: '', + exports: '', + component: ( + 
+          
+            int x = 123;
+            string y = "because.";
+          
+
+ ), + notes: '' + } + ] +}]; diff --git a/src/elements/modifiers/Razor/Razor.jsx b/src/elements/modifiers/Razor/Razor.jsx new file mode 100644 index 0000000..00caa60 --- /dev/null +++ b/src/elements/modifiers/Razor/Razor.jsx @@ -0,0 +1,321 @@ +/** + A simple re-abstraction of .NET Razor view functionality into JSX tag form. + Allow .NET to do razor view data modeling with-in and exported of JSX examples. +*/ + +/** + @using +*/ + +class Using extends React.Component { + static propTypes = { + /** The path or name of library */ + path: PropTypes.string, + use: PropTypes.string, + children: PropTypes.oneOfType([ + PropTypes.any + ]) + }; + + /** Element level options */ + static options = {}; + + render = () => { + const { + use, + path, + children + } = this.props; + + if (use) { + return ( + + @using {'('}{use}{')'} {'{\r\n'} + {children} + {'\r\n}'} + + ); + } + + return ( + {`@using ${path};\r\n`} + ); + } +} + +/** + @inherit +*/ + +class Inherit extends React.Component { + static propTypes = { + /** The path or name of library */ + path: PropTypes.string + }; + + /** Element level options */ + static options = {}; + + render = () => { + const { + path + } = this.props; + + return ( + {`@inherits ${path};\r\n`} + ); + } +} + + +/** + @Model +*/ + +class Model extends React.Component { + static propTypes = { + /** Expresses what to use from the model */ + use: PropTypes.string, + path: PropTypes.string + }; + + /** Element level options */ + static options = {}; + + render = () => { + const { + use, + path + } = this.props; + + if (use) { + return ( + {`@Model.${use}`} + ); + } + + return ( + {`@model ${path};\r\n`} + ); + } +} + +/** + @Helper +*/ + +class Helper extends React.Component { + static propTypes = { + /** Conditional expression of if statement */ + use: PropTypes.string, + /** Children passed through */ + children: PropTypes.oneOfType([ + PropTypes.any + ]) + }; + + + /** Element level options */ + static options = {}; + + render = () => { + const { + use, + children + } = this.props; + + return ( + + @Helper {use} {'{\r\n'} + {children} + {'\r\n}'} + + ); + } +} + +/** + @Html +*/ + +class Html extends React.Component { + static propTypes = { + /** Expresses what to use from the model */ + use: PropTypes.string + }; + + /** Element level options */ + static options = {}; + + render = () => { + const { + use + } = this.props; + + return ( + {`@Html.${use}`} + ); + } +} + +/** + @Call +*/ + +class Call extends React.Component { + static propTypes = { + /** What to call or render */ + use: PropTypes.string + }; + + /** Element level options */ + static options = {}; + + render = () => { + const { + use + } = this.props; + + return ( + {`@${use}`} + ); + } +} + + +/** + @If +*/ +class If extends React.Component { + static propTypes = { + /** Conditional expression of if statement */ + condition: PropTypes.string, + /** Children passed through */ + children: PropTypes.oneOfType([ + PropTypes.any + ]) + }; + + + /** Element level options */ + static options = {}; + + render = () => { + const { + condition, + children + } = this.props; + + return ( + + @if {'('}{condition}{')'} {'{'} + {children} + {'}'} + + ); + } +} + +/** + @Else +*/ + +class Else extends React.Component { + static propTypes = { + /** Children passed through */ + children: PropTypes.oneOfType([ + PropTypes.any + ]) + }; + + /** Element level options */ + static options = {}; + + render = () => { + const { + children + } = this.props; + + return ( + + else {'{'} + {children} + {'}'} + + ); + } +} + +/** + @Foreach +*/ + +class Foreach extends React.Component { + static propTypes = { + expression: PropTypes.string, + /** Children passed through */ + children: PropTypes.oneOfType([ + PropTypes.any + ]) + }; + + /** Element level options */ + static options = {}; + + render = () => { + const { + children, + expression + } = this.props; + + return ( + + @foreach {'('}{expression}{')'} {'{'} + {children} + {'}'} + + ); + } +} + +/** + @ +*/ + +class Code extends React.Component { + static propTypes = { + /** Children passed through */ + children: PropTypes.string + }; + + /** Element level options */ + static options = {}; + + render = () => { + const { + children + } = this.props; + + return ( + + @{'{'} + {children} + {'}'} + + ); + } +} + + +export { + Using, + Inherit, + Model, + Helper, + Html, + Call, + If, + Else, + Foreach, + Code +};