console.log design system
This package aims to make easier to create visual console messages (including groupCollapsed ones) as well as to create containers so messages will be more organized.
This is the very first version of it. If you have any suggestions, feel free to get in touch!
This message was easily displayed by running makeComment('makeComment()', ['Testando método makeComment()'], 'important', 'md', 'badgeInverted')
Features
makeComment
Is the method responsable by printing the log message in the console. You can choose wether to display one or more console.log()
messages or to print grouped console.log()
message(s) within a console.groupCollapsed()
group of messages.
This is an more complex possible application of the makeComment()
method, in this example, to display datalayer pushed tags
It is possible to define:
-
Title (the message or message group title)
-
Comments (the second part of the message or the inner messages)
-
Status (like success, error, warning, info...),
-
Size (for example large, small, extra extra small...)
-
Type (main, secondary, badge or badgeInverted) of the message.
makeCommentDemo
A visual guide made to help you when choosing which style is more appropriate to each message to be displayed.
Next Releases
Custom Style with consoleDefaultParams prop | It is in the roadmap to implement a feature that allows user to define its own color theme.
Getting Started
Dependencies
You must have node.js installed in you environment. You can ensure you have it installed by running node -v
in the terminal of your preference.
Install Package
You just need to run npm i console-log-design-system
or you can directly download it from npm oficial website.
Import
How To Import Both makeComment() and makeCommentDemo()
You can import the makeComment()
and makeCommentDemo()
methods simply by copying and pasting the following code snippet in yout component/module:
;constmakeCommentmakeCommentDemo} = clds;
You can also import it in a more manual manner, by importing in your vanilla JS script
;constmakeCommentmakeCommentDemo} = clds;
...and then, calling your script as a module in you HTML file:
How To Import makeComment()
You can import the makeComment()
method simply by copying and pasting the following code snippet in yout component/module:
;constmakeComment} = clds;
You can also import it in a more manual manner, by importing in your vanilla JS script
;constmakeComment} = clds;
...and then, calling your script as a module in you HTML file:
How To Import makeCommentDemo()
You can import the makeCommentDemo()
method simply by copying and pasting the following code snippet in yout component/module:
;constmakeCommentDemo} = clds;
You can also import it in a more manual manner, by importing in your vanilla JS script
;constmakeCommentDemo} = clds;
...and then, calling your script as a module in you HTML file:
Usage
How to use makeComment()
?
You have to pass at leat a title as the first argument (that expect to receive a string typed argument).
;
In this case, message displayed will have the default status, a medium size and its type defined as main.
But you can pass more optional arguments, such as:
comments
An array with different comments. Each one of them will be displayed with console.log
method
status
makeCommentDemo()
status options preview
A string that represent the status of the message and define its colors. It is pobbible to choose between 'default', 'bw', 'wb', 'fail', 'danger', 'alert', 'warning', 'info', 'success', 'successful', 'important'
size
makeCommentDemo()
size options preview
Defines sizes of the message. Possible values: 'xxs, 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'
type
makeCommentDemo()
type options preview
You can choose one of the following options: 'main', 'secondary', 'badge', 'badgeInverted'. The secondary type does not use console.groupCollapsed
method, so title is joined with messages but it still have its own style.
How to use makeCommentDemo()
?
It doesn't require any params, you just need to import it and to call it passing the arguments you want to.
Screenshots
Some other screenshots to show how flexible can be the this package
makeComment()
More Details About makeComment()
/*** @function makeComment* Returns a comment to console with a custom style according to the passed arguments** @param* @param* @param {String='default','bw','wb','fail','danger','alert','warning','info','success','successful','important'} [status='default'] - status to be used to define its style (default|bw|wb|fail|danger|alert|warning|info|success|successful|important)* @param {String='xxs,'xs','sm','md','lg','xl','xxl'} [size='md'] - defines font properties (xxs|xs|sm|md|lg|xl|xxl)* @param {String='main','secondary','badge','badgeInverted'} [type='main'] - defines wich style to be applied (main|secondary|badge|badgeInverted)** @requires consoleDefaultParams - that maps its styles template properties*/
consoleDefaultParams
/*** @const consoleDefaultParams* Detains all default template console style* @namespace* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property* @property*/
Contact Me
Marcelo Diament | Front End Developer and Instructor