willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-layout/src/components/Card/index.tsx

@@ -0,0 +1,174 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import classNames from "classnames";
+
+export type CardVariant = "surface" | "soft" | "outline";
+export type CardPadding = "sm" | "md" | "lg";
+
+type CardBaseProps = {
+  variant?: CardVariant;
+  padding?: CardPadding;
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  media?: ReactNode;
+  footer?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+  children?: ReactNode;
+};
+
+type CardAnchorProps = CardBaseProps & {
+  href: string;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CardBaseProps | "href">;
+
+type CardArticleProps = CardBaseProps & {
+  href?: undefined;
+} & Omit<HTMLAttributes<HTMLElement>, keyof CardBaseProps>;
+
+export type CardProps = CardAnchorProps | CardArticleProps;
+
+export function Card(props: CardProps) {
+  if (isCardAnchorProps(props)) {
+    const {
+      variant = "surface",
+      padding = "md",
+      eyebrow,
+      title,
+      description,
+      media,
+      footer,
+      actions,
+      className,
+      children,
+      href,
+      target,
+      rel,
+      ...anchorProps
+    } = props;
+    const resolvedRel = target === "_blank" && !rel ? "noreferrer" : rel;
+
+    return (
+      <a
+        {...anchorProps}
+        className={getCardClassName({
+          variant,
+          padding,
+          interactive: true,
+          className,
+        })}
+        href={href}
+        target={target}
+        rel={resolvedRel}
+      >
+        {renderCardContent({
+          eyebrow,
+          title,
+          description,
+          media,
+          footer,
+          actions,
+          children,
+        })}
+      </a>
+    );
+  }
+
+  const {
+    variant = "surface",
+    padding = "md",
+    eyebrow,
+    title,
+    description,
+    media,
+    footer,
+    actions,
+    className,
+    children,
+    ...articleProps
+  } = props;
+
+  return (
+    <article
+      {...articleProps}
+      className={getCardClassName({
+        variant,
+        padding,
+        interactive: false,
+        className,
+      })}
+    >
+      {renderCardContent({
+        eyebrow,
+        title,
+        description,
+        media,
+        footer,
+        actions,
+        children,
+      })}
+    </article>
+  );
+}
+
+const getCardClassName = (options: {
+  variant: CardVariant;
+  padding: CardPadding;
+  interactive: boolean;
+  className?: string;
+}) => {
+  return classNames(
+    "willa-card",
+    `willa-card--${options.variant}`,
+    `willa-card--${options.padding}`,
+    options.interactive && "willa-card--interactive",
+    options.className,
+  );
+};
+
+const isCardAnchorProps = (props: CardProps): props is CardAnchorProps => {
+  return typeof props.href === "string";
+};
+
+const renderCardContent = (options: {
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  media?: ReactNode;
+  footer?: ReactNode;
+  actions?: ReactNode;
+  children?: ReactNode;
+}) => {
+  return (
+    <>
+      {options.media ? (
+        <div className="willa-card-media">{options.media}</div>
+      ) : null}
+      <div className="willa-card-content">
+        {options.eyebrow ? (
+          <div className="willa-card-eyebrow">{options.eyebrow}</div>
+        ) : null}
+        {options.title ? (
+          <h3 className="willa-card-title">{options.title}</h3>
+        ) : null}
+        {options.description ? (
+          <p className="willa-card-description">{options.description}</p>
+        ) : null}
+        {options.children ? (
+          <div className="willa-card-body">{options.children}</div>
+        ) : null}
+      </div>
+      {options.footer || options.actions ? (
+        <div className="willa-card-footer">
+          {options.footer ? (
+            <div className="willa-card-footer-content">{options.footer}</div>
+          ) : null}
+          {options.actions ? (
+            <div className="willa-card-actions">{options.actions}</div>
+          ) : null}
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+Card.displayName = "Card";

package/packages/willa-layout/src/components/Container/index.css

@@ -0,0 +1,55 @@
+.willa-container {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+
+.willa-container--centered {
+  margin-inline: auto;
+}
+
+.willa-container--xs {
+  max-width: 32rem;
+}
+
+.willa-container--sm {
+  max-width: 42rem;
+}
+
+.willa-container--md {
+  max-width: 56rem;
+}
+
+.willa-container--lg {
+  max-width: 72rem;
+}
+
+.willa-container--xl {
+  max-width: 88rem;
+}
+
+.willa-container--full {
+  max-width: none;
+}
+
+.willa-container--padding-none {
+  padding-inline: 0;
+}
+
+.willa-container--padding-sm {
+  padding-inline: 0.75rem;
+}
+
+.willa-container--padding-md {
+  padding-inline: 1rem;
+}
+
+.willa-container--padding-lg {
+  padding-inline: 1.5rem;
+}
+
+@media (max-width: 767px) {
+  .willa-container--padding-lg {
+    padding-inline: 1rem;
+  }
+}

package/packages/willa-layout/src/components/Container/index.tsx

@@ -0,0 +1,43 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+import classNames from "classnames";
+
+export type ContainerSize = "xs" | "sm" | "md" | "lg" | "xl" | "full";
+export type ContainerPadding = "none" | "sm" | "md" | "lg";
+
+export type ContainerProps = {
+  as?: ElementType;
+  size?: ContainerSize;
+  padding?: ContainerPadding;
+  centered?: boolean;
+  className?: string;
+  children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLElement>, "children">;
+
+export function Container(props: ContainerProps) {
+  const {
+    as: Component = "div",
+    size = "lg",
+    padding = "md",
+    centered = true,
+    className,
+    children,
+    ...containerProps
+  } = props;
+
+  return (
+    <Component
+      {...containerProps}
+      className={classNames(
+        "willa-container",
+        `willa-container--${size}`,
+        `willa-container--padding-${padding}`,
+        centered && "willa-container--centered",
+        className,
+      )}
+    >
+      {children}
+    </Component>
+  );
+}
+
+Container.displayName = "Container";

package/packages/willa-layout/src/components/Grid/index.css

@@ -0,0 +1,9 @@
+.willa-grid {
+  display: grid;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.willa-grid > * {
+  min-width: 0;
+}

package/packages/willa-layout/src/components/Grid/index.tsx

@@ -0,0 +1,100 @@
+import type {
+  CSSProperties,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+} from "react";
+import classNames from "classnames";
+
+export type GridGapPreset = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+export type GridGap = GridGapPreset | (string & {});
+export type GridAlign = "start" | "center" | "end" | "stretch";
+export type GridJustify = "start" | "center" | "end" | "stretch";
+
+export type GridProps = {
+  as?: ElementType;
+  columns?: number | string;
+  minColumnWidth?: string;
+  gap?: GridGap;
+  rowGap?: GridGap;
+  columnGap?: GridGap;
+  align?: GridAlign;
+  justify?: GridJustify;
+  width?: string;
+  className?: string;
+  children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLElement>, "children">;
+
+export function Grid(props: GridProps) {
+  const {
+    style,
+    rowGap,
+    columns,
+    columnGap,
+    className,
+    children,
+    gap = "md",
+    width = "100%",
+    align = "stretch",
+    justify = "stretch",
+    as: Component = "div",
+    minColumnWidth = "14rem",
+    ...gridProps
+  } = props;
+
+  const gridStyle = {
+    width,
+    alignItems: align,
+    justifyItems: justify,
+    gridTemplateColumns: resolveGridColumns(columns, minColumnWidth),
+    rowGap: rowGap ? resolveGridGap(rowGap) : resolveGridGap(gap),
+    columnGap: columnGap ? resolveGridGap(columnGap) : resolveGridGap(gap),
+    gap:
+      rowGap === undefined && columnGap === undefined
+        ? resolveGridGap(gap)
+        : undefined,
+    ...style,
+  } satisfies CSSProperties;
+
+  return (
+    <Component
+      {...gridProps}
+      style={gridStyle}
+      className={classNames("willa-grid", className)}
+    >
+      {children}
+    </Component>
+  );
+}
+
+const gridGapMap: Record<GridGapPreset, string> = {
+  none: "0",
+  xs: "0.35rem",
+  sm: "0.55rem",
+  md: "0.75rem",
+  lg: "1rem",
+  xl: "1.25rem",
+};
+
+const isGridGapPreset = (gap: GridGap): gap is GridGapPreset => {
+  return gap in gridGapMap;
+};
+
+const resolveGridGap = (gap: GridGap) => {
+  return isGridGapPreset(gap) ? gridGapMap[gap] : gap;
+};
+
+const resolveGridColumns = (
+  columns: GridProps["columns"],
+  minColumnWidth: string,
+) => {
+  if (typeof columns === "number") {
+    return `repeat(${columns}, minmax(0, 1fr))`;
+  }
+  if (typeof columns === "string") {
+    return columns;
+  }
+  return `repeat(auto-fit, minmax(min(100%, ${minColumnWidth}), 1fr))`;
+};
+
+Grid.displayName = "Grid";

package/packages/willa-layout/src/components/Group/index.css

@@ -0,0 +1,21 @@
+.willa-group {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.willa-group > * {
+  min-width: 0;
+}
+
+.willa-group--grow > * {
+  flex: 1 1 0;
+}
+
+.willa-group-separator {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  color: var(--willa-text-faint);
+  font: inherit;
+  line-height: 1;
+}

package/packages/willa-layout/src/components/Group/index.tsx

@@ -0,0 +1,146 @@
+import type {
+  CSSProperties,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+} from "react";
+import { Children } from "react";
+import classNames from "classnames";
+
+export type GroupGapPreset = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+export type GroupGap = GroupGapPreset | (string & {});
+export type GroupAlign = "start" | "center" | "end" | "stretch" | "baseline";
+export type GroupJustify =
+  | "start"
+  | "center"
+  | "end"
+  | "between"
+  | "around"
+  | "evenly";
+export type GroupDirection = "row" | "column";
+
+export type GroupProps = {
+  as?: ElementType;
+  gap?: GroupGap;
+  align?: GroupAlign;
+  justify?: GroupJustify;
+  direction?: GroupDirection;
+  wrap?: boolean;
+  inline?: boolean;
+  grow?: boolean;
+  reverse?: boolean;
+  width?: string;
+  separator?: ReactNode;
+  className?: string;
+  children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLElement>, "children">;
+
+export function Group(props: GroupProps) {
+  const {
+    as: Component = "div",
+    gap = "sm",
+    align = "center",
+    justify = "start",
+    direction = "row",
+    wrap = true,
+    inline = false,
+    grow = false,
+    reverse = false,
+    width,
+    separator,
+    className,
+    children,
+    style,
+    ...groupProps
+  } = props;
+  const groupStyle = {
+    display: inline ? "inline-flex" : "flex",
+    flexDirection: resolveGroupDirection(direction, reverse),
+    flexWrap: wrap ? "wrap" : "nowrap",
+    alignItems: groupAlignMap[align],
+    justifyContent: groupJustifyMap[justify],
+    gap: resolveGroupGap(gap),
+    width,
+    ...style,
+  } satisfies CSSProperties;
+
+  return (
+    <Component
+      {...groupProps}
+      style={groupStyle}
+      className={classNames(
+        "willa-group",
+        grow && "willa-group--grow",
+        className,
+      )}
+    >
+      {separator
+        ? renderGroupChildrenWithSeparator(children, separator)
+        : children}
+    </Component>
+  );
+}
+
+const groupGapMap: Record<GroupGapPreset, string> = {
+  none: "0",
+  xs: "0.35rem",
+  sm: "0.55rem",
+  md: "0.75rem",
+  lg: "1rem",
+  xl: "1.25rem",
+};
+
+const isGroupGapPreset = (gap: GroupGap): gap is GroupGapPreset => {
+  return gap in groupGapMap;
+};
+
+const resolveGroupGap = (gap: GroupGap) => {
+  return isGroupGapPreset(gap) ? groupGapMap[gap] : gap;
+};
+
+const resolveGroupDirection = (direction: GroupDirection, reverse: boolean) => {
+  if (!reverse) return direction;
+  return direction === "row" ? "row-reverse" : "column-reverse";
+};
+
+const groupAlignMap: Record<GroupAlign, CSSProperties["alignItems"]> = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+  baseline: "baseline",
+};
+
+const groupJustifyMap: Record<GroupJustify, CSSProperties["justifyContent"]> = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly",
+};
+
+const renderGroupChildrenWithSeparator = (
+  children: ReactNode,
+  separator: ReactNode,
+) => {
+  return Children.toArray(children)
+    .filter((child) => child !== null && child !== undefined)
+    .flatMap((child, index, array) => {
+      const item = child;
+      if (index === array.length - 1) return [item];
+
+      return [
+        item,
+        <span
+          key={`separator-${index}`}
+          className="willa-group-separator"
+          aria-hidden="true"
+        >
+          {separator}
+        </span>,
+      ];
+    });
+};
+
+Group.displayName = "Group";

package/packages/willa-layout/src/components/Masonry/index.css

@@ -0,0 +1,12 @@
+.willa-masonry {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.willa-masonry > * {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  margin-block-end: var(--willa-masonry-item-gap, 0.75rem);
+  break-inside: avoid;
+}

package/packages/willa-layout/src/components/Masonry/index.tsx

@@ -0,0 +1,71 @@
+import type {
+  CSSProperties,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+} from "react";
+import classNames from "classnames";
+
+export type MasonryGapPreset = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+export type MasonryGap = MasonryGapPreset | (string & {});
+
+export type MasonryProps = {
+  as?: ElementType;
+  columns?: number;
+  columnWidth?: string;
+  gap?: MasonryGap;
+  width?: string;
+  className?: string;
+  children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLElement>, "children">;
+
+export function Masonry(props: MasonryProps) {
+  const {
+    as: Component = "div",
+    columns,
+    columnWidth,
+    gap = "md",
+    width,
+    className,
+    children,
+    style,
+    ...masonryProps
+  } = props;
+  const masonryStyle = {
+    columnCount: columns,
+    columnWidth,
+    columnGap: resolveMasonryGap(gap),
+    "--willa-masonry-item-gap": resolveMasonryGap(gap),
+    width,
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <Component
+      {...masonryProps}
+      style={masonryStyle}
+      className={classNames("willa-masonry", className)}
+    >
+      {children}
+    </Component>
+  );
+}
+
+const masonryGapMap: Record<MasonryGapPreset, string> = {
+  none: "0",
+  xs: "0.35rem",
+  sm: "0.55rem",
+  md: "0.75rem",
+  lg: "1rem",
+  xl: "1.25rem",
+};
+
+const isMasonryGapPreset = (gap: MasonryGap): gap is MasonryGapPreset => {
+  return gap in masonryGapMap;
+};
+
+const resolveMasonryGap = (gap: MasonryGap) => {
+  return isMasonryGapPreset(gap) ? masonryGapMap[gap] : gap;
+};
+
+Masonry.displayName = "Masonry";