@nobak/design-system 1.0.0

package/lib/shared/stories/components/Input/SelectMultiple.stories.dev.js

@@ -0,0 +1,510 @@
+import { Input } from "../../../components/Input";
+import "../../../../../styles/index.css";
+function mockFunction(value) {
+  // console.log(value);
+}
+var languages_list = [{
+  name: 'Afrikaans',
+  fullname: "Afrikaans",
+  code: "af"
+}, {
+  name: 'Albanian',
+  fullname: "Albanian - shqip",
+  code: "sq"
+}, {
+  name: 'Amharic',
+  fullname: "Amharic - አማርኛ",
+  code: "am"
+}, {
+  name: 'Arabic',
+  fullname: "Arabic - العربية",
+  code: "ar"
+}, {
+  name: 'Aragonese',
+  fullname: "Aragonese - aragonés",
+  code: "an"
+}, {
+  name: 'Armenian',
+  fullname: "Armenian - հայերեն",
+  code: "hy"
+}, {
+  name: 'Asturian',
+  fullname: "Asturian - asturianu",
+  code: "ast"
+}, {
+  name: 'Azerbaijani',
+  fullname: "Azerbaijani - azərbaycan dili",
+  code: "az"
+}, {
+  name: 'Basque',
+  fullname: "Basque - euskara",
+  code: "eu"
+}, {
+  name: 'Belarusian',
+  fullname: "Belarusian - беларуская",
+  code: "be"
+}, {
+  name: 'Bengali',
+  fullname: "Bengali - বাংলা",
+  code: "bn"
+}, {
+  name: 'Bosnian',
+  fullname: "Bosnian - bosanski",
+  code: "bs"
+}, {
+  name: 'Breton',
+  fullname: "Breton - brezhoneg",
+  code: "br"
+}, {
+  name: 'Bulgarian',
+  fullname: "Bulgarian - български",
+  code: "bg"
+}, {
+  name: 'Catalan',
+  fullname: "Catalan - català",
+  code: "ca"
+}, {
+  name: 'Central Kurdish',
+  fullname: "Central Kurdish - کوردی (دەستنوسی عەرەبی)",
+  code: "ckb"
+}, {
+  name: 'Chinese',
+  fullname: "Chinese - 中文",
+  code: "zh"
+}, {
+  name: 'Chinese（香港)',
+  fullname: "Chinese (Hong Kong) - 中文（香港）",
+  code: "zh-HK"
+}, {
+  name: 'Chinese（简体)',
+  fullname: "Chinese (Simplified) - 中文（简体）",
+  code: "zh-CN"
+}, {
+  name: 'Chinese（繁體)',
+  fullname: "Chinese (Traditional) - 中文（繁體）",
+  code: "zh-TW"
+}, {
+  name: 'Corsican',
+  fullname: "Corsican",
+  code: "co"
+}, {
+  name: 'Croatian',
+  fullname: "Croatian - hrvatski",
+  code: "hr"
+}, {
+  name: 'Czech',
+  fullname: "Czech - čeština",
+  code: "cs"
+}, {
+  name: 'Danish',
+  fullname: "Danish - dansk",
+  code: "da"
+}, {
+  name: 'Dutch',
+  fullname: "Dutch - Nederlands",
+  code: "nl"
+}, {
+  name: 'English',
+  fullname: "English",
+  code: "en"
+}, {
+  name: 'Esperanto',
+  fullname: "Esperanto - esperanto",
+  code: "eo"
+}, {
+  name: 'Estonian',
+  fullname: "Estonian - eesti",
+  code: "et"
+}, {
+  name: 'Faroese',
+  fullname: "Faroese - føroyskt",
+  code: "fo"
+}, {
+  name: 'Filipino',
+  fullname: "Filipino",
+  code: "fil"
+}, {
+  name: 'Finnish',
+  fullname: "Finnish - suomi",
+  code: "fi"
+}, {
+  name: 'French',
+  fullname: "French - français",
+  code: "fr"
+}, {
+  name: 'Galician',
+  fullname: "Galician - galego",
+  code: "gl"
+}, {
+  name: 'Georgian',
+  fullname: "Georgian - ქართული",
+  code: "ka"
+}, {
+  name: 'German',
+  fullname: "German - Deutsch",
+  code: "de"
+}, {
+  name: 'Greek',
+  fullname: "Greek - Ελληνικά",
+  code: "el"
+}, {
+  name: 'Guarani',
+  fullname: "Guarani",
+  code: "gn"
+}, {
+  name: 'Gujarati',
+  fullname: "Gujarati - ગુજરાતી",
+  code: "gu"
+}, {
+  name: 'Hausa',
+  fullname: "Hausa",
+  code: "ha"
+}, {
+  name: 'Hawaiian',
+  fullname: "Hawaiian - ʻŌlelo Hawaiʻi",
+  code: "haw"
+}, {
+  name: 'Hebrew',
+  fullname: "Hebrew - עברית",
+  code: "he"
+}, {
+  name: 'Hindi',
+  fullname: "Hindi - हिन्दी",
+  code: "hi"
+}, {
+  name: 'Hungarian',
+  fullname: "Hungarian - magyar",
+  code: "hu"
+}, {
+  name: 'Icelandic',
+  fullname: "Icelandic - íslenska",
+  code: "is"
+}, {
+  name: 'Indonesian',
+  fullname: "Indonesian - Indonesia",
+  code: "id"
+}, {
+  name: 'Interlingua',
+  fullname: "Interlingua",
+  code: "ia"
+}, {
+  name: 'Irish',
+  fullname: "Irish - Gaeilge",
+  code: "ga"
+}, {
+  name: 'Italian',
+  fullname: "Italian - italiano",
+  code: "it"
+}, {
+  name: 'Japanese',
+  fullname: "Japanese - 日本語",
+  code: "ja"
+}, {
+  name: 'Kannada',
+  fullname: "Kannada - ಕನ್ನಡ",
+  code: "kn"
+}, {
+  name: 'Kazakh',
+  fullname: "Kazakh - қазақ тілі",
+  code: "kk"
+}, {
+  name: 'Khmer',
+  fullname: "Khmer - ខ្មែរ",
+  code: "km"
+}, {
+  name: 'Korean',
+  fullname: "Korean - 한국어",
+  code: "ko"
+}, {
+  name: 'Kurdish',
+  fullname: "Kurdish - Kurdî",
+  code: "ku"
+}, {
+  name: 'Kyrgyz',
+  fullname: "Kyrgyz - кыргызча",
+  code: "ky"
+}, {
+  name: 'Lao',
+  fullname: "Lao - ລາວ",
+  code: "lo"
+}, {
+  name: 'Latin',
+  fullname: "Latin",
+  code: "la"
+}, {
+  name: 'Latvian',
+  fullname: "Latvian - latviešu",
+  code: "lv"
+}, {
+  name: 'Lingala',
+  fullname: "Lingala - lingála",
+  code: "ln"
+}, {
+  name: 'Lithuanian',
+  fullname: "Lithuanian - lietuvių",
+  code: "lt"
+}, {
+  name: 'Macedonian',
+  fullname: "Macedonian - македонски",
+  code: "mk"
+}, {
+  name: 'Malay',
+  fullname: "Malay - Bahasa Melayu",
+  code: "ms"
+}, {
+  name: 'Malayalam',
+  fullname: "Malayalam - മലയാളം",
+  code: "ml"
+}, {
+  name: 'Maltese',
+  fullname: "Maltese - Malti",
+  code: "mt"
+}, {
+  name: 'Marathi',
+  fullname: "Marathi - मराठी",
+  code: "mr"
+}, {
+  name: 'Mongolian',
+  fullname: "Mongolian - монгол",
+  code: "mn"
+}, {
+  name: 'Nepali',
+  fullname: "Nepali - नेपाली",
+  code: "ne"
+}, {
+  name: 'Norwegian',
+  fullname: "Norwegian - norsk",
+  code: "no"
+}, {
+  name: 'Norwegian Bokmål',
+  fullname: "Norwegian Bokmål - norsk bokmål",
+  code: "nb"
+}, {
+  name: 'Norwegian Nynorsk',
+  fullname: "Norwegian Nynorsk - nynorsk",
+  code: "nn"
+}, {
+  name: 'Occitan',
+  fullname: "Occitan",
+  code: "oc"
+}, {
+  name: 'Oriya',
+  fullname: "Oriya - ଓଡ଼ିଆ",
+  code: "or"
+}, {
+  name: 'Oromo',
+  fullname: "Oromo - Oromoo",
+  code: "om"
+}, {
+  name: 'Pashto',
+  fullname: "Pashto - پښتو",
+  code: "ps"
+}, {
+  name: 'Persian',
+  fullname: "Persian - فارسی",
+  code: "fa"
+}, {
+  name: 'Polish',
+  fullname: "Polish - polski",
+  code: "pl"
+}, {
+  name: 'Portuguese',
+  fullname: "Portuguese - português",
+  code: "pt"
+}, {
+  name: 'Punjabi',
+  fullname: "Punjabi - ਪੰਜਾਬੀ",
+  code: "pa"
+}, {
+  name: 'Quechua',
+  fullname: "Quechua",
+  code: "qu"
+}, {
+  name: 'Romanian',
+  fullname: "Romanian - română",
+  code: "ro"
+}, {
+  name: 'Romanian',
+  fullname: "Romanian (Moldova) - română (Moldova)",
+  code: "mo"
+}, {
+  name: 'Romansh',
+  fullname: "Romansh - rumantsch",
+  code: "rm"
+}, {
+  name: 'Russian',
+  fullname: "Russian - русский",
+  code: "ru"
+}, {
+  name: 'Scottish Gaelic',
+  fullname: "Scottish Gaelic",
+  code: "gd"
+}, {
+  name: 'Serbian',
+  fullname: "Serbian - српски",
+  code: "sr"
+}, {
+  name: 'Serbo',
+  fullname: "Serbo - Croatian",
+  code: "sh"
+}, {
+  name: 'Shona',
+  fullname: "Shona - chiShona",
+  code: "sn"
+}, {
+  name: 'Sindhi',
+  fullname: "Sindhi",
+  code: "sd"
+}, {
+  name: 'Sinhala',
+  fullname: "Sinhala - සිංහල",
+  code: "si"
+}, {
+  name: 'Slovak',
+  fullname: "Slovak - slovenčina",
+  code: "sk"
+}, {
+  name: 'Slovenian',
+  fullname: "Slovenian - slovenščina",
+  code: "sl"
+}, {
+  name: 'Somali',
+  fullname: "Somali - Soomaali",
+  code: "so"
+}, {
+  name: 'Southern Sotho',
+  fullname: "Southern Sotho",
+  code: "st"
+}, {
+  name: 'Spanish',
+  fullname: "Spanish - español",
+  code: "es"
+}, {
+  name: 'Sundanese',
+  fullname: "Sundanese",
+  code: "su"
+}, {
+  name: 'Swahili',
+  fullname: "Swahili - Kiswahili",
+  code: "sw"
+}, {
+  name: 'Swedish',
+  fullname: "Swedish - svenska",
+  code: "sv"
+}, {
+  name: 'Tajik',
+  fullname: "Tajik - тоҷикӣ",
+  code: "tg"
+}, {
+  name: 'Tamil',
+  fullname: "Tamil - தமிழ்",
+  code: "ta"
+}, {
+  name: 'Tatar',
+  fullname: "Tatar",
+  code: "tt"
+}, {
+  name: 'Telugu',
+  fullname: "Telugu - తెలుగు",
+  code: "te"
+}, {
+  name: 'Thai',
+  fullname: "Thai - ไทย",
+  code: "th"
+}, {
+  name: 'Tigrinya',
+  fullname: "Tigrinya - ትግርኛ",
+  code: "ti"
+}, {
+  name: 'Tongan',
+  fullname: "Tongan - lea fakatonga",
+  code: "to"
+}, {
+  name: 'Turkish',
+  fullname: "Turkish - Türkçe",
+  code: "tr"
+}, {
+  name: 'Turkmen',
+  fullname: "Turkmen",
+  code: "tk"
+}, {
+  name: 'Twi',
+  fullname: "Twi",
+  code: "tw"
+}, {
+  name: 'Ukrainian',
+  fullname: "Ukrainian - українська",
+  code: "uk"
+}, {
+  name: 'Urdu',
+  fullname: "Urdu - اردو",
+  code: "ur"
+}, {
+  name: 'Uyghur',
+  fullname: "Uyghur",
+  code: "ug"
+}, {
+  name: 'Uzbek',
+  fullname: "Uzbek - o‘zbek",
+  code: "uz"
+}, {
+  name: 'Vietname',
+  fullname: "Vietname: '', fullnamese - Tiếng Việt",
+  code: "vi"
+}, {
+  name: 'Walloon',
+  fullname: "Walloon - wa",
+  code: "wa"
+}, {
+  name: 'Welsh',
+  fullname: "Welsh - Cymraeg",
+  code: "cy"
+}, {
+  name: 'Western Frisian',
+  fullname: "Western Frisian",
+  code: "fy"
+}, {
+  name: 'Xhosa',
+  fullname: "Xhosa",
+  code: "xh"
+}, {
+  name: 'Yiddish',
+  fullname: "Yiddish",
+  code: "yi"
+}, {
+  name: 'Yoruba',
+  fullname: "Yoruba - Èdè Yorùbá",
+  code: "yo"
+}, {
+  name: 'Zulu',
+  fullname: "Zulu - isiZulu",
+  code: "zu"
+}];
+var langOptions = languages_list.map(function (_ref) {
+  var name = _ref.name,
+    value = _ref.code;
+  return {
+    name: name,
+    value: value
+  };
+});
+export default {
+  component: Input,
+  title: 'Data Handle / Input',
+  args: {
+    type: 'select',
+    id: 'language_id',
+    label: 'Select a language',
+    options: langOptions,
+    multiple: true
+  }
+};
+export var SelectMultiple = function SelectMultiple(args) {
+  return /*#__PURE__*/React.createElement(Input, args);
+};
+SelectMultiple.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};

