feat: adding react component

jsr.json

@@ -1,6 +1,6 @@
 {
   "name": "@buen/type",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "exports": "./src/index.ts",
   "publish": {
     "include": ["src/**/*.ts", "README.md"],

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@buen/type",
+  "version": "0.0.0",
+  "author": "John Choura",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/johnchourajr/buen-type.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "react": "^18.3.1",
+    "js-tokens": "^4.0.0",
+    "loose-envify": "^1.4.0"
+  }
+}

src/index.ts

@@ -26,6 +26,17 @@
  */
 export { buenTypeTailwind } from "./tailwind-plugin/buenTypeTailwind.ts";
 
+/**
+ * A module that provides a React component for rendering text.
+ *
+ * @example
+ * ```tsx
+ * import { BuenType } from "@buen/type";
+ *
+ * <BuenType type="headline" variant="display-xl">Hello, world!</BuenType>
+ */
+export { BuenType } from "./react-component/BuenType.tsx";
+
 /**
  * A module that provides a function to create a `rem`-based `clamp` function.
  *

src/react-component/BuenType.tsx

@@ -0,0 +1,15 @@
+import React, { type CSSProperties } from "react";
+import { DefaultHeadlineTypes, DefaultTextTypes } from "../types";
+import { generateStyles } from "../utils/generateStyles";
+
+type BuenTypeProps = {
+  type: "headline" | "text";
+  variant: DefaultHeadlineTypes | DefaultTextTypes | string;
+  children: React.ReactNode;
+};
+
+export function BuenType({ type, variant, children }: BuenTypeProps) {
+  const styles = generateStyles(type, variant) as CSSProperties;
+
+  return <div style={styles}>{children}</div>;
+}

src/types.ts

@@ -23,6 +23,15 @@ export type TypeDefinition = {
   clamp?: [number, number];
 };
 
+export type CSSOutput = {
+  fontFamily?: string;
+  fontWeight?: string | number;
+  lineHeight?: string | number;
+  letterSpacing?: string;
+  textTransform?: string;
+  fontSize?: string;
+};
+
 export type TypeDefinitions = Record<string, TypeDefinition>;
 
 export type TypeDefinitionHeadlines = Record<

src/utils/generateStyles.ts

@@ -0,0 +1,40 @@
+import { DEFAULT_HEADLINE, DEFAULT_TEXT } from "../defaults";
+import {
+  CSSOutput,
+  TypeDefinition,
+  TypeDefinitionHeadlines,
+  TypeDefinitionTexts,
+} from "../types";
+import { createRemClamp } from "./createRemClamp";
+
+export const generateStyles = (
+  type: "headline" | "text",
+  key: string
+): CSSOutput => {
+  let definition: TypeDefinition | undefined;
+
+  if (type === "headline") {
+    definition = (DEFAULT_HEADLINE as TypeDefinitionHeadlines)[key];
+  } else {
+    definition = (DEFAULT_TEXT as TypeDefinitionTexts)[key];
+  }
+
+  if (!definition) {
+    throw new Error(`Type definition for ${type} ${key} not found`);
+  }
+
+  const styles: CSSOutput = {
+    fontFamily: definition.fontFamily,
+    fontWeight: definition.fontWeight,
+    lineHeight: definition.lineHeight,
+    letterSpacing: definition.letterSpacing,
+    textTransform: definition.textTransform,
+    fontSize: definition.fontSize,
+  };
+
+  if (definition.clamp) {
+    styles.fontSize = createRemClamp(...definition.clamp);
+  }
+
+  return styles;
+};