@yannickbaze/star-rating 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -20,13 +20,13 @@ Perfect for product reviews, feedback systems, and user ratings.
20
20
  ## 📦 Installation
21
21
 
22
22
  ```bash
23
- npm install star-rating-react-component
23
+ npm install @yannickbaze/star-rating
24
24
  ```
25
25
 
26
26
  or
27
27
 
28
28
  ```bash
29
- yarn add star-rating-react-component
29
+ yarn add npm install @yannickbaze/star-rating
30
30
  ```
31
31
 
32
32
  ---
@@ -34,7 +34,7 @@ yarn add star-rating-react-component
34
34
  ## 🚀 Usage
35
35
 
36
36
  ```jsx
37
- import StarRating from "star-rating-react-component";
37
+ import StarRating from "@yannickbaze/star-rating";
38
38
 
39
39
  function App() {
40
40
  return (
@@ -0,0 +1,161 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = StarRating;
7
+ var _react = require("react");
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
10
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
11
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
12
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
13
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
14
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
15
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
16
+ var container = {
17
+ display: "flex",
18
+ alignItems: "center",
19
+ gap: "16px"
20
+ };
21
+ var starContainerStyle = {
22
+ display: "flex",
23
+ gap: "4px"
24
+ };
25
+ StarRating.protoTypes = {
26
+ maxRating: _propTypes["default"].number,
27
+ defaultRating: _propTypes["default"].number,
28
+ color: _propTypes["default"].string,
29
+ size: _propTypes["default"].number,
30
+ messages: _propTypes["default"].array,
31
+ className: _propTypes["default"].string,
32
+ onSetRating: _propTypes["default"].func
33
+ };
34
+ function StarRating(_ref) {
35
+ var _ref$maxRating = _ref.maxRating,
36
+ maxRating = _ref$maxRating === void 0 ? 5 : _ref$maxRating,
37
+ _ref$color = _ref.color,
38
+ color = _ref$color === void 0 ? "#fcc419" : _ref$color,
39
+ _ref$size = _ref.size,
40
+ size = _ref$size === void 0 ? 30 : _ref$size,
41
+ className = _ref.className,
42
+ _ref$messages = _ref.messages,
43
+ messages = _ref$messages === void 0 ? [] : _ref$messages,
44
+ _ref$defaultRating = _ref.defaultRating,
45
+ defaultRating = _ref$defaultRating === void 0 ? 0 : _ref$defaultRating,
46
+ onSetRating = _ref.onSetRating;
47
+ var _useState = (0, _react.useState)(defaultRating),
48
+ _useState2 = _slicedToArray(_useState, 2),
49
+ rating = _useState2[0],
50
+ setRating = _useState2[1];
51
+ var _useState3 = (0, _react.useState)(0),
52
+ _useState4 = _slicedToArray(_useState3, 2),
53
+ tempRating = _useState4[0],
54
+ setTempRating = _useState4[1];
55
+ function handleRating(rating) {
56
+ setRating(rating);
57
+ if (onSetRating) onSetRating(rating);
58
+ }
59
+ var textStyle = {
60
+ lineHeight: "1",
61
+ margin: "0",
62
+ color: color,
63
+ fontSize: "".concat(size / 1.5, "px")
64
+ };
65
+ return /*#__PURE__*/React.createElement("div", {
66
+ style: container,
67
+ className: className
68
+ }, /*#__PURE__*/React.createElement("div", {
69
+ style: starContainerStyle
70
+ }, Array.from({
71
+ length: maxRating
72
+ }, function (_, i) {
73
+ return /*#__PURE__*/React.createElement(Star, {
74
+ key: i,
75
+ onRate: function onRate() {
76
+ return handleRating(i + 1);
77
+ },
78
+ full: tempRating ? tempRating >= i + 1 : rating >= i + 1,
79
+ onHoverIn: function onHoverIn() {
80
+ return setTempRating(i + 1);
81
+ },
82
+ onHoverOut: function onHoverOut() {
83
+ return setTempRating(0);
84
+ },
85
+ color: color,
86
+ size: size
87
+ });
88
+ })), /*#__PURE__*/React.createElement("p", {
89
+ style: textStyle
90
+ }, messages.length === maxRating ? messages[tempRating ? tempRating - 1 : rating - 1] : tempRating || rating || ""));
91
+ }
92
+ function Star(_ref2) {
93
+ var onRate = _ref2.onRate,
94
+ full = _ref2.full,
95
+ onHoverIn = _ref2.onHoverIn,
96
+ onHoverOut = _ref2.onHoverOut,
97
+ color = _ref2.color,
98
+ size = _ref2.size;
99
+ var starStyle = {
100
+ width: "".concat(size, "px"),
101
+ height: "".concat(size, "px"),
102
+ display: "block",
103
+ cursor: "pointer"
104
+ };
105
+ return /*#__PURE__*/React.createElement("span", {
106
+ style: starStyle,
107
+ onClick: onRate,
108
+ onMouseEnter: onHoverIn,
109
+ onMouseLeave: onHoverOut
110
+ }, full ? /*#__PURE__*/React.createElement("svg", {
111
+ xmlns: "http://www.w3.org/2000/svg",
112
+ viewBox: "0 0 20 20",
113
+ fill: color,
114
+ stroke: color
115
+ }, /*#__PURE__*/React.createElement("path", {
116
+ d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
117
+ })) : /*#__PURE__*/React.createElement("svg", {
118
+ xmlns: "http://www.w3.org/2000/svg",
119
+ fill: "none",
120
+ viewBox: "0 0 24 24",
121
+ stroke: color
122
+ }, /*#__PURE__*/React.createElement("path", {
123
+ strokeLinecap: "round",
124
+ strokeLinejoin: "round",
125
+ strokeWidth: 2,
126
+ d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
127
+ })));
128
+ }
129
+
130
+ /*
131
+ FULL STAR
132
+
133
+ <svg
134
+ xmlns="http://www.w3.org/2000/svg"
135
+ viewBox="0 0 20 20"
136
+ fill="#000"
137
+ stroke="#000"
138
+ >
139
+ <path
140
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
141
+ />
142
+ </svg>
143
+
144
+
145
+ EMPTY STAR
146
+
147
+ <svg
148
+ xmlns="http://www.w3.org/2000/svg"
149
+ fill="none"
150
+ viewBox="0 0 24 24"
151
+ stroke="#000"
152
+ >
153
+ <path
154
+ strokeLinecap="round"
155
+ strokeLinejoin="round"
156
+ strokeWidth="{2}"
157
+ d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
158
+ />
159
+ </svg>
160
+
161
+ */
package/package.json CHANGED
@@ -1,31 +1,41 @@
1
- {
2
- "name": "@yannickbaze/star-rating",
3
- "version": "1.0.0",
4
- "description": "Reusable star rating component for React",
5
- "main": "index.js",
6
- "files": [
7
- "src",
8
- "index.js",
9
- "README.md"
10
- ],
11
- "keywords": [
12
- "react",
13
- "star-rating",
14
- "rating-component",
15
- "ui",
16
- "react-component"
17
- ],
18
- "author": "Yannick Baze",
19
- "license": "MIT",
20
- "peerDependencies": {
21
- "react": "^18.0.0"
22
- },
23
- "repository": {
24
- "type": "git",
25
- "url": "https://github.com/yannickbaze/star-rating.git"
26
- },
27
- "bugs": {
28
- "url": "https://github.com/yannickbaze/star-rating/issues"
29
- },
30
- "homepage": "https://github.com/yannickbaze/star-rating#readme"
31
- }
1
+ {
2
+ "name": "@yannickbaze/star-rating",
3
+ "version": "1.0.2",
4
+ "description": "Reusable star rating component for React",
5
+ "main": "dist/StarRating.js",
6
+ "files": [
7
+ "dist",
8
+ "README.md",
9
+ "LICENSE"
10
+ ],
11
+ "keywords": [
12
+ "react",
13
+ "star-rating",
14
+ "rating-component",
15
+ "ui",
16
+ "react-component"
17
+ ],
18
+ "author": "Yannick Baze",
19
+ "license": "MIT",
20
+ "peerDependencies": {
21
+ "react": ">=16",
22
+ "react-dom": ">=16"
23
+ },
24
+ "repository": {
25
+ "type": "git",
26
+ "url": "https://github.com/yannickbaze/star-rating.git"
27
+ },
28
+ "bugs": {
29
+ "url": "https://github.com/yannickbaze/star-rating/issues"
30
+ },
31
+ "homepage": "https://github.com/yannickbaze/star-rating#readme",
32
+ "scripts": {
33
+ "build": "babel src -d dist"
34
+ },
35
+ "devDependencies": {
36
+ "@babel/cli": "^7.28.6",
37
+ "@babel/core": "^7.29.0",
38
+ "@babel/preset-env": "^7.29.0",
39
+ "@babel/preset-react": "^7.28.5"
40
+ }
41
+ }
package/index.js DELETED
@@ -1,3 +0,0 @@
1
- import StarRating from "./src/StarRating";
2
-
3
- export default StarRating;
package/src/StarRating.js DELETED
@@ -1,190 +0,0 @@
1
- import { useState } from "react";
2
- import PropTypes from "prop-types";
3
-
4
- const container = {
5
- display: "flex",
6
- alignItems: "center",
7
- gap: "16px"
8
- }
9
-
10
- const starContainerStyle = {
11
- display: "flex",
12
- gap: "4px"
13
- }
14
-
15
-
16
- StarRating.protoTypes = {
17
- maxRating: PropTypes.number,
18
- defaultRating: PropTypes.number,
19
- color: PropTypes.string,
20
- size: PropTypes.number,
21
- messages: PropTypes.array,
22
- className: PropTypes.string,
23
- onSetRating: PropTypes.func,
24
- }
25
-
26
-
27
- export default function StarRating({
28
- maxRating = 5,
29
- color = "#fcc419",
30
- size = 30,
31
- className,
32
- messages = [],
33
- defaultRating = 0,
34
- onSetRating,
35
- })
36
-
37
- {
38
- const [rating, setRating] = useState(defaultRating);
39
- const [tempRating, setTempRating] = useState(0);
40
-
41
- function handleRating(rating)
42
- {
43
- setRating(rating)
44
- if (onSetRating) onSetRating(rating)
45
- }
46
-
47
- const textStyle = {
48
- lineHeight: "1",
49
- margin: "0",
50
- color,
51
- fontSize: `${size / 1.5}px`,
52
-
53
- };
54
-
55
-
56
- return (
57
- <div style={container} className={ className }>
58
- <div style={starContainerStyle}>
59
- {Array.from({ length: maxRating }, (_, i) => (
60
- <Star
61
- key={i}
62
- onRate={() => handleRating(i + 1)}
63
- full={tempRating ? tempRating >= i + 1 : rating >= i + 1}
64
- onHoverIn={() => setTempRating(i + 1)}
65
- onHoverOut={() => setTempRating(0)}
66
- color={color}
67
- size={size}
68
- />
69
- ))}
70
- </div>
71
- <p style={textStyle}>
72
- {messages.length === maxRating ?
73
- messages[tempRating ? tempRating - 1 : rating - 1] : tempRating || rating || ""}</p>
74
- </div>
75
- );
76
- }
77
-
78
-
79
-
80
- function Star({ onRate, full, onHoverIn, onHoverOut, color, size })
81
- {
82
- const starStyle = {
83
- width: `${size}px`,
84
- height: `${size}px`,
85
- display: "block",
86
- cursor: "pointer"
87
- };
88
- return (
89
- <span
90
- style={starStyle}
91
- onClick={onRate}
92
- onMouseEnter={onHoverIn}
93
- onMouseLeave={onHoverOut}>
94
- {full ? (
95
- <svg
96
- xmlns="http://www.w3.org/2000/svg"
97
- viewBox="0 0 20 20"
98
- fill={color}
99
- stroke={color}>
100
- <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
101
- </svg>
102
- ) : (
103
- <svg
104
- xmlns="http://www.w3.org/2000/svg"
105
- fill="none"
106
- viewBox="0 0 24 24"
107
- stroke={ color }>
108
- <path
109
- strokeLinecap="round"
110
- strokeLinejoin="round"
111
- strokeWidth={2}
112
- d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
113
- />
114
- </svg>
115
- )}
116
- </span>
117
- );
118
- }
119
-
120
-
121
- /*
122
- FULL STAR
123
-
124
- <svg
125
- xmlns="http://www.w3.org/2000/svg"
126
- viewBox="0 0 20 20"
127
- fill="#000"
128
- stroke="#000"
129
- >
130
- <path
131
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
132
- />
133
- </svg>
134
-
135
-
136
- EMPTY STAR
137
-
138
- <svg
139
- xmlns="http://www.w3.org/2000/svg"
140
- fill="none"
141
- viewBox="0 0 24 24"
142
- stroke="#000"
143
- >
144
- <path
145
- strokeLinecap="round"
146
- strokeLinejoin="round"
147
- strokeWidth="{2}"
148
- d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
149
- />
150
- </svg>
151
-
152
- */
153
-
154
-
155
-
156
-
157
-
158
-
159
-
160
-
161
-
162
-
163
-
164
-
165
-
166
-
167
-
168
-
169
-
170
-
171
-
172
-
173
-
174
-
175
-
176
-
177
-
178
-
179
-
180
-
181
-
182
-
183
-
184
-
185
-
186
-
187
-
188
-
189
-
190
-