@bolio-ui/core 1.0.0

package/esm/snippet/stories.js

@@ -0,0 +1,133 @@
+import Snippet from '.';
+import Grid from '../grid';
+export default {
+  title: 'Others/Snippet',
+  component: Snippet
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    width: "300px"
+  })));
+};
+export var Width = function Width() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    width: "100%"
+  })));
+};
+export var Types = function Types() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    width: "300px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    type: "primary",
+    width: "300px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    type: "secondary",
+    width: "300px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    type: "success",
+    width: "300px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    type: "warning",
+    width: "300px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    type: "error",
+    width: "300px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    type: "secondary",
+    width: "300px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    type: "lite",
+    width: "300px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    type: "dark",
+    width: "300px"
+  })));
+};
+export var Multiline = function Multiline() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: ['cd project', 'now'],
+    width: "300px"
+  })));
+};
+export var DisabledCopy = function DisabledCopy() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    copy: "prevent",
+    text: "yarn add @bolio-ui/core",
+    width: "300px"
+  })));
+};
+export var CustomSymbol = function CustomSymbol() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    symbol: ">",
+    text: "yarn add @bolio-ui/core",
+    width: "300px"
+  })));
+};
+export var CustomToast = function CustomToast() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    toastText: "Code copied!",
+    toastType: "secondary",
+    text: "yarn add @bolio-ui/core",
+    width: "300px"
+  })));
+};
+export var Filled = function Filled() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    type: "primary",
+    filled: true,
+    width: "300px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    type: "secondary",
+    filled: true,
+    width: "300px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    type: "success",
+    filled: true,
+    width: "300px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    type: "warning",
+    filled: true,
+    width: "300px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    type: "error",
+    filled: true,
+    width: "300px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
+    text: "yarn add @bolio-ui/core",
+    type: "info",
+    filled: true,
+    width: "300px"
+  })));
+};

package/esm/snippet/styles.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export var getStyles = function getStyles(type, palette, fill) {
+  var styles = {
+    "default": {
+      color: palette.foreground,
+      border: palette.accents_2,
+      bgColor: palette.accents_2
+    },
+    primary: {
+      color: palette.primary,
+      border: palette.primary,
+      bgColor: palette.accents_1
+    },
+    secondary: {
+      color: palette.secondary,
+      border: palette.secondary,
+      bgColor: palette.accents_1
+    },
+    success: {
+      color: palette.success,
+      border: palette.success,
+      bgColor: palette.accents_1
+    },
+    warning: {
+      color: palette.warning,
+      border: palette.warning,
+      bgColor: palette.accents_1
+    },
+    error: {
+      color: palette.error,
+      border: palette.error,
+      bgColor: palette.accents_1
+    },
+    info: {
+      color: palette.info,
+      border: palette.info,
+      bgColor: palette.accents_1
+    },
+    lite: {
+      color: palette.foreground,
+      border: palette.border,
+      bgColor: palette.accents_1
+    },
+    dark: {
+      color: palette.background,
+      border: palette.foreground,
+      bgColor: palette.foreground
+    }
+  };
+  var filledTypes = ['primary', 'secondary', 'success', 'warning', 'error', 'info'];
+  var style = styles[type];
+  var shouldFilled = filledTypes.includes(type);
+  if (!fill || !shouldFilled) return style;
+  return _extends({}, style, {
+    color: style.bgColor,
+    bgColor: style.color
+  });
+};

package/esm/spacer/index.js

@@ -0,0 +1,2 @@
+import Spacer from './spacer';
+export default Spacer;

