Add deploy storybook to ci

.github/workflows/storybook.yml

@@ -0,0 +1,25 @@
+name: Build and Deploy storybook
+on:
+  push:
+    branches:
+      - master
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Build
+        run: |
+          npm i
+          npm run build-storybook
+
+      - name: Deploy to GitHub Pages
+        uses: Cecilapp/GitHub-Pages-deploy@v3
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          build_dir: storybook-static
+          branch: gh-pages

.gitignore

@@ -1,3 +1,4 @@
 .idea
 lib
 node_modules
+storybook-static

README.md

@@ -1,13 +1,14 @@
 # useDropdown
 
-[Example](https://codesandbox.io/s/usedropdown-example1-88kql)
+[Example](https://redmadrobot.github.io/use-dropdown)
 
 **useDropdown** is a hook that helps you build a custom
 select element. It also takes away the pain
 of positioning of a dropdown element and repositioning it
 on scroll.
 
 ## Usage
+
 ```typescript jsx
 const {
   isOpen,
@@ -23,61 +24,62 @@ const {
   reducer,
   autoScroll,
   direction,
-})
+});
 ```
 
 ### Arguments
+
 `useDropdown` accepts following arguments:
 
-* **items** - `Array<T>`
-Menu elements of your dropdown. It is expected that they will
-be the same type you passed to `useDropdown` generic
+- **items** - `Array<T>`
+  Menu elements of your dropdown. It is expected that they will
+  be the same type you passed to `useDropdown` generic
 
-* **onSelect** - `(item: T) => void`
-Function which is called each time you click on element or
-select it with Enter key
+- **onSelect** - `(item: T) => void`
+  Function which is called each time you click on element or
+  select it with Enter key
 
-* **reducer**
-Using this function you can change how `useDropdown` reacts
-to certain events; For example, you can prevent dropdown
-from closing after user selects an option
+- **reducer**
+  Using this function you can change how `useDropdown` reacts
+  to certain events; For example, you can prevent dropdown
+  from closing after user selects an option
 
-* **autoScroll** - `boolean`
-Use it when dropdown is inside scrolling container.
+- **autoScroll** - `boolean`
+  Use it when dropdown is inside scrolling container.
 
-* **direction** - `Direction`
-Direction in which dropdown should be opened.
+- **direction** - `Direction`
+  Direction in which dropdown should be opened.
 
- ### State and methods
+### State and methods
 
- `useDropdown` returns it's state and provides methods that
- you should use to build your dropdown:
+`useDropdown` returns it's state and provides methods that
+you should use to build your dropdown:
 
- * **isOpen** - `boolean`
-Current state of dropdown. Use it to decide whether you should
-show menu or not
+- **isOpen** - `boolean`
+  Current state of dropdown. Use it to decide whether you should
+  show menu or not
 
-* **highlightedIndex** - `number`
-Shows the index of an element that is currently highlighted by
-cursor or with arrow keys. Use it to apply styles.
+- **highlightedIndex** - `number`
+  Shows the index of an element that is currently highlighted by
+  cursor or with arrow keys. Use it to apply styles.
 
-* **inputValue** - `string`
-Current value of input.
+- **inputValue** - `string`
+  Current value of input.
 
-* **getWrapperProps** - `(): WrapperProps` - _required_
-Apply these props to block that represents your dropdown element.
-This block will be used to calculate the width of dropdown along
-with it's position on the screen.
+- **getWrapperProps** - `(): WrapperProps` - _required_
+  Apply these props to block that represents your dropdown element.
+  This block will be used to calculate the width of dropdown along
+  with it's position on the screen.
 
-* **getInputProps** - `(): InputProps` - _optional_
-You can use it on your input. This method will help `useDropdown`
-to track input's value and it also allows menu to be opened each time
-input recieves focus.
+- **getInputProps** - `(): InputProps` - _optional_
+  You can use it on your input. This method will help `useDropdown`
+  to track input's value and it also allows menu to be opened each time
+  input recieves focus.
 
-* **getMenuProps** - `(): MenuProps` - _required_
-Returns props for block element that wraps your menu items. It is
-necessary for correct positioning of you dropdown.
+- **getMenuProps** - `(): MenuProps` - _required_
+  Returns props for block element that wraps your menu items. It is
+  necessary for correct positioning of you dropdown.
 
-* **getItemProps** - `(item: T, index: number) => ItemProps` - _required_
-Method for getting props for every item in your items list. Pass
-item and it's index to this method.
+- **getItemProps** - `(item: T, index: number) => ItemProps` - _required_
+  Method for getting props for every item in your items list. Pass
+  item and it's index to this method.