package/lib/shared/stories/components/Input/Textarea.stories.js

@@ -0,0 +1,24 @@
+import { Input } from "../../../components/Input";
+import "../../../../../styles/index.css";
+function mockFunction(value) {
+  // console.log(value);
+}
+export default {
+  component: Input,
+  title: 'Data Handle / Input',
+  args: {
+    type: 'email',
+    id: 'email',
+    label: 'Email',
+    placeholder: 'example@email.com'
+  }
+};
+export var Textarea = function Textarea(args) {
+  return /*#__PURE__*/React.createElement(Input, args);
+};
+Textarea.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};

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

@@ -0,0 +1,34 @@
+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 { List } from "../../components/List";
+import "../../../../styles/index.css";
+export default {
+  component: List,
+  title: 'Data Show / List'
+};
+var data = [[{
+  value: {
+    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',
+    title: 'Name'
+  },
+  type: 'extended'
+}, {
+  value: [{
+    title: 'Edit',
+    type: 'button'
+  }, {
+    title: 'Duplicate',
+    type: 'button'
+  }],
+  type: 'dropdown'
+}]];
+export var Default = function Default(args) {
+  return /*#__PURE__*/React.createElement(List, _extends({}, args, {
+    data: data
+  }));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=971%3A68'
+  }
+};

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

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

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Modal } from "../../components/Modal";
+// import { Button } from '../components/Button';
+
+import "../../../../styles/index.css";
+
+// const [isOpen, setOpen] = React.useState(true);
+
+// const closeModal = () => {
+//   setOpen(false);
+// };
+
+export default {
+  component: Modal,
+  title: 'Flash / Modal',
+  argsTypes: {
+    initialState: {
+      control: 'boolean'
+    }
+  },
+  args: {
+    // initialState: isOpen,
+    // children: <></>,
+    // closeModal: closeModal()
+  }
+};
+
+// title: {
+//   control: 'string'
+// },
+// text: {
+//   control: 'string'
+// }
+// title: 'Payment Successful',
+// text:
+//   'Your payment has been successfully submitted. We ve sent your an email with all of the details of your order.',
+// button: {
+//   text: 'Got it, thanks!',
+//   variant: 'primary'
+// }
+
+export var Default = function Default(args) {
+  return /*#__PURE__*/React.createElement("div", null);
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};

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

