@js-empire/emperor-ui 1.0.1 → 1.2.0

package/src/components/molecules/side-bar/styles/styles.ts

@@ -0,0 +1,13 @@
+import { SideBarItemStylesProps } from "@/types";
+import { CSSProperties } from "react";
+
+export const sideBarItemStyles = ({
+  foregroundColor,
+  primaryColor,
+  isHovered,
+}: SideBarItemStylesProps): CSSProperties => {
+  return {
+    color: isHovered ? foregroundColor : "inherit",
+    backgroundColor: isHovered ? primaryColor : "transparent",
+  };
+};

package/src/components/organisms/footer/copy-rights-box.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@heroui/react";
+import { FooterProps } from "@/types";
+import { copyRightsClasses } from "./styles";
+
+export function CopyRightsBox({ copyRights, classNames }: FooterProps) {
+  return (
+    <section
+      data-slot="emperor-footer-policies"
+      className={cn(
+        copyRightsClasses({
+          className: cn(classNames?.copyRightsWrapper),
+        }),
+      )}
+    >
+      <p
+        className={cn(
+          "flex items-center gap-1 text-sm text-gray-400 text-center",
+          classNames?.copyRightsText,
+        )}
+      >
+        <span>©</span>
+        <span>{copyRights?.year}</span>
+        <span>{copyRights?.text}</span>
+      </p>
+    </section>
+  );
+}

package/src/components/organisms/footer/footer.tsx

@@ -0,0 +1,75 @@
+import type { FooterProps } from "@/types";
+import { cn } from "@/utils";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps, forwardRef } from "react";
+import { contentClasses, footerClasses, footerStyles } from "./styles";
+import {
+  PoliciesBox,
+  QuickLinksBox,
+  SocialLinksBox,
+  CopyRightsBox,
+} from "@/components";
+import { Divider } from "@heroui/react";
+
+export const Footer = forwardRef<
+  HTMLElement,
+  ComponentProps<"footer"> & VariantProps<typeof footerClasses> & FooterProps
+>(
+  (
+    {
+      className,
+      classNames,
+      policies,
+      copyRights,
+      socialLinks,
+      contacts,
+      quickLinks,
+      variant = "default",
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <footer
+        ref={ref}
+        data-slot="emperor-footer"
+        className={cn(
+          footerClasses({
+            variant,
+            className: cn(className, classNames?.base),
+          }),
+        )}
+        style={footerStyles({})}
+        {...props}
+      >
+        <div
+          data-slot="emperor-footer-content"
+          className={cn(
+            contentClasses({
+              className: cn(className, classNames?.content),
+            }),
+          )}
+        >
+          {children}
+        </div>
+
+        <QuickLinksBox quickLinks={quickLinks} classNames={classNames} />
+
+        <Divider className="col-span-full bg-background/30" />
+
+        <div
+          className={cn(
+            "col-span-full flex flex-col gap-4 justify-between items-center w-full",
+            "md:flex-row",
+          )}
+        >
+          <SocialLinksBox socialLinks={socialLinks} classNames={classNames} />
+          <PoliciesBox policies={policies} classNames={classNames} />
+        </div>
+
+        <CopyRightsBox copyRights={copyRights} classNames={classNames} />
+      </footer>
+    );
+  },
+);

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

@@ -0,0 +1,5 @@
+export * from "./footer";
+export * from "./policies-box";
+export * from "./copy-rights-box";
+export * from "./social-links-box";
+export * from "./quick-links-box";

package/src/components/organisms/footer/policies-box.tsx

@@ -0,0 +1,26 @@
+import { cn, Link } from "@heroui/react";
+import { FooterProps } from "@/types";
+import { policiesClasses } from "./styles";
+
+export function PoliciesBox({ policies, classNames }: FooterProps) {
+  return (
+    <section
+      data-slot="emperor-footer-policies"
+      className={cn(
+        policiesClasses({
+          className: cn(classNames?.policiesWrapper),
+        }),
+      )}
+    >
+      {policies?.map((policy) => (
+        <Link
+          key={policy.href}
+          href={policy.href}
+          className={cn(classNames?.policy)}
+        >
+          {policy.label}
+        </Link>
+      ))}
+    </section>
+  );
+}

package/src/components/organisms/footer/quick-links-box.tsx

