@js-empire/emperor-ui 1.0.1 → 1.1.0

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+pnpm run format
+git add .
+pnpm run lint
+pnpm run build

package/.storybook/main.ts

@@ -4,16 +4,7 @@ import tsconfigPaths from "vite-tsconfig-paths";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@chromatic-com/storybook",
-    "@storybook/addon-vitest",
-    "@storybook/addon-a11y",
-    "@storybook/addon-docs",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
-  ],
+  addons: [],
   framework: {
     name: "@storybook/react-vite",
     options: {},
@@ -22,7 +13,7 @@ const config: StorybookConfig = {
     config.plugins?.push(
       /** @see https://github.com/aleclarson/vite-tsconfig-paths */
       tsconfigPaths({
-        projects: [path.resolve(path.dirname(__dirname), "tsconfig.json")],
+        projects: [path.resolve("..", "tsconfig.json")],
       }),
     );
 

package/.storybook/preview.ts

@@ -1,5 +1,5 @@
 import type { Preview } from "@storybook/react-vite";
-import "../src/index.css";
+import "../src/styles/globals.css";
 
 const preview: Preview = {
   parameters: {

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+
+}

package/README.md

@@ -1 +1,68 @@
-# EmperorUI
+# Emperor UI
+
+![Emperor UI Logo](./public/images/emperor-ui-logo.png)
+
+## Intro
+
+A modular UI library built for React and Nextjs. It depends on HeroUI to implement advanced organisms and pages.
+
+Each one of them has props to control every aspect pf the component, with enabling/disabling the optional features.
+
+---
+
+## Components
+
+### Footer
+
+- copy rights placeholder
+- Quick links
+- Quick form
+- Social buttons with logos
+
+### Item Card
+
+- Image
+- Title
+- Subtitle (for description)
+- Price
+- Drop-down with actions and a dots-icon for opening it
+
+### Listings
+
+- Listing any type of components
+- Pagination or infinite scrolling
+- Specifying the page size
+- View controller: list, grid, carousel (swiper)
+
+### Details page
+
+- Breadcrumbs
+- Image or carousel
+- Title
+- Subtitle
+- Description
+- Price
+
+### Nav-bar
+
+- Navigation buttons using a provided custom router
+- Auto-controlled position: at the top for desktop, or at the bottom for mobile view
+
+### Filter
+
+- Filter layouts: side box on desktop, drawer on mobile
+- Custom filter items with different types:
+  - search term
+  - checkbox
+  - Multiple checkboxes under an accordion
+  - autocomplete or select box
+- Action buttons: apply filters, reset filters
+
+---
+
+## Documentation Page
+
+- Introducing the tool and its usage
+- Installation guide
+- Components with usage and code variants
+- Components API

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.1.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"
@@ -43,15 +45,25 @@
     ]
   },
   "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",

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+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,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Column } from "@components";
+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) => (
+    <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,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Container } from "@components";
+import { getStorybookDecorators } from "@utils";
+
+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) => (
+    <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";
+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,23 @@
+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);
+
+    setContainer(element);
+  }, [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,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Row } from "@components";
+import { getStorybookDecorators } from "@utils";
+
+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) => (
+    <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";