next-helios-fe 1.7.28 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.7.28",
+  "version": "1.8.1",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/index.tsx

@@ -22,6 +22,7 @@ import {
   type MultipleSelectProps,
 } from "./other/multipleSelect";
 import { Autocomplete, type AutocompleteProps } from "./other/autocomplete";
+import { Rating, type RatingProps } from "./other/rating";
 import { Emoji, type EmojiProps } from "./other/emoji";
 
 interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
@@ -48,6 +49,7 @@ interface FormComponent extends React.FC<FormProps> {
   Select: React.FC<SelectProps>;
   MultipleSelect: React.FC<MultipleSelectProps>;
   Autocomplete: React.FC<AutocompleteProps>;
+  Rating: React.FC<RatingProps>;
   Emoji: React.FC<EmojiProps>;
 }
 
@@ -84,4 +86,5 @@ Form.Textarea = Textarea;
 Form.Select = Select;
 Form.MultipleSelect = MultipleSelect;
 Form.Autocomplete = Autocomplete;
+Form.Rating = Rating;
 Form.Emoji = Emoji;

package/src/components/form/other/rating.tsx

@@ -0,0 +1,121 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { Icon } from "@iconify/react";
+
+export interface RatingProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  description?: string;
+  options?: {
+    height?: "short" | "medium" | "high";
+  };
+}
+
+export const Rating: React.FC<RatingProps> = ({
+  options,
+  label,
+  description,
+  ...rest
+}) => {
+  const [tempValue, setTempValue] = useState("");
+  const height =
+    options?.height === "short"
+      ? "py-1"
+      : options?.height === "high"
+      ? "py-2"
+      : "py-1.5";
+
+  const starHeight =
+    options?.height === "short"
+      ? "text-3xl"
+      : options?.height === "high"
+      ? "text-5xl"
+      : "text-4xl";
+
+  useEffect(() => {
+    if (rest.value || rest.value === "") {
+      setTempValue(rest.value as string);
+      return;
+    } else if (rest.defaultValue || rest.defaultValue === "") {
+      setTempValue(rest.defaultValue as string);
+      return;
+    }
+  }, [rest.value, rest.defaultValue]);
+
+  return (
+    <div className="grid gap-2 w-fit">
+      {(label || description) && (
+        <div className="flex items-center">
+          {label && (
+            <span
+              className={`text-sm select-none ${
+                rest.required &&
+                "after:content-['*'] after:ml-1 after:text-danger"
+              }`}
+            >
+              {label}
+            </span>
+          )}
+          {description && (
+            <span
+              title={description}
+              className="ms-auto text-sm text-primary-dark"
+            >
+              <Icon icon="octicon:info-16" />
+            </span>
+          )}
+        </div>
+      )}
+      <div className="relative">
+        <div className="flex items-center gap-2">
+          {Array.from({
+            length: 5,
+          }).map((_, index) => {
+            return (
+              <button
+                key={index}
+                type="button"
+                disabled={rest.disabled}
+                onClick={() => {
+                  if (tempValue !== (index + 1).toString()) {
+                    setTempValue((index + 1).toString());
+
+                    if (rest.onChange) {
+                      rest.onChange({
+                        target: {
+                          value: (index + 1).toString(),
+                        } as HTMLSelectElement,
+                      } as any);
+                    }
+                  } else {
+                    setTempValue("");
+
+                    if (rest.onChange) {
+                      rest.onChange({
+                        target: { value: "" } as HTMLSelectElement,
+                      } as any);
+                    }
+                  }
+                }}
+                className={`duration-300 ease-in-out ${starHeight} ${
+                  rest.disabled ? "text-slate-400" : "text-warning"
+                }`}
+              >
+                <Icon
+                  icon={`fluent:star-12-${
+                    parseInt(tempValue) >= index + 1 ? "filled" : "regular"
+                  }`}
+                />
+              </button>
+            );
+          })}
+        </div>
+        <input
+          type="text"
+          className={`absolute top-0 w-full border-0 bg-transparent text-transparent caret-transparent pointer-events-none focus:ring-0 ${height}`}
+          value={tempValue}
+          required={rest.required}
+        />
+      </div>
+    </div>
+  );
+};