next-helios-fe 1.0.0

package/src/components/dropdown/index.tsx

@@ -0,0 +1,69 @@
+"use client";
+import React from "react";
+import { Dropdown as Dd } from "flowbite-react";
+import { Header, type HeaderProps } from "./header";
+import { Item, type ItemProps } from "./item";
+
+interface DropdownProps {
+  children: React.ReactNode;
+  placement?:
+    | "top"
+    | "top-start"
+    | "top-end"
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end";
+  dismissOnClick?: boolean;
+  trigger?: React.ReactNode;
+}
+
+interface DropdownComponent extends React.FC<DropdownProps> {
+  Header: React.FC<HeaderProps>;
+  Item: React.FC<ItemProps>;
+}
+
+export const Dropdown: DropdownComponent = ({
+  children,
+  placement,
+  dismissOnClick,
+  trigger,
+}) => {
+  const childrenList = React.Children.toArray(children);
+  const header = childrenList.find((child) => {
+    return (child as React.ReactElement).type === Dropdown.Header;
+  });
+  const itemList = childrenList.filter((child) => {
+    return (child as React.ReactElement).type === Dropdown.Item;
+  });
+
+  return (
+    <Dd
+      label=""
+      className="px-1 rounded-md border-default bg-secondary-bg z-20"
+      placement={placement || "bottom-end"}
+      dismissOnClick={dismissOnClick || true}
+      theme={{
+        floating: {
+          header: "px-4 py-2 text-sm !text-default",
+          item: {
+            base: `min-w-40 w-full my-0.5 rounded-md text-sm text-left text-default ${
+              childrenList.length > 0 && !header && itemList.length === 0
+                ? ""
+                : "px-4 py-2 hover:bg-secondary-light"
+            }`,
+          },
+        },
+      }}
+      renderTrigger={() => <div>{trigger}</div>}
+    >
+      {header}
+      {itemList}
+      {childrenList.length > 0 && !header && itemList.length === 0 && (
+        <Dd.Item className="grid cursor-default">{children}</Dd.Item>
+      )}
+    </Dd>
+  );
+};
+
+Dropdown.Header = Header;
+Dropdown.Item = Item;

package/src/components/dropdown/item.tsx

@@ -0,0 +1,22 @@
+"use client";
+import React from "react";
+import { Dropdown as Dd } from "flowbite-react";
+
+export interface ItemProps {
+  children: React.ReactNode;
+  active?: boolean;
+  onClick?: () => void;
+}
+
+export const Item: React.FC<ItemProps> = ({ children, active, onClick }) => {
+  return (
+    <Dd.Item
+      className={`${
+        active && "bg-primary-transparent text-primary pointer-events-none"
+      }`}
+      onClick={onClick}
+    >
+      {children}
+    </Dd.Item>
+  );
+};

package/src/components/form/index.tsx

@@ -0,0 +1,81 @@
+"use client";
+import React from "react";
+import { Text, type TextProps } from "./input/text";
+import { Number, type NumberProps } from "./input/number";
+import { Email, type EmailProps } from "./input/email";
+import { Search, type SearchProps } from "./input/search";
+import { Checkbox, type CheckboxProps } from "./input/checkbox";
+import { Radio, type RadioProps } from "./input/radio";
+import { Range, type RangeProps } from "./input/range";
+import { Time, type TimeProps } from "./input/time";
+import { File, type FileProps } from "./input/file";
+import { Color, type ColorProps } from "./input/color";
+import { Password, type PasswordProps } from "./input/password";
+import { PhoneNumber, type PhoneNumberProps } from "./other/phoneNumber";
+import { Secret, type SecretProps } from "./other/secret";
+import { Pin, type PinProps } from "./other/pin";
+import { Textarea, type TextareaProps } from "./other/textarea";
+import { Select, type SelectProps } from "./other/select";
+import {
+  MultipleSelect,
+  type MultipleSelectProps,
+} from "./other/multipleSelect";
+import { Autocomplete, type AutocompleteProps } from "./other/autocomplete";
+
+interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+  children: React.ReactNode;
+}
+
+interface FormComponent extends React.FC<FormProps> {
+  Text: React.FC<TextProps>;
+  Number: React.FC<NumberProps>;
+  Email: React.FC<EmailProps>;
+  Search: React.FC<SearchProps>;
+  Checkbox: React.FC<CheckboxProps>;
+  Radio: React.FC<RadioProps>;
+  Range: React.FC<RangeProps>;
+  Time: React.FC<TimeProps>;
+  File: React.FC<FileProps>;
+  Color: React.FC<ColorProps>;
+  Password: React.FC<PasswordProps>;
+  PhoneNumber: React.FC<PhoneNumberProps>;
+  Secret: React.FC<SecretProps>;
+  Pin: React.FC<PinProps>;
+  Textarea: React.FC<TextareaProps>;
+  Select: React.FC<SelectProps>;
+  MultipleSelect: React.FC<MultipleSelectProps>;
+  Autocomplete: React.FC<AutocompleteProps>;
+}
+
+export const Form: FormComponent = ({ children, onSubmit, ...rest }) => {
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit!(e);
+      }}
+      {...rest}
+    >
+      {children}
+    </form>
+  );
+};
+
+Form.Text = Text;
+Form.Number = Number;
+Form.Email = Email;
+Form.Search = Search;
+Form.Checkbox = Checkbox;
+Form.Radio = Radio;
+Form.Range = Range;
+Form.Time = Time;
+Form.File = File;
+Form.Color = Color;
+Form.Password = Password;
+Form.PhoneNumber = PhoneNumber;
+Form.Secret = Secret;
+Form.Pin = Pin;
+Form.Textarea = Textarea;
+Form.Select = Select;
+Form.MultipleSelect = MultipleSelect;
+Form.Autocomplete = Autocomplete;

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

