@jusankar/moon 0.1.0

package/src/components/alert/index.ts

@@ -0,0 +1 @@
+export * from './alert'

package/src/components/badge/badge.story.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Badge } from '~/src/components/badge'
+import { BadgeCheck, BookmarkIcon, ArrowUpRightIcon } from 'lucide-react'
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+}
+export default meta
+type Story = StoryObj<typeof Badge>
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge>Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="ghost">Ghost</Badge>
+    </div>
+  ),
+}
+
+export const WithIcon: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="secondary">
+        <BadgeCheck data-icon="inline-start" />
+        Verified
+      </Badge>
+      <Badge variant="outline">
+        Bookmark
+        <BookmarkIcon data-icon="inline-end" />
+      </Badge>
+    </div>
+  ),
+}
+
+export const WithSpinner: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="destructive">
+        Deleting
+      </Badge>
+      <Badge variant="secondary">
+        Generating
+      </Badge>
+    </div>
+  ),
+}
+
+export const AsLink: Story = {
+  render: () => (
+    <Badge asChild>
+      <a href="#link">
+        Open Link <ArrowUpRightIcon data-icon="inline-end" />
+      </a>
+    </Badge>
+  ),
+}
+
+export const CustomColors: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge className="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">
+        Blue
+      </Badge>
+      <Badge className="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">
+        Green
+      </Badge>
+      <Badge className="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300">
+        Sky
+      </Badge>
+      <Badge className="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300">
+        Purple
+      </Badge>
+      <Badge className="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">
+        Red
+      </Badge>
+    </div>
+  ),
+}

package/src/components/badge/badge.test.tsx

