@dmsi/wedgekit-react 0.0.2

package/src/components/Stack.tsx

@@ -0,0 +1,179 @@
+import clsx from "clsx";
+import {
+  BackgroundColorTokens,
+  BorderColorTokens,
+  Elevation,
+  ItemsAlign,
+  JustifyAlign,
+  Sizing,
+} from "../types";
+import { ComponentProps, CSSProperties } from "react";
+
+type StackProps = {
+  children: React.ReactNode;
+  horizontal?: boolean;
+  horizontalMobile?: boolean;
+  padding?: boolean;
+  paddingX?: boolean;
+  sizing?: Sizing;
+  flexShrink?: number;
+  flexGrow?: number;
+  elevation?: Elevation;
+  rounded?: boolean;
+  centered?: boolean;
+  width?: number | "full" | "fit";
+  maxWidth?: number;
+  minWidth?: number;
+  height?: number | "full";
+  maxHeight?: number;
+  borderColor?: BorderColorTokens;
+  backgroundColor?: BackgroundColorTokens;
+  overflowY?: "hidden" | "scroll" | "auto" | "inherit";
+  overflowX?: "hidden" | "scroll" | "auto" | "inherit";
+  zIndex?: number;
+  position?: CSSProperties['position'];
+  top?: number;
+  left?: number;
+} & FlexProps &
+  Omit<ComponentProps<"div">, "className">;
+
+export interface FlexProps {
+  items?: ItemsAlign;
+  justify?: JustifyAlign;
+  grow?: boolean;
+  flexGrow?: string | number;
+  flexShrink?: string | number;
+}
+
+const useFlexClassNames = ({ items, justify, grow }: FlexProps) =>
+  clsx(
+    "flex",
+    items === "start" && "items-start",
+    grow && "grow",
+    items === "start" && "items-start",
+    items === "center" && "items-center",
+    items === "end" && "items-end",
+    items === "start-center" && "items-start desktop:items-center",
+    justify === "start" && "justify-start",
+    justify === "center" && "justify-center",
+    justify === "end" && "justify-end",
+    justify === "end" && "justify-end",
+    justify === "between" && "justify-between",
+    justify === "around" && "justify-around",
+  );
+
+export const Stack = ({
+  children,
+  items,
+  justify,
+  grow,
+  padding,
+  paddingX,
+  horizontal,
+  horizontalMobile,
+  elevation = 0,
+  rounded,
+  centered,
+  width,
+  maxWidth,
+  minWidth,
+  height,
+  maxHeight,
+  borderColor,
+  backgroundColor,
+  sizing = "none",
+  overflowY = "inherit",
+  overflowX = "inherit",
+  flexShrink,
+  flexGrow,
+  position,
+  top,
+  left
+}: StackProps) => {
+  const flexClassNames = useFlexClassNames({ items, justify, grow });
+
+  return (
+    <div
+      style={{
+        height:
+          height === "full"
+            ? "100%"
+            : height !== undefined
+              ? `${height}px`
+              : undefined,
+        maxHeight: maxHeight !== undefined ? `${maxHeight}px` : undefined,
+        maxWidth: maxWidth !== undefined ? `${maxWidth}px` : undefined,
+        width:
+          width !== undefined && typeof width === "number"
+            ? `${width}px`
+            : undefined,
+        minWidth: minWidth !== undefined ? `${minWidth}px` : undefined,
+        border: borderColor
+          ? `1px solid var(--color-${borderColor})`
+          : undefined,
+        backgroundColor: backgroundColor
+          ? `var(--color-${backgroundColor})`
+          : undefined,
+        flexGrow: flexGrow !== undefined ? flexGrow : undefined,
+        flexShrink: flexShrink !== undefined ? flexShrink : undefined,
+        position: position !== undefined ? position : undefined,
+        top: top !== undefined ? `${top}px` : undefined,
+        left: left !== undefined ? `${left}px` : undefined,
+      }}
+      className={clsx(
+        "scrollbar-thin",
+        width !== "fit" && "w-full",
+        width === "full" && "w-full",
+        centered && "mx-auto",
+        overflowY == "auto" && "overflow-y-auto",
+        overflowY == "hidden" && "overflow-y-hidden",
+        overflowY == "scroll" && "overflow-y-scroll",
+        overflowX == "auto" && "overflow-x-auto",
+        overflowX == "hidden" && "overflow-x-hidden",
+        overflowX == "scroll" && "overflow-x-scroll",
+        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",
+        paddingX &&
+          sizing === "container" &&
+          "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+        paddingX &&
+          sizing === "layout" &&
+          "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+        paddingX &&
+          sizing === "layout-group" &&
+          "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
+        paddingX &&
+          sizing === "component" &&
+          "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        horizontal ? "desktop:flex-row" : "desktop:flex-col",
+        horizontalMobile ? "flex-row" : "flex-col",
+        flexClassNames,
+        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",
+        elevation === 0 && "shadow-none",
+        elevation === 2 && "shadow-2",
+        elevation === 4 && "shadow-4",
+        elevation === 16 && "shadow-16",
+        rounded && "rounded",
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/StatusPill.tsx

@@ -0,0 +1,51 @@
+import { PropsWithChildren } from "react";
+import { Label } from "./Label";
+import clsx from "clsx";
+
+type StatusPillProps = PropsWithChildren<{
+  intent?: "neutral" | "warning" | "success" | "critical";
+  state?: "in-progress" | "completed";
+}>;
+
+
+export const StatusPill = ({
+  children,
+  state = "in-progress",
+  intent = "neutral",
+  ...props
+}: StatusPillProps) => {
+  const textColor = clsx(
+    state === "completed" && ["neutral", "critical"].includes(intent)
+      ? "text-text-on-action-primary-normal"
+      : "text-neutral-500",
+  );
+
+  const backgroundColor = clsx({
+    "bg-neutral-200": intent === "neutral" && state === "in-progress",
+    "bg-text-primary-normal": intent === "neutral" && state === "completed",
+    "bg-warning-200": intent === "warning" && state === "in-progress",
+    "bg-background-warning-normal":
+      intent === "warning" && state === "completed",
+    "bg-success-200": intent === "success" && state === "in-progress",
+    "bg-background-success-normal":
+      intent === "success" && state === "completed",
+    "bg-critical-200": intent === "critical" && state === "in-progress",
+    "bg-background-critical-normal":
+      intent === "critical" && state === "completed",
+  });
+
+  return (
+    <div
+      {...props}
+      className={clsx(
+        "px-desktop-component-padding py-desktop-compact-component-padding rounded flex items-center",
+        textColor,
+        backgroundColor,
+      )}
+    >
+      <Label>{children}</Label>
+    </div>
+  );
+};
+
+StatusPill.displayName = "StatusPill";

package/src/components/Stepper.tsx

@@ -0,0 +1,91 @@
+"use client";
+import { Button } from "./Button";
+import { InputBase } from "./Input";
+import { Icon } from "./Icon";
+import clsx from "clsx";
+
+type StepperProps = {
+  error?: boolean;
+  disabled?: boolean;
+  id?: string;
+  value: number;
+  setValue: React.Dispatch<React.SetStateAction<number>>;
+  onIncrease?: () => void;
+  onDecrease?: () => void;
+};
+
+export const Stepper = ({
+  error,
+  disabled,
+  value,
+  setValue,
+  onDecrease,
+  onIncrease,
+  ...props
+}: StepperProps) => {
+  function handleIncrease() {
+    setValue((prevVal) => prevVal + 1);
+    onIncrease?.();
+  }
+
+  function handleDecrease() {
+    setValue((prevVal) => prevVal - 1);
+    onDecrease?.();
+  }
+
+  return (
+    <div className="flex items-center gap-desktop-component-gap">
+      <Button
+        iconOnly
+        variant="tertiary"
+        leftIcon={
+          <span
+            className={clsx(
+              !disabled || (value > 0 && "text-icon-action-primary-normal"),
+              disabled || (value === 0 && "text-icon-action-primary-disabled"),
+              "contents",
+            )}
+          >
+            <Icon name="remove" />
+          </span>
+        }
+        onClick={handleDecrease}
+        disabled={disabled || value === 0}
+      />
+
+      <div className="flex-1">
+        <InputBase
+          {...props}
+          id={props.id}
+          type="number"
+          align="center"
+          value={value}
+          onChange={(e) => setValue(+e.target.value)}
+          error={error}
+          disabled={disabled}
+          className="!w-6 !h-4.5 !px-0 disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"
+        />
+      </div>
+
+      <Button
+        iconOnly
+        variant="tertiary"
+        leftIcon={
+          <span
+            className={clsx(
+              !disabled && "text-icon-action-primary-normal",
+              disabled && "text-icon-action-primary-disabled",
+              "contents",
+            )}
+          >
+            <Icon name="add" />
+          </span>
+        }
+        onClick={handleIncrease}
+        disabled={disabled}
+      />
+    </div>
+  );
+};
+
+Stepper.displayName = "Stepper";

package/src/components/Subheader.tsx

@@ -0,0 +1,44 @@
+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 SubheaderProps = {
+  as?: Tags;
+} & AsProps<Tags> &
+  TextAttributes &
+  TypographyProps;
+
+export const Subheader = ({
+  className,
+  children,
+  as = "span",
+  align,
+  color,
+  tall,
+  ...props
+}: SubheaderProps) => {
+  const Element = as;
+  return (
+    <Element
+      className={clsx(
+        typography.subheader,
+        className,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6",
+      )}
+      style={{
+        ...props.style,
+        color: color ? `var(--color-${color})` : undefined,
+      }}
+      {...props}
+    >
+      {children}
+    </Element>
+  );
+};
+
+Subheader.displayName = "Subheader";

package/src/components/Surface.tsx

@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import { HTMLAttributes, PropsWithChildren } from "react";
+
+type SurfaceProps = HTMLAttributes<HTMLDivElement> &
+  PropsWithChildren<{
+    className?: string;
+    elevation?: 0 | 2 | 4 | 16;
+  }>;
+
+export const Surface = ({
+  children,
+  className,
+  elevation = 0,
+  ...props
+}: SurfaceProps) => {
+  return (
+    <div
+      className={clsx(
+        "rounded-base",
+        {
+          "shadow-2": elevation === 2,
+          "shadow-4": elevation === 4,
+          "shadow-16": elevation === 16,
+        },
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+Surface.displayName = "Surface";