@js-empire/emperor-ui 1.3.10 → 1.3.12

package/src/providers/emperor-ui-provider.tsx

@@ -0,0 +1,35 @@
+import { ConfigProviderProps } from "@/types";
+import { ConfigProvider, NavigationProvider } from "@/providers";
+import { HeroUIProvider } from "@heroui/system";
+import { ToastProvider } from "@heroui/toast";
+import { ThemeProvider } from "next-themes";
+
+type EmperorUIProviderProps = ConfigProviderProps & {};
+
+export function EmperorUIProvider({
+  children,
+  ...props
+}: EmperorUIProviderProps) {
+  return (
+    <ConfigProvider {...props}>
+      <HeroUIProvider>
+        <NavigationProvider>
+          <ThemeProvider>
+            <ToastProvider
+              placement="top-center"
+              toastProps={{
+                radius: "lg",
+                size: "lg",
+                color: "primary",
+                variant: "flat",
+                timeout: 4000,
+              }}
+              {...props?.config?.toast}
+            />
+            {children}
+          </ThemeProvider>
+        </NavigationProvider>
+      </HeroUIProvider>
+    </ConfigProvider>
+  );
+}

package/src/providers/form-builder-provider-context.tsx

@@ -0,0 +1,18 @@
+import type { FieldValues } from "react-hook-form";
+import type { ReactNode } from "react";
+import { FormBuilderValue } from "@/types";
+import { FormBuilderContext } from "@/context";
+
+export function FormBuilderProvider<TSchema extends FieldValues>({
+  children,
+  value,
+}: {
+  children: ReactNode;
+  value: FormBuilderValue<TSchema>;
+}) {
+  return (
+    <FormBuilderContext.Provider value={value as FormBuilderValue<FieldValues>}>
+      {children}
+    </FormBuilderContext.Provider>
+  );
+}

package/src/providers/index.ts

@@ -0,0 +1,6 @@
+export * from "./config-provider";
+export * from "./emperor-ui-provider";
+export * from "./navigation-provider";
+export * from "./uploader-provider";
+export * from "./theme-provider";
+export * from "./form-builder-provider-context";

package/src/providers/navigation-provider.tsx

@@ -0,0 +1,42 @@
+import type {
+  NavigationProviderProps,
+  NavigationContextState,
+  NavigationItem,
+} from "@/types";
+import { useMemo, useState } from "react";
+import { NavigationContext } from "@/context";
+import { PreservedKeys } from "@/enums";
+
+export function NavigationProvider({ children }: NavigationProviderProps) {
+  const [hoveredItemId, setHoveredItemId] = useState<string | null>(null);
+  const [subItems, setSubItems] = useState<NavigationItem[]>([]);
+  const [isSubItemsBoxOpen, setIsSubItemsBoxOpen] = useState(false);
+  const [subItemsBoxIsHovered, setSubItemsBoxIsHovered] = useState(false);
+
+  const navigationProviderValue: NavigationContextState = useMemo(() => {
+    return {
+      hoveredItemId,
+      subItems,
+      isSubItemsBoxOpen,
+      subItemsBoxIsHovered,
+      setHoveredItemId,
+      setSubItems,
+      setIsSubItemsBoxOpen,
+      setSubItemsBoxIsHovered,
+    };
+  }, [hoveredItemId, subItems, isSubItemsBoxOpen, subItemsBoxIsHovered]);
+
+  return (
+    <NavigationContext.Provider
+      value={navigationProviderValue}
+      data-slot="emperor-navigation-provider"
+    >
+      <div
+        id={PreservedKeys.COMPACT_SIDEBAR_ID}
+        data-slot="emperor-compact-sidebar"
+      />
+
+      {children}
+    </NavigationContext.Provider>
+  );
+}

package/src/providers/theme-provider.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ReactNode } from "react";
+
+export type ThemeProviderProps = {
+  children: ReactNode;
+};
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  return (
+    <NextThemesProvider attribute="class" defaultTheme="system" enableSystem>
+      {children}
+    </NextThemesProvider>
+  );
+}

package/src/providers/uploader-provider.tsx

