willba-component-library 0.2.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
|
-
##
|
|
1
|
+
## Description
|
|
2
2
|
|
|
3
|
-
Willba
|
|
3
|
+
Willba Component Library is a custom UI component collection that can be utilized across multiple platforms. It is available as an <a href="https://www.npmjs.com/package/willba-component-library">npm package</a>, or can be used directly through scripts.
|
|
4
|
+
|
|
5
|
+
<div style="display: flex; gap: 20px;">
|
|
6
|
+
<img src="./public/images/filter-bar-calendar.jpg" alt="Filter Bar Calendar" style="width: auto; max-width: 50%;">
|
|
7
|
+
<img src="./public/images/filter-bar-guests.jpg" alt="Filter Bar Guests" style="width: auto; max-width: 50%;">
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
## React usage
|
|
11
|
+
|
|
12
|
+
Install the package:
|
|
4
13
|
|
|
5
14
|
```sh
|
|
6
15
|
// with npm
|
|
@@ -10,7 +19,7 @@ npm install willba-component-library
|
|
|
10
19
|
yarn add willba-component-library
|
|
11
20
|
```
|
|
12
21
|
|
|
13
|
-
|
|
22
|
+
### Import and use the package:
|
|
14
23
|
|
|
15
24
|
```jsx
|
|
16
25
|
import React from 'react'
|
|
@@ -18,23 +27,65 @@ import ReactDOM from 'react-dom'
|
|
|
18
27
|
import { FilterBar } from 'willba-component-library'
|
|
19
28
|
|
|
20
29
|
function App() {
|
|
21
|
-
return
|
|
30
|
+
return (
|
|
31
|
+
<FilterBar
|
|
32
|
+
redirectUrl={'https://store.vendor.willba.app/'}
|
|
33
|
+
language={'en'}
|
|
34
|
+
calendarOffset={{
|
|
35
|
+
rooms: 7,
|
|
36
|
+
events: -1,
|
|
37
|
+
}}
|
|
38
|
+
mode={'dark'}
|
|
39
|
+
ageCategories={[
|
|
40
|
+
{
|
|
41
|
+
id: '2',
|
|
42
|
+
name: 'Alle 6 vuotiaat',
|
|
43
|
+
minVal: 0,
|
|
44
|
+
sortOrder: 3,
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
id: '3',
|
|
48
|
+
name: '6-16 vuotiaat',
|
|
49
|
+
minVal: 0,
|
|
50
|
+
sortOrder: 2,
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
id: '1',
|
|
54
|
+
name: 'Aikuiset',
|
|
55
|
+
minVal: 1,
|
|
56
|
+
sortOrder: 1,
|
|
57
|
+
},
|
|
58
|
+
]}
|
|
59
|
+
tabs={[
|
|
60
|
+
{
|
|
61
|
+
path: '/rooms',
|
|
62
|
+
default: true,
|
|
63
|
+
order: 2,
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
path: '/events',
|
|
67
|
+
default: false,
|
|
68
|
+
order: 1,
|
|
69
|
+
},
|
|
70
|
+
]}
|
|
71
|
+
/>
|
|
72
|
+
)
|
|
22
73
|
}
|
|
23
74
|
|
|
24
75
|
ReactDOM.render(<App />, document.querySelector('#app'))
|
|
25
76
|
```
|
|
26
77
|
|
|
27
|
-
|
|
78
|
+
## Script usage
|
|
28
79
|
|
|
29
80
|
```html
|
|
30
81
|
<div
|
|
31
82
|
id="will-filter-bar"
|
|
32
|
-
style="
|
|
83
|
+
style="display: flex; justify-content: center; margin-bottom: 50px"
|
|
33
84
|
></div>
|
|
34
85
|
|
|
35
86
|
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
36
87
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
37
|
-
<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.
|
|
88
|
+
<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.2.2/lib/index.umd.js"></script>
|
|
38
89
|
|
|
39
90
|
<script>
|
|
40
91
|
const filterBarElement = React.createElement
|
|
@@ -44,8 +95,12 @@ or you can add the willba-component-library using scripts:
|
|
|
44
95
|
|
|
45
96
|
root.render(
|
|
46
97
|
filterBarElement(WillFilterBar, {
|
|
47
|
-
redirectUrl: 'https://
|
|
98
|
+
redirectUrl: 'https://store.vendor.willba.app/',
|
|
48
99
|
language: 'en',
|
|
100
|
+
palette: {
|
|
101
|
+
primary: '#2a5a44',
|
|
102
|
+
secondary: '#2a5a44',
|
|
103
|
+
},
|
|
49
104
|
calendarOffset: {
|
|
50
105
|
rooms: 7,
|
|
51
106
|
events: -1,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "willba-component-library",
|
|
3
|
-
"version": "0.2.
|
|
4
|
-
"description": "A
|
|
3
|
+
"version": "0.2.3",
|
|
4
|
+
"description": "A custom UI component library",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib/index.esm.js",
|
|
7
7
|
"types": "lib/index.d.ts",
|
|
Binary file
|
|
Binary file
|