@sproutsocial/seeds-react-grid 0.2.11 → 0.2.13

package/CHANGELOG.md

@@ -1,132 +0,0 @@
-# @sproutsocial/seeds-react-grid
-
-## 0.2.11
-
-### Patch Changes
-
-- Updated dependencies [d8509a3]
-  - @sproutsocial/seeds-react-theme@4.3.1
-  - @sproutsocial/seeds-react-box@1.1.27
-
-## 0.2.10
-
-### Patch Changes
-
-- Updated dependencies [b77aca0]
-- Updated dependencies [2e72599]
-  - @sproutsocial/seeds-react-system-props@3.1.3
-  - @sproutsocial/seeds-react-theme@4.3.0
-  - @sproutsocial/seeds-react-box@1.1.26
-
-## 0.2.9
-
-### Patch Changes
-
-- Updated dependencies [d21ae54]
-  - @sproutsocial/seeds-react-theme@4.2.1
-  - @sproutsocial/seeds-react-box@1.1.25
-
-## 0.2.8
-
-### Patch Changes
-
-- Updated dependencies [6611f6a]
-  - @sproutsocial/seeds-react-system-props@3.1.2
-  - @sproutsocial/seeds-react-box@1.1.24
-
-## 0.2.7
-
-### Patch Changes
-
-- Updated dependencies [85f9728]
-- Updated dependencies [fa7d859]
-  - @sproutsocial/seeds-react-theme@4.2.0
-  - @sproutsocial/seeds-react-box@1.1.23
-
-## 0.2.6
-
-### Patch Changes
-
-- Updated dependencies [a13a571]
-  - @sproutsocial/seeds-react-theme@4.1.1
-  - @sproutsocial/seeds-react-box@1.1.22
-
-## 0.2.5
-
-### Patch Changes
-
-- Updated dependencies [5892f44]
-  - @sproutsocial/seeds-react-system-props@3.1.1
-  - @sproutsocial/seeds-react-box@1.1.21
-
-## 0.2.4
-
-### Patch Changes
-
-- Updated dependencies [5114a32]
-  - @sproutsocial/seeds-react-theme@4.1.0
-  - @sproutsocial/seeds-react-box@1.1.20
-
-## 0.2.3
-
-### Patch Changes
-
-- Updated dependencies [132ef9d]
-- Updated dependencies [132ef9d]
-  - @sproutsocial/seeds-react-theme@4.0.0
-  - @sproutsocial/seeds-react-system-props@3.1.0
-  - @sproutsocial/seeds-react-box@1.1.19
-
-## 0.2.2
-
-### Patch Changes
-
-- Updated dependencies [47c62b3]
-  - @sproutsocial/seeds-react-theme@3.7.1
-  - @sproutsocial/seeds-react-box@1.1.18
-
-## 0.2.1
-
-### Patch Changes
-
-- Updated dependencies [06da9c2]
-  - @sproutsocial/seeds-react-theme@3.7.0
-  - @sproutsocial/seeds-react-box@1.1.17
-
-## 0.2.0
-
-### Minor Changes
-
-- a08b705: Gap values can now be passed an object of responsive values
-
-### Patch Changes
-
-- 4ba8720: Fix `breakpoints` alias typing so consumers can import `TypeBreakpoint` (and use `theme.breakpoints`) without type errors.
-
-  - `theme.breakpoints.sm/md/lg/xl` are now CSS length strings (e.g. `"640px"`) instead of raw numbers. Array entries (`breakpoints[0]`...) are unchanged during the migration to the new scale.
-  - `newBreakpoints` is no longer exported from the theme package — consumers should use `theme.breakpoints.sm/md/lg/xl` instead. Grid media queries updated accordingly.
-
-- Updated dependencies [4ba8720]
-  - @sproutsocial/seeds-react-theme@3.6.2
-  - @sproutsocial/seeds-react-box@1.1.16
-
-## 0.1.1
-
-### Patch Changes
-
-- 1f9a473: Switched grids to use newBreakpoints theme values that are preventing users from using grid's columns api responsively
-- Updated dependencies [1f9a473]
-  - @sproutsocial/seeds-react-theme@3.6.1
-  - @sproutsocial/seeds-react-box@1.1.15
-
-## 0.1.0
-
-### Minor Changes
-
-- 990c196: Add Grid component: a layout primitive for creating CSS Grid layouts with responsive column configurations and customizable gaps.
-
-## 0.0.1
-
-### Patch Changes
-
-- de310b9: Fix grid style import

