-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
/
withGrid.ts
79 lines (67 loc) · 2.92 KB
/
withGrid.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import dedent from 'ts-dedent';
import deprecate from 'util-deprecate';
import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
import { clearStyles, addGridStyle } from '../helpers';
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
const deprecatedCellSizeWarning = deprecate(
() => {},
dedent`
Backgrounds Addon: The cell size parameter has been changed.
- parameters.grid.cellSize should now be parameters.backgrounds.grid.cellSize
See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-grid-parameter
`
);
export const withGrid = (StoryFn: StoryFunction, context: StoryContext) => {
const { globals, parameters } = context;
const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true;
const { cellAmount, cellSize, opacity } = gridParameters;
const isInDocs = context.viewMode === 'docs';
let gridSize: number;
if (parameters.grid?.cellSize) {
gridSize = parameters.grid.cellSize;
deprecatedCellSizeWarning();
} else {
gridSize = cellSize;
}
const isLayoutPadded = parameters.layout === undefined || parameters.layout === 'padded';
// 16px offset in the grid to account for padded layout
const defaultOffset = isLayoutPadded ? 16 : 0;
const offsetX = gridParameters.offsetX || isInDocs ? 20 : defaultOffset;
const offsetY = gridParameters.offsetY || isInDocs ? 20 : defaultOffset;
const gridStyles = useMemo(() => {
const selector =
context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
const backgroundSize = [
`${gridSize * cellAmount}px ${gridSize * cellAmount}px`,
`${gridSize * cellAmount}px ${gridSize * cellAmount}px`,
`${gridSize}px ${gridSize}px`,
`${gridSize}px ${gridSize}px`,
].join(', ');
return `
${selector} {
background-size: ${backgroundSize} !important;
background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
background-blend-mode: difference !important;
background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
linear-gradient(rgba(130, 130, 130, ${opacity / 2}) 1px, transparent 1px),
linear-gradient(90deg, rgba(130, 130, 130, ${
opacity / 2
}) 1px, transparent 1px) !important;
}
`;
}, [gridSize]);
useEffect(() => {
const selectorId =
context.viewMode === 'docs'
? `addon-backgrounds-grid-docs-${context.id}`
: `addon-backgrounds-grid`;
if (!isActive) {
clearStyles(selectorId);
return;
}
addGridStyle(selectorId, gridStyles);
}, [isActive, gridStyles, context]);
return StoryFn();
};