New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

dev-novel

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dev-novel - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/url-helper.js

89

dist/dev-novel.js

@@ -0,1 +1,7 @@

'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

@@ -9,2 +15,26 @@

var _get = require('lodash/get');
var _get2 = _interopRequireDefault(_get);
var _isString = require('lodash/isString');
var _isString2 = _interopRequireDefault(_isString);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _mobx = require('mobx');
var _index = require('./ui/index');
var _index2 = _interopRequireDefault(_index);
var _urlHelper = require('./url-helper');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

@@ -57,11 +87,6 @@

import get from 'lodash/get';
import isString from 'lodash/isString';
var escapeName = function escapeName(name) {
return name.replace(/\./g, '-');
};
import React from 'react';
import { render } from 'react-dom';
import { action, observable } from 'mobx';
import DevNovelUI, { baseStyles } from './ui/index';
var DevNovel = (_class = function () {

@@ -108,12 +133,16 @@ function DevNovel() {

return function (storyName, fn) {
if (typeof get(_this.stories, parentName + '.' + storyName) === 'function') {
if (typeof (0, _get2.default)(_this.stories, parentName + '.' + storyName) === 'function') {
throw new Error('story: ' + storyName + ' is already defined');
}
if (!isString(storyName) && typeof fn !== 'function') {
if (!(0, _isString2.default)(storyName) && typeof fn !== 'function') {
throw new Error('usage: `add(storyName: string, fn: Function)`');
}
Object.assign(_this.stories, _defineProperty({}, parentName, _extends({}, _this.stories[parentName] || {}, _defineProperty({}, storyName, fn))));
// remove `.` from keys or `_.get` wont work as expected
var safeParentName = escapeName(parentName);
var safeStoryName = escapeName(storyName);
Object.assign(_this.stories, _defineProperty({}, safeParentName, _extends({}, _this.stories[safeParentName] || {}, _defineProperty({}, safeStoryName, fn))));
return _this._bindedInstance({ parentName: parentName });

@@ -144,14 +173,28 @@ };

var fn = get(this.stories, this.selectedStory);
var fn = (0, _get2.default)(this.stories, this.selectedStory);
fn(this.storyContainer);
(0, _urlHelper.updateURL)(this.selectedStory);
}
}, {
key: 'initSelectedStory',
value: function initSelectedStory() {
var selectedStoryFromURL = (0, _urlHelper.loadFromURL)();
if (selectedStoryFromURL && (0, _get2.default)(this.stories, selectedStoryFromURL)) {
this.selectedStory = selectedStoryFromURL;
} else {
var firstParent = Object.keys(this.stories)[0];
this.selectedStory = firstParent + '.' + Object.keys(this.stories[firstParent])[0];
}
}
}, {
key: 'selectParent',
value: function selectParent(parentName) {
// update selected story
var _Object$keys = Object.keys(this.stories[parentName]),
var safeParentName = escapeName(parentName);
var _Object$keys = Object.keys(this.stories[safeParentName]),
_Object$keys2 = _slicedToArray(_Object$keys, 1),
firstStoryOfParent = _Object$keys2[0];
this.selectedStory = parentName + '.' + firstStoryOfParent;
this.selectedStory = safeParentName + '.' + firstStoryOfParent;
this.loadSelectedStory();

@@ -173,7 +216,7 @@ }

value: function injectUI() {
baseStyles();
(0, _index.baseStyles)();
var container = window.document.createElement('div');
window.document.body.appendChild(container);
render(React.createElement(DevNovelUI, { devNovelInstance: this }), container);
(0, _reactDom.render)(_react2.default.createElement(_index2.default, { devNovelInstance: this }), container);
}

@@ -195,3 +238,3 @@ }, {

return DevNovel;
}(), (_descriptor = _applyDecoratedDescriptor(_class.prototype, 'openAllStories', [observable], {
}(), (_descriptor = _applyDecoratedDescriptor(_class.prototype, 'openAllStories', [_mobx.observable], {
enumerable: true,

@@ -201,3 +244,3 @@ initializer: function initializer() {

}
}), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, 'project', [observable], {
}), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, 'project', [_mobx.observable], {
enumerable: true,

@@ -210,3 +253,3 @@ initializer: function initializer() {

}
}), _descriptor3 = _applyDecoratedDescriptor(_class.prototype, 'selectedStory', [observable], {
}), _descriptor3 = _applyDecoratedDescriptor(_class.prototype, 'selectedStory', [_mobx.observable], {
enumerable: true,

@@ -216,3 +259,3 @@ initializer: function initializer() {

}
}), _descriptor4 = _applyDecoratedDescriptor(_class.prototype, 'actionLogs', [observable], {
}), _descriptor4 = _applyDecoratedDescriptor(_class.prototype, 'actionLogs', [_mobx.observable], {
enumerable: true,

@@ -222,5 +265,3 @@ initializer: function initializer() {

}
}), _applyDecoratedDescriptor(_class.prototype, 'selectParent', [action], Object.getOwnPropertyDescriptor(_class.prototype, 'selectParent'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'selectStory', [action], Object.getOwnPropertyDescriptor(_class.prototype, 'selectStory'), _class.prototype)), _class);
export default DevNovel;
}), _applyDecoratedDescriptor(_class.prototype, 'initSelectedStory', [_mobx.action], Object.getOwnPropertyDescriptor(_class.prototype, 'initSelectedStory'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'selectParent', [_mobx.action], Object.getOwnPropertyDescriptor(_class.prototype, 'selectParent'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'selectStory', [_mobx.action], Object.getOwnPropertyDescriptor(_class.prototype, 'selectStory'), _class.prototype)), _class);
exports.default = DevNovel;

42

dist/index.js

@@ -1,20 +0,35 @@

import { action as mobxAction } from 'mobx';
'use strict';
import DevNovel from './dev-novel';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.start = undefined;
exports.storiesOf = storiesOf;
exports.registerDisposer = registerDisposer;
exports.registerInitializer = registerInitializer;
exports.action = action;
var devNovel = new DevNovel();
var _mobx = require('mobx');
export function storiesOf(parentName) {
var _devNovel = require('./dev-novel');
var _devNovel2 = _interopRequireDefault(_devNovel);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var devNovel = new _devNovel2.default();
function storiesOf(parentName) {
return devNovel._bindedInstance({ parentName: parentName });
}
export function registerDisposer(disposer) {
function registerDisposer(disposer) {
devNovel.disposers.push(disposer);
}
export function registerInitializer(initializer) {
function registerInitializer(initializer) {
devNovel.initializers.push(initializer);
}
export function action(name) {
function action(name) {
return function () {

@@ -34,18 +49,9 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {

export var start = mobxAction(function () {
var start = exports.start = (0, _mobx.action)(function () {
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
devNovel.applyOpts(opts);
// select first story in the list
devNovel.selectedStory = function () {
var firstParent = Object.keys(devNovel.stories)[0];
return firstParent + '.' + Object.keys(devNovel.stories[firstParent])[0];
}();
// append UI to the page
devNovel.initSelectedStory();
devNovel.injectUI();
// load selectedStory
devNovel.loadSelectedStory();
});

46

dist/ui/action-logger.js

@@ -0,1 +1,7 @@

'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _templateObject = _taggedTemplateLiteral(['\n border-bottom: 1px solid rgb(234, 234, 234);\n display: flex;\n flex-wrap: wrap;\n text-transform: uppercase;\n padding: 5px 10px;\n'], ['\n border-bottom: 1px solid rgb(234, 234, 234);\n display: flex;\n flex-wrap: wrap;\n text-transform: uppercase;\n padding: 5px 10px;\n']),

@@ -5,22 +11,32 @@ _templateObject2 = _taggedTemplateLiteral(['\n height: calc(100% - 35px); /* -title height */\n overflow-x: scroll;\n'], ['\n height: calc(100% - 35px); /* -title height */\n overflow-x: scroll;\n']),

var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _reactInspector = require('react-inspector');
var _mobx = require('mobx');
var _mobxReact = require('mobx-react');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import React from 'react';
import styled from 'styled-components';
import { Inspector } from 'react-inspector';
import { toJS } from 'mobx';
import { observer } from 'mobx-react';
var Title = _styledComponents2.default.div(_templateObject);
var Title = styled.div(_templateObject);
var LogsContainer = _styledComponents2.default.pre(_templateObject2);
var LogsContainer = styled.pre(_templateObject2);
var Log = _styledComponents2.default.div(_templateObject3);
var Log = styled.div(_templateObject3);
var ActionLogger = function ActionLogger(_ref) {
var devNovelInstance = _ref.devNovelInstance;
return React.createElement(
return _react2.default.createElement(
'div',
null,
React.createElement(
_react2.default.createElement(
Title,

@@ -30,3 +46,3 @@ null,

),
React.createElement(
_react2.default.createElement(
LogsContainer,

@@ -37,6 +53,6 @@ null,

data = _ref2.data;
return React.createElement(
return _react2.default.createElement(
Log,
{ key: idx },
React.createElement(Inspector, { name: name, data: toJS(data) })
_react2.default.createElement(_reactInspector.Inspector, { name: name, data: (0, _mobx.toJS)(data) })
);

@@ -48,2 +64,2 @@ })

export default observer(ActionLogger);
exports.default = (0, _mobxReact.observer)(ActionLogger);

62

dist/ui/index.js

@@ -0,1 +1,8 @@

'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.baseStyles = undefined;
var _templateObject = _taggedTemplateLiteral(['\n body {\n color: rgb(68, 68, 68);\n font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;\n }\n\n * {\n box-sizing: border-box;\n }\n\n ', '\n'], ['\n body {\n color: rgb(68, 68, 68);\n font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;\n }\n\n * {\n box-sizing: border-box;\n }\n\n ', '\n']),

@@ -8,23 +15,38 @@ _templateObject2 = _taggedTemplateLiteral(['\n background-color: rgb(247, 247, 247);\n display: flex;\n height: 100vh;\n'], ['\n background-color: rgb(247, 247, 247);\n display: flex;\n height: 100vh;\n']),

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var _react = require('react');
import React from 'react';
import styled, { injectGlobal } from 'styled-components';
import styledNormalized from 'styled-normalize';
var _react2 = _interopRequireDefault(_react);
import Sidebar from './sidebar';
import ActionLogger from './action-logger';
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _styledNormalize = require('styled-normalize');
var _styledNormalize2 = _interopRequireDefault(_styledNormalize);
var _sidebar = require('./sidebar');
var _sidebar2 = _interopRequireDefault(_sidebar);
var _actionLogger = require('./action-logger');
var _actionLogger2 = _interopRequireDefault(_actionLogger);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
// global css to load on devNovel.injectUI()
export var baseStyles = function baseStyles() {
return injectGlobal(_templateObject, styledNormalized);
var baseStyles = exports.baseStyles = function baseStyles() {
return (0, _styledComponents.injectGlobal)(_templateObject, _styledNormalize2.default);
};
var UIWrapper = styled.div(_templateObject2);
var UIWrapper = _styledComponents2.default.div(_templateObject2);
var BodyWrapper = styled.div(_templateObject3);
var BodyWrapper = _styledComponents2.default.div(_templateObject3);
var Body = styled.div(_templateObject4);
var Body = _styledComponents2.default.div(_templateObject4);
var StoryContainer = styled.div(_templateObject5);
var StoryContainer = _styledComponents2.default.div(_templateObject5);

@@ -35,17 +57,17 @@ var ActionLoggerContainer = StoryContainer.extend(_templateObject6);

var devNovelInstance = _ref.devNovelInstance;
return React.createElement(
return _react2.default.createElement(
UIWrapper,
null,
React.createElement(Sidebar, { devNovelInstance: devNovelInstance }),
React.createElement(
_react2.default.createElement(_sidebar2.default, { devNovelInstance: devNovelInstance }),
_react2.default.createElement(
BodyWrapper,
null,
React.createElement(
_react2.default.createElement(
Body,
null,
React.createElement(StoryContainer, { id: 'story-container' }),
React.createElement(
_react2.default.createElement(StoryContainer, { id: 'story-container' }),
_react2.default.createElement(
ActionLoggerContainer,
null,
React.createElement(ActionLogger, { devNovelInstance: devNovelInstance })
_react2.default.createElement(_actionLogger2.default, { devNovelInstance: devNovelInstance })
)

@@ -57,2 +79,2 @@ )

export default DevNovelUI;
exports.default = DevNovelUI;

94

dist/ui/sidebar.js

@@ -0,1 +1,7 @@

'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

@@ -16,2 +22,30 @@

var _map = require('lodash/map');
var _map2 = _interopRequireDefault(_map);
var _reduce = require('lodash/reduce');
var _reduce2 = _interopRequireDefault(_reduce);
var _sortBy = require('lodash/sortBy');
var _sortBy2 = _interopRequireDefault(_sortBy);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _mobx = require('mobx');
var _mobxReact = require('mobx-react');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

@@ -70,24 +104,15 @@

import map from 'lodash/map';
import reduce from 'lodash/reduce';
var SidebarContainer = _styledComponents2.default.div(_templateObject);
import React, { Component } from 'react';
import styled from 'styled-components';
var ProjectName = _styledComponents2.default.a(_templateObject2);
import { observable, computed } from 'mobx';
import { observer } from 'mobx-react';
var FilterContainer = _styledComponents2.default.div(_templateObject3);
var SidebarContainer = styled.div(_templateObject);
var FilterInput = _styledComponents2.default.input(_templateObject4);
var ProjectName = styled.a(_templateObject2);
var StoriesList = _styledComponents2.default.ul(_templateObject5);
var FilterContainer = styled.div(_templateObject3);
var ParentContainer = _styledComponents2.default.li(_templateObject6);
var FilterInput = styled.input(_templateObject4);
var StoriesList = styled.ul(_templateObject5);
var ParentContainer = styled.li(_templateObject6);
var SelectParent = styled.span(_templateObject7, function (props) {
var SelectParent = _styledComponents2.default.span(_templateObject7, function (props) {
return props.selected ? 'bold' : 'normal';

@@ -100,3 +125,3 @@ }, function (props) {

var Sidebar = observer(_class = (_class2 = function (_Component) {
var Sidebar = (0, _mobxReact.observer)(_class = (_class2 = function (_Component) {
_inherits(Sidebar, _Component);

@@ -123,3 +148,3 @@

return React.createElement(FilterInput, {
return _react2.default.createElement(FilterInput, {
type: 'text',

@@ -141,8 +166,11 @@ placeholder: 'Filter',

return map(this.stories, function (parentStories, parentName) {
return this.stories.map(function (_ref3) {
var parentStories = _ref3.parentStories,
parentName = _ref3.parentName;
var isSelected = devNovelInstance.selectedStory.split('.')[0] === parentName;
return React.createElement(
return _react2.default.createElement(
ParentContainer,
{ key: parentName },
React.createElement(
_react2.default.createElement(
SelectParent,

@@ -157,4 +185,4 @@ {

),
devNovelInstance.openAllStories || isSelected ? map(parentStories, function (storyFn, storyName) {
return React.createElement(
devNovelInstance.openAllStories || isSelected ? (0, _map2.default)(parentStories, function (storyFn, storyName) {
return _react2.default.createElement(
StoryContainer,

@@ -180,6 +208,6 @@ {

return React.createElement(
return _react2.default.createElement(
SidebarContainer,
null,
React.createElement(
_react2.default.createElement(
ProjectName,

@@ -189,3 +217,3 @@ { href: project.link, target: '_default' },

),
React.createElement(
_react2.default.createElement(
FilterContainer,

@@ -195,3 +223,3 @@ null,

),
React.createElement(
_react2.default.createElement(
StoriesList,

@@ -211,3 +239,3 @@ null,

if (filterValue && filterValue.trim() && filterValue.trim().length >= 3) {
return reduce(stories, function (result, parentStories, parentName) {
return (0, _reduce2.default)(stories, function (result, parentStories, parentName) {
var isParentNameMatch = parentName.toLowerCase().includes(filterValue);

@@ -221,3 +249,5 @@ var isChildrenStoryMatch = Object.keys(parentStories).some(function (storyName) {

return stories;
return (0, _sortBy2.default)((0, _reduce2.default)(stories, function (result, parentStories, parentName) {
return [].concat(_toConsumableArray(result), [{ parentName: parentName, parentStories: parentStories }]);
}, []), 'parentName');
}

@@ -227,3 +257,3 @@ }]);

return Sidebar;
}(Component), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'filterValue', [observable], {
}(_react.Component), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'filterValue', [_mobx.observable], {
enumerable: true,

@@ -233,4 +263,4 @@ initializer: function initializer() {

}
}), _applyDecoratedDescriptor(_class2.prototype, 'stories', [computed], Object.getOwnPropertyDescriptor(_class2.prototype, 'stories'), _class2.prototype)), _class2)) || _class;
}), _applyDecoratedDescriptor(_class2.prototype, 'stories', [_mobx.computed], Object.getOwnPropertyDescriptor(_class2.prototype, 'stories'), _class2.prototype)), _class2)) || _class;
export default Sidebar;
exports.default = Sidebar;

3

package.json
{
"name": "dev-novel",
"version": "0.0.2",
"version": "0.0.3",
"description": "📓 Build an interactive JavaScript development page",

@@ -27,2 +27,3 @@ "main": "dist/index.js",

"mobx-react": "^4.2.1",
"qs": "^6.4.0",
"react": "^15.5.4",

@@ -29,0 +30,0 @@ "react-dom": "^15.5.4",

27

README.md

@@ -11,13 +11,7 @@ # dev-novel

Since the project is still private, you will need to clone and build dev-novel by yourself in order to use it in your project:
* `$ npm i -D dev-novel` OR
* `$ yarn add -D dev-novel`
* `$ git clone git@github.com:algolia/dev-novel.git`
* `$ cd dev-novel && yarn && yarn link`
You will need your own build system (like webpack or rollup) to process the javascript and serve the page for you. You need to serve an `index.html` with a body tag and voilà!
Then in your project you simply run:
* `$ yarn link dev-novel`
You will also need to provide your own build system, we are not providing an minified/unified build for the moment. So use either webpack, rollup or browserify to start your dev environment.
### Usage

@@ -79,2 +73,4 @@

start({
projectName: ?string // name of the project to display in header of sidebar
projectLink: ?string // URL to link on the projectName
openAllStories?: boolean // open all parent stories item in the menu by default

@@ -92,4 +88,7 @@ })

// remove all event listeners when switching to another story
const eventDisposers = []
registerDisposer(() => { eventDisposers.forEach(disposer => disposer()) })
let eventDisposers = []
registerDisposer(() => {
eventDisposers.forEach(disposer => disposer())
eventDisposers = []
})

@@ -113,7 +112,1 @@ storiesOf('Button')

![preview-action-logger](./preview-action-logger.gif)
### TODO
* [ ] Provide initializers/disposers per stories
* [ ] Provide an UMD build for usage in the browser
* [ ] Open source / publish to NPM?
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