first commit

components/UIElements/Rating/Basic.js

@@ -0,0 +1,57 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import Box from '@mui/material/Box';
+import Rating from '@mui/material/Rating'; 
+
+export default function Basic() {
+  const [value, setValue] = React.useState(2);
+
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Basic
+        </Typography>
+
+        <Box
+          sx={{
+            '& > legend': { mt: 2 },
+          }}
+        >
+          <Typography component="legend">Controlled</Typography>
+          <Rating
+            name="simple-controlled"
+            value={value}
+            onChange={(event, newValue) => {
+              setValue(newValue);
+            }}
+          />
+          
+          <Typography component="legend">Read only</Typography>
+          <Rating name="read-only" value={value} readOnly />
+
+          <Typography component="legend">Disabled</Typography>
+          <Rating name="disabled" value={value} disabled />
+
+          <Typography component="legend">No rating given</Typography>
+          <Rating name="no-value" value={null} />
+        </Box>
+      </Card>
+    </>
+  );
+}

components/UIElements/Rating/Customization.js

@@ -0,0 +1,61 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Rating from '@mui/material/Rating';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
+
+const StyledRating = styled(Rating)({
+  '& .MuiRating-iconFilled': {
+    color: '#ff6d75',
+  },
+  '& .MuiRating-iconHover': {
+    color: '#ff3d47',
+  },
+});
+
+export default function Customization() {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Customization
+        </Typography>
+
+        <Box
+          sx={{
+            '& > legend': { mt: 2 },
+          }}
+        >
+          <Typography component="legend">Custom icon and color</Typography>
+          <StyledRating
+            name="customized-color"
+            defaultValue={2}
+            getLabelText={(value) => `${value} Heart${value !== 1 ? 's' : ''}`}
+            precision={0.5}
+            icon={<FavoriteIcon fontSize="inherit" />}
+            emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
+          />
+          <Typography component="legend">10 stars</Typography>
+          <Rating name="customized-10" defaultValue={2} max={10} />
+        </Box>
+      </Card>
+    </>
+  );
+}

components/UIElements/Rating/HoverFeedback.js

@@ -0,0 +1,82 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import Rating from '@mui/material/Rating';
+import Box from '@mui/material/Box';
+import StarIcon from '@mui/icons-material/Star';
+
+const labels = {
+  0.5: 'Useless',
+  1: 'Useless+',
+  1.5: 'Poor',
+  2: 'Poor+',
+  2.5: 'Ok',
+  3: 'Ok+',
+  3.5: 'Good',
+  4: 'Good+',
+  4.5: 'Excellent',
+  5: 'Excellent+',
+};
+
+function getLabelText(value) {
+  return `${value} Star${value !== 1 ? 's' : ''}, ${labels[value]}`;
+}
+
+export default function HoverFeedback() {
+
+  const [value, setValue] = React.useState(2);
+  const [hover, setHover] = React.useState(-1);
+
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Hover Feedback
+        </Typography>
+
+        <Box
+          sx={{
+            width: 200,
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <Rating
+            name="hover-feedback"
+            value={value}
+            precision={0.5}
+            getLabelText={getLabelText}
+            onChange={(event, newValue) => {
+              setValue(newValue);
+            }}
+            onChangeActive={(event, newHover) => {
+              setHover(newHover);
+            }}
+            emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
+          />
+          {value !== null && (
+            <Box 
+              className="ml-2"
+            >
+              {labels[hover !== -1 ? hover : value]}
+            </Box>
+          )}
+        </Box>
+      </Card>
+    </>
+  );
+}

components/UIElements/Rating/RadioGroup.js

@@ -0,0 +1,83 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Rating from '@mui/material/Rating';
+import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied';
+import SentimentDissatisfiedIcon from '@mui/icons-material/SentimentDissatisfied';
+import SentimentSatisfiedIcon from '@mui/icons-material/SentimentSatisfied';
+import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAltOutlined';
+import SentimentVerySatisfiedIcon from '@mui/icons-material/SentimentVerySatisfied';
+
+const StyledRating = styled(Rating)(({ theme }) => ({
+  '& .MuiRating-iconEmpty .MuiSvgIcon-root': {
+    color: theme.palette.action.disabled,
+  },
+}));
+
+const customIcons = {
+  1: {
+    icon: <SentimentVeryDissatisfiedIcon color="error" />,
+    label: 'Very Dissatisfied',
+  },
+  2: {
+    icon: <SentimentDissatisfiedIcon color="error" />,
+    label: 'Dissatisfied',
+  },
+  3: {
+    icon: <SentimentSatisfiedIcon color="warning" />,
+    label: 'Neutral',
+  },
+  4: {
+    icon: <SentimentSatisfiedAltIcon color="success" />,
+    label: 'Satisfied',
+  },
+  5: {
+    icon: <SentimentVerySatisfiedIcon color="success" />,
+    label: 'Very Satisfied',
+  },
+};
+
+function IconContainer(props) {
+  const { value, ...other } = props;
+  return <span {...other}>{customIcons[value].icon}</span>;
+}
+
+IconContainer.propTypes = {
+  value: PropTypes.number.isRequired,
+};
+
+export default function RadioGroup() {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Radio Group
+        </Typography>
+
+        <StyledRating
+          name="highlight-selected-only"
+          defaultValue={2}
+          IconContainerComponent={IconContainer}
+          getLabelText={(value) => customIcons[value].label}
+          highlightSelectedOnly
+        />
+      </Card>
+    </>
+  );
+}

components/UIElements/Rating/RatingPrecision.js

@@ -0,0 +1,36 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import Rating from '@mui/material/Rating';
+import Stack from '@mui/material/Stack';
+
+export default function RatingPrecision() {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Rating Precision
+        </Typography>
+
+        <Stack spacing={1}>
+          <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
+          <Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly />
+        </Stack>
+      </Card>
+    </>
+  );
+}

components/UIElements/Rating/Sizes.js

@@ -0,0 +1,37 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import Rating from '@mui/material/Rating';
+import Stack from '@mui/material/Stack';
+
+export default function Sizes() {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Sizes
+        </Typography>
+
+        <Stack spacing={1}>
+          <Rating name="size-small" defaultValue={2} size="small" />
+          <Rating name="size-medium" defaultValue={2} />
+          <Rating name="size-large" defaultValue={2} size="large" />
+        </Stack>
+      </Card>
+    </>
+  );
+}