From 9a5b313ea12bdb9dc3e3873ca3a2639bd7483e46 Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Mon, 28 Jan 2019 11:35:25 +0100
Subject: Update packages

---
 uidev/src/stories/badge.stories.tsx    |  21 +++
 uidev/src/stories/headline.stories.tsx |  54 ++++++
 uidev/src/stories/icon.stories.tsx     |  53 ++++++
 uidev/src/stories/infobox.stories.tsx  | 126 +++++++++++++
 uidev/src/stories/loader.stories.tsx   |  14 ++
 uidev/src/stories/select.stories.tsx   | 320 +++++++++++++++++++++++++++++++++
 6 files changed, 588 insertions(+)
 create mode 100644 uidev/src/stories/badge.stories.tsx
 create mode 100644 uidev/src/stories/headline.stories.tsx
 create mode 100644 uidev/src/stories/icon.stories.tsx
 create mode 100644 uidev/src/stories/infobox.stories.tsx
 create mode 100644 uidev/src/stories/loader.stories.tsx
 create mode 100644 uidev/src/stories/select.stories.tsx

(limited to 'uidev/src/stories')

diff --git a/uidev/src/stories/badge.stories.tsx b/uidev/src/stories/badge.stories.tsx
new file mode 100644
index 000000000..6de2034bf
--- /dev/null
+++ b/uidev/src/stories/badge.stories.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Badge } from '@meetfranz/ui';
+import { storiesOf } from '../stores/stories';
+
+storiesOf('Badge')
+  .add('Basic', () => (
+    <>
+      <Badge>New</Badge>
+    </>
+  ))
+  .add('Styles', () => (
+    <>
+      <Badge type="primary">Primary</Badge>
+      <Badge type="secondary">secondary</Badge>
+      <Badge type="success">success</Badge>
+      <Badge type="warning">warning</Badge>
+      <Badge type="danger">danger</Badge>
+      <Badge type="inverted">inverted</Badge>
+    </>
+  ));
diff --git a/uidev/src/stories/headline.stories.tsx b/uidev/src/stories/headline.stories.tsx
new file mode 100644
index 000000000..f42771cae
--- /dev/null
+++ b/uidev/src/stories/headline.stories.tsx
@@ -0,0 +1,54 @@
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import React from 'react';
+import uuid from 'uuid/v4';
+
+import { H1, H2, H3, H4 } from '@meetfranz/ui';
+import { storiesOf } from '../stores/stories';
+
+// interface IStoreArgs {
+//   value?: boolean;
+//   checked?: boolean;
+//   label?: string;
+//   id?: string;
+//   name?: string;
+//   disabled?: boolean;
+//   error?: string;
+// }
+
+// const createStore = (args?: IStoreArgs) => {
+//   return observable(Object.assign({
+//     id: `element-${uuid()}`,
+//     name: 'toggle',
+//     label: 'Label',
+//     value: true,
+//     checked: false,
+//     disabled: false,
+//     error: '',
+//   },                              args));
+// };
+
+// const WithStoreToggle = observer(({ store }: { store: any }) => (
+//   <>
+//     <Toggle
+//       value={store.value}
+//       checked={store.checked}
+//       label={store.label}
+//       id={store.id}
+//       name={store.name}
+//       disabled={store.disabled}
+//       error={store.error}
+//       onChange={() => store.checked = !store.checked}
+//     />
+//   </>
+// ));
+
+storiesOf('Typo')
+  .add('Headlines', () => (
+    <>
+      <H1>Welcome to the world of tomorrow</H1>
+      <H2>Welcome to the world of tomorrow</H2>
+      <H3>Welcome to the world of tomorrow</H3>
+      <H4>Welcome to the world of tomorrow</H4>
+    </>
+  ));
diff --git a/uidev/src/stories/icon.stories.tsx b/uidev/src/stories/icon.stories.tsx
new file mode 100644
index 000000000..c8e7f8ced
--- /dev/null
+++ b/uidev/src/stories/icon.stories.tsx
@@ -0,0 +1,53 @@
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import React from 'react';
+import uuid from 'uuid/v4';
+
+import { Icon } from '@meetfranz/ui';
+import { storiesOf } from '../stores/stories';
+
+// interface IStoreArgs {
+//   value?: boolean;
+//   checked?: boolean;
+//   label?: string;
+//   id?: string;
+//   name?: string;
+//   disabled?: boolean;
+//   error?: string;
+// }
+
+// const createStore = (args?: IStoreArgs) => {
+//   return observable(Object.assign({
+//     id: `element-${uuid()}`,
+//     name: 'toggle',
+//     label: 'Label',
+//     value: true,
+//     checked: false,
+//     disabled: false,
+//     error: '',
+//   },                              args));
+// };
+
+// const WithStoreToggle = observer(({ store }: { store: any }) => (
+//   <>
+//     <Toggle
+//       value={store.value}
+//       checked={store.checked}
+//       label={store.label}
+//       id={store.id}
+//       name={store.name}
+//       disabled={store.disabled}
+//       error={store.error}
+//       onChange={() => store.checked = !store.checked}
+//     />
+//   </>
+// ));
+
+storiesOf('Icon')
+  .add('Basic', () => (
+    <>
+      <Icon icon="mdiAccountCircle" />
+      <Icon icon="mdiAccountCircle" size={2} />
+      <Icon icon="mdiAccountCircle" size={3} />
+    </>
+  ));
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx
new file mode 100644
index 000000000..2a5e8b0d5
--- /dev/null
+++ b/uidev/src/stories/infobox.stories.tsx
@@ -0,0 +1,126 @@
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import React from 'react';
+
+import { Infobox } from '@meetfranz/ui';
+import { storiesOf } from '../stores/stories';
+
+interface IStoreArgs {
+  icon?: string;
+  ctaLabel?: string;
+  type?: string;
+  dismissable?: boolean;
+}
+
+const createStore = (args?: IStoreArgs) => {
+  return observable(Object.assign({
+    type: 'primary',
+    ctaOnClick: () => {
+      alert('on click handler');
+    },
+  },                              args));
+};
+
+const WithStoreInfobox = observer(({ store, children }: { store: any, children: string | React.ReactNode }) => (
+  <>
+    <Infobox
+      icon={store.icon}
+      ctaLabel={store.ctaLabel}
+      type={store.type}
+      ctaOnClick={store.ctaOnClick}
+      dismissable={store.dismissable}
+    >
+      {children}
+    </Infobox>
+  </>
+));
+
+storiesOf('Infobox')
+  .add('Basic', () => (
+    <WithStoreInfobox store={createStore()}>Welcome to the world of tomorrow</WithStoreInfobox>
+  ))
+  .add('Icon + Dismissable', () => (
+    <WithStoreInfobox
+      store={createStore({
+        icon: 'mdiEarth',
+        dismissable: true,
+      })}
+    >
+      Welcome to the world of tomorrow
+    </WithStoreInfobox>
+  ))
+  .add('With CTA', () => (
+    <WithStoreInfobox
+      store={createStore({
+        icon: 'mdiEarth',
+        ctaLabel: 'Ok, hi!',
+      })}
+    >
+      Welcome to the world of tomorrow
+    </WithStoreInfobox>
+  ))
+  .add('With long text', () => (
+    <WithStoreInfobox
+      store={createStore({
+        icon: 'mdiEarth',
+        ctaLabel: 'Ok, hi!',
+      })}
+    >
+      Franz is your messaging app / former Emperor of Austria and combines chat & messaging services into one application. Franz currently supports Slack, WhatsApp, WeChat, HipChat, Facebook Messenger, Telegram, Google Hangouts,GroupMe, Skype and many more.
+    </WithStoreInfobox>
+  ))
+  .add('Secondary', () => (
+    <WithStoreInfobox
+      store={createStore({
+        icon: 'mdiEarth',
+        ctaLabel: 'Ok, hi!',
+        type: 'secondary',
+      })}
+    >
+      Welcome to the world of tomorrow
+    </WithStoreInfobox>
+  ))
+  .add('Success', () => (
+    <WithStoreInfobox
+      store={createStore({
+        icon: 'mdiEarth',
+        ctaLabel: 'Ok, hi!',
+        type: 'success',
+      })}
+    >
+      Welcome to the world of tomorrow
+    </WithStoreInfobox>
+  ))
+  .add('Warning', () => (
+    <WithStoreInfobox
+      store={createStore({
+        icon: 'mdiEarth',
+        ctaLabel: 'Ok, hi!',
+        type: 'warning',
+      })}
+    >
+      Welcome to the world of tomorrow
+    </WithStoreInfobox>
+  ))
+  .add('Danger', () => (
+    <WithStoreInfobox
+      store={createStore({
+        icon: 'mdiEarth',
+        ctaLabel: 'Ok, hi!',
+        type: 'danger',
+      })}
+    >
+      Welcome to the world of tomorrow
+    </WithStoreInfobox>
+  ))
+  .add('Inverted', () => (
+    <WithStoreInfobox
+      store={createStore({
+        icon: 'mdiEarth',
+        ctaLabel: 'Ok, hi!',
+        type: 'inverted',
+      })}
+    >
+      Welcome to the world of tomorrow
+    </WithStoreInfobox>
+  ));
diff --git a/uidev/src/stories/loader.stories.tsx b/uidev/src/stories/loader.stories.tsx
new file mode 100644
index 000000000..84e813c04
--- /dev/null
+++ b/uidev/src/stories/loader.stories.tsx
@@ -0,0 +1,14 @@
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import React from 'react';
+import uuid from 'uuid/v4';
+
+import { Loader } from '@meetfranz/ui';
+import { storiesOf } from '../stores/stories';
+
+storiesOf('Loader')
+  .add('Basic', () => (
+    <>
+      <Loader />
+    </>
+  ));
diff --git a/uidev/src/stories/select.stories.tsx b/uidev/src/stories/select.stories.tsx
new file mode 100644
index 000000000..81f7f08a6
--- /dev/null
+++ b/uidev/src/stories/select.stories.tsx
@@ -0,0 +1,320 @@
+import React from 'react';
+import uuid from 'uuid/v4';
+
+import { Select } from '@meetfranz/forms';
+import { storiesOf } from '../stores/stories';
+
+const defaultProps = () => {
+  const id = uuid();
+  return {
+    label: 'Label',
+    id: `test-${id}`,
+    name: `test-${id}`,
+    options: {
+      AF: 'Afghanistan',
+      AL: 'Albania',
+      DZ: 'Algeria',
+      AS: 'American Samoa',
+      AD: 'Andorra',
+      AO: 'Angola',
+      AI: 'Anguilla',
+      AQ: 'Antarctica',
+      AG: 'Antigua and Barbuda',
+      AR: 'Argentina',
+      AM: 'Armenia',
+      AW: 'Aruba',
+      AC: 'Ascension Island',
+      AU: 'Australia',
+      AT: 'Austria',
+      AZ: 'Azerbaijan',
+      BS: 'Bahamas',
+      BH: 'Bahrain',
+      BD: 'Bangladesh',
+      BB: 'Barbados',
+      BY: 'Belarus',
+      BE: 'Belgium',
+      BZ: 'Belize',
+      BJ: 'Benin',
+      BM: 'Bermuda',
+      BT: 'Bhutan',
+      BO: 'Bolivia',
+      BA: 'Bosnia and Herzegovina',
+      BW: 'Botswana',
+      BV: 'Bouvet Island',
+      BR: 'Brazil',
+      BQ: 'British Antarctic Territory',
+      IO: 'British Indian Ocean Territory',
+      VG: 'British Virgin Islands',
+      BN: 'Brunei',
+      BG: 'Bulgaria',
+      BF: 'Burkina Faso',
+      BI: 'Burundi',
+      KH: 'Cambodia',
+      CM: 'Cameroon',
+      CA: 'Canada',
+      IC: 'Canary Islands',
+      CT: 'Canton and Enderbury Islands',
+      CV: 'Cape Verde',
+      KY: 'Cayman Islands',
+      CF: 'Central African Republic',
+      EA: 'Ceuta and Melilla',
+      TD: 'Chad',
+      CL: 'Chile',
+      CN: 'China',
+      CX: 'Christmas Island',
+      CP: 'Clipperton Island',
+      CC: 'Cocos [Keeling] Islands',
+      CO: 'Colombia',
+      KM: 'Comoros',
+      CD: 'Congo - Kinshasa',
+      CG: 'Congo [Republic]',
+      CK: 'Cook Islands',
+      CR: 'Costa Rica',
+      HR: 'Croatia',
+      CU: 'Cuba',
+      CY: 'Cyprus',
+      CZ: 'Czech Republic',
+      CI: 'Côte d’Ivoire',
+      DK: 'Denmark',
+      DG: 'Diego Garcia',
+      DJ: 'Djibouti',
+      DM: 'Dominica',
+      DO: 'Dominican Republic',
+      NQ: 'Dronning Maud Land',
+      TL: 'East Timor',
+      EC: 'Ecuador',
+      EG: 'Egypt',
+      SV: 'El Salvador',
+      GQ: 'Equatorial Guinea',
+      ER: 'Eritrea',
+      EE: 'Estonia',
+      ET: 'Ethiopia',
+      FK: 'Falkland Islands',
+      FO: 'Faroe Islands',
+      FJ: 'Fiji',
+      FI: 'Finland',
+      FR: 'France',
+      GF: 'French Guiana',
+      PF: 'French Polynesia',
+      TF: 'French Southern Territories',
+      FQ: 'French Southern and Antarctic Territories',
+      GA: 'Gabon',
+      GM: 'Gambia',
+      GE: 'Georgia',
+      DE: 'Germany',
+      GH: 'Ghana',
+      GI: 'Gibraltar',
+      GR: 'Greece',
+      GL: 'Greenland',
+      GD: 'Grenada',
+      GP: 'Guadeloupe',
+      GU: 'Guam',
+      GT: 'Guatemala',
+      GG: 'Guernsey',
+      GN: 'Guinea',
+      GW: 'Guinea-Bissau',
+      GY: 'Guyana',
+      HT: 'Haiti',
+      HM: 'Heard Island and McDonald Islands',
+      HN: 'Honduras',
+      HK: 'Hong Kong',
+      HU: 'Hungary',
+      IS: 'Iceland',
+      IN: 'India',
+      ID: 'Indonesia',
+      IR: 'Iran',
+      IQ: 'Iraq',
+      IE: 'Ireland',
+      IM: 'Isle of Man',
+      IL: 'Israel',
+      IT: 'Italy',
+      JM: 'Jamaica',
+      JP: 'Japan',
+      JE: 'Jersey',
+      JT: 'Johnston Island',
+      JO: 'Jordan',
+      KZ: 'Kazakhstan',
+      KE: 'Kenya',
+      KI: 'Kiribati',
+      XK: 'Kosovo',
+      KW: 'Kuwait',
+      KG: 'Kyrgyzstan',
+      LA: 'Laos',
+      LV: 'Latvia',
+      LB: 'Lebanon',
+      LS: 'Lesotho',
+      LR: 'Liberia',
+      LY: 'Libya',
+      LI: 'Liechtenstein',
+      LT: 'Lithuania',
+      LU: 'Luxembourg',
+      MO: 'Macau',
+      MK: 'Macedonia',
+      MG: 'Madagascar',
+      MW: 'Malawi',
+      MY: 'Malaysia',
+      MV: 'Maldives',
+      ML: 'Mali',
+      MT: 'Malta',
+      MH: 'Marshall Islands',
+      MQ: 'Martinique',
+      MR: 'Mauritania',
+      MU: 'Mauritius',
+      YT: 'Mayotte',
+      FX: 'Metropolitan France',
+      MX: 'Mexico',
+      FM: 'Micronesia',
+      MI: 'Midway Islands',
+      MD: 'Moldova',
+      MC: 'Monaco',
+      MN: 'Mongolia',
+      ME: 'Montenegro',
+      MS: 'Montserrat',
+      MA: 'Morocco',
+      MZ: 'Mozambique',
+      MM: 'Myanmar [Burma]',
+      NA: 'Namibia',
+      NR: 'Nauru',
+      NP: 'Nepal',
+      NL: 'Netherlands',
+      AN: 'Netherlands Antilles',
+      NC: 'New Caledonia',
+      NZ: 'New Zealand',
+      NI: 'Nicaragua',
+      NE: 'Niger',
+      NG: 'Nigeria',
+      NU: 'Niue',
+      NF: 'Norfolk Island',
+      KP: 'North Korea',
+      VD: 'North Vietnam',
+      MP: 'Northern Mariana Islands',
+      NO: 'Norway',
+      OM: 'Oman',
+      QO: 'Outlying Oceania',
+      PC: 'Pacific Islands Trust Territory',
+      PK: 'Pakistan',
+      PW: 'Palau',
+      PS: 'Palestinian Territories',
+      PA: 'Panama',
+      PZ: 'Panama Canal Zone',
+      PG: 'Papua New Guinea',
+      PY: 'Paraguay',
+      YD: 'Peoples Democratic Republic of Yemen',
+      PE: 'Peru',
+      PH: 'Philippines',
+      PN: 'Pitcairn Islands',
+      PL: 'Poland',
+      PT: 'Portugal',
+      PR: 'Puerto Rico',
+      QA: 'Qatar',
+      RO: 'Romania',
+      RU: 'Russia',
+      RW: 'Rwanda',
+      RE: 'Réunion',
+      BL: 'Saint Barthélemy',
+      SH: 'Saint Helena',
+      KN: 'Saint Kitts and Nevis',
+      LC: 'Saint Lucia',
+      MF: 'Saint Martin',
+      PM: 'Saint Pierre and Miquelon',
+      VC: 'Saint Vincent and the Grenadines',
+      WS: 'Samoa',
+      SM: 'San Marino',
+      SA: 'Saudi Arabia',
+      SN: 'Senegal',
+      RS: 'Serbia',
+      CS: 'Serbia and Montenegro',
+      SC: 'Seychelles',
+      SL: 'Sierra Leone',
+      SG: 'Singapore',
+      SK: 'Slovakia',
+      SI: 'Slovenia',
+      SB: 'Solomon Islands',
+      SO: 'Somalia',
+      ZA: 'South Africa',
+      GS: 'South Georgia and the South Sandwich Islands',
+      KR: 'South Korea',
+      ES: 'Spain',
+      LK: 'Sri Lanka',
+      SD: 'Sudan',
+      SR: 'Suriname',
+      SJ: 'Svalbard and Jan Mayen',
+      SZ: 'Swaziland',
+      SE: 'Sweden',
+      CH: 'Switzerland',
+      SY: 'Syria',
+      ST: 'São Tomé and Príncipe',
+      TW: 'Taiwan',
+      TJ: 'Tajikistan',
+      TZ: 'Tanzania',
+      TH: 'Thailand',
+      TG: 'Togo',
+      TK: 'Tokelau',
+      TO: 'Tonga',
+      TT: 'Trinidad and Tobago',
+      TA: 'Tristan da Cunha',
+      TN: 'Tunisia',
+      TR: 'Turkey',
+      TM: 'Turkmenistan',
+      TC: 'Turks and Caicos Islands',
+      TV: 'Tuvalu',
+      UM: 'U.S. Minor Outlying Islands',
+      PU: 'U.S. Miscellaneous Pacific Islands',
+      VI: 'U.S. Virgin Islands',
+      UG: 'Uganda',
+      UA: 'Ukraine',
+      AE: 'United Arab Emirates',
+      GB: 'United Kingdom',
+      US: 'United States',
+      UY: 'Uruguay',
+      UZ: 'Uzbekistan',
+      VU: 'Vanuatu',
+      VA: 'Vatican City',
+      VE: 'Venezuela',
+      VN: 'Vietnam',
+      WK: 'Wake Island',
+      WF: 'Wallis and Futuna',
+      EH: 'Western Sahara',
+      YE: 'Yemen',
+      ZM: 'Zambia',
+      ZW: 'Zimbabwe',
+      AX: 'Åland Islands',
+    },
+    actionText: 'Select country',
+    // defaultValue: 'AT',
+    onChange: (e: React.ChangeEvent<HTMLInputElement>)  => console.log('changed event', e),
+  };
+};
+
+storiesOf('Select')
+  .add('Basic', () => (
+    <Select
+      {...defaultProps()}
+    />
+  ))
+  .add('With preselection', () => (
+    <Select
+      {...defaultProps()}
+      defaultValue="AT"
+    />
+  ))
+  .add('With search', () => (
+    <Select
+      {...defaultProps()}
+      showSearch
+    />
+  ))
+  .add('Disabled', () => (
+    <Select
+      {...defaultProps()}
+      showSearch
+      disabled
+    />
+  ))
+  .add('With error', () => (
+    <Select
+      {...defaultProps()}
+      showSearch
+      error="Your selection was a bit too funky for my taste"
+    />
+  ));
-- 
cgit v1.2.3-54-g00ecf