@storybook/components - npm Package Compare versions

Comparing version 4.0.0-alpha.7 to 4.0.0-alpha.8

dist/form/button.js

@@ -11,5 +11,5 @@ 'use strict';
 
-var _glamorous = require('glamorous');
+var _reactEmotion = require('react-emotion');
 
-var _glamorous2 = _interopRequireDefault(_glamorous);
+var _reactEmotion2 = _interopRequireDefault(_reactEmotion);
 
@@ -20,3 +20,3 @@ var _theme = require('../theme');
 
-exports.default = _glamorous2.default.button((0, _extends3.default)({}, _theme.baseFonts, {
+exports.default = (0, _reactEmotion2.default)('button')((0, _extends3.default)({}, _theme.baseFonts, {
   border: 'none',
@@ -42,2 +42,2 @@ boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.2)',
   }
-})).withProps({ type: 'button' });
+}));

dist/highlight_button.js

@@ -7,9 +7,9 @@ 'use strict';
 
-var _glamorous = require('glamorous');
+var _reactEmotion = require('react-emotion');
 
-var _glamorous2 = _interopRequireDefault(_glamorous);
+var _reactEmotion2 = _interopRequireDefault(_reactEmotion);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = _glamorous2.default.button({
+exports.default = (0, _reactEmotion2.default)('button')({
   border: '1px solid rgba(0, 0, 0, 0)',
@@ -16,0 +16,0 @@ font: 'inherit',

dist/index.js

@@ -6,28 +6,14 @@ '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;
 
-var _theme = require('./theme');
+var _RoutedLink = require('./navigation/RoutedLink');
 
-Object.defineProperty(exports, 'baseFonts', {
-  enumerable: true,
-  get: function get() {
-    return _theme.baseFonts;
-  }
-});
-Object.defineProperty(exports, 'monoFonts', {
-  enumerable: true,
-  get: function get() {
-    return _theme.monoFonts;
-  }
-});
-
-var _routed_link = require('./navigation/routed_link');
-
 Object.defineProperty(exports, 'RoutedLink', {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_routed_link).default;
+    return _interopRequireDefault(_RoutedLink).default;
   }
 });
 
-var _menu_link = require('./navigation/menu_link');
+var _MenuLink = require('./navigation/MenuLink');
 
@@ -37,3 +23,3 @@ Object.defineProperty(exports, 'MenuLink', {
   get: function get() {
-    return _interopRequireDefault(_menu_link).default;
+    return _interopRequireDefault(_MenuLink).default;
   }
@@ -65,3 +51,3 @@ });
   get: function get() {
-    return _cell.td;
+    return _cell.Td;
   }
@@ -72,3 +58,3 @@ });
   get: function get() {
-    return _cell.th;
+    return _cell.Th;
   }
@@ -86,2 +72,44 @@ });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _placeholder = require('./placeholder/placeholder');
+
+Object.defineProperty(exports, 'Placeholder', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_placeholder).default;
+  }
+});
+
+var _index = require('./addon_panel/index');
+
+Object.defineProperty(exports, 'AddonPanel', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_index).default;
+  }
+});
+
+var _index2 = require('./layout/index');
+
+Object.defineProperty(exports, 'Layout', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_index2).default;
+  }
+});
+
+var _header = require('./header/header');
+
+Object.defineProperty(exports, 'Header', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_header).default;
+  }
+});
+
+var _theme = require('./theme');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.baseFonts = _theme.baseFonts;
+exports.monoFonts = _theme.monoFonts;
+var themes = exports.themes = { normal: _theme.normal };

dist/table/cell.js

@@ -6,27 +6,21 @@ 'use strict';
 });
-exports.th = exports.td = undefined;
+exports.Th = exports.Td = undefined;
 
-var _glamorous = require('glamorous');
+var _extends2 = require('babel-runtime/helpers/extends');
 
-var _glamorous2 = _interopRequireDefault(_glamorous);
+var _extends3 = _interopRequireDefault(_extends2);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _reactEmotion = require('react-emotion');
 
