@neovici/cosmoz-rating 1.0.0

package/README.md

@@ -0,0 +1,3 @@
+# cosmoz-rating
+
+A pionjs rating web components

package/dist/src/hooks/use-rating.d.ts

@@ -0,0 +1,9 @@
+import { CosmozRatingElement } from '../../types/cosmoz-rating.types';
+declare const useRating: (host: CosmozRatingElement) => {
+    rating: number | null;
+    disabled: boolean;
+    maxRating: number;
+    handleComponentLeave: () => void;
+    renderStar: (index: number) => import("lit-html").TemplateResult<1>;
+};
+export default useRating;

package/dist/src/hooks/use-rating.js

@@ -0,0 +1,95 @@
+import { useState, html, useEffect } from '@pionjs/pion';
+import { svg } from 'lit-html';
+const useRating = (host) => {
+    const [hoveredRating, setHoveredRating] = useState(null);
+    const ratingAttr = host.getAttribute('rating');
+    const rating = ratingAttr ? parseFloat(ratingAttr) : null;
+    const disabled = host.hasAttribute('disabled');
+    const maxRatingAttr = host.getAttribute('max-rating');
+    const maxRating = maxRatingAttr ? parseInt(maxRatingAttr, 10) : 5;
+    useEffect(() => {
+        // Set appropriate tabIndex for accessibility
+        if (!disabled && host.tabIndex === -1) {
+            host.tabIndex = 0;
+        }
+        else if (disabled) {
+            host.tabIndex = -1;
+        }
+    }, [disabled]);
+    const getStarClass = (starIndex) => {
+        const currentRating = hoveredRating ?? rating;
+        if (currentRating === null || currentRating === undefined) {
+            return 'star';
+        }
+        if (starIndex <= Math.floor(currentRating)) {
+            return 'star filled';
+        }
+        else if (starIndex === Math.ceil(currentRating) &&
+            currentRating % 1 !== 0) {
+            return 'star partial';
+        }
+        return 'star';
+    };
+    const handleStarClick = (starRating) => {
+        if (disabled)
+            return;
+        host.dispatchEvent(new CustomEvent('change', {
+            detail: { rating: starRating },
+            bubbles: true,
+            composed: true,
+        }));
+    };
+    const handleStarHover = (starRating) => {
+        if (disabled)
+            return;
+        setHoveredRating(starRating);
+    };
+    const handleComponentLeave = () => {
+        if (disabled)
+            return;
+        setHoveredRating(null);
+    };
+    const renderStar = (index) => {
+        const starRating = index + 1;
+        const starClass = getStarClass(starRating);
+        const isPartial = starClass.includes('partial');
+        let fillPercentage = 0;
+        if (isPartial && rating !== null) {
+            fillPercentage = Math.round((rating % 1) * 100);
+        }
+        const starPath = 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z';
+        const partialPaths = svg `<defs>
+						<clipPath id="clip-${index}">
+							<rect x="0" y="0" width="${fillPercentage}%" height="100%" />
+						</clipPath>
+					</defs>
+					<!-- Background (empty) star -->
+					<path d="${starPath}" fill="var(--rating-star-color-empty)"></path>
+					<!-- Partial fill (clipped) star -->
+					<path
+						d="${starPath}"
+						fill="var(--rating-star-color)"
+						clip-path="url(#clip-${index})"
+					></path>`;
+        return html `
+			<svg
+				class="${starClass}"
+				@click="${() => handleStarClick(starRating)}"
+				@mouseenter="${() => handleStarHover(starRating)}"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				${isPartial
+            ? partialPaths
+            : svg `<path
+					d="${starPath}"
+					fill="${starClass.includes('filled')
+                ? 'var(--rating-star-color)'
+                : 'var(--rating-star-color-empty)'}"
+				></path>`}
+			</svg>
+		`;
+    };
+    return { rating, disabled, maxRating, handleComponentLeave, renderStar };
+};
+export default useRating;

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export * from './rating';

package/dist/src/index.js

@@ -0,0 +1 @@
+export * from './rating';

package/dist/src/rating.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: string;

package/dist/src/rating.css.js

@@ -0,0 +1,36 @@
+import { css } from '@pionjs/pion';
+export const styles = css `
+	:host {
+		display: inline-block;
+		--rating-star-color: #ffd700;
+		--rating-star-color-empty: #d3d3d3;
+		--rating-star-color-hover: #ffed4a;
+		--rating-star-size: 24px;
+		--rating-star-gap: 2px;
+	}
+
+	:host([disabled]) {
+		pointer-events: none;
+	}
+
+	.rating-container {
+		display: flex;
+		gap: var(--rating-star-gap);
+		align-items: center;
+	}
+
+	.star {
+		width: var(--rating-star-size);
+		height: var(--rating-star-size);
+		cursor: pointer;
+		transition: fill 0.2s ease;
+	}
+
+	:host([disabled]) .star {
+		cursor: default;
+	}
+
+	.star:hover path {
+		color: var(--rating-star-color-hover) !important;
+	}
+`;

