react-skeleton-builder
Version:
A versatile React component library for creating customizable skeleton loading animations with Chakra UI and TypeScript.
611 lines (597 loc) • 24 kB
JavaScript
'use client';
;
Object.defineProperty(exports, '__esModule', { value: true });
var parse = require('style-to-object');
var React = require('react');
var reactUse = require('react-use');
exports.DIRECTION = void 0;
(function (DIRECTION) {
DIRECTION["ROW"] = "row";
DIRECTION["COLUMN"] = "column";
})(exports.DIRECTION || (exports.DIRECTION = {}));
exports.COLOR_MODES = void 0;
(function (COLOR_MODES) {
COLOR_MODES["LIGHT"] = "light";
COLOR_MODES["DARK"] = "dark";
})(exports.COLOR_MODES || (exports.COLOR_MODES = {}));
exports.MARGIN_SIDES = void 0;
(function (MARGIN_SIDES) {
MARGIN_SIDES["TOP"] = "top";
MARGIN_SIDES["RIGHT"] = "right";
MARGIN_SIDES["BOTTOM"] = "bottom";
MARGIN_SIDES["LEFT"] = "left";
})(exports.MARGIN_SIDES || (exports.MARGIN_SIDES = {}));
exports.ALIGN_ITEMS = void 0;
(function (ALIGN_ITEMS) {
ALIGN_ITEMS["NORMAL"] = "normal";
ALIGN_ITEMS["FLEX_START"] = "flex-start";
ALIGN_ITEMS["FLEX_END"] = "flex-end";
ALIGN_ITEMS["CENTER"] = "center";
ALIGN_ITEMS["BASELINE"] = "baseline";
ALIGN_ITEMS["STRETCH"] = "stretch";
ALIGN_ITEMS["START"] = "start";
ALIGN_ITEMS["END"] = "end";
ALIGN_ITEMS["SELF_START"] = "self-start";
ALIGN_ITEMS["SELF_END"] = "self-end";
ALIGN_ITEMS["FIRST_BASELINE"] = "first baseline";
ALIGN_ITEMS["LAST_BASELINE"] = "last baseline";
ALIGN_ITEMS["SAFE_CENTER"] = "safe center";
ALIGN_ITEMS["UNSAFE_CENTER"] = "unsafe center";
ALIGN_ITEMS["SAFE_RIGHT"] = "safe right";
ALIGN_ITEMS["UNSAFE_RIGHT"] = "unsafe right";
ALIGN_ITEMS["SAFE_END"] = "safe end";
ALIGN_ITEMS["UNSAFE_END"] = "unsafe end";
ALIGN_ITEMS["SAFE_SELF_END"] = "safe self-end";
ALIGN_ITEMS["UNSAFE_SELF_END"] = "unsafe self-end";
ALIGN_ITEMS["SAFE_FLEX_END"] = "safe flex-end";
ALIGN_ITEMS["UNSAFE_FLEX_END"] = "unsafe flex-end";
})(exports.ALIGN_ITEMS || (exports.ALIGN_ITEMS = {}));
exports.JUSTIFY_CONTENT = void 0;
(function (JUSTIFY_CONTENT) {
JUSTIFY_CONTENT["START"] = "start";
JUSTIFY_CONTENT["END"] = "end";
JUSTIFY_CONTENT["FLEX_START"] = "flex-start";
JUSTIFY_CONTENT["FLEX_END"] = "flex-end";
JUSTIFY_CONTENT["CENTER"] = "center";
JUSTIFY_CONTENT["LEFT"] = "left";
JUSTIFY_CONTENT["RIGHT"] = "right";
JUSTIFY_CONTENT["SPACE_BETWEEN"] = "space-between";
JUSTIFY_CONTENT["SPACE_AROUND"] = "space-around";
JUSTIFY_CONTENT["SPACE_EVENLY"] = "space-evenly";
JUSTIFY_CONTENT["STRETCH"] = "stretch";
})(exports.JUSTIFY_CONTENT || (exports.JUSTIFY_CONTENT = {}));
exports.SIZE_UNITS = void 0;
(function (SIZE_UNITS) {
SIZE_UNITS["AUTO"] = "auto";
SIZE_UNITS["PERCENT"] = "%";
SIZE_UNITS["FN"] = "fn";
SIZE_UNITS["PX"] = "px";
SIZE_UNITS["FR"] = "fr";
SIZE_UNITS["REM"] = "rem";
SIZE_UNITS["VH"] = "vh";
SIZE_UNITS["VW"] = "vw";
SIZE_UNITS["PC"] = "pc";
SIZE_UNITS["CM"] = "cm";
SIZE_UNITS["MM"] = "mm";
SIZE_UNITS["IN"] = "in";
SIZE_UNITS["PT"] = "pt";
SIZE_UNITS["CH"] = "ch";
SIZE_UNITS["EM"] = "em";
SIZE_UNITS["V_MIN"] = "vmin";
SIZE_UNITS["V_MAX"] = "vmax";
})(exports.SIZE_UNITS || (exports.SIZE_UNITS = {}));
exports.COLOR_MODE = void 0;
(function (COLOR_MODE) {
COLOR_MODE["DARK"] = "dark";
COLOR_MODE["LIGHT"] = "light";
})(exports.COLOR_MODE || (exports.COLOR_MODE = {}));
exports.SKELETON_ANIMATION_VARIANTS = void 0;
(function (SKELETON_ANIMATION_VARIANTS) {
SKELETON_ANIMATION_VARIANTS["SLIDE"] = "slide";
SKELETON_ANIMATION_VARIANTS["FADE"] = "fade";
})(exports.SKELETON_ANIMATION_VARIANTS || (exports.SKELETON_ANIMATION_VARIANTS = {}));
const inheritFromParent = (grid, parent) => {
return {
...grid,
...Object.keys(parent).reduce((acc, item) => {
if (!['children', 'skeletons', 'responsive'].includes(item) &&
!Object.prototype.hasOwnProperty.call(grid, item)) {
acc[item] = parent[item];
}
return acc;
}, {}),
};
};
const getAdaptiveData = (grid, device, isSkeleton) => {
var _a;
return device !== 'desktop' &&
device &&
Object.prototype.hasOwnProperty.call(grid, 'responsive')
? {
...putInitialValuesIfNotExists(inheritFromParent((_a = grid.responsive[device]) !== null && _a !== void 0 ? _a : {}, grid), isSkeleton),
...(Object.prototype.hasOwnProperty.call(grid, 'children') && {
children: grid.children,
}),
...(Object.prototype.hasOwnProperty.call(grid, 'skeletons') && {
skeletons: grid.skeletons,
}),
}
: putInitialValuesIfNotExists(grid, isSkeleton);
};
const convertToArray = (str) => { var _a; return ((_a = str.replace(/\[|\]/g, '')) === null || _a === void 0 ? void 0 : _a.split(',')) || []; };
const isNumber = (n) => !isNaN(parseFloat(String(n))) && isFinite(Number(n));
const generateMargin = (marginProp, unit) => {
const marginDetect = () => {
let [t, r, b, l] = convertToArray(marginProp);
if (t && !r && !b && !l) {
r = t;
b = t;
l = t;
}
else {
if (!t) {
t = b || '0';
}
if (!r) {
r = l || '0';
}
if (!b) {
b = t || '0';
}
if (!l) {
l = r || '0';
}
}
return [t, r, b, l].reduce((acc, item) => {
acc += isNumber(item) ? item + `${unit} ` : item + ' ';
return acc;
}, '');
};
return marginDetect();
};
const generateGridArea = (row, cb) => {
return row.reduce((acc, item, index) => {
const isFunction = typeof item.w === 'function';
if (isFunction) {
const w = item.w();
acc += (Array.isArray(item) ? DEFAULT_GRID_CONTAINER_WIDTH : w) + ' ';
cb(index, 'w', w);
}
else {
acc += Array.isArray(item)
? DEFAULT_GRID_CONTAINER_WIDTH
: (item.w === DEFAULT_WIDTH ? '1fr' : item.w) + ' ';
}
return acc;
}, '1fr / ');
};
const generateGridAreaAsColDirection = (items, alignItems, cb) => {
return (items.reduce((acc, item, index) => {
const isFunction = typeof item.h === 'function';
if (isFunction) {
const h = item.h();
acc +=
(alignItems === 'center' ? DEFAULT_GRID_CONTAINER_HEIGHT : h) + ' ';
cb(index, 'h', h);
}
else {
acc +=
(alignItems === 'center'
? DEFAULT_GRID_CONTAINER_HEIGHT
: !item.h || item.h === DEFAULT_HEIGHT
? DEFAULT_GRID_CONTAINER_HEIGHT
: item.h) + ' ';
}
return acc;
}, '') + ' / 1fr');
};
const mutateWithRepeated = (repeatCount, currentKey, item, index) => {
return repeatCount > 0 && index > 0
? {
isRepeated: true,
key: currentKey + '_repeated_' + index,
item,
}
: { key: currentKey + '_' + (index + 1), item };
};
const putInitialValuesIfNotExists = (item, isSkeleton) => {
function mutate(initialValues) {
return Object.keys(initialValues).reduce((acc, key) => {
const typedKey = key;
if (!(typedKey in item)) {
acc[typedKey] = initialValues[typedKey];
}
return acc;
}, { ...item });
}
if (isSkeleton) {
return mutate(SKELETON_INITIAL_VALUES);
}
else {
return mutate(CONTAINER_INITIAL_VALUES);
}
};
const itemsWithRepeat = (items, repeatCount) => {
return repeatCount > 0 && items[0]
? [].constructor(repeatCount).fill(items[0])
: items;
};
const setOpacity = (viewIndex, repeatCount, rowsLength, withOpacity) => {
return (repeatCount || rowsLength) > 0 && withOpacity
? 1 - (1 / (repeatCount || rowsLength)) * viewIndex
: 1;
};
const generateCSSGridArea = ({ grid, hasChildren, skeletons, children, repeatCount, reservedProps, keyLevel, }) => {
return grid.direction === exports.DIRECTION.ROW
? generateGridArea((hasChildren
? children
: itemsWithRepeat(skeletons, repeatCount)).map(({ w = DEFAULT_GRID_CONTAINER_WIDTH }) => ({ w })), (index, prop, val) => {
if (!reservedProps[`${keyLevel}_${index + 1}`]) {
reservedProps[`${keyLevel}_${index + 1}`] = {};
}
reservedProps[`${keyLevel}_${index + 1}`][prop] = val;
})
: generateGridAreaAsColDirection((hasChildren
? children
: itemsWithRepeat(skeletons, repeatCount)), grid.alignItems, (index, prop, val) => {
if (!reservedProps[`${keyLevel}_${index + 1}`]) {
reservedProps[`${keyLevel}_${index + 1}`] = {};
}
reservedProps[`${keyLevel}_${index + 1}`][prop] = val;
});
};
const applicableValue = (v) => {
if (v.indexOf('fr') > -1) {
return 'auto';
}
return v;
};
const filterFromPx = (value) => Number(value.split('px')[0]);
const parseStyleObject = (cssString) => {
const styles = cssString.replace(STYLE_PARSING_REGEXP, '');
return parse(styles);
};
const cssToReactStyle = (styles) => {
const styleObject = {};
Object.keys(styles).forEach((styleProp) => {
const camelCaseProperty = styleProp.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
styleObject[camelCaseProperty] = styles[styleProp];
});
return styleObject;
};
const breakpoints = {
xs: '481px',
sm: '577px',
md: '768px',
lg: '962px',
xl: '1200px',
'2xl': '1440px',
};
const STYLE_PARSING_REGEXP = /(^\{|\}$)/g;
const DEFAULT_RADIUS = '0px';
const DEFAULT_GAP = '1'; // expressed by rem
const DEFAULT_SKELETON_WIDTH = '100%';
const DEFAULT_GRID_CONTAINER_WIDTH = '1fr';
const DEFAULT_GRID_CONTAINER_HEIGHT = '1fr';
const DEFAULT_HEIGHT = '100%';
const DEFAULT_WIDTH = '100%';
const DEFAULT_DIRECTION_GRID_COLS = 'row';
const DEFAULT_JUSTIFY_ALIGNMENT = 'flex-start';
const DEFAULT_ALIGN_ITEMS_ALIGNMENT = 'flex-start';
const DEFAULT_GRID_STYLE = '1fr / 1fr';
const DEFAULT_REPEAT_COUNT = 0;
const DEFAULT_VARIANT = 'gray';
const DEFAULT_SKELETON_GRADIENT_WIDTH = 100;
const ROOT_KEY = 'grid_1';
const DEFAULT_COLOR_THEMES = {
dark: {
main: '#282c34',
gradient: '#2c303a',
},
light: {
main: '#f1f1f1',
gradient: '#ececec',
},
};
const DEFAULT_BREAKPOINTS = {
mobile: `${filterFromPx(breakpoints.sm) - 1}px`,
tablet: `${filterFromPx(breakpoints.lg) - 1}px`,
desktop: breakpoints.lg,
};
const CONTAINER_INITIAL_VALUES = {
direction: exports.DIRECTION.ROW,
gridGap: DEFAULT_GAP,
repeatCount: DEFAULT_REPEAT_COUNT,
className: '',
margin: '0',
w: DEFAULT_WIDTH,
h: DEFAULT_HEIGHT,
alignItems: DEFAULT_ALIGN_ITEMS_ALIGNMENT,
justifyContent: DEFAULT_JUSTIFY_ALIGNMENT,
withOpacity: false,
styles: `{}`,
};
const SKELETON_INITIAL_VALUES = {
margin: '0',
w: DEFAULT_WIDTH,
h: DEFAULT_HEIGHT,
r: '0px',
skeletonW: DEFAULT_SKELETON_GRADIENT_WIDTH,
};
const SIZE_UNITS_INITIAL_VALUES = {
[exports.SIZE_UNITS.FN]: '',
[exports.SIZE_UNITS.AUTO]: 'auto',
[exports.SIZE_UNITS.PERCENT]: '100',
[exports.SIZE_UNITS.PX]: '100',
[exports.SIZE_UNITS.FR]: '1',
[exports.SIZE_UNITS.REM]: '1',
[exports.SIZE_UNITS.VH]: '100',
[exports.SIZE_UNITS.VW]: '100',
[exports.SIZE_UNITS.PC]: '1',
[exports.SIZE_UNITS.CM]: '1',
[exports.SIZE_UNITS.MM]: '100',
[exports.SIZE_UNITS.IN]: '1',
[exports.SIZE_UNITS.PT]: '1',
[exports.SIZE_UNITS.CH]: '1',
[exports.SIZE_UNITS.EM]: '1',
[exports.SIZE_UNITS.V_MIN]: '100',
[exports.SIZE_UNITS.V_MAX]: '100',
};
const SKELETON_ANIMATIONS = {
[exports.SKELETON_ANIMATION_VARIANTS.SLIDE]: {
from: { left: '-100%' },
to: { left: '100%' },
},
[exports.SKELETON_ANIMATION_VARIANTS.FADE]: {
from: { opacity: '0' },
to: { opacity: '1' },
},
};
const SkeletonGeneratorContext = React.createContext({
colorTheme: { ...DEFAULT_COLOR_THEMES },
breakpoints: { ...DEFAULT_BREAKPOINTS },
skeletonAnimation: exports.SKELETON_ANIMATION_VARIANTS.SLIDE,
});
const useStyleTag = () => {
React.useEffect(() => {
const styleTag = document.createElement('style');
styleTag.textContent = `
@keyframes slide {
from {
left: -100%;
}
to {
left: 100%;
}
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
`;
document.head.appendChild(styleTag);
return () => {
document.head.removeChild(styleTag);
};
}, []);
};
const useCalcDevice = (breakpoints, customContainerWidth) => {
const { width: containerWidth } = reactUse.useWindowSize();
const queryWidth = customContainerWidth !== null && customContainerWidth !== void 0 ? customContainerWidth : containerWidth;
if (queryWidth <= filterFromPx(breakpoints.mobile))
return 'mobile';
if (queryWidth > filterFromPx(breakpoints.mobile) &&
queryWidth <= filterFromPx(breakpoints.tablet))
return 'tablet';
return 'desktop';
};
const useGetSkeletonConfigProvider = () => {
const context = React.useContext(SkeletonGeneratorContext);
if (context === undefined) {
throw Error('You must run this hook inside ReactSkeletonProvider');
}
return context;
};
const ReactSkeletonProvider = ({ children, value: { isDark = false, colorTheme = DEFAULT_COLOR_THEMES, breakpoints = DEFAULT_BREAKPOINTS, skeletonAnimation = exports.SKELETON_ANIMATION_VARIANTS.SLIDE, }, }) => {
useStyleTag();
return (React.createElement(SkeletonGeneratorContext.Provider, { value: {
skeletonAnimation,
isDark,
colorTheme,
breakpoints,
} }, children));
};
// eslint-disable-next-line no-unused-vars
const Skeleton = React.memo(({ grid: gridState, styles, customContainerWidth }) => {
const { colorTheme, isDark, skeletonAnimation, breakpoints } = useGetSkeletonConfigProvider();
const device = useCalcDevice(breakpoints, customContainerWidth);
const currentModeTheme = isDark
? colorTheme[exports.COLOR_MODES.DARK]
: colorTheme[exports.COLOR_MODES.LIGHT];
const renderSkeletons = (skeletons, repeatCount, containerDir, withOpacity, parentKey) => {
return skeletons.map((skeleton, index) => (React.createElement("div", { key: skeleton.key, "data-key": skeleton.key, style: {
width: parentKey && containerDir === exports.DIRECTION.ROW
? DEFAULT_WIDTH
: applicableValue((typeof skeleton.w === 'function'
? skeleton.w()
: skeleton.w).toString()),
height: parentKey && containerDir === exports.DIRECTION.COLUMN
? DEFAULT_HEIGHT
: applicableValue((typeof skeleton.h !== 'function'
? skeleton.h
: skeleton.h()).toString()),
borderRadius: skeleton.r || '0px',
margin: generateMargin(skeleton.margin || '', 'rem'),
backgroundColor: currentModeTheme.main,
opacity: setOpacity(index, repeatCount, skeletons.length, withOpacity),
position: 'relative',
overflow: 'hidden',
} },
React.createElement("div", { style: {
display: 'block',
left: '0',
position: 'absolute',
height: '100%',
top: '0',
animation: `${skeletonAnimation} infinite 1s linear ${skeletonAnimation === exports.SKELETON_ANIMATION_VARIANTS.FADE ? 'alternate' : ''}`,
width: `${skeleton.skeletonW || DEFAULT_SKELETON_GRADIENT_WIDTH}px`,
backgroundImage: `linear-gradient(
90deg,
${currentModeTheme.main} 0px,
${currentModeTheme.gradient} ${(Number(skeleton.skeletonW) || DEFAULT_SKELETON_GRADIENT_WIDTH) / 2}px,
${currentModeTheme.main} ${skeleton.skeletonW || DEFAULT_SKELETON_GRADIENT_WIDTH}px
)`,
} }))));
};
const convertStyles = (styles) => {
try {
if (styles.replace(/\s/g, '') === '{}') {
throw Error('Empty state');
}
const converted = parseStyleObject(styles);
if (converted) {
// should remove all margins and the others style properties to avoid duplication
// because in the options already have that option
Object.keys(converted).forEach((e) => {
if ([
'margin',
'width',
'height',
'gap',
'align-items',
'justify-items',
].includes(e)) {
delete converted[e];
}
});
return converted;
}
}
catch (_a) {
return {};
}
};
const renderGridLayout = React.useCallback(({ grid, dataKey, index, length, reservedPropsFromParent, }) => {
var _a, _b, _c, _d;
const keyLevel = dataKey;
const _reservedPropsFromParent = {
parent: keyLevel,
withOpacity: grid.withOpacity,
};
const collectedChildren = [];
const collectedSkeletons = [];
const gridGap = (grid.gridGap || 0) + 'rem', hasChildren = Object.prototype.hasOwnProperty.call(grid, 'children') &&
Array.isArray(grid.children) &&
grid.children.length > 0, hasSkeletons = Object.prototype.hasOwnProperty.call(grid, 'skeletons') &&
Array.isArray(grid.skeletons) &&
grid.skeletons.length > 0, repeatCount = grid.repeatCount;
if (repeatCount > 0) {
_reservedPropsFromParent.repeatCount = repeatCount;
}
if (hasChildren) {
itemsWithRepeat(grid.children, repeatCount)
.map(mutateWithRepeated.bind(null, repeatCount, keyLevel))
.forEach(({ key, item }) => {
collectedChildren.push({
...getAdaptiveData(item, device),
key,
});
});
}
if (hasSkeletons) {
itemsWithRepeat(grid.skeletons, repeatCount)
.map(mutateWithRepeated.bind(null, repeatCount, keyLevel))
.forEach(({ key, item }) => {
collectedSkeletons.push({
...getAdaptiveData(item, device, true),
key,
});
});
}
const gridStyle = generateCSSGridArea({
grid,
hasChildren,
children: collectedChildren,
skeletons: collectedSkeletons,
repeatCount,
reservedProps: _reservedPropsFromParent,
keyLevel,
}), withOpacity = grid.withOpacity, style = convertStyles(grid.styles) || {};
return (React.createElement("div", { key: keyLevel, "data-key": keyLevel, style: {
display: 'grid',
gap: gridGap,
margin: generateMargin(grid.margin || '', 'rem'),
grid: gridStyle,
height: (reservedPropsFromParent === null || reservedPropsFromParent === void 0 ? void 0 : reservedPropsFromParent.parent)
? DEFAULT_HEIGHT
: applicableValue((_b = (_a = reservedPropsFromParent === null || reservedPropsFromParent === void 0 ? void 0 : reservedPropsFromParent[keyLevel]) === null || _a === void 0 ? void 0 : _a.h) !== null && _b !== void 0 ? _b : (typeof grid.h === 'function' ? grid.h() : grid.h)),
width: (reservedPropsFromParent === null || reservedPropsFromParent === void 0 ? void 0 : reservedPropsFromParent.parent)
? DEFAULT_WIDTH
: applicableValue((_d = (_c = reservedPropsFromParent === null || reservedPropsFromParent === void 0 ? void 0 : reservedPropsFromParent[keyLevel]) === null || _c === void 0 ? void 0 : _c.w) !== null && _d !== void 0 ? _d : (typeof grid.w === 'function' ? grid.w() : grid.w)),
alignItems: grid.alignItems,
justifyContent: grid.justifyContent,
opacity: setOpacity(index, reservedPropsFromParent === null || reservedPropsFromParent === void 0 ? void 0 : reservedPropsFromParent.repeatCount, length, reservedPropsFromParent === null || reservedPropsFromParent === void 0 ? void 0 : reservedPropsFromParent.withOpacity),
...cssToReactStyle(style),
}, className: grid.className || '' }, hasChildren
? collectedChildren.map((child, gridItemIndex) => renderGridLayout({
grid: child,
dataKey: child.key,
index: gridItemIndex,
length: collectedChildren.length,
reservedPropsFromParent: _reservedPropsFromParent,
}))
: hasSkeletons
? renderSkeletons(collectedSkeletons, repeatCount, grid.direction, withOpacity, _reservedPropsFromParent.parent)
: null));
}, [gridState, currentModeTheme, skeletonAnimation, device]);
return (React.createElement("div", { style: styles !== null && styles !== void 0 ? styles : {} }, renderGridLayout({
grid: getAdaptiveData(putInitialValuesIfNotExists(gridState), device),
dataKey: ROOT_KEY,
index: 0,
length: 1,
})));
});
exports.CONTAINER_INITIAL_VALUES = CONTAINER_INITIAL_VALUES;
exports.DEFAULT_ALIGN_ITEMS_ALIGNMENT = DEFAULT_ALIGN_ITEMS_ALIGNMENT;
exports.DEFAULT_BREAKPOINTS = DEFAULT_BREAKPOINTS;
exports.DEFAULT_COLOR_THEMES = DEFAULT_COLOR_THEMES;
exports.DEFAULT_DIRECTION_GRID_COLS = DEFAULT_DIRECTION_GRID_COLS;
exports.DEFAULT_GAP = DEFAULT_GAP;
exports.DEFAULT_GRID_CONTAINER_HEIGHT = DEFAULT_GRID_CONTAINER_HEIGHT;
exports.DEFAULT_GRID_CONTAINER_WIDTH = DEFAULT_GRID_CONTAINER_WIDTH;
exports.DEFAULT_GRID_STYLE = DEFAULT_GRID_STYLE;
exports.DEFAULT_HEIGHT = DEFAULT_HEIGHT;
exports.DEFAULT_JUSTIFY_ALIGNMENT = DEFAULT_JUSTIFY_ALIGNMENT;
exports.DEFAULT_RADIUS = DEFAULT_RADIUS;
exports.DEFAULT_REPEAT_COUNT = DEFAULT_REPEAT_COUNT;
exports.DEFAULT_SKELETON_GRADIENT_WIDTH = DEFAULT_SKELETON_GRADIENT_WIDTH;
exports.DEFAULT_SKELETON_WIDTH = DEFAULT_SKELETON_WIDTH;
exports.DEFAULT_VARIANT = DEFAULT_VARIANT;
exports.DEFAULT_WIDTH = DEFAULT_WIDTH;
exports.ROOT_KEY = ROOT_KEY;
exports.ReactSkeletonProvider = ReactSkeletonProvider;
exports.SIZE_UNITS_INITIAL_VALUES = SIZE_UNITS_INITIAL_VALUES;
exports.SKELETON_ANIMATIONS = SKELETON_ANIMATIONS;
exports.SKELETON_INITIAL_VALUES = SKELETON_INITIAL_VALUES;
exports.STYLE_PARSING_REGEXP = STYLE_PARSING_REGEXP;
exports.applicableValue = applicableValue;
exports.breakpoints = breakpoints;
exports.convertToArray = convertToArray;
exports.cssToReactStyle = cssToReactStyle;
exports.default = Skeleton;
exports.filterFromPx = filterFromPx;
exports.generateCSSGridArea = generateCSSGridArea;
exports.generateGridArea = generateGridArea;
exports.generateGridAreaAsColDirection = generateGridAreaAsColDirection;
exports.generateMargin = generateMargin;
exports.getAdaptiveData = getAdaptiveData;
exports.inheritFromParent = inheritFromParent;
exports.itemsWithRepeat = itemsWithRepeat;
exports.mutateWithRepeated = mutateWithRepeated;
exports.parseStyleObject = parseStyleObject;
exports.putInitialValuesIfNotExists = putInitialValuesIfNotExists;
exports.setOpacity = setOpacity;