@nobak/design-system 1.0.0

package/lib/shared/stories/components/Popover.stories.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Popover } from "../../components/Popover";
+import "../../../../styles/index.css";
+var items = [{
+  name: 'Insights',
+  description: 'Measure actions your users take',
+  href: '##'
+}, {
+  name: 'Automations',
+  description: 'Create your own targeted content',
+  href: '##'
+}, {
+  name: 'Reports',
+  description: 'Keep track of your growth',
+  href: '##'
+}];
+export default {
+  component: Popover,
+  title: 'Flash / Popover',
+  args: {
+    button: {
+      variant: 'basic',
+      icon: 'info'
+    },
+    children: /*#__PURE__*/React.createElement("div", null, "More information about.")
+  }
+};
+export var Default = function Default(args) {
+  return /*#__PURE__*/React.createElement(Popover, args);
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};

package/lib/shared/stories/components/QRCode.stories.js

@@ -0,0 +1,20 @@
+import { QRCode } from "../../components/QRCode";
+import "../../../../styles/index.css";
+export default {
+  component: QRCode,
+  title: 'Development / QRCode'
+};
+export var Default = function Default(args) {
+  return /*#__PURE__*/React.createElement(QRCode, {
+    value: "https://m24.nobak.net",
+    logoWidth: 50,
+    logoHeight: 50,
+    logoImage: "https://m24.nobak.net"
+  });
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=971%3A68'
+  }
+};

package/lib/shared/stories/components/RadioGroup.stories.js

@@ -0,0 +1,56 @@
+import { RadioGroup } from "../../components/RadioGroup";
+import "../../../../styles/index.css";
+var options = [{
+  name: 'Startup',
+  icon: 'user',
+  disabled: false
+}, {
+  name: 'Business',
+  icon: 'user',
+  disabled: false
+}, {
+  name: 'Enterprise',
+  icon: 'user',
+  disabled: false
+}];
+var verticalOptions = [{
+  name: 'Startup',
+  image_url: 'https://images.unsplash.com/photo-1591343395902-1adcb454c4e2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80',
+  disabled: false
+}, {
+  name: 'Business',
+  image_url: 'https://images.unsplash.com/photo-1593697972422-9d9cb386afd8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80',
+  disabled: false
+}, {
+  name: 'Enterprise',
+  image_url: 'https://images.unsplash.com/photo-1513745405825-efaf9a49315f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
+  disabled: true
+}];
+export default {
+  component: RadioGroup,
+  title: 'Data Handle / RadioGroup'
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(RadioGroup, {
+    options: options,
+    variant: "horizontal"
+  });
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};
+export var Vertical = function Vertical() {
+  return /*#__PURE__*/React.createElement(RadioGroup, {
+    options: verticalOptions,
+    variant: "vertical"
+  });
+};
+Vertical.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};

package/lib/shared/stories/components/Select.stories.js

@@ -0,0 +1,50 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { Select } from "../../components/Select";
+import "../../../../styles/index.css";
+function fn(value) {
+  // console.log(value);
+}
+var options = [{
+  name: 'Wade Cooper',
+  id: '1'
+}, {
+  name: 'Arlene Mccoy',
+  id: '2'
+}, {
+  name: 'Devon Webb',
+  id: '3'
+}, {
+  name: 'Tom Cook',
+  id: '4'
+}, {
+  name: 'Tanya Fox',
+  id: '5'
+}, {
+  name: 'Hellen Schmidt',
+  id: '6'
+}];
+export default {
+  component: Select,
+  title: 'Data Handle / Select',
+  argsTypes: {
+    initialState: {
+      control: 'array'
+    }
+  },
+  args: {
+    options: options,
+    defaultValue: 'Arlene Mccoy'
+  }
+};
+export var Default = function Default(args) {
+  return /*#__PURE__*/React.createElement(Select, _extends({}, args, {
+    register: fn,
+    setValue: fn
+  }));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};

package/lib/shared/stories/components/Sidebar.stories.js

@@ -0,0 +1,35 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { Sidebar, Button } from "../../components";
+import "../../../../styles/index.css";
+import * as React from 'react';
+export default {
+  component: Sidebar,
+  title: 'Components / Sidebar'
+};
+export var Default = function Default() {
+  var _React$useState = React.useState(true),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "text-neutral-800"
+  }, open ? 'OPEN' : 'CLOSED'), /*#__PURE__*/React.createElement(Button, {
+    text: "toggle",
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
+  }), /*#__PURE__*/React.createElement(Sidebar, {
+    initialState: open
+  }, /*#__PURE__*/React.createElement("li", null, "Home Page"), /*#__PURE__*/React.createElement("li", null, "Example 1"), /*#__PURE__*/React.createElement("li", null, "Example 2"), /*#__PURE__*/React.createElement("li", null, "Example 3")));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};

package/lib/shared/stories/components/Slider.stories.dev.js

@@ -0,0 +1,48 @@
+import { Slider, Image } from "../../components";
+import "../../../../styles/index.css";
+// import { FakeLink, experienceCards } from '~/src/shared/helpers';
+// import { ExperienceCard } from '~/src/shared/components/ExperienceCard';
+
+export default {
+  component: Slider,
+  title: 'Development / Slider'
+};
+
+// export const Cards = () => {
+//   const cards = experienceCards.map((card) => {
+//     return <ExperienceCard experience={card.experience} host={card.host} component={FakeLink} />
+//   })
+//   return <Slider cards={cards}/>
+// };
+
+// Cards.parameters = {
+//   design: {
+//     type: 'figma',
+//     url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+//   }
+// };
+
+export var ImageCarousel = function ImageCarousel() {
+  var cards = [/*#__PURE__*/React.createElement(Image, {
+    imageUrl: "https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+  }), /*#__PURE__*/React.createElement(Image, {
+    imageUrl: "https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+  }), /*#__PURE__*/React.createElement(Image, {
+    imageUrl: "https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+  }), /*#__PURE__*/React.createElement(Image, {
+    imageUrl: "https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+  }), /*#__PURE__*/React.createElement(Image, {
+    imageUrl: "https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+  }), /*#__PURE__*/React.createElement(Image, {
+    imageUrl: "https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+  })];
+  return /*#__PURE__*/React.createElement(Slider, {
+    cards: cards
+  });
+};
+ImageCarousel.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};

package/lib/shared/stories/components/Stepper/Stepper.stories.js

@@ -0,0 +1,38 @@
+import { Stepper, RadioGroup } from "../../../components";
+import "../../../../../styles/index.css";
+var options = [{
+  name: 'Startup',
+  ram: '12GB',
+  cpus: '6 CPUs',
+  disk: '160 GB SSD disk'
+}, {
+  name: 'Business',
+  ram: '16GB',
+  cpus: '8 CPUs',
+  disk: '512 GB SSD disk'
+}, {
+  name: 'Enterprise',
+  ram: '32GB',
+  cpus: '12 CPUs',
+  disk: '1024 GB SSD disk'
+}];
+var steps = [{
+  component: RadioGroup,
+  options: options
+}];
+export default {
+  component: Stepper,
+  title: 'Lab / Stepper'
+};
+export var Radio = function Radio() {
+  return /*#__PURE__*/React.createElement(Stepper, {
+    steps: steps,
+    type: "radio"
+  });
+};
+Radio.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};

package/lib/shared/stories/components/Steps.stories.js

@@ -0,0 +1,15 @@
+import { Steps } from "../../components/Steps";
+import "../../../../styles/index.css";
+export default {
+  component: Steps,
+  title: 'Components / Steps'
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Steps, null);
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};

package/lib/shared/stories/components/Switch.stories.js

@@ -0,0 +1,15 @@
+import { Switch } from "../../components/Switch";
+import "../../../../styles/index.css";
+export default {
+  component: Switch,
+  title: 'Components / Switch'
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};

package/lib/shared/stories/components/Tab.stories.js

@@ -0,0 +1,15 @@
+import { Tab } from "../../components/Tab";
+import "../../../../styles/index.css";
+export default {
+  component: Tab,
+  title: 'Components / Tab'
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};

package/lib/shared/stories/components/Table.stories.js

@@ -0,0 +1,95 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { Table } from "../../components/Table";
+import "../../../../styles/index.css";
+export default {
+  component: Table,
+  title: 'Data Show / Table',
+  args: {
+    headers: ['ID', 'Title']
+  },
+  argTypes: {
+    headers: {
+      type: {
+        summary: 'array'
+      }
+    }
+  }
+};
+var header = ['id', 'titles'];
+var data = [[{
+  value: '20042',
+  type: 'simple'
+}, {
+  value: 'Once upon a time in the web.',
+  type: 'simple'
+}], [{
+  value: '20042',
+  type: 'simple'
+}, {
+  value: 'Once upon a time in the web.',
+  type: 'simple'
+}], [{
+  value: '20042',
+  type: 'simple'
+}, {
+  value: 'Once upon a time in the web.',
+  type: 'simple'
+}], [{
+  value: '20042',
+  type: 'simple'
+}, {
+  value: 'Once upon a time in the web.',
+  type: 'simple'
+}], [{
+  value: '20042',
+  type: 'simple'
+}, {
+  value: 'Once upon a time in the web.',
+  type: 'simple'
+}], [{
+  value: {
+    text: 'Text',
+    imageUrl: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
+  },
+  type: 'image'
+}, {
+  value: 'Once upon a time in the web.',
+  type: 'simple'
+}]];
+export var Default = function Default(args) {
+  return /*#__PURE__*/React.createElement(Table, _extends({}, args, {
+    header: header,
+    data: data
+  }));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=971%3A68'
+  }
+};
+var d = [[{
+  value: {
+    text: "Algo",
+    content: "X",
+    onClick: function onClick(e) {
+      return console.log("hola", e);
+    }
+  },
+  type: 'checkbox'
+}, {
+  value: 'Once upon a time in the web.',
+  type: 'simple'
+}]];
+export var Default2 = function Default2(args) {
+  return /*#__PURE__*/React.createElement(Table, _extends({}, args, {
+    header: header,
+    data: d
+  }));
+};
+Default2.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=971%3A68'
+  }
+};

package/lib/shared/stories/components/TextList.stories.js

@@ -0,0 +1,23 @@
+import { TextList } from "../../components/TextList";
+import "../../../../styles/index.css";
+export default {
+  component: TextList,
+  title: 'Compositions / TextList',
+  argTypes: {
+    items: {
+      type: {
+        summary: 'array'
+      },
+      defaultValue: [['a Title', 'a Description'], ['another Title', 'another Description'], ['other Title', 'other Description']]
+    }
+  }
+};
+export var Default = function Default(args) {
+  return /*#__PURE__*/React.createElement(TextList, args);
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/OG2qkuEFEhNmf2wTA0wAGq/Design-System?node-id=754%3A6702'
+  }
+};

package/lib/shared/stories/components/Tooltip.stories.dev.js

@@ -0,0 +1,40 @@
+import { Tooltip } from "../../components/Tooltip";
+import "../../../../styles/index.css";
+var items = [{
+  name: 'Insights',
+  description: 'Measure actions your users take',
+  href: '##'
+}, {
+  name: 'Automations',
+  description: 'Create your own targeted content',
+  href: '##'
+}, {
+  name: 'Reports',
+  description: 'Keep track of your growth',
+  href: '##'
+}];
+export default {
+  component: Tooltip,
+  title: 'Development / Tooltip',
+  argsTypes: {
+    title: {
+      control: 'string'
+    },
+    items: {
+      control: 'array'
+    }
+  },
+  args: {
+    items: items,
+    title: 'Soluciones'
+  }
+};
+export var Default = function Default(args) {
+  return /*#__PURE__*/React.createElement(Tooltip, args);
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};