@dmsi/wedgekit-react 0.0.551 → 0.0.552

package/src/components/DebugJson.tsx

@@ -1,28 +0,0 @@
-"use client";
-import { useState } from "react";
-
-export function DebugJson({ data, id }: { data: unknown; id: string }) {
-  const [open, setOpen] = useState(false);
-
-  if (process.env.NODE_ENV !== "development") {
-    return null;
-  }
-
-  return (
-    <div
-      id={id}
-      className="p-2 rounded bg-neutral-100  border border-red-500 my-4"
-    >
-      <button
-        id={id ? `${id}-toggle-button` : undefined}
-        onClick={() => setOpen((prev) => !prev)}
-        className="px-4 py-2 border rounded bg-white"
-      >
-        {open ? "Hide JSON" : "Show JSON"}
-      </button>
-      {open && <pre className="mt-4">{JSON.stringify(data, null, 4)}</pre>}
-    </div>
-  );
-}
-
-DebugJson.displayName = "DebugJson";

package/src/components/Display.tsx

@@ -1,66 +0,0 @@
-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 DisplayVariant = "display1" | "display2";
-
-type DisplayProps = {
-  as?: Tags;
-  variant?: DisplayVariant;
-  id?: string;
-  testid?: string;
-} & AsProps<Tags> &
-  TextAttributes &
-  TypographyProps;
-
-export const Display = ({
-  className,
-  children,
-  as,
-  color,
-  align,
-  variant = "display1",
-  id,
-  testid,
-  ...props
-}: DisplayProps) => {
-  const defaultElement = variant === "display1" ? "h1" : "h2";
-  const Element = as ?? defaultElement;
-
-  return (
-    <Element
-      id={id}
-      data-testid={testid}
-      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>
-  );
-};
-
-Display.displayName = "Display";
-
-// Backward compatibility exports
-export const Display1 = (props: Omit<DisplayProps, "variant">) => (
-  <Display {...props} variant="display1" />
-);
-
-export const Display2 = (props: Omit<DisplayProps, "variant">) => (
-  <Display {...props} variant="display2" />
-);
-
-Display1.displayName = "Display1";
-Display2.displayName = "Display2";

package/src/components/EditingContext.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import { createContext, PropsWithChildren, useState } from "react";
-
-type EditingContextType<T> = {
-  data: T[];
-  setData: (row: number, key: string, value: string) => void;
-};
-
-// TODO: Update "any" we shouldn't have this for typesafe devx
-export const EditingContext = createContext<EditingContextType<unknown>>({
-  data: [],
-  setData: (/**row: number, key: string, value: string */) => {
-    // console.log(row, key, value);
-    // TODO: Implement setData logic
-  },
-});
-
-type EditingProviderProps<T> = PropsWithChildren<{ data: T[] }>;
-
-export const EditingProvider = <T,>({
-  data,
-  children,
-}: EditingProviderProps<T>) => {
-  const [actual, setData] = useState<T[]>(data);
-
-  const context: EditingContextType<T> = {
-    data: actual,
-    setData: (row: number, key: string, value: string) => {
-      setData((prev) => {
-        const newData = [...prev];
-        newData[row] = {
-          ...newData[row],
-          [key]: value,
-        };
-
-        return newData;
-      });
-    },
-  };
-
-  return <EditingContext value={context}>{children}</EditingContext>;
-};

package/src/components/EmptyCartIcon.tsx