@@ -0,0 +1,53 @@
+import type {
+  UploaderProviderProps,
+  UploaderContextState,
+  FileObject,
+} from "@/types";
+import { useMemo, useState } from "react";
+import { UploaderContext } from "@/context";
+import { useDisclosure } from "@heroui/modal";
+
+export function UploaderProvider({
+  children,
+  ...props
+}: UploaderProviderProps) {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+  const [selectedFile, setSelectedFile] = useState<FileObject | null>(null);
+
+  const isFileViewable = useMemo(
+    () =>
+      !!selectedFile?.view &&
+      !!selectedFile?.file?.name &&
+      selectedFile?.type === "image",
+    [selectedFile],
+  );
+
+  const uploaderProviderValue: UploaderContextState = useMemo(() => {
+    return {
+      isOpen,
+      onOpen,
+      onOpenChange,
+      selectedFile,
+      setSelectedFile,
+      isFileViewable,
+      ...props,
+    };
+  }, [
+    isOpen,
+    isFileViewable,
+    selectedFile,
+    onOpen,
+    onOpenChange,
+    setSelectedFile,
+    props,
+  ]);
+
+  return (
+    <UploaderContext.Provider
+      value={uploaderProviderValue}
+      data-slot="emperor-uploader-provider"
+    >
+      {children}
+    </UploaderContext.Provider>
+  );
+}

package/src/styles/globals.css

