@js-empire/emperor-ui 1.0.1 → 1.2.0

package/dist/src-UW24ZMRV-Ducut0ty.js

@@ -0,0 +1,5 @@
+import { d as a } from "./features-animation-D_Ss-HYx.js";
+var r = a;
+export {
+  r as default
+};

package/eslint.config.js

@@ -10,21 +10,13 @@ import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
   globalIgnores(["dist"]),
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  reactHooks.configs.flat.recommended,
+  reactRefresh.configs.vite,
+  ...storybook.configs["flat/recommended"],
   {
     files: ["**/*.{ts,tsx}"],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-      "eslint:recommended",
-      "plugin:@typescript-eslint/recommended",
-      "plugin:react-hooks/recommended",
-      "plugin:storybook/recommended"
-    ],
-    ignorePatterns: ["dist", ".eslintrc.cjs"],
-    parser: "@typescript-eslint/parser",
-    plugins: ["react-refresh"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
@@ -40,4 +32,3 @@ export default defineConfig([
     },
   },
 ]);
-

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@js-empire/emperor-ui",
   "description": "They provide the atoms, we provide the empire.",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "author": "JS Empire - Mustafa Alhasanat",
   "license": "ISC",
   "type": "module",
@@ -14,7 +14,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/emperor-ui.js",
       "require": "./dist/emperor-ui-umd.cjs"
-    }
+    },
+    "./globals.css": "./dist/globals.css"
   },
   "scripts": {
     "dev": "vite",
@@ -24,7 +25,8 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "prepare": "husky"
   },
   "publishConfig": {
     "access": "public"
@@ -42,16 +44,29 @@
       "main"
     ]
   },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  },
   "dependencies": {
+    "@heroui/react": "^2.8.5",
+    "@heroui/theme": "^2.4.25",
+    "@storybook/react": "^10.1.8",
     "@tailwindcss/vite": "^4.1.17",
+    "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.23.26",
+    "husky": "^9.1.7",
+    "lucide-react": "^0.560.0",
+    "motion": "^12.26.2",
     "prettier": "^3.7.4",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "tailwind-merge": "^3.4.0",
+    "tailwind-scrollbar-hide": "^4.0.0",
     "tailwindcss": "^4.1.17",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
@@ -78,8 +93,5 @@
     "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.15"
-  },
-  "resolutions": {
-    "jackspeak": "2.1.1"
   }
 }

package/src/components/atoms/brand/brand.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Brand } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+
+const meta: Meta<typeof Brand> = {
+  title: "Atoms/Brand",
+  component: Brand,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/atoms/brand/brand.tsx

@@ -0,0 +1,56 @@
+import type { BrandProps } from "@/types";
+import { cn } from "@/utils";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps, forwardRef } from "react";
+import { Row } from "@/components";
+import { brandStyles } from "./styles";
+import { Image } from "@heroui/react";
+
+export const Brand = forwardRef<
+  HTMLElement,
+  ComponentProps<"div"> & VariantProps<typeof brandStyles> & BrandProps
+>(
+  (
+    {
+      className,
+      variant,
+      src = "/images/emperor-ui-logo.png",
+      alt = "Emperor UI",
+      name = "Emperor UI",
+      isIconOnly = false,
+      classNames,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <Row
+        ref={ref}
+        data-slot="emperor-brand"
+        className={cn(
+          brandStyles({ variant, className: cn(className, classNames?.base) }),
+        )}
+        {...props}
+      >
+        {src && (
+          <Image
+            data-slot="emperor-brand-logo"
+            src={src}
+            alt={alt}
+            radius="md"
+            className={cn("min-w-7 min-h-7 size-7", classNames?.logo)}
+          />
+        )}
+
+        {name && !isIconOnly && (
+          <p
+            data-slot="emperor-brand-name"
+            className={cn("font-semibold text-lg", classNames?.name)}
+          >
+            {name}
+          </p>
+        )}
+      </Row>
+    );
+  },
+);

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

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

package/src/components/atoms/brand/styles/classes.ts

