Add typography component and reorganize structure

.storybook/preview-head.html

@@ -0,0 +1,14 @@
+<style>
+  @font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("/fonts/InterVariable.woff2") format("woff2");
+  }
+
+  :root {
+    --font-sans: "Inter", sans-serif;
+    text-align: center;
+  }
+</style>

package.json

@@ -99,6 +99,7 @@
     "tailwind-merge": "^2.2.0",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
+    "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "vite": "^4.5.1"
   },

src/index.ts

@@ -1,10 +1,18 @@
 export * from "./shared"
 
-export * from "./Avatar"
-export * from "./AvatarGroup"
-export * from "./Badge"
-export * from "./Button"
-export * from "./Dot"
-export * from "./Loader"
-export * from "./Slottable"
-export * from "./Status"
+// UI
+export * from "./ui/Avatar"
+export * from "./ui/AvatarGroup"
+export * from "./ui/Badge"
+export * from "./ui/Button"
+export * from "./ui/Dot"
+export * from "./ui/Loader"
+export * from "./ui/Status"
+
+// Typography
+export * from "./typography/Heading"
+export * from "./typography/Paragraph"
+export * from "./typography/Subheading"
+
+// Utils
+export * from "./utils/Slottable"

src/shared/cva.ts

@@ -5,6 +5,7 @@ const customTwMerge = extendTailwindMerge({
   extend: {
     classGroups: {
       "font-size": ["text-xxs", "text-xxxs"],
+      "font-family": ["font-display", "font-sans"],
     },
   },
 })

src/typography/Heading/Heading.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Heading } from "./Heading"
+
+type Story = StoryObj<typeof Heading>
+
+// Meta
+export default {
+  title: "Typography/Heading",
+  component: Heading,
+  args: {
+    children: "The five boxing wizards jump quickly.",
+    ...Heading.defaultProps,
+  },
+} satisfies Meta
+
+// Stories
+export const Heading1 = {
+  args: {
+    size: "h1",
+  },
+} satisfies Story
+
+export const Heading2 = {
+  args: {
+    size: "h2",
+  },
+} satisfies Story
+
+export const Heading3 = {
+  args: {
+    size: "h3",
+  },
+} satisfies Story
+
+export const Heading4 = {
+  args: {
+    size: "h4",
+  },
+} satisfies Story
+
+export const Heading5 = {
+  args: {
+    size: "h5",
+  },
+} satisfies Story
+
+export const Heading6 = {
+  args: {
+    size: "h6",
+  },
+} satisfies Story

src/typography/Heading/Heading.tsx

@@ -0,0 +1,56 @@
+import { Slot } from "@radix-ui/react-slot"
+import type { HTMLAttributes } from "react"
+import { forwardRef } from "react"
+
+import { type VariantProps, cx } from "../../shared/cva"
+
+import { headingVariants } from "./Heading.variants"
+
+export type HeadingElement = HTMLHeadingElement
+
+export type HeadingProps = Omit<HTMLAttributes<HeadingElement>, "size"> &
+  VariantProps<typeof headingVariants> & {
+    /**
+     * If set to `true`, the button will be rendered as a child within the component.
+     * This child component must be a valid React component.
+     */
+    asChild?: boolean
+  }
+
+export const Heading = forwardRef<HeadingElement, HeadingProps>((props, ref) => {
+  const { className, asChild, size, ...rest } = props
+  const Comp = asChild ? Slot : size ?? "h2"
+
+  return <Comp className={cx(headingVariants({ size, className }))} ref={ref} {...rest} />
+})
+
+export const H1 = forwardRef<HeadingElement, HeadingProps>((props, ref) => {
+  return <Heading size="h1" ref={ref} {...props} />
+})
+
+export const H2 = forwardRef<HeadingElement, HeadingProps>((props, ref) => {
+  return <Heading size="h2" ref={ref} {...props} />
+})
+
+export const H3 = forwardRef<HeadingElement, HeadingProps>((props, ref) => {
+  return <Heading size="h3" ref={ref} {...props} />
+})
+
+export const H4 = forwardRef<HeadingElement, HeadingProps>((props, ref) => {
+  return <Heading size="h4" ref={ref} {...props} />
+})
+
+export const H5 = forwardRef<HeadingElement, HeadingProps>((props, ref) => {
+  return <Heading size="h5" ref={ref} {...props} />
+})
+
+export const H6 = forwardRef<HeadingElement, HeadingProps>((props, ref) => {
+  return <Heading size="h6" ref={ref} {...props} />
+})
+
+Heading.defaultProps = {
+  size: "h3",
+  asChild: false,
+}
+
+Heading.displayName = "Heading"

src/typography/Heading/Heading.variants.ts

@@ -0,0 +1,20 @@
+import { cva } from "../../shared/cva"
+
+export const headingVariants = cva({
+  base: "font-medium",
+
+  variants: {
+    size: {
+      h1: "text-6xl -tracking-1",
+      h2: "text-5xl -tracking-1",
+      h3: "text-4xl -tracking-1",
+      h4: "text-3xl",
+      h5: "text-2xl",
+      h6: "text-xl",
+    },
+  },
+
+  defaultVariants: {
+    size: "h3",
+  },
+})

src/typography/Heading/index.ts

@@ -0,0 +1,2 @@
+export { Heading } from "./Heading"
+export type { HeadingProps, HeadingElement } from "./Heading"

