Merge pull request #29 from inkonchain/feat/typography

feat: add Typography component

src/components/Typography/Typography.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Typography, TypographyProps } from "./Typography";
+
+const variants = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "body-1",
+  "body-2",
+  "body-3",
+  "caption",
+  "caption-2",
+] as const;
+
+const meta: Meta<TypographyProps<"button" | "h1" | "h2" | "h3" | "h4">> = {
+  title: "Design/Typography",
+  decorators: [
+    (Story, { args }) => (
+      <div className="ink-p-4 ink-flex ink-flex-col ink-gap-4 ink-text-text-default">
+        {variants.map((variant) => (
+          <Story
+            key={variant}
+            args={{
+              children: (
+                <div>
+                  ink-text-{variant}: The quick brown fox jumps over the lazy
+                  dog
+                </div>
+              ),
+              ...args,
+              variant,
+            }}
+          />
+        ))}
+      </div>
+    ),
+  ],
+  component: Typography,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {},
+};

src/components/Typography/Typography.tsx

@@ -0,0 +1,56 @@
+import {
+  classNames,
+  resetClasses,
+  variantClassNames,
+} from "../../util/classes";
+import { PropsWithChildren } from "react";
+import { PolymorphicProps } from "../polymorphic";
+
+export type TypographyProps<T extends React.ElementType = "div"> =
+  PropsWithChildren<{
+    variant:
+      | "h1"
+      | "h2"
+      | "h3"
+      | "h4"
+      | "body-1"
+      | "body-2"
+      | "body-3"
+      | "caption"
+      | "caption-2";
+    className?: string;
+  }> &
+    PolymorphicProps<T>;
+
+export const Typography = <T extends React.ElementType = "div">({
+  variant,
+  as,
+  asProps,
+  className,
+  children,
+}: TypographyProps<T>) => {
+  const Component = as ?? "div";
+  return (
+    <Component
+      className={classNames(
+        resetClasses,
+        "ink-font-default",
+        variantClassNames(variant, {
+          h1: "ink-text-h1",
+          h2: "ink-text-h2",
+          h3: "ink-text-h3",
+          h4: "ink-text-h4",
+          "body-1": "ink-text-body-1",
+          "body-2": "ink-text-body-2",
+          "body-3": "ink-text-body-3",
+          caption: "ink-text-caption",
+          "caption-2": "ink-text-caption-2",
+        }),
+        className
+      )}
+      {...asProps}
+    >
+      {children}
+    </Component>
+  );
+};

src/components/Typography/index.ts

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

src/components/index.ts

@@ -1,4 +1,5 @@
 export * from "./Button";
 export * from "./Modal";
 export * from "./SegmentedControl";
+export * from "./Typography";
 export * from "./Wallet";

tailwind.config.mjs

@@ -17,7 +17,6 @@ export const spacing = {
 /** @satisfies {import('tailwindcss').Config} */
 const config = {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  darkMode: false,
   prefix: "ink-",
   theme: {
     gap: spacing,