Socket
Socket
Sign inDemoInstall

@storybook/components

Package Overview
Dependencies
Maintainers
10
Versions
1903
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/components - npm Package Compare versions

Comparing version 4.0.0-alpha.10 to 4.0.0-alpha.11

dist/form/field.js
dist/form/input.js
dist/panel_actionbar/panel_actionbar.js
dist/tabs/tabs.js
src/form/__snapshots__/form.stories.storyshot
src/form/field.js
src/form/form.stories.js
src/form/input.js
src/panel_actionbar/__snapshots__/panel_actionbar.stories.storyshot
src/panel_actionbar/panel_actionbar.js
src/panel_actionbar/panel_actionbar.stories.js
src/tabs/__snapshots__/tabs.stories.storyshot
src/tabs/tabs.js
src/tabs/tabs.stories.js

173

dist/addon_panel/index.js

@@ -6,4 +6,7 @@ 'use strict';

});
exports.Tab = exports.TabBar = undefined;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

@@ -17,5 +20,5 @@

var _keys = require('babel-runtime/core-js/object/keys');
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _keys2 = _interopRequireDefault(_keys);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

@@ -30,6 +33,2 @@ var _react = require('react');

var _reactEmotion = require('react-emotion');
var _reactEmotion2 = _interopRequireDefault(_reactEmotion);
var _ = require('../');

@@ -39,145 +38,35 @@

