@sproutsocial/seeds-react-rating 1.0.41 → 1.0.43
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/dist/esm/index.js +65 -12
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +7 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.js +62 -12
- package/dist/index.js.map +1 -1
- package/dist/rating.css +6 -0
- package/package.json +17 -6
- package/.eslintignore +0 -6
- package/.eslintrc.js +0 -4
- package/.turbo/turbo-build.log +0 -21
- package/CHANGELOG.md +0 -341
- package/jest.config.js +0 -9
- package/src/Rating.stories.tsx +0 -29
- package/src/Rating.tsx +0 -44
- package/src/RatingTypes.ts +0 -9
- package/src/__tests__/rating.test.tsx +0 -15
- package/src/index.ts +0 -5
- package/src/styled.d.ts +0 -7
- package/tsconfig.json +0 -15
- package/tsup.config.ts +0 -12
package/dist/esm/index.js
CHANGED
|
@@ -1,26 +1,51 @@
|
|
|
1
1
|
// src/Rating.tsx
|
|
2
|
-
import "react";
|
|
3
|
-
import styled from "styled-components";
|
|
4
|
-
import { Icon } from "@sproutsocial/seeds-react-icon";
|
|
5
|
-
import { Badge } from "@sproutsocial/seeds-react-badge";
|
|
2
|
+
import React3 from "react";
|
|
6
3
|
|
|
7
|
-
// src/
|
|
8
|
-
import "react";
|
|
4
|
+
// src/RatingHybrid.tsx
|
|
5
|
+
import React2 from "react";
|
|
6
|
+
import {
|
|
7
|
+
hasStyledProps,
|
|
8
|
+
isStyledExtension
|
|
9
|
+
} from "@sproutsocial/seeds-react-system-props";
|
|
9
10
|
|
|
10
|
-
// src/
|
|
11
|
-
import
|
|
11
|
+
// src/styles.ts
|
|
12
|
+
import styled from "styled-components";
|
|
12
13
|
var RatingContainer = styled.div`
|
|
13
14
|
display: flex;
|
|
14
15
|
align-items: center;
|
|
15
16
|
`;
|
|
16
|
-
|
|
17
|
+
RatingContainer.displayName = "Rating-Container";
|
|
18
|
+
var styles_default = RatingContainer;
|
|
19
|
+
|
|
20
|
+
// src/RatingTailwind.tsx
|
|
21
|
+
import React from "react";
|
|
22
|
+
import { Icon } from "@sproutsocial/seeds-react-icon";
|
|
23
|
+
import { Badge } from "@sproutsocial/seeds-react-badge";
|
|
24
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
25
|
+
function cn(...inputs) {
|
|
26
|
+
const classes = [];
|
|
27
|
+
for (const input of inputs) {
|
|
28
|
+
if (!input) continue;
|
|
29
|
+
if (typeof input === "string") {
|
|
30
|
+
classes.push(input);
|
|
31
|
+
} else if (typeof input === "object") {
|
|
32
|
+
for (const [key, value] of Object.entries(input)) {
|
|
33
|
+
if (value) {
|
|
34
|
+
classes.push(key);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
return classes.join(" ");
|
|
40
|
+
}
|
|
41
|
+
function renderRatingItems({
|
|
17
42
|
emptyIcon = /* @__PURE__ */ jsx(Icon, { name: "star-outline", color: "yellow.600" }),
|
|
18
43
|
halfIcon = /* @__PURE__ */ jsx(Icon, { name: "star-half-outline", color: "yellow.600" }),
|
|
19
44
|
filledIcon = /* @__PURE__ */ jsx(Icon, { name: "star-full-solid", color: "yellow.600" }),
|
|
20
45
|
rating,
|
|
21
46
|
scale = 5
|
|
22
|
-
})
|
|
23
|
-
return /* @__PURE__ */ jsxs(
|
|
47
|
+
}) {
|
|
48
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
24
49
|
Array.from({ length: scale }, (_, index) => {
|
|
25
50
|
if (index < Math.floor(rating)) {
|
|
26
51
|
return /* @__PURE__ */ jsx("span", { children: filledIcon }, index);
|
|
@@ -40,9 +65,37 @@ var Rating = ({
|
|
|
40
65
|
}
|
|
41
66
|
)
|
|
42
67
|
] });
|
|
43
|
-
}
|
|
68
|
+
}
|
|
69
|
+
var RatingTailwind = React.forwardRef(
|
|
70
|
+
({ className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: cn("seeds-rating", className), ref, children: renderRatingItems(rest) })
|
|
71
|
+
);
|
|
72
|
+
RatingTailwind.displayName = "RatingTailwind";
|
|
73
|
+
|
|
74
|
+
// src/RatingHybrid.tsx
|
|
75
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
76
|
+
var RatingHybrid = React2.forwardRef(
|
|
77
|
+
(props, ref) => {
|
|
78
|
+
const { className, ...rest } = props;
|
|
79
|
+
if (hasStyledProps(rest) || isStyledExtension(rest)) {
|
|
80
|
+
return /* @__PURE__ */ jsx2(styles_default, { ref, className, children: renderRatingItems(props) });
|
|
81
|
+
}
|
|
82
|
+
return /* @__PURE__ */ jsx2(RatingTailwind, { ...props, ref });
|
|
83
|
+
}
|
|
84
|
+
);
|
|
85
|
+
RatingHybrid.displayName = "Rating";
|
|
86
|
+
var RatingHybrid_default = RatingHybrid;
|
|
87
|
+
|
|
88
|
+
// src/Rating.tsx
|
|
89
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
90
|
+
var Rating = React3.forwardRef(
|
|
91
|
+
(props, ref) => /* @__PURE__ */ jsx3(RatingHybrid_default, { ...props, ref })
|
|
92
|
+
);
|
|
93
|
+
Rating.displayName = "Rating";
|
|
44
94
|
var Rating_default = Rating;
|
|
45
95
|
|
|
96
|
+
// src/RatingTypes.ts
|
|
97
|
+
import "react";
|
|
98
|
+
|
|
46
99
|
// src/index.ts
|
|
47
100
|
var index_default = Rating_default;
|
|
48
101
|
export {
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Rating.tsx","../../src/RatingTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport
|
|
1
|
+
{"version":3,"sources":["../../src/Rating.tsx","../../src/RatingHybrid.tsx","../../src/styles.ts","../../src/RatingTailwind.tsx","../../src/RatingTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport type { TypeRatingProps } from \"./RatingTypes\";\nimport RatingHybrid from \"./RatingHybrid\";\n\n/**\n * Rating component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nconst Rating = React.forwardRef<HTMLDivElement, TypeRatingProps>(\n (props, ref) => <RatingHybrid {...props} ref={ref} />\n);\n\nRating.displayName = \"Rating\";\nexport default Rating;\n","/**\n * Hybrid Rating Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport React from \"react\";\nimport {\n hasStyledProps,\n isStyledExtension,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeRatingProps } from \"./RatingTypes\";\nimport RatingContainer from \"./styles\"; // Styled-components version\nimport { RatingTailwind, renderRatingItems } from \"./RatingTailwind\"; // Tailwind version\n\nconst RatingHybrid = React.forwardRef<HTMLDivElement, TypeRatingProps>(\n (props, ref) => {\n const { className, ...rest } = props;\n\n // Rating exposes no styled-system props, so hasStyledProps is effectively\n // always false here; isStyledExtension covers styled(Rating) extensions,\n // which inject a theme/forwardedComponent prop. The extension's generated\n // styles arrive via className, so that is all we forward to the container —\n // RatingContainer has no system-prop mixins, and spreading the remaining\n // rating props onto the div would surface them as invalid DOM attributes.\n if (hasStyledProps(rest) || isStyledExtension(rest)) {\n return (\n <RatingContainer ref={ref} className={className}>\n {renderRatingItems(props)}\n </RatingContainer>\n );\n }\n\n // Use Tailwind version (preferred - better performance)\n return <RatingTailwind {...props} ref={ref} />;\n }\n);\n\nRatingHybrid.displayName = \"Rating\";\nexport default RatingHybrid;\n","import styled from \"styled-components\";\n\nconst RatingContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nRatingContainer.displayName = \"Rating-Container\";\nexport default RatingContainer;\n","/**\n * Tailwind CSS implementation of Rating component\n * Uses Seeds rating CSS classes from rating.css\n */\n\nimport React from \"react\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { Badge } from \"@sproutsocial/seeds-react-badge\";\nimport type { TypeRatingProps } from \"./RatingTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\n/**\n * Single source of truth for the star + Badge composition, shared by both the\n * Tailwind and styled-components render paths so the mapping logic never drifts.\n */\nexport function renderRatingItems({\n emptyIcon = <Icon name=\"star-outline\" color=\"yellow.600\" />,\n halfIcon = <Icon name=\"star-half-outline\" color=\"yellow.600\" />,\n filledIcon = <Icon name=\"star-full-solid\" color=\"yellow.600\" />,\n rating,\n scale = 5,\n}: TypeRatingProps): React.ReactNode {\n return (\n <>\n {Array.from({ length: scale }, (_, index) => {\n if (index < Math.floor(rating)) {\n // Full star\n return <span key={index}>{filledIcon}</span>;\n } else if (index === Math.floor(rating) && rating % 1 !== 0) {\n // Half star\n return <span key={index}>{halfIcon}</span>;\n } else {\n // Empty star\n return <span key={index}>{emptyIcon}</span>;\n }\n })}\n {\n <Badge\n size=\"small\"\n badgeColor=\"neutral\"\n ml={200}\n >{`${rating}/${scale}`}</Badge>\n }\n </>\n );\n}\n\nexport const RatingTailwind = React.forwardRef<HTMLDivElement, TypeRatingProps>(\n ({ className, ...rest }, ref) => (\n <div className={cn(\"seeds-rating\", className)} ref={ref}>\n {renderRatingItems(rest)}\n </div>\n )\n);\n\nRatingTailwind.displayName = \"RatingTailwind\";\n","import * as React from \"react\";\n\nexport interface TypeRatingProps {\n emptyIcon?: React.ReactNode;\n halfIcon?: React.ReactNode;\n filledIcon?: React.ReactNode;\n rating: number;\n scale?: number;\n className?: string;\n}\n","import Rating from \"./Rating\";\n\nexport default Rating;\nexport { Rating };\nexport * from \"./RatingTypes\";\n"],"mappings":";AAAA,OAAOA,YAAW;;;ACKlB,OAAOC,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,OACK;;;ACTP,OAAO,YAAY;AAEnB,IAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAK/B,gBAAgB,cAAc;AAC9B,IAAO,iBAAQ;;;ACHf,OAAO,WAAW;AAClB,SAAS,YAAY;AACrB,SAAS,aAAa;AA+BR,SAOV,UAPU,KAOV,YAPU;AA3Bd,SAAS,MACJ,QACK;AACR,QAAM,UAAoB,CAAC;AAE3B,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,KAAK,KAAK;AAAA,IACpB,WAAW,OAAO,UAAU,UAAU;AACpC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,YAAI,OAAO;AACT,kBAAQ,KAAK,GAAG;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;AAMO,SAAS,kBAAkB;AAAA,EAChC,YAAY,oBAAC,QAAK,MAAK,gBAAe,OAAM,cAAa;AAAA,EACzD,WAAW,oBAAC,QAAK,MAAK,qBAAoB,OAAM,cAAa;AAAA,EAC7D,aAAa,oBAAC,QAAK,MAAK,mBAAkB,OAAM,cAAa;AAAA,EAC7D;AAAA,EACA,QAAQ;AACV,GAAqC;AACnC,SACE,iCACG;AAAA,UAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,UAAU;AAC3C,UAAI,QAAQ,KAAK,MAAM,MAAM,GAAG;AAE9B,eAAO,oBAAC,UAAkB,wBAAR,KAAmB;AAAA,MACvC,WAAW,UAAU,KAAK,MAAM,MAAM,KAAK,SAAS,MAAM,GAAG;AAE3D,eAAO,oBAAC,UAAkB,sBAAR,KAAiB;AAAA,MACrC,OAAO;AAEL,eAAO,oBAAC,UAAkB,uBAAR,KAAkB;AAAA,MACtC;AAAA,IACF,CAAC;AAAA,IAEC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAW;AAAA,QACX,IAAI;AAAA,QACJ,aAAG,MAAM,IAAI,KAAK;AAAA;AAAA,IAAG;AAAA,KAE3B;AAEJ;AAEO,IAAM,iBAAiB,MAAM;AAAA,EAClC,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QACvB,oBAAC,SAAI,WAAW,GAAG,gBAAgB,SAAS,GAAG,KAC5C,4BAAkB,IAAI,GACzB;AAEJ;AAEA,eAAe,cAAc;;;AFnDrB,gBAAAC,YAAA;AAZR,IAAM,eAAeC,OAAM;AAAA,EACzB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,WAAW,GAAG,KAAK,IAAI;AAQ/B,QAAI,eAAe,IAAI,KAAK,kBAAkB,IAAI,GAAG;AACnD,aACE,gBAAAD,KAAC,kBAAgB,KAAU,WACxB,4BAAkB,KAAK,GAC1B;AAAA,IAEJ;AAGA,WAAO,gBAAAA,KAAC,kBAAgB,GAAG,OAAO,KAAU;AAAA,EAC9C;AACF;AAEA,aAAa,cAAc;AAC3B,IAAO,uBAAQ;;;AD5BG,gBAAAE,YAAA;AADlB,IAAM,SAASC,OAAM;AAAA,EACnB,CAAC,OAAO,QAAQ,gBAAAD,KAAC,wBAAc,GAAG,OAAO,KAAU;AACrD;AAEA,OAAO,cAAc;AACrB,IAAO,iBAAQ;;;AIdf,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["React","React","jsx","React","jsx","React"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -7,8 +7,14 @@ interface TypeRatingProps {
|
|
|
7
7
|
filledIcon?: React.ReactNode;
|
|
8
8
|
rating: number;
|
|
9
9
|
scale?: number;
|
|
10
|
+
className?: string;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
/**
|
|
14
|
+
* Rating component. Automatically routes between the Tailwind implementation
|
|
15
|
+
* (preferred) and the styled-components implementation (for consumers using
|
|
16
|
+
* system props or a styled() extension).
|
|
17
|
+
*/
|
|
18
|
+
declare const Rating: React__default.ForwardRefExoticComponent<TypeRatingProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
13
19
|
|
|
14
20
|
export { Rating, type TypeRatingProps, Rating as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -7,8 +7,14 @@ interface TypeRatingProps {
|
|
|
7
7
|
filledIcon?: React.ReactNode;
|
|
8
8
|
rating: number;
|
|
9
9
|
scale?: number;
|
|
10
|
+
className?: string;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
/**
|
|
14
|
+
* Rating component. Automatically routes between the Tailwind implementation
|
|
15
|
+
* (preferred) and the styled-components implementation (for consumers using
|
|
16
|
+
* system props or a styled() extension).
|
|
17
|
+
*/
|
|
18
|
+
declare const Rating: React__default.ForwardRefExoticComponent<TypeRatingProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
13
19
|
|
|
14
20
|
export { Rating, type TypeRatingProps, Rating as default };
|
package/dist/index.js
CHANGED
|
@@ -36,28 +36,50 @@ __export(index_exports, {
|
|
|
36
36
|
module.exports = __toCommonJS(index_exports);
|
|
37
37
|
|
|
38
38
|
// src/Rating.tsx
|
|
39
|
-
var
|
|
40
|
-
var import_styled_components = __toESM(require("styled-components"));
|
|
41
|
-
var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
|
|
42
|
-
var import_seeds_react_badge = require("@sproutsocial/seeds-react-badge");
|
|
39
|
+
var import_react3 = __toESM(require("react"));
|
|
43
40
|
|
|
44
|
-
// src/
|
|
45
|
-
var
|
|
41
|
+
// src/RatingHybrid.tsx
|
|
42
|
+
var import_react2 = __toESM(require("react"));
|
|
43
|
+
var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
|
|
46
44
|
|
|
47
|
-
// src/
|
|
48
|
-
var
|
|
45
|
+
// src/styles.ts
|
|
46
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
49
47
|
var RatingContainer = import_styled_components.default.div`
|
|
50
48
|
display: flex;
|
|
51
49
|
align-items: center;
|
|
52
50
|
`;
|
|
53
|
-
|
|
51
|
+
RatingContainer.displayName = "Rating-Container";
|
|
52
|
+
var styles_default = RatingContainer;
|
|
53
|
+
|
|
54
|
+
// src/RatingTailwind.tsx
|
|
55
|
+
var import_react = __toESM(require("react"));
|
|
56
|
+
var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
|
|
57
|
+
var import_seeds_react_badge = require("@sproutsocial/seeds-react-badge");
|
|
58
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
59
|
+
function cn(...inputs) {
|
|
60
|
+
const classes = [];
|
|
61
|
+
for (const input of inputs) {
|
|
62
|
+
if (!input) continue;
|
|
63
|
+
if (typeof input === "string") {
|
|
64
|
+
classes.push(input);
|
|
65
|
+
} else if (typeof input === "object") {
|
|
66
|
+
for (const [key, value] of Object.entries(input)) {
|
|
67
|
+
if (value) {
|
|
68
|
+
classes.push(key);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
return classes.join(" ");
|
|
74
|
+
}
|
|
75
|
+
function renderRatingItems({
|
|
54
76
|
emptyIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.Icon, { name: "star-outline", color: "yellow.600" }),
|
|
55
77
|
halfIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.Icon, { name: "star-half-outline", color: "yellow.600" }),
|
|
56
78
|
filledIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.Icon, { name: "star-full-solid", color: "yellow.600" }),
|
|
57
79
|
rating,
|
|
58
80
|
scale = 5
|
|
59
|
-
})
|
|
60
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
81
|
+
}) {
|
|
82
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
61
83
|
Array.from({ length: scale }, (_, index) => {
|
|
62
84
|
if (index < Math.floor(rating)) {
|
|
63
85
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: filledIcon }, index);
|
|
@@ -77,9 +99,37 @@ var Rating = ({
|
|
|
77
99
|
}
|
|
78
100
|
)
|
|
79
101
|
] });
|
|
80
|
-
}
|
|
102
|
+
}
|
|
103
|
+
var RatingTailwind = import_react.default.forwardRef(
|
|
104
|
+
({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("seeds-rating", className), ref, children: renderRatingItems(rest) })
|
|
105
|
+
);
|
|
106
|
+
RatingTailwind.displayName = "RatingTailwind";
|
|
107
|
+
|
|
108
|
+
// src/RatingHybrid.tsx
|
|
109
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
110
|
+
var RatingHybrid = import_react2.default.forwardRef(
|
|
111
|
+
(props, ref) => {
|
|
112
|
+
const { className, ...rest } = props;
|
|
113
|
+
if ((0, import_seeds_react_system_props.hasStyledProps)(rest) || (0, import_seeds_react_system_props.isStyledExtension)(rest)) {
|
|
114
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(styles_default, { ref, className, children: renderRatingItems(props) });
|
|
115
|
+
}
|
|
116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RatingTailwind, { ...props, ref });
|
|
117
|
+
}
|
|
118
|
+
);
|
|
119
|
+
RatingHybrid.displayName = "Rating";
|
|
120
|
+
var RatingHybrid_default = RatingHybrid;
|
|
121
|
+
|
|
122
|
+
// src/Rating.tsx
|
|
123
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
124
|
+
var Rating = import_react3.default.forwardRef(
|
|
125
|
+
(props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RatingHybrid_default, { ...props, ref })
|
|
126
|
+
);
|
|
127
|
+
Rating.displayName = "Rating";
|
|
81
128
|
var Rating_default = Rating;
|
|
82
129
|
|
|
130
|
+
// src/RatingTypes.ts
|
|
131
|
+
var React4 = require("react");
|
|
132
|
+
|
|
83
133
|
// src/index.ts
|
|
84
134
|
var index_default = Rating_default;
|
|
85
135
|
// Annotate the CommonJS export names for ESM import in node:
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Rating.tsx","../src/RatingTypes.ts"],"sourcesContent":["import Rating from \"./Rating\";\n\nexport default Rating;\nexport { Rating };\nexport * from \"./RatingTypes\";\n","import React from \"react\";\nimport
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Rating.tsx","../src/RatingHybrid.tsx","../src/styles.ts","../src/RatingTailwind.tsx","../src/RatingTypes.ts"],"sourcesContent":["import Rating from \"./Rating\";\n\nexport default Rating;\nexport { Rating };\nexport * from \"./RatingTypes\";\n","import React from \"react\";\nimport type { TypeRatingProps } from \"./RatingTypes\";\nimport RatingHybrid from \"./RatingHybrid\";\n\n/**\n * Rating component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nconst Rating = React.forwardRef<HTMLDivElement, TypeRatingProps>(\n (props, ref) => <RatingHybrid {...props} ref={ref} />\n);\n\nRating.displayName = \"Rating\";\nexport default Rating;\n","/**\n * Hybrid Rating Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport React from \"react\";\nimport {\n hasStyledProps,\n isStyledExtension,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeRatingProps } from \"./RatingTypes\";\nimport RatingContainer from \"./styles\"; // Styled-components version\nimport { RatingTailwind, renderRatingItems } from \"./RatingTailwind\"; // Tailwind version\n\nconst RatingHybrid = React.forwardRef<HTMLDivElement, TypeRatingProps>(\n (props, ref) => {\n const { className, ...rest } = props;\n\n // Rating exposes no styled-system props, so hasStyledProps is effectively\n // always false here; isStyledExtension covers styled(Rating) extensions,\n // which inject a theme/forwardedComponent prop. The extension's generated\n // styles arrive via className, so that is all we forward to the container —\n // RatingContainer has no system-prop mixins, and spreading the remaining\n // rating props onto the div would surface them as invalid DOM attributes.\n if (hasStyledProps(rest) || isStyledExtension(rest)) {\n return (\n <RatingContainer ref={ref} className={className}>\n {renderRatingItems(props)}\n </RatingContainer>\n );\n }\n\n // Use Tailwind version (preferred - better performance)\n return <RatingTailwind {...props} ref={ref} />;\n }\n);\n\nRatingHybrid.displayName = \"Rating\";\nexport default RatingHybrid;\n","import styled from \"styled-components\";\n\nconst RatingContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nRatingContainer.displayName = \"Rating-Container\";\nexport default RatingContainer;\n","/**\n * Tailwind CSS implementation of Rating component\n * Uses Seeds rating CSS classes from rating.css\n */\n\nimport React from \"react\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { Badge } from \"@sproutsocial/seeds-react-badge\";\nimport type { TypeRatingProps } from \"./RatingTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\n/**\n * Single source of truth for the star + Badge composition, shared by both the\n * Tailwind and styled-components render paths so the mapping logic never drifts.\n */\nexport function renderRatingItems({\n emptyIcon = <Icon name=\"star-outline\" color=\"yellow.600\" />,\n halfIcon = <Icon name=\"star-half-outline\" color=\"yellow.600\" />,\n filledIcon = <Icon name=\"star-full-solid\" color=\"yellow.600\" />,\n rating,\n scale = 5,\n}: TypeRatingProps): React.ReactNode {\n return (\n <>\n {Array.from({ length: scale }, (_, index) => {\n if (index < Math.floor(rating)) {\n // Full star\n return <span key={index}>{filledIcon}</span>;\n } else if (index === Math.floor(rating) && rating % 1 !== 0) {\n // Half star\n return <span key={index}>{halfIcon}</span>;\n } else {\n // Empty star\n return <span key={index}>{emptyIcon}</span>;\n }\n })}\n {\n <Badge\n size=\"small\"\n badgeColor=\"neutral\"\n ml={200}\n >{`${rating}/${scale}`}</Badge>\n }\n </>\n );\n}\n\nexport const RatingTailwind = React.forwardRef<HTMLDivElement, TypeRatingProps>(\n ({ className, ...rest }, ref) => (\n <div className={cn(\"seeds-rating\", className)} ref={ref}>\n {renderRatingItems(rest)}\n </div>\n )\n);\n\nRatingTailwind.displayName = \"RatingTailwind\";\n","import * as React from \"react\";\n\nexport interface TypeRatingProps {\n emptyIcon?: React.ReactNode;\n halfIcon?: React.ReactNode;\n filledIcon?: React.ReactNode;\n rating: number;\n scale?: number;\n className?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAkB;;;ACKlB,IAAAC,gBAAkB;AAClB,sCAGO;;;ACTP,+BAAmB;AAEnB,IAAM,kBAAkB,yBAAAC,QAAO;AAAA;AAAA;AAAA;AAK/B,gBAAgB,cAAc;AAC9B,IAAO,iBAAQ;;;ACHf,mBAAkB;AAClB,8BAAqB;AACrB,+BAAsB;AA+BR;AA3Bd,SAAS,MACJ,QACK;AACR,QAAM,UAAoB,CAAC;AAE3B,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,KAAK,KAAK;AAAA,IACpB,WAAW,OAAO,UAAU,UAAU;AACpC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,YAAI,OAAO;AACT,kBAAQ,KAAK,GAAG;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;AAMO,SAAS,kBAAkB;AAAA,EAChC,YAAY,4CAAC,gCAAK,MAAK,gBAAe,OAAM,cAAa;AAAA,EACzD,WAAW,4CAAC,gCAAK,MAAK,qBAAoB,OAAM,cAAa;AAAA,EAC7D,aAAa,4CAAC,gCAAK,MAAK,mBAAkB,OAAM,cAAa;AAAA,EAC7D;AAAA,EACA,QAAQ;AACV,GAAqC;AACnC,SACE,4EACG;AAAA,UAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,UAAU;AAC3C,UAAI,QAAQ,KAAK,MAAM,MAAM,GAAG;AAE9B,eAAO,4CAAC,UAAkB,wBAAR,KAAmB;AAAA,MACvC,WAAW,UAAU,KAAK,MAAM,MAAM,KAAK,SAAS,MAAM,GAAG;AAE3D,eAAO,4CAAC,UAAkB,sBAAR,KAAiB;AAAA,MACrC,OAAO;AAEL,eAAO,4CAAC,UAAkB,uBAAR,KAAkB;AAAA,MACtC;AAAA,IACF,CAAC;AAAA,IAEC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAW;AAAA,QACX,IAAI;AAAA,QACJ,aAAG,MAAM,IAAI,KAAK;AAAA;AAAA,IAAG;AAAA,KAE3B;AAEJ;AAEO,IAAM,iBAAiB,aAAAC,QAAM;AAAA,EAClC,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QACvB,4CAAC,SAAI,WAAW,GAAG,gBAAgB,SAAS,GAAG,KAC5C,4BAAkB,IAAI,GACzB;AAEJ;AAEA,eAAe,cAAc;;;AFnDrB,IAAAC,sBAAA;AAZR,IAAM,eAAe,cAAAC,QAAM;AAAA,EACzB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,WAAW,GAAG,KAAK,IAAI;AAQ/B,YAAI,gDAAe,IAAI,SAAK,mDAAkB,IAAI,GAAG;AACnD,aACE,6CAAC,kBAAgB,KAAU,WACxB,4BAAkB,KAAK,GAC1B;AAAA,IAEJ;AAGA,WAAO,6CAAC,kBAAgB,GAAG,OAAO,KAAU;AAAA,EAC9C;AACF;AAEA,aAAa,cAAc;AAC3B,IAAO,uBAAQ;;;AD5BG,IAAAC,sBAAA;AADlB,IAAM,SAAS,cAAAC,QAAM;AAAA,EACnB,CAAC,OAAO,QAAQ,6CAAC,wBAAc,GAAG,OAAO,KAAU;AACrD;AAEA,OAAO,cAAc;AACrB,IAAO,iBAAQ;;;AIdf,IAAAC,SAAuB;;;ALEvB,IAAO,gBAAQ;","names":["import_react","import_react","styled","React","import_jsx_runtime","React","import_jsx_runtime","React","React"]}
|
package/dist/rating.css
ADDED
package/package.json
CHANGED
|
@@ -1,15 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-rating",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.43",
|
|
4
4
|
"description": "Seeds React Rating",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"module": "dist/esm/index.js",
|
|
9
9
|
"types": "dist/index.d.ts",
|
|
10
|
+
"files": [
|
|
11
|
+
"dist"
|
|
12
|
+
],
|
|
13
|
+
"exports": {
|
|
14
|
+
".": {
|
|
15
|
+
"import": "./dist/esm/index.js",
|
|
16
|
+
"require": "./dist/index.js",
|
|
17
|
+
"types": "./dist/index.d.ts"
|
|
18
|
+
},
|
|
19
|
+
"./dist/rating.css": "./dist/rating.css"
|
|
20
|
+
},
|
|
10
21
|
"scripts": {
|
|
11
|
-
"build": "tsup --dts",
|
|
12
|
-
"build:debug": "tsup --dts --metafile",
|
|
22
|
+
"build": "tsup --dts && cp src/rating.css dist/rating.css",
|
|
23
|
+
"build:debug": "tsup --dts --metafile && cp src/rating.css dist/rating.css",
|
|
13
24
|
"dev": "tsup --watch --dts",
|
|
14
25
|
"clean": "rm -rf .turbo dist",
|
|
15
26
|
"clean:modules": "rm -rf node_modules",
|
|
@@ -18,10 +29,10 @@
|
|
|
18
29
|
"test:watch": "jest --watch --coverage=false"
|
|
19
30
|
},
|
|
20
31
|
"dependencies": {
|
|
21
|
-
"@sproutsocial/seeds-react-theme": "^4.
|
|
32
|
+
"@sproutsocial/seeds-react-theme": "^4.2.0",
|
|
22
33
|
"@sproutsocial/seeds-react-system-props": "^3.1.1",
|
|
23
|
-
"@sproutsocial/seeds-react-icon": "^2.4.
|
|
24
|
-
"@sproutsocial/seeds-react-badge": "^2.0.
|
|
34
|
+
"@sproutsocial/seeds-react-icon": "^2.4.2",
|
|
35
|
+
"@sproutsocial/seeds-react-badge": "^2.0.36"
|
|
25
36
|
},
|
|
26
37
|
"devDependencies": {
|
|
27
38
|
"@types/react": "^18.0.0",
|
package/.eslintignore
DELETED
package/.eslintrc.js
DELETED
package/.turbo/turbo-build.log
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
yarn run v1.22.22
|
|
2
|
-
$ tsup --dts
|
|
3
|
-
[34mCLI[39m Building entry: src/index.ts
|
|
4
|
-
[34mCLI[39m Using tsconfig: tsconfig.json
|
|
5
|
-
[34mCLI[39m tsup v8.5.0
|
|
6
|
-
[34mCLI[39m Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-rating/tsup.config.ts
|
|
7
|
-
[34mCLI[39m Target: es2022
|
|
8
|
-
[34mCLI[39m Cleaning output folder
|
|
9
|
-
[34mCJS[39m Build start
|
|
10
|
-
[34mESM[39m Build start
|
|
11
|
-
[32mCJS[39m [1mdist/index.js [22m[32m3.48 KB[39m
|
|
12
|
-
[32mCJS[39m [1mdist/index.js.map [22m[32m2.60 KB[39m
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in 12ms
|
|
14
|
-
[32mESM[39m [1mdist/esm/index.js [22m[32m1.49 KB[39m
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[32m2.55 KB[39m
|
|
16
|
-
[32mESM[39m ⚡️ Build success in 12ms
|
|
17
|
-
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in 3901ms
|
|
19
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[32m358.00 B[39m
|
|
20
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[32m358.00 B[39m
|
|
21
|
-
Done in 5.39s.
|
package/CHANGELOG.md
DELETED
|
@@ -1,341 +0,0 @@
|
|
|
1
|
-
# @sproutsocial/seeds-react-rating
|
|
2
|
-
|
|
3
|
-
## 1.0.41
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
- Updated dependencies [a13a571]
|
|
8
|
-
- @sproutsocial/seeds-react-theme@4.1.1
|
|
9
|
-
- @sproutsocial/seeds-react-icon@2.4.1
|
|
10
|
-
- @sproutsocial/seeds-react-badge@2.0.35
|
|
11
|
-
|
|
12
|
-
## 1.0.40
|
|
13
|
-
|
|
14
|
-
### Patch Changes
|
|
15
|
-
|
|
16
|
-
- Updated dependencies [69c9d02]
|
|
17
|
-
- @sproutsocial/seeds-react-icon@2.4.0
|
|
18
|
-
- @sproutsocial/seeds-react-badge@2.0.34
|
|
19
|
-
|
|
20
|
-
## 1.0.39
|
|
21
|
-
|
|
22
|
-
### Patch Changes
|
|
23
|
-
|
|
24
|
-
- Updated dependencies [5892f44]
|
|
25
|
-
- @sproutsocial/seeds-react-system-props@3.1.1
|
|
26
|
-
- @sproutsocial/seeds-react-badge@2.0.33
|
|
27
|
-
- @sproutsocial/seeds-react-icon@2.3.13
|
|
28
|
-
|
|
29
|
-
## 1.0.38
|
|
30
|
-
|
|
31
|
-
### Patch Changes
|
|
32
|
-
|
|
33
|
-
- Updated dependencies [5114a32]
|
|
34
|
-
- @sproutsocial/seeds-react-theme@4.1.0
|
|
35
|
-
- @sproutsocial/seeds-react-icon@2.3.12
|
|
36
|
-
- @sproutsocial/seeds-react-badge@2.0.32
|
|
37
|
-
|
|
38
|
-
## 1.0.37
|
|
39
|
-
|
|
40
|
-
### Patch Changes
|
|
41
|
-
|
|
42
|
-
- Updated dependencies [132ef9d]
|
|
43
|
-
- Updated dependencies [132ef9d]
|
|
44
|
-
- @sproutsocial/seeds-react-theme@4.0.0
|
|
45
|
-
- @sproutsocial/seeds-react-system-props@3.1.0
|
|
46
|
-
- @sproutsocial/seeds-react-icon@2.3.11
|
|
47
|
-
- @sproutsocial/seeds-react-badge@2.0.31
|
|
48
|
-
|
|
49
|
-
## 1.0.36
|
|
50
|
-
|
|
51
|
-
### Patch Changes
|
|
52
|
-
|
|
53
|
-
- @sproutsocial/seeds-react-icon@2.3.10
|
|
54
|
-
- @sproutsocial/seeds-react-badge@2.0.30
|
|
55
|
-
|
|
56
|
-
## 1.0.35
|
|
57
|
-
|
|
58
|
-
### Patch Changes
|
|
59
|
-
|
|
60
|
-
- Updated dependencies [47c62b3]
|
|
61
|
-
- @sproutsocial/seeds-react-theme@3.7.1
|
|
62
|
-
- @sproutsocial/seeds-react-icon@2.3.9
|
|
63
|
-
- @sproutsocial/seeds-react-badge@2.0.29
|
|
64
|
-
|
|
65
|
-
## 1.0.34
|
|
66
|
-
|
|
67
|
-
### Patch Changes
|
|
68
|
-
|
|
69
|
-
- Updated dependencies [06da9c2]
|
|
70
|
-
- @sproutsocial/seeds-react-theme@3.7.0
|
|
71
|
-
- @sproutsocial/seeds-react-icon@2.3.8
|
|
72
|
-
- @sproutsocial/seeds-react-badge@2.0.28
|
|
73
|
-
|
|
74
|
-
## 1.0.33
|
|
75
|
-
|
|
76
|
-
### Patch Changes
|
|
77
|
-
|
|
78
|
-
- @sproutsocial/seeds-react-icon@2.3.7
|
|
79
|
-
- @sproutsocial/seeds-react-badge@2.0.27
|
|
80
|
-
|
|
81
|
-
## 1.0.32
|
|
82
|
-
|
|
83
|
-
### Patch Changes
|
|
84
|
-
|
|
85
|
-
- @sproutsocial/seeds-react-icon@2.3.6
|
|
86
|
-
- @sproutsocial/seeds-react-badge@2.0.26
|
|
87
|
-
|
|
88
|
-
## 1.0.31
|
|
89
|
-
|
|
90
|
-
### Patch Changes
|
|
91
|
-
|
|
92
|
-
- @sproutsocial/seeds-react-icon@2.3.5
|
|
93
|
-
- @sproutsocial/seeds-react-badge@2.0.25
|
|
94
|
-
|
|
95
|
-
## 1.0.30
|
|
96
|
-
|
|
97
|
-
### Patch Changes
|
|
98
|
-
|
|
99
|
-
- @sproutsocial/seeds-react-icon@2.3.4
|
|
100
|
-
- @sproutsocial/seeds-react-badge@2.0.24
|
|
101
|
-
|
|
102
|
-
## 1.0.29
|
|
103
|
-
|
|
104
|
-
### Patch Changes
|
|
105
|
-
|
|
106
|
-
- @sproutsocial/seeds-react-icon@2.3.3
|
|
107
|
-
- @sproutsocial/seeds-react-badge@2.0.23
|
|
108
|
-
|
|
109
|
-
## 1.0.28
|
|
110
|
-
|
|
111
|
-
### Patch Changes
|
|
112
|
-
|
|
113
|
-
- Updated dependencies [4ba8720]
|
|
114
|
-
- @sproutsocial/seeds-react-theme@3.6.2
|
|
115
|
-
- @sproutsocial/seeds-react-icon@2.3.2
|
|
116
|
-
- @sproutsocial/seeds-react-badge@2.0.22
|
|
117
|
-
|
|
118
|
-
## 1.0.27
|
|
119
|
-
|
|
120
|
-
### Patch Changes
|
|
121
|
-
|
|
122
|
-
- Updated dependencies [1f9a473]
|
|
123
|
-
- @sproutsocial/seeds-react-theme@3.6.1
|
|
124
|
-
- @sproutsocial/seeds-react-icon@2.3.1
|
|
125
|
-
- @sproutsocial/seeds-react-badge@2.0.21
|
|
126
|
-
|
|
127
|
-
## 1.0.26
|
|
128
|
-
|
|
129
|
-
### Patch Changes
|
|
130
|
-
|
|
131
|
-
- Updated dependencies [5512104]
|
|
132
|
-
- @sproutsocial/seeds-react-icon@2.3.0
|
|
133
|
-
- @sproutsocial/seeds-react-badge@2.0.20
|
|
134
|
-
|
|
135
|
-
## 1.0.25
|
|
136
|
-
|
|
137
|
-
### Patch Changes
|
|
138
|
-
|
|
139
|
-
- @sproutsocial/seeds-react-icon@2.2.6
|
|
140
|
-
- @sproutsocial/seeds-react-badge@2.0.19
|
|
141
|
-
|
|
142
|
-
## 1.0.24
|
|
143
|
-
|
|
144
|
-
### Patch Changes
|
|
145
|
-
|
|
146
|
-
- Updated dependencies [17d4f12]
|
|
147
|
-
- @sproutsocial/seeds-react-theme@3.6.0
|
|
148
|
-
- @sproutsocial/seeds-react-icon@2.2.5
|
|
149
|
-
- @sproutsocial/seeds-react-badge@2.0.18
|
|
150
|
-
|
|
151
|
-
## 1.0.23
|
|
152
|
-
|
|
153
|
-
### Patch Changes
|
|
154
|
-
|
|
155
|
-
- Updated dependencies [3987f85]
|
|
156
|
-
- @sproutsocial/seeds-react-badge@2.0.17
|
|
157
|
-
|
|
158
|
-
## 1.0.22
|
|
159
|
-
|
|
160
|
-
### Patch Changes
|
|
161
|
-
|
|
162
|
-
- Updated dependencies [118e300]
|
|
163
|
-
- @sproutsocial/seeds-react-theme@3.5.1
|
|
164
|
-
- @sproutsocial/seeds-react-icon@2.2.4
|
|
165
|
-
- @sproutsocial/seeds-react-badge@2.0.16
|
|
166
|
-
|
|
167
|
-
## 1.0.21
|
|
168
|
-
|
|
169
|
-
### Patch Changes
|
|
170
|
-
|
|
171
|
-
- @sproutsocial/seeds-react-icon@2.2.3
|
|
172
|
-
- @sproutsocial/seeds-react-badge@2.0.15
|
|
173
|
-
|
|
174
|
-
## 1.0.20
|
|
175
|
-
|
|
176
|
-
### Patch Changes
|
|
177
|
-
|
|
178
|
-
- Updated dependencies [131db40]
|
|
179
|
-
- @sproutsocial/seeds-react-icon@2.2.2
|
|
180
|
-
- @sproutsocial/seeds-react-badge@2.0.14
|
|
181
|
-
|
|
182
|
-
## 1.0.19
|
|
183
|
-
|
|
184
|
-
### Patch Changes
|
|
185
|
-
|
|
186
|
-
- @sproutsocial/seeds-react-icon@2.2.1
|
|
187
|
-
- @sproutsocial/seeds-react-badge@2.0.13
|
|
188
|
-
|
|
189
|
-
## 1.0.18
|
|
190
|
-
|
|
191
|
-
### Patch Changes
|
|
192
|
-
|
|
193
|
-
- Updated dependencies [db6ce39]
|
|
194
|
-
- Updated dependencies [20bb01b]
|
|
195
|
-
- Updated dependencies [c7f2c70]
|
|
196
|
-
- @sproutsocial/seeds-react-theme@3.5.0
|
|
197
|
-
- @sproutsocial/seeds-react-icon@2.2.0
|
|
198
|
-
- @sproutsocial/seeds-react-badge@2.0.12
|
|
199
|
-
|
|
200
|
-
## 1.0.17
|
|
201
|
-
|
|
202
|
-
### Patch Changes
|
|
203
|
-
|
|
204
|
-
- Updated dependencies [7716e16]
|
|
205
|
-
- @sproutsocial/seeds-react-theme@3.4.0
|
|
206
|
-
- @sproutsocial/seeds-react-icon@2.1.2
|
|
207
|
-
- @sproutsocial/seeds-react-badge@2.0.11
|
|
208
|
-
|
|
209
|
-
## 1.0.16
|
|
210
|
-
|
|
211
|
-
### Patch Changes
|
|
212
|
-
|
|
213
|
-
- @sproutsocial/seeds-react-theme@3.3.2
|
|
214
|
-
- @sproutsocial/seeds-react-icon@2.1.1
|
|
215
|
-
- @sproutsocial/seeds-react-badge@2.0.10
|
|
216
|
-
|
|
217
|
-
## 1.0.15
|
|
218
|
-
|
|
219
|
-
### Patch Changes
|
|
220
|
-
|
|
221
|
-
- Updated dependencies [b147e07]
|
|
222
|
-
- @sproutsocial/seeds-react-icon@2.1.0
|
|
223
|
-
- @sproutsocial/seeds-react-badge@2.0.9
|
|
224
|
-
|
|
225
|
-
## 1.0.14
|
|
226
|
-
|
|
227
|
-
### Patch Changes
|
|
228
|
-
|
|
229
|
-
- @sproutsocial/seeds-react-theme@3.3.1
|
|
230
|
-
- @sproutsocial/seeds-react-icon@2.0.5
|
|
231
|
-
- @sproutsocial/seeds-react-badge@2.0.8
|
|
232
|
-
|
|
233
|
-
## 1.0.13
|
|
234
|
-
|
|
235
|
-
### Patch Changes
|
|
236
|
-
|
|
237
|
-
- Updated dependencies [2b1bb50]
|
|
238
|
-
- @sproutsocial/seeds-react-badge@2.0.7
|
|
239
|
-
|
|
240
|
-
## 1.0.12
|
|
241
|
-
|
|
242
|
-
### Patch Changes
|
|
243
|
-
|
|
244
|
-
- Updated dependencies [750d1ea]
|
|
245
|
-
- @sproutsocial/seeds-react-theme@3.3.0
|
|
246
|
-
- @sproutsocial/seeds-react-icon@2.0.4
|
|
247
|
-
- @sproutsocial/seeds-react-badge@2.0.6
|
|
248
|
-
|
|
249
|
-
## 1.0.11
|
|
250
|
-
|
|
251
|
-
### Patch Changes
|
|
252
|
-
|
|
253
|
-
- @sproutsocial/seeds-react-icon@2.0.3
|
|
254
|
-
- @sproutsocial/seeds-react-badge@2.0.5
|
|
255
|
-
|
|
256
|
-
## 1.0.10
|
|
257
|
-
|
|
258
|
-
### Patch Changes
|
|
259
|
-
|
|
260
|
-
- @sproutsocial/seeds-react-icon@2.0.2
|
|
261
|
-
- @sproutsocial/seeds-react-badge@2.0.4
|
|
262
|
-
|
|
263
|
-
## 1.0.9
|
|
264
|
-
|
|
265
|
-
### Patch Changes
|
|
266
|
-
|
|
267
|
-
- Updated dependencies [fa7579a]
|
|
268
|
-
- @sproutsocial/seeds-react-theme@3.2.1
|
|
269
|
-
- @sproutsocial/seeds-react-icon@2.0.1
|
|
270
|
-
- @sproutsocial/seeds-react-badge@2.0.3
|
|
271
|
-
|
|
272
|
-
## 1.0.8
|
|
273
|
-
|
|
274
|
-
### Patch Changes
|
|
275
|
-
|
|
276
|
-
- Updated dependencies [40248a0]
|
|
277
|
-
- @sproutsocial/seeds-react-icon@2.0.0
|
|
278
|
-
- @sproutsocial/seeds-react-badge@2.0.2
|
|
279
|
-
|
|
280
|
-
## 1.0.7
|
|
281
|
-
|
|
282
|
-
### Patch Changes
|
|
283
|
-
|
|
284
|
-
- Updated dependencies [8f6ba8d]
|
|
285
|
-
- @sproutsocial/seeds-react-theme@3.2.0
|
|
286
|
-
- @sproutsocial/seeds-react-icon@1.1.8
|
|
287
|
-
- @sproutsocial/seeds-react-badge@2.0.1
|
|
288
|
-
|
|
289
|
-
## 1.0.6
|
|
290
|
-
|
|
291
|
-
### Patch Changes
|
|
292
|
-
|
|
293
|
-
- Updated dependencies [38d9e82]
|
|
294
|
-
- @sproutsocial/seeds-react-badge@2.0.0
|
|
295
|
-
|
|
296
|
-
## 1.0.5
|
|
297
|
-
|
|
298
|
-
### Patch Changes
|
|
299
|
-
|
|
300
|
-
- @sproutsocial/seeds-react-icon@1.1.7
|
|
301
|
-
- @sproutsocial/seeds-react-badge@1.0.6
|
|
302
|
-
|
|
303
|
-
## 1.0.4
|
|
304
|
-
|
|
305
|
-
### Patch Changes
|
|
306
|
-
|
|
307
|
-
- @sproutsocial/seeds-react-icon@1.1.6
|
|
308
|
-
- @sproutsocial/seeds-react-badge@1.0.5
|
|
309
|
-
|
|
310
|
-
## 1.0.3
|
|
311
|
-
|
|
312
|
-
### Patch Changes
|
|
313
|
-
|
|
314
|
-
- Updated dependencies [b1c3b44]
|
|
315
|
-
- @sproutsocial/seeds-react-theme@3.1.1
|
|
316
|
-
- @sproutsocial/seeds-react-icon@1.1.5
|
|
317
|
-
- @sproutsocial/seeds-react-badge@1.0.4
|
|
318
|
-
|
|
319
|
-
## 1.0.2
|
|
320
|
-
|
|
321
|
-
### Patch Changes
|
|
322
|
-
|
|
323
|
-
- Updated dependencies [47580c4]
|
|
324
|
-
- @sproutsocial/seeds-react-theme@3.1.0
|
|
325
|
-
- @sproutsocial/seeds-react-icon@1.1.4
|
|
326
|
-
- @sproutsocial/seeds-react-badge@1.0.3
|
|
327
|
-
|
|
328
|
-
## 1.0.1
|
|
329
|
-
|
|
330
|
-
### Patch Changes
|
|
331
|
-
|
|
332
|
-
- Updated dependencies [22e1111]
|
|
333
|
-
- @sproutsocial/seeds-react-badge@1.0.2
|
|
334
|
-
- @sproutsocial/seeds-react-theme@3.0.1
|
|
335
|
-
- @sproutsocial/seeds-react-icon@1.1.3
|
|
336
|
-
|
|
337
|
-
## 1.0.0
|
|
338
|
-
|
|
339
|
-
### Major Changes
|
|
340
|
-
|
|
341
|
-
- 70de98c: Adds a seeds-react-rating component
|
package/jest.config.js
DELETED
package/src/Rating.stories.tsx
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
3
|
-
import Rating from "./Rating";
|
|
4
|
-
import { Icon } from "@sproutsocial/seeds-react-icon";
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
title: "Components/Rating",
|
|
8
|
-
component: Rating,
|
|
9
|
-
} as Meta;
|
|
10
|
-
|
|
11
|
-
type Story = StoryObj<typeof Rating>;
|
|
12
|
-
|
|
13
|
-
export const Default: Story = {
|
|
14
|
-
args: {
|
|
15
|
-
rating: 3,
|
|
16
|
-
},
|
|
17
|
-
|
|
18
|
-
render: (args) => <Rating {...args} />,
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
export const Custom: Story = {
|
|
22
|
-
args: {
|
|
23
|
-
rating: 3,
|
|
24
|
-
emptyIcon: <Icon name="tripadvisor-circle-outline" />,
|
|
25
|
-
filledIcon: <Icon name="tripadvisor-circle-solid" />,
|
|
26
|
-
},
|
|
27
|
-
|
|
28
|
-
render: (args) => <Rating {...args} />,
|
|
29
|
-
};
|
package/src/Rating.tsx
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import styled from "styled-components";
|
|
3
|
-
import { Icon } from "@sproutsocial/seeds-react-icon";
|
|
4
|
-
import { Badge } from "@sproutsocial/seeds-react-badge";
|
|
5
|
-
import { type TypeRatingProps } from "./RatingTypes";
|
|
6
|
-
|
|
7
|
-
const RatingContainer = styled.div`
|
|
8
|
-
display: flex;
|
|
9
|
-
align-items: center;
|
|
10
|
-
`;
|
|
11
|
-
|
|
12
|
-
const Rating: React.FC<TypeRatingProps> = ({
|
|
13
|
-
emptyIcon = <Icon name="star-outline" color="yellow.600" />,
|
|
14
|
-
halfIcon = <Icon name="star-half-outline" color="yellow.600" />,
|
|
15
|
-
filledIcon = <Icon name="star-full-solid" color="yellow.600" />,
|
|
16
|
-
rating,
|
|
17
|
-
scale = 5,
|
|
18
|
-
}) => {
|
|
19
|
-
return (
|
|
20
|
-
<RatingContainer>
|
|
21
|
-
{Array.from({ length: scale }, (_, index) => {
|
|
22
|
-
if (index < Math.floor(rating)) {
|
|
23
|
-
// Full star
|
|
24
|
-
return <span key={index}>{filledIcon}</span>;
|
|
25
|
-
} else if (index === Math.floor(rating) && rating % 1 !== 0) {
|
|
26
|
-
// Half star
|
|
27
|
-
return <span key={index}>{halfIcon}</span>;
|
|
28
|
-
} else {
|
|
29
|
-
// Empty star
|
|
30
|
-
return <span key={index}>{emptyIcon}</span>;
|
|
31
|
-
}
|
|
32
|
-
})}
|
|
33
|
-
{
|
|
34
|
-
<Badge
|
|
35
|
-
size="small"
|
|
36
|
-
badgeColor="neutral"
|
|
37
|
-
ml={200}
|
|
38
|
-
>{`${rating}/${scale}`}</Badge>
|
|
39
|
-
}
|
|
40
|
-
</RatingContainer>
|
|
41
|
-
);
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export default Rating;
|
package/src/RatingTypes.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { render, screen } from "@sproutsocial/seeds-react-testing-library";
|
|
3
|
-
import Rating from "../Rating";
|
|
4
|
-
|
|
5
|
-
describe("Rating Features", () => {
|
|
6
|
-
it("should display text that reflects the rating", () => {
|
|
7
|
-
render(<Rating rating={3} />);
|
|
8
|
-
expect(screen.getByText("3/5")).toBeInTheDocument();
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
it("should support half star ratings", () => {
|
|
12
|
-
render(<Rating rating={3.5} />);
|
|
13
|
-
expect(screen.getByText("3.5/5")).toBeInTheDocument();
|
|
14
|
-
});
|
|
15
|
-
});
|
package/src/index.ts
DELETED
package/src/styled.d.ts
DELETED
package/tsconfig.json
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"jsx": "react-jsx",
|
|
5
|
-
"module": "esnext"
|
|
6
|
-
},
|
|
7
|
-
"include": ["src/**/*"],
|
|
8
|
-
"exclude": [
|
|
9
|
-
"node_modules",
|
|
10
|
-
"dist",
|
|
11
|
-
"coverage",
|
|
12
|
-
"**/*.stories.tsx",
|
|
13
|
-
"**/*.stories.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
package/tsup.config.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { defineConfig } from "tsup";
|
|
2
|
-
|
|
3
|
-
export default defineConfig((options) => ({
|
|
4
|
-
entry: ["src/index.ts"],
|
|
5
|
-
format: ["cjs", "esm"],
|
|
6
|
-
clean: true,
|
|
7
|
-
legacyOutput: true,
|
|
8
|
-
dts: options.dts,
|
|
9
|
-
external: ["react"],
|
|
10
|
-
sourcemap: true,
|
|
11
|
-
metafile: options.metafile,
|
|
12
|
-
}));
|