@dmsi/wedgekit-react 0.0.4

package/src/components/FullViewportBox.tsx

@@ -0,0 +1,11 @@
+export function FullViewportLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col min-h-screen min-w-screen p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding items-center justify-center bg-background-grouped-secondary-normal">
+      {children}
+    </div>
+  );
+}

package/src/components/Grid.tsx

@@ -0,0 +1,75 @@
+import clsx from "clsx";
+
+type GridProps = {
+  children?: React.ReactNode;
+  columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  sizing?: "container" | "layout" | "layout-group" | "component";
+  padding?: boolean;
+  fullWidth?: boolean;
+};
+export function Grid({
+  children,
+  columns = 1,
+  sizing,
+  padding,
+  fullWidth = false,
+}: GridProps) {
+  const gridClass =
+    columns === 1
+      ? "grid-cols-1"
+      : columns === 2
+        ? "grid-cols-2"
+        : columns === 3
+          ? "grid-cols-3"
+          : columns === 4
+            ? "grid-cols-4"
+            : columns === 5
+              ? "grid-cols-5"
+              : columns === 6
+                ? "grid-cols-6"
+                : columns === 7
+                  ? "grid-cols-7"
+                  : columns === 8
+                    ? "grid-cols-8"
+                    : columns === 9
+                      ? "grid-cols-9"
+                      : columns === 10
+                        ? "grid-cols-10"
+                        : columns === 11
+                          ? "grid-cols-11"
+                          : columns === 12
+                            ? "grid-cols-12"
+                            : "";
+
+  return (
+    <div
+      className={clsx(
+        "grid",
+        gridClass,
+        padding &&
+          sizing === "container" &&
+          "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding &&
+          sizing === "layout" &&
+          "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding &&
+          sizing === "layout-group" &&
+          "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding &&
+          sizing === "component" &&
+          "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        sizing === "container" &&
+          "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-desktop-compact-container-gap",
+        sizing === "layout" &&
+          "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap",
+        sizing === "layout-group" &&
+          "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap",
+        sizing === "component" &&
+          "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap",
+        fullWidth && "w-full",
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/GridContainer.tsx

@@ -0,0 +1,124 @@
+import { ComponentProps, Children } from "react";
+import { Sizing } from "../types";
+import clsx from "clsx";
+
+type GridContainerProps = {
+  children: React.ReactNode;
+  sizing?: Sizing;
+  padding?: boolean;
+  hasSideMenu?: boolean;
+  columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+} & Omit<ComponentProps<"div">, "className">;
+
+// Grid class configuration maps for better maintainability
+const COLUMNS_WITH_SIDE_MENU_MAP: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 md:grid-cols-3",
+  4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  5: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  6: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  7: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  8: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  9: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  10: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  11: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
+  12: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
+};
+
+const COLUMNS_WITHOUT_SIDE_MENU_MAP: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 md:grid-cols-3",
+  4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  5: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
+  6: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
+  7: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7",
+  8: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8",
+  9: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-9",
+  10: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10",
+  11: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-11",
+  12: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12",
+};
+
+const getChildCountBasedClasses = (
+  childCount: number,
+  hasSideMenu: boolean,
+): string => {
+  if (hasSideMenu) {
+    if (childCount <= 1) return "grid-cols-1";
+    if (childCount <= 2) return "sm:grid-cols-2";
+    if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
+    if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3";
+    return "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6";
+  }
+
+  if (childCount <= 1) return "grid-cols-1";
+  if (childCount <= 2) return "sm:grid-cols-2";
+  if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
+  if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
+  if (childCount <= 6)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
+  if (childCount === 7)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
+  if (childCount <= 11)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8";
+  return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12";
+};
+
+const getGridClasses = (
+  childCount: number,
+  hasSideMenu?: boolean,
+  columns?: number,
+) => {
+  // If explicit columns are set, use the appropriate map
+  if (columns) {
+    const map = hasSideMenu
+      ? COLUMNS_WITH_SIDE_MENU_MAP
+      : COLUMNS_WITHOUT_SIDE_MENU_MAP;
+    return map[columns] ?? map[12]; // Fallback to 12 columns if invalid column count
+  }
+
+  // Otherwise, use child count based logic
+  return getChildCountBasedClasses(childCount, hasSideMenu ?? false);
+};
+
+export const GridContainer = ({
+  children,
+  sizing = "container",
+  padding,
+  hasSideMenu = false,
+  columns,
+}: GridContainerProps) => {
+  const childCount = Children.count(children);
+  return (
+    <div
+      className={clsx(
+        padding &&
+          sizing === "container" &&
+          "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding &&
+          sizing === "layout" &&
+          "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding &&
+          sizing === "layout-group" &&
+          "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding &&
+          sizing === "component" &&
+          "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        sizing === "layout-group" &&
+          "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+        sizing === "layout" &&
+          "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+        sizing === "container" &&
+          "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+        sizing === "component" &&
+          "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
+        "w-full grid",
+        getGridClasses(childCount, hasSideMenu, columns),
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Heading.tsx

@@ -0,0 +1,66 @@
+import clsx from "clsx";
+import { AsProps, TextAttributes, TypographyProps } from "../types";
+import { typography } from "../classNames";
+
+type Tags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
+
+type HeadingVariant = "heading1" | "heading2" | "heading3";
+
+type HeadingProps = {
+  as?: Tags;
+  variant?: HeadingVariant;
+} & AsProps<Tags> &
+  TextAttributes &
+  TypographyProps;
+
+export const Heading = ({
+  className,
+  children,
+  as,
+  color,
+  align,
+  variant = "heading1",
+  ...props
+}: HeadingProps) => {
+  const defaultElement =
+    variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
+  const Element = as ?? defaultElement;
+
+  return (
+    <Element
+      className={clsx(
+        typography[variant],
+        className,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+      )}
+      style={{
+        ...props.style,
+        color: color ? `var(--color-${color})` : undefined,
+      }}
+      {...props}
+    >
+      {children}
+    </Element>
+  );
+};
+
+Heading.displayName = "Heading";
+
+// Backward compatibility exports
+export const Heading1 = (props: Omit<HeadingProps, "variant">) => (
+  <Heading {...props} variant="heading1" />
+);
+
+export const Heading2 = (props: Omit<HeadingProps, "variant">) => (
+  <Heading {...props} variant="heading2" />
+);
+
+export const Heading3 = (props: Omit<HeadingProps, "variant">) => (
+  <Heading {...props} variant="heading3" />
+);
+
+Heading1.displayName = "Heading1";
+Heading2.displayName = "Heading2";
+Heading3.displayName = "Heading3";

package/src/components/HorizontalDivider.tsx

@@ -0,0 +1,3 @@
+export function HorizontalDivider() {
+  return <hr className="w-full border-t border-border-primary-normal" />;
+}

package/src/components/Icon.tsx

@@ -0,0 +1,36 @@
+import clsx from "clsx";
+import { IconSize } from "../types";
+import { ComponentProps } from "react";
+
+type IconProps = {
+  name: string;
+  size?: IconSize;
+  variant?: "outline" | "filled";
+} & Omit<ComponentProps<"span">, "name">;
+
+export function Icon({
+  name,
+  size = 24,
+  variant = "outline",
+  ...props
+}: IconProps) {
+  const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
+  const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
+  return (
+    <span
+      {...props}
+      className={clsx(
+        "icon",
+        `icon-${size}`,
+        // size === 16 ? "font-normal" : "font-light", // size 16 font weight is not working as normal from before
+        props.className,
+      )}
+      style={{
+        fontVariationSettings: variantStyle + `, ${weightStyle}`,
+        ...props.style,
+      }}
+    >
+      {name}
+    </span>
+  );
+}