@@ -0,0 +1,189 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe } from "vitest-axe"
+import { describe, expect, it } from "vitest"
+
+import { Badge } from "./badge"
+
+// Dummy icons for testing purposes inline with usage examples
+const DummyIconStart = () => <svg data-icon="inline-start" aria-hidden="true"></svg>
+const DummyIconEnd = () => <svg data-icon="inline-end" aria-hidden="true"></svg>
+
+describe("Badge", () => {
+  describe("rendering", () => {
+    it("renders the badge with default content", () => {
+      render(<Badge>Default Badge</Badge>)
+      expect(screen.getByText("Default Badge")).toBeInTheDocument()
+    })
+
+    it("renders the badge container element", () => {
+      const { container } = render(<Badge>Badge Content</Badge>)
+      expect(container.firstChild).toBeInstanceOf(HTMLElement)
+    })
+  })
+
+  describe("components", () => {
+    it("renders children content correctly", () => {
+      render(<Badge>Children Content</Badge>)
+      expect(screen.getByText("Children Content")).toBeVisible()
+    })
+  })
+
+  describe("variants", () => {
+    it("applies 'default' variant by default", () => {
+      const { container } = render(<Badge>Default Variant</Badge>)
+      expect(container.firstChild).toHaveClass("rounded") // Assuming default styling includes rounded
+    })
+
+    it("applies the 'secondary' variant class", () => {
+      const { container } = render(<Badge variant="secondary">Secondary</Badge>)
+      expect(container.firstChild).toHaveClass("secondary")
+    })
+
+    it("applies the 'destructive' variant class", () => {
+      const { container } = render(<Badge variant="destructive">Destructive</Badge>)
+      expect(container.firstChild).toHaveClass("destructive")
+    })
+
+    it("applies the 'outline' variant class", () => {
+      const { container } = render(<Badge variant="outline">Outline</Badge>)
+      expect(container.firstChild).toHaveClass("outline")
+    })
+
+    it("applies the 'ghost' variant class", () => {
+      const { container } = render(<Badge variant="ghost">Ghost</Badge>)
+      expect(container.firstChild).toHaveClass("ghost")
+    })
+
+    it("applies the 'link' variant class", () => {
+      const { container } = render(<Badge variant="link">Link</Badge>)
+      expect(container.firstChild).toHaveClass("link")
+    })
+  })
+
+  describe("size", () => {
+    // Badge component does not inherently define explicit sizes by prop
+    it("does not apply any size-related class by default", () => {
+      const { container } = render(<Badge>Size Test</Badge>)
+      expect(container.firstChild).not.toHaveClass(/^size-/)
+    })
+  })
+
+  describe("subcomponents", () => {
+    it("renders icon with data-icon='inline-start' attribute", () => {
+      const { container } = render(
+        <Badge>
+          <DummyIconStart />
+          Text
+        </Badge>
+      )
+      const icon = container.querySelector('[data-icon="inline-start"]')
+      expect(icon).toBeInTheDocument()
+    })
+
+    it("renders icon with data-icon='inline-end' attribute", () => {
+      const { container } = render(
+        <Badge>
+          Text
+          <DummyIconEnd />
+        </Badge>
+      )
+      const icon = container.querySelector('[data-icon="inline-end"]')
+      expect(icon).toBeInTheDocument()
+    })
+  })
+
+  describe("state", () => {
+    // No explicit state props or controlling state for Badge component
+    it("renders static Badge without state changes", () => {
+      render(<Badge>Static State</Badge>)
+      expect(screen.getByText("Static State")).toBeVisible()
+    })
+  })
+
+  describe("props", () => {
+    it("accepts and applies a custom className prop", () => {
+      const { container } = render(
+        <Badge className="custom-class">Custom Class</Badge>
+      )
+      expect(container.firstChild).toHaveClass("custom-class")
+    })
+
+    it("accepts an empty className prop without error", () => {
+      const { container } = render(<Badge className="">Empty Class</Badge>)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("renders correctly with minimal required props", () => {
+      render(<Badge>Minimal</Badge>)
+      expect(screen.getByText("Minimal")).toBeInTheDocument()
+    })
+
+    it("can render as a child element when 'asChild' prop is true", () => {
+      // We cannot fully implement this behavior test as 'asChild' likely uses Radix Polymorphic behavior.
+      // Instead, we'll at least verify the container renders child anchor correctly.
+      render(
+        <Badge asChild>
+          <a href="#test">Link Badge</a>
+        </Badge>
+      )
+      expect(screen.getByRole("link", { name: /Link Badge/i })).toBeInTheDocument()
+    })
+  })
+
+  describe("interactions", () => {
+    // Badge is non-interactive by default, no user input interaction handlers tested.
+    it("does not support user interactions inherently", () => {
+      render(<Badge>Non interactive</Badge>)
+      expect(screen.getByText("Non interactive")).toBeInTheDocument()
+    })
+  })
+
+  describe("accessibility", () => {
+    it("should have no accessibility violations", async () => {
+      const { container } = render(<Badge>Accessible Badge</Badge>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("renders icon slots with appropriate aria-hidden attribute", () => {
+      const { container } = render(
+        <Badge>
+          <DummyIconStart />
+          Text
+          <DummyIconEnd />
+        </Badge>
+      )
+      const iconStart = container.querySelector('[data-icon="inline-start"]')
+      const iconEnd = container.querySelector('[data-icon="inline-end"]')
+      expect(iconStart).toHaveAttribute("aria-hidden", "true")
+      expect(iconEnd).toHaveAttribute("aria-hidden", "true")
+    })
+  })
+
+  describe("error handling", () => {
+    it("renders gracefully when no children are provided", () => {
+      const { container } = render(<Badge>{null}</Badge>)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("renders gracefully when given undefined children", () => {
+      const { container } = render(<Badge>{undefined}</Badge>)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("renders gracefully when variant prop is invalid", () => {
+      // @ts-expect-error testing resilience with invalid variant prop
+      const { container } = render(<Badge variant="invalid">Invalid Variant</Badge>)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe("exports", () => {
+    it("should have named export: Badge", () => {
+      expect(Badge).toBeDefined()
+      expect(typeof Badge).toBe("function")
+    })
+  })
+})

package/src/components/badge/badge.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../utils"
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+export { Badge, badgeVariants }

package/src/components/badge/index.ts

@@ -0,0 +1 @@
+export * from './badge'

package/src/components/card/card.story.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '~/src/components/card'
+import { Badge } from '~/src/components/badge'
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+}
+export default meta
+type Story = StoryObj<typeof Card>
+
+export const Usage: Story = {
+  render: () => (
+    <Card>
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card Description</CardDescription>
+        <CardAction>Card Action</CardAction>
+      </CardHeader>
+      <CardContent>
+        <p>Card Content</p>
+      </CardContent>
+      <CardFooter>
+        <p>Card Footer</p>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const Size: Story = {
+  render: () => (
+    <Card size="sm" className="mx-auto w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Small Card</CardTitle>
+        <CardDescription>
+          This card uses the small size variant.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>
+          The card component supports a size prop that can be set to
+          &quot;sm&quot; for a more compact appearance.
+        </p>
+      </CardContent>
+      <CardFooter>
+          Action
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const Image: Story = {
+  render: () => (
+    <Card className="relative mx-auto w-full max-w-sm pt-0">
+      <div className="absolute inset-0 z-30 aspect-video bg-black/35" />
+      <img
+        src="https://avatar.vercel.sh/shadcn1"
+        alt="Event cover"
+        className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40"
+      />
+      <CardHeader>
+        <CardAction>
+          <Badge variant="secondary">Featured</Badge>
+        </CardAction>
+        <CardTitle>Design systems meetup</CardTitle>
+        <CardDescription>
+          A practical talk on component APIs, accessibility, and shipping
+          faster.
+        </CardDescription>
+      </CardHeader>
+      <CardFooter>
+        View Event
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const Demo: Story = {
+  render: () => (
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Login to your account</CardTitle>
+        <CardDescription>
+          Enter your email below to login to your account
+        </CardDescription>
+        <CardAction>
+          Sign up
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <div className="flex flex-col gap-6">
+            <div className="grid gap-2">
+            </div>
+            <div className="grid gap-2">
+              <div className="flex items-center">
+                Password
+                <a
+                  href="#"
+                  className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                >
+                  Forgot your password?
+                </a>
+              </div>
+            </div>
+          </div>
+        </form>
+      </CardContent>
+      <CardFooter className="flex-col gap-2">
+          Login
+          Login with Google
+      </CardFooter>
+    </Card>
+  ),
+}

package/src/components/card/card.test.tsx

@@ -0,0 +1,231 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe } from "vitest-axe"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "~/src/components/card"
+
+describe("Card", () => {
+  describe("rendering", () => {
+    it("renders the Card container", () => {
+      const { container } = render(<Card>Test card</Card>)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("renders CardHeader, CardContent and CardFooter when provided", () => {
+      render(
+        <Card>
+          <CardHeader>Header</CardHeader>
+          <CardContent>Content</CardContent>
+          <CardFooter>Footer</CardFooter>
+        </Card>
+      )
+      expect(screen.getByText("Header")).toBeVisible()
+      expect(screen.getByText("Content")).toBeVisible()
+      expect(screen.getByText("Footer")).toBeVisible()
+    })
+
+    it("renders CardTitle and CardDescription inside CardHeader", () => {
+      render(
+        <CardHeader>
+          <CardTitle>Title</CardTitle>
+          <CardDescription>Description</CardDescription>
+        </CardHeader>
+      )
+      expect(screen.getByText("Title")).toBeVisible()
+      expect(screen.getByText("Description")).toBeVisible()
+    })
+
+    it("renders CardAction inside CardHeader", () => {
+      render(
+        <CardHeader>
+          <CardAction>Action</CardAction>
+        </CardHeader>
+      )
+      expect(screen.getByText("Action")).toBeVisible()
+    })
+  })
+
+  describe("components", () => {
+    it("CardHeader supports className and renders correctly", () => {
+      const { container } = render(
+        <CardHeader className="custom-header">Header</CardHeader>
+      )
+      const header = container.querySelector(".custom-header")
+      expect(header).toBeInTheDocument()
+      expect(header).toHaveTextContent("Header")
+    })
+
+    it("CardTitle supports className and renders text", () => {
+      const { container } = render(
+        <CardTitle className="custom-title">My Title</CardTitle>
+      )
+      const title = container.querySelector(".custom-title")
+      expect(title).toBeInTheDocument()
+      expect(title).toHaveTextContent("My Title")
+    })
+
+    it("CardDescription supports className and renders text", () => {
+      const { container } = render(
+        <CardDescription className="custom-description">Desc</CardDescription>
+      )
+      const description = container.querySelector(".custom-description")
+      expect(description).toBeInTheDocument()
+      expect(description).toHaveTextContent("Desc")
+    })
+
+    it("CardAction supports className and renders children", () => {
+      const { container } = render(
+        <CardAction className="custom-action">
+          Click
+        </CardAction>
+      )
+      const action = container.querySelector(".custom-action")
+      expect(action).toBeInTheDocument()
+      expect(screen.getByRole("button", { name: "Click" })).toBeVisible()
+    })
+
+    it("CardContent supports className and renders children", () => {
+      const { container } = render(
+        <CardContent className="custom-content">
+          <p>Content text</p>
+        </CardContent>
+      )
+      const content = container.querySelector(".custom-content")
+      expect(content).toBeInTheDocument()
+      expect(screen.getByText("Content text")).toBeVisible()
+    })
+
+    it("CardFooter supports className and renders children", () => {
+      const { container } = render(
+        <CardFooter className="custom-footer">Footer content</CardFooter>
+      )
+      const footer = container.querySelector(".custom-footer")
+      expect(footer).toBeInTheDocument()
+      expect(screen.getByText("Footer content")).toBeVisible()
+    })
+  })
+
+  describe("variants", () => {
+    it("does not apply any special variant classes by default", () => {
+      const { container } = render(<Card>Default</Card>)
+      expect(container.firstChild).not.toHaveClass(/size-/)
+    })
+  })
+
+  describe("size", () => {
+    it("applies small size class when size='sm' is set", () => {
+      const { container } = render(<Card size="sm">Small Card</Card>)
+      expect(container.firstChild).toHaveClass("sm")
+    })
+
+    it("defaults to normal size when size is not set", () => {
+      const { container } = render(<Card>Default Size</Card>)
+      // No "sm" class expected on root container for default
+      expect(container.firstChild).not.toHaveClass("sm")
+    })
+  })
+
+  describe("subcomponents", () => {
+    // Subcomponents covered individually
+    it("CardTitle renders as heading by default", () => {
+      render(<CardTitle>Heading Title</CardTitle>)
+      const heading = screen.getByText("Heading Title")
+      expect(heading.tagName.toLowerCase()).toMatch(/h[1-6]/)
+    })
+  })
+
+  describe("state", () => {
+    // No explicit state props or stateful behavior found in the component
+  })
+
+  describe("props", () => {
+    it("forwards className to root Card container", () => {
+      const { container } = render(<Card className="my-card">Content</Card>)
+      expect(container.firstChild).toHaveClass("my-card")
+    })
+
+    it("forwards other props to the root Card container", () => {
+      const { container } = render(
+        <Card id="card-id" data-testid="card-test">
+          Content
+        </Card>
+      )
+      expect(container.firstChild).toHaveAttribute("id", "card-id")
+      expect(container.firstChild).toHaveAttribute("data-testid", "card-test")
+    })
+  })
+
+  describe("interactions", () => {
+    // No user input interactions handled directly by Card components
+  })
+
+  describe("accessibility", () => {
+    it("has no accessibility violations when rendering full Card", async () => {
+      const { container } = render(
+        <Card>
+          <CardHeader>
+            <CardTitle>Title</CardTitle>
+            <CardDescription>Description</CardDescription>
+            <CardAction>
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <p>This is the main content</p>
+          </CardContent>
+          <CardFooter>
+          </CardFooter>
+        </Card>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("renders CardTitle as a heading element for semantic accessibility", () => {
+      render(<CardTitle>Accessible Title</CardTitle>)
+      const title = screen.getByText("Accessible Title")
+      // Heading tags h1-h6
+      expect(title.tagName).toMatch(/H[1-6]/)
+    })
+  })
+
+  describe("error handling", () => {
+    it("renders without crashing when no children are provided", () => {
+      const { container } = render(<Card />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("renders subcomponents gracefully with minimal or empty props", () => {
+      const { container } = render(
+        <Card>
+          <CardHeader className="">
+            <CardTitle />
+            <CardDescription />
+          </CardHeader>
+          <CardContent />
+          <CardFooter />
+        </Card>
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe("exports", () => {
+    it("exports all subcomponents as named exports", () => {
+      expect(Card).toBeDefined()
+      expect(CardHeader).toBeDefined()
+      expect(CardTitle).toBeDefined()
+      expect(CardDescription).toBeDefined()
+      expect(CardAction).toBeDefined()
+      expect(CardContent).toBeDefined()
+      expect(CardFooter).toBeDefined()
+    })
+  })
+})