package/dist/src/rating.d.ts

@@ -0,0 +1,4 @@
+import { CosmozRatingElement } from '../types/cosmoz-rating.types';
+declare const CosmozRating: import("@pionjs/pion/lib/component").ComponentConstructor<CosmozRatingElement>;
+export { CosmozRating };
+export default CosmozRating;

package/dist/src/rating.js

@@ -0,0 +1,19 @@
+import { component, html } from '@pionjs/pion';
+import useRating from './hooks/use-rating';
+import { styles } from './rating.css';
+const Rating = (host) => {
+    const { maxRating, renderStar, handleComponentLeave } = useRating(host);
+    return html `
+		<div class="rating-container" @mouseleave=${handleComponentLeave}>
+			${Array.from({ length: maxRating }, (_, index) => renderStar(index))}
+		</div>
+	`;
+};
+const CosmozRating = component(Rating, {
+    observedAttributes: ['rating', 'disabled', 'max-rating'],
+    useShadowDOM: true,
+    styleSheets: [styles],
+});
+customElements.define('cosmoz-rating', CosmozRating);
+export { CosmozRating };
+export default CosmozRating;

package/dist/types/cosmoz-rating.types.d.ts

@@ -0,0 +1,12 @@
+export interface RatingEvent extends CustomEvent {
+    detail: {
+        rating: number;
+    };
+}
+export interface CosmozRatingProps {
+    rating?: number | null;
+    disabled?: boolean;
+    maxRating?: number;
+}
+export interface CosmozRatingElement extends HTMLElement, CosmozRatingProps {
+}

package/dist/types/cosmoz-rating.types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,92 @@
+{
+	"name": "@neovici/cosmoz-rating",
+	"version": "1.0.0",
+	"description": "A simple rating web component",
+	"keywords": [
+		"web-components",
+		"rating",
+		"stars",
+		"pion",
+		"lit-html"
+	],
+	"homepage": "https://github.com/neovici/cosmoz-rating#readme",
+	"bugs": {
+		"url": "https://github.com/neovici/cosmoz-rating/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/neovici/cosmoz-rating.git"
+	},
+	"license": "Apache-2.0",
+	"author": "",
+	"main": "dist/index.js",
+	"directories": {
+		"test": "test"
+	},
+	"scripts": {
+		"lint": "tsc && eslint --cache .",
+		"build": "tsc -p tsconfig.build.json",
+		"start": "wds",
+		"test": "wtr --coverage",
+		"test:watch": "wtr --watch",
+		"dev": "npm run storybook:start",
+		"storybook:start": "storybook dev -p 8000",
+		"storybook:build": "storybook build",
+		"storybook:deploy": "storybook-to-ghpages",
+		"storybook:preview": "npm run storybook:build && http-server -d ./storybook-static/",
+		"prepare": "husky"
+	},
+	"release": {
+		"plugins": [
+			"@semantic-release/commit-analyzer",
+			"@semantic-release/release-notes-generator",
+			"@semantic-release/changelog",
+			"@semantic-release/github",
+			"@semantic-release/npm",
+			"@semantic-release/git"
+		],
+		"branch": "master",
+		"preset": "conventionalcommits"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"files": [
+		"dist/",
+		"types"
+	],
+	"exports": {
+		".": "./dist/index.js"
+	},
+	"dependencies": {
+		"@pionjs/pion": "^2.5.2",
+		"lit-html": "^3.3.1"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^19.2.1",
+		"@commitlint/config-conventional": "^19.1.0",
+		"@eslint/eslintrc": "^2.0.0",
+		"@neovici/cfg": "^2.0.0",
+		"@open-wc/testing": "^4.0.0",
+		"@semantic-release/changelog": "^6.0.0",
+		"@semantic-release/git": "^10.0.0",
+		"@storybook/addon-essentials": "^7.0.0",
+		"@storybook/addon-links": "^7.0.0",
+		"@storybook/web-components": "7.6.17",
+		"@types/mocha": "^10.0.6",
+		"@types/node": "^22.10.2",
+		"@web/storybook-builder": "^0.1.9",
+		"@web/storybook-framework-web-components": "^0.1.1",
+		"esbuild": "^0.24.0",
+		"http-server": "^14.1.1",
+		"husky": "^9.0.11",
+		"rollup-plugin-esbuild": "^6.1.1",
+		"semantic-release": "^24.0.0",
+		"sinon": "^19.0.0",
+		"storybook": "^7.0.0",
+		"typescript": "^5.4.3"
+	},
+	"overrides": {
+		"conventional-changelog-conventionalcommits": ">= 8.0.0"
+	}
+}

package/types/cosmoz-rating.types.ts

@@ -0,0 +1,13 @@
+export interface RatingEvent extends CustomEvent {
+	detail: {
+		rating: number;
+	};
+}
+
+export interface CosmozRatingProps {
+	rating?: number | null;
+	disabled?: boolean;
+	maxRating?: number;
+}
+
+export interface CosmozRatingElement extends HTMLElement, CosmozRatingProps {}