chore(ui,icons,ui-preset,toolbox): Move design system packages to monorepo (#5470)

packages/design-system/ui/src/components/heading/heading.spec.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from "@testing-library/react"
+import * as React from "react"
+
+import { Heading } from "./heading"
+
+describe("Heading", () => {
+  it("should render a h1 successfully", async () => {
+    render(<Heading>Header</Heading>)
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument()
+  })
+
+  it("should render a h2 successfully", async () => {
+    render(<Heading level="h2">Header</Heading>)
+    expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument()
+  })
+
+  it("should render a h3 successfully", async () => {
+    render(<Heading level="h3">Header</Heading>)
+    expect(screen.getByRole("heading", { level: 3 })).toBeInTheDocument()
+  })
+})

packages/design-system/ui/src/components/heading/heading.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Heading } from "./heading"
+
+const meta: Meta<typeof Heading> = {
+  title: "Components/Heading",
+  component: Heading,
+  argTypes: {
+    level: {
+      control: {
+        type: "select",
+      },
+      options: ["h1", "h2", "h3"],
+    },
+  },
+  parameters: {
+    layout: "centered",
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Heading>
+
+export const H1: Story = {
+  args: {
+    level: "h1",
+    children: "I am a H1 heading",
+  },
+}
+
+export const H2: Story = {
+  args: {
+    level: "h2",
+    children: "I am a H2 heading",
+  },
+}
+
+export const H3: Story = {
+  args: {
+    level: "h3",
+    children: "I am a H3 heading",
+  },
+}

packages/design-system/ui/src/components/heading/heading.tsx

@@ -0,0 +1,33 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { clx } from "@/utils/clx"
+
+const headingVariants = cva("font-sans font-medium", {
+  variants: {
+    level: {
+      h1: "h1-core",
+      h2: "h2-core",
+      h3: "h3-core",
+    },
+  },
+  defaultVariants: {
+    level: "h1",
+  },
+})
+
+type HeadingProps = VariantProps<typeof headingVariants> &
+  React.HTMLAttributes<HTMLHeadingElement>
+
+const Heading = ({ level, className, ...props }: HeadingProps) => {
+  const Component = level ? level : "h1"
+
+  return (
+    <Component
+      className={clx(headingVariants({ level }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Heading, headingVariants }

packages/design-system/ui/src/components/heading/index.ts

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