next-helios-fe 1.4.52 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.4.52",
+  "version": "1.5.1",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,6 +17,7 @@
     "apexcharts": "^3.51.0",
     "array-move": "^4.0.0",
     "autoprefixer": "^10.4.19",
+    "emoji-picker-react": "^4.12.0",
     "file-saver": "^2.0.5",
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",

package/src/components/chart/index.tsx

@@ -31,7 +31,7 @@ interface ChartProps {
     categories: string[];
   };
   options?: {
-    theme?: "light" | "dark" | "system";
+    theme?: "light" | "dark";
     height?: number;
     barChart?: { variant: "vertical" | "horizontal" };
     sparkline?: boolean;

package/src/components/form/index.tsx

@@ -21,6 +21,7 @@ import {
   type MultipleSelectProps,
 } from "./other/multipleSelect";
 import { Autocomplete, type AutocompleteProps } from "./other/autocomplete";
+import { Emoji, type EmojiProps } from "./other/emoji";
 
 interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
   children: React.ReactNode;
@@ -45,6 +46,7 @@ interface FormComponent extends React.FC<FormProps> {
   Select: React.FC<SelectProps>;
   MultipleSelect: React.FC<MultipleSelectProps>;
   Autocomplete: React.FC<AutocompleteProps>;
+  Emoji: React.FC<EmojiProps>;
 }
 
 export const Form: FormComponent = ({ children, onSubmit, ...rest }) => {
@@ -79,3 +81,4 @@ Form.Textarea = Textarea;
 Form.Select = Select;
 Form.MultipleSelect = MultipleSelect;
 Form.Autocomplete = Autocomplete;
+Form.Emoji = Emoji;

package/src/components/form/input/file.tsx

@@ -5,6 +5,7 @@ import { Icon } from "@iconify/react";
 export interface FileProps extends React.InputHTMLAttributes<HTMLInputElement> {
   options?: {
     variant?: "basic" | "drag&drop";
+    buttonVariant?: "basic" | "button";
     maxSizeInMb?: number;
     buttonOnly?: boolean;
     width?: "full" | "fit";
@@ -184,14 +185,23 @@ export const File: React.FC<FileProps> = ({
         {options?.variant !== "drag&drop" && (
           <button
             type="button"
-            className="p-2 rounded-full hover:bg-secondary-light"
+            className={
+              options?.buttonVariant === "button"
+                ? "hover:text-primary"
+                : "p-2 rounded-full hover:bg-secondary-light"
+            }
             tabIndex={-1}
             disabled={rest.disabled}
             onClick={() => {
               inputRef.current?.click();
             }}
           >
-            <Icon icon="mi:attachment" className="text-xl" />
+            <Icon
+              icon="mi:attachment"
+              className={
+                options?.buttonVariant === "button" ? "text-2xl" : "text-xl"
+              }
+            />
           </button>
         )}
       </div>

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

@@ -0,0 +1,66 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { Icon } from "@iconify/react";
+import EmojiPicker, { Theme } from "emoji-picker-react";
+import "../../../styles";
+
+export interface EmojiProps {
+  theme?: "light" | "dark";
+  options?: {
+    buttonVariant?: "basic" | "button";
+  };
+  onChoose?: (e: {
+    target: {
+      value: string;
+    };
+  }) => void;
+}
+
+export const Emoji: React.FC<EmojiProps> = ({ theme, options, onChoose }) => {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      document.addEventListener("mousedown", (e) => {
+        if (e.target instanceof HTMLElement && !e.target.closest("#emoji")) {
+          setOpen(false);
+        }
+      });
+    }
+  }, [open]);
+
+  return (
+    <div id="emoji" className="relative flex justify-center items-center">
+      <button
+        type="button"
+        className={
+          options?.buttonVariant === "button"
+            ? "hover:text-primary"
+            : "p-2 rounded-full hover:bg-secondary-light"
+        }
+        tabIndex={-1}
+        onClick={() => setOpen(!open)}
+      >
+        <Icon
+          icon="mdi:emoticon-happy-outline"
+          className={
+            options?.buttonVariant === "button" ? "text-2xl" : "text-xl"
+          }
+        />
+      </button>
+      <div className="absolute bottom-0 left-0 mb-10 -ml-6">
+        <EmojiPicker
+          open={open}
+          theme={theme === "light" ? Theme.LIGHT : Theme.DARK}
+          className="!border-default !bg-secondary-bg"
+          searchPlaceHolder="search.."
+          autoFocusSearch={false}
+          onEmojiClick={(emojiObject) => {
+            onChoose && onChoose({ target: { value: emojiObject.emoji } });
+            setOpen(false);
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/syntax-highlighter/index.tsx

@@ -8,7 +8,7 @@ import {
 import { Icon } from "@iconify/react";
 
 interface SyntaxHighlighterProps {
-  theme?: "light" | "dark" | "system";
+  theme?: "light" | "dark";
   codeString: string;
   language?: string;
   onClipboardClick?: (value: string) => void;

package/src/styles/emoji.scss

@@ -0,0 +1,18 @@
+#emoji {
+    input {
+        border: 1.5px solid var(--border-color-default);
+        background-color: var(--background-secondary);
+        color: var(--color-default);
+        padding-left: 36px;
+
+        &::placeholder{
+            color: rgb(203 213 225);
+        }
+
+        &:focus {
+            box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+            --tw-ring-color: var(--color-primary-dark);
+            border: 1.5px solid var(--color-primary);
+        }
+    };
+};

package/src/styles/index.css

@@ -1,2 +1,3 @@
 @import "./calendar.scss";
 @import "./big-calendar.scss";
+@import "./emoji.scss";