@ehubbell/html

v0.4.2

Published

3 months ago

An HTML component library with Tailwind rollups.

0High
0Medium
0Low

ehubbell

html react playbooks tailwind tailwind rollups typescript

Overview

This library provides a wrapper around HTML5 elements that allows you to pass in a tailwind property for className rollups. This allows us to remove duplicate classNames while allowing you to override base classNames through inheritance. The end result is fewer libraries (no need for clsx or classnames) alongside a fast, flexible, and composable DX.

Prerequisites

Node
Tailwind

Installation

npm install @ehubbell/html

Usage

import { Button } from '@ehubbell/html';

const Btn = ({ type, onClick, tailwind, className }) => (
  <Button
    type={type}
    onClick={onClick}
    tailwind={{
      bgColor: 'bg-blue-500',
      color: 'text-white',
      fontSize: 'text-sm',
      hover: 'hover:bg-blue-400',
      spacing: 'px-3 py-1.5',
      ...tailwind
    }}
    className={className ? className : 'btn-primary'}>
    Click me
  </Button>
);

How it works

The library wraps core HTML5 element
Every element accepts it's standard HTML attributes
Every element also accepts two additional properties [name, tailwind]
The name property gets converted to the data-name attibute for better DOM tree navigation
The tailwind property accepts an arbitrary object, defined by you, containing tailwind className values
The library will then rollup that object into a className string and pass it to the HTML element while removing duplicates
The end result is a fun, composable and organized DX bjuilt for tailwind projects.

Supported HTML Elements

| HTML Elements (A–C) |--------------------------| | <a> | <abbr> | <address> | <area> | <article> | <aside> | <audio> | <b> | <base> | <bdi> | <bdo> | <blockquote> | <body> | <br> | <button> | <canvas> | <caption> | <cite> | <code> | | | | | | | | | | | | | | | | | | | HTML Elements (D–H) | HTML Elements (I–M) | HTML Elements (N–S) | HTML Elements (T–Z) | --------------------------|---------------------------|----------------------------|-----------------------------| | <data> | <iframe> | <nav> | <table> | | <datalist> | <img> | <noscript> | <tbody> | | <dd> | <input> | <object> | <td> | | <del> | <ins> | <ol> | <template> | | <details> | <kbd> | <optgroup> | <textarea> | | <dfn> | <label> | <option> | <tfoot> | | <dialog> | <legend> | <output> | <th> | | <div> | <li> | <p> | <thead> | | <dl> | <link> | <param> | <time> | | <dt> | <main> | <picture> | <title> | | <em> | <map> | <pre> | <tr> | | <embed> | <mark> | <progress> | <track> | | <fieldset> | <menu> | <q> | <u> | | <figcaption> | <meta> | <rp> | <ul> | | <figure> | <meter> | <rt> | <var> | | <footer> | | <ruby> | <video> | | <form> | | <s> | <wbr> | | <h1> to <h6> | | <samp> | | | <head> | | <script> | | | <header> | | <section> | | | <hr> | | <select> | | | | <small> | | | | <source> | | | | <span> | | | | <strong> | | | | <style> | | | | <sub> | | | | <summary> | | | | <sup> | |

Development

This project is designed for development using the yalc library.

npm run dev
switch to project
npx yalc add @playbooks/theme
You may need to restart your application server
After that, this library will hot reload into the consuming application

Scripts

We've included a couple of helpful scripts for faster development.
commit: npm run commit -- 'commit message'
deploy: npm run deploy -- 'commit message' [major|minor|patch]

Husky

Husky configuration is setup to lint and format the repo on every commit
Edit the .husky/pre-commit file to change your settings

Author

Notes

To see this library in action, checkout the following projects: