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

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

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

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

@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/react"
+import * as React from "react"
+
+import { Text } from "./text"
+
+describe("Text", () => {
+  it("renders a text", () => {
+    render(<Text>I am a paragraph</Text>)
+
+    const text = screen.getByText("I am a paragraph")
+    expect(text).toBeInTheDocument()
+    expect(text.tagName).toBe("P")
+  })
+
+  it("renders a text as a child", () => {
+    render(
+      <Text asChild>
+        <span>I am a span</span>
+      </Text>
+    )
+
+    const text = screen.getByText("I am a span")
+    expect(text).toBeInTheDocument()
+    expect(text.tagName).toBe("SPAN")
+  })
+})

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

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Text } from "./text"
+
+const meta: Meta<typeof Text> = {
+  title: "Components/Text",
+  component: Text,
+  argTypes: {
+    size: {
+      control: {
+        type: "select",
+      },
+      options: ["base", "large", "xlarge"],
+    },
+    weight: {
+      control: {
+        type: "select",
+      },
+      options: ["regular", "plus"],
+    },
+    family: {
+      control: {
+        type: "select",
+      },
+      options: ["sans", "mono"],
+    },
+  },
+  parameters: {
+    layout: "centered",
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Text>
+
+export const BaseRegularSans: Story = {
+  args: {
+    size: "base",
+    weight: "regular",
+    family: "sans",
+    children: "I am a paragraph",
+  },
+}
+
+export const BasePlusSans: Story = {
+  args: {
+    size: "base",
+    weight: "plus",
+    family: "sans",
+    children: "I am a paragraph",
+  },
+}
+
+export const LargeRegularSans: Story = {
+  args: {
+    size: "large",
+    weight: "regular",
+    family: "sans",
+    children: "I am a paragraph",
+  },
+}
+
+export const LargePlusSans: Story = {
+  args: {
+    size: "large",
+    weight: "plus",
+    family: "sans",
+    children: "I am a paragraph",
+  },
+}
+
+export const XLargeRegularSans: Story = {
+  args: {
+    size: "xlarge",
+    weight: "regular",
+    family: "sans",
+    children: "I am a paragraph",
+  },
+}
+
+export const XLargePlusSans: Story = {
+  args: {
+    size: "xlarge",
+    weight: "plus",
+    family: "sans",
+
+    children: "I am a paragraph",
+  },
+}
+
+export const BaseRegularMono: Story = {
+  args: {
+    size: "base",
+    weight: "regular",
+    family: "mono",
+    children: "I am a paragraph",
+  },
+}
+
+export const BasePlusMono: Story = {
+  args: {
+    size: "base",
+    weight: "plus",
+    family: "mono",
+    children: "I am a paragraph",
+  },
+}
+
+export const LargeRegularMono: Story = {
+  args: {
+    size: "large",
+    weight: "regular",
+    family: "mono",
+    children: "I am a paragraph",
+  },
+}
+
+export const LargePlusMono: Story = {
+  args: {
+    size: "large",
+    weight: "plus",
+    family: "mono",
+    children: "I am a paragraph",
+  },
+}
+
+export const XLargeRegularMono: Story = {
+  args: {
+    size: "xlarge",
+    weight: "regular",
+    family: "mono",
+    children: "I am a paragraph",
+  },
+}
+
+export const XLargePlusMono: Story = {
+  args: {
+    size: "xlarge",
+    weight: "plus",
+    family: "mono",
+    children: "I am a paragraph",
+  },
+}

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

@@ -0,0 +1,129 @@
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
+
+import { clx } from "@/utils/clx"
+
+const textVariants = cva("", {
+  variants: {
+    size: {
+      xsmall: "",
+      small: "",
+      base: "",
+      large: "",
+      xlarge: "",
+    },
+    weight: {
+      regular: "font-normal",
+      plus: "font-medium",
+    },
+    family: {
+      sans: "font-sans",
+      mono: "font-mono",
+    },
+    leading: {
+      normal: "",
+      compact: "",
+    },
+  },
+  defaultVariants: {
+    family: "sans",
+    size: "base",
+    weight: "regular",
+    leading: "normal",
+  },
+  compoundVariants: [
+    {
+      size: "xsmall",
+      leading: "normal",
+      className: "txt-xsmall",
+    },
+    {
+      size: "xsmall",
+      leading: "compact",
+      className: "txt-compact-xsmall",
+    },
+    {
+      size: "small",
+      leading: "normal",
+      className: "txt-small",
+    },
+    {
+      size: "small",
+      leading: "compact",
+      className: "txt-compact-small",
+    },
+    {
+      size: "base",
+      leading: "normal",
+      className: "txt-medium",
+    },
+    {
+      size: "base",
+      leading: "compact",
+      className: "txt-compact-medium",
+    },
+    {
+      size: "large",
+      leading: "normal",
+      className: "txt-large",
+    },
+    {
+      size: "large",
+      leading: "compact",
+      className: "txt-compact-large",
+    },
+    {
+      size: "xlarge",
+      leading: "normal",
+      className: "txt-xlarge",
+    },
+    {
+      size: "xlarge",
+      leading: "compact",
+      className: "txt-compact-xlarge",
+    },
+  ],
+})
+
+interface TextProps
+  extends React.ComponentPropsWithoutRef<"p">,
+    VariantProps<typeof textVariants> {
+  asChild?: boolean
+  as?: "p" | "span" | "div"
+}
+
+const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
+  (
+    {
+      className,
+      asChild = false,
+      as = "p",
+      size = "base",
+      weight = "regular",
+      family = "sans",
+      leading = "normal",
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const Component = asChild ? Slot : as
+
+    return (
+      <Component
+        ref={ref}
+        className={clx(
+          textVariants({ size, weight, family, leading }),
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </Component>
+    )
+  }
+)
+Text.displayName = "Text"
+
+export { Text }