feat: ad

d container and typography components

Author: SaadBazaz

README.md

@@ -47,15 +47,19 @@ We're looking for maintainers and contributors!
   - [x] Stack
   - [x] Box
   - [x] Navigation Rail
-  - [ ] Container
-  - [ ] Typography
+  - [x] Container
+  - [x] Typography
 
 ### Credits
 
 Huge shout out to Elizabeth Mitchell ([asyncLiz](https://github.com/asyncliz/)) and the rest of the Material Design team for their awesome Web Components implementation.
 
 Thank you [Travis Reeder](https://github.com/treeder) for your Web Component implementation of Navigation Rail. I had to copy it to this project. I couldn't use yours directly because it would import `@material/web` again and bring conflicts.
 
+Thanks for making the crappy, brain-dead wrapper components:
+
+- [ChatGPT](https://chatgpt.com/share/574a9601-8927-4992-884e-16c58f24a982)
+
 Thanks for improving the demo:
 
 - [TalhaHere12](https://github.com/TalhaHere12)

packages/ui/src/container/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+const Container = React.forwardRef(
+  (
+    {
+      component: Component = "div",
+      disableGutters = false,
+      fixed = false,
+      maxWidth = "lg",
+      className,
+      ...props
+    }: any,
+    ref
+  ) => {
+    const maxWidthClasses = {
+      xs: "max-w-xs",
+      sm: "max-w-sm",
+      md: "max-w-md",
+      lg: "max-w-lg",
+      xl: "max-w-xl",
+      false: "",
+    };
+
+    return (
+      <Component
+        ref={ref}
+        className={twMerge(
+          "container",
+          disableGutters && "px-0",
+          !disableGutters && "mx-auto",
+          !fixed && maxWidth && [maxWidthClasses[maxWidth]],
+          fixed && "w-full",
+          className
+        )}
+        {...props}
+      >
+        {props.children}
+      </Component>
+    );
+  }
+);
+
+export default Container;

packages/ui/src/typography/index.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+
+const defaultVariantMapping = {
+  h1: { component: "h1", className: "text-4xl font-bold" },
+  h2: { component: "h2", className: "text-3xl font-bold" },
+  h3: { component: "h3", className: "text-2xl font-bold" },
+  h4: { component: "h4", className: "text-xl font-bold" },
+  h5: { component: "h5", className: "text-lg font-bold" },
+  h6: { component: "h6", className: "text-base font-bold" },
+  subtitle1: { component: "h6", className: "text-base font-medium" },
+  subtitle2: { component: "h6", className: "text-sm font-medium" },
+  body1: { component: "p", className: "text-base" },
+  body2: { component: "p", className: "text-sm" },
+  button: { component: "span", className: "text-sm uppercase font-medium" },
+  caption: { component: "span", className: "text-xs" },
+  overline: { component: "span", className: "text-xs uppercase" },
+  inherit: { component: "p", className: "" },
+};
+
+const alignClasses = {
+  center: "text-center",
+  justify: "text-justify",
+  left: "text-left",
+  right: "text-right",
+  inherit: "",
+};
+
+const Typography = React.forwardRef(
+  (
+    {
+      component: _Component,
+      variant = "body1",
+      align = "inherit",
+      gutterBottom = false,
+      noWrap = false,
+      paragraph = false,
+      className,
+      variantMapping,
+      ...props
+    }: any,
+    ref
+  ) => {
+    const _variantMapping = variantMapping || defaultVariantMapping
+
+    const variantProps = (!paragraph && _variantMapping[variant]) || { component: _Component || "p", className: "" };
+
+    const appliedClasses = twMerge(
+      variantProps.className,
+      alignClasses[align],
+      gutterBottom && "mb-2",
+      noWrap && "truncate line-clamp-1",
+    //   paragraph && "mb-6",
+      className
+    );
+
+    const Component = _Component || (variantProps.component || variantProps);
+
+    return <Component ref={ref} className={appliedClasses} {...props}>{props.children}</Component>;
+  }
+);
+
+export default Typography;