@sproutsocial/seeds-react-stack 1.0.22 → 1.0.24

package/dist/stack.css

@@ -0,0 +1,99 @@
+/**
+ * Seeds Stack component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-stack seeds-stack-vertical seeds-stack-align-left seeds-stack-space-300">…</div>
+ */
+
+/*
+ * Wrapped in @layer components so consumer Tailwind utilities (which live in
+ * @layer utilities, ordered after components) can override these component
+ * styles. Unlayered rules would always win the cascade regardless of source
+ * order, preventing overrides like className="inline-flex mx-200".
+ */
+@layer components {
+  .seeds-stack {
+    display: flex;
+  }
+
+  .seeds-stack-vertical {
+    flex-direction: column;
+  }
+
+  .seeds-stack-horizontal {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  /* vertical: align controls the cross axis (align-items) */
+  .seeds-stack-vertical.seeds-stack-align-left {
+    align-items: flex-start;
+  }
+
+  .seeds-stack-vertical.seeds-stack-align-center {
+    align-items: center;
+  }
+
+  .seeds-stack-vertical.seeds-stack-align-right {
+    align-items: flex-end;
+  }
+
+  .seeds-stack-vertical.seeds-stack-align-stretch {
+    align-items: stretch;
+  }
+
+  /* horizontal: align-items stays center; align controls justify-content */
+  .seeds-stack-horizontal.seeds-stack-align-center {
+    justify-content: center;
+  }
+
+  .seeds-stack-horizontal.seeds-stack-align-right {
+    justify-content: flex-end;
+  }
+
+  /* stretch + horizontal: stretch each child to fill (replicates flexBasis: 100%) */
+  .seeds-stack-horizontal.seeds-stack-align-stretch > * {
+    flex-basis: 100%;
+  }
+
+  /* spacing via gap (replaces the per-child margins of the styled-components path) */
+  .seeds-stack-space-0 {
+    gap: var(--space-0);
+  }
+
+  .seeds-stack-space-100 {
+    gap: var(--space-100);
+  }
+
+  .seeds-stack-space-200 {
+    gap: var(--space-200);
+  }
+
+  .seeds-stack-space-300 {
+    gap: var(--space-300);
+  }
+
+  .seeds-stack-space-350 {
+    gap: var(--space-350);
+  }
+
+  .seeds-stack-space-400 {
+    gap: var(--space-400);
+  }
+
+  .seeds-stack-space-450 {
+    gap: var(--space-450);
+  }
+
+  .seeds-stack-space-500 {
+    gap: var(--space-500);
+  }
+
+  .seeds-stack-space-600 {
+    gap: var(--space-600);
+  }
+}

package/package.json

@@ -1,15 +1,26 @@
 {
   "name": "@sproutsocial/seeds-react-stack",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "Seeds React Stack",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/stack.css": "./dist/stack.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/stack.css dist/stack.css",
+    "build:debug": "tsup --dts --metafile && cp src/stack.css dist/stack.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -19,8 +30,8 @@
   },
   "dependencies": {
     "@sproutsocial/seeds-react-theme": "^4.2.0",
-    "@sproutsocial/seeds-react-system-props": "^3.1.1",
-    "@sproutsocial/seeds-react-box": "^1.1.23"
+    "@sproutsocial/seeds-react-system-props": "^3.1.2",
+    "@sproutsocial/seeds-react-box": "^1.1.24"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
@@ -33,7 +44,7 @@
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
-    "@sproutsocial/seeds-react-text": "^1.5.0"
+    "@sproutsocial/seeds-react-text": "^1.5.1"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"

package/.eslintignore

@@ -1,6 +0,0 @@
-# Node modules
-node_modules/
-
-# Build output
-dist/
-coverage/

package/.eslintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["eslint-config-seeds/racine"],
-};

package/.turbo/turbo-build.log

@@ -1,21 +0,0 @@
-yarn run v1.22.22
-$ tsup --dts
-CLI Building entry: src/index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.5.0
-CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-stack/tsup.config.ts
-CLI Target: es2022
-CLI Cleaning output folder
-CJS Build start
-ESM Build start
-CJS dist/index.js     5.55 KB
-CJS dist/index.js.map 8.36 KB
-CJS ⚡️ Build success in 76ms
-ESM dist/esm/index.js     3.75 KB
-ESM dist/esm/index.js.map 8.25 KB
-ESM ⚡️ Build success in 76ms
-DTS Build start
-DTS ⚡️ Build success in 3392ms
-DTS dist/index.d.ts  1.02 KB
-DTS dist/index.d.mts 1.02 KB
-Done in 5.12s.

package/CHANGELOG.md

@@ -1,187 +0,0 @@
-# @sproutsocial/seeds-react-stack
-
-## 1.0.22
-
-### Patch Changes
-
-- Updated dependencies [85f9728]
-- Updated dependencies [fa7d859]
-  - @sproutsocial/seeds-react-theme@4.2.0
-  - @sproutsocial/seeds-react-box@1.1.23
-
-## 1.0.21
-
-### Patch Changes
-
-- Updated dependencies [a13a571]
-  - @sproutsocial/seeds-react-theme@4.1.1
-  - @sproutsocial/seeds-react-box@1.1.22
-
-## 1.0.20
-
-### Patch Changes
-
-- Updated dependencies [5892f44]
-  - @sproutsocial/seeds-react-system-props@3.1.1
-  - @sproutsocial/seeds-react-box@1.1.21
-
-## 1.0.19
-
-### Patch Changes
-
-- Updated dependencies [5114a32]
-  - @sproutsocial/seeds-react-theme@4.1.0
-  - @sproutsocial/seeds-react-box@1.1.20
-
-## 1.0.18
-
-### 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
-
-## 1.0.17
-
-### Patch Changes
-
-- Updated dependencies [47c62b3]
-  - @sproutsocial/seeds-react-theme@3.7.1
-  - @sproutsocial/seeds-react-box@1.1.18
-
-## 1.0.16
-
-### Patch Changes
-
-- Updated dependencies [06da9c2]
-  - @sproutsocial/seeds-react-theme@3.7.0
-  - @sproutsocial/seeds-react-box@1.1.17
-
-## 1.0.15
-
-### Patch Changes
-
-- Updated dependencies [4ba8720]
-  - @sproutsocial/seeds-react-theme@3.6.2
-  - @sproutsocial/seeds-react-box@1.1.16
-
-## 1.0.14
-
-### Patch Changes
-
-- Updated dependencies [1f9a473]
-  - @sproutsocial/seeds-react-theme@3.6.1
-  - @sproutsocial/seeds-react-box@1.1.15
-
-## 1.0.13
-
-### Patch Changes
-
-- Updated dependencies [17d4f12]
-  - @sproutsocial/seeds-react-theme@3.6.0
-  - @sproutsocial/seeds-react-box@1.1.14
-
-## 1.0.12
-
-### Patch Changes
-
-- Updated dependencies [118e300]
-  - @sproutsocial/seeds-react-theme@3.5.1
-  - @sproutsocial/seeds-react-box@1.1.13
-
-## 1.0.11
-
-### Patch Changes
-
-- Updated dependencies [db6ce39]
-- Updated dependencies [20bb01b]
-  - @sproutsocial/seeds-react-theme@3.5.0
-  - @sproutsocial/seeds-react-box@1.1.12
-
-## 1.0.10
-
-### Patch Changes
-
-- Updated dependencies [7716e16]
-  - @sproutsocial/seeds-react-theme@3.4.0
-  - @sproutsocial/seeds-react-box@1.1.11
-
-## 1.0.9
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-theme@3.3.2
-- @sproutsocial/seeds-react-box@1.1.10
-
-## 1.0.8
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-theme@3.3.1
-- @sproutsocial/seeds-react-box@1.1.9
-
-## 1.0.7
-
-### Patch Changes
-
-- Updated dependencies [750d1ea]
-  - @sproutsocial/seeds-react-theme@3.3.0
-  - @sproutsocial/seeds-react-box@1.1.8
-
-## 1.0.6
-
-### Patch Changes
-
-- Updated dependencies [fa7579a]
-  - @sproutsocial/seeds-react-theme@3.2.1
-  - @sproutsocial/seeds-react-box@1.1.7
-
-## 1.0.5
-
-### Patch Changes
-
-- Updated dependencies [8f6ba8d]
-  - @sproutsocial/seeds-react-theme@3.2.0
-  - @sproutsocial/seeds-react-box@1.1.6
-
-## 1.0.4
-
-### Patch Changes
-
-- Updated dependencies [b1c3b44]
-  - @sproutsocial/seeds-react-theme@3.1.1
-  - @sproutsocial/seeds-react-box@1.1.5
-
-## 1.0.3
-
-### Patch Changes
-
-- Updated dependencies [47580c4]
-  - @sproutsocial/seeds-react-theme@3.1.0
-  - @sproutsocial/seeds-react-box@1.1.4
-
-## 1.0.2
-
-### Patch Changes
-
-- Updated dependencies [22e1111]
-  - @sproutsocial/seeds-react-theme@3.0.1
-  - @sproutsocial/seeds-react-box@1.1.3
-
-## 1.0.1
-
-### Patch Changes
-
-- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
-- Updated dependencies [9fd8bac]
-  - @sproutsocial/seeds-react-system-props@3.0.2
-  - @sproutsocial/seeds-react-theme@2.2.1
-  - @sproutsocial/seeds-react-box@1.1.2
-
-## 1.0.0
-
-### Major Changes
-
-- bd8d03d: Migrate Stack to its own seeds-react-stack component

package/jest.config.js

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

package/src/Stack.stories.tsx

@@ -1,102 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import Text from "@sproutsocial/seeds-react-text";
-import Stack from "./Stack";
-
-const meta: Meta<typeof Stack> = {
-  title: "Components/Stack",
-  component: Stack,
-  argTypes: {
-    align: {
-      options: ["left", "center", "right", "stretch"],
-      control: {
-        type: "select",
-      },
-    },
-    direction: {
-      options: ["horizontal", "vertical"],
-      control: {
-        type: "select",
-      },
-    },
-  },
-  args: {
-    align: undefined,
-    direction: undefined,
-  },
-};
-export default meta;
-
-interface ItemProps {
-  children: React.ReactNode;
-}
-
-const Item: React.FC<ItemProps> = (props) => (
-  <Text as="p" color="text.body" {...props} />
-);
-
-type Story = StoryObj<typeof Stack>;
-
-export const DefaultStory: Story = {
-  name: "Default (Vertical)",
-  args: {
-    // ...existing code...
-  },
-  render: (args) => (
-    <Stack p={400} {...args}>
-      <Item>This</Item>
-      <Item>is</Item>
-      <Item>the</Item>
-      <Item>stack</Item>
-      <Item>component</Item>
-    </Stack>
-  ),
-};
-
-export const ResponsiveDirection: Story = {
-  name: "Responsive direction",
-  args: {
-    direction: ["vertical", "horizontal", "vertical"],
-  },
-  render: (args) => (
-    <Stack p={400} {...args}>
-      <Item>Stack</Item>
-      <Item>is</Item>
-      <Item>a</Item>
-      <Item>layout</Item>
-      <Item>utility</Item>
-    </Stack>
-  ),
-};
-
-export const ResponsiveAlignment: Story = {
-  name: "Responsive alignment",
-  args: {
-    align: ["left", "center", "stretch"],
-  },
-  render: (args) => (
-    <Stack p={400} {...args}>
-      <Item>Stack</Item>
-      <Item>is</Item>
-      <Item>a</Item>
-      <Item>layout</Item>
-      <Item>utility</Item>
-    </Stack>
-  ),
-};
-
-export const ResponsiveSpace: Story = {
-  name: "Responsive space",
-  args: {
-    space: [300, 450, 600],
-  },
-  render: (args) => (
-    <Stack p={400} {...args}>
-      <Item>Stack</Item>
-      <Item>is</Item>
-      <Item>a</Item>
-      <Item>layout</Item>
-      <Item>utility</Item>
-    </Stack>
-  ),
-};

package/src/Stack.tsx

@@ -1,116 +0,0 @@
-import * as React from "react";
-import { Children } from "react";
-import { normalizeResponsiveProp } from "./utils";
-import Box from "@sproutsocial/seeds-react-box";
-import type { TypeStackProps } from "./StackTypes";
-
-const stackStyles = {
-  horizontal: {
-    left: {
-      alignItems: "center",
-    },
-    center: {
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    right: {
-      alignItems: "center",
-      justifyContent: "flex-end",
-    },
-    stretch: {
-      alignItems: "center",
-    },
-  },
-  vertical: {
-    left: {
-      flexDirection: "column",
-      alignItems: "flex-start",
-    },
-    center: {
-      flexDirection: "column",
-      alignItems: "center",
-    },
-    right: {
-      flexDirection: "column",
-      alignItems: "flex-end",
-    },
-    stretch: {
-      flexDirection: "column",
-      alignItems: "stretch",
-    },
-  },
-};
-
-const Stack = ({
-  children,
-  space = 300,
-  align = "left",
-  direction = "vertical",
-  ...rest
-}: TypeStackProps) => {
-  const stackItems = Children.toArray(children);
-  const responsiveAlignment = normalizeResponsiveProp(align);
-  const responsiveDirection = normalizeResponsiveProp(direction);
-  const responsiveSpace = normalizeResponsiveProp(space);
-  const initialValue = ["initial", "initial", "initial", "initial", "initial"];
-
-  // TODO: rely on styled system to solve this during the refactor
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const styleProps: any = {
-    alignItems: [...initialValue],
-    flexDirection: [...initialValue],
-    justifyContent: [...initialValue],
-  };
-  const childFlexBasis: (string | null)[] = [...initialValue];
-  const childMarginProps = {
-    marginLeft: [...initialValue],
-    marginTop: [...initialValue],
-  };
-
-  initialValue.forEach((_, i) => {
-    const currentDirection = responsiveDirection[i] as keyof typeof stackStyles;
-    const currentAlignment = responsiveAlignment[
-      i
-    ] as keyof (typeof stackStyles)["horizontal"];
-    const currentSpace = responsiveSpace[i];
-
-    if (currentDirection && currentAlignment) {
-      const styles: { [key: string]: string } =
-        stackStyles[currentDirection][currentAlignment];
-      Object.keys(styleProps).forEach((key: string) => {
-        styleProps[key][i] = styles[key] || "initial";
-      });
-    }
-
-    const flexBasis =
-      currentAlignment === "stretch" && currentDirection === "horizontal"
-        ? "100%"
-        : null;
-    childFlexBasis[i] = flexBasis;
-
-    const margin =
-      currentDirection === "horizontal" ? "marginLeft" : "marginTop";
-
-    const opposite =
-      currentDirection === "horizontal" ? "marginTop" : "marginLeft";
-    childMarginProps[margin][i] = currentSpace;
-    // styled system can pass numbers that map to theme values and TS doesn't like it
-    childMarginProps[opposite][i] = 0 as unknown as string;
-  });
-
-  return (
-    <Box display="flex" {...styleProps} {...rest}>
-      {stackItems.map((item, i) => (
-        <Box
-          flexBasis={childFlexBasis}
-          {...(i !== 0 ? childMarginProps : {})}
-          key={i}
-        >
-          {item}
-        </Box>
-      ))}
-    </Box>
-  );
-};
-
-export default Stack;

package/src/StackTypes.ts

@@ -1,32 +0,0 @@
-import * as React from "react";
-
-import type { TypeResponsive } from "@sproutsocial/seeds-react-system-props";
-import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
-
-export type TypeSpaceLiterals =
-  | 0
-  | 100
-  | 200
-  | 300
-  | 350
-  | 400
-  | 450
-  | 500
-  | 600
-  | string;
-
-type TypeDirection = "vertical" | "horizontal";
-
-type TypeAlignment = "left" | "center" | "right" | "stretch";
-
-export interface TypeStackProps extends TypeBoxProps {
-  /** Amount of space between items in the stack */
-  space?: TypeResponsive<TypeSpaceLiterals>;
-
-  /** Alignment of the items in the stack (horizontal or vertical) */
-  align?: TypeResponsive<TypeAlignment>;
-
-  /** Axis upon which the stack is laid out (left, center, right, or stretch) */
-  direction?: TypeResponsive<TypeDirection>;
-  children: React.ReactNode;
-}

package/src/__tests__/Stack.test.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { render } from "@sproutsocial/seeds-react-testing-library";
-import { Text } from "@sproutsocial/seeds-react-text";
-import Stack from "../Stack";
-
-interface ItemProps {
-  [key: string]: any;
-}
-
-const Item = (props: ItemProps) => (
-  <Text as="div" color="text.body" bg="container.background.base" {...props}>
-    {props.children}
-  </Text>
-);
-
-describe("Stack", () => {
-  it("should render properly", async () => {
-    const { container, runA11yCheck } = render(
-      <Stack>
-        <Item>Hello world!</Item>
-      </Stack>
-    );
-    expect(container).toBeTruthy();
-    await runA11yCheck();
-  });
-});

package/src/__tests__/Stack.typetest.tsx

@@ -1,18 +0,0 @@
-import * as React from "react";
-import { Box } from "@sproutsocial/seeds-react-box";
-import Stack from "../Stack";
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function StackTypes() {
-  return (
-    <>
-      <Stack space={300} align="center" direction="horizontal">
-        <Box>Seeds</Box>
-        <Box>Design</Box>
-        <Box>System</Box>
-      </Stack>
-      {/* @ts-expect-error - test that invalid children are rejected */}
-      <Stack />
-    </>
-  );
-}

package/src/index.ts

@@ -1,5 +0,0 @@
-import Stack from "./Stack";
-
-export default Stack;
-export { Stack };
-export * from "./StackTypes";

package/src/styled.d.ts

@@ -1,7 +0,0 @@
-import "styled-components";
-import { TypeTheme } from "@sproutsocial/seeds-react-theme";
-
-declare module "styled-components" {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface DefaultTheme extends TypeTheme {}
-}