@@ -1,18 +0,0 @@
-export function EmptyCartIcon() {
-  return (
-    <svg
-      width="211"
-      height="196"
-      viewBox="0 0 211 196"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M54.5305 76.3333H137.059L154.793 141.333L22.0305 141.333L54.5305 76.3333ZM3.60295 152.73C7.57878 159.165 14.4688 163 22.0305 163L160.697 163L167.381 187.516C168.67 192.228 172.95 195.5 177.835 195.5H199.502C205.493 195.5 210.335 190.647 210.335 184.667C210.335 178.687 205.493 173.833 199.502 173.833H186.112L155.79 62.6508C154.5 57.9383 150.221 54.6667 145.335 54.6667L47.8354 54.6667C43.7296 54.6667 39.9813 56.985 38.1396 60.6575L2.64963 131.648C-0.741211 138.419 -0.372879 146.295 3.60295 152.73ZM150.75 33C159.72 33 167 25.7308 167 16.75C167 7.76917 159.72 0.5 150.75 0.5C141.78 0.5 134.5 7.76917 134.5 16.75C134.5 25.7308 141.78 33 150.75 33ZM58.6666 16.75C58.6666 25.7308 51.3866 33 42.4166 33C33.4466 33 26.1666 25.7308 26.1666 16.75C26.1666 7.76917 33.4466 0.5 42.4166 0.5C51.3866 0.5 58.6666 7.76917 58.6666 16.75Z"
-        fill="#6B6D6D"
-      />
-    </svg>
-  );
-}

package/src/components/FilterGroup.tsx

@@ -1,264 +0,0 @@
-"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 = {
-  id?: string;
-  testid?: string;
-  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 = ({
-  id,
-  testid,
-  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
-      id={id}
-      data-testid={testid}
-      {...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
-            id={id ? `${id}-clear-all` : undefined}
-            testid={testid ? `${testid}-clear-all` : undefined}
-            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
-              id={id ? `${id}-search` : undefined}
-              testid={testid ? `${testid}-search` : undefined}
-              style={{ marginBottom: "2px" }}
-              onChange={onSearchChange}
-              value={searchValue}
-            />
-          )}
-
-          <div className={clsx(isSummary && `flex flex-col ${componentGap}`)}>
-            {visibleChildren}
-          </div>
-          {showShowMoreLink && (
-            <Link
-              id={id ? `${id}-show-more` : undefined}
-              testid={testid ? `${testid}-show-more` : undefined}
-              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 = {
-  id?: string;
-  testid?: string;
-  count?: number;
-  type?: FilterGroupProps["type"];
-};
-
-export const FilterGroupItem = ({
-  id,
-  testid,
-  type = "link",
-  children,
-  onClick,
-  ...props
-}: ComponentProps<React.ElementType> & FilterGroupItemProps) => {
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      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}
-        id={id ? `${id}-child` : undefined}
-        data-testid={testid ? `${testid}-child` : undefined}
-        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 as string}
-        {...props}
-      />
-    );
-  }
-
-  if (type === "summary") {
-    return (
-      <div>
-        <OptionPill removable {...props}>
-          {children}
-        </OptionPill>
-      </div>
-    );
-  }
-
-  return (
-    <Link variant="secondary" {...props}>
-      {children}
-    </Link>
-  );
-};

package/src/components/FullViewportBox.tsx

