@soul-refiner/design-system 0.1.17 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "main": "src/index.ts",
   "license": "MIT",
   "publishConfig": {

package/src/components/actions/index.ts

@@ -6,6 +6,8 @@ export type {
   DropdownProps,
   DropdownSpacerProps,
 } from './dropdown';
+export { Rate } from './rate';
+export type { RateProps } from './rate';
 export { Switch } from './switch';
 export type { SwitchProps } from './switch';
 export { Upload } from './upload';

package/src/components/actions/rate/index.ts

@@ -0,0 +1,2 @@
+export { Rate } from './rate';
+export type { RateProps } from './rate';

package/src/components/actions/rate/rate.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface RateProps {
+  isRateable?: boolean;
+  onRate?: (rating: number) => void;
+  percent: number;
+  size: 'small' | 'large';
+  userRating?: number;
+}
+
+const SM_WIDTH = 98;
+const LG_WIDTH = 147;
+const SM_HEIGHT = 16;
+const LG_HEIGHT = 24;
+
+export const Rate = ({
+  isRateable = true,
+  onRate,
+  percent,
+  size,
+  userRating,
+}: RateProps) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [hoveredRating, setHoveredRating] = React.useState<
+    number | undefined
+  >();
+  const width = size === 'small' ? SM_WIDTH : LG_WIDTH;
+  const height = size === 'small' ? SM_HEIGHT : LG_HEIGHT;
+  const displayPercent = hoveredRating
+    ? hoveredRating * 20
+    : userRating
+    ? userRating * 20
+    : percent;
+
+  const handleMouseOver = (event: React.MouseEvent<SVGElement>) => {
+    if (isRateable && ref?.current) {
+      const elementWidth = size === 'small' ? SM_WIDTH : LG_WIDTH;
+      const position = (event as any).clientX - ref.current.offsetLeft;
+      const star = Math.floor((5 * position) / elementWidth) + 1;
+      setHoveredRating(star);
+    }
+  };
+
+  const handleMouseOut = () => {
+    setHoveredRating(undefined);
+  };
+
+  const handleClick = () => {
+    if (isRateable && onRate && hoveredRating !== undefined) {
+      onRate(hoveredRating);
+    }
+  };
+
+  return (
+    <div ref={ref}>
+      <SVG
+        width={width}
+        height={height}
+        onMouseOver={handleMouseOver}
+        onMouseOut={handleMouseOut}
+        onClick={handleClick}
+        viewBox="0 0 98 16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.1437 16L8.61569 13.5529C8.55281 13.5529 8.48992 13.4902 8.42703 13.4902C8.36414 13.4902 8.30125 13.5529 8.23837 13.5529L3.64752 15.9373C3.58463 16 3.52174 16 3.39597 16C3.33308 16 3.27019 16 3.2073 15.9373C3.14441 15.8745 3.08153 15.8118 3.08153 15.749C3.08153 15.6863 3.01864 15.6235 3.08153 15.5608L3.96196 10.4784C3.96196 10.4157 3.96196 10.3529 3.89907 10.2902C3.89907 10.2275 3.83619 10.1647 3.83619 10.102L0.125777 6.52549C0.0628883 6.46275 0 6.4 0 6.33726C0 6.21177 0 6.14902 0 6.08628C0.0628883 6.02353 0.0628883 5.96079 0.125777 5.89804C0.188665 5.83529 0.251553 5.83529 0.37733 5.83529L5.47128 5.08235C5.53417 5.08235 5.59706 5.01961 5.65995 5.01961C5.65995 4.95686 5.72283 4.89412 5.78572 4.83137L8.0497 0.25098C8.11259 0.188235 8.11259 0.12549 8.17548 0.0627451C8.23837 0.0627451 8.36414 0 8.42703 0C8.48992 0 8.55281 0.0627451 8.61569 0.0627451C8.67858 0.12549 8.74147 0.188235 8.80436 0.25098L11.0683 4.89412C11.0683 4.89412 11.1312 4.95686 11.1941 5.01961C11.257 5.01961 11.3199 5.08235 11.3828 5.08235L16.4767 5.83529C16.5396 5.83529 16.6025 5.89804 16.6654 5.89804C16.7283 5.96079 16.7912 6.02353 16.7912 6.08628C16.8541 6.14902 16.8541 6.27451 16.7912 6.33726C16.7912 6.4 16.7283 6.46275 16.7283 6.52549L13.0179 10.102C12.955 10.1647 12.8921 10.2275 12.8921 10.2902C12.8921 10.3529 12.8921 10.4157 12.8921 10.4784L13.7725 15.5608C13.7725 15.6235 13.7725 15.6863 13.7096 15.749C13.7096 15.8118 13.6468 15.8745 13.5839 15.9373C13.521 16 13.4581 16 13.3952 16C13.3323 16 13.2065 16 13.1437 16Z M33.711 16L29.1201 13.5529C29.0572 13.5529 28.9943 13.4902 28.9315 13.4902C28.8686 13.4902 28.8057 13.5529 28.7428 13.5529L24.2148 15.9373C24.1519 16 24.0262 16 23.9633 16C23.9004 16 23.8375 15.9373 23.7746 15.9373C23.7117 15.8745 23.6488 15.8118 23.6488 15.749C23.5859 15.6863 23.5859 15.6235 23.5859 15.498L24.4664 10.4157C24.4664 10.3529 24.4664 10.2902 24.4664 10.2275C24.4664 10.1647 24.4035 10.102 24.3406 10.102L20.6931 6.46275C20.6302 6.4 20.5673 6.33725 20.5673 6.27451C20.5673 6.21176 20.5673 6.14902 20.5673 6.08628C20.5673 6.02353 20.6302 5.96079 20.6931 5.89804C20.756 5.83529 20.8189 5.83529 20.8818 5.77255L26.0386 5.08235C26.1015 5.01961 26.1644 5.01961 26.1644 4.95686C26.2273 4.95686 26.2901 4.89412 26.2901 4.83137L28.617 0.25098C28.617 0.12549 28.6799 0.12549 28.7428 0.0627451C28.8057 -7.45058e-09 28.8686 0 28.9315 0C29.0572 0 29.1201 -7.45058e-09 29.183 0.0627451C29.2459 0.12549 29.3088 0.12549 29.3088 0.25098L31.6356 4.83137C31.6356 4.89412 31.6985 4.95686 31.7614 5.01961C31.7614 5.01961 31.8243 5.08235 31.8872 5.08235L37.044 5.83529C37.1069 5.83529 37.1698 5.83529 37.2327 5.89804C37.2956 5.96079 37.2956 6.02353 37.3585 6.08628C37.3585 6.14902 37.3585 6.21176 37.3585 6.27451C37.3585 6.4 37.2956 6.46275 37.2327 6.52549L33.5223 10.102C33.5223 10.1647 33.4594 10.1647 33.4594 10.2275C33.3965 10.2902 33.3965 10.3529 33.4594 10.4784L34.277 15.5608C34.3398 15.6235 34.277 15.6863 34.277 15.749C34.277 15.8118 34.2141 15.8745 34.1512 15.9373C34.0883 16 34.0254 16 33.9625 16C33.8367 16 33.7738 16 33.711 16Z M53.5187 16L48.9279 13.5529C48.865 13.5529 48.8021 13.4902 48.7392 13.4902C48.6763 13.4902 48.6134 13.5529 48.5505 13.5529L44.0226 15.9373C43.9597 16 43.8968 16 43.8339 16C43.7081 16 43.6452 16 43.5824 15.9373C43.5195 15.8745 43.5195 15.8118 43.4566 15.749C43.4566 15.6863 43.4566 15.6235 43.4566 15.5608L44.337 10.4784C44.337 10.4157 44.337 10.3529 44.2741 10.2902C44.2741 10.2275 44.2741 10.1647 44.2112 10.102L40.5008 6.52549C40.4379 6.46275 40.4379 6.4 40.375 6.33726C40.375 6.21177 40.375 6.14902 40.375 6.08628C40.4379 6.02353 40.4379 5.96079 40.5008 5.89804C40.5637 5.83529 40.6266 5.83529 40.7524 5.83529L45.8463 5.08235C45.9092 5.08235 45.9721 5.01961 46.035 5.01961C46.0979 4.95686 46.0979 4.89412 46.1608 4.83137L48.4248 0.25098C48.4876 0.188235 48.4876 0.12549 48.5505 0.0627451C48.6134 0.0627451 48.7392 0 48.8021 0C48.865 0 48.9279 0.0627451 48.9907 0.0627451C49.0536 0.12549 49.1165 0.188235 49.1794 0.25098L51.4434 4.89412C51.4434 4.89412 51.5063 4.95686 51.5692 5.01961C51.6321 5.01961 51.6949 5.08235 51.7578 5.08235L56.8518 5.83529C56.9147 5.83529 56.9776 5.89804 57.0404 5.89804C57.1033 5.96079 57.1662 6.02353 57.1662 6.08628C57.1662 6.14902 57.2291 6.27451 57.1662 6.33726C57.1662 6.4 57.1033 6.46275 57.1033 6.52549L53.3929 10.102C53.33 10.1647 53.2671 10.2275 53.2671 10.2902C53.2671 10.3529 53.2671 10.4157 53.2671 10.4784L54.0847 15.5608C54.0847 15.6235 54.0847 15.6863 54.0847 15.749C54.0218 15.8118 53.9589 15.8745 53.896 15.9373C53.896 15.9373 53.7703 16 53.7074 16C53.6445 16 53.5816 16 53.5187 16Z M74.0858 16L69.4949 13.5529C69.4321 13.5529 69.3692 13.4902 69.3063 13.4902C69.2434 13.4902 69.1805 13.5529 69.1176 13.5529L64.5268 15.9373C64.4639 16 64.401 16 64.3381 16C64.2752 16 64.1494 15.9373 64.0865 15.9373C64.0865 15.8745 64.0237 15.8118 63.9608 15.749C63.9608 15.6863 63.9608 15.6235 63.9608 15.498L64.8412 10.4157C64.8412 10.3529 64.8412 10.2902 64.8412 10.2275C64.7783 10.1647 64.7783 10.102 64.7154 10.102L61.005 6.52549C60.9421 6.46275 60.9421 6.4 60.8792 6.33726C60.8792 6.21177 60.8792 6.14902 60.8792 6.08628C60.9421 6.02353 60.9421 5.96079 61.005 5.89804C61.0679 5.83529 61.1308 5.83529 61.2566 5.83529L66.3505 5.08235C66.4134 5.08235 66.4763 5.01961 66.5392 5.01961C66.6021 4.95686 66.6021 4.89412 66.665 4.83137L68.9289 0.25098C68.9918 0.188235 68.9918 0.12549 69.0547 0.0627451C69.1176 0.0627451 69.2434 0 69.3063 0C69.3692 0 69.4321 0.0627451 69.4949 0.0627451C69.5578 0.12549 69.6207 0.188235 69.6836 0.25098L71.9476 4.89412C71.9476 4.89412 72.0105 4.95686 72.0734 5.01961C72.1362 5.01961 72.1991 5.08235 72.262 5.08235L77.356 5.83529C77.4189 5.83529 77.4818 5.89804 77.5446 5.89804C77.6075 5.96079 77.6704 6.02353 77.6704 6.08628C77.7333 6.14902 77.7333 6.27451 77.6704 6.33726C77.6704 6.4 77.6075 6.46275 77.6075 6.52549L73.8971 10.102C73.8342 10.1647 73.7713 10.2275 73.7713 10.2902C73.7713 10.3529 73.7713 10.4157 73.7713 10.4784L74.6518 15.5608C74.6518 15.6235 74.6518 15.6863 74.5889 15.749C74.5889 15.8118 74.526 15.8745 74.4631 15.9373C74.4002 15.9373 74.3373 16 74.2744 16C74.2116 16 74.1487 16 74.0858 16Z M94.0831 16L89.5551 13.5529C89.4922 13.5529 89.4294 13.4902 89.3665 13.4902C89.3036 13.4902 89.2407 13.5529 89.1778 13.5529L84.587 15.9373C84.5241 16 84.4612 16 84.3983 16C84.2725 16 84.2096 15.9373 84.1468 15.9373C84.0839 15.8745 84.0839 15.8118 84.021 15.749C84.021 15.6863 84.021 15.6235 84.021 15.498L84.9014 10.4157C84.9014 10.3529 84.9014 10.2902 84.8385 10.2275C84.8385 10.1647 84.8385 10.102 84.7756 10.102L81.0652 6.46275C81.0023 6.4 81.0023 6.33725 80.9395 6.27451C80.9395 6.21176 80.9395 6.14902 80.9395 6.08628C81.0023 6.02353 81.0023 5.96079 81.0652 5.89804C81.1281 5.83529 81.191 5.83529 81.3168 5.77255L86.4107 5.08235C86.4736 5.01961 86.5365 5.01961 86.5994 4.95686C86.6623 4.95686 86.6623 4.89412 86.7252 4.83137L88.9892 0.25098C89.052 0.12549 89.1149 0.12549 89.1778 0.0627451C89.2407 -7.45058e-09 89.3036 0 89.3665 0C89.4294 0 89.4922 -7.45058e-09 89.5551 0.0627451C89.618 0.12549 89.6809 0.12549 89.7438 0.25098L92.0078 4.83137C92.0078 4.89412 92.0707 4.95686 92.1336 5.01961C92.1965 5.01961 92.2593 5.08235 92.3222 5.08235L97.4162 5.83529C97.4791 5.83529 97.542 5.83529 97.6048 5.89804C97.6677 5.96079 97.7306 6.02353 97.7306 6.08628C97.7935 6.14902 97.7935 6.21176 97.7306 6.27451C97.7306 6.4 97.6677 6.46275 97.6677 6.52549L93.9573 10.102C93.8944 10.1647 93.8315 10.1647 93.8315 10.2275C93.8315 10.2902 93.8315 10.3529 93.8315 10.4784L94.712 15.5608C94.712 15.6235 94.712 15.6863 94.6491 15.749C94.6491 15.8118 94.5862 15.8745 94.5233 15.9373C94.4604 16 94.3975 16 94.3346 16C94.2718 16 94.146 16 94.0831 16Z"
+          stroke="#D0D2D6"
+          strokeWidth="0.42154"
+        />
+        <defs>
+          <linearGradient id="MyGradient">
+            <stop offset="0%" stopColor="#FFB51F" />
+            <stop offset={`${displayPercent}%`} stopColor="#FF870A" />
+            <stop offset={`${displayPercent}%`} stopColor="#FFFFFF" />
+          </linearGradient>
+        </defs>
+      </SVG>
+    </div>
+  );
+};
+
+const SVG = styled.svg<{
+  $isRateable?: number;
+}>`
+  fill: url(#MyGradient);
+  cursor: pointer;
+`;