@razerspine/pug-ui-kit 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,31 @@
+## [1.0.1] - 2026-02-03
+
+### Changed
+- **dataTable**: Refactored the `dataTable` mixin to improve configuration consistency.
+- **dataTable**: The `options` parameter now accepts an `actions` array to define row actions (links/buttons) dynamically.
+
+### Removed
+- **dataTable**: Removed support for the Pug `block` (slot) content for rendering actions. The `showActions` boolean option has also been removed.
+
+### Migration Guide
+If you were using the block content for actions:
+```pug
+// Old version (v1.0.0)
++dataTable(items, cols, { showActions: true })
+  a(href=`/edit/${item.id}`) Edit
+```
+You should now update to:
+
+```pug
+// New version (v1.0.1)
++dataTable(items, cols, {
+  actions: [
+    { label: 'Edit', url: (item) => `/edit/${item.id}` }
+  ]
+})
+```
+
+## [1.1.0] - 2026-02-03
+### Added
+- **Styles**: Full SCSS and LESS support for all UI components.
+- **Architecture**: Added global settings, grid system, and themes (light/dark).

package/README.md

@@ -1,8 +1,7 @@
 # @razerspine/pug-ui-kit
 
-A collection of reusable Pug mixins designed for the [Webpack Starter Monorepo](https://github.com/Razerspine/webpack-starter-monorepo).
-
-This package centralizes UI components, ensuring consistency across all templates generated by the CLI.
+A professional, full-featured UI Kit for Pug (Jade) templates, including flexible mixins and complete styling support (SCSS/LESS).
+Designed to work seamlessly with the [Webpack Starter Monorepo](https://github.com/Razerspine/webpack-starter-monorepo)
 
 ## 📦 Installation
 
@@ -14,44 +13,138 @@ npm install @razerspine/pug-ui-kit
 
 ## 🛠 Webpack Configuration
 
-To use these mixins efficiently without dealing with complex relative paths (e.g., ../../node_modules/...), configure a Webpack alias in your webpack.config.js:
+### 1. Webpack (Pug Mixins)
+
+To avoid complex relative paths, use the includePaths provided by the package:
 
 ```js
-const pugMixinsPath = require('@razerspine/pug-ui-kit');
+const uiKit = require('@razerspine/pug-ui-kit');
 
 module.exports = {
   // ...
   resolve: {
     alias: {
-      // Create an alias 'pug-ui-kit' pointing to the mixins directory
-      'pug-ui-kit': pugMixinsPath,
+      // Points to the directory containing all .pug mixins
+      'pug-ui-kit': uiKit.paths.mixins,
     },
   },
 };
 ```
-## 🚀 Usage
 
-Once the alias is configured, you can include any mixin in your .pug files using the ~pug-ui-kit/ prefix:
+### 2. Styles (SCSS/LESS)
+The package provides full styling for all components.
+If you only need specific parts (e.g., just variables and the table), you can import them individually.
+
+Note: Always import settings first, as other components depend on them.
+
+#### For SCSS:
 
-### Example: Button (btn.pug)
+```scss
+// In your main.scss
+@use "@razerspine/pug-ui-kit/scss/ui-kit" as *;
+```
+
+#### For LESS:
 
+```less
+// In your main.less
+@import "@razerspine/pug-ui-kit/less/ui-kit";
 ```
+
+## 🚀 Usage
+
+#### Button
+
+```pug
 include ~pug-ui-kit/btn.pug
 
-+btn('Save', 'primary', 'small', {type: 'button'})
++btn('Save', 'primary', 'small', { type: 'submit' })
 ```
 
-## 📂 Available Mixins
+#### Data Table (New in v1.1.0)
+
+```pug
+include ~pug-ui-kit/data-table.pug
+
+- const data = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
+
++dataTable(users, ['id', 'name'], {
+  showIndex: true,
+  labels: { name: 'Full Name' },
+  actions: [
+    { 
+      label: 'Edit', 
+      class: 'btn-edit', 
+      url: (item) => `/users/edit/${item.id}` 
+    }
+  ]
+})
+```
+
+#### Form Input
+
+```pug
+include ~pug-ui-kit/form-input.pug
+
++formInput('text', 'name', 'Name', 'Enter your name', 'name')
+```
+
+#### Form Textarea
+
+```pug
+include ~pug-ui-kit/form-textarea.pug
+
++formTextarea('message', 'Message', 'Type your message...', 'message')
+```
+
+#### Input Checkbox
+
+```pug
+include ~pug-ui-kit/input-checkbox.pug
+
++inputCheckbox('agree', 'I agree to all terms')
+```
+
+#### Input Radio
+
+```pug
+include ~pug-ui-kit/input-radio.pug
+
+.form-group
+  .input-group
+    span.form-label.w-100 Communication method
+    +inputRadio('contact-email', 'Email', 'contact', 'email')
+    +inputRadio('contact-phone', 'Phone', 'contact', 'phone')
+```
+
+#### Single Select
+
+```pug
+include ~pug-ui-kit/single-select.pug
+
++singleSelect('topic', 'Topic', [
+  {value:'support', text:'Support'},
+  {value:'feedback', text:'Feedback'},
+  {value:'other', text:'Other'}
+])
+```
+
+## 📂 Package Structure
+
+* mixins/ - reusable Pug components. 
+* scss/ - complete SCSS kit (Settings, Components, Themes, Layout). 
+* less/ - complete LESS version for alternative workflows. 
+* index.js - path resolution helper.
 
-The package currently includes the following components:
+## 🧱 Components Included
 
-* btn.pug - renders a configurable button with optional icon and text.  
-* data-table.pug - renders a flexible table from an array of objects.
-* form-input.pug - renders a configurable input element with optional label and placeholder. 
-* form-textarea.pug - renders a configurable textarea element with optional label and placeholder.
-* input-checkbox.pug - renders a configurable checkbox with label and optional attributes.
-* input-radio.pug — renders a configurable radio input with label for use in radio groups. 
-* single-select.pug - renders a configurable select element with label, options, and optional placeholder.
+* btn.pug
+* data-table.pug
+* form-input.pug
+* form-textarea.pug
+* input-checkbox.pug
+* input-radio.pug
+* single-select.pug
 
 ## 📄 License
 This project is licensed under the ISC License.

package/index.js

@@ -1,3 +1,11 @@
 const path = require('path');
 
-module.exports = path.join(__dirname, 'mixins');
+module.exports = {
+  paths: {
+    scss: path.join(__dirname, 'scss'),
+    less: path.join(__dirname, 'less'),
+    mixins: path.join(__dirname, 'mixins')
+  },
+  // helper
+  getStylePath: (type = 'scss') => path.join(__dirname, type, `ui-kit.${type}`)
+};

package/less/base/_fonts.less

@@ -0,0 +1,44 @@
+@font-face {
+  font-family: 'Roboto';
+  src: url('../../../fonts/Roboto-Thin.woff2') format('woff2'),
+  url('../../../fonts/Roboto-Thin.woff') format('woff');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../../../fonts/Roboto-Light.woff2') format('woff2'),
+  url('../../../fonts/Roboto-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../../../fonts/Roboto-Regular.woff2') format('woff2'),
+  url('../../../fonts/Roboto-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../../../fonts/Roboto-Medium.woff2') format('woff2'),
+  url('../../../fonts/Roboto-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../../../fonts/Roboto-Bold.woff2') format('woff2'),
+  url("../../../fonts/Roboto-Bold.woff") format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}

package/less/base/_index.less

@@ -0,0 +1,2 @@
+@import '_reset';
+@import '_fonts';

package/less/base/_reset.less

@@ -0,0 +1,155 @@
+@import '../settings/_index';
+// Classic CSS reset adapted to SCSS
+// Based on Meyer reset + sensible defaults (box-sizing, media, form elements)
+
+/* Box sizing */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin/padding and set core defaults */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: baseline;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+/* Base html/body */
+html {
+  line-height: 1.15; /* better default line-height */
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+}
+
+body {
+  width: 100%;
+  min-height: 100dvh;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Remove list styles */
+ol, ul {
+  list-style: none;
+}
+
+/* Remove default quotes */
+blockquote, q {
+  quotes: none;
+}
+
+blockquote::before, blockquote::after,
+q::before, q::after {
+  content: none;
+}
+
+/* Tables */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Images and media */
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* Links */
+a {
+  background-color: transparent;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Forms: inputs, buttons, selects, textareas */
+input, button, textarea, select {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  box-shadow: none;
+  resize: vertical;
+}
+
+/* Buttons and clickable elements */
+button, [type="button"], [type="submit"], [role="button"] {
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+/* Remove inner focus border in Firefox */
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/* Fieldset and legend */
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+/* Accessibility helpers */
+[hidden] {
+  display: none !important;
+}
+
+/* Reduce motion for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Utility: make images and media non-draggable by default */
+img, svg, video {
+  user-select: none;
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+}
+
+///* Optional: set base focus outline for keyboard users (can be customized) */
+//:focus {
+//  outline: 2px solid rgba(13, 110, 253, 0.6);
+//  outline-offset: 2px;
+//}

package/less/components/_aside.less

@@ -0,0 +1,49 @@
+@import '../settings/_index';
+
+.aside {
+  grid-area: aside;
+  display: flex;
+  justify-content: flex-start;
+  padding: 0 @gutter;
+
+  @media screen and (min-width: @breakpoint-lg) {
+    padding: 0;
+  }
+}
+
+.navigation {
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-outline);
+  border-radius: @border-radius;
+  padding: @gutter;
+  width: 100%;
+
+  @media screen and (min-width: @breakpoint-lg) {
+    padding: calc(@gutter * 2);
+  }
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+
+  &__item {
+    width: 100%;
+
+    &:hover {
+      .list__link {
+        color: var(--brand-600);
+      }
+    }
+  }
+
+  &__link {
+    color: var(--text-primary);
+    display: block;
+    width: 100%;
+    padding: .375rem .625rem;
+  }
+}

package/less/components/_buttons.less

@@ -0,0 +1,156 @@
+@import '../settings/_index';
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .25rem;
+  padding: .5rem .75rem;
+  border-radius: @border-radius;
+  border: 1px solid transparent;
+  font-family: @font-family;
+  font-weight: 500;
+  cursor: pointer;
+  text-decoration: none;
+  line-height: 1;
+  transition: background .15s ease, border-color .15s ease, color .15s ease;
+
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+  &--primary {
+    background: var(--brand-500);
+    color: var(--text-on-brand);
+    border-color: var(--brand-500);
+
+    &:not([disabled]):not(.is-disabled):hover {
+      background: var(--brand-700);
+      border-color: var(--brand-700);
+    }
+  }
+
+  &--secondary {
+    background: var(--slate-500);
+    border-color: var(--slate-500);
+    color: var(--text-on-brand);
+
+    &:not([disabled]):not(.is-disabled):hover {
+      background: var(--slate-700);
+      border-color: var(--slate-700);
+    }
+  }
+
+  &--outline {
+    background: transparent;
+    color: var(--brand-500);
+    border-color: var(--brand-500);
+
+    &:not([disabled]):not(.is-disabled):hover {
+      border-color: var(--brand-600);
+      color: var(--brand-600);
+    }
+  }
+
+  &--text {
+    color: var(--text-primary);
+
+    &:not([disabled]):not(.is-disabled):hover {
+      color: var(--text-secondary);
+    }
+
+    &-primary {
+      color: var(--brand-500);
+
+      &:not([disabled]):not(.is-disabled):hover {
+        color: var(--brand-600);
+      }
+    }
+
+    &-secondary {
+      color: var(--text-secondary);
+
+      &:not([disabled]):not(.is-disabled):hover {
+        color: var(--text-primary);
+      }
+    }
+  }
+
+  &--icon {
+    background: transparent;
+    color: var(--text-primary);
+    padding: 0;
+
+    &-primary {
+      padding: 0;
+      background: var(--brand-500);
+      color: var(--text-on-brand);
+      border-color: var(--brand-500);
+
+      &:not([disabled]):not(.is-disabled):hover {
+        background: var(--brand-700);
+        border-color: var(--brand-700);
+      }
+    }
+
+    &-secondary {
+      padding: 0;
+      background: var(--slate-500);
+      border-color: var(--slate-500);
+      color: var(--text-on-brand);
+
+      &:not([disabled]):not(.is-disabled):hover {
+        background: var(--slate-700);
+        border-color: var(--slate-700);
+      }
+    }
+
+    &-outline {
+      padding: 0;
+      background: transparent;
+      color: var(--brand-500);
+      border-color: var(--brand-500);
+
+      &:not([disabled]):not(.is-disabled):hover {
+        border-color: var(--brand-600);
+        color: var(--brand-600);
+      }
+    }
+
+    &-small {
+      width: 1.75rem;
+      height: 1.75rem;
+    }
+
+    &-medium {
+      width: 2.25rem;
+      height: 2.25rem;
+    }
+
+    &-large {
+      width: 2.625rem;
+      height: 2.625rem;
+    }
+  }
+
+  &--small {
+    padding: .375rem .625rem;
+    font-size: .875rem;
+  }
+
+  &--medium {
+    padding: .5rem .75rem;
+    font-size: 1rem;
+  }
+
+  &--large {
+    padding: .625rem 1rem;
+    font-size: 1.125rem;
+  }
+
+  &:disabled {
+    opacity: .6;
+    cursor: not-allowed;
+  }
+}

package/less/components/_footer.less

@@ -0,0 +1,25 @@
+@import '../settings/_index';
+
+.footer {
+  grid-area: footer;
+  background-color: var(--bg-surface);
+  box-shadow: var(--shadow-outline);
+  color: var(--text-secondary);
+
+  &__container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: @container-max;
+    margin: 0 auto;
+    padding: calc(@gutter * 2) @gutter;
+    gap: 10px;
+  }
+
+  &__text {
+    &--bold {
+      font-weight: 700;
+    }
+  }
+}

package/less/components/_form-control.less

@@ -0,0 +1,27 @@
+@import '../settings/_variables';
+
+.form-control {
+  display: block;
+  width: 100%;
+  padding: .5rem .75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--text-primary);
+  background-color: var(--bg-subtle);
+  background-clip: padding-box;
+  border: 1px solid var(--border-subtle);
+  border-radius: @border-radius;
+  transition: border-color .15s ease, box-shadow .15s ease;
+  box-sizing: border-box;
+
+  &:focus {
+    color: var(--text-primary);
+    border-color: var(--border-interactive);
+    box-shadow: var(--shadow-outline);
+    outline: none;
+  }
+
+  &::placeholder {
+    color: var(--text-secondary);
+  }
+}

package/less/components/_form-textarea.less

@@ -0,0 +1,7 @@
+@import '_form-control';
+
+.form-textarea {
+  .form-control();
+  min-height: 100px;
+  resize: vertical;
+}