@@ -0,0 +1,45 @@
+import { cn, Link } from "@heroui/react";
+import { FooterProps } from "@/types";
+import { quickLinksClasses } from "./styles";
+
+export function QuickLinksBox({ quickLinks, classNames }: FooterProps) {
+  return (
+    <section
+      data-slot="emperor-footer-quick-links"
+      className={cn(
+        quickLinksClasses({
+          className: cn(classNames?.quickLinksWrapper),
+        }),
+      )}
+    >
+      {quickLinks?.map(({ links, title }) => (
+        <div
+          key={title}
+          className={cn("flex flex-col gap-4", classNames?.quickLinksItem)}
+        >
+          <h3
+            className={cn("text-lg font-semibold", classNames?.quickLinksTitle)}
+          >
+            {title}
+          </h3>
+
+          <ul className={cn("flex flex-col gap-2", classNames?.quickLinksList)}>
+            {links?.map(({ href, label, isExternal }) => (
+              <Link
+                key={href}
+                href={href}
+                target={isExternal ? "_blank" : "_self"}
+                className={cn(
+                  " text-gray-400 hover:text-white transition-all duration-300 ease-in-out",
+                  classNames?.quickLinksLink,
+                )}
+              >
+                {label}
+              </Link>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </section>
+  );
+}

package/src/components/organisms/footer/social-links-box.tsx

@@ -0,0 +1,32 @@
+import { cn, Link } from "@heroui/react";
+import { FooterProps } from "@/types";
+import { socialLinksClasses } from "./styles";
+
+export function SocialLinksBox({ socialLinks, classNames }: FooterProps) {
+  return (
+    <section
+      data-slot="emperor-footer-social-links"
+      className={cn(
+        socialLinksClasses({
+          className: cn(classNames?.socialLinksWrapper),
+        }),
+      )}
+    >
+      {socialLinks?.map(({ href, icon, label }) => (
+        <Link
+          key={href}
+          href={href}
+          className={cn(
+            "flex items-center gap-2 text-sm text-gray-400 hover:text-white transition-all duration-300 ease-in-out",
+            classNames?.socialLink,
+          )}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {icon}
+          {label}
+        </Link>
+      ))}
+    </section>
+  );
+}

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Brand, Footer } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { FooterProps } from "@/types";
+import {
+  FAKE_PARAGRAPH,
+  FAKE_SENTENCE,
+  quickLinks,
+  policies,
+  copyRights,
+  contacts,
+  socialLinks,
+} from "@/constants";
+import { Button } from "@heroui/react";
+
+const meta: Meta<typeof Footer> = {
+  title: "Organisms/Footer",
+  component: Footer,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({}),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    quickLinks,
+    policies,
+    copyRights,
+    contacts,
+    socialLinks,
+  },
+  render: (args: FooterProps) => {
+    return (
+      <div className="flex flex-col gap-6">
+        <main className="w-full container mx-auto p-5 flex flex-col gap-6">
+          <p>{FAKE_PARAGRAPH}</p>
+        </main>
+
+        <Footer
+          classNames={{
+            content: "p-5 gap-8 items-center md:items-start",
+          }}
+          {...args}
+        >
+          <Brand />
+          <p className="text-center md:text-left">{FAKE_SENTENCE}</p>
+
+          <Button color="primary" className="w-fit">
+            Join now
+          </Button>
+        </Footer>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,71 @@
+import { cva } from "class-variance-authority";
+
+export const footerClasses = cva(
+  [
+    "w-full grid md:grid-cols-[1fr_2fr] gap-4 p-5 min-h-80",
+    "bg-foreground text-background",
+  ],
+  {
+    variants: {
+      variant: {
+        default: [],
+      },
+    },
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);
+
+export const contentClasses = cva(["flex flex-col gap-4"], {
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const policiesClasses = cva(
+  [
+    "col-span-full w-fit flex flex-col items-center gap-4 p-5 text-center",
+    "md:flex-row",
+  ],
+  {
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);
+
+export const socialLinksClasses = cva(
+  ["w-fit flex p-5 gap-4 items-center flex-wrap"],
+  {
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);
+
+export const copyRightsClasses = cva(
+  ["col-span-full w-fit flex p-2 mx-auto text-center"],
+  {
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);
+
+export const contactsClasses = cva([""], {
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const quickLinksClasses = cva(
+  [
+    "grid gap-4 p-5 w-fit mx-auto",
+    "sm:w-full sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
+  ],
+  {
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);

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

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

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

@@ -0,0 +1,6 @@
+import { CSSProperties } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type, no-empty-pattern
+export const footerStyles = ({}: {}): CSSProperties => {
+  return {};
+};

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

@@ -0,0 +1,94 @@
+import { useEmperorUI } from "@/hooks";
+import type { HeaderProps, NavBarHoverEffect, NavBarVariant } from "@/types";
+import { cn } from "@/utils";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps, forwardRef } from "react";
+import { Brand, NavBar, SideBar } from "@/components";
+import { headerClasses, headerStyles } from "./styles";
+import { useDisclosure } from "@heroui/react";
+import { MOCK_HEADER_ITEMS, MOCK_HEADER_ACTIONS } from "@/mocks";
+import { SegmentedHeaderContent } from "./segmented-header-content";
+
+export const Header = forwardRef<
+  HTMLElement,
+  ComponentProps<"header"> & VariantProps<typeof headerClasses> & HeaderProps
+>(
+  (
+    { className, variant = "default", glassEffect, children, ...props },
+    ref,
+  ) => {
+    const { config } = useEmperorUI();
+    const { isOpen, onOpenChange } = useDisclosure();
+
+    const primaryColor = config?.theme?.colors?.primary;
+    const foregroundColor = config?.theme?.colors?.foreground;
+
+    const content = children || (
+      <>
+        <SideBar
+          items={MOCK_HEADER_ITEMS}
+          actions={MOCK_HEADER_ACTIONS}
+          isOpen={isOpen}
+          onOpenChange={onOpenChange}
+          header={<Brand className="text-white" />}
+          triggerProps={{
+            startContent: (
+              <Brand
+                className="text-white"
+                classNames={{
+                  logo: "size-6",
+                }}
+              />
+            ),
+            isIconOnly: false,
+            variant: "light",
+          }}
+        />
+
+        <NavBar
+          className="hidden md:flex mx-auto"
+          items={MOCK_HEADER_ITEMS}
+          hoverEffect={
+            {
+              default: "default",
+              floating: "underline",
+              light: "underline",
+              "segmented-floating": "default",
+            }[variant] as NavBarHoverEffect
+          }
+          variant={
+            {
+              default: "default",
+              floating: "default",
+              light: "default",
+              "segmented-floating": "default",
+            }[variant] as NavBarVariant
+          }
+        />
+      </>
+    );
+
+    return (
+      <header
+        ref={ref}
+        data-slot="emperor-header"
+        className={cn(headerClasses({ variant, className }))}
+        style={headerStyles({
+          primaryColor,
+          foregroundColor,
+          variant,
+          glassEffect,
+        })}
+        {...props}
+      >
+        {variant === "segmented-floating" ? (
+          <SegmentedHeaderContent glassEffect={glassEffect}>
+            {content}
+          </SegmentedHeaderContent>
+        ) : (
+          content
+        )}
+      </header>
+    );
+  },
+);

package/src/components/organisms/header/segmented-header-content.tsx

@@ -0,0 +1,37 @@
+import { SegmentedHeaderContentProps } from "@/types";
+import { Children } from "react";
+import { Row } from "@/components";
+import { useEmperorUI } from "@/hooks";
+import { getGlassEffectStyles } from "./styles/styles";
+
+export const SegmentedHeaderContent = ({
+  children,
+  glassEffect,
+}: SegmentedHeaderContentProps) => {
+  const { config } = useEmperorUI();
+
+  const primaryColor = config?.theme?.colors?.primary;
+  const foregroundColor = config?.theme?.colors?.foreground;
+
+  return (
+    <Row className="w-full min-h-12 justify-between">
+      {Children.toArray(children).map((child, index) => (
+        <Row
+          className="rounded-full min-h-12 px-5"
+          key={index}
+          style={{
+            backgroundColor: primaryColor,
+            color: foregroundColor,
+            ...(glassEffect
+              ? getGlassEffectStyles({
+                  glassEffect,
+                })
+              : {}),
+          }}
+        >
+          {child}
+        </Row>
+      ))}
+    </Row>
+  );
+};

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";