@js-empire/emperor-ui 1.1.0 → 1.2.0

package/src/components/molecules/side-bar/side-bar-drawer.tsx

@@ -1,4 +1,4 @@
-import { useEmperorUI } from "@hooks";
+import { useEmperorUI } from "@/hooks";
 import { useState } from "react";
 import {
   Button,
@@ -10,8 +10,8 @@ import {
   Divider,
   DrawerFooter,
 } from "@heroui/react";
-import { SideBarProps } from "@types";
-import { cn } from "@utils";
+import { SideBarProps } from "@/types";
+import { cn } from "@/utils";
 import { sideBarItemClasses, sideBarItemStyles } from "./styles";
 
 export const SideBarDrawer = ({

package/src/components/molecules/side-bar/side-bar.stories.tsx

@@ -1,9 +1,10 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Brand, SideBar } from "@components";
-import { getStorybookDecorators } from "@utils";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Brand, SideBar } from "@/components";
+import { getStorybookDecorators } from "@/utils";
 import { MenuIcon } from "lucide-react";
 import { useDisclosure } from "@heroui/react";
-import { MOCK_HEADER_ACTIONS, MOCK_HEADER_ITEMS } from "@mocks";
+import { MOCK_HEADER_ACTIONS, MOCK_HEADER_ITEMS } from "@/mocks";
+import { SideBarProps } from "@/types";
 
 const meta: Meta<typeof SideBar> = {
   title: "Molecules/SideBar",
@@ -33,7 +34,7 @@ export const Default: Story = {
       startContent: <MenuIcon className="size-4" />,
     },
   },
-  render: (args) => {
+  render: (args: SideBarProps) => {
     const { isOpen, onOpenChange } = useDisclosure();
 
     return <SideBar {...args} isOpen={isOpen} onOpenChange={onOpenChange} />;
@@ -48,7 +49,7 @@ export const WithItems: Story = {
       startContent: <MenuIcon className="size-4" />,
     },
   },
-  render: (args) => {
+  render: (args: SideBarProps) => {
     const { isOpen, onOpenChange } = useDisclosure();
 
     return (
@@ -70,7 +71,7 @@ export const WithActions: Story = {
       startContent: <MenuIcon className="size-4" />,
     },
   },
-  render: (args) => {
+  render: (args: SideBarProps) => {
     const { isOpen, onOpenChange } = useDisclosure();
 
     return (
@@ -89,7 +90,7 @@ export const Compact: Story = {
   args: {
     variant: "compact",
   },
-  render: (args) => {
+  render: (args: SideBarProps) => {
     const { isOpen, onOpenChange } = useDisclosure();
 
     return (

package/src/components/molecules/side-bar/side-bar.tsx

@@ -1,8 +1,8 @@
-import { cn } from "@utils";
+import { cn } from "@/utils";
 import { VariantProps } from "class-variance-authority";
 import { forwardRef, ComponentProps } from "react";
 import { sideBarClasses } from "./styles";
-import type { SideBarProps } from "@types";
+import type { SideBarProps } from "@/types";
 import { SideBarDrawer } from "./side-bar-drawer";
 import { CompactSideBar } from "./compact-side-bar";
 

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

@@ -1,4 +1,4 @@
-import { SideBarItemStylesProps } from "@types";
+import { SideBarItemStylesProps } from "@/types";
 import { CSSProperties } from "react";
 
 export const sideBarItemStyles = ({

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

@@ -1,20 +1,75 @@
-import type { FooterProps } from "@types";
-import { cn } from "@utils";
+import type { FooterProps } from "@/types";
+import { cn } from "@/utils";
 import { VariantProps } from "class-variance-authority";
 import { ComponentProps, forwardRef } from "react";
-import { footerClasses, footerStyles } from "./styles";
+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, variant = "default", children, ...props }, ref) => {
-  return (
-    <footer
-      ref={ref}
-      data-slot="emperor-footer"
-      className={cn(footerClasses({ variant, className }))}
-      style={footerStyles({})}
-      {...props}
-    ></footer>
-  );
-});
+>(
+  (
+    {
+      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

@@ -1 +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

@@ -1,15 +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/styles.ts

@@ -1,9 +1,6 @@
 import { CSSProperties } from "react";
 
-
-export const footerStyles = ({
- 
-}: {}): CSSProperties => {
- 
+// 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

@@ -1,12 +1,12 @@
-import { useEmperorUI } from "@hooks";
-import type { HeaderProps, NavBarHoverEffect, NavBarVariant } from "@types";
-import { cn } from "@utils";
+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 { 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 { MOCK_HEADER_ITEMS, MOCK_HEADER_ACTIONS } from "@/mocks";
 import { SegmentedHeaderContent } from "./segmented-header-content";
 
 export const Header = forwardRef<

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

@@ -1,7 +1,7 @@
-import { SegmentedHeaderContentProps } from "@types";
+import { SegmentedHeaderContentProps } from "@/types";
 import { Children } from "react";
-import { Row } from "@components";
-import { useEmperorUI } from "@hooks";
+import { Row } from "@/components";
+import { useEmperorUI } from "@/hooks";
 import { getGlassEffectStyles } from "./styles/styles";
 
 export const SegmentedHeaderContent = ({

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

@@ -1,11 +1,12 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Brand, Header, NavBar } from "@components";
-import { getStorybookDecorators } from "@utils";
-import { FAKE_PARAGRAPH } from "@constants";
-import { MOCK_HEADER_ITEMS } from "@mocks";
+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: "Molecules/Header",
+  title: "Organisms/Header",
   component: Header,
   parameters: {
     layout: "fullscreen",
@@ -34,7 +35,7 @@ export const Floating: Story = {
   args: {
     variant: "floating",
   },
-  render: (args) => {
+  render: (args: HeaderProps) => {
     return (
       <div>
         <Header {...args} />

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

@@ -1,5 +1,5 @@
 import { CSSProperties } from "react";
-import { HeaderGlassEffect, HeaderStylesProps } from "@types";
+import { HeaderGlassEffect, HeaderStylesProps } from "@/types";
 
 export const getGlassEffectStyles = ({
   glassEffect,

package/src/components/organisms/index.ts

@@ -1,4 +1,4 @@
 export * from "./item-details";
 export * from "./listings";
 export * from "./footer";
-export * from "./header";
+export * from "./header";

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

@@ -1,5 +1,5 @@
-import type { ItemDetailsProps } from "src";
-import { cn } from "@utils";
+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/listings.tsx

@@ -1,5 +1,5 @@
-import type { ListingsProps } from "src";
-import { cn } from "@utils";
+import type { ListingsProps } from "@/types";
+import { cn } from "@/utils";
 
 export function Listings({ className }: ListingsProps) {
   return <div className={cn("", className)}>Listings Component</div>;

package/src/components/templates/landing-page/landing-page.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { LandingPage } from "@components";
-import { getStorybookDecorators } from "@utils";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LandingPage } from "@/components";
+import { getStorybookDecorators } from "@/utils";
 
 const meta: Meta<typeof LandingPage> = {
   title: "Templates/LandingPage",

package/src/components/templates/landing-page/landing-page.tsx

@@ -1,11 +1,11 @@
 import { forwardRef, ComponentProps } from "react";
 import { VariantProps } from "class-variance-authority";
-import { cn } from "@utils";
-import { LandingPageProps } from "@types";
+import { cn } from "@/utils";
+import { LandingPageProps } from "@/types";
 import { landingPageClasses } from "./styles";
-import { Brand, Header, NavBar } from "@components";
-import { MOCK_HEADER_ITEMS_WITH_SUB_ITEMS } from "@mocks";
-import { FAKE_PARAGRAPH } from "@constants";
+import { Brand, Header, NavBar } from "@/components";
+import { MOCK_HEADER_ITEMS_WITH_SUB_ITEMS } from "@/mocks";
+import { FAKE_PARAGRAPH } from "@/constants";
 
 const GLASS_EFFECT_CONFIG = {
   enabled: true,

package/src/constants/defaults.ts

@@ -1,4 +1,4 @@
-import type { ColorsPalette, EmperorUIConfig } from "@types";
+import type { ColorsPalette, EmperorUIConfig } from "@/types";
 
 export const defaultColorsPalette: ColorsPalette = {
   primary: "#006FEE",

package/src/constants/fake.ts

@@ -1,2 +1,5 @@
+export const FAKE_SENTENCE =
+  "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.";
+
 export const FAKE_PARAGRAPH =
   "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,";