@authdog/react-elements 0.0.39 → 0.0.42

package/src/components/ui/sheet.tsx

@@ -1,34 +1,34 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-import type { ComponentType } from "react"
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import type { ComponentType } from "react";
 
-import { cn } from "@authdog/react-elements/lib/utils"
+import { cn } from "../../lib/utils";
 
-const XIcon = X as ComponentType<React.SVGProps<SVGSVGElement>>
+const XIcon = X as ComponentType<React.SVGProps<SVGSVGElement>>;
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
 function SheetTrigger({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
 function SheetClose({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
 function SheetPortal({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
 function SheetOverlay({
@@ -40,11 +40,11 @@ function SheetOverlay({
       data-slot="sheet-overlay"
       className={cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SheetContent({
@@ -53,7 +53,7 @@ function SheetContent({
   side = "right",
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left"
+  side?: "top" | "right" | "bottom" | "left";
 }) {
   return (
     <SheetPortal>
@@ -70,7 +70,7 @@ function SheetContent({
             "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
           side === "bottom" &&
             "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-          className
+          className,
         )}
         {...props}
       >
@@ -81,7 +81,7 @@ function SheetContent({
         </SheetPrimitive.Close>
       </SheetPrimitive.Content>
     </SheetPortal>
-  )
+  );
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -91,7 +91,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-1.5 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -101,7 +101,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetTitle({
@@ -114,7 +114,7 @@ function SheetTitle({
       className={cn("text-foreground font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetDescription({
@@ -127,7 +127,7 @@ function SheetDescription({
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -139,4 +139,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};

package/src/index.ts

@@ -1,7 +1,7 @@
-export {Button} from "./components/ui/button";
+export { Button } from "./components/ui/button";
 export { ClientOnly } from "./components/core/client-only";
-export {Navbar} from "./components/core/navbar";
-export {UserProfile} from "./components/core/user-profile";
-export {UserDropdown} from "./components/core/user-dropdown";
-export {PlaceholderAlert} from "./components/core/placeholder-alert";
-export {TOTPValidator} from "./components/flow/totp-validator";
+export { Navbar } from "./components/core/navbar";
+export { UserProfile } from "./components/core/user-profile";
+export { UserDropdown } from "./components/core/user-dropdown";
+export { PlaceholderAlert } from "./components/core/placeholder-alert";
+export { TOTPValidator } from "./components/flow/totp-validator";

package/src/stories/core/Navbar.stories.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Navbar } from "../../components/core/navbar";
+import React from "react";
+
+const demoItems = [
+  { title: "Home", href: "/" },
+  { title: "Features", href: "/features" },
+  { title: "Pricing", href: "/pricing" },
+  { title: "Contact", href: "/contact" },
+];
+
+const demoUser = {
+  id: "user_123",
+  displayName: "Avery Stone",
+  emails: [{ value: "avery.stone@example.com" }],
+  photos: [{ value: "https://i.pravatar.cc/120?img=56" }],
+};
+
+const meta = {
+  title: "Core/Navbar",
+  component: Navbar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  args: {
+    logoText: "Authdog",
+    items: demoItems,
+  },
+} satisfies Meta<typeof Navbar>;
+
+export default meta;
+
+type Story = StoryObj<typeof Navbar>;
+
+export const Guest: Story = {};
+
+export const Authenticated: Story = {
+  args: {
+    user: demoUser,
+  },
+};

package/src/stories/core/PlaceholderAlert.stories.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { PlaceholderAlert } from "../../components/core/placeholder-alert";
+import React from "react";
+
+const meta = {
+  title: "Core/Placeholder Alert",
+  component: PlaceholderAlert,
+  tags: ["autodocs"],
+} satisfies Meta<typeof PlaceholderAlert>;
+
+export default meta;
+
+type Story = StoryObj<typeof PlaceholderAlert>;
+
+export const Basic: Story = {
+  args: {
+    title: "Custom Alert Title",
+    description: "This is a custom description for the placeholder alert.",
+  },
+};

package/src/stories/core/UserDropdown.stories.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { UserDropdown } from "../../components/core/user-dropdown";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "../../components/ui/avatar";
+import React from "react";
+
+const demoUser = {
+  displayName: "Jane Doe",
+  emails: [{ value: "jane.doe@example.com" }],
+  photos: [{ value: "https://i.pravatar.cc/100" }],
+};
+
+const trigger = (
+  <span className="inline-flex h-10 w-10 items-center justify-center rounded-full border bg-white shadow">
+    <Avatar className="h-8 w-8 rounded-full">
+      <AvatarImage src="https://i.pravatar.cc/100" />
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+  </span>
+);
+
+const meta = {
+  title: "Core/User Dropdown",
+  component: UserDropdown,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  render: (args) => (
+    <div className="p-10">
+      <UserDropdown {...args} />
+    </div>
+  ),
+} satisfies Meta<typeof UserDropdown>;
+
+export default meta;
+
+type Story = StoryObj<typeof UserDropdown>;
+
+export const Default: Story = {
+  args: {
+    trigger,
+    user: demoUser,
+    links: [{ label: "My Organizations", href: "/organizations" }],
+    side: "bottom",
+    align: "start",
+    onManageAccount: () => console.log("Manage account"),
+    onSignout: () => console.log("Sign out"),
+  },
+};

package/src/stories/core/UserProfile.stories.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { UserProfile } from "../../components/core/user-profile";
+import React from "react";
+
+const baseUser = {
+  id: "user_123",
+  displayName: "Jane Doe",
+  provider: "google-oauth20",
+  emails: [{ id: "e1", value: "jane.primary@example.com" }],
+  verifications: [],
+  photos: [],
+};
+
+const meta = {
+  title: "Core/User Profile",
+  component: UserProfile,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  render: (args) => (
+    <div className="bg-background p-6 text-foreground">
+      <UserProfile {...args} />
+    </div>
+  ),
+} satisfies Meta<typeof UserProfile>;
+
+export default meta;
+
+type Story = StoryObj<typeof UserProfile>;
+
+export const Loaded: Story = {
+  args: {
+    loading: false,
+    user: baseUser,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+    user: baseUser,
+  },
+};

package/src/stories/flow/LoginForm.stories.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { LoginForm } from "../../components/flow/login";
+
+const meta = {
+  title: "Flows/Login Form",
+  component: LoginForm,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof LoginForm>;
+
+export default meta;
+
+type Story = StoryObj<typeof LoginForm>;
+
+export const Default: Story = {};

package/src/stories/flow/TotpValidator.stories.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { TOTPValidator } from "../../components/flow/totp-validator";
+
+const meta = {
+  title: "Flows/TOTP Validator",
+  component: TOTPValidator,
+  tags: ["autodocs"],
+} satisfies Meta<typeof TOTPValidator>;
+
+export default meta;
+
+type Story = StoryObj<typeof TOTPValidator>;
+
+export const Default: Story = {
+  args: {
+    onValidate: async (code: string) => {
+      console.log("TOTP submitted", code);
+    },
+  },
+};