Add Typography component

Author: kaja-osojnik

src/components/typography/index.tsx

@@ -0,0 +1,65 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+export const typographyVariants = cva("", {
+  variants: {
+    variant: {
+        h1: "scroll-m-20 text-4xl font-semibold tracking-[-0.04em] lg:text-5xl",
+        h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-[-0.04em] first:mt-0",
+        h3: "scroll-m-20 text-2xl font-semibold tracking-[-0.04em]",
+        h4: "scroll-m-20 text-xl font-semibold tracking-[-0.04em]",
+        p: "leading-7 [&:not(:first-child)]:mt-6",
+        blockquote: "mt-6 border-l-2 pl-6 italic",
+        lead: "text-xl text-muted-foreground",
+        large: "text-lg font-semibold",
+        small: "text-sm font-medium leading-none",
+        muted: "text-sm text-muted-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "p",
+  },
+})
+
+export interface TypographyProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof typographyVariants> {
+ 
+  asChild?: boolean
+}
+
+
+function defaultTagFor(
+  variant: NonNullable<VariantProps<typeof typographyVariants>["variant"]>
+): keyof JSX.IntrinsicElements {
+  switch (variant) {
+    case "h1":
+    case "h2":
+    case "h3":
+    case "h4":
+      return variant
+    case "blockquote":
+      return "blockquote"
+    default:
+      return "p"
+  }
+}
+
+export const Typography = React.forwardRef<HTMLElement, TypographyProps>(
+  ({ asChild = false, variant, className, ...props }, ref) => {
+    
+    const v = (variant ?? "p") as NonNullable<TypographyProps["variant"]>
+    const Comp: any = asChild ? Slot : defaultTagFor(v)
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(typographyVariants({ variant: v, className }))}
+        {...props}
+      />
+    )
+  }
+)
+Typography.displayName = "Typography"

src/stories/Typography/Link.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Link } from '../../components/link'
+
+const meta = {
+  title: 'Typography/Link',
+  component: Link,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'underline', 'hover'],
+      description: 'The visual style variant of the link',
+    },
+    textColor: {
+      control: 'select',
+      options: ['primary', 'inherit'],
+      description: 'The text color scheme of the link',
+      defaultValue: 'primary',
+    },
+    asChild: {
+      control: 'boolean',
+      description: 'When true, renders the child component with Link styles and props merged.',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes for custom styling',
+    },
+  },
+} satisfies Meta<typeof Link>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'Oasis Explorer',
+    href: '#',
+    textColor: 'primary',
+  },
+}

src/stories/Typography/Typography.stories.tsx

@@ -1,43 +1,38 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Link } from '../../components/link'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Typography } from '../../components/typography'
 
-const meta = {
-  title: 'Typography/Link',
-  component: Link,
+const meta: Meta<typeof Typography> = {
+  title: 'Typography/Typography',
+  component: Typography,
   parameters: {
+    docs: {
+      description: {
+        component: 'Project typography primitives (h1–h4, p, blockquote, small, muted).',
+      },
+    },
     layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/dSsI9L6NSpNCorbSdiYd1k/Oasis-Design-System---shadcn-ui---Default---December-2024?node-id=473-1978',
+    },
   },
   tags: ['autodocs'],
   argTypes: {
     variant: {
       control: 'select',
-      options: ['default', 'underline', 'hover'],
-      description: 'The visual style variant of the link',
-    },
-    textColor: {
-      control: 'select',
-      options: ['primary', 'inherit'],
-      description: 'The text color scheme of the link',
-      defaultValue: 'primary',
-    },
-    asChild: {
-      control: 'boolean',
-      description: 'When true, renders the child component with Link styles and props merged.',
-    },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes for custom styling',
+      options: ['h1', 'h2', 'h3', 'h4', 'p', 'blockquote', 'lead', 'large', 'small', 'muted'],
     },
+    asChild: { control: 'boolean' },
+    className: { control: 'text' },
+    children: { control: 'text' },
   },
-} satisfies Meta<typeof Link>
+  args: {
+    variant: 'p',
+    children: 'The quick brown fox jumps over the lazy dog.',
+  },
+}
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  args: {
-    children: 'Oasis Explorer',
-    href: '#',
-    textColor: 'primary',
-  },
-}
+export const Default: Story = {}