@spark-web/stack 1.0.2 → 1.0.5
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/README.md +8 -5
- package/dist/declarations/src/Stack.d.ts +2 -2
- package/dist/declarations/src/alignment.d.ts +5 -5
- package/dist/spark-web-stack.cjs.dev.js +3 -1
- package/dist/spark-web-stack.cjs.prod.js +3 -1
- package/dist/spark-web-stack.esm.js +3 -1
- package/package.json +16 -10
- package/CHANGELOG.md +0 -51
- package/src/Stack.stories.tsx +0 -27
- package/src/Stack.tsx +0 -59
- package/src/alignment.ts +0 -12
- package/src/index.ts +0 -5
package/README.md
CHANGED
|
@@ -103,10 +103,11 @@ Nest Stack components to create more complex white space rules.
|
|
|
103
103
|
|
|
104
104
|
## Props
|
|
105
105
|
|
|
106
|
-
| Prop | Type
|
|
107
|
-
| --------- |
|
|
108
|
-
| align? | [ResponsiveProp
|
|
109
|
-
| dividers? | boolean
|
|
106
|
+
| Prop | Type | Default | Description |
|
|
107
|
+
| --------- | -------------------------------------- | --------- | ----------------------------------------------------- |
|
|
108
|
+
| align? | [ResponsiveProp\<Align>][align] | 'stretch' | Horizontally align items within the container. |
|
|
109
|
+
| dividers? | boolean | | Sets whether to place a divider between each element. |
|
|
110
|
+
| data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes on the component. |
|
|
110
111
|
|
|
111
112
|
`Stack` props also include [`Box`](/package/box) props and are not listed here
|
|
112
113
|
(excludes `display`, `className`, `alignItems`, `flexDirection`,
|
|
@@ -115,4 +116,6 @@ Nest Stack components to create more complex white space rules.
|
|
|
115
116
|
Extra props are also passed into the underlying [`Box`](/package/box) component.
|
|
116
117
|
|
|
117
118
|
[align]:
|
|
118
|
-
https://
|
|
119
|
+
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/stack/src/Stack.tsx#L24
|
|
120
|
+
[data-attribute-map]:
|
|
121
|
+
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|
|
@@ -11,10 +11,10 @@ export declare type StackProps = {
|
|
|
11
11
|
} & ValidBoxProps;
|
|
12
12
|
export declare const Stack: <Comp extends import("react").ElementType<any> = "div">(props: {
|
|
13
13
|
as?: Comp | undefined;
|
|
14
|
-
ref?: import("react").Ref<Comp extends "symbol" | "
|
|
14
|
+
ref?: import("react").Ref<Comp extends "symbol" | "text" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "text" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
|
|
15
15
|
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
|
|
16
16
|
/** Horizontally align items within the stack. */
|
|
17
|
-
align?: ResponsiveProp<"
|
|
17
|
+
align?: ResponsiveProp<"right" | "left" | "center" | "stretch"> | undefined;
|
|
18
18
|
/** Place a divider between each element. */
|
|
19
19
|
dividers?: boolean | undefined;
|
|
20
20
|
} & ValidBoxProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
@@ -5,10 +5,10 @@ declare const alignLookup: {
|
|
|
5
5
|
readonly stretch: "stretch";
|
|
6
6
|
};
|
|
7
7
|
export declare type Align = keyof typeof alignLookup;
|
|
8
|
-
export declare const alignToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"
|
|
9
|
-
mobile: "
|
|
10
|
-
tablet: "
|
|
11
|
-
desktop: "
|
|
12
|
-
wide: "
|
|
8
|
+
export declare const alignToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"right" | "left" | "center" | "stretch"> | undefined) => "center" | "stretch" | "start" | "end" | {
|
|
9
|
+
mobile: "center" | "stretch" | "start" | "end" | undefined;
|
|
10
|
+
tablet: "center" | "stretch" | "start" | "end" | undefined;
|
|
11
|
+
desktop: "center" | "stretch" | "start" | "end" | undefined;
|
|
12
|
+
wide: "center" | "stretch" | "start" | "end" | undefined;
|
|
13
13
|
} | undefined;
|
|
14
14
|
export {};
|
|
@@ -19,11 +19,12 @@ var alignLookup = {
|
|
|
19
19
|
};
|
|
20
20
|
var alignToAlignItems = theme.createResponsiveMapFn(alignLookup);
|
|
21
21
|
|
|
22
|
-
var _excluded = ["align", "children", "dividers"];
|
|
22
|
+
var _excluded = ["align", "children", "data", "dividers"];
|
|
23
23
|
var Stack = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
24
24
|
var _ref$align = _ref.align,
|
|
25
25
|
align = _ref$align === void 0 ? 'stretch' : _ref$align,
|
|
26
26
|
children = _ref.children,
|
|
27
|
+
data = _ref.data,
|
|
27
28
|
dividers = _ref.dividers,
|
|
28
29
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
29
30
|
|
|
@@ -32,6 +33,7 @@ var Stack = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
32
33
|
var rootProps = _objectSpread({
|
|
33
34
|
ref: forwardedRef,
|
|
34
35
|
alignItems: alignItems,
|
|
36
|
+
data: data,
|
|
35
37
|
display: 'flex',
|
|
36
38
|
flexDirection: 'column'
|
|
37
39
|
}, props); // bail early w/o dividers to avoid unnecessary map
|
|
@@ -19,11 +19,12 @@ var alignLookup = {
|
|
|
19
19
|
};
|
|
20
20
|
var alignToAlignItems = theme.createResponsiveMapFn(alignLookup);
|
|
21
21
|
|
|
22
|
-
var _excluded = ["align", "children", "dividers"];
|
|
22
|
+
var _excluded = ["align", "children", "data", "dividers"];
|
|
23
23
|
var Stack = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
24
24
|
var _ref$align = _ref.align,
|
|
25
25
|
align = _ref$align === void 0 ? 'stretch' : _ref$align,
|
|
26
26
|
children = _ref.children,
|
|
27
|
+
data = _ref.data,
|
|
27
28
|
dividers = _ref.dividers,
|
|
28
29
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
29
30
|
|
|
@@ -32,6 +33,7 @@ var Stack = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
32
33
|
var rootProps = _objectSpread({
|
|
33
34
|
ref: forwardedRef,
|
|
34
35
|
alignItems: alignItems,
|
|
36
|
+
data: data,
|
|
35
37
|
display: 'flex',
|
|
36
38
|
flexDirection: 'column'
|
|
37
39
|
}, props); // bail early w/o dividers to avoid unnecessary map
|
|
@@ -15,11 +15,12 @@ var alignLookup = {
|
|
|
15
15
|
};
|
|
16
16
|
var alignToAlignItems = createResponsiveMapFn(alignLookup);
|
|
17
17
|
|
|
18
|
-
var _excluded = ["align", "children", "dividers"];
|
|
18
|
+
var _excluded = ["align", "children", "data", "dividers"];
|
|
19
19
|
var Stack = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
20
20
|
var _ref$align = _ref.align,
|
|
21
21
|
align = _ref$align === void 0 ? 'stretch' : _ref$align,
|
|
22
22
|
children = _ref.children,
|
|
23
|
+
data = _ref.data,
|
|
23
24
|
dividers = _ref.dividers,
|
|
24
25
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
25
26
|
|
|
@@ -28,6 +29,7 @@ var Stack = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
28
29
|
var rootProps = _objectSpread({
|
|
29
30
|
ref: forwardedRef,
|
|
30
31
|
alignItems: alignItems,
|
|
32
|
+
data: data,
|
|
31
33
|
display: 'flex',
|
|
32
34
|
flexDirection: 'column'
|
|
33
35
|
}, props); // bail early w/o dividers to avoid unnecessary map
|
package/package.json
CHANGED
|
@@ -1,21 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/stack",
|
|
3
|
+
"version": "1.0.5",
|
|
3
4
|
"license": "MIT",
|
|
4
|
-
"version": "1.0.2",
|
|
5
5
|
"main": "dist/spark-web-stack.cjs.js",
|
|
6
6
|
"module": "dist/spark-web-stack.esm.js",
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@babel/runtime": "^7.
|
|
12
|
-
"@emotion/css": "^11.
|
|
13
|
-
"@spark-web/box": "^1.0.
|
|
14
|
-
"@spark-web/divider": "^1.0.
|
|
15
|
-
"@spark-web/theme": "^
|
|
16
|
-
"@spark-web/utils": "^1.
|
|
11
|
+
"@babel/runtime": "^7.18.0",
|
|
12
|
+
"@emotion/css": "^11.9.0",
|
|
13
|
+
"@spark-web/box": "^1.0.5",
|
|
14
|
+
"@spark-web/divider": "^1.0.5",
|
|
15
|
+
"@spark-web/theme": "^3.0.1",
|
|
16
|
+
"@spark-web/utils": "^1.1.3"
|
|
17
|
+
},
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"@types/react": "^17.0.12",
|
|
17
20
|
"react": "^17.0.2"
|
|
18
21
|
},
|
|
22
|
+
"peerDependencies": {
|
|
23
|
+
"react": ">=17.0.2"
|
|
24
|
+
},
|
|
19
25
|
"engines": {
|
|
20
26
|
"node": ">= 14.13"
|
|
21
27
|
}
|
package/CHANGELOG.md
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
# @spark-web/stack
|
|
2
|
-
|
|
3
|
-
## 1.0.2
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
- [#40](https://github.com/brighte-labs/spark-web/pull/40)
|
|
8
|
-
[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
|
|
9
|
-
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
|
|
10
|
-
@babel/transform-runtime
|
|
11
|
-
|
|
12
|
-
- Updated dependencies
|
|
13
|
-
[[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
|
|
14
|
-
- @spark-web/box@1.0.2
|
|
15
|
-
- @spark-web/divider@1.0.2
|
|
16
|
-
- @spark-web/theme@2.0.1
|
|
17
|
-
- @spark-web/utils@1.0.2
|
|
18
|
-
|
|
19
|
-
## 1.0.1
|
|
20
|
-
|
|
21
|
-
### Patch Changes
|
|
22
|
-
|
|
23
|
-
- [#36](https://github.com/brighte-labs/spark-web/pull/36)
|
|
24
|
-
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
|
|
25
|
-
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
|
|
26
|
-
config
|
|
27
|
-
|
|
28
|
-
- Updated dependencies
|
|
29
|
-
[[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
|
|
30
|
-
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
|
|
31
|
-
- @spark-web/theme@2.0.0
|
|
32
|
-
- @spark-web/box@1.0.1
|
|
33
|
-
- @spark-web/divider@1.0.1
|
|
34
|
-
- @spark-web/utils@1.0.1
|
|
35
|
-
|
|
36
|
-
## 1.0.0
|
|
37
|
-
|
|
38
|
-
### Major Changes
|
|
39
|
-
|
|
40
|
-
- [#27](https://github.com/brighte-labs/spark-web/pull/27)
|
|
41
|
-
[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
|
|
42
|
-
Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
|
|
43
|
-
|
|
44
|
-
### Patch Changes
|
|
45
|
-
|
|
46
|
-
- Updated dependencies
|
|
47
|
-
[[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
|
|
48
|
-
- @spark-web/box@1.0.0
|
|
49
|
-
- @spark-web/divider@1.0.0
|
|
50
|
-
- @spark-web/theme@1.0.0
|
|
51
|
-
- @spark-web/utils@1.0.0
|
package/src/Stack.stories.tsx
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import type { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
2
|
-
|
|
3
|
-
import { Placeholder } from '../../../docs/components/example-helpers';
|
|
4
|
-
import type { StackProps } from './Stack';
|
|
5
|
-
import { Stack } from './Stack';
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
title: 'Page & Layout / Stack',
|
|
9
|
-
component: Stack,
|
|
10
|
-
} as ComponentMeta<typeof Stack>;
|
|
11
|
-
|
|
12
|
-
const StackStory: ComponentStory<typeof Stack> = (args: StackProps) => (
|
|
13
|
-
<Stack {...args} />
|
|
14
|
-
);
|
|
15
|
-
|
|
16
|
-
export const Default = StackStory.bind({});
|
|
17
|
-
|
|
18
|
-
Default.args = {
|
|
19
|
-
gap: 'large',
|
|
20
|
-
children: (
|
|
21
|
-
<>
|
|
22
|
-
<Placeholder height={40} />
|
|
23
|
-
<Placeholder height={40} />
|
|
24
|
-
<Placeholder height={40} />
|
|
25
|
-
</>
|
|
26
|
-
),
|
|
27
|
-
} as StackProps;
|
package/src/Stack.tsx
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import type { BoxProps } from '@spark-web/box';
|
|
2
|
-
import { Box } from '@spark-web/box';
|
|
3
|
-
import { Divider } from '@spark-web/divider';
|
|
4
|
-
import type { ResponsiveProp } from '@spark-web/theme';
|
|
5
|
-
import { forwardRefWithAs } from '@spark-web/utils/ts';
|
|
6
|
-
import type { ReactElement } from 'react';
|
|
7
|
-
import { Children, Fragment } from 'react';
|
|
8
|
-
|
|
9
|
-
import type { Align } from './alignment';
|
|
10
|
-
import { alignToAlignItems } from './alignment';
|
|
11
|
-
|
|
12
|
-
type ValidBoxProps = Omit<
|
|
13
|
-
BoxProps,
|
|
14
|
-
| 'display'
|
|
15
|
-
| 'className'
|
|
16
|
-
| 'alignItems'
|
|
17
|
-
| 'flexDirection'
|
|
18
|
-
| 'justifyContent'
|
|
19
|
-
| 'flexWrap'
|
|
20
|
-
>;
|
|
21
|
-
|
|
22
|
-
export type StackProps = {
|
|
23
|
-
/** Horizontally align items within the stack. */
|
|
24
|
-
align?: ResponsiveProp<Align>;
|
|
25
|
-
/** Place a divider between each element. */
|
|
26
|
-
dividers?: boolean;
|
|
27
|
-
} & ValidBoxProps;
|
|
28
|
-
|
|
29
|
-
export const Stack = forwardRefWithAs<'div', StackProps>(
|
|
30
|
-
({ align = 'stretch', children, dividers, ...props }, forwardedRef) => {
|
|
31
|
-
const alignItems = alignToAlignItems(align);
|
|
32
|
-
const rootProps = {
|
|
33
|
-
ref: forwardedRef,
|
|
34
|
-
alignItems,
|
|
35
|
-
display: 'flex',
|
|
36
|
-
flexDirection: 'column',
|
|
37
|
-
...props,
|
|
38
|
-
} as const;
|
|
39
|
-
|
|
40
|
-
// bail early w/o dividers to avoid unnecessary map
|
|
41
|
-
if (!dividers) {
|
|
42
|
-
return <Box {...rootProps}>{children}</Box>;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
// map over children to insert dividers
|
|
46
|
-
// remove falsy values before mapping, keeps the index in sync
|
|
47
|
-
const childArray = Children.toArray(children) as ReactElement[];
|
|
48
|
-
return (
|
|
49
|
-
<Box {...rootProps}>
|
|
50
|
-
{childArray.map((child, idx) => (
|
|
51
|
-
<Fragment key={child.key || idx}>
|
|
52
|
-
{dividers && idx ? <Divider /> : null}
|
|
53
|
-
{child}
|
|
54
|
-
</Fragment>
|
|
55
|
-
))}
|
|
56
|
-
</Box>
|
|
57
|
-
);
|
|
58
|
-
}
|
|
59
|
-
);
|
package/src/alignment.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { createResponsiveMapFn } from '@spark-web/theme';
|
|
2
|
-
|
|
3
|
-
const alignLookup = {
|
|
4
|
-
left: 'start',
|
|
5
|
-
center: 'center',
|
|
6
|
-
right: 'end',
|
|
7
|
-
stretch: 'stretch',
|
|
8
|
-
} as const;
|
|
9
|
-
|
|
10
|
-
export type Align = keyof typeof alignLookup;
|
|
11
|
-
|
|
12
|
-
export const alignToAlignItems = createResponsiveMapFn(alignLookup);
|