@sproutsocial/seeds-react-rating 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-rating/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     3.48 KB
+CJS dist/index.js.map 2.60 KB
+CJS ⚡️ Build success in 158ms
+ESM dist/esm/index.js     1.49 KB
+ESM dist/esm/index.js.map 2.55 KB
+ESM ⚡️ Build success in 162ms
+DTS Build start
+DTS ⚡️ Build success in 34737ms
+DTS dist/index.d.ts  358.00 B
+DTS dist/index.d.mts 358.00 B
+Done in 42.86s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-rating
+
+## 1.0.0
+
+### Major Changes
+
+- 70de98c: Adds a seeds-react-rating component

package/dist/esm/index.js

@@ -0,0 +1,52 @@
+// src/Rating.tsx
+import "react";
+import styled from "styled-components";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Badge } from "@sproutsocial/seeds-react-badge";
+
+// src/RatingTypes.ts
+import "react";
+
+// src/Rating.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var RatingContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+var Rating = ({
+  emptyIcon = /* @__PURE__ */ jsx(Icon, { name: "star-outline", color: "yellow.600" }),
+  halfIcon = /* @__PURE__ */ jsx(Icon, { name: "star-half-outline", color: "yellow.600" }),
+  filledIcon = /* @__PURE__ */ jsx(Icon, { name: "star-full-solid", color: "yellow.600" }),
+  rating,
+  scale = 5
+}) => {
+  return /* @__PURE__ */ jsxs(RatingContainer, { children: [
+    Array.from({ length: scale }, (_, index) => {
+      if (index < Math.floor(rating)) {
+        return /* @__PURE__ */ jsx("span", { children: filledIcon }, index);
+      } else if (index === Math.floor(rating) && rating % 1 !== 0) {
+        return /* @__PURE__ */ jsx("span", { children: halfIcon }, index);
+      } else {
+        return /* @__PURE__ */ jsx("span", { children: emptyIcon }, index);
+      }
+    }),
+    /* @__PURE__ */ jsx(
+      Badge,
+      {
+        size: "small",
+        badgeColor: "neutral",
+        ml: 200,
+        children: `${rating}/${scale}`
+      }
+    )
+  ] });
+};
+var Rating_default = Rating;
+
+// src/index.ts
+var index_default = Rating_default;
+export {
+  Rating_default as Rating,
+  index_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Rating.tsx","../../src/RatingTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { Badge } from \"@sproutsocial/seeds-react-badge\";\nimport { type TypeRatingProps } from \"./RatingTypes\";\n\nconst RatingContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Rating: React.FC<TypeRatingProps> = ({\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}) => {\n  return (\n    <RatingContainer>\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    </RatingContainer>\n  );\n};\n\nexport default Rating;\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}\n","import Rating from \"./Rating\";\n\nexport default Rating;\nexport { Rating };\nexport * from \"./RatingTypes\";\n"],"mappings":";AAAA,OAAkB;AAClB,OAAO,YAAY;AACnB,SAAS,YAAY;AACrB,SAAS,aAAa;;;ACHtB,OAAuB;;;ADYT,cAOV,YAPU;AANd,IAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAK/B,IAAM,SAAoC,CAAC;AAAA,EACzC,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,MAAM;AACJ,SACE,qBAAC,mBACE;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;AAEA,IAAO,iBAAQ;;;AEzCf,IAAO,gBAAQ;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import React__default from 'react';
+
+interface TypeRatingProps {
+    emptyIcon?: React.ReactNode;
+    halfIcon?: React.ReactNode;
+    filledIcon?: React.ReactNode;
+    rating: number;
+    scale?: number;
+}
+
+declare const Rating: React__default.FC<TypeRatingProps>;
+
+export { Rating, type TypeRatingProps, Rating as default };

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import React__default from 'react';
+
+interface TypeRatingProps {
+    emptyIcon?: React.ReactNode;
+    halfIcon?: React.ReactNode;
+    filledIcon?: React.ReactNode;
+    rating: number;
+    scale?: number;
+}
+
+declare const Rating: React__default.FC<TypeRatingProps>;
+
+export { Rating, type TypeRatingProps, Rating as default };

package/dist/index.js

