@js-empire/emperor-ui 1.3.6 → 1.3.8

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

@@ -1,144 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,39 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

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

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

@@ -1,6 +0,0 @@
-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

@@ -1,80 +0,0 @@
-"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

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

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

@@ -1,96 +0,0 @@
-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

@@ -1,153 +0,0 @@
-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: [],
-  },
-};