@@ -0,0 +1,22 @@
+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 { Notification } from "../../components/Notification";
+import "../../../../styles/index.css";
+export default {
+  component: Notification,
+  title: 'Flash / Notification'
+};
+export var Default = function Default(args) {
+  return /*#__PURE__*/React.createElement(Notification, _extends({}, args, {
+    initialState: true,
+    content: {
+      title: 'Email has sent successfully!',
+      status: 200
+    }
+  }));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=2%3A129'
+  }
+};

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

@@ -0,0 +1,41 @@
+import { Person } from "../../components/Person";
+import "../../../../styles/index.css";
+export default {
+  component: Person,
+  title: 'Compositions / Person',
+  argTypes: {
+    imageUrl: {
+      type: {
+        summary: 'string'
+      },
+      defaultValue: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80'
+    },
+    fullname: {
+      type: {
+        summary: 'string'
+      },
+      defaultValue: 'Julián Clatro'
+    },
+    details: {
+      type: {
+        summary: 'string'
+      },
+      defaultValue: 'Front end Dev'
+    },
+    variant: {
+      type: {
+        summary: 'string'
+      },
+      defaultValue: 'default'
+    }
+  }
+};
+export var Default = function Default(args) {
+  return /*#__PURE__*/React.createElement(Person, args);
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=971%3A68'
+  }
+};

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

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