-var dynamicStyles = function dynamicStyles(props) {
-  var styles = [];
+var _reactEmotion2 = _interopRequireDefault(_reactEmotion);
 
-  if (props.bordered) {
-    styles.push({
-      border: '1px solid #ccc'
-    });
-  }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-  if (props.code) {
-    styles.push({
-      whiteSpace: 'nowrap',
-      fontFamily: 'Monaco, Consolas, "Courier New", monospace'
-    });
-  }
-
-  return styles;
+var dynamicStyles = function dynamicStyles(_ref) {
+  var bordered = _ref.bordered,
+      code = _ref.code;
+  return (0, _extends3.default)({}, bordered ? { border: '1px solid #ccc' } : {}, code ? {
+    whiteSpace: 'nowrap',
+    fontFamily: 'Monaco, Consolas, "Courier New", monospace'
+  } : {});
 };
@@ -38,3 +32,6 @@
 
-var td = exports.td = _glamorous2.default.td(styles, dynamicStyles);
-var th = exports.th = _glamorous2.default.th(styles, dynamicStyles);
+var Td = exports.Td = (0, _reactEmotion2.default)('td')(styles, dynamicStyles);
+var Th = exports.Th = (0, _reactEmotion2.default)('th')(styles, dynamicStyles);
+
+Td.displayName = 'Td';
+Th.displayName = 'Th';

dist/table/table.js

@@ -7,10 +7,14 @@ 'use strict';
 
-var _glamorous = require('glamorous');
+var _reactEmotion = require('react-emotion');
 
-var _glamorous2 = _interopRequireDefault(_glamorous);
+var _reactEmotion2 = _interopRequireDefault(_reactEmotion);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = _glamorous2.default.table({
+var Table = (0, _reactEmotion2.default)('table')({
   borderCollapse: 'collapse'
-});
+});
+
+Table.displayName = 'Table';
+
+exports.default = Table;

dist/theme.js

@@ -16,2 +16,14 @@ 'use strict';
   WebkitFontSmoothing: 'antialiased'
+};
+
+var normal = exports.normal = {
+  mainBackground: '#F7F7F7',
+  mainBorder: '1px solid rgba(0,0,0,0.1)',
+  mainBorderRadius: 4,
+  mainFill: 'rgba(255,255,255,0.99)',
+  mainTextFace: baseFonts.fontFamily,
+  mainTextColor: baseFonts.color,
+  mainTextSize: 13,
+  monoTextFace: monoFonts.color,
+  layoutMargin: '10px'
 };

package.json

 {
   "name": "@storybook/components",
-  "version": "4.0.0-alpha.7",
+  "version": "4.0.0-alpha.8",
   "description": "Core Storybook Components",
-  "license": "MIT",
-  "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
   "repository": {
@@ -12,2 +9,5 @@ "type": "git",
   },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "jsnext:main": "src/index.js",
   "scripts": {
@@ -19,15 +19,20 @@ "build-storybook": "build-storybook",
   "dependencies": {
-    "glamor": "^2.20.40",
-    "glamorous": "^4.12.5",
-    "prop-types": "^15.6.1"
+    "emotion": "^9.1.3",
+    "emotion-theming": "^9.1.2",
+    "global": "^4.3.2",
+    "lodash.pick": "^4.4.0",
+    "lodash.throttle": "^4.1.1",
+    "prop-types": "^15.6.1",
+    "react-emotion": "^9.1.3",
+    "react-split-pane": "^0.1.77"
   },
+  "devDependencies": {
+    "@storybook/addon-actions": "4.0.0-alpha.8",
+    "@storybook/addon-knobs": "4.0.0-alpha.8",
+    "@storybook/react": "4.0.0-alpha.8"
+  },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
-  },
-  "devDependencies": {
-    "@storybook/addon-actions": "4.0.0-alpha.7",
-    "@storybook/addon-knobs": "4.0.0-alpha.7",
-    "@storybook/react": "4.0.0-alpha.7"
   }
 }

README.md

@@ -14,2 +14,2 @@ # Storybook Components
 