@@ -0,0 +1,9 @@
+import { cva } from "class-variance-authority";
+
+export const brandStyles = cva([""], {
+  variants: {
+    variant: {},
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});

package/src/components/atoms/brand/styles/index.ts

@@ -0,0 +1,2 @@
+export * from "./classes";
+export * from "./styles";

package/src/components/atoms/column/column.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Column } from "@/components";
+import type { ColumnProps } from "@/types";
+import { getStorybookDecorators } from "@/utils";
+
+const meta: Meta<typeof Column> = {
+  title: "Atoms/Column",
+  component: Column,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: (args: ColumnProps) => (
+    <Column {...args}>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <div key={index} className="bg-blue-300 p-2 rounded-md">
+          Item {index + 1}
+        </div>
+      ))}
+    </Column>
+  ),
+};

package/src/components/atoms/column/column.tsx

@@ -0,0 +1,21 @@
+import type { ColumnProps } from "@/types";
+import { cn } from "@/utils";
+import { cva, VariantProps } from "class-variance-authority";
+import { forwardRef, ComponentProps } from "react";
+
+const columnStyles = cva(["flex flex-col gap-3"], {
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const Column = forwardRef<
+  HTMLElement,
+  ComponentProps<"section"> & VariantProps<typeof columnStyles> & ColumnProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <section ref={ref} className={cn(columnStyles({ className }))} {...props}>
+      {children}
+    </section>
+  );
+});

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

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

package/src/components/atoms/container/column.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Container } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import type { ContainerProps } from "@/types";
+
+const meta: Meta<typeof Container> = {
+  title: "Atoms/Container",
+  component: Container,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    className: "h-screen flex items-center justify-center",
+  },
+  render: (args: ContainerProps) => (
+    <Container {...args}>
+      <div className="bg-blue-300 p-2 text-center rounded-md w-full h-fit">
+        Responsive contained content
+      </div>
+    </Container>
+  ),
+};

package/src/components/atoms/container/container.tsx

@@ -0,0 +1,28 @@
+import type { ContainerProps } from "@/types";
+import { cn } from "@/utils";
+import { cva, VariantProps } from "class-variance-authority";
+import { forwardRef, ComponentProps } from "react";
+
+const containerStyles = cva(["flex w-full container p-4 mx-auto"], {
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const Container = forwardRef<
+  HTMLElement,
+  ComponentProps<"section"> &
+    VariantProps<typeof containerStyles> &
+    ContainerProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <section
+      ref={ref}
+      data-slot="container"
+      className={cn(containerStyles({ className }))}
+      {...props}
+    >
+      {children}
+    </section>
+  );
+});

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

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

package/src/components/atoms/index.ts

@@ -0,0 +1,6 @@
+export * from "./brand";
+export * from "./column";
+export * from "./container";
+export * from "./row";
+export * from "./portal";
+export * from "./uploader";

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

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

package/src/components/atoms/portal/portal.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Portal } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { FAKE_PARAGRAPH } from "@/constants";
+
+const meta: Meta<typeof Portal> = {
+  title: "Atoms/Portal",
+  component: Portal,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: () => (
+    <main className="h-screen w-full flex flex-col gap-10 p-5">
+      <div id="portal-container" />
+
+      <p>{FAKE_PARAGRAPH}</p>
+      <p>{FAKE_PARAGRAPH}</p>
+      <p>{FAKE_PARAGRAPH}</p>
+
+      <Portal containerId="portal-container">
+        <div className="bg-blue-300 p-2 rounded-md absolute top-5 left-1/2 -translate-x-1/2">
+          <h2>Portal Content</h2>
+        </div>
+      </Portal>
+    </main>
+  ),
+};

package/src/components/atoms/portal/portal.tsx

@@ -0,0 +1,25 @@
+import { PortalProps } from "@/types";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+export function Portal({
+  children,
+  containerId,
+  isVisible = true,
+}: PortalProps) {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const element = document.getElementById(containerId);
+
+    setTimeout(() => {
+      setContainer(element);
+    }, 100);
+  }, [containerId]);
+
+  if (!container || !isVisible) {
+    return null;
+  }
+
+  return createPortal(children, container);
+}

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

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

