@js-empire/emperor-ui 1.3.5 → 1.3.7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,29 +0,0 @@
-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>
-  );
-};