-All components use [`glamorous`](https://glamorous.rocks) for styling.
+All components use [`emotion`](https://emotion.sh) for styling.

src/form/button.js

@@ -1,28 +0,26 @@
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 import { baseFonts } from '../theme';
 
-export default glamorous
-  .button({
-    ...baseFonts,
-    border: 'none',
-    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.2)',
-    backgroundColor: 'rgb(255, 255, 255)',
-    padding: '4px 10px 7px',
-    borderRadius: 4,
-    cursor: 'pointer',
-    transition: 'box-shadow 0.15s ease-out',
-    ':hover': {
-      transition: 'background-color 0.15s ease-out',
-      boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.3)',
-    },
-    ':focus': {
-      transition: 'background-color 0.15s ease-out',
-      outline: 'none',
-      boxShadow: '0 0 0 2px rgba(0, 0, 0, 0.3)',
-    },
-    ':active': {
-      transition: 'none',
-      backgroundColor: 'rgb(247, 247, 247)',
-    },
-  })
-  .withProps({ type: 'button' });
+export default styled('button')({
+  ...baseFonts,
+  border: 'none',
+  boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.2)',
+  backgroundColor: 'rgb(255, 255, 255)',
+  padding: '4px 10px 7px',
+  borderRadius: 4,
+  cursor: 'pointer',
+  transition: 'box-shadow 0.15s ease-out',
+  ':hover': {
+    transition: 'background-color 0.15s ease-out',
+    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.3)',
+  },
+  ':focus': {
+    transition: 'background-color 0.15s ease-out',
+    outline: 'none',
+    boxShadow: '0 0 0 2px rgba(0, 0, 0, 0.3)',
+  },
+  ':active': {
+    transition: 'none',
+    backgroundColor: 'rgb(247, 247, 247)',
+  },
+});

src/highlight_button.js