package/src/components/atoms/row/row.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Row } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import type { RowProps } from "@/types";
+
+const meta: Meta<typeof Row> = {
+  title: "Atoms/Row",
+  component: Row,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: (args: RowProps) => (
+    <Row {...args}>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <div key={index} className="bg-blue-300 p-2 rounded-md">
+          Item {index + 1}
+        </div>
+      ))}
+    </Row>
+  ),
+};

package/src/components/atoms/row/row.tsx

@@ -0,0 +1,26 @@
+import type { RowProps } from "@/types";
+import { cn } from "@/utils";
+import { cva, VariantProps } from "class-variance-authority";
+import { forwardRef, ComponentProps } from "react";
+
+const rowStyles = cva(["flex items-center gap-3"], {
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const Row = forwardRef<
+  HTMLElement,
+  ComponentProps<"section"> & VariantProps<typeof rowStyles> & RowProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <section
+      ref={ref}
+      data-slot="row"
+      className={cn(rowStyles({ className }))}
+      {...props}
+    >
+      {children}
+    </section>
+  );
+});

package/src/components/atoms/uploader/avatar-label.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { Placeholders } from "@/enums";
+import { Avatar, Spinner, cn } from "@heroui/react";
+import { useEmperorUI, useUploaderContext } from "@/hooks";
+import { useState } from "react";
+
+export function AvatarLabel() {
+  const { config } = useEmperorUI();
+  const [draggableMessage, setDraggableMessage] = useState<string | null>(null);
+  const {
+    labelId,
+    classNames,
+    labelContent,
+    isDraggable,
+    onInputChange,
+    avatarLabelContent,
+    placeholderImage,
+    files,
+    isLoading,
+  } = useUploaderContext();
+
+  const locales = config?.interLocalization?.locales;
+  const lang = config?.interLocalization?.lang;
+
+  const locale = locales?.[lang || "en"];
+
+  const handleDrop = (
+    event: React.ChangeEvent<HTMLInputElement> &
+      React.DragEvent<HTMLLabelElement>,
+  ) => {
+    event.preventDefault();
+    if (onInputChange) onInputChange(event);
+  };
+
+  const handleDragOver = (
+    event: React.ChangeEvent<HTMLInputElement> &
+      React.DragEvent<HTMLLabelElement>,
+  ) => {
+    event.preventDefault();
+    setDraggableMessage(locale?.dropHere || "");
+  };
+
+  const handleDragLeave = () => {
+    setDraggableMessage("");
+  };
+
+  if (isLoading)
+    return (
+      <div className={cn("mx-auto", classNames?.label)}>
+        <Spinner className="mx-auto" size="lg" />;
+      </div>
+    );
+
+  return (
+    <label
+      className={cn(
+        "w-full cursor-pointer mx-auto transition-opacity flex flex-col gap-5",
+        draggableMessage && "opacity-60",
+        classNames?.label,
+      )}
+      htmlFor={labelId}
+      onDrop={isDraggable ? handleDrop : () => {}}
+      onDragOver={isDraggable ? handleDragOver : () => {}}
+      onDragLeave={isDraggable ? handleDragLeave : () => {}}
+    >
+      {avatarLabelContent}
+
+      {labelContent || (
+        <Avatar
+          src={
+            files?.[0]?.view ||
+            placeholderImage ||
+            Placeholders.PLACEHOLDER_MALE_AVATAR
+          }
+          alt="avatar"
+          size="lg"
+          className={cn("size-24", classNames?.avatar)}
+        />
+      )}
+    </label>
+  );
+}

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

@@ -0,0 +1,7 @@
+export * from "./uploader";
+export * from "./avatar-label";
+export * from "./upload-file-label";
+export * from "./view-image-modal";
+export * from "./upload-file-listing";
+export * from "./upload-file-error-box";
+export * from "./upload-file-input";