var Wrapper = (0, _reactEmotion2.default)('div')(function (_ref) {
var theme = _ref.theme;
return {
flex: '1 1 auto',
display: 'flex',
flexDirection: 'column',
background: theme.mainFill,
borderRadius: 4,
border: theme.mainBorder,
overflow: 'hidden',
width: '100%',
height: '100%',
boxSizing: 'border-box'
};
});
var AddonPanel = function AddonPanel(_ref) {
var panels = _ref.panels,
onPanelSelect = _ref.onPanelSelect,
selectedPanel = _ref.selectedPanel,
rest = (0, _objectWithoutProperties3.default)(_ref, ['panels', 'onPanelSelect', 'selectedPanel']);
return _react2.default.createElement(
_.Tabs,
(0, _extends3.default)({}, rest, { absolute: true, bordered: true, selected: selectedPanel, onSelect: onPanelSelect }),
(0, _entries2.default)(panels).map(function (_ref2) {
var _ref3 = (0, _slicedToArray3.default)(_ref2, 2),
k = _ref3[0],
v = _ref3[1];
var TabBar = exports.TabBar = (0, _reactEmotion2.default)('div')({
display: 'flex',
flexWrap: 'wrap',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
borderBottom: 'solid 1px #eaeaea'
});
var Content = (0, _reactEmotion2.default)('div')({
flex: '1 1 0',
display: 'flex',
overflow: 'auto',
height: '100%',
width: '100%'
});
var TabButton = (0, _reactEmotion2.default)('div')(_.baseFonts, {
fontSize: 11,
letterSpacing: '1px',
padding: '10px 15px',
textTransform: 'uppercase',
transition: 'opacity 0.3s',
maxHeight: 60,
overflow: 'hidden',
cursor: 'pointer',
background: 'transparent',
border: 'none'
}, function (_ref2) {
var selected = _ref2.selected;
return selected ? {
opacity: 1
} : {
opacity: 0.5
};
});
var Panel = (0, _reactEmotion2.default)('div')(function (_ref3) {
var hidden = _ref3.hidden;
return hidden ? { display: 'none' } : { display: 'flex', flex: 1 };
});
var Tab = exports.Tab = function Tab(_ref4) {
var selected = _ref4.selected,
name = _ref4.name,
title = _ref4.title,
onSelect = _ref4.onSelect;
var onClick = function onClick(e) {
e.preventDefault();
onSelect(name);
};
return _react2.default.createElement(
TabButton,
{ type: 'button', key: name, selected: selected, onClick: onClick, role: 'tab' },
typeof title === 'function' ? title() : title
return _react2.default.createElement(
'div',
{ key: k, id: k, title: v.title },
v.render
);
})
);
};
Tab.propTypes = {
selected: _propTypes2.default.bool.isRequired,
name: _propTypes2.default.string.isRequired,
title: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node]).isRequired,
onSelect: _propTypes2.default.func.isRequired
AddonPanel.propTypes = {
selectedPanel: _propTypes2.default.string,
onPanelSelect: _propTypes2.default.func.isRequired,
panels: _propTypes2.default.objectOf(_propTypes2.default.shape({
title: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
render: _propTypes2.default.func
})).isRequired
};
var AddonPanel = function AddonPanel(_ref5) {
var panels = _ref5.panels,
selectedPanel = _ref5.selectedPanel,
onPanelSelect = _ref5.onPanelSelect;
var hasPanels = panels && (0, _keys2.default)(panels).length;
return hasPanels ? _react2.default.createElement(
Wrapper,
null,
_react2.default.createElement(
TabBar,
{ role: 'tablist' },
(0, _entries2.default)(panels).map(function (_ref6) {
var _ref7 = (0, _slicedToArray3.default)(_ref6, 2),
name = _ref7[0],
data = _ref7[1];
return _react2.default.createElement(Tab, {
key: name,
selected: name === selectedPanel,
name: name,
title: data.title,
onSelect: onPanelSelect
});
})
),
_react2.default.createElement(
Content,
null,
(0, _keys2.default)(panels).sort().map(function (name) {
var panel = panels[name];
return _react2.default.createElement(
Panel,
{ key: name, hidden: name !== selectedPanel, role: 'tabpanel' },
panel.render()
);
})
)
) : _react2.default.createElement(
_.Placeholder,
null,
'no panels available'
);
};
AddonPanel.defaultProps = {
panels: {},
onPanelSelect: function onPanelSelect() {},
selectedPanel: null
};
AddonPanel.propTypes = {
// eslint-disable-next-line react/forbid-prop-types
panels: _propTypes2.default.object,
onPanelSelect: _propTypes2.default.func,
selectedPanel: _propTypes2.default.string
};
exports.default = AddonPanel;

109

dist/header/header.js

@@ -7,2 +7,6 @@ 'use strict';

var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _react = require('react');

@@ -23,23 +27,17 @@

var Wrapper = (0, _reactEmotion2.default)('div')(function (_ref) {
var isMobileDevice = _ref.isMobileDevice;
return {
margin: isMobileDevice ? '10px 0' : '0 0 10px',
var theme = _ref.theme;
return (0, _extends3.default)({
margin: '0 0 10px',
display: 'flex'
};
}, theme.brand);
});
var HeadingLink = (0, _reactEmotion2.default)('a')(function (_ref2) {
var isMobileDevice = _ref2.isMobileDevice;
return {
textDecoration: 'none',
flexGrow: 1,
display: 'flex',
alignItems: 'center',
color: 'currentColor',
justifyContent: 'center',
border: isMobileDevice ? 'none' : '1px solid rgba(0, 0, 0, 0.1)',
borderRadius: 2
};
});
var Heading = (0, _reactEmotion2.default)('h3')({
var HeadingLink = (0, _reactEmotion2.default)('a')({
textDecoration: 'none',
flexGrow: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
border: '1px solid rgba(0, 0, 0, 0.1)',
borderRadius: 2,
textTransform: 'uppercase',

@@ -57,60 +55,37 @@ letterSpacing: '1.5px',

var iconStyle = function iconStyle(_ref3) {
var isMobileDevice = _ref3.isMobileDevice;
return {
textTransform: 'uppercase',
fontSize: 12,
fontWeight: 'bolder',
color: 'currentColor',
border: '1px solid rgba(0, 0, 0, 0.1)',
textAlign: 'center',
borderRadius: 2,
cursor: 'pointer',
display: 'inlineBlock',
padding: 0,
margin: isMobileDevice ? '0 15px' : '0 0 0 5px',
backgroundColor: 'inherit',
outline: 0,
width: 30,
flexShrink: 0
};
};
var BurgerButton = (0, _reactEmotion2.default)('button')(iconStyle({ isMobileDevice: true }), {
paddingBottom: 2
var ShortHelpButton = (0, _reactEmotion2.default)('button')({
textTransform: 'uppercase',
fontSize: 12,
fontWeight: 'bolder',
color: 'currentColor',
border: '1px solid rgba(0, 0, 0, 0.1)',
textAlign: 'center',
borderRadius: 2,
cursor: 'pointer',
display: 'inlineBlock',
padding: 0,
margin: '0 0 0 5px',
backgroundColor: 'inherit',
outline: 0,
width: 30,
flexShrink: 0
});
var ShortHelpButton = (0, _reactEmotion2.default)('button')(iconStyle);
var Header = function Header(_ref4) {
var openShortcutsHelp = _ref4.openShortcutsHelp,
onBurgerButtonClick = _ref4.onBurgerButtonClick,
name = _ref4.name,
url = _ref4.url,
enableShortcutsHelp = _ref4.enableShortcutsHelp,
isMobileDevice = _ref4.isMobileDevice;
var Header = function Header(_ref2) {
var openShortcutsHelp = _ref2.openShortcutsHelp,
name = _ref2.name,
url = _ref2.url,
enableShortcutsHelp = _ref2.enableShortcutsHelp,
isMobileDevice = _ref2.isMobileDevice;
return _react2.default.createElement(
Wrapper,
{ isMobileDevice: isMobileDevice },
isMobileDevice && _react2.default.createElement(
BurgerButton,
{ onClick: onBurgerButtonClick },
'\u2630'
),
_react2.default.createElement(
HeadingLink,
{
isMobileDevice: isMobileDevice,
href: url,
target: '_blank',
rel: 'noopener noreferrer'
},
_react2.default.createElement(
Heading,
null,
name
)
{ href: url, target: '_blank', rel: 'noopener noreferrer' },
name
),
enableShortcutsHelp && _react2.default.createElement(
ShortHelpButton,
{ isMobileDevice: isMobileDevice, onClick: openShortcutsHelp },
{ onClick: openShortcutsHelp },
'\u2318'

@@ -123,3 +98,2 @@ )

openShortcutsHelp: null,
onBurgerButtonClick: null,
enableShortcutsHelp: true,

@@ -133,3 +107,2 @@ name: '',

openShortcutsHelp: _propTypes2.default.func,
onBurgerButtonClick: _propTypes2.default.func,
name: _propTypes2.default.string,

@@ -136,0 +109,0 @@ url: _propTypes2.default.string,

71

dist/index.js

@@ -6,3 +6,3 @@ 'use strict';

});
exports.Header = exports.Layout = exports.AddonPanel = exports.Placeholder = exports.Button = exports.Th = exports.Td = exports.Table = exports.HighlightButton = exports.MenuLink = exports.RoutedLink = exports.themes = exports.monoFonts = exports.baseFonts = undefined;
exports.Header = exports.Layout = exports.AddonPanel = exports.Placeholder = exports.ActionButton = exports.ActionBar = exports.TabWrapper = exports.TabsState = exports.Tabs = exports.Field = exports.Textarea = exports.Select = exports.Input = exports.Button = exports.Th = exports.Td = exports.Table = exports.HighlightButton = exports.MenuLink = exports.RoutedLink = exports.themes = exports.monoFonts = exports.baseFonts = undefined;

@@ -60,3 +60,3 @@ var _RoutedLink = require('./navigation/RoutedLink');

var _button = require('./form/button');
var _input = require('./form/input');

@@ -66,6 +66,69 @@ Object.defineProperty(exports, 'Button', {

get: function get() {
return _interopRequireDefault(_button).default;
return _input.Button;
}
});
Object.defineProperty(exports, 'Input', {
enumerable: true,
get: function get() {
return _input.Input;
}
});
Object.defineProperty(exports, 'Select', {
enumerable: true,
get: function get() {
return _input.Select;
}
});
Object.defineProperty(exports, 'Textarea', {
enumerable: true,
get: function get() {
return _input.Textarea;
}
});
var _field = require('./form/field');
Object.defineProperty(exports, 'Field', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_field).default;
}
});
var _tabs = require('./tabs/tabs');
Object.defineProperty(exports, 'Tabs', {
enumerable: true,
get: function get() {
return _tabs.Tabs;
}
});
Object.defineProperty(exports, 'TabsState', {
enumerable: true,
get: function get() {
return _tabs.TabsState;
}
});
Object.defineProperty(exports, 'TabWrapper', {
enumerable: true,
get: function get() {
return _tabs.TabWrapper;
}
});
var _panel_actionbar = require('./panel_actionbar/panel_actionbar');
Object.defineProperty(exports, 'ActionBar', {
enumerable: true,
get: function get() {
return _panel_actionbar.ActionBar;
}
});
Object.defineProperty(exports, 'ActionButton', {
enumerable: true,
get: function get() {
return _panel_actionbar.ActionButton;
}
});
var _placeholder = require('./placeholder/placeholder');

@@ -113,2 +176,2 @@

exports.monoFonts = _theme.monoFonts;
var themes = exports.themes = { normal: _theme.normal };
var themes = exports.themes = { normal: _theme.normal, dark: _theme.dark };

20

dist/layout/desktop.js

@@ -95,3 +95,3 @@ 'use strict';

height: '100%',
padding: addonPanelInRight ? layoutMargin + ' ' + layoutMargin + ' ' + layoutMargin + ' 0' : '0px ' + layoutMargin + ' ' + layoutMargin + ' 0',
padding: addonPanelInRight ? layoutMargin + 'px ' + layoutMargin + 'px ' + layoutMargin + 'px 0' : '0 ' + layoutMargin + 'px ' + layoutMargin + 'px 0',
boxSizing: 'border-box'

@@ -132,3 +132,3 @@ };

height: '100%',
padding: addonPanelInRight ? layoutMargin + ' 0 ' + layoutMargin + ' 0' : layoutMargin + ' ' + layoutMargin + ' 0 0',
padding: addonPanelInRight ? layoutMargin + 'px 0 ' + layoutMargin + 'px 0' : layoutMargin + 'px ' + layoutMargin + 'px 0 0',
paddingTop: storiesPanelOnTop ? 0 : layoutMargin

@@ -177,9 +177,9 @@ };

return {
zIndex: isDragging ? 2 : 0,
display: isDragging ? 'block' : 'none',
position: 'absolute',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
zIndex: 1
top: 0,
right: 0,
bottom: 0,
left: 0
};

@@ -372,5 +372,5 @@ });

},
_react2.default.createElement(Preview, null)
),
_react2.default.createElement(_dimensions2.default, previewPanelDimensions)
_react2.default.createElement(Preview, null),
_react2.default.createElement(_dimensions2.default, previewPanelDimensions)
)
),