@@ -1,4 +0,4 @@
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 
-export default glamorous.button(
+export default styled('button')(
   {
@@ -5,0 +5,0 @@ border: '1px solid rgba(0, 0, 0, 0)',

src/index.js

@@ -1,9 +0,16 @@
-export { baseFonts, monoFonts } from './theme';
+import { baseFonts, monoFonts, normal } from './theme';
 
-export { default as RoutedLink } from './navigation/routed_link';
-export { default as MenuLink } from './navigation/menu_link';
+export { baseFonts, monoFonts };
+export const themes = { normal };
+
+export { default as RoutedLink } from './navigation/RoutedLink';
+export { default as MenuLink } from './navigation/MenuLink';
 export { default as HighlightButton } from './highlight_button';
 export { default as Table } from './table/table';
-export { td as Td, th as Th } from './table/cell';
+export { Td, Th } from './table/cell';
 
 export { default as Button } from './form/button';
+export { default as Placeholder } from './placeholder/placeholder';
+export { default as AddonPanel } from './addon_panel/index';
+export { default as Layout } from './layout/index';
+export { default as Header } from './header/header';

src/table/cell.js

@@ -1,22 +0,13 @@
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 
-const dynamicStyles = props => {
-  const styles = [];
+const dynamicStyles = ({ bordered, code }) => ({
+  ...(bordered ? { border: '1px solid #ccc' } : {}),
+  ...(code
+    ? {
+        whiteSpace: 'nowrap',
+        fontFamily: 'Monaco, Consolas, "Courier New", monospace',
+      }
+    : {}),
+});
 
-  if (props.bordered) {
-    styles.push({
-      border: '1px solid #ccc',
-    });
-  }
-
-  if (props.code) {
-    styles.push({
-      whiteSpace: 'nowrap',
-      fontFamily: 'Monaco, Consolas, "Courier New", monospace',
-    });
-  }
-
-  return styles;
-};
-
 const styles = {
@@ -26,3 +17,6 @@ padding: '2px 6px',
 
-export const td = glamorous.td(styles, dynamicStyles);
-export const th = glamorous.th(styles, dynamicStyles);
+export const Td = styled('td')(styles, dynamicStyles);
+export const Th = styled('th')(styles, dynamicStyles);
+
+Td.displayName = 'Td';
+Th.displayName = 'Th';

src/table/table.js

@@ -1,5 +0,9 @@
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 
-export default glamorous.table({
+const Table = styled('table')({
   borderCollapse: 'collapse',
 });
+
+Table.displayName = 'Table';
+
+export default Table;

src/theme.js

@@ -14,1 +14,13 @@ export const baseFonts = {
 };
+
+export const normal = {
+  mainBackground: '#F7F7F7',
+  mainBorder: '1px solid rgba(0,0,0,0.1)',
+  mainBorderRadius: 4,
+  mainFill: 'rgba(255,255,255,0.99)',
+  mainTextFace: baseFonts.fontFamily,
+  mainTextColor: baseFonts.color,
+  mainTextSize: 13,
+  monoTextFace: monoFonts.color,
+  layoutMargin: '10px',
+};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108045

increased by351.49%

Number of package files

54

increased by100%

Lines of code

2712

increased by365.98%

Worsened metrics

Dependency count

10

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedemotion@^9.1.3

• + Addedemotion-theming@^9.1.2

• + Addedglobal@^4.3.2

• + Addedlodash.pick@^4.4.0

• + Addedlodash.throttle@^4.1.1

• + Addedreact-emotion@^9.1.3

• + Addedreact-split-pane@^0.1.77

• + Added@babel/code-frame@7.25.7(transitive)

• + Added@babel/generator@7.25.7(transitive)

• + Added@babel/helper-module-imports@7.25.7(transitive)

• + Added@babel/helper-string-parser@7.25.7(transitive)

• + Added@babel/helper-validator-identifier@7.25.7(transitive)

• + Added@babel/highlight@7.25.7(transitive)

• + Added@babel/parser@7.25.8(transitive)

• + Added@babel/runtime@7.25.7(transitive)

• + Added@babel/template@7.25.7(transitive)

• + Added@babel/traverse@7.25.7(transitive)

• + Added@babel/types@7.25.8(transitive)

• + Added@emotion/babel-utils@0.6.10(transitive)

• + Added@emotion/hash@0.6.6(transitive)

• + Added@emotion/is-prop-valid@0.6.8(transitive)

• + Added@emotion/memoize@0.6.6(transitive)

• + Added@emotion/serialize@0.9.1(transitive)

• + Added@emotion/stylis@0.7.1(transitive)

• + Added@emotion/unitless@0.6.7(transitive)

• + Added@emotion/utils@0.8.2(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedabbrev@1.1.1(transitive)

• + Addedansi-styles@3.2.1(transitive)

• + Addedbabel-plugin-emotion@9.2.11(transitive)

• + Addedbabel-plugin-macros@2.8.0(transitive)

• + Addedbabel-plugin-syntax-jsx@6.18.0(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedcosmiconfig@6.0.0(transitive)

• + Addedcreate-emotion@9.2.12(transitive)

• + Addedcreate-emotion-styled@9.2.8(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addeddom-walk@0.1.2(transitive)

• + Addedemotion@9.2.12(transitive)

• + Addedemotion-theming@9.2.9(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedfind-root@1.1.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglobal@4.4.0(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedhoist-non-react-statics@2.5.5(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.15.1(transitive)

• + Addedjsesc@3.0.2(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedlodash.pick@4.4.0(transitive)

• + Addedlodash.throttle@4.1.1(transitive)

• + Addedmin-document@2.19.0(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedmkdirp@0.5.6(transitive)

• + Addedms@2.1.3(transitive)

• + Addednopt@1.0.10(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.1.0(transitive)

• + Addedprocess@0.11.10(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-dom@16.14.0(transitive)

• + Addedreact-emotion@9.2.12(transitive)

• + Addedreact-lifecycles-compat@3.0.4(transitive)

• + Addedreact-split-pane@0.1.92(transitive)

• + Addedreact-style-proptype@3.2.2(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedscheduler@0.19.1(transitive)

• + Addedsource-map@0.5.70.7.4(transitive)

• + Addedstylis@3.5.4(transitive)

• + Addedstylis-rule-sheet@0.0.10(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedto-fast-properties@2.0.0(transitive)

• + Addedtouch@2.0.2(transitive)

• + Addedyaml@1.10.2(transitive)

• - Removedglamor@^2.20.40

• - Removedglamorous@^4.12.5

• - Removedasap@2.0.6(transitive)

• - Removedbowser@1.9.4(transitive)

• - Removedbrcast@3.0.2(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcss-in-js-utils@2.0.1(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfast-memoize@2.5.2(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removedglamor@2.20.40(transitive)

• - Removedglamorous@4.13.1(transitive)

• - Removedhtml-element-attributes@1.3.1(transitive)

• - Removedhtml-tag-names@1.1.5(transitive)

• - Removedhyphenate-style-name@1.1.0(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedinline-style-prefixer@3.0.8(transitive)

• - Removedis-function@1.0.2(transitive)

• - Removedis-plain-object@2.0.4(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisobject@3.0.1(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact-html-attributes@1.4.6(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedsvg-tag-names@1.1.2(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)