@js-empire/emperor-ui 1.3.11 → 1.3.13

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/divider";
+
+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-ui-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,27 @@
+import { cn } from "@/utils";
+import { Link } from "@heroui/link";
+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,46 @@
+import { cn } from "@/utils";
+import { Link } from "@heroui/link";
+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,33 @@
+import { cn } from "@/utils";
+import { Link } from "@heroui/link";
+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/button";
+
+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/form-builder/form-builder.stories.tsx

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Field, FormBuilder } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+
+const meta: Meta<typeof FormBuilder> = {
+  title: "Organisms/Form Builder",
+  component: FormBuilder,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const schema = z.object({
+  fullName: z.string({ error: "Full name is required" }),
+  description: z.string({ error: "Description is required" }),
+  status: z.enum(["active", "inactive"], { error: "Status is required" }),
+  isActive: z.boolean({ error: "Is active is required" }),
+  isAvailable: z.boolean({ error: "Is available is required" }),
+});
+
+type SchemaValues = z.infer<typeof schema>;
+
+export const Default: Story = {
+  render: () => {
+    const [formValues, setFormValues] = useState<Partial<SchemaValues>>({});
+
+    return (
+      <div className="w-full max-w-2xl flex flex-col gap-5">
+        <h3 className="font-bold text-lg">Form Builder</h3>
+
+        <FormBuilder<typeof schema>
+          className="grid grid-cols-2 gap-5 p-4 rounded-md border"
+          formProps={{
+            mode: "all",
+            resolver: zodResolver(schema),
+          }}
+          onValuesChange={setFormValues}
+          onSubmit={() => {
+            alert("Form submitted");
+          }}
+        >
+          <Field
+            type="input"
+            name="fullName"
+            inputProps={{
+              label: "Full Name",
+              placeholder: "Type your name",
+            }}
+          />
+
+          <Field
+            type="select"
+            name="status"
+            options={[
+              { key: "active", label: "Active" },
+              { key: "inactive", label: "Inactive" },
+            ]}
+            selectProps={{
+              label: "Status",
+            }}
+          />
+
+          <Field
+            type="autocomplete"
+            name="tags"
+            options={[
+              { key: "tag1", label: "Tag 1" },
+              { key: "tag2", label: "Tag 2" },
+              { key: "tag3", label: "Tag 3" },
+            ]}
+            autocompleteProps={{
+              label: "Tags",
+              placeholder: "Type your tags",
+            }}
+          />
+
+          <Field type="checkbox" name="isActive">
+            Is Active?
+          </Field>
+
+          <Field type="switch" name="isAvailable">
+            Is Available?
+          </Field>
+
+          <Field
+            type="textarea"
+            name="description"
+            className="col-span-2"
+            textareaProps={{
+              label: "Description",
+              placeholder: "Type your description",
+            }}
+          />
+        </FormBuilder>
+
+        <section className="flex flex-col gap-2 rounded-md border p-4">
+          <h3 className="font-bold text-lg">Summary: </h3>
+
+          <p className="flex items-center gap-2">
+            <span className="font-medium">Full Name:</span>
+            <span className="text-gray-500">{formValues.fullName ?? "—"}</span>
+          </p>
+          <p className="flex items-center gap-2">
+            <span className="font-medium">Description:</span>
+            <span className="text-gray-500">
+              {formValues.description ?? "—"}
+            </span>
+          </p>
+          <p className="flex items-center gap-2">
+            <span className="font-medium">Status:</span>
+            <span className="text-gray-500">{formValues.status ?? "—"}</span>
+          </p>
+          <p className="flex items-center gap-2">
+            <span className="font-medium">Is Active:</span>
+            <span className="text-gray-500">
+              {formValues.isActive ? "Selected" : "Not Selected"}
+            </span>
+          </p>
+          <p className="flex items-center gap-2">
+            <span className="font-medium">Is Available:</span>
+            <span className="text-gray-500">
+              {formValues.isAvailable ? "Selected" : "Not Selected"}
+            </span>
+          </p>
+        </section>
+      </div>
+    );
+  },
+};

package/src/components/organisms/form-builder/form-builder.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { Field } from "@/components";
+import { FormBuilderProvider } from "@/providers";
+import type { FormBuilderProps } from "@/types";
+import { cn } from "@/utils";
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useMemo,
+  type ReactElement,
+} from "react";
+import { useEffect } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import type { ZodType } from "zod";
+import { z } from "zod";
+
+export function FormBuilder<TSchema extends ZodType<any, any, any>>({
+  children,
+  className,
+  classNames,
+  formProps,
+  onSubmit,
+  onSuccess,
+  onError,
+  onValuesChange,
+}: FormBuilderProps<TSchema>) {
+  const { control, handleSubmit } = useForm<z.infer<TSchema>>(formProps);
+
+  const emptyValues = useMemo(() => ({}), []);
+  const formValues = useWatch({ control }) ?? emptyValues;
+
+  const allChildren = Children.toArray(children);
+
+  allChildren.forEach((child) => {
+    if (!isValidElement(child) || child.type !== Field) {
+      throw new Error(
+        "FormBuilder accepts only 'Field' components as children.",
+      );
+    }
+  });
+
+  const formFields = allChildren.map((child) =>
+    cloneElement(child as ReactElement),
+  );
+
+  useEffect(() => {
+    onValuesChange?.(formValues);
+  }, [formValues, onValuesChange]);
+
+  const handleValidSubmit = async (values: z.infer<TSchema>) => {
+    try {
+      await onSubmit(values);
+      onSuccess?.(values);
+    } catch (error) {
+      onError?.(error);
+    }
+  };
+
+  return (
+    <FormBuilderProvider<z.infer<TSchema>> value={{ control, formValues }}>
+      <form
+        className={cn(className, classNames?.base)}
+        onSubmit={handleSubmit(handleValidSubmit, (errors) =>
+          onError?.({
+            errors,
+          }),
+        )}
+      >
+        {formFields}
+      </form>
+    </FormBuilderProvider>
+  );
+}

package/src/components/organisms/form-builder/index.ts

@@ -0,0 +1 @@
+export * from "./form-builder";

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

@@ -0,0 +1,87 @@
+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/modal";
+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 { isOpen, onOpenChange } = useDisclosure();
+
+    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({
+          variant,
+          glassEffect,
+        })}
+        {...props}
+      >
+        {variant === "segmented-floating" ? (
+          <SegmentedHeaderContent glassEffect={glassEffect}>
+            {content}
+          </SegmentedHeaderContent>
+        ) : (
+          content
+        )}
+      </header>
+    );
+  },
+);

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

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

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

@@ -0,0 +1,29 @@
+import { SegmentedHeaderContentProps } from "@/types";
+import { Children } from "react";
+import { Row } from "@/components";
+import { getGlassEffectStyles } from "./styles/styles";
+
+export const SegmentedHeaderContent = ({
+  children,
+  glassEffect,
+}: SegmentedHeaderContentProps) => {
+  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={{
+            ...(glassEffect
+              ? getGlassEffectStyles({
+                  glassEffect,
+                })
+              : {}),
+          }}
+        >
+          {child}
+        </Row>
+      ))}
+    </Row>
+  );
+};