package/jest.config.js

@@ -1,9 +0,0 @@
-const baseConfig = require("@sproutsocial/seeds-testing");
-
-/** * @type {import('jest').Config} */
-const config = {
-  ...baseConfig,
-  displayName: "seeds-react-grid",
-};
-
-module.exports = config;

package/src/Grid.stories.tsx

@@ -1,290 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import COLORS from "@sproutsocial/seeds-color";
-import Grid from "./Grid";
-import type { GridProps } from "./GridTypes";
-
-const meta = {
-  title: "Components/Grid",
-  component: Grid,
-  argTypes: {
-    columns: {
-      control: { type: "number", min: 1, max: 12, step: 1 },
-      description:
-        "Number of columns in the grid (can be a number or responsive object)",
-    },
-    gap: {
-      control: { type: "select" },
-      options: [
-        0,
-        100,
-        200,
-        300,
-        350,
-        400,
-        450,
-        500,
-        600,
-        "16px",
-        "20px",
-        "24px",
-      ],
-      description:
-        "Gap between all grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., '16px')",
-    },
-    rowGap: {
-      control: { type: "select" },
-      options: [
-        0,
-        100,
-        200,
-        300,
-        350,
-        400,
-        450,
-        500,
-        600,
-        "16px",
-        "20px",
-        "24px",
-      ],
-      description:
-        "Optional: Override gap for rows only. Use theme.space scale or pixel string (e.g., '16px')",
-      table: {
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    columnGap: {
-      control: { type: "select" },
-      options: [
-        0,
-        100,
-        200,
-        300,
-        350,
-        400,
-        450,
-        500,
-        600,
-        "16px",
-        "20px",
-        "24px",
-      ],
-      description:
-        "Optional: Override gap for columns only. Use theme.space scale or pixel string (e.g., '16px')",
-      table: {
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    children: {
-      control: false,
-      description: "Child elements to display in the grid",
-    },
-    className: {
-      control: "text",
-      description: "Custom CSS class name",
-    },
-  },
-} satisfies Meta<typeof Grid>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-type PlaygroundArgs = GridProps & {
-  columnsSm?: number;
-  columnsMd?: number;
-  columnsLg?: number;
-  columnsXl?: number;
-};
-
-// Helper component for grid items
-const GridItem = ({
-  children,
-  color = COLORS.COLOR_BLUE_600,
-}: {
-  children: React.ReactNode;
-  color?: string;
-}) => (
-  <div
-    style={{
-      backgroundColor: color,
-      padding: "20px",
-      borderRadius: "8px",
-      color: "white",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      minHeight: "100px",
-      fontWeight: "bold",
-    }}
-  >
-    {children}
-  </div>
-);
-
-export const Playground: StoryObj<PlaygroundArgs> = {
-  name: "Playground",
-  args: {
-    gap: 400,
-    columnsSm: 1,
-    columnsMd: 2,
-    columnsLg: 3,
-    columnsXl: 4,
-  },
-  argTypes: {
-    columnsSm: {
-      control: { type: "number", min: 1, max: 12, step: 1 },
-      name: "Columns (sm - 640px)",
-      description: "Number of columns on small screens (640px and up)",
-    },
-    columnsMd: {
-      control: { type: "number", min: 1, max: 12, step: 1 },
-      name: "Columns (md - 768px)",
-      description: "Number of columns on medium screens (768px and up)",
-    },
-    columnsLg: {
-      control: { type: "number", min: 1, max: 12, step: 1 },
-      name: "Columns (lg - 1024px)",
-      description: "Number of columns on large screens (1024px and up)",
-    },
-    columnsXl: {
-      control: { type: "number", min: 1, max: 12, step: 1 },
-      name: "Columns (xl - 1280px)",
-      description: "Number of columns on xl screens (1280px and up)",
-    },
-    columns: {
-      control: false,
-      table: { disable: true },
-    },
-  },
-  render: (args) => {
-    const {
-      rowGap,
-      columnGap,
-      columnsSm,
-      columnsMd,
-      columnsLg,
-      columnsXl,
-      ...restArgs
-    } = args;
-    const gridProps = {
-      ...restArgs,
-      columns: {
-        sm: columnsSm,
-        md: columnsMd,
-        lg: columnsLg,
-        xl: columnsXl,
-      },
-      ...(rowGap &&
-      (typeof rowGap === "string" ||
-        (typeof rowGap === "number" && rowGap > 0) ||
-        typeof rowGap === "object")
-        ? { rowGap }
-        : {}),
-      ...(columnGap &&
-      (typeof columnGap === "string" ||
-        (typeof columnGap === "number" && columnGap > 0) ||
-        typeof columnGap === "object")
-        ? { columnGap }
-        : {}),
-    };
-    return (
-      <Grid {...gridProps}>
-        <GridItem color={COLORS.COLOR_BLUE_600}>Item 1</GridItem>
-        <GridItem color={COLORS.COLOR_PURPLE_600}>Item 2</GridItem>
-        <GridItem color={COLORS.COLOR_TEAL_600}>Item 3</GridItem>
-        <GridItem color={COLORS.COLOR_RED_600}>Item 4</GridItem>
-        <GridItem color={COLORS.COLOR_ORANGE_600}>Item 5</GridItem>
-        <GridItem color={COLORS.COLOR_MAGENTA_600}>Item 6</GridItem>
-        <GridItem color={COLORS.COLOR_AQUA_600}>Item 7</GridItem>
-        <GridItem color={COLORS.COLOR_PINK_600}>Item 8</GridItem>
-        <GridItem color={COLORS.COLOR_GREEN_600}>Item 9</GridItem>
-      </Grid>
-    );
-  },
-};
-
-export const ResponsiveGap: Story = {
-  name: "Responsive Gap",
-  render: () => {
-    return (
-      <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
-        <div>
-          <p style={{ marginBottom: "8px", fontWeight: "bold" }}>
-            Uniform gap (resize to see no change): gap=&#123;400&#125;
-          </p>
-          <Grid columns={{ sm: 1, md: 2, lg: 3 }} gap={400}>
-            <GridItem color={COLORS.COLOR_BLUE_600}>Item 1</GridItem>
-            <GridItem color={COLORS.COLOR_BLUE_600}>Item 2</GridItem>
-            <GridItem color={COLORS.COLOR_BLUE_600}>Item 3</GridItem>
-          </Grid>
-        </div>
-
-        <div>
-          <p style={{ marginBottom: "8px", fontWeight: "bold" }}>
-            Responsive gap (resize to see gap change): gap=&#123;&#123; sm: 200,
-            md: 400, lg: 500 &#125;&#125;
-          </p>
-          <Grid
-            columns={{ sm: 1, md: 2, lg: 3 }}
-            gap={{ sm: 200, md: 400, lg: 500 }}
-          >
-            <GridItem color={COLORS.COLOR_PURPLE_600}>Item 1</GridItem>
-            <GridItem color={COLORS.COLOR_PURPLE_600}>Item 2</GridItem>
-            <GridItem color={COLORS.COLOR_PURPLE_600}>Item 3</GridItem>
-          </Grid>
-        </div>
-
-        <div>
-          <p style={{ marginBottom: "8px", fontWeight: "bold" }}>
-            Independent row/column gaps: rowGap=&#123;&#123; sm: 200, md: 500
-            &#125;&#125; columnGap=&#123;&#123; sm: 400, md: 200 &#125;&#125;
-          </p>
-          <Grid
-            columns={{ sm: 2, md: 3 }}
-            rowGap={{ sm: 200, md: 500 }}
-            columnGap={{ sm: 400, md: 200 }}
-          >
-            <GridItem color={COLORS.COLOR_TEAL_600}>Item 1</GridItem>
-            <GridItem color={COLORS.COLOR_TEAL_600}>Item 2</GridItem>
-            <GridItem color={COLORS.COLOR_TEAL_600}>Item 3</GridItem>
-            <GridItem color={COLORS.COLOR_TEAL_600}>Item 4</GridItem>
-            <GridItem color={COLORS.COLOR_TEAL_600}>Item 5</GridItem>
-            <GridItem color={COLORS.COLOR_TEAL_600}>Item 6</GridItem>
-          </Grid>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const NestedGrid: Story = {
-  name: "Nested Grid Layout",
-  args: {
-    gap: 400,
-  },
-  render: (args) => {
-    return (
-      <Grid columns={1} gap={args.gap}>
-        <Grid columns={1} gap={350}>
-          <GridItem color={COLORS.COLOR_BLUE_600}>Row 1, Column 1</GridItem>
-        </Grid>
-
-        <Grid columns={{ sm: 1, md: 2 }} gap={350}>
-          <GridItem color={COLORS.COLOR_PURPLE_600}>Row 2, Column 1</GridItem>
-          <GridItem color={COLORS.COLOR_PURPLE_600}>Row 2, Column 2</GridItem>
-        </Grid>
-
-        <Grid columns={{ sm: 1, md: 3 }} gap={350}>
-          <GridItem color={COLORS.COLOR_TEAL_600}>Row 3, Column 1</GridItem>
-          <GridItem color={COLORS.COLOR_TEAL_600}>Row 3, Column 2</GridItem>
-          <GridItem color={COLORS.COLOR_TEAL_600}>Row 3, Column 3</GridItem>
-        </Grid>
-
-        <Grid columns={1} gap={350}>
-          <GridItem color={COLORS.COLOR_RED_600}>Row 4, Column 1</GridItem>
-        </Grid>
-      </Grid>
-    );
-  },
-};

package/src/Grid.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import Box from "@sproutsocial/seeds-react-box";
-import type { ContainerProps, GridProps } from "./GridTypes";
-import { getResponsiveStyles, toResponsiveGapObject } from "./utils";
-
-const Container = styled(Box)<ContainerProps>`
-  ${(props) => getResponsiveStyles(props.$columns)}
-`;
-
-const Grid: React.FC<GridProps> = ({
-  columns = 1,
-  gap = 400,
-  rowGap,
-  columnGap,
-  children,
-  className,
-}) => {
-  return (
-    <Container
-      display="grid"
-      rowGap={toResponsiveGapObject(rowGap ?? gap)}
-      columnGap={toResponsiveGapObject(columnGap ?? gap)}
-      $columns={columns}
-      className={className}
-    >
-      {children}
-    </Container>
-  );
-};
-
-export default Grid;

package/src/GridTypes.ts

@@ -1,51 +0,0 @@
-import type { TypeSpace } from "@sproutsocial/seeds-react-theme";
-import * as React from "react";
-
-export type ResponsiveValue =
-  | number
-  | {
-      sm?: number;
-      md?: number;
-      lg?: number;
-      xl?: number;
-    };
-
-/**
- * Gap value that can be either:
- * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)
- * - A pixel string value (e.g., "16px", "20px")
- */
-export type GapValue = keyof TypeSpace | (string & {});
-
-/**
- * Responsive gap value that can be either:
- * - A single GapValue applied at all breakpoints
- * - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values
- */
-export type ResponsiveGapValue =
-  | GapValue
-  | {
-      sm?: GapValue;
-      md?: GapValue;
-      lg?: GapValue;
-      xl?: GapValue;
-    };
-
-export interface ContainerProps {
-  $columns?: ResponsiveValue;
-}
-
-export interface GridProps {
-  /** Number of columns (can be responsive) */
-  columns?: ResponsiveValue;
-  /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., "16px"), or responsive object (e.g., { sm: 400, md: 500 }) */
-  gap?: ResponsiveGapValue;
-  /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., "16px"), or responsive object (e.g., { sm: 400, md: 500 }) */
-  rowGap?: ResponsiveGapValue;
-  /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., "16px"), or responsive object (e.g., { sm: 400, md: 500 }) */
-  columnGap?: ResponsiveGapValue;
-  /** Children elements to display in the grid */
-  children?: React.ReactNode;
-  /** Custom className */
-  className?: string;
-}

package/src/__tests__/Grid.typetest.tsx

@@ -1,131 +0,0 @@
-import * as React from "react";
-import Grid from "../Grid";
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function GridTypes() {
-  return (
-    <>
-      {/* Basic usage */}
-      <Grid>
-        <div>Item</div>
-      </Grid>
-
-      {/* With fixed columns */}
-      <Grid columns={3}>
-        <div>Item</div>
-      </Grid>
-
-      {/* With responsive columns */}
-      <Grid columns={{ sm: 1, md: 2, lg: 3, xl: 4 }}>
-        <div>Item</div>
-      </Grid>
-
-      {/* With gap using space scale */}
-      <Grid gap={450}>
-        <div>Item</div>
-      </Grid>
-
-      {/* With gap using pixel string */}
-      <Grid gap="24px">
-        <div>Item</div>
-      </Grid>
-
-      {/* With rowGap and columnGap using space scale */}
-      <Grid rowGap={500} columnGap={400}>
-        <div>Item</div>
-      </Grid>
-
-      {/* With rowGap and columnGap using pixel strings */}
-      <Grid rowGap="32px" columnGap="16px">
-        <div>Item</div>
-      </Grid>
-
-      {/* Mix of space scale and pixel strings */}
-      <Grid rowGap={450} columnGap="20px">
-        <div>Item</div>
-      </Grid>
-
-      {/* With all props */}
-      <Grid
-        columns={{ sm: 1, md: 2, lg: 3 }}
-        gap={400}
-        rowGap={450}
-        columnGap={350}
-        className="custom-grid"
-      >
-        <div>Item 1</div>
-        <div>Item 2</div>
-      </Grid>
-
-      {/* With responsive gap using space scale */}
-      <Grid gap={{ sm: 400, md: 450, lg: 500 }}>
-        <div>Item</div>
-      </Grid>
-
-      {/* With partial responsive gap */}
-      <Grid gap={{ sm: 400 }}>
-        <div>Item</div>
-      </Grid>
-
-      {/* With responsive rowGap using pixel strings */}
-      <Grid rowGap={{ sm: "16px", md: "24px" }}>
-        <div>Item</div>
-      </Grid>
-
-      {/* With responsive columnGap */}
-      <Grid columnGap={{ sm: 300, md: 400, lg: 450, xl: 500 }}>
-        <div>Item</div>
-      </Grid>
-
-      {/* @ts-expect-error - invalid key in responsive gap */}
-      <Grid gap={{ xs: 400 }}>
-        <div>Item</div>
-      </Grid>
-
-      {/* @ts-expect-error - invalid gap value inside responsive object */}
-      <Grid gap={{ sm: 16 }}>
-        <div>Item</div>
-      </Grid>
-
-      {/* @ts-expect-error - invalid columns value */}
-      <Grid columns="invalid">
-        <div>Item</div>
-      </Grid>
-
-      {/* Valid gap value - any string is allowed */}
-      <Grid gap="invalid">
-        <div>Item</div>
-      </Grid>
-
-      {/* @ts-expect-error - invalid responsive columns */}
-      <Grid columns={{ xs: 1 }}>
-        <div>Item</div>
-      </Grid>
-
-      {/* @ts-expect-error - invalid gap value (not in SpaceScale and not a px string) */}
-      <Grid gap={16}>
-        <div>Item</div>
-      </Grid>
-
-      {/* @ts-expect-error - invalid rowGap value (not in SpaceScale and not a px string) */}
-      <Grid rowGap={20}>
-        <div>Item</div>
-      </Grid>
-
-      {/* @ts-expect-error - invalid columnGap value (not in SpaceScale and not a px string) */}
-      <Grid columnGap={25}>
-        <div>Item</div>
-      </Grid>
-
-      {/* Valid gap value - any string is allowed */}
-      <Grid gap="16rem">
-        <div>Item</div>
-      </Grid>
-
-      {/* Valid gap value - any string is allowed */}
-      <Grid gap="1em">
-        <div>Item</div>
-      </Grid>
-    </>
-  );
-}