@@ -0,0 +1,89 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Rating: () => Rating_default,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Rating.tsx
+var import_react = require("react");
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
+var import_seeds_react_badge = require("@sproutsocial/seeds-react-badge");
+
+// src/RatingTypes.ts
+var React = require("react");
+
+// src/Rating.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var RatingContainer = import_styled_components.default.div`
+  display: flex;
+  align-items: center;
+`;
+var Rating = ({
+  emptyIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.Icon, { name: "star-outline", color: "yellow.600" }),
+  halfIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.Icon, { name: "star-half-outline", color: "yellow.600" }),
+  filledIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.Icon, { name: "star-full-solid", color: "yellow.600" }),
+  rating,
+  scale = 5
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(RatingContainer, { children: [
+    Array.from({ length: scale }, (_, index) => {
+      if (index < Math.floor(rating)) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: filledIcon }, index);
+      } else if (index === Math.floor(rating) && rating % 1 !== 0) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: halfIcon }, index);
+      } else {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: emptyIcon }, index);
+      }
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_seeds_react_badge.Badge,
+      {
+        size: "small",
+        badgeColor: "neutral",
+        ml: 200,
+        children: `${rating}/${scale}`
+      }
+    )
+  ] });
+};
+var Rating_default = Rating;
+
+// src/index.ts
+var index_default = Rating_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Rating
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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 styled from \"styled-components\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { Badge } from \"@sproutsocial/seeds-react-badge\";\nimport { type TypeRatingProps } from \"./RatingTypes\";\n\nconst RatingContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Rating: React.FC<TypeRatingProps> = ({\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}) => {\n  return (\n    <RatingContainer>\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    </RatingContainer>\n  );\n};\n\nexport default Rating;\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}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,+BAAmB;AACnB,8BAAqB;AACrB,+BAAsB;;;ACHtB,YAAuB;;;ADYT;AANd,IAAM,kBAAkB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAK/B,IAAM,SAAoC,CAAC;AAAA,EACzC,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,MAAM;AACJ,SACE,6CAAC,mBACE;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;AAEA,IAAO,iBAAQ;;;ADzCf,IAAO,gBAAQ;","names":["styled"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-rating",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@sproutsocial/seeds-react-rating",
+  "version": "1.0.0",
+  "description": "Seeds React Rating",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "^2.2.0",
+    "@sproutsocial/seeds-react-system-props": "^3.0.1",
+    "@sproutsocial/seeds-react-icon": "^1.0.0",
+    "@sproutsocial/seeds-react-badge": "^1.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Rating.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Rating from "./Rating";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+
+export default {
+  title: "Components/Rating",
+  component: Rating,
+} as Meta;
+
+type Story = StoryObj<typeof Rating>;
+
+export const Default: Story = {
+  args: {
+    rating: 3,
+  },
+
+  render: (args) => <Rating {...args} />,
+};
+
+export const Custom: Story = {
+  args: {
+    rating: 3,
+    emptyIcon: <Icon name="tripadvisor-circle-outline" />,
+    filledIcon: <Icon name="tripadvisor-circle-solid" />,
+  },
+
+  render: (args) => <Rating {...args} />,
+};

package/src/Rating.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import styled from "styled-components";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Badge } from "@sproutsocial/seeds-react-badge";
+import { type TypeRatingProps } from "./RatingTypes";
+
+const RatingContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Rating: React.FC<TypeRatingProps> = ({
+  emptyIcon = <Icon name="star-outline" color="yellow.600" />,
+  halfIcon = <Icon name="star-half-outline" color="yellow.600" />,
+  filledIcon = <Icon name="star-full-solid" color="yellow.600" />,
+  rating,
+  scale = 5,
+}) => {
+  return (
+    <RatingContainer>
+      {Array.from({ length: scale }, (_, index) => {
+        if (index < Math.floor(rating)) {
+          // Full star
+          return <span key={index}>{filledIcon}</span>;
+        } else if (index === Math.floor(rating) && rating % 1 !== 0) {
+          // Half star
+          return <span key={index}>{halfIcon}</span>;
+        } else {
+          // Empty star
+          return <span key={index}>{emptyIcon}</span>;
+        }
+      })}
+      {
+        <Badge
+          size="small"
+          badgeColor="neutral"
+          ml={200}
+        >{`${rating}/${scale}`}</Badge>
+      }
+    </RatingContainer>
+  );
+};
+
+export default Rating;

package/src/RatingTypes.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+
+export interface TypeRatingProps {
+  emptyIcon?: React.ReactNode;
+  halfIcon?: React.ReactNode;
+  filledIcon?: React.ReactNode;
+  rating: number;
+  scale?: number;
+}

package/src/__tests__/rating.test.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import Rating from "../Rating";
+
+describe("Rating Features", () => {
+  it("should display text that reflects the rating", () => {
+    render(<Rating rating={3} />);
+    expect(screen.getByText("3/5")).toBeInTheDocument();
+  });
+
+  it("should support half star ratings", () => {
+    render(<Rating rating={3.5} />);
+    expect(screen.getByText("3.5/5")).toBeInTheDocument();
+  });
+});

package/src/index.ts

@@ -0,0 +1,5 @@
+import Rating from "./Rating";
+
+export default Rating;
+export { Rating };
+export * from "./RatingTypes";

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));