Add customizable Star Ratings component using star-rating.js library (#1571)

.changeset/curvy-fishes-lie.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add customizable Star Ratings component using `star-rating.js` library

.github/workflows/bundlewatch.yml

@@ -34,7 +34,7 @@ jobs:
           bundler-cache: true
 
       - name: Install pnpm dependencies
-        run: pnpm install
+        run: pnpm install --no-frozen-lockfile
 
       - name: Run build
         run: pnpm run build

package.json

@@ -4,6 +4,7 @@
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
+    "dev": "pnpm run start-plugins",
     "start": "gulp start",
     "start-plugins": "gulp start --with-plugins",
     "build": "gulp build",
@@ -184,7 +185,8 @@
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "yaml": "^2.2.2",
-    "yargs": "^17.7.2"
+    "yargs": "^17.7.2",
+    "star-rating.js": "^4.3.0"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.7",
@@ -205,7 +207,8 @@
     "nouislider": "^15.7.0",
     "plyr": "^3.7.8",
     "tinymce": "^6.4.2",
-    "tom-select": "^2.2.2"
+    "tom-select": "^2.2.2",
+    "star-rating.js": "^4.3.0"
   },
   "peerDependenciesMeta": {
     "apexcharts": {
@@ -252,6 +255,9 @@
     },
     "tom-select": {
       "optional": true
+    },
+    "star-rating.js": {
+      "optional": true
     }
   },
   "release-it": {

src/pages/_data/libs.json

@@ -22,12 +22,14 @@
     "fslightbox": "fslightbox/index.js",
     "tinymce" :"tinymce/tinymce.min.js",
     "plyr": "plyr/dist/plyr.min.js",
-    "dropzone": "dropzone/dist/dropzone-min.js"
+    "dropzone": "dropzone/dist/dropzone-min.js",
+    "star-rating.js": "star-rating.js/dist/star-rating.min.js"
   },
   "css": {
     "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css",
     "dropzone": "dropzone/dist/dropzone.css",
-    "plyr": "plyr/dist/plyr.css"
+    "plyr": "plyr/dist/plyr.css",
+    "star-rating.js": "star-rating.js/dist/star-rating.min.css"
   },
   "js-copy": {
     "tinymce" :"tinymce/*"

src/pages/_data/menu.yml

@@ -79,6 +79,10 @@ base:
       url: steps.html
       title: Steps
       badge: New
+    stars-rating:
+      title: Stars rating
+      url: stars-rating.html
+      badge: New
     tabs:
       url: tabs.html
       title: Tabs

src/pages/_includes/ui/rating.html

@@ -0,0 +1,38 @@
+{% assign id = include.id | default: include.icon | default: 'default' %}
+{% assign icon = include.icon | default: 'star-filled' %}
+{% assign color = include.color %}
+{% assign size = include.size | default: false %}
+{% assign value = include.value %}
+
+<select id="rating-{{ id }}">
+	<option value="">Select a rating</option>
+	<option value="5"{% if value == 5 %} selected{% endif %}>Excellent</option>
+	<option value="4"{% if value == 4 %} selected{% endif %}>Very Good</option>
+	<option value="3"{% if value == 3 %} selected{% endif %}>Average</option>
+	<option value="2"{% if value == 2 %} selected{% endif %}>Poor</option>
+	<option value="1"{% if value == 1 %} selected{% endif %}>Terrible</option>
+</select>
+
+{% capture star %}
+{% include ui/icon.html class="gl-star-full" icon=icon color=color size=size %}
+{% endcapture %}
+{% assign star = star | strip | replace_regex: "\n\s+", "" %}
+
+{% capture_global scripts %}
+<script>
+  // @formatter:off
+  {% if jekyll.environment == 'development' %}window.tabler_rating = window.tabler_rating || {};{% endif %}
+
+  document.addEventListener("DOMContentLoaded", function () {
+    const rating = new StarRating('#rating-{{ id }}', {
+		tooltip: false,
+		clearable: false,
+		stars: function (el, item, index) {
+			 el.innerHTML = `{{ star }}`; 
+		},
+	 })		
+    {% if jekyll.environment == 'development' %}window.tabler_rating["rating-{{ id }}"] = rating;{% endif %}
+  })
+  // @formatter:on
+</script>
+{% endcapture_global %}

src/pages/stars-rating.html

@@ -0,0 +1,65 @@
+---
+title: Star Ratings
+page-header: Star Ratings
+description:
+  The star ratings HTML admin panel component is a user interface element that
+  allows users to rate items using a star rating system. This component is
+  commonly used in applications that allow users to rate products, services, or
+  other items.
+libs: tabler-flags, star-rating.js
+menu: base.stars-rating
+---
+
+<div class="row row-cards">
+	<div class="col-md-4">
+		<div class="row row-cards">
+			<div class="col-12">
+				<div class="card">
+					<div class="card-body">
+						<div class="h3 card-title">Basic</div>
+						<div>{% include ui/rating.html value=4 %}</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-12">
+				<div class="card">
+					<div class="card-body">
+						<div class="h3 card-title">Different icon</div>
+						<div class="space-y">
+							{% include ui/rating.html value=4 %}
+							{% include ui/rating.html icon="heart-filled" value=4 color="red" %}
+							{% include ui/rating.html icon="ghost-filled" value=4 color="azure" %}
+							{% include ui/rating.html icon="circle-filled" value=4 color="green" %}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-4">
+		<div class="card">
+			<div class="card-body">
+				<div class="h3 card-title">Custom colors</div>
+				<div class="space-y">
+					{% include ui/rating.html id="color" value=3 %}
+					{% include ui/rating.html id="color-primary" color="primary" value=3 %}
+					{% include ui/rating.html id="color-red" color="red" value=3 %}
+					{% include ui/rating.html id="color-lime" color="lime" value=3 %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-4">
+		<div class="card">
+			<div class="card-body">
+				<div class="h3 card-title">Custom sizes</div>
+				<div class="space-y">
+					{% include ui/rating.html id="size-sm" value=3 size="sm" %}
+					{% include ui/rating.html id="size-primary" value=3 %}
+					{% include ui/rating.html id="size-red" value=3 size="md" %}
+					{% include ui/rating.html id="size-lime" value=3 size="lg" %}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

src/scss/tabler-vendors.scss

@@ -9,3 +9,4 @@
 @import "vendor/fslightbox";
 @import "vendor/plyr";
 @import "vendor/tinymce";
+@import "vendor/stars-rating";

src/scss/vendor/_stars-rating.scss

@@ -0,0 +1,20 @@
+:root {
+  --gl-star-size: auto;
+  --gl-star-color: var(--#{$prefix}yellow);
+  --gl-star-color-inactive: var(--#{$prefix}border-color);
+}
+
+[data-star-rating] {
+  svg {
+    width: var(--#{$prefix}icon-size, --gl-star-size);
+    height: var(--#{$prefix}icon-size, --gl-star-size);
+  }
+
+  :not(.gl-active) > .gl-star-full {
+    color: var(--gl-star-color-inactive) !important;
+  }
+
+  .gl-active > .gl-star-full {
+    color: var(--gl-star-color);
+  }
+}