WRNexusJS/packages/ui/components/grid.wrn

// Grid -- an equal-track grid that collapses on small screens.
//
//   <Grid columns={3} gap="lg">...</Grid>
//
// Pass minItemWidth to let the browser decide the count instead: the track
// list becomes auto-fit, which reflows continuously rather than at fixed
// breakpoints and suits card decks whose item count is not known.
//
// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
// and silently swallows the rule that follows it.
component Grid {
  props {
    size: string = "default"
    color: string = "primary"
    columns: number = 2
    gap: string = "md"
    maxWidth: string = "xl"
    // When set, the count is derived from the available width instead of the
    // columns prop. Accepts any CSS length.
    minItemWidth: string = ""
    class: string = ""
  }

  functions {
    shared function columnCount() {
      var value = Number(columns)
      if (!value || value < 1) {
        return 1
      }
      return Math.min(6, value)
    }

    shared function autoTrack() {
      return minItemWidth ? "repeat(auto-fit, minmax(" + minItemWidth + ", 1fr))" : ""
    }
  }

  view {
    <div
      {...attrs}
      data-ui-component="Grid"
      class='wire-grid {class}'
      data-size='{size}'
      data-color='{color}'
      data-gap='{gap}'
      data-max-width='{maxWidth}'
      data-columns='{columnCount()}'
      data-auto='{minItemWidth ? "true" : "false"}'
      style='--grid-auto-track:{autoTrack()};'
    >
      <slot></slot>
    </div>
  }

  style {
    .wire-grid {
      --grid-gap: 1.25rem;
      display: grid;
      width: 100%;
      min-width: 0;
      gap: var(--grid-gap);
      grid-template-columns: 1fr;
      align-items: stretch;
    }

    .wire-grid[data-size="compact"] {
      align-items: start;
    }

    .wire-grid[data-max-width="md"] {
      max-width: 48rem;
    }

    .wire-grid[data-max-width="lg"] {
      max-width: 64rem;
    }

    .wire-grid[data-max-width="xl"] {
      max-width: 80rem;
    }

    .wire-grid[data-max-width="2xl"] {
      max-width: 96rem;
    }

    .wire-grid[data-max-width="full"] {
      max-width: none;
    }

    .wire-grid[data-gap="xs"] {
      --grid-gap: 0.5rem;
    }

    .wire-grid[data-gap="sm"] {
      --grid-gap: 0.75rem;
    }

    .wire-grid[data-gap="lg"] {
      --grid-gap: 2rem;
    }

    .wire-grid[data-gap="xl"] {
      --grid-gap: 2.5rem;
    }

    /*
     * auto-fit needs no breakpoints, so it wins over the fixed counts below
     * and applies at every width.
     */
    .wire-grid[data-auto="true"] {
      grid-template-columns: var(--grid-auto-track);
    }

    @media (min-width: 640px) {
      .wire-grid[data-auto="false"]:not([data-columns="1"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 1024px) {
      .wire-grid[data-auto="false"][data-columns="3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .wire-grid[data-auto="false"][data-columns="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .wire-grid[data-auto="false"][data-columns="5"] {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }

      .wire-grid[data-auto="false"][data-columns="6"] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }
    }
  }
}