@sproutsocial/seeds-react-box 1.1.1 → 1.1.2

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-ESM dist/esm/index.js     874.00 B
-ESM dist/esm/index.js.map 1.77 KB
-ESM ⚡️ Build success in 19ms
-CJS dist/index.js     2.67 KB
+CJS dist/index.js     2.68 KB
 CJS dist/index.js.map 1.77 KB
-CJS ⚡️ Build success in 23ms
+CJS ⚡️ Build success in 112ms
+ESM dist/esm/index.js     878.00 B
+ESM dist/esm/index.js.map 1.77 KB
+ESM ⚡️ Build success in 115ms
 DTS Build start
-DTS ⚡️ Build success in 6265ms
+DTS ⚡️ Build success in 32753ms
 DTS dist/index.d.ts  800.00 B
 DTS dist/index.d.mts 800.00 B
-Done in 7.86s.
+Done in 37.60s.

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @sproutsocial/seeds-react-box
 
+## 1.1.2
+
+### 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
+
 ## 1.1.1
 
 ### Patch Changes

package/dist/esm/index.js

@@ -42,9 +42,9 @@ Box.displayName = "Box";
 var Box_default = Box;
 
 // src/index.ts
-var src_default = Box_default;
+var index_default = Box_default;
 export {
   Box_default as Box,
-  src_default as default
+  index_default as default
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Box.tsx","../../src/styles.tsx","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeBoxProps } from \"./BoxTypes\";\n\nconst Box = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  ({ color, ...props }, ref) => {\n    return (\n      <Container\n        {...props}\n        ref={ref}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n      />\n    );\n  }\n);\n\nBox.displayName = \"Box\";\n\nexport default Box;\n","import styled from \"styled-components\";\nimport {\n  COMMON,\n  BORDER,\n  LAYOUT,\n  POSITION,\n  FLEXBOX,\n  GRID,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeContainerProps } from \"./BoxTypes\";\n\nconst Container = styled.div<TypeContainerProps>`\n  box-sizing: border-box;\n  font-family: ${({ theme }) => theme.fontFamily};\n\n  ${COMMON}\n  ${BORDER}\n  ${LAYOUT}\n  ${POSITION}\n  ${FLEXBOX}\n  ${GRID}\n`;\n\nexport default Container;\n","import Box from \"./Box\";\n\nexport default Box;\nexport { Box };\nexport * from \"./BoxTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;;;ACAvB,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,IAAM,YAAY,OAAO;AAAA;AAAA,iBAER,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU;AAAA;AAAA,IAE5C,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,IAAI;AAAA;AAGR,IAAO,iBAAQ;;;ADhBT;AAHN,IAAM,MAAY;AAAA,EAChB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QAIA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,IAAI,cAAc;AAElB,IAAO,cAAQ;;;AEnBf,IAAO,cAAQ;","names":[]}
+{"version":3,"sources":["../../src/Box.tsx","../../src/styles.tsx","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeBoxProps } from \"./BoxTypes\";\n\nconst Box = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  ({ color, ...props }, ref) => {\n    return (\n      <Container\n        {...props}\n        ref={ref}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n      />\n    );\n  }\n);\n\nBox.displayName = \"Box\";\n\nexport default Box;\n","import styled from \"styled-components\";\nimport {\n  COMMON,\n  BORDER,\n  LAYOUT,\n  POSITION,\n  FLEXBOX,\n  GRID,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeContainerProps } from \"./BoxTypes\";\n\nconst Container = styled.div<TypeContainerProps>`\n  box-sizing: border-box;\n  font-family: ${({ theme }) => theme.fontFamily};\n\n  ${COMMON}\n  ${BORDER}\n  ${LAYOUT}\n  ${POSITION}\n  ${FLEXBOX}\n  ${GRID}\n`;\n\nexport default Container;\n","import Box from \"./Box\";\n\nexport default Box;\nexport { Box };\nexport * from \"./BoxTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;;;ACAvB,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,IAAM,YAAY,OAAO;AAAA;AAAA,iBAER,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU;AAAA;AAAA,IAE5C,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,IAAI;AAAA;AAGR,IAAO,iBAAQ;;;ADhBT;AAHN,IAAM,MAAY;AAAA,EAChB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QAIA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,IAAI,cAAc;AAElB,IAAO,cAAQ;;;AEnBf,IAAO,gBAAQ;","names":[]}

package/dist/index.js

@@ -28,12 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Box: () => Box_default,
-  default: () => src_default
+  default: () => index_default
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/Box.tsx
 var React = __toESM(require("react"));
@@ -72,7 +72,7 @@ Box.displayName = "Box";
 var Box_default = Box;
 
 // src/index.ts
-var src_default = Box_default;
+var index_default = Box_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Box

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Box.tsx","../src/styles.tsx"],"sourcesContent":["import Box from \"./Box\";\n\nexport default Box;\nexport { Box };\nexport * from \"./BoxTypes\";\n","import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeBoxProps } from \"./BoxTypes\";\n\nconst Box = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  ({ color, ...props }, ref) => {\n    return (\n      <Container\n        {...props}\n        ref={ref}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n      />\n    );\n  }\n);\n\nBox.displayName = \"Box\";\n\nexport default Box;\n","import styled from \"styled-components\";\nimport {\n  COMMON,\n  BORDER,\n  LAYOUT,\n  POSITION,\n  FLEXBOX,\n  GRID,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeContainerProps } from \"./BoxTypes\";\n\nconst Container = styled.div<TypeContainerProps>`\n  box-sizing: border-box;\n  font-family: ${({ theme }) => theme.fontFamily};\n\n  ${COMMON}\n  ${BORDER}\n  ${LAYOUT}\n  ${POSITION}\n  ${FLEXBOX}\n  ${GRID}\n`;\n\nexport default Container;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAAmB;AACnB,sCAOO;AAGP,IAAM,YAAY,yBAAAA,QAAO;AAAA;AAAA,iBAER,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU;AAAA;AAAA,IAE5C,sCAAM;AAAA,IACN,sCAAM;AAAA,IACN,sCAAM;AAAA,IACN,wCAAQ;AAAA,IACR,uCAAO;AAAA,IACP,oCAAI;AAAA;AAGR,IAAO,iBAAQ;;;ADhBT;AAHN,IAAM,MAAY;AAAA,EAChB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QAIA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,IAAI,cAAc;AAElB,IAAO,cAAQ;;;ADnBf,IAAO,cAAQ;","names":["styled"]}
+{"version":3,"sources":["../src/index.ts","../src/Box.tsx","../src/styles.tsx"],"sourcesContent":["import Box from \"./Box\";\n\nexport default Box;\nexport { Box };\nexport * from \"./BoxTypes\";\n","import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeBoxProps } from \"./BoxTypes\";\n\nconst Box = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  ({ color, ...props }, ref) => {\n    return (\n      <Container\n        {...props}\n        ref={ref}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n      />\n    );\n  }\n);\n\nBox.displayName = \"Box\";\n\nexport default Box;\n","import styled from \"styled-components\";\nimport {\n  COMMON,\n  BORDER,\n  LAYOUT,\n  POSITION,\n  FLEXBOX,\n  GRID,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeContainerProps } from \"./BoxTypes\";\n\nconst Container = styled.div<TypeContainerProps>`\n  box-sizing: border-box;\n  font-family: ${({ theme }) => theme.fontFamily};\n\n  ${COMMON}\n  ${BORDER}\n  ${LAYOUT}\n  ${POSITION}\n  ${FLEXBOX}\n  ${GRID}\n`;\n\nexport default Container;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAAmB;AACnB,sCAOO;AAGP,IAAM,YAAY,yBAAAA,QAAO;AAAA;AAAA,iBAER,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU;AAAA;AAAA,IAE5C,sCAAM;AAAA,IACN,sCAAM;AAAA,IACN,sCAAM;AAAA,IACN,wCAAQ;AAAA,IACR,uCAAO;AAAA,IACP,oCAAI;AAAA;AAGR,IAAO,iBAAQ;;;ADhBT;AAHN,IAAM,MAAY;AAAA,EAChB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QAIA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,IAAI,cAAc;AAElB,IAAO,cAAQ;;;ADnBf,IAAO,gBAAQ;","names":["styled"]}

package/jest.config.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-box",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Seeds React Box",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -9,6 +9,7 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -17,8 +18,8 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^*",
-    "@sproutsocial/seeds-react-system-props": "^*"
+    "@sproutsocial/seeds-react-theme": "^2.2.0",
+    "@sproutsocial/seeds-react-system-props": "^3.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/Box.stories.tsx

@@ -0,0 +1,154 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { css } from "styled-components";
+import Box from "./Box";
+import { theme } from "@sproutsocial/seeds-react-theme";
+import { useMeasure } from "@sproutsocial/seeds-react-hooks";
+
+const meta = {
+  title: "Components/Box",
+  component: Box,
+} satisfies Meta<typeof Box>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  name: "Example",
+  args: {
+    children: "This is a box.",
+    flexGrow: "1",
+    height: "200px",
+    bg: "neutral.100",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+};
+
+export const Responsive: Story = {
+  name: "Responsive example",
+  args: {
+    height: "200px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  render: (args) => {
+    const ref = React.useRef<HTMLDivElement>(null);
+    const { width } = useMeasure(ref);
+    return (
+      <>
+        <Box {...args} flexGrow="1">
+          This is a box.
+        </Box>
+        <Box
+          {...args}
+          mb={400}
+          bg={[
+            "neutral.100",
+            "blue.200",
+            "green.200",
+            "yellow.200",
+            "orange.200",
+          ]}
+        >
+          {width + "px"}
+        </Box>
+        {theme.breakpoints.map((width) => (
+          <Box
+            bg="neutral.200"
+            p={400}
+            width={width}
+            mb={400}
+            display="flex"
+            justifyContent="center"
+            position="relative"
+            css={css`
+              &:before {
+                content: "";
+              }
+            `}
+          >
+            {width}
+          </Box>
+        ))}
+      </>
+    );
+  },
+};
+
+export const FlexboxGap: Story = {
+  name: "Flexbox gap example",
+  args: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 200,
+    rowGap: 200,
+    columnGap: 200,
+  },
+  render: (args) => (
+    <Box {...args}>
+      {new Array(25).fill(null).map((_, i) => (
+        <Box
+          key={i}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          height="200px"
+          width="200px"
+          bg="green.400"
+        >
+          {i + 1}
+        </Box>
+      ))}
+    </Box>
+  ),
+};
+
+export const Grid: Story = {
+  name: "Grid example",
+  argTypes: {
+    gridArea: { control: "text" },
+    gridAutoColumns: { control: "text" },
+    gridAutoFlow: { control: "text" },
+    gridAutoRows: { control: "text" },
+    gridColumn: { control: "text" },
+    gridColumnGap: { control: "text" },
+    gridRow: { control: "text" },
+    gridRowGap: { control: "text" },
+    gridTemplateAreas: { control: "text" },
+    gridTemplateRows: { control: "text" },
+  },
+  args: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+    gap: 400,
+    gridArea: undefined,
+    gridAutoColumns: undefined,
+    gridAutoFlow: undefined,
+    gridAutoRows: undefined,
+    gridColumn: undefined,
+    gridColumnGap: undefined,
+    gridRow: undefined,
+    gridRowGap: undefined,
+    gridTemplateAreas: undefined,
+    gridTemplateRows: undefined,
+  },
+  render: (args) => (
+    <Box {...args}>
+      {new Array(25).fill(null).map((_, i) => (
+        <Box
+          key={i}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          height="200px"
+          bg="green.400"
+        >
+          {i + 1}
+        </Box>
+      ))}
+    </Box>
+  ),
+};

package/tsup.config.ts

@@ -8,4 +8,5 @@ export default defineConfig((options) => ({
   dts: options.dts,
   external: ["react"],
   sourcemap: true,
+  metafile: options.metafile,
 }));