@js-empire/emperor-ui 1.3.11 → 1.3.12

package/src/components/organisms/header/stories/header.stories.tsx

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Brand, Header, NavBar } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { FAKE_PARAGRAPH } from "@/constants";
+import { MOCK_HEADER_ITEMS } from "@/mocks";
+import { HeaderProps } from "@/types";
+
+const meta: Meta<typeof Header> = {
+  title: "Organisms/Header",
+  component: Header,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({}),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const GLASS_EFFECT_CONFIG = {
+  enabled: true,
+  blur: 10,
+  backgroundColor: "#006fed",
+  foregroundColor: "#fff",
+  opacity: 40,
+};
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Floating: Story = {
+  args: {
+    variant: "floating",
+  },
+  render: (args: HeaderProps) => {
+    return (
+      <div>
+        <Header {...args} />
+
+        <main className="w-full container mx-auto p-5 pt-24 flex flex-col gap-6">
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+        </main>
+      </div>
+    );
+  },
+};
+
+export const Light: Story = {
+  args: {
+    variant: "light",
+  },
+};
+
+export const WithGlassEffect: Story = {
+  args: {
+    variant: "floating",
+    glassEffect: GLASS_EFFECT_CONFIG,
+  },
+  render: (args) => {
+    return (
+      <div>
+        <Header {...args} />
+
+        <main className="w-full container mx-auto p-5 pt-24 flex flex-col gap-6">
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+        </main>
+      </div>
+    );
+  },
+};
+
+export const SegmentedFloating: Story = {
+  args: {
+    variant: "segmented-floating",
+  },
+  render: (args) => {
+    return (
+      <div>
+        <Header {...args}>
+          <Brand />
+
+          <NavBar
+            items={MOCK_HEADER_ITEMS}
+            hoverEffect="none"
+            variant="default"
+            className="hidden md:flex"
+            subItemsColumns={4}
+          />
+        </Header>
+
+        <main className="w-full container mx-auto p-5 pt-24 flex flex-col gap-6">
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+        </main>
+      </div>
+    );
+  },
+};
+
+export const SegmentedFloatingWithGlassEffect: Story = {
+  args: {
+    variant: "segmented-floating",
+    glassEffect: GLASS_EFFECT_CONFIG,
+  },
+  render: (args) => {
+    return (
+      <div>
+        <Header {...args}>
+          <Brand />
+
+          <NavBar
+            items={MOCK_HEADER_ITEMS}
+            hoverEffect="none"
+            variant="default"
+            className="hidden md:flex"
+            subItemsColumns={4}
+          />
+        </Header>
+
+        <main className="w-full container mx-auto p-5 pt-24 flex flex-col gap-6">
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+          <p>{FAKE_PARAGRAPH}</p>
+        </main>
+      </div>
+    );
+  },
+};

package/src/components/organisms/header/styles/classes.ts

@@ -0,0 +1,22 @@
+import { cva } from "class-variance-authority";
+
+export const headerClasses = cva(
+  ["flex min-h-16 items-center justify-between gap-4 px-6 w-full"],
+  {
+    variants: {
+      variant: {
+        default: ["flex-nowrap w-full"],
+        floating: [
+          "fixed min-h-14 w-[90vw] rounded-full shadow-lg",
+          "top-3 left-1/2 -translate-x-1/2 z-10",
+        ],
+        light: [],
+        "segmented-floating": [
+          "fixed min-h-12 w-[90vw] top-3 left-1/2 -translate-x-1/2 z-10",
+        ],
+      },
+    },
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);

package/src/components/organisms/header/styles/index.ts

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

package/src/components/organisms/header/styles/styles.ts

@@ -0,0 +1,39 @@
+import { CSSProperties } from "react";
+import { HeaderGlassEffect, HeaderStylesProps } from "@/types";
+
+export const getGlassEffectStyles = ({
+  glassEffect,
+}: {
+  glassEffect: HeaderGlassEffect;
+}): CSSProperties => ({
+  backgroundColor: glassEffect?.backgroundColor
+    ? `${glassEffect?.backgroundColor}${glassEffect?.opacity ?? 30}`
+    : "transparent",
+  backdropFilter: `blur(${glassEffect?.blur ?? 0}px)`,
+  color: glassEffect?.foregroundColor,
+});
+
+export const headerStyles = ({
+  primaryColor,
+  foregroundColor,
+  variant,
+  glassEffect,
+}: HeaderStylesProps): CSSProperties => {
+  if (glassEffect?.enabled && variant !== "segmented-floating") {
+    return getGlassEffectStyles({
+      glassEffect: {
+        ...glassEffect,
+        foregroundColor: glassEffect?.foregroundColor ?? foregroundColor,
+      },
+    });
+  }
+
+  if (["default", "floating"].includes(variant ?? "")) {
+    return {
+      backgroundColor: primaryColor,
+      color: foregroundColor,
+    };
+  }
+
+  return {};
+};

package/src/components/organisms/index.ts

@@ -0,0 +1,6 @@
+export * from "./deletion-confirmor";
+export * from "./item-details";
+export * from "./listings";
+export * from "./footer";
+export * from "./header";
+export * from "./form-builder";

package/src/components/organisms/item-details/index.ts

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

package/src/components/organisms/item-details/item-details.tsx

@@ -0,0 +1,6 @@
+import type { ItemDetailsProps } from "@/types";
+import { cn } from "@/utils";
+
+export function ItemDetails({ className }: ItemDetailsProps) {
+  return <div className={cn("", className)}>ItemDetails Component</div>;
+}

package/src/components/organisms/listings/empty-listings.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { Locale } from "@/i18n";
+import { Inbox } from "lucide-react";
+import { motion } from "framer-motion";
+import { cn } from "@/utils";
+import { emptyListingsClasses } from "@/components";
+import { useEmperorUI } from "@/hooks";
+import { blinkContainer, blinkItem, floating } from "@/animations";
+
+export function EmptyListings({
+  className,
+  classNames,
+}: {
+  className?: string;
+  classNames?: {
+    wrapper?: string;
+    iconWrapper?: string;
+    title?: string;
+    description?: string;
+  };
+}) {
+  const { config } = useEmperorUI();
+
+  const locales = config?.interLocalization?.locales;
+  const lang = config?.interLocalization?.lang;
+
+  const locale = locales?.[lang || "en"] as Locale;
+  const listingsLocale = locale?.organisms?.listings;
+
+  return (
+    <motion.div
+      data-slot="emperor-ui-empty-listings"
+      className={cn(emptyListingsClasses(), className)}
+      variants={blinkContainer}
+      initial="hidden"
+      animate="visible"
+    >
+      <motion.div
+        className={cn(
+          "flex items-center justify-center rounded-2xl bg-default-100/80 p-6 mb-5",
+          classNames?.iconWrapper,
+        )}
+        variants={blinkItem}
+      >
+        <motion.div
+          variants={floating}
+          animate="animate"
+          className="flex items-center justify-center"
+        >
+          <Inbox
+            className="size-14 text-default-400"
+            strokeWidth={1.25}
+            aria-hidden
+          />
+        </motion.div>
+      </motion.div>
+
+      <motion.h2
+        className={cn(
+          "text-xl font-semibold text-foreground mb-2",
+          classNames?.title,
+        )}
+        variants={blinkItem}
+      >
+        {listingsLocale?.emptyTitle}
+      </motion.h2>
+
+      <motion.p
+        className={cn(
+          "text-sm text-default-500 max-w-sm",
+          classNames?.description,
+        )}
+        variants={blinkItem}
+      >
+        {listingsLocale?.emptyDescription}
+      </motion.p>
+    </motion.div>
+  );
+}

package/src/components/organisms/listings/index.ts

@@ -0,0 +1,3 @@
+export * from "./listings";
+export * from "./empty-listings";
+export * from "./styles";

package/src/components/organisms/listings/listings.tsx

@@ -0,0 +1,96 @@
+import { EmptyListings, ItemCard, LoadingItem } from "@/components";
+import type { ItemCardOrientation, ListingsProps } from "@/types";
+import { cn } from "@/utils";
+import {
+  listingsClasses,
+  listingsItemClasses,
+  listingsPaginationClasses,
+  listingsStyles,
+} from "./styles";
+import { Pagination } from "@heroui/pagination";
+import { motion } from "framer-motion";
+
+export function Listings({
+  items = [],
+  isLoading = false,
+  className,
+  classNames,
+  layout = "grid",
+  actions = [],
+  onActionClick,
+  pagination,
+}: ListingsProps) {
+  const orientation: ItemCardOrientation = {
+    grid: "vertical",
+    list: "horizontal",
+    carousel: "vertical",
+  }[layout] as ItemCardOrientation;
+
+  const isEmpty = items?.length === 0;
+
+  return (
+    <motion.section
+      data-slot="emperor-ui-listings"
+      className={cn(listingsClasses({ className, layout }))}
+      style={listingsStyles({ layout })}
+      initial="hidden"
+      animate="visible"
+    >
+      {isLoading &&
+        Array.from({ length: pagination?.pageSize || 12 }).map((_, index) => (
+          <LoadingItem
+            key={index}
+            className={className}
+            classNames={classNames}
+            orientation={orientation}
+          />
+        ))}
+
+      {!isLoading && isEmpty && <EmptyListings className="col-span-full" />}
+
+      {!isLoading &&
+        !isEmpty &&
+        items?.map(
+          ({
+            item,
+            actions: itemActions,
+            onActionClick: onItemActionClick,
+          }) => (
+            <ItemCard
+              key={item?.key}
+              className={cn(listingsItemClasses({ layout }), classNames?.item)}
+              item={item}
+              isLoading={isLoading}
+              actions={itemActions || actions || []}
+              onActionClick={onItemActionClick || onActionClick}
+              orientation={orientation}
+            />
+          ),
+        )}
+
+      {!isLoading && !isEmpty && pagination && (
+        <Pagination
+          className={cn(
+            listingsPaginationClasses({ layout }),
+            classNames?.pagination,
+          )}
+          classNames={{
+            next: "rtl:rotate-180 cursor-pointer",
+            prev: "rtl:rotate-180 cursor-pointer",
+            item: "cursor-pointer",
+            chevronNext: "rtl:rotate-180 cursor-pointer",
+            forwardIcon: "rtl:rotate-180 cursor-pointer",
+          }}
+          total={pagination?.pagesCount}
+          page={pagination?.page}
+          onChange={pagination?.setPage}
+          variant="faded"
+          showControls
+          color="primary"
+          initialPage={1}
+          showShadow
+        />
+      )}
+    </motion.section>
+  );
+}

package/src/components/organisms/listings/stories/grid-listings.stories.tsx

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Listings } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { getListings, MOCK_LISTINGS } from "@/mocks";
+import type { MockItemType } from "@/mocks";
+import { useMemo, useState } from "react";
+import { useEffect } from "react";
+import { usePagination } from "@heroui/pagination";
+
+const meta: Meta<typeof Listings> = {
+  title: "Organisms/Listings/Grid",
+  component: Listings,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    items: MOCK_LISTINGS.map((item) => ({
+      item: {
+        key: String(item.id),
+        title: item?.title,
+        description: item.description,
+        image: { src: item?.image, alt: item?.title },
+      },
+    })),
+  },
+};
+
+export const WithLoading: Story = {
+  args: {},
+  render: () => {
+    const [items, setItems] = useState<MockItemType[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      (async () => {
+        const { items } = await getListings({});
+
+        setItems(items);
+        setIsLoading(false);
+      })();
+    }, []);
+
+    return (
+      <Listings
+        isLoading={isLoading}
+        items={items.map((item) => ({
+          item: {
+            key: String(item.id),
+            title: item?.title,
+            description: item.description,
+            image: { src: item?.image, alt: item?.title },
+          },
+        }))}
+      />
+    );
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    items: MOCK_LISTINGS.map((item) => ({
+      item: {
+        key: String(item.id),
+        title: item?.title,
+        description: item.description,
+        image: { src: item?.image, alt: item?.title },
+      },
+      actions: [
+        { key: "view", label: "View details" },
+        { key: "edit", label: "Edit" },
+        { key: "delete", label: "Delete" },
+      ],
+    })),
+  },
+};
+
+export const WithPagination: Story = {
+  args: {},
+  render: () => {
+    const [items, setItems] = useState<MockItemType[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    const pageSize = 6;
+    const totalItemsCount = MOCK_LISTINGS.length;
+    const pagesCount = useMemo(
+      () => Math.ceil(totalItemsCount / pageSize),
+      [totalItemsCount, pageSize],
+    );
+
+    const { activePage: page, setPage } = usePagination({
+      total: pagesCount,
+      initialPage: 1,
+    });
+
+    useEffect(() => {
+      (async () => {
+        setIsLoading(true);
+
+        const { items } = await getListings({
+          page,
+          pageSize,
+        });
+
+        setItems(items);
+        setIsLoading(false);
+      })();
+    }, [page]);
+
+    return (
+      <Listings
+        isLoading={isLoading}
+        items={items.map((item) => ({
+          item: {
+            key: String(item.id),
+            title: item?.title,
+            description: item.description,
+            image: { src: item?.image, alt: item?.title },
+            banner: item?.isBestSeller ? "Best Seller" : undefined,
+            chips: item?.categories || [],
+          },
+        }))}
+        pagination={{
+          page,
+          setPage,
+          pageSize,
+          totalItemsCount,
+          pagesCount,
+        }}
+      />
+    );
+  },
+};
+
+export const EmptyListings: Story = {
+  args: {
+    items: [],
+  },
+};