@dmsi/wedgekit-react 0.0.2

package/src/components/FilterGroup.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import { ComponentProps, useState, Children, isValidElement } from "react";
+import { Label } from "./Label";
+
+import { Checkbox } from "./Checkbox";
+import { OptionPill } from "./OptionPill";
+import clsx from "clsx";
+import { Link } from "./Link";
+import { Search } from "./Search";
+import {
+  baseTransition,
+  componentGap,
+  componentPaddingBottom,
+  componentPaddingY,
+  layoutGroupGap,
+  layoutPaddingBottom,
+} from "../classNames";
+import { Icon } from "./Icon";
+
+type FilterGroupProps = {
+  label: string;
+  open?: boolean;
+  showMore?: boolean;
+  type?: "link" | "checkbox" | "summary";
+  onShowMore?: () => void;
+  onClearAll?: () => void;
+} & (
+  | {
+      showSearchField: true;
+      searchValue: string;
+      onSearchChange: React.ChangeEventHandler<HTMLInputElement>;
+    }
+  | {
+      showSearchField?: false | undefined;
+      searchValue?: string;
+      onSearchChange?: React.ChangeEventHandler<HTMLInputElement>;
+    }
+);
+
+export const FilterGroup = ({
+  label,
+  type = "link",
+  open = false,
+  showMore = false,
+  onShowMore,
+  onClearAll,
+  children,
+  showSearchField = false,
+  searchValue,
+  onSearchChange,
+  ...props
+}: ComponentProps<"div"> & FilterGroupProps) => {
+  const isSummary = type === "summary";
+  const [internalExpanded, setInternalExpanded] = useState(open);
+  const [showAllItems, setShowAllItems] = useState(false);
+  const isExpanded = open || internalExpanded;
+  const childArray = Children.toArray(children).filter(isValidElement);
+  const shouldShowAll = isSummary || showAllItems;
+  const visibleChildren = childArray.slice(
+    0,
+    shouldShowAll ? childArray.length : 5,
+  );
+  const showShowMoreLink =
+    showMore &&
+    !isSummary &&
+    childArray.length > 5 &&
+    !showAllItems &&
+    isExpanded;
+
+  return (
+    <div
+      {...props}
+      className={clsx(
+        "border-b border-border-primary-normal",
+        isSummary ? layoutPaddingBottom : componentPaddingBottom,
+      )}
+    >
+      <div
+        className={clsx(
+          "flex items-center justify-between cursor-pointer",
+          layoutGroupGap,
+        )}
+        onClick={handleToggleExpanded}
+      >
+        <Label>{label}</Label>
+
+        {type !== "summary" ? (
+          <Icon
+            name="keyboard_arrow_down"
+            className={clsx(
+              baseTransition.replace(
+                "transition-colors",
+                "transition-transform",
+              ),
+              isExpanded && "rotate-180",
+              "text-icon-action-primary-normal",
+            )}
+          />
+        ) : (
+          <Link
+            className={clsx("block", componentPaddingY)}
+            onClick={handleClearAll}
+          >
+            Clear All
+          </Link>
+        )}
+      </div>
+
+      <div
+        className={clsx(
+          "grid",
+          baseTransition.replace(
+            "transition-colors",
+            "transition-[grid-template-rows]",
+          ),
+          isExpanded || isSummary ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+        )}
+      >
+        <div
+          className={clsx(
+            "overflow-hidden",
+            componentGap,
+            (isExpanded || isSummary || internalExpanded) &&
+              "mt-mobile-component-gap desktop:mt-desktop-component-gap compact:mt-desktop-compact-component-gap",
+          )}
+        >
+          {!isSummary && showSearchField && (
+            <Search
+              style={{ marginBottom: '2px' }}
+              onChange={onSearchChange}
+              value={searchValue}
+            />
+          )}
+
+          <div className={clsx(isSummary && `flex flex-col ${componentGap}`)}>
+            {visibleChildren}
+          </div>
+          {showShowMoreLink && (
+            <Link
+              className={clsx("block", "!items-start", componentPaddingY)}
+              onClick={handleOnShowMore}
+            >
+              Show More
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  function handleOnShowMore(e: React.MouseEvent<HTMLElement>) {
+    e.stopPropagation();
+    setShowAllItems(true);
+    onShowMore?.();
+  }
+
+  function handleToggleExpanded(e: React.MouseEvent<HTMLElement>) {
+    if (type === "summary") return;
+    e.stopPropagation();
+    setInternalExpanded(!internalExpanded);
+  }
+
+  function handleClearAll(e: React.MouseEvent<HTMLElement>) {
+    e.stopPropagation();
+    onClearAll?.();
+  }
+};
+
+type FilterGroupItemProps = {
+  count?: number;
+  type?: FilterGroupProps["type"];
+};
+
+export const FilterGroupItem = ({
+  type = "link",
+  children,
+  onClick,
+  ...props
+}: ComponentProps<React.ElementType> & FilterGroupItemProps) => {
+  return (
+    <div
+      onClick={handleClick}
+      {...props}
+      className={clsx(
+        "flex items-center justify-between *:first:flex-1 cursor-pointer",
+        type !== "summary"
+          ? "*:first:py-mobile-component-padding *:first:desktop:py-desktop-component-padding *:first:compact:py-desktop-compact-component-padding"
+          : "",
+      )}
+    >
+      <FilterGroupItemChildComponent {...props} type={type} count={props.count}>
+        <span className="flex items-center justify-between w-full">
+          {children}
+
+          {type !== "summary" && props.count && <span>({props.count})</span>}
+        </span>
+      </FilterGroupItemChildComponent>
+    </div>
+  );
+
+  function handleClick(e: React.MouseEvent<HTMLElement>) {
+    e.stopPropagation();
+    onClick?.();
+  }
+};
+
+const FilterGroupItemChildComponent = ({
+  type = "link",
+  children,
+  ...props
+}: ComponentProps<React.ElementType> & {
+  type: FilterGroupItemProps["type"];
+}) => {
+  if (type === "checkbox") {
+    return <Checkbox paragraphClassName="w-full" label={children} {...props} />;
+  }
+
+  if (type === "summary") {
+    return (
+      <div>
+        <OptionPill removable {...props}>
+          {children}
+        </OptionPill>
+      </div>
+    );
+  }
+
+  return (
+    <Link variant="secondary" {...props}>
+      {children}
+    </Link>
+  );
+};

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>
+  );
+}