package/esm/spacer/spacer.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["inline", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useScale, { withScale } from '../use-scale';
+
+var SpacerComponent = function SpacerComponent(_ref) {
+  var _ref$inline = _ref.inline,
+      inline = _ref$inline === void 0 ? false : _ref$inline,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: _JSXStyle.dynamic([["4257820108", [inline ? 'inline-block' : 'block', SCALES.width(1), SCALES.height(1), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4257820108",
+    dynamic: [inline ? 'inline-block' : 'block', SCALES.width(1), SCALES.height(1), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, "span.__jsx-style-dynamic-selector{display:".concat(inline ? 'inline-block' : 'block', ";width:").concat(SCALES.width(1), ";height:").concat(SCALES.height(1), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
+};
+
+SpacerComponent.displayName = 'BolioUISpacer';
+var Spacer = withScale(SpacerComponent);
+export default Spacer;

package/esm/spacer/stories.js

@@ -0,0 +1,54 @@
+import Spacer from '.';
+import Grid from '../grid';
+export default {
+  title: 'Layout/Spacer',
+  component: Spacer
+};
+export var Vertical = function Vertical() {
+  return /*#__PURE__*/React.createElement(Grid.Container, null, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    style: {
+      background: '#444',
+      borderRadius: '15px'
+    }
+  }, /*#__PURE__*/React.createElement(Spacer, {
+    h: 2
+  })), /*#__PURE__*/React.createElement(Spacer, {
+    h: 2
+  }), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    style: {
+      background: '#666',
+      borderRadius: '15px'
+    }
+  }, /*#__PURE__*/React.createElement(Spacer, {
+    h: 3
+  })), /*#__PURE__*/React.createElement(Spacer, {
+    h: 3
+  }), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    style: {
+      background: '#999',
+      borderRadius: '15px'
+    }
+  }, /*#__PURE__*/React.createElement(Spacer, {
+    h: 4
+  })));
+};
+export var Horizontal = function Horizontal() {
+  return /*#__PURE__*/React.createElement(Grid.Container, null, /*#__PURE__*/React.createElement(Grid, {
+    xs: 4,
+    style: {
+      background: '#444',
+      borderRadius: '15px'
+    }
+  }), /*#__PURE__*/React.createElement(Spacer, {
+    w: 5
+  }), /*#__PURE__*/React.createElement(Grid, {
+    xs: 4,
+    style: {
+      background: '#444',
+      borderRadius: '15px'
+    }
+  }));
+};

package/esm/spinner/index.js

@@ -0,0 +1,2 @@
+import Spinner from './spinner';
+export default Spinner;

package/esm/spinner/spinner.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var _excluded = ["className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+var getSpans = function getSpans(theme) {
+  return _toConsumableArray(new Array(12)).map(function (_, index) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: "spinner-".concat(index),
+      className: _JSXStyle.dynamic([["3296107463", [theme.palette.foreground, theme.layout.radius]]])
+    }, /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "3296107463",
+      dynamic: [theme.palette.foreground, theme.layout.radius]
+    }, "span.__jsx-style-dynamic-selector{background-color:".concat(theme.palette.foreground, ";position:absolute;top:-3.9%;width:24%;height:8%;left:-10%;border-radius:").concat(theme.layout.radius, ";-webkit-animation:spinner-__jsx-style-dynamic-selector 1.2s linear 0s infinite normal none running;animation:spinner-__jsx-style-dynamic-selector 1.2s linear 0s infinite normal none running;}span.__jsx-style-dynamic-selector:nth-child(1){-webkit-animation-delay:-1.2s;animation-delay:-1.2s;-webkit-transform:rotate(0deg) translate(146%);-ms-transform:rotate(0deg) translate(146%);transform:rotate(0deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:-1.1s;animation-delay:-1.1s;-webkit-transform:rotate(30deg) translate(146%);-ms-transform:rotate(30deg) translate(146%);transform:rotate(30deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:-1s;animation-delay:-1s;-webkit-transform:rotate(60deg) translate(146%);-ms-transform:rotate(60deg) translate(146%);transform:rotate(60deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(4){-webkit-animation-delay:-0.9s;animation-delay:-0.9s;-webkit-transform:rotate(90deg) translate(146%);-ms-transform:rotate(90deg) translate(146%);transform:rotate(90deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(5){-webkit-animation-delay:-0.8s;animation-delay:-0.8s;-webkit-transform:rotate(120deg) translate(146%);-ms-transform:rotate(120deg) translate(146%);transform:rotate(120deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(6){-webkit-animation-delay:-0.7s;animation-delay:-0.7s;-webkit-transform:rotate(150deg) translate(146%);-ms-transform:rotate(150deg) translate(146%);transform:rotate(150deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(7){-webkit-animation-delay:-0.6s;animation-delay:-0.6s;-webkit-transform:rotate(180deg) translate(146%);-ms-transform:rotate(180deg) translate(146%);transform:rotate(180deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(8){-webkit-animation-delay:-0.5s;animation-delay:-0.5s;-webkit-transform:rotate(210deg) translate(146%);-ms-transform:rotate(210deg) translate(146%);transform:rotate(210deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(9){-webkit-animation-delay:-0.4s;animation-delay:-0.4s;-webkit-transform:rotate(240deg) translate(146%);-ms-transform:rotate(240deg) translate(146%);transform:rotate(240deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(10){-webkit-animation-delay:-0.3s;animation-delay:-0.3s;-webkit-transform:rotate(270deg) translate(146%);-ms-transform:rotate(270deg) translate(146%);transform:rotate(270deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(11){-webkit-animation-delay:-0.2s;animation-delay:-0.2s;-webkit-transform:rotate(300deg) translate(146%);-ms-transform:rotate(300deg) translate(146%);transform:rotate(300deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(12){-webkit-animation-delay:-0.1s;animation-delay:-0.1s;-webkit-transform:rotate(330deg) translate(146%);-ms-transform:rotate(330deg) translate(146%);transform:rotate(330deg) translate(146%);}@-webkit-keyframes spinner-__jsx-style-dynamic-selector{0%{opacity:1;}100%{opacity:0.15;}}@keyframes spinner-__jsx-style-dynamic-selector{0%{opacity:1;}100%{opacity:0.15;}}")));
+  });
+};
+
+function SpinnerComponent(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var classes = useClasses('spinner', className);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["104472362", [SCALES.width(1.25), SCALES.height(1.25), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["104472362", [SCALES.width(1.25), SCALES.height(1.25), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + "container"
+  }, getSpans(theme)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "104472362",
+    dynamic: [SCALES.width(1.25), SCALES.height(1.25), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, ".spinner.__jsx-style-dynamic-selector{display:block;box-sizing:border-box;width:".concat(SCALES.width(1.25), ";height:").concat(SCALES.height(1.25), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.container.__jsx-style-dynamic-selector{width:100%;height:100%;position:relative;left:50%;top:50%;}")));
+}
+
+SpinnerComponent.displayName = 'BolioUISpinner';
+var Spinner = withScale(SpinnerComponent);
+export default Spinner;

package/esm/spinner/stories.js

@@ -0,0 +1,13 @@
+import Spinner from '.';
+import Grid from '../grid';
+export default {
+  title: 'Feedback/Spinner',
+  component: Spinner
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Spinner, {
+    scale: 2
+  })));
+};

package/esm/styled-jsx-server.es.js

@@ -0,0 +1,5 @@
+import { server } from './styled-jsx.es'
+const { flushToHTML } = server
+
+export { server, flushToHTML }
+export default server