@@ -377,0 +377,0 @@ _react2.default.createElement(

15

dist/layout/dimensions.js

@@ -43,4 +43,2 @@ 'use strict';

var _ = require('../');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -52,11 +50,12 @@

position: 'absolute',
padding: 5,
bottom: 10,
right: 10,
backgroundColor: 'rgba(255, 255, 255, 0.5)'
padding: '5px 8px',
bottom: 0,
right: 0,
backgroundColor: 'rgba(255, 255, 255, 0.5)',
borderRadius: '5px 0 0 0'
});
var Section = (0, _reactEmotion2.default)('span')(_.baseFonts, { fontSize: 12 });
var Section = (0, _reactEmotion2.default)('span')({ fontSize: 12 });
var Delimiter = (0, _reactEmotion2.default)('span')(_.baseFonts, {
var Delimiter = (0, _reactEmotion2.default)('span')({
margin: '0px 5px',

@@ -63,0 +62,0 @@ fontSize: 12

56

dist/layout/index.js

@@ -22,3 +22,3 @@ 'use strict';

var _theme = require('../theme');
var _ = require('../');

@@ -38,3 +38,3 @@ var _mobile = require('./mobile');

return {
backgroundColor: theme.mainBackground,
background: theme.mainBackground,
fontFamily: theme.mainTextFace,

@@ -74,5 +74,8 @@ color: theme.mainTextColor,

var isMobileDevice = props.isMobileDevice,
theme = props.theme,
AddonPanel = props.addonPanel,
StoriesPanel = props.storiesPanel,
Preview = props.preview;
Preview = props.preview,
ShortcutsHelp = props.shortcutsHelp,
SearchBox = props.searchBox;

@@ -82,21 +85,27 @@

_emotionTheming.ThemeProvider,
{ theme: _theme.normal },
{ theme: theme || _.themes.normal },
_react2.default.createElement(
Root,
{ isMobileDevice: isMobileDevice },
isMobileDevice ? _react2.default.createElement(
_mobile2.default,
null,
_react2.default.createElement(
StoriesPanelInner,
'div',
null,
_react2.default.createElement(
Root,
{ isMobileDevice: isMobileDevice },
isMobileDevice ? _react2.default.createElement(
_mobile2.default,
null,
_react2.default.createElement(StoriesPanel, null)
),
_react2.default.createElement(
StoriesPanelInner,
null,
_react2.default.createElement(Preview, null)
),
_react2.default.createElement(AddonPanel, null)
) : _react2.default.createElement(_desktop2.default, props)
_react2.default.createElement(
StoriesPanelInner,
null,
_react2.default.createElement(StoriesPanel, null)
),
_react2.default.createElement(
StoriesPanelInner,
null,
_react2.default.createElement(Preview, null)
),
_react2.default.createElement(AddonPanel, null)
) : _react2.default.createElement(_desktop2.default, props)
),
_react2.default.createElement(ShortcutsHelp, null),
_react2.default.createElement(SearchBox, null)
)

@@ -107,2 +116,3 @@ );

Layout.propTypes = {
theme: _propTypes2.default.shape({}),
showStoriesPanel: _propTypes2.default.bool.isRequired,

@@ -114,10 +124,12 @@ showAddonPanel: _propTypes2.default.bool.isRequired,

addonPanel: _propTypes2.default.func.isRequired,
shortcutsHelp: _propTypes2.default.func.isRequired,
searchBox: _propTypes2.default.func.isRequired,
addonPanelInRight: _propTypes2.default.bool.isRequired,
isMobileDevice: _propTypes2.default.bool
isMobileDevice: _propTypes2.default.bool.isRequired
};
Layout.defaultProps = {
isMobileDevice: false
theme: null
};
exports.default = Layout;

10

dist/layout/mobile.js

@@ -39,3 +39,3 @@ 'use strict';

var _index = require('../addon_panel/index');
var _tabs = require('../tabs/tabs');

@@ -51,3 +51,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

left: 0,
height: 'calc(100vh - 34px)',
height: 'calc(100vh - 40px)',
width: '100vw',

@@ -103,9 +103,9 @@ overflow: 'auto',

_react2.default.createElement(
_index.TabBar,
_tabs.TabBar,
null,
children.map(function (item, i) {
return _react2.default.createElement(_index.Tab, {
return _react2.default.createElement(_tabs.Tab, {
key: MobileTabs[i],
name: MobileTabs[i],
selected: i === index,
active: i === index,
title: MobileTabs[i] || '' + i,

@@ -112,0 +112,0 @@ onSelect: function onSelect() {

27

dist/navigation/MenuLink.js

@@ -21,14 +21,17 @@ 'use strict';

var MenuLink = (0, _reactEmotion2.default)(_RoutedLink2.default, { rootEl: 'a' })({
display: 'block',
color: '#828282',
textDecoration: 'none',
fontSize: '13px',
lineHeight: '16px',
padding: '1px 5px 4px',
marginLeft: '5px',
position: 'relative',
zIndex: 1
}, function (_ref) {
var active = _ref.active;
var MenuLink = (0, _reactEmotion2.default)(_RoutedLink2.default, { rootEl: 'a' })(function (_ref) {
var theme = _ref.theme;
return {
display: 'block',
color: theme.dimmedTextColor,
textDecoration: 'none',
fontSize: '13px',
lineHeight: '16px',
padding: '1px 5px 4px',
marginLeft: '5px',
position: 'relative',
zIndex: 1
};
}, function (_ref2) {
var active = _ref2.active;
return active ? {

@@ -35,0 +38,0 @@ color: 'inherit',

4

dist/placeholder/placeholder.js

@@ -11,7 +11,5 @@ 'use strict';

var _ = require('../');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = (0, _reactEmotion2.default)('p')(_.baseFonts, {
exports.default = (0, _reactEmotion2.default)('p')({
fontSize: '11px',

@@ -18,0 +16,0 @@ display: 'block',

66

dist/theme.js

@@ -6,2 +6,12 @@ 'use strict';

});
exports.dark = exports.normal = exports.monoFonts = exports.baseFonts = undefined;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _reactInspector = require('react-inspector');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var baseFonts = exports.baseFonts = {

@@ -20,11 +30,59 @@ fontFamily: '-apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Lucida Grande", "Arial", sans-serif',

var normal = exports.normal = {
mainBackground: '#F7F7F7',
mainBackground: '#F7F7F7 linear-gradient(to bottom right, #EEEEEE, #FFFFFF)',
mainBorder: '1px solid rgba(0,0,0,0.1)',
mainBorderColor: 'rgba(0,0,0,0.1)',
mainBorderRadius: 4,
mainFill: 'rgba(255,255,255,0.99)',
mainFill: 'rgba(255,255,255,0.89)',
barFill: 'rgba(255,255,255,1)',
barSelectedColor: 'rgba(0,0,0,0.1)',
inputFill: 'rgba(0,0,0,0.05)',
mainTextFace: baseFonts.fontFamily,
mainTextColor: baseFonts.color,
dimmedTextColor: 'rgba(0,0,0,0.4)',
highlightColor: '#9fdaff',
successColor: '#0edf62',
failColor: '#ff3f3f',
warnColor: 'orange',
mainTextSize: 13,
monoTextFace: monoFonts.color,
layoutMargin: '10px'
monoTextFace: monoFonts.fontFamily,
layoutMargin: 10,
overlayBackground: 'linear-gradient(to bottom right, rgba(233, 233, 233, 0.6), rgba(255, 255, 255, 0.8))',
brand: {},
addonActionsTheme: (0, _extends3.default)({}, _reactInspector.chromeLight, {
BASE_FONT_FAMILY: monoFonts.fontFamily,
BASE_BACKGROUND_COLOR: 'transparent'
})
};
var dark = exports.dark = {
mainBackground: '#112 linear-gradient(to right, #112, #333)',
mainBorder: '1px solid rgba(255,255,255,0.1)',
mainBorderColor: 'rgba(255,255,255,0.1)',
mainBorderRadius: 4,
mainFill: 'rgba(255,255,255,0.1)',
barFill: 'rgba(0,0,0,1)',
barSelectedColor: 'rgba(255,255,255,0.4)',
inputFill: 'rgba(0,0,0,1)',
mainTextFace: baseFonts.fontFamily,
mainTextColor: '#efefef',
dimmedTextColor: 'rgba(255,255,255,0.4)',
highlightColor: '#9fdaff',
successColor: '#0edf62',
failColor: '#ff3f3f',
warnColor: 'orange',
mainTextSize: 13,
monoTextFace: monoFonts.fontFamily,
layoutMargin: 10,
overlayBackground: 'linear-gradient(to bottom right, rgba(17, 17, 34, 0.6), rgba(51, 51, 51, 0.8))',
brand: {
background: 'rgba(0,0,0,1)'
},
addonActionsTheme: (0, _extends3.default)({}, _reactInspector.chromeDark, {
BASE_FONT_FAMILY: monoFonts.fontFamily,
BASE_BACKGROUND_COLOR: 'transparent'
})
};

13

package.json
{
"name": "@storybook/components",
"version": "4.0.0-alpha.10",
"version": "4.0.0-alpha.11",
"description": "Core Storybook Components",

@@ -25,8 +25,11 @@ "repository": {

"react-emotion": "^9.1.3",
"react-split-pane": "^0.1.77"
"react-inspector": "^2.3.0",
"react-split-pane": "^0.1.77",
"react-textarea-autosize": "^6.1.0",
"render-fragment": "^0.1.1"
},
"devDependencies": {
"@storybook/addon-actions": "4.0.0-alpha.10",
"@storybook/addon-knobs": "4.0.0-alpha.10",
"@storybook/react": "4.0.0-alpha.10"
"@storybook/addon-actions": "4.0.0-alpha.11",
"@storybook/addon-knobs": "4.0.0-alpha.11",
"@storybook/react": "4.0.0-alpha.11"
},

@@ -33,0 +36,0 @@ "peerDependencies": {

140

src/addon_panel/index.js
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'react-emotion';
import { baseFonts, Placeholder } from '../';
import { Tabs } from '../';
const Wrapper = styled('div')(({ theme }) => ({
flex: '1 1 auto',
display: 'flex',
flexDirection: 'column',
background: theme.mainFill,
borderRadius: 4,
border: theme.mainBorder,
overflow: 'hidden',
width: '100%',
height: '100%',
boxSizing: 'border-box',
}));
export const TabBar = styled('div')({
display: 'flex',
flexWrap: 'wrap',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
borderBottom: 'solid 1px #eaeaea',
});
const Content = styled('div')({
flex: '1 1 0',
display: 'flex',
overflow: 'auto',
height: '100%',
width: '100%',
});
const TabButton = styled('div')(
baseFonts,
{
fontSize: 11,
letterSpacing: '1px',
padding: '10px 15px',
textTransform: 'uppercase',
transition: 'opacity 0.3s',
maxHeight: 60,
overflow: 'hidden',
cursor: 'pointer',
background: 'transparent',
border: 'none',
},
({ selected }) =>
selected
? {
opacity: 1,
}
: {
opacity: 0.5,
}
const AddonPanel = ({ panels, onPanelSelect, selectedPanel, ...rest }) => (
<Tabs {...rest} absolute bordered selected={selectedPanel} onSelect={onPanelSelect}>
{Object.entries(panels).map(([k, v]) => (
<div key={k} id={k} title={v.title}>
{v.render}
</div>
))}
</Tabs>
);
const Panel = styled('div')(
({ hidden }) => (hidden ? { display: 'none' } : { display: 'flex', flex: 1 })
);
export const Tab = ({ selected, name, title, onSelect }) => {
const onClick = e => {
e.preventDefault();
onSelect(name);
};
return (
<TabButton type="button" key={name} selected={selected} onClick={onClick} role="tab">
{typeof title === 'function' ? title() : title}
</TabButton>
);
AddonPanel.propTypes = {
selectedPanel: PropTypes.string,
onPanelSelect: PropTypes.func.isRequired,
panels: PropTypes.objectOf(
PropTypes.shape({
title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
render: PropTypes.func,
})
).isRequired,
};
Tab.propTypes = {
selected: PropTypes.bool.isRequired,
name: PropTypes.string.isRequired,
title: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
onSelect: PropTypes.func.isRequired,
};
const AddonPanel = ({ panels, selectedPanel, onPanelSelect }) => {
const hasPanels = panels && Object.keys(panels).length;
return hasPanels ? (
<Wrapper>
<TabBar role="tablist">
{Object.entries(panels).map(([name, data]) => (
<Tab
key={name}
selected={name === selectedPanel}
name={name}
title={data.title}
onSelect={onPanelSelect}
/>
))}
</TabBar>
<Content>
{Object.keys(panels)
.sort()
.map(name => {
const panel = panels[name];
return (
<Panel key={name} hidden={name !== selectedPanel} role="tabpanel">
{panel.render()}
</Panel>
);
})}
</Content>
</Wrapper>
) : (
<Placeholder>no panels available</Placeholder>
);
};
AddonPanel.defaultProps = {
panels: {},
onPanelSelect: () => {},
selectedPanel: null,
};
AddonPanel.propTypes = {
// eslint-disable-next-line react/forbid-prop-types
panels: PropTypes.object,
onPanelSelect: PropTypes.func,
selectedPanel: PropTypes.string,
};
export default AddonPanel;

20

src/addon_panel/index.stories.js

@@ -10,11 +10,19 @@ import React from 'react';

title: 'Test 1',
render() {
return <div id="test1">TEST 1</div>;
},
// eslint-disable-next-line react/prop-types
render: ({ active, key }) =>
active ? (
<div id="test1" key={key}>
TEST 1
</div>
) : null,
},
test2: {
title: 'Test 2',
render() {
return <div id="test2">TEST 2</div>;
},
// eslint-disable-next-line react/prop-types
render: ({ active, key }) =>
active ? (
<div id="test2" key={key}>
TEST 2
</div>
) : null,
},

@@ -21,0 +29,0 @@ };

39

src/addon_panel/index.test.js
import React from 'react';
import { shallow } from 'enzyme';
import { mount, shallow } from 'enzyme';
import AddonPanel from './index';

@@ -10,22 +10,31 @@

title: 'TEST 1',
render() {
return <div id="test1">TEST 1</div>;
},
// eslint-disable-next-line react/prop-types
render: ({ active, key }) =>
active ? (
<div id="test1" key={key}>
TEST 1
</div>
) : null,
},
test2: {
title: 'TEST 2',
render() {
return <div id="test2">TEST 2</div>;
},
// eslint-disable-next-line react/prop-types
render: ({ active, key }) =>
active ? (
<div id="test2" key={key}>
TEST 2
</div>
) : null,
},
};
const onPanelSelect = () => 'onPanelSelect';
const onPanelSelect = jest.fn();
const wrapper = shallow(
const wrapper = mount(
<AddonPanel panels={panels} onPanelSelect={onPanelSelect} selectedPanel="test2" />
);
expect(wrapper.find('#test1').parent()).toHaveProp('hidden', true);
expect(wrapper.find('#test2').parent()).not.toHaveProp('hidden', true);
expect(wrapper.find('#test2')).toExist();
expect(wrapper.find('Tab').at(0)).toHaveProp('active', false);
expect(wrapper.find('Tab').at(1)).toHaveProp('active', true);
});

@@ -37,4 +46,5 @@

title: 'TEST 1',
render() {
return <div>TEST 1</div>;
// eslint-disable-next-line react/prop-types
render({ key }) {
return <div key={key}>TEST 1</div>;
},

@@ -50,2 +60,3 @@ },

wrapper
.dive()
.find('Tab')

@@ -63,3 +74,3 @@ .dive()

const onPanelSelect = () => 'onPanelSelect';
const wrapper = shallow(<AddonPanel panels={panels} onPanelSelect={onPanelSelect} />);
const wrapper = shallow(<AddonPanel panels={panels} onPanelSelect={onPanelSelect} />).dive();

@@ -66,0 +77,0 @@ expect(wrapper.contains('no panels available')).toBe(true);

48

src/header/header.js

@@ -5,8 +5,9 @@ import React from 'react';

const Wrapper = styled('div')(({ isMobileDevice }) => ({
margin: isMobileDevice ? '10px 0' : '0 0 10px',
const Wrapper = styled('div')(({ theme }) => ({
margin: '0 0 10px',
display: 'flex',
...theme.brand,
}));
const HeadingLink = styled('a')(({ isMobileDevice }) => ({
const HeadingLink = styled('a')({
textDecoration: 'none',

@@ -16,8 +17,5 @@ flexGrow: 1,

alignItems: 'center',
color: 'currentColor',
justifyContent: 'center',
border: isMobileDevice ? 'none' : '1px solid rgba(0, 0, 0, 0.1)',
border: '1px solid rgba(0, 0, 0, 0.1)',
borderRadius: 2,
}));
const Heading = styled('h3')({
textTransform: 'uppercase',

@@ -35,3 +33,3 @@ letterSpacing: '1.5px',

const iconStyle = ({ isMobileDevice }) => ({
const ShortHelpButton = styled('button')({
textTransform: 'uppercase',

@@ -47,3 +45,3 @@ fontSize: 12,

padding: 0,
margin: isMobileDevice ? '0 15px' : '0 0 0 5px',
margin: '0 0 0 5px',
backgroundColor: 'inherit',

@@ -55,30 +53,8 @@ outline: 0,

const BurgerButton = styled('button')(iconStyle({ isMobileDevice: true }), {
paddingBottom: 2,
});
const ShortHelpButton = styled('button')(iconStyle);
const Header = ({
openShortcutsHelp,
onBurgerButtonClick,
name,
url,
enableShortcutsHelp,
isMobileDevice,
}) => (
const Header = ({ openShortcutsHelp, name, url, enableShortcutsHelp, isMobileDevice }) => (
<Wrapper isMobileDevice={isMobileDevice}>
{isMobileDevice && <BurgerButton onClick={onBurgerButtonClick}>☰</BurgerButton>}
<HeadingLink
isMobileDevice={isMobileDevice}
href={url}
target="_blank"
rel="noopener noreferrer"
>
<Heading>{name}</Heading>
<HeadingLink href={url} target="_blank" rel="noopener noreferrer">
{name}
</HeadingLink>
{enableShortcutsHelp && (
<ShortHelpButton isMobileDevice={isMobileDevice} onClick={openShortcutsHelp}>
⌘
</ShortHelpButton>
)}
{enableShortcutsHelp && <ShortHelpButton onClick={openShortcutsHelp}>⌘</ShortHelpButton>}
</Wrapper>

@@ -89,3 +65,2 @@ );

openShortcutsHelp: null,
onBurgerButtonClick: null,
enableShortcutsHelp: true,

@@ -99,3 +74,2 @@ name: '',

openShortcutsHelp: PropTypes.func,
onBurgerButtonClick: PropTypes.func,
name: PropTypes.string,

@@ -102,0 +76,0 @@ url: PropTypes.string,

16

src/header/header.stories.js

@@ -8,13 +8,5 @@ import React from 'react';

const openShortcutsHelp = action('openShortcutsHelp');
storiesOf('Components|Header', module)
.add('simple', () => (
<Header name="name" url="http://google.com" openShortcutsHelp={openShortcutsHelp} />
))
.add('mobile-view', () => (
<Header
name="name"
url="http://google.com"
openShortcutsHelp={openShortcutsHelp}
isMobileDevice
/>
));
storiesOf('Components|Header', module).add('simple', () => (
<Header name="name" url="http://example.com" openShortcutsHelp={openShortcutsHelp} />
));

10

src/index.js

@@ -1,5 +0,5 @@

import { baseFonts, monoFonts, normal } from './theme';
import { baseFonts, monoFonts, normal, dark } from './theme';
export { baseFonts, monoFonts };
export const themes = { normal };
export const themes = { normal, dark };

@@ -12,3 +12,7 @@ export { default as RoutedLink } from './navigation/RoutedLink';

export { default as Button } from './form/button';
export { Button, Input, Select, Textarea } from './form/input';
export { default as Field } from './form/field';
export { Tabs, TabsState, TabWrapper } from './tabs/tabs';
export { ActionBar, ActionButton } from './panel_actionbar/panel_actionbar';
export { default as Placeholder } from './placeholder/placeholder';

@@ -15,0 +19,0 @@ export { default as AddonPanel } from './addon_panel/index';

20

src/layout/desktop.js

@@ -39,4 +39,4 @@ import React, { Component } from 'react';

padding: addonPanelInRight
? `${layoutMargin} ${layoutMargin} ${layoutMargin} 0`
: `0px ${layoutMargin} ${layoutMargin} 0`,
? `${layoutMargin}px ${layoutMargin}px ${layoutMargin}px 0`
: `0 ${layoutMargin}px ${layoutMargin}px 0`,
boxSizing: 'border-box',

@@ -69,4 +69,4 @@ })

padding: addonPanelInRight
? `${layoutMargin} 0 ${layoutMargin} 0`
: `${layoutMargin} ${layoutMargin} 0 0`,
? `${layoutMargin}px 0 ${layoutMargin}px 0`
: `${layoutMargin}px ${layoutMargin}px 0 0`,
paddingTop: storiesPanelOnTop ? 0 : layoutMargin,

@@ -112,9 +112,9 @@ })

const DragBlockOverlay = styled('div')(({ isDragging }) => ({
zIndex: isDragging ? 2 : 0,
display: isDragging ? 'block' : 'none',
position: 'absolute',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
zIndex: 1,
top: 0,
right: 0,
bottom: 0,
left: 0,
}));

@@ -283,4 +283,4 @@

<Preview />
<Dimensions {...previewPanelDimensions} />
</PreviewWrapper>
<Dimensions {...previewPanelDimensions} />
</ContentPanel>

@@ -287,0 +287,0 @@ <AddonPanelWrapper {...{ showAddonPanel, addonPanelInRight }}>

30

src/layout/desktop.test.js

@@ -8,3 +8,13 @@ import React from 'react';

const Preview = () => null;
const SearchBox = () => null;
const ShortcutsHelp = () => null;
const componentStubs = {
storiesPanel: () => <StoriesPanel />,
addonPanel: () => <AddonPanel />,
preview: () => <Preview />,
searchBox: () => <SearchBox />,
shortcutsHelp: () => <ShortcutsHelp />,
};
describe('manager.ui.components.layout.index', () => {

@@ -19,5 +29,3 @@ describe('with default options', () => {

goFullScreen={false}
storiesPanel={() => <StoriesPanel />}
addonPanel={() => <AddonPanel />}
preview={() => <Preview />}
{...componentStubs}
/>

@@ -37,5 +45,3 @@ );

goFullScreen={false}
storiesPanel={() => <StoriesPanel />}
addonPanel={() => <AddonPanel />}
preview={() => <Preview />}
{...componentStubs}
/>

@@ -63,5 +69,3 @@ );

addonPanelInRight={false}
storiesPanel={() => <StoriesPanel />}
addonPanel={() => <AddonPanel />}
preview={() => <Preview />}
{...componentStubs}
/>

@@ -84,5 +88,3 @@ );

goFullScreen={false}
storiesPanel={() => <StoriesPanel />}
addonPanel={() => <AddonPanel />}
preview={() => <Preview />}
{...componentStubs}
/>

@@ -106,5 +108,3 @@ );

addonPanelInRight={false}
storiesPanel={() => <StoriesPanel />}
addonPanel={() => <AddonPanel />}
preview={() => <Preview />}
{...componentStubs}
/>

@@ -111,0 +111,0 @@ );

13

src/layout/dimensions.js

@@ -6,4 +6,2 @@ import PropTypes from 'prop-types';

import { baseFonts } from '../';
const DISPLAY_TIMEOUT = 1000;

@@ -13,11 +11,12 @@

position: 'absolute',
padding: 5,
bottom: 10,
right: 10,
padding: '5px 8px',
bottom: 0,
right: 0,
backgroundColor: 'rgba(255, 255, 255, 0.5)',
borderRadius: '5px 0 0 0',
});
const Section = styled('span')(baseFonts, { fontSize: 12 });
const Section = styled('span')({ fontSize: 12 });
const Delimiter = styled('span')(baseFonts, {
const Delimiter = styled('span')({
margin: '0px 5px',

@@ -24,0 +23,0 @@ fontSize: 12,

50

src/layout/index.js

@@ -6,3 +6,3 @@ import React from 'react';

import { normal } from '../theme';
import { themes } from '../';

@@ -14,3 +14,3 @@ import MobileLayout from './mobile';

({ theme }) => ({
backgroundColor: theme.mainBackground,
background: theme.mainBackground,
fontFamily: theme.mainTextFace,

@@ -52,24 +52,31 @@ color: theme.mainTextColor,

isMobileDevice,
theme,
addonPanel: AddonPanel,
storiesPanel: StoriesPanel,
preview: Preview,
shortcutsHelp: ShortcutsHelp,
searchBox: SearchBox,
} = props;
return (
<ThemeProvider theme={normal}>
<Root isMobileDevice={isMobileDevice}>
{isMobileDevice ? (
<MobileLayout>
<StoriesPanelInner>
<StoriesPanel />
</StoriesPanelInner>
<StoriesPanelInner>
<Preview />
</StoriesPanelInner>
<AddonPanel />
</MobileLayout>
) : (
<DesktopLayout {...props} />
)}
</Root>
<ThemeProvider theme={theme || themes.normal}>
<div>
<Root isMobileDevice={isMobileDevice}>
{isMobileDevice ? (
<MobileLayout>
<StoriesPanelInner>
<StoriesPanel />
</StoriesPanelInner>
<StoriesPanelInner>
<Preview />
</StoriesPanelInner>
<AddonPanel />
</MobileLayout>
) : (
<DesktopLayout {...props} />
)}
</Root>
<ShortcutsHelp />
<SearchBox />
</div>
</ThemeProvider>

@@ -80,2 +87,3 @@ );

Layout.propTypes = {
theme: PropTypes.shape({}),
showStoriesPanel: PropTypes.bool.isRequired,

@@ -87,10 +95,12 @@ showAddonPanel: PropTypes.bool.isRequired,

addonPanel: PropTypes.func.isRequired,
shortcutsHelp: PropTypes.func.isRequired,
searchBox: PropTypes.func.isRequired,
addonPanelInRight: PropTypes.bool.isRequired,
isMobileDevice: PropTypes.bool,
isMobileDevice: PropTypes.bool.isRequired,
};
Layout.defaultProps = {
isMobileDevice: false,
theme: null,
};
export default Layout;

39

src/layout/index.stories.js

@@ -13,5 +13,9 @@ import React from 'react';

const mockStoriesPanel = () => <div style={{ ...panelStyle, background: '#4abdac' }}>Stories</div>;
const mockAddonPanel = () => <div style={{ ...panelStyle, background: '#fc4a1a' }}>Addon</div>;
const mockPreviewPanel = () => <div style={{ ...panelStyle, background: '#f7b733' }}>Preview</div>;
const componentStubs = {
storiesPanel: () => <div style={{ ...panelStyle, background: '#4abdac' }}>Stories</div>,
addonPanel: () => <div style={{ ...panelStyle, background: '#fc4a1a' }}>Addon</div>,
preview: () => <div style={{ ...panelStyle, background: '#f7b733' }}>Preview</div>,
searchBox: () => <div />,
shortcutsHelp: () => <div />,
};

@@ -25,5 +29,4 @@ storiesOf('Components|Layout', module)

addonPanelInRight={false}
storiesPanel={mockStoriesPanel}
addonPanel={mockAddonPanel}
preview={mockPreviewPanel}
isMobileDevice={false}
{...componentStubs}
/>

@@ -38,5 +41,3 @@ ))

addonPanelInRight={false}
storiesPanel={mockStoriesPanel}
addonPanel={mockAddonPanel}
preview={mockPreviewPanel}
{...componentStubs}
/>

@@ -50,5 +51,4 @@ ))

addonPanelInRight={false}
storiesPanel={mockStoriesPanel}
addonPanel={mockAddonPanel}
preview={mockPreviewPanel}
isMobileDevice={false}
{...componentStubs}
/>

@@ -62,5 +62,4 @@ ))

addonPanelInRight={false}
storiesPanel={mockStoriesPanel}
addonPanel={mockAddonPanel}
preview={mockPreviewPanel}
isMobileDevice={false}
{...componentStubs}
/>

@@ -74,5 +73,4 @@ ))

addonPanelInRight={false}
storiesPanel={mockStoriesPanel}
addonPanel={mockAddonPanel}
preview={mockPreviewPanel}
isMobileDevice={false}
{...componentStubs}
/>

@@ -86,6 +84,5 @@ ))

addonPanelInRight
storiesPanel={mockStoriesPanel}
addonPanel={mockAddonPanel}
preview={mockPreviewPanel}
isMobileDevice={false}
{...componentStubs}
/>
));

6

src/layout/mobile.js

@@ -5,3 +5,3 @@ import React, { Component, Children } from 'react';

import { TabBar, Tab } from '../addon_panel/index';
import { Tab, TabBar } from '../tabs/tabs';

@@ -16,3 +16,3 @@ const MobilePanel = styled('div')(

left: 0,
height: 'calc(100vh - 34px)',
height: 'calc(100vh - 40px)',
width: '100vw',

@@ -50,3 +50,3 @@ overflow: 'auto',

name={MobileTabs[i]}
selected={i === index}
active={i === index}
title={MobileTabs[i] || `${i}`}

@@ -53,0 +53,0 @@ onSelect={() => this.setState({ index: i })}

6

src/navigation/MenuLink.js

@@ -6,5 +6,5 @@ import PropTypes from 'prop-types';

const MenuLink = styled(RoutedLink, { rootEl: 'a' })(
{
({ theme }) => ({
display: 'block',
color: '#828282',
color: theme.dimmedTextColor,
textDecoration: 'none',

@@ -17,3 +17,3 @@ fontSize: '13px',

zIndex: 1,
},
}),
({ active }) =>

@@ -20,0 +20,0 @@ active

4

src/placeholder/placeholder.js
import styled from 'react-emotion';
import { baseFonts } from '../';
export default styled('p')(baseFonts, {
export default styled('p')({
fontSize: '11px',

@@ -7,0 +5,0 @@ display: 'block',

62

src/theme.js

@@ -0,1 +1,3 @@

import { chromeDark, chromeLight } from 'react-inspector';
export const baseFonts = {

@@ -16,11 +18,63 @@ fontFamily:

export const normal = {
mainBackground: '#F7F7F7',
mainBackground: '#F7F7F7 linear-gradient(to bottom right, #EEEEEE, #FFFFFF)',
mainBorder: '1px solid rgba(0,0,0,0.1)',
mainBorderColor: 'rgba(0,0,0,0.1)',
mainBorderRadius: 4,
mainFill: 'rgba(255,255,255,0.99)',
mainFill: 'rgba(255,255,255,0.89)',
barFill: 'rgba(255,255,255,1)',
barSelectedColor: 'rgba(0,0,0,0.1)',
inputFill: 'rgba(0,0,0,0.05)',
mainTextFace: baseFonts.fontFamily,
mainTextColor: baseFonts.color,
dimmedTextColor: 'rgba(0,0,0,0.4)',
highlightColor: '#9fdaff',
successColor: '#0edf62',
failColor: '#ff3f3f',
warnColor: 'orange',
mainTextSize: 13,
monoTextFace: monoFonts.color,
layoutMargin: '10px',
monoTextFace: monoFonts.fontFamily,
layoutMargin: 10,
overlayBackground:
'linear-gradient(to bottom right, rgba(233, 233, 233, 0.6), rgba(255, 255, 255, 0.8))',
brand: {},
addonActionsTheme: {
...chromeLight,
BASE_FONT_FAMILY: monoFonts.fontFamily,
BASE_BACKGROUND_COLOR: 'transparent',
},
};
export const dark = {
mainBackground: '#112 linear-gradient(to right, #112, #333)',
mainBorder: '1px solid rgba(255,255,255,0.1)',
mainBorderColor: 'rgba(255,255,255,0.1)',
mainBorderRadius: 4,
mainFill: 'rgba(255,255,255,0.1)',
barFill: 'rgba(0,0,0,1)',
barSelectedColor: 'rgba(255,255,255,0.4)',
inputFill: 'rgba(0,0,0,1)',
mainTextFace: baseFonts.fontFamily,
mainTextColor: '#efefef',
dimmedTextColor: 'rgba(255,255,255,0.4)',
highlightColor: '#9fdaff',
successColor: '#0edf62',
failColor: '#ff3f3f',
warnColor: 'orange',
mainTextSize: 13,
monoTextFace: monoFonts.fontFamily,
layoutMargin: 10,
overlayBackground:
'linear-gradient(to bottom right, rgba(17, 17, 34, 0.6), rgba(51, 51, 51, 0.8))',
brand: {
background: 'rgba(0,0,0,1)',
},
addonActionsTheme: {
...chromeDark,
BASE_FONT_FAMILY: monoFonts.fontFamily,
BASE_BACKGROUND_COLOR: 'transparent',
},
};
dist/form/button.js
src/form/button.js
src/form/button.stories.js
src/addon_panel/__snapshots__/index.stories.storyshot

Sorry, the diff of this file is not supported yet

src/form/__snapshots__/button.stories.storyshot

Sorry, the diff of this file is not supported yet

src/header/__snapshots__/header.stories.storyshot

Sorry, the diff of this file is not supported yet

src/layout/__snapshots__/index.stories.storyshot

Sorry, the diff of this file is not supported yet

src/navigation/__snapshots__/MenuLink.stories.storyshot

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc