@nobak/design-system 1.0.0

package/lib/shared/stories/elements/Color.stories.js

@@ -0,0 +1,269 @@
+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 { ColorPallet } from "../../elements";
+import "../../../../styles/index.css";
+export default {
+  component: ColorPallet,
+  title: 'Elements / Color',
+  args: {
+    theme: 'light'
+  }
+};
+// colors_list.map((color: string) => {
+//   return { name: '', style: `bg-${color}`}
+// })
+
+var colors = [{
+  name: '100',
+  style: 'bg-primary-100'
+}, {
+  name: '200',
+  style: 'bg-primary-200'
+}, {
+  name: '300',
+  style: 'bg-primary-300'
+}, {
+  name: '400',
+  style: 'bg-primary-400'
+}, {
+  name: '500',
+  style: 'bg-primary-500'
+}, {
+  name: '600',
+  style: 'bg-primary-600'
+}, {
+  name: '700',
+  style: 'bg-primary-700'
+}, {
+  name: '800',
+  style: 'bg-primary-800'
+}, {
+  name: '900',
+  style: 'bg-primary-900'
+}, {
+  name: '1000',
+  style: 'bg-primary-1000'
+}, {
+  name: '1100',
+  style: 'bg-primary-1100'
+}, {
+  name: '1200',
+  style: 'bg-primary-1200'
+}, {
+  name: '1300',
+  style: 'bg-primary-1300'
+}, {
+  name: '1400',
+  style: 'bg-primary-1400'
+}, {
+  name: '1500',
+  style: 'bg-primary-1500'
+}, {
+  name: '1600',
+  style: 'bg-primary-1600'
+}, {
+  name: '1700',
+  style: 'bg-primary-1700'
+}, {
+  name: '1800',
+  style: 'bg-primary-1800'
+}, {
+  name: '1900',
+  style: 'bg-primary-1900'
+}, {
+  name: '2000',
+  style: 'bg-primary-2000'
+}, {
+  name: '2100',
+  style: 'bg-primary-2100'
+}, {
+  name: '2200',
+  style: 'bg-primary-2200'
+}, {
+  name: '2300',
+  style: 'bg-primary-2300'
+}, {
+  name: '2400',
+  style: 'bg-primary-2400'
+}, {
+  name: '2500',
+  style: 'bg-primary-2500'
+}, {
+  name: '2600',
+  style: 'bg-primary-2600'
+}, {
+  name: '2700',
+  style: 'bg-primary-2700'
+}, {
+  name: '100',
+  style: 'bg-secondary-100'
+}, {
+  name: '200',
+  style: 'bg-secondary-200'
+}, {
+  name: '300',
+  style: 'bg-secondary-300'
+}, {
+  name: '400',
+  style: 'bg-secondary-400'
+}, {
+  name: '500',
+  style: 'bg-secondary-500'
+}, {
+  name: '600',
+  style: 'bg-secondary-600'
+}, {
+  name: '700',
+  style: 'bg-secondary-700'
+}, {
+  name: '800',
+  style: 'bg-secondary-800'
+}, {
+  name: '900',
+  style: 'bg-secondary-900'
+}, {
+  name: '1000',
+  style: 'bg-secondary-1000'
+}, {
+  name: '1100',
+  style: 'bg-secondary-1100'
+}, {
+  name: '1200',
+  style: 'bg-secondary-1200'
+}, {
+  name: '1300',
+  style: 'bg-secondary-1300'
+}, {
+  name: '1400',
+  style: 'bg-secondary-1400'
+}, {
+  name: '1500',
+  style: 'bg-secondary-1500'
+}, {
+  name: '1600',
+  style: 'bg-secondary-1600'
+}, {
+  name: '1700',
+  style: 'bg-secondary-1700'
+}, {
+  name: '1800',
+  style: 'bg-secondary-1800'
+}, {
+  name: '1900',
+  style: 'bg-secondary-1900'
+}, {
+  name: '2000',
+  style: 'bg-secondary-2000'
+}, {
+  name: '2100',
+  style: 'bg-secondary-2100'
+}, {
+  name: '2200',
+  style: 'bg-secondary-2200'
+}, {
+  name: '2300',
+  style: 'bg-secondary-2300'
+}, {
+  name: '2400',
+  style: 'bg-secondary-2400'
+}, {
+  name: '2500',
+  style: 'bg-secondary-2500'
+}, {
+  name: '2600',
+  style: 'bg-secondary-2600'
+}, {
+  name: '2700',
+  style: 'bg-secondary-2700'
+}, {
+  name: '100',
+  style: 'bg-neutral-100'
+}, {
+  name: '200',
+  style: 'bg-neutral-200'
+}, {
+  name: '300',
+  style: 'bg-neutral-300'
+}, {
+  name: '400',
+  style: 'bg-neutral-400'
+}, {
+  name: '500',
+  style: 'bg-neutral-500'
+}, {
+  name: '600',
+  style: 'bg-neutral-600'
+}, {
+  name: '700',
+  style: 'bg-neutral-700'
+}, {
+  name: '800',
+  style: 'bg-neutral-800'
+}, {
+  name: '900',
+  style: 'bg-neutral-900'
+}, {
+  name: '1000',
+  style: 'bg-neutral-1000'
+}, {
+  name: '1100',
+  style: 'bg-neutral-1100'
+}, {
+  name: '1200',
+  style: 'bg-neutral-1200'
+}, {
+  name: '1300',
+  style: 'bg-neutral-1300'
+}, {
+  name: '1400',
+  style: 'bg-neutral-1400'
+}, {
+  name: '1500',
+  style: 'bg-neutral-1500'
+}, {
+  name: '1600',
+  style: 'bg-neutral-1600'
+}, {
+  name: '1700',
+  style: 'bg-neutral-1700'
+}, {
+  name: '1800',
+  style: 'bg-neutral-1800'
+}, {
+  name: '1900',
+  style: 'bg-neutral-1900'
+}, {
+  name: '2000',
+  style: 'bg-neutral-2000'
+}, {
+  name: '2100',
+  style: 'bg-neutral-2100'
+}, {
+  name: '2200',
+  style: 'bg-neutral-2200'
+}, {
+  name: '2300',
+  style: 'bg-neutral-2300'
+}, {
+  name: '2400',
+  style: 'bg-neutral-2400'
+}, {
+  name: '2500',
+  style: 'bg-neutral-2500'
+}, {
+  name: '2600',
+  style: 'bg-neutral-2600'
+}, {
+  name: '2700',
+  style: 'bg-neutral-2700'
+}];
+export var Pallet = function Pallet(args) {
+  return /*#__PURE__*/React.createElement(ColorPallet, _extends({}, args, {
+    colors: colors
+  }));
+};
+Pallet.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};

package/lib/shared/stories/elements/Text.stories.js

@@ -0,0 +1,45 @@
+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; }
+// Text.stories.tsx
+import React from 'react';
+import { Text } from "../../elements/Text";
+import "../../../../styles/index.css";
+export default {
+  title: 'Elements/Text',
+  component: Text
+};
+var sizeToWeights = {
+  display: ['bold', 'semi-bold', 'extra-bold'],
+  h1: ['bold', 'semi-bold', 'extra-bold'],
+  h2: ['bold', 'semi-bold', 'extra-bold'],
+  h3: ['bold', 'semi-bold', 'extra-bold'],
+  h4: ['bold', 'semi-bold', 'extra-bold'],
+  subheading: ['light', 'medium', 'semi-bold', 'bold', 'extra-bold', 'underlined'],
+  p1: ['light', 'medium', 'bold', 'underlined'],
+  p2: ['light', 'medium', 'bold', 'underlined'],
+  p3: ['light', 'medium', 'bold', 'underlined'],
+  caption: ['light', 'medium', 'bold', 'underlined', 'bold-underlined'],
+  footer: ['light', 'medium', 'bold', 'underlined', 'bold-underlined']
+};
+export var AllVariants = function AllVariants() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "text-neutral-2700"
+  }, Object.entries(sizeToWeights).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      size = _ref2[0],
+      weights = _ref2[1];
+    return weights.map(function (weight) {
+      return /*#__PURE__*/React.createElement(Text, {
+        key: "".concat(size, "-").concat(weight),
+        size: size,
+        weight: weight
+      }, "text-".concat(size, "-").concat(weight), /*#__PURE__*/React.createElement("span", {
+        className: "text-neutral-100"
+      }, ' ', "The quick brown fox jumps over the lazy dog."));
+    });
+  }));
+};

package/lib/shared/types/index.js

@@ -0,0 +1 @@
+export {};