@@ -0,0 +1,49 @@
+"use client";
+import React from "react";
+
+export interface CheckboxProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  options?: {
+    disableHover?: boolean;
+  };
+  label?: string;
+  theme?: string;
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+  options,
+  label,
+  theme,
+  ...rest
+}) => {
+  return (
+    <label
+      className={`flex items-center w-fit ${
+        !rest.disabled && "cursor-pointer"
+      } ${!options?.disableHover ? "gap-2" : "gap-4"}`}
+    >
+      <div
+        className={`flex justify-center items-center ${
+          !options?.disableHover &&
+          "w-8 h-8 rounded-full hover:bg-secondary-light"
+        }`}
+      >
+        <input
+          type="checkbox"
+          className={`border-default border rounded bg-secondary-bg cursor-pointer checked:bg-primary focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:bg-secondary-light disabled:checked:bg-secondary-dark disabled:cursor-default ${
+            theme && "border-0"
+          }`}
+          style={{ backgroundColor: theme }}
+          {...rest}
+        />
+      </div>
+      {label && (
+        <span
+          className={`text-sm select-none ${rest.disabled && "text-slate-400"}`}
+        >
+          {label}
+        </span>
+      )}
+    </label>
+  );
+};

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

@@ -0,0 +1,104 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Icon } from "@iconify/react";
+
+export interface ColorProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  options?: {
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+  };
+  label?: string;
+  onClipboardClick?: (value: string) => void;
+}
+
+export const Color: React.FC<ColorProps> = ({
+  options,
+  label,
+  onClipboardClick,
+  ...rest
+}) => {
+  const [tempValue, setTempValue] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const width = options?.width === "fit" ? "w-fit" : "w-full";
+  const height =
+    options?.height === "short"
+      ? "py-1"
+      : options?.height === "high"
+      ? "py-2"
+      : "py-1.5";
+
+  useEffect(() => {
+    if (rest.value) {
+      setTempValue(rest.value as string);
+      return;
+    } else if (rest.defaultValue) {
+      setTempValue(rest.defaultValue as string);
+      return;
+    }
+  }, [rest.value, rest.defaultValue]);
+
+  useEffect(() => {
+    rest.onChange &&
+      rest.onChange({
+        target: { value: tempValue } as HTMLInputElement,
+      } as React.ChangeEvent<HTMLInputElement>);
+  }, [tempValue]);
+
+  return (
+    <label className={`grid gap-2 ${width}`}>
+      {label && (
+        <span
+          className={`text-sm select-none ${
+            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
+          }`}
+        >
+          {label}
+        </span>
+      )}
+      <div className="flex gap-4">
+        <div className="relative flex flex-col">
+          <button
+            type="button"
+            className={`h-full px-4 border-default border rounded-md text-slate-400 cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+            style={{ backgroundColor: tempValue }}
+            onClick={() => {
+              inputRef.current?.click();
+            }}
+          >
+            <Icon
+              icon="mingcute:color-picker-line"
+              className={`text-xl ${tempValue && "invisible"}`}
+            />
+          </button>
+          <input
+            ref={inputRef}
+            type="color"
+            className="absolute -bottom-2.5 -z-10"
+            value={tempValue}
+            onChange={(e) => setTempValue(e.target.value.toUpperCase())}
+            {...rest}
+          />
+        </div>
+        <div className="relative flex-1 flex items-center">
+          <input
+            type="text"
+            className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+            placeholder={rest.placeholder}
+            value={tempValue}
+            onChange={(e) => setTempValue(e.target.value.toUpperCase())}
+          />
+          <div
+            className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            onClick={(e) => {
+              e.preventDefault();
+              onClipboardClick && onClipboardClick(tempValue);
+            }}
+          >
+            <Icon icon="fluent:clipboard-text-ltr-32-regular" />
+          </div>
+        </div>
+      </div>
+    </label>
+  );
+};

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

@@ -0,0 +1,40 @@
+"use client";
+import React from "react";
+
+export interface EmailProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  options?: {
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+  };
+  label?: string;
+}
+
+export const Email: React.FC<EmailProps> = ({ options, label, ...rest }) => {
+  const width = options?.width === "fit" ? "w-fit" : "w-full";
+  const height =
+    options?.height === "short"
+      ? "py-1"
+      : options?.height === "high"
+      ? "py-2"
+      : "py-1.5";
+
+  return (
+    <label className={`grid gap-2 ${width}`}>
+      {label && (
+        <span
+          className={`text-sm select-none ${
+            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
+          }`}
+        >
+          {label}
+        </span>
+      )}
+      <input
+        type="email"
+        className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+        {...rest}
+      />
+    </label>
+  );
+};

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

@@ -0,0 +1,189 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Icon } from "@iconify/react";
+
+export interface FileProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  options?: {
+    variant?: "simple" | "drag&drop";
+    buttonOnly?: boolean;
+    maxFileSize?: number;
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+  };
+  label?: string;
+  files?: any;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const File: React.FC<FileProps> = ({
+  options,
+  label,
+  files,
+  onChange,
+  ...rest
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [tempValue, setTempValue] = useState<any>();
+  const width = options?.width === "fit" ? "w-fit" : "w-full";
+  const height =
+    options?.height === "short"
+      ? "py-1"
+      : options?.height === "high"
+      ? "py-2"
+      : "py-1.5";
+
+  useEffect(() => {
+    if (files) {
+      setTempValue(files);
+      return;
+    }
+  }, [files]);
+
+  useEffect(() => {
+    onChange &&
+      onChange({
+        target: { files: tempValue } as any,
+      } as React.ChangeEvent<HTMLInputElement>);
+  }, [tempValue]);
+
+  return (
+    <div
+      className={`grid gap-2 ${width}`}
+      onClick={() => {
+        inputRef.current?.click();
+      }}
+    >
+      {label && (
+        <span
+          className={`text-sm select-none ${
+            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
+          }`}
+        >
+          {label}
+        </span>
+      )}
+      {options?.variant !== "drag&drop" ? (
+        <div className="w-full flex items-center gap-4">
+          <button
+            type="button"
+            className="p-2 rounded-full hover:bg-secondary-light"
+            disabled={rest.disabled}
+          >
+            <Icon icon="mi:attachment" className="text-xl" />
+          </button>
+          {!options?.buttonOnly && (
+            <input
+              type="text"
+              className={`flex-1 px-4 border-default border rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 disabled:cursor-default ${height}`}
+              placeholder={rest.placeholder}
+              disabled={rest.disabled}
+              value={
+                tempValue
+                  ? `${tempValue?.name} (${
+                      tempValue?.size < 1000000
+                        ? `${tempValue?.size / 1000} KB`
+                        : `${tempValue?.size / 1000000} MB`
+                    })`
+                  : ""
+              }
+            />
+          )}
+        </div>
+      ) : (
+        <button
+          type="button"
+          className="relative flex flex-col justify-center items-center gap-8 w-full min-h-60 h-full px-4 py-1.5 border border-dashed rounded-md bg-secondary-bg disabled:bg-secondary-light"
+          onDragEnter={(e) => {
+            if (!rest.disabled) {
+              e.preventDefault();
+              e.stopPropagation();
+              e.currentTarget.classList.add(
+                "border-primary",
+                "bg-secondary-light"
+              );
+            }
+          }}
+          onDragLeave={(e) => {
+            if (!rest.disabled) {
+              e.preventDefault();
+              e.stopPropagation();
+              e.currentTarget.classList.remove(
+                "border-primary",
+                "bg-secondary-light"
+              );
+            }
+          }}
+          onDragOver={(e) => {
+            if (!rest.disabled) {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          }}
+          onDrop={(e) => {
+            if (!rest.disabled) {
+              e.preventDefault();
+              e.stopPropagation();
+              e.currentTarget.classList.remove(
+                "border-primary",
+                "bg-secondary-light"
+              );
+              setTempValue(e.dataTransfer.files[0]);
+            }
+          }}
+          disabled={rest.disabled}
+        >
+          <Icon
+            icon={tempValue ? "mdi:file-outline" : "mynaui:upload"}
+            className={`text-5xl pointer-events-none ${
+              tempValue ? "" : "text-slate-400"
+            }`}
+          />
+          <div className="flex flex-col gap-2 items-center pointer-events-none">
+            {tempValue ? (
+              <span>{tempValue?.name}</span>
+            ) : (
+              <div className="flex gap-2 text-slate-400">
+                <span className="underline underline-offset-2">
+                  Click to upload
+                </span>
+                <span>or drag and drop</span>
+              </div>
+            )}
+            <span
+              className={`text-sm font-light ${
+                tempValue ? "" : "text-slate-400"
+              }`}
+            >
+              {tempValue
+                ? `${
+                    tempValue?.size < 1000000
+                      ? `${tempValue?.size / 1000} KB`
+                      : `${tempValue?.size / 1000000} MB`
+                  }`
+                : `Maximum file size ${options?.maxFileSize} MB`}
+            </span>
+          </div>
+          {tempValue && (
+            <div
+              className="absolute top-4 right-4 p-1 rounded-full hover:bg-secondary-light"
+              onClick={() => {
+                setTempValue(null);
+              }}
+            >
+              <Icon icon="pajamas:close" />
+            </div>
+          )}
+        </button>
+      )}
+      <input
+        ref={inputRef}
+        type="file"
+        className="hidden"
+        onChange={(e) => {
+          setTempValue(e.target.files![0]);
+        }}
+        {...rest}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,93 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { Icon } from "@iconify/react";
+
+export interface NumberProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  options?: {
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+  };
+  label?: string;
+}
+
+export const Number: React.FC<NumberProps> = ({ options, label, ...rest }) => {
+  const [tempValue, setTempValue] = useState("");
+  const width = options?.width === "fit" ? "w-fit" : "w-full";
+  const height =
+    options?.height === "short"
+      ? "py-1"
+      : options?.height === "high"
+      ? "py-2"
+      : "py-1.5";
+
+  useEffect(() => {
+    if (rest.value) {
+      setTempValue(rest.value as string);
+      return;
+    } else if (rest.defaultValue) {
+      setTempValue(rest.defaultValue as string);
+      return;
+    }
+  }, [rest.value, rest.defaultValue]);
+
+  useEffect(() => {
+    rest.onChange &&
+      rest.onChange({
+        target: { value: tempValue } as HTMLInputElement,
+      } as React.ChangeEvent<HTMLInputElement>);
+  }, [tempValue]);
+
+  return (
+    <label className={`grid gap-2 ${width}`}>
+      {label && (
+        <span
+          className={`text-sm select-none ${
+            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
+          }`}
+        >
+          {label}
+        </span>
+      )}
+      <div className="relative flex items-center">
+        <input
+          type="number"
+          className={`w-full px-4 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+          value={tempValue}
+          onChange={(e) => setTempValue(e.target.value)}
+          {...rest}
+        />
+        <div className="absolute right-4 flex gap-2">
+          <button
+            type="button"
+            className="p-0.5 rounded-md shadow bg-primary-transparent hover:bg-primary-light text-primary disabled:bg-secondary disabled:text-white"
+            disabled={rest.disabled}
+            onClick={() => {
+              setTempValue(
+                (
+                  (parseInt(tempValue) || 0) - ((rest.step as number) || 1)
+                ).toString()
+              );
+            }}
+          >
+            <Icon icon="ic:round-minus" className="text-lg" />
+          </button>
+          <button
+            type="button"
+            className="p-0.5 rounded-md shadow bg-primary-transparent hover:bg-primary-light text-primary disabled:bg-secondary disabled:text-white"
+            disabled={rest.disabled}
+            onClick={() => {
+              setTempValue(
+                (
+                  (parseInt(tempValue) || 0) + ((rest.step as number) || 1)
+                ).toString()
+              );
+            }}
+          >
+            <Icon icon="ic:round-plus" className="text-lg" />
+          </button>
+        </div>
+      </div>
+    </label>
+  );
+};