@@ -0,0 +1,38 @@
+@import "tailwindcss";
+@plugin './hero.ts';
+@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
+
+/* @custom-variant dark (&:is(.dark *)); */
+
+.scrollbar-hide {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+/* Rounded corners and compact size for native color input swatch */
+.color-swatch {
+  width: 1.25rem;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  cursor: pointer;
+}
+
+.color-swatch::-webkit-color-swatch-wrapper {
+  padding: 0;
+  border-radius: 0.375rem;
+}
+
+.color-swatch::-webkit-color-swatch {
+  border: none;
+  border-radius: 0.375rem;
+}
+
+.color-swatch::-moz-color-swatch {
+  border: none;
+  border-radius: 0.375rem;
+}

package/src/styles/hero.ts

@@ -0,0 +1,3 @@
+import { heroui } from "@heroui/theme";
+
+export default heroui();

package/src/styles/index.css

@@ -0,0 +1,18 @@
+@import "tailwindcss";
+
+:root {
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}

package/src/types/components/atoms/brand.ts

@@ -0,0 +1,13 @@
+import { SharedComponentProps } from "@/types";
+
+export type BrandProps = SharedComponentProps & {
+  src?: string;
+  alt?: string;
+  name?: string;
+  isIconOnly?: boolean;
+  classNames?: {
+    base?: string;
+    logo?: string;
+    name?: string;
+  };
+};

package/src/types/components/atoms/color-picker/color-picker.ts

@@ -0,0 +1,21 @@
+import { InputProps } from "@heroui/input";
+import { SelectProps } from "@heroui/select";
+
+export type ColorPickerInputType = "free" | "preset";
+
+export type ColorPickerProps = Omit<
+  InputProps & SelectProps,
+  | "onChange"
+  | "onValueChange"
+  | "onSelectionChange"
+  | "children"
+  | "selectedKeys"
+  | "defaultSelectedKeys"
+  | "value"
+> & {
+  inputType: ColorPickerInputType;
+  presets?: string[];
+  onChange?: (value: string) => void;
+  value?: string;
+  defaultValue?: string;
+};

package/src/types/components/atoms/color-picker/index.ts

@@ -0,0 +1 @@
+export * from "./color-picker";

package/src/types/components/atoms/column.ts

@@ -0,0 +1,3 @@
+import type { SharedComponentProps } from "@/types";
+
+export type ColumnProps = SharedComponentProps & {};

package/{dist/src/types/components/atoms/container.d.ts → src/types/components/atoms/container.ts}

@@ -1,2 +1,3 @@
-import { SharedComponentProps } from '../..';
+import type { SharedComponentProps } from "@/types";
+
 export type ContainerProps = SharedComponentProps & {};

package/src/types/components/atoms/field/field.ts

@@ -0,0 +1,61 @@
+import type { SharedComponentProps } from "@/types";
+import type {
+  AutocompleteItemProps,
+  AutocompleteProps,
+} from "@heroui/autocomplete";
+import type { CheckboxProps } from "@heroui/checkbox";
+import type { InputProps, TextAreaProps } from "@heroui/input";
+import type { RadioGroupProps } from "@heroui/radio";
+import type { SelectItemProps, SelectProps } from "@heroui/select";
+import type { SwitchProps } from "@heroui/switch";
+import type { FieldValues, Path } from "react-hook-form";
+
+export type FieldClassnames = {
+  base?: string;
+  field?: string;
+};
+
+export type FieldType =
+  | "input"
+  | "textarea"
+  | "checkbox"
+  | "select"
+  | "autocomplete"
+  | "switch"
+  | "radio";
+
+export type FieldOption = {
+  key: string;
+  label: string;
+};
+
+type FieldTypesProps = {
+  inputProps?: InputProps;
+  textareaProps?: TextAreaProps;
+  checkboxProps?: CheckboxProps;
+  selectProps?: Omit<
+    SelectProps,
+    "children" | "selectedKeys" | "onSelectionChange"
+  >;
+  selectItemProps?: SelectItemProps;
+  autocompleteProps?: Omit<
+    AutocompleteProps,
+    "children" | "selectedKey" | "onSelectionChange"
+  >;
+  autocompleteItemProps?: AutocompleteItemProps;
+  switchProps?: SwitchProps;
+  radioGroupProps?: Omit<
+    RadioGroupProps,
+    "children" | "value" | "onValueChange"
+  >;
+};
+
+type SharedFieldProps<TFieldValues extends FieldValues> = {
+  classNames?: FieldClassnames;
+  type: FieldType;
+  name: Path<TFieldValues>;
+  options?: FieldOption[];
+};
+
+export type FieldProps<TFieldValues extends FieldValues = FieldValues> =
+  SharedComponentProps & FieldTypesProps & SharedFieldProps<TFieldValues>;

package/src/types/components/atoms/field/index.ts

@@ -0,0 +1 @@
+export type * from "./field";

package/src/types/components/atoms/filter/filter.ts

@@ -0,0 +1,52 @@
+import type { SelectFilterProps, SharedComponentProps } from "@/types";
+import { AutocompleteItemProps, AutocompleteProps } from "@heroui/autocomplete";
+import { CheckboxGroupProps } from "@heroui/checkbox";
+import { CheckboxProps } from "@heroui/checkbox";
+import { DatePickerProps } from "@heroui/date-picker";
+import { InputProps } from "@heroui/input";
+import { RadioProps } from "@heroui/radio";
+import { SelectItemProps, SelectProps } from "@heroui/select";
+import { SliderProps } from "@heroui/slider";
+import { SwitchProps } from "@heroui/switch";
+
+export type FilterClassnames = {
+  base?: string;
+  field?: string;
+};
+
+export type FilterType =
+  | "search"
+  | "select"
+  | "autocomplete"
+  | "date"
+  | "numeric"
+  | "checkbox"
+  | "checkboxGroup"
+  | "switch"
+  | "range";
+
+type FilterTypesProps = {
+  searchProps?: InputProps;
+  selectProps?: Omit<SelectProps, "children">;
+  selectItemProps?: SelectItemProps;
+  autocompleteProps?: Omit<AutocompleteProps, "children">;
+  autocompleteItemProps?: AutocompleteItemProps;
+  dateProps?: DatePickerProps;
+  numericProps?: InputProps;
+  checkboxProps?: CheckboxProps;
+  checkboxGroupProps?: Omit<CheckboxGroupProps, "children">;
+  radioProps?: RadioProps;
+  switchProps?: SwitchProps;
+  rangeProps?: SliderProps;
+};
+
+type SharedFilterProps = {
+  classNames?: FilterClassnames;
+  type: FilterType;
+  paramKey: string;
+};
+
+export type FilterProps = SharedComponentProps &
+  SelectFilterProps &
+  FilterTypesProps &
+  SharedFilterProps;

package/src/types/components/atoms/filter/index.ts

@@ -0,0 +1,2 @@
+export type * from "./filter";
+export type * from "./select-filter";

package/{dist/src/types/components/atoms/filter/select-filter.d.ts → src/types/components/atoms/filter/select-filter.ts}

@@ -1,7 +1,8 @@
 export type SelectOption = {
-    key: string;
-    label: string;
+  key: string;
+  label: string;
 };
+
 export type SelectFilterProps = {
-    options?: SelectOption[];
+  options?: SelectOption[];
 };

package/src/types/components/atoms/index.ts

@@ -0,0 +1,9 @@
+export * from "./brand";
+export * from "./portal";
+export * from "./uploader";
+export * from "./column";
+export * from "./row";
+export * from "./container";
+export * from "./filter";
+export * from "./field";
+export * from "./color-picker";

package/src/types/components/atoms/portal.ts

@@ -0,0 +1,6 @@
+import { SharedComponentProps } from "@/types";
+
+export type PortalProps = SharedComponentProps & {
+  containerId: string;
+  isVisible?: boolean;
+};

package/src/types/components/atoms/row.ts

@@ -0,0 +1,3 @@
+import type { SharedComponentProps } from "@/types";
+
+export type RowProps = SharedComponentProps & {};

package/src/types/components/atoms/uploader.ts

@@ -0,0 +1,103 @@
+import type { SharedComponentProps } from "@/types";
+import { ModalProps } from "@heroui/modal";
+import { Dispatch, ReactNode, SetStateAction } from "react";
+import type { Locale } from "@/i18n";
+
+export type UploaderProps = SharedComponentProps &
+  UploaderContextState & {
+    className?: string;
+    hideListing?: boolean;
+    isAvatar?: boolean;
+  };
+
+export type FileType = "image" | "doc" | "pdf" | "video" | "sheet";
+
+export type FileObject = {
+  view?: string;
+  type?: FileType;
+  file?: File;
+  url?: string;
+};
+
+export type SharedFilesType = FileObject[];
+
+export type SharedLabelIdType = string;
+
+export type SharedOnInputChangeType = (
+  event: React.ChangeEvent<HTMLInputElement> &
+    React.DragEvent<HTMLLabelElement>,
+) => Promise<void | string | null>;
+
+export type UseUploadFileProps = {
+  labelId: string;
+  fileTypes: FileType[];
+  labelContent?: ReactNode;
+  isRequired?: boolean;
+  isMulti?: boolean;
+  isDraggable?: boolean;
+  maxCount?: number;
+  maxFileSize?: number; // in Kilobytes
+  compressFiles?: boolean;
+  preventDuplicates?: boolean;
+  onChange?: () => void;
+  locales?: Partial<Locale["atoms"]["uploader"]>;
+};
+
+export type UseUploadFileReturn = {
+  files: FileObject[];
+  fileTypes: FileType[];
+  labelId: string;
+  isRequired: boolean;
+  labelContent: ReactNode;
+  isDraggable: boolean;
+  isMulti: boolean;
+  isLoading: boolean;
+  setFiles: Dispatch<SetStateAction<FileObject[]>>;
+  handleClearFile: (fileName?: string) => void;
+  onInputChange: SharedOnInputChangeType;
+  locales?: Partial<Locale["atoms"]["uploader"]>;
+};
+
+export type UploaderContextState = {
+  selectedFile?: FileObject | null;
+  setSelectedFile?: (file: FileObject | null) => void;
+
+  labelId: SharedLabelIdType;
+  labelContent?: ReactNode;
+  avatarLabelContent?: ReactNode;
+  title?: ReactNode;
+  errorMessage?: ReactNode;
+
+  isFileViewable?: boolean;
+  isRequired?: boolean;
+  isDraggable?: boolean;
+  isLoading: boolean;
+  hideErrorMessage?: boolean;
+  isMulti: boolean;
+
+  placeholderImage?: string;
+  files: SharedFilesType;
+  fileTypes: FileType[];
+
+  onInputChange: SharedOnInputChangeType;
+  handleClearFile: (fileName?: string) => void;
+  setFiles?: Dispatch<SetStateAction<FileObject[]>>;
+
+  modal?: Omit<ModalProps, "children"> & {
+    onOpen?: () => void;
+  };
+  classNames?: {
+    label?: string;
+    avatar?: string;
+    listing?: string;
+    listingItem?: string;
+    error?: string;
+    input?: string;
+    title?: string;
+  };
+  locales?: Partial<Locale["atoms"]["uploader"]>;
+};
+
+export type UploaderProviderProps = UploaderContextState & {
+  children: ReactNode;
+};

package/src/types/components/index.ts

@@ -0,0 +1,4 @@
+export type * from "./molecules";
+export type * from "./atoms";
+export type * from "./templates";
+export type * from "./organisms";

package/src/types/components/molecules/footer/footer.ts

@@ -0,0 +1,68 @@
+import type { SharedComponentProps } from "@/types";
+import { ReactNode } from "react";
+
+export type FooterClassnames = {
+  base?: string;
+  content?: string;
+  policiesWrapper?: string;
+  policy?: string;
+  quickLinksWrapper?: string;
+  quickLinksTitle?: string;
+  quickLinksList?: string;
+  quickLinksItem?: string;
+  quickLinksLink?: string;
+  socialLinksWrapper?: string;
+  socialLink?: string;
+  copyRightsWrapper?: string;
+  copyRightsText?: string;
+  contactsWrapper?: string;
+  contact?: string;
+};
+
+export type QuickLink = {
+  label: string;
+  href: string;
+  isExternal?: boolean;
+};
+
+export type QuickLinkCollection = {
+  title?: string;
+  links: QuickLink[];
+};
+
+export type SocialLink = {
+  label?: string;
+  href: string;
+  icon?: ReactNode;
+  isExternal?: boolean;
+};
+
+export type Address = {
+  country?: string;
+  street?: string;
+  city?: string;
+  state?: string;
+  zip?: string;
+};
+
+export type CopyRights = {
+  year: number;
+  text: string;
+};
+
+export type Contacts = {
+  mobile?: string;
+  email?: string;
+  addresses?: Address[];
+  website?: string;
+  workingHours?: string;
+};
+
+export type FooterProps = SharedComponentProps & {
+  classNames?: FooterClassnames;
+  policies?: QuickLink[];
+  quickLinks?: QuickLinkCollection[];
+  socialLinks?: SocialLink[];
+  copyRights?: CopyRights;
+  contacts?: Contacts;
+};

package/src/types/components/molecules/footer/index.ts

@@ -0,0 +1 @@
+export type * from "./footer";

package/src/types/components/molecules/header/header.ts

@@ -0,0 +1,51 @@
+import type { SharedComponentProps } from "@/types";
+
+export type HeaderClassnames = {
+  base?: string;
+  logo?: string;
+  navbar?: string;
+  userDropdown?: string;
+  sideMenu?: string;
+};
+
+export type HeaderActivations = {
+  hideLog?: boolean;
+  hideNavbar?: boolean;
+  hideUserDropdown?: boolean;
+  hideSideMenu?: boolean;
+};
+
+export type HeaderVariant =
+  | "default"
+  | "floating"
+  | "light"
+  | "segmented-floating";
+
+export type HeaderGlassEffect = {
+  enabled?: boolean;
+  blur?: number;
+  backgroundColor?: string;
+  foregroundColor?: string;
+  opacity?: number;
+};
+
+export type HeaderProps = SharedComponentProps & {
+  variant?: HeaderVariant;
+  classNames?: HeaderClassnames;
+  glassEffect?: HeaderGlassEffect;
+};
+
+export type HeaderDropdownProps = SharedComponentProps & {};
+
+export type UserDropdownProps = SharedComponentProps & {};
+
+export type HeaderStylesProps = {
+  primaryColor?: string;
+  foregroundColor?: string;
+  variant?: HeaderVariant;
+  glassEffect?: HeaderGlassEffect;
+};
+
+export type SegmentedHeaderContentProps = SharedComponentProps & {
+  glassEffect?: HeaderGlassEffect;
+};

package/src/types/components/molecules/header/index.ts

@@ -0,0 +1 @@
+export type * from "./header";