src/typography/Paragraph/Paragraph.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Paragraph } from "./Paragraph"
+
+type Story = StoryObj<typeof Paragraph>
+
+// Meta
+export default {
+  title: "Typography/Paragraph",
+  component: Paragraph,
+  args: {
+    children:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    ...Paragraph.defaultProps,
+  },
+} satisfies Meta
+
+// Stories
+export const ExtraLarge = {
+  args: {
+    size: "xl",
+  },
+} satisfies Story
+
+export const Large = {
+  args: {
+    size: "lg",
+  },
+} satisfies Story
+
+export const Medium = {
+  args: {
+    size: "md",
+  },
+} satisfies Story
+
+export const Small = {
+  args: {
+    size: "sm",
+  },
+} satisfies Story
+
+export const ExtraSmall = {
+  args: {
+    size: "xs",
+  },
+} satisfies Story

src/typography/Paragraph/Paragraph.tsx

@@ -0,0 +1,32 @@
+import { Slot } from "@radix-ui/react-slot"
+import type { HTMLAttributes } from "react"
+import { forwardRef } from "react"
+
+import { type VariantProps, cx } from "../../shared/cva"
+
+import { paragraphVariants } from "./Paragraph.variants"
+
+export type ParagraphElement = HTMLParagraphElement
+
+export type ParagraphProps = Omit<HTMLAttributes<ParagraphElement>, "size"> &
+  VariantProps<typeof paragraphVariants> & {
+    /**
+     * If set to `true`, the button will be rendered as a child within the component.
+     * This child component must be a valid React component.
+     */
+    asChild?: boolean
+  }
+
+export const Paragraph = forwardRef<ParagraphElement, ParagraphProps>((props, ref) => {
+  const { className, asChild, size, ...rest } = props
+  const Comp = asChild ? Slot : "p"
+
+  return <Comp className={cx(paragraphVariants({ size, className }))} ref={ref} {...rest} />
+})
+
+Paragraph.defaultProps = {
+  size: "md",
+  asChild: false,
+}
+
+Paragraph.displayName = "Paragraph"

src/typography/Paragraph/Paragraph.variants.ts

@@ -0,0 +1,19 @@
+import { cva } from "../../shared/cva"
+
+export const paragraphVariants = cva({
+  base: "",
+
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm -tracking-0.5",
+      md: "text-base -tracking-1",
+      lg: "text-lg -tracking-1.5",
+      xl: "text-xl -tracking-1.5",
+    },
+  },
+
+  defaultVariants: {
+    size: "md",
+  },
+})

src/typography/Paragraph/index.ts

@@ -0,0 +1,2 @@
+export { Paragraph } from "./Paragraph"
+export type { ParagraphProps, ParagraphElement } from "./Paragraph"

src/typography/Subheading/Subheading.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Subheading } from "./Subheading"
+
+type Story = StoryObj<typeof Subheading>
+
+// Meta
+export default {
+  title: "Typography/Subheading",
+  component: Subheading,
+  args: {
+    children: "The quick brown fox jumps over the lazy dog.",
+    ...Subheading.defaultProps,
+  },
+} satisfies Meta
+
+// Stories
+export const Large = {
+  args: {
+    size: "lg",
+  },
+} satisfies Story
+
+export const Medium = {
+  args: {
+    size: "md",
+  },
+} satisfies Story
+
+export const Small = {
+  args: {
+    size: "sm",
+  },
+} satisfies Story
+
+export const ExtraSmall = {
+  args: {
+    size: "xs",
+  },
+} satisfies Story

src/typography/Subheading/Subheading.tsx

@@ -0,0 +1,32 @@
+import { Slot } from "@radix-ui/react-slot"
+import type { HTMLAttributes } from "react"
+import { forwardRef } from "react"
+
+import { type VariantProps, cx } from "../../shared/cva"
+
+import { subheadingVariants } from "./Subheading.variants"
+
+export type SubheadingElement = HTMLParagraphElement
+
+export type SubheadingProps = Omit<HTMLAttributes<SubheadingElement>, "size"> &
+  VariantProps<typeof subheadingVariants> & {
+    /**
+     * If set to `true`, the button will be rendered as a child within the component.
+     * This child component must be a valid React component.
+     */
+    asChild?: boolean
+  }
+
+export const Subheading = forwardRef<SubheadingElement, SubheadingProps>((props, ref) => {
+  const { className, asChild, size, ...rest } = props
+  const Comp = asChild ? Slot : "p"
+
+  return <Comp className={cx(subheadingVariants({ size, className }))} ref={ref} {...rest} />
+})
+
+Subheading.defaultProps = {
+  size: "md",
+  asChild: false,
+}
+
+Subheading.displayName = "Subheading"

src/typography/Subheading/Subheading.variants.ts

@@ -0,0 +1,18 @@
+import { cva } from "../../shared/cva"
+
+export const subheadingVariants = cva({
+  base: "font-medium uppercase",
+
+  variants: {
+    size: {
+      xs: "text-2xs tracking-2",
+      sm: "text-xs tracking-4",
+      md: "text-sm tracking-6",
+      lg: "text-base tracking-6",
+    },
+  },
+
+  defaultVariants: {
+    size: "md",
+  },
+})

src/typography/Subheading/index.ts

@@ -0,0 +1,2 @@
+export { Subheading } from "./Subheading"
+export type { SubheadingProps, SubheadingElement } from "./Subheading"