@sproutsocial/seeds-react-grid 0.0.1 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +4 -4
- package/CHANGELOG.md +6 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/GridTypes.ts +2 -2
- package/src/__tests__/Grid.typetest.tsx +3 -3
package/.turbo/turbo-build.log
CHANGED
|
@@ -10,12 +10,12 @@ $ tsup --dts
|
|
|
10
10
|
[34mESM[39m Build start
|
|
11
11
|
[32mCJS[39m [1mdist/index.js [22m[32m3.61 KB[39m
|
|
12
12
|
[32mCJS[39m [1mdist/index.js.map [22m[32m4.56 KB[39m
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 99ms
|
|
14
14
|
[32mESM[39m [1mdist/esm/index.js [22m[32m1.71 KB[39m
|
|
15
15
|
[32mESM[39m [1mdist/esm/index.js.map [22m[32m4.45 KB[39m
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 101ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 4810ms
|
|
19
19
|
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.50 KB[39m
|
|
20
20
|
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.50 KB[39m
|
|
21
|
-
Done in 6.
|
|
21
|
+
Done in 6.61s.
|
package/CHANGELOG.md
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Grid.tsx","../../src/utils.ts","../../src/GridTypes.ts","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps, GridProps } from \"./GridTypes\";\nimport { getResponsiveStyles } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nconst Grid: React.FC<GridProps> = ({\n columns = 1,\n gap = 400,\n rowGap,\n columnGap,\n children,\n className,\n}) => {\n return (\n <Container\n display=\"grid\"\n rowGap={rowGap ?? gap}\n columnGap={columnGap ?? gap}\n $columns={columns}\n className={className}\n >\n {children}\n </Container>\n );\n};\n\nexport default Grid;\n","import type { ResponsiveValue } from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n// WE may want to check this. I also see seeds-react/seeds-react-grid/src/constants.ts which has different values\n// And 900px for \"small\" seems way too big\nconst { breakpoints } = theme;\n\nexport const getResponsiveStyles = (columns: ResponsiveValue = 1) => {\n if (typeof columns === \"number\") {\n return css`\n grid-template-columns: repeat(${columns}, 1fr);\n `;\n }\n\n return css`\n grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n\n @media (min-width: ${breakpoints.md}px) {\n grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n }\n\n @media (min-width: ${breakpoints.lg}px) {\n grid-template-columns: repeat(\n ${columns.lg || columns.md || columns.sm || 1},\n 1fr\n );\n }\n\n @media (min-width: ${breakpoints.xl}px) {\n grid-template-columns: repeat(\n ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n 1fr\n );\n }\n `;\n};\n","import
|
|
1
|
+
{"version":3,"sources":["../../src/Grid.tsx","../../src/utils.ts","../../src/GridTypes.ts","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps, GridProps } from \"./GridTypes\";\nimport { getResponsiveStyles } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nconst Grid: React.FC<GridProps> = ({\n columns = 1,\n gap = 400,\n rowGap,\n columnGap,\n children,\n className,\n}) => {\n return (\n <Container\n display=\"grid\"\n rowGap={rowGap ?? gap}\n columnGap={columnGap ?? gap}\n $columns={columns}\n className={className}\n >\n {children}\n </Container>\n );\n};\n\nexport default Grid;\n","import type { ResponsiveValue } from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n// WE may want to check this. I also see seeds-react/seeds-react-grid/src/constants.ts which has different values\n// And 900px for \"small\" seems way too big\nconst { breakpoints } = theme;\n\nexport const getResponsiveStyles = (columns: ResponsiveValue = 1) => {\n if (typeof columns === \"number\") {\n return css`\n grid-template-columns: repeat(${columns}, 1fr);\n `;\n }\n\n return css`\n grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n\n @media (min-width: ${breakpoints.md}px) {\n grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n }\n\n @media (min-width: ${breakpoints.lg}px) {\n grid-template-columns: repeat(\n ${columns.lg || columns.md || columns.sm || 1},\n 1fr\n );\n }\n\n @media (min-width: ${breakpoints.xl}px) {\n grid-template-columns: repeat(\n ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n 1fr\n );\n }\n `;\n};\n","import type { TypeSpace } from \"@sproutsocial/seeds-react-theme\";\nimport * as React from \"react\";\n\nexport type ResponsiveValue =\n | number\n | {\n sm?: number;\n md?: number;\n lg?: number;\n xl?: number;\n };\n\n/**\n * Gap value that can be either:\n * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)\n * - A pixel string value (e.g., \"16px\", \"20px\")\n */\nexport type GapValue = keyof TypeSpace | (string & {});\n\nexport interface ContainerProps {\n $columns?: ResponsiveValue;\n}\n\nexport interface GridProps {\n /** Number of columns (can be responsive) */\n columns?: ResponsiveValue;\n /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., \"16px\") */\n gap?: GapValue;\n /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., \"16px\") */\n rowGap?: GapValue;\n /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., \"16px\") */\n columnGap?: GapValue;\n /** Children elements to display in the grid */\n children?: React.ReactNode;\n /** Custom className */\n className?: string;\n}\n","export const BREAKPOINTS = {\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n} as const;\n","import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\nexport { BREAKPOINTS } from \"./constants\";\n"],"mappings":";AAAA,OAAkB;AAClB,OAAO,YAAY;AACnB,OAAO,SAAS;;;ACDhB,SAAS,WAAW;AACpB,SAAS,aAAa;AAGtB,IAAM,EAAE,YAAY,IAAI;AAEjB,IAAM,sBAAsB,CAAC,UAA2B,MAAM;AACnE,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO;AAAA,sCAC2B,OAAO;AAAA;AAAA,EAE3C;AAEA,SAAO;AAAA,oCAC2B,QAAQ,MAAM,CAAC;AAAA;AAAA,yBAE1B,YAAY,EAAE;AAAA,sCACD,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG1C,YAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,yBAK5B,YAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAKnE;;;ADhBI;AAbJ,IAAM,YAAY,OAAO,GAAG;AAAA,IACxB,CAAC,UAAU,oBAAoB,MAAM,QAAQ,CAAC;AAAA;AAGlD,IAAM,OAA4B,CAAC;AAAA,EACjC,UAAU;AAAA,EACV,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,QAAQ,UAAU;AAAA,MAClB,WAAW,aAAa;AAAA,MACxB,UAAU;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;AE9Bf,OAAuB;;;ACDhB,IAAM,cAAc;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;ACHA,IAAO,gBAAQ;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -13,7 +13,7 @@ type ResponsiveValue = number | {
|
|
|
13
13
|
* - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
14
14
|
* - A pixel string value (e.g., "16px", "20px")
|
|
15
15
|
*/
|
|
16
|
-
type GapValue = keyof TypeSpace |
|
|
16
|
+
type GapValue = keyof TypeSpace | (string & {});
|
|
17
17
|
interface ContainerProps {
|
|
18
18
|
$columns?: ResponsiveValue;
|
|
19
19
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ type ResponsiveValue = number | {
|
|
|
13
13
|
* - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
14
14
|
* - A pixel string value (e.g., "16px", "20px")
|
|
15
15
|
*/
|
|
16
|
-
type GapValue = keyof TypeSpace |
|
|
16
|
+
type GapValue = keyof TypeSpace | (string & {});
|
|
17
17
|
interface ContainerProps {
|
|
18
18
|
$columns?: ResponsiveValue;
|
|
19
19
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Grid.tsx","../src/utils.ts","../src/GridTypes.ts","../src/constants.ts"],"sourcesContent":["import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\nexport { BREAKPOINTS } from \"./constants\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps, GridProps } from \"./GridTypes\";\nimport { getResponsiveStyles } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nconst Grid: React.FC<GridProps> = ({\n columns = 1,\n gap = 400,\n rowGap,\n columnGap,\n children,\n className,\n}) => {\n return (\n <Container\n display=\"grid\"\n rowGap={rowGap ?? gap}\n columnGap={columnGap ?? gap}\n $columns={columns}\n className={className}\n >\n {children}\n </Container>\n );\n};\n\nexport default Grid;\n","import type { ResponsiveValue } from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n// WE may want to check this. I also see seeds-react/seeds-react-grid/src/constants.ts which has different values\n// And 900px for \"small\" seems way too big\nconst { breakpoints } = theme;\n\nexport const getResponsiveStyles = (columns: ResponsiveValue = 1) => {\n if (typeof columns === \"number\") {\n return css`\n grid-template-columns: repeat(${columns}, 1fr);\n `;\n }\n\n return css`\n grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n\n @media (min-width: ${breakpoints.md}px) {\n grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n }\n\n @media (min-width: ${breakpoints.lg}px) {\n grid-template-columns: repeat(\n ${columns.lg || columns.md || columns.sm || 1},\n 1fr\n );\n }\n\n @media (min-width: ${breakpoints.xl}px) {\n grid-template-columns: repeat(\n ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n 1fr\n );\n }\n `;\n};\n","import
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Grid.tsx","../src/utils.ts","../src/GridTypes.ts","../src/constants.ts"],"sourcesContent":["import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\nexport { BREAKPOINTS } from \"./constants\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps, GridProps } from \"./GridTypes\";\nimport { getResponsiveStyles } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nconst Grid: React.FC<GridProps> = ({\n columns = 1,\n gap = 400,\n rowGap,\n columnGap,\n children,\n className,\n}) => {\n return (\n <Container\n display=\"grid\"\n rowGap={rowGap ?? gap}\n columnGap={columnGap ?? gap}\n $columns={columns}\n className={className}\n >\n {children}\n </Container>\n );\n};\n\nexport default Grid;\n","import type { ResponsiveValue } from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n// WE may want to check this. I also see seeds-react/seeds-react-grid/src/constants.ts which has different values\n// And 900px for \"small\" seems way too big\nconst { breakpoints } = theme;\n\nexport const getResponsiveStyles = (columns: ResponsiveValue = 1) => {\n if (typeof columns === \"number\") {\n return css`\n grid-template-columns: repeat(${columns}, 1fr);\n `;\n }\n\n return css`\n grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n\n @media (min-width: ${breakpoints.md}px) {\n grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n }\n\n @media (min-width: ${breakpoints.lg}px) {\n grid-template-columns: repeat(\n ${columns.lg || columns.md || columns.sm || 1},\n 1fr\n );\n }\n\n @media (min-width: ${breakpoints.xl}px) {\n grid-template-columns: repeat(\n ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n 1fr\n );\n }\n `;\n};\n","import type { TypeSpace } from \"@sproutsocial/seeds-react-theme\";\nimport * as React from \"react\";\n\nexport type ResponsiveValue =\n | number\n | {\n sm?: number;\n md?: number;\n lg?: number;\n xl?: number;\n };\n\n/**\n * Gap value that can be either:\n * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)\n * - A pixel string value (e.g., \"16px\", \"20px\")\n */\nexport type GapValue = keyof TypeSpace | (string & {});\n\nexport interface ContainerProps {\n $columns?: ResponsiveValue;\n}\n\nexport interface GridProps {\n /** Number of columns (can be responsive) */\n columns?: ResponsiveValue;\n /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., \"16px\") */\n gap?: GapValue;\n /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., \"16px\") */\n rowGap?: GapValue;\n /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., \"16px\") */\n columnGap?: GapValue;\n /** Children elements to display in the grid */\n children?: React.ReactNode;\n /** Custom className */\n className?: string;\n}\n","export const BREAKPOINTS = {\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,IAAAA,4BAAmB;AACnB,6BAAgB;;;ACDhB,+BAAoB;AACpB,+BAAsB;AAGtB,IAAM,EAAE,YAAY,IAAI;AAEjB,IAAM,sBAAsB,CAAC,UAA2B,MAAM;AACnE,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO;AAAA,sCAC2B,OAAO;AAAA;AAAA,EAE3C;AAEA,SAAO;AAAA,oCAC2B,QAAQ,MAAM,CAAC;AAAA;AAAA,yBAE1B,YAAY,EAAE;AAAA,sCACD,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG1C,YAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,yBAK5B,YAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAKnE;;;ADhBI;AAbJ,IAAM,gBAAY,0BAAAC,SAAO,uBAAAC,OAAG;AAAA,IACxB,CAAC,UAAU,oBAAoB,MAAM,QAAQ,CAAC;AAAA;AAGlD,IAAM,OAA4B,CAAC;AAAA,EACjC,UAAU;AAAA,EACV,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,QAAQ,UAAU;AAAA,MAClB,WAAW,aAAa;AAAA,MACxB,UAAU;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;AE9Bf,IAAAC,SAAuB;;;ACDhB,IAAM,cAAc;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;AJHA,IAAO,gBAAQ;","names":["import_styled_components","styled","Box","React"]}
|
package/package.json
CHANGED
package/src/GridTypes.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
1
|
import type { TypeSpace } from "@sproutsocial/seeds-react-theme";
|
|
2
|
+
import * as React from "react";
|
|
3
3
|
|
|
4
4
|
export type ResponsiveValue =
|
|
5
5
|
| number
|
|
@@ -15,7 +15,7 @@ export type ResponsiveValue =
|
|
|
15
15
|
* - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
16
16
|
* - A pixel string value (e.g., "16px", "20px")
|
|
17
17
|
*/
|
|
18
|
-
export type GapValue = keyof TypeSpace |
|
|
18
|
+
export type GapValue = keyof TypeSpace | (string & {});
|
|
19
19
|
|
|
20
20
|
export interface ContainerProps {
|
|
21
21
|
$columns?: ResponsiveValue;
|
|
@@ -62,7 +62,7 @@ function GridTypes() {
|
|
|
62
62
|
<div>Item</div>
|
|
63
63
|
</Grid>
|
|
64
64
|
|
|
65
|
-
{/*
|
|
65
|
+
{/* Valid gap value - any string is allowed */}
|
|
66
66
|
<Grid gap="invalid">
|
|
67
67
|
<div>Item</div>
|
|
68
68
|
</Grid>
|
|
@@ -87,12 +87,12 @@ function GridTypes() {
|
|
|
87
87
|
<div>Item</div>
|
|
88
88
|
</Grid>
|
|
89
89
|
|
|
90
|
-
{/*
|
|
90
|
+
{/* Valid gap value - any string is allowed */}
|
|
91
91
|
<Grid gap="16rem">
|
|
92
92
|
<div>Item</div>
|
|
93
93
|
</Grid>
|
|
94
94
|
|
|
95
|
-
{/*
|
|
95
|
+
{/* Valid gap value - any string is allowed */}
|
|
96
96
|
<Grid gap="1em">
|
|
97
97
|
<div>Item</div>
|
|
98
98
|
</Grid>
|