Skip to content

Commit 37243cc

Browse files
committed
Add deploy storybook to ci
1 parent 40c1943 commit 37243cc

File tree

6 files changed

+465
-55
lines changed

6 files changed

+465
-55
lines changed

.github/workflows/storybook.yml

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
name: Build and Deploy storybook
2+
on:
3+
push:
4+
branches:
5+
- master
6+
jobs:
7+
build-and-deploy:
8+
runs-on: ubuntu-latest
9+
10+
steps:
11+
- name: Checkout
12+
uses: actions/checkout@v2
13+
14+
- name: Build
15+
run: |
16+
npm i
17+
npm run build-storybook
18+
19+
- name: Deploy to GitHub Pages
20+
uses: Cecilapp/GitHub-Pages-deploy@v3
21+
env:
22+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
23+
with:
24+
build_dir: storybook-static
25+
branch: gh-pages

.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.idea
22
lib
33
node_modules
4+
storybook-static

README.md

+43-41
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
# useDropdown
22

3-
[Example](https://codesandbox.io/s/usedropdown-example1-88kql)
3+
[Example](https://redmadrobot.github.io/use-dropdown)
44

55
**useDropdown** is a hook that helps you build a custom
66
select element. It also takes away the pain
77
of positioning of a dropdown element and repositioning it
88
on scroll.
99

1010
## Usage
11+
1112
```typescript jsx
1213
const {
1314
isOpen,
@@ -23,61 +24,62 @@ const {
2324
reducer,
2425
autoScroll,
2526
direction,
26-
})
27+
});
2728
```
2829

2930
### Arguments
31+
3032
`useDropdown` accepts following arguments:
3133

32-
* **items** - `Array<T>`
33-
Menu elements of your dropdown. It is expected that they will
34-
be the same type you passed to `useDropdown` generic
34+
- **items** - `Array<T>`
35+
Menu elements of your dropdown. It is expected that they will
36+
be the same type you passed to `useDropdown` generic
3537

36-
* **onSelect** - `(item: T) => void`
37-
Function which is called each time you click on element or
38-
select it with Enter key
38+
- **onSelect** - `(item: T) => void`
39+
Function which is called each time you click on element or
40+
select it with Enter key
3941

40-
* **reducer**
41-
Using this function you can change how `useDropdown` reacts
42-
to certain events; For example, you can prevent dropdown
43-
from closing after user selects an option
42+
- **reducer**
43+
Using this function you can change how `useDropdown` reacts
44+
to certain events; For example, you can prevent dropdown
45+
from closing after user selects an option
4446

45-
* **autoScroll** - `boolean`
46-
Use it when dropdown is inside scrolling container.
47+
- **autoScroll** - `boolean`
48+
Use it when dropdown is inside scrolling container.
4749

48-
* **direction** - `Direction`
49-
Direction in which dropdown should be opened.
50+
- **direction** - `Direction`
51+
Direction in which dropdown should be opened.
5052

51-
### State and methods
53+
### State and methods
5254

53-
`useDropdown` returns it's state and provides methods that
54-
you should use to build your dropdown:
55+
`useDropdown` returns it's state and provides methods that
56+
you should use to build your dropdown:
5557

56-
* **isOpen** - `boolean`
57-
Current state of dropdown. Use it to decide whether you should
58-
show menu or not
58+
- **isOpen** - `boolean`
59+
Current state of dropdown. Use it to decide whether you should
60+
show menu or not
5961

60-
* **highlightedIndex** - `number`
61-
Shows the index of an element that is currently highlighted by
62-
cursor or with arrow keys. Use it to apply styles.
62+
- **highlightedIndex** - `number`
63+
Shows the index of an element that is currently highlighted by
64+
cursor or with arrow keys. Use it to apply styles.
6365

64-
* **inputValue** - `string`
65-
Current value of input.
66+
- **inputValue** - `string`
67+
Current value of input.
6668

67-
* **getWrapperProps** - `(): WrapperProps` - _required_
68-
Apply these props to block that represents your dropdown element.
69-
This block will be used to calculate the width of dropdown along
70-
with it's position on the screen.
69+
- **getWrapperProps** - `(): WrapperProps` - _required_
70+
Apply these props to block that represents your dropdown element.
71+
This block will be used to calculate the width of dropdown along
72+
with it's position on the screen.
7173

72-
* **getInputProps** - `(): InputProps` - _optional_
73-
You can use it on your input. This method will help `useDropdown`
74-
to track input's value and it also allows menu to be opened each time
75-
input recieves focus.
74+
- **getInputProps** - `(): InputProps` - _optional_
75+
You can use it on your input. This method will help `useDropdown`
76+
to track input's value and it also allows menu to be opened each time
77+
input recieves focus.
7678

77-
* **getMenuProps** - `(): MenuProps` - _required_
78-
Returns props for block element that wraps your menu items. It is
79-
necessary for correct positioning of you dropdown.
79+
- **getMenuProps** - `(): MenuProps` - _required_
80+
Returns props for block element that wraps your menu items. It is
81+
necessary for correct positioning of you dropdown.
8082

81-
* **getItemProps** - `(item: T, index: number) => ItemProps` - _required_
82-
Method for getting props for every item in your items list. Pass
83-
item and it's index to this method.
83+
- **getItemProps** - `(item: T, index: number) => ItemProps` - _required_
84+
Method for getting props for every item in your items list. Pass
85+
item and it's index to this method.

0 commit comments

Comments
 (0)