@@ -1,19 +0,0 @@
-export function FullViewportLayout({
-  children,
-  id,
-  testid,
-}: {
-  children: React.ReactNode;
-  id?: string;
-  testid?: string;
-}) {
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      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

@@ -1,97 +0,0 @@
-import { ComponentProps } from "react";
-import { Sizing } from "../types";
-import clsx from "clsx";
-
-type Breakpoint = "compact" | "desktop";
-
-export type GridColumnCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-export type GridProps = {
-  children: React.ReactNode;
-  /** Design system sizing context controlling gap + optional padding token sets */
-  sizing?: Sizing;
-  /** Adds the sizing-based padding classes when true */
-  padding?: boolean;
-  /** Base column count applied at all breakpoints unless overridden */
-  columns: GridColumnCount;
-  /** Explicit responsive column overrides. e.g. { mobile:2, desktop-compact:3, desktop:6 } */
-  responsive?: Partial<Record<Breakpoint, GridColumnCount>>;
-  id?: string;
-  testid?: string;
-  className?: string;
-  style?: ComponentProps<"div">["style"];
-} & Omit<ComponentProps<"div">, "className">;
-
-// Mapping helpers for sizing tokens -> gap & padding classes (centralised to reduce repetition)
-const GAP_BY_SIZING: Partial<Record<Sizing, string>> = {
-  none: "gap-0",
-  "layout-group":
-    "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
-  layout:
-    "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
-  container:
-    "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
-  component:
-    "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
-};
-
-const PADDING_BY_SIZING: Partial<Record<Sizing, string>> = {
-  none: "p-0",
-  container:
-    "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
-  layout:
-    "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
-  "layout-group":
-    "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
-  component:
-    "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
-};
-
-/** Build column classes from provided props. No child-count heuristics. */
-const buildColumnClasses = (
-  base: GridColumnCount,
-  responsive?: Partial<Record<Breakpoint, GridColumnCount>>,
-): string => {
-  const classes: string[] = [`grid-cols-${base}`];
-  if (responsive) {
-    (
-      Object.entries(responsive) as Array<[Breakpoint, GridColumnCount]>
-    ).forEach(([bp, value]) => {
-      if (value && value > 0) classes.push(`${bp}:grid-cols-${value}`);
-    });
-  }
-  return classes.join(" ");
-};
-
-export const Grid = ({
-  children,
-  sizing = "container",
-  padding,
-  columns,
-  responsive,
-  id,
-  testid,
-  style,
-  className,
-  ...rest
-}: GridProps) => {
-  const columnClasses = buildColumnClasses(columns, responsive);
-
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      style={style}
-      {...rest}
-      className={clsx(
-        "w-full grid",
-        GAP_BY_SIZING[sizing] ?? GAP_BY_SIZING.container,
-        padding && (PADDING_BY_SIZING[sizing] ?? PADDING_BY_SIZING.container),
-        columnClasses,
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-};

package/src/components/Heading.tsx

@@ -1,72 +0,0 @@
-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;
-  id?: string;
-  testid?: string;
-} & AsProps<Tags> &
-  TextAttributes &
-  TypographyProps;
-
-export const Heading = ({
-  className,
-  children,
-  as,
-  color,
-  align,
-  variant = "heading1",
-  id,
-  testid,
-  ...props
-}: HeadingProps) => {
-  const defaultElement =
-    variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
-  const Element = as ?? defaultElement;
-
-  return (
-    <Element
-      id={id}
-      data-testid={testid}
-      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

@@ -1,22 +0,0 @@
-import clsx from "clsx";
-import type { HTMLAttributes } from "react";
-
-type HorizontalDividerProps = HTMLAttributes<HTMLHRElement> & {
-  testid?: string;
-  hideOnMobile?: boolean;
-};
-
-export function HorizontalDivider({ id, testid, hideOnMobile, className, ...rest }: HorizontalDividerProps) {
-  return (
-    <hr
-      id={id}
-      data-testid={testid}
-      className={clsx(
-        "w-full border-t border-border-primary-normal",
-        hideOnMobile && "hidden desktop:block",
-        className
-      )}
-      {...rest}
-    />
-  );
-}

package/src/components/Icon.tsx

@@ -1,39 +0,0 @@
-import clsx from "clsx";
-import { IconSize } from "../types";
-import { ComponentProps } from "react";
-
-type IconProps = {
-  name: string;
-  size?: IconSize;
-  variant?: "outline" | "filled";
-  testid?: string;
-} & Omit<ComponentProps<"span">, "name">;
-
-export function Icon({
-  name,
-  size = 24,
-  variant = "outline",
-  testid,
-  ...props
-}: IconProps) {
-  const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
-  const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
-  return (
-    <span
-      {...props}
-      data-testid={testid}
-      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>
-  );
-}

package/src/components/ImagePlaceholder.tsx

@@ -1,22 +0,0 @@
-import { SVGProps, useId } from "react";
-export function ImagePlaceholder(props: SVGProps<SVGSVGElement>) {
-  const clipId = useId();
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={242}
-      height={243}
-      fill="none"
-      {...props}
-    >
-      <g clipPath={`url(#${clipId})`}>
-        <rect width={props.width} height={props.width} fill="#F7F7F7" rx={2} />
-      </g>
-      <defs>
-        <clipPath id={clipId}>
-          <rect width={props.width} height={props.width} fill="#fff" rx={2} />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}