polaris_view_components 0.1.2 → 0.3.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +34 -3
- data/app/assets/javascripts/{polaris.js → polaris_view_components.js} +27 -33
- data/app/assets/stylesheets/polaris@6.6.0.css +4104 -0
- data/app/assets/stylesheets/polaris_view_components.css +3 -136
- data/app/assets/stylesheets/shopify_navigation.css +136 -0
- data/app/components/polaris/button_component.html.erb +1 -1
- data/app/components/polaris/button_component.rb +1 -85
- data/app/components/polaris/dropzone/controller.js +1 -1
- data/app/components/polaris/headless_button.html.erb +22 -0
- data/app/components/polaris/headless_button.rb +95 -0
- data/app/components/polaris/resource_item_component.html.erb +6 -5
- data/app/components/polaris/resource_item_component.rb +45 -12
- data/app/components/polaris/select_component.html.erb +11 -2
- data/app/components/polaris/select_component.rb +2 -0
- data/app/components/polaris/skeleton_body_text_component.html.erb +5 -0
- data/app/components/polaris/skeleton_body_text_component.rb +15 -0
- data/app/components/polaris/tag_component.html.erb +6 -0
- data/app/components/polaris/tag_component.rb +35 -0
- data/app/helpers/polaris/form_builder.rb +4 -0
- data/app/helpers/polaris/url_helper.rb +19 -0
- data/app/helpers/polaris/view_helper.rb +2 -0
- data/app/javascript/{polaris → polaris_view_components}/index.js +3 -1
- data/app/javascript/polaris_view_components/resource_item_controller.js +15 -0
- data/app/javascript/{polaris → polaris_view_components}/select_controller.js +1 -1
- data/app/javascript/{polaris → polaris_view_components}/text_field_controller.js +1 -2
- data/lib/generators/polaris_view_components/USAGE +5 -0
- data/lib/generators/polaris_view_components/install_generator.rb +35 -0
- data/lib/generators/polaris_view_components/templates/README +14 -0
- data/lib/generators/polaris_view_components/templates/stimulus_index.js +6 -0
- data/lib/polaris/view_components/engine.rb +4 -1
- data/lib/polaris/view_components/version.rb +1 -1
- metadata +22 -8
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a5ea3551cd4f15d29b3618b2cc565059b91f9415c2b3e2ff47573c9d8eebc588
|
|
4
|
+
data.tar.gz: bd815ab2b3bd738e7541686b8047cf159638e2aec83ab02d4dd7e803ff455d13
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 161b1fc626ca532956a4cd600dfcfd24d02e4c833e2622f7467fd0f3e526de317c321270c785b513cca0740c2660ed699e3893e9748c06a172330ef00d0ca35d
|
|
7
|
+
data.tar.gz: e93f7fa5dff2007c34163999e6630ebb77107dc13f1ded4032c09df947b6664c3a61befa7f06e20dc85099060c86ad3bb3a0d5970acd599305ce85789a53b7b7
|
data/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Polaris ViewComponents is an implementation of the Polaris Design System using [ViewComponent](https://github.com/github/view_component).
|
|
4
4
|
|
|
5
|
+
|
|
6
|
+
|
|
5
7
|
> **This library is under active development. Breaking changes are likely until stable release.**
|
|
6
8
|
|
|
7
9
|
## Preview
|
|
@@ -26,13 +28,41 @@ In `Gemfile`, add:
|
|
|
26
28
|
gem 'polaris_view_components'
|
|
27
29
|
```
|
|
28
30
|
|
|
31
|
+
Run install generator:
|
|
32
|
+
```bash
|
|
33
|
+
rails generate polaris_view_components:install
|
|
34
|
+
```
|
|
35
|
+
|
|
29
36
|
Setup Polaris styles in your layouts `<head>` tag:
|
|
30
37
|
|
|
31
38
|
```erb
|
|
32
|
-
<link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@6.6.0/dist/styles.css" />
|
|
33
39
|
<%= stylesheet_link_tag 'polaris_view_components' %>
|
|
34
40
|
```
|
|
35
41
|
|
|
42
|
+
Define Polaris style on your `<body>` tag:
|
|
43
|
+
|
|
44
|
+
```erb
|
|
45
|
+
<body style="<%= polaris_body_styles %>">
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Importmaps
|
|
49
|
+
|
|
50
|
+
Add to `config/importmap.rb`:
|
|
51
|
+
|
|
52
|
+
```rb
|
|
53
|
+
pin "polaris-view-components", to: "polaris_view_components.js"
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
Add to `app/javascript/controllers/index.js`:
|
|
57
|
+
```javascript
|
|
58
|
+
// ...
|
|
59
|
+
|
|
60
|
+
import { registerPolarisControllers } from "polaris-view-components"
|
|
61
|
+
registerPolarisControllers(Stimulus)
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### NPM
|
|
65
|
+
|
|
36
66
|
Install NPM package:
|
|
37
67
|
```bash
|
|
38
68
|
yarn add polaris-view-components
|
|
@@ -40,9 +70,10 @@ yarn add polaris-view-components
|
|
|
40
70
|
|
|
41
71
|
Add to `app/javascript/controllers/index.js`:
|
|
42
72
|
```javascript
|
|
43
|
-
//
|
|
73
|
+
// ...
|
|
74
|
+
|
|
44
75
|
import { registerPolarisControllers } from "polaris-view-components"
|
|
45
|
-
registerPolarisControllers(
|
|
76
|
+
registerPolarisControllers(Stimulus)
|
|
46
77
|
```
|
|
47
78
|
|
|
48
79
|
## Dependencies
|
|
@@ -1,20 +1,19 @@
|
|
|
1
|
-
import { Controller } from "stimulus";
|
|
1
|
+
import { Controller } from "@hotwired/stimulus";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
obj[key] = value;
|
|
3
|
+
class ResourceItem extends Controller {
|
|
4
|
+
static targets=[ "link" ];
|
|
5
|
+
open(event) {
|
|
6
|
+
if (this.hasLinkTarget && this.targetNotClickable(event.target)) {
|
|
7
|
+
this.linkTarget.click();
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
targetNotClickable(element) {
|
|
11
|
+
return !element.closest("a") && !element.closest("button") && element.nodeName !== "INPUT";
|
|
13
12
|
}
|
|
14
|
-
return obj;
|
|
15
13
|
}
|
|
16
14
|
|
|
17
|
-
class
|
|
15
|
+
class Select extends Controller {
|
|
16
|
+
static targets=[ "selectedOption" ];
|
|
18
17
|
update(event) {
|
|
19
18
|
const select = event.currentTarget;
|
|
20
19
|
const option = select.options[select.selectedIndex];
|
|
@@ -22,9 +21,17 @@ class _class$1 extends Controller {
|
|
|
22
21
|
}
|
|
23
22
|
}
|
|
24
23
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
class TextField extends Controller {
|
|
25
|
+
static targets=[ "input", "clearButton", "characterCount" ];
|
|
26
|
+
static classes=[ "hasValue", "clearButtonHidden" ];
|
|
27
|
+
static values={
|
|
28
|
+
value: String,
|
|
29
|
+
labelTemplate: String,
|
|
30
|
+
textTemplate: String,
|
|
31
|
+
step: Number,
|
|
32
|
+
min: Number,
|
|
33
|
+
max: Number
|
|
34
|
+
};
|
|
28
35
|
connect() {
|
|
29
36
|
this.syncValue();
|
|
30
37
|
this.stepValue = this.inputTarget.getAttribute("step");
|
|
@@ -85,29 +92,16 @@ class _class extends Controller {
|
|
|
85
92
|
if (isNaN(numericValue)) {
|
|
86
93
|
return;
|
|
87
94
|
}
|
|
88
|
-
console.log(numericValue, this.stepValue);
|
|
89
95
|
const decimalPlaces = Math.max(dpl(numericValue), dpl(this.stepValue));
|
|
90
96
|
const newValue = Math.min(Number(this.maxValue), Math.max(numericValue + steps * this.stepValue, Number(this.minValue)));
|
|
91
97
|
this.value = String(newValue.toFixed(decimalPlaces));
|
|
92
98
|
}
|
|
93
99
|
}
|
|
94
100
|
|
|
95
|
-
_defineProperty(_class, "targets", [ "input", "clearButton", "characterCount" ]);
|
|
96
|
-
|
|
97
|
-
_defineProperty(_class, "classes", [ "hasValue", "clearButtonHidden" ]);
|
|
98
|
-
|
|
99
|
-
_defineProperty(_class, "values", {
|
|
100
|
-
value: String,
|
|
101
|
-
labelTemplate: String,
|
|
102
|
-
textTemplate: String,
|
|
103
|
-
step: Number,
|
|
104
|
-
min: Number,
|
|
105
|
-
max: Number
|
|
106
|
-
});
|
|
107
|
-
|
|
108
101
|
function registerPolarisControllers(application) {
|
|
109
|
-
application.register("polaris-
|
|
110
|
-
application.register("polaris-
|
|
102
|
+
application.register("polaris-resource-item", ResourceItem);
|
|
103
|
+
application.register("polaris-select", Select);
|
|
104
|
+
application.register("polaris-text-field", TextField);
|
|
111
105
|
}
|
|
112
106
|
|
|
113
|
-
export {
|
|
107
|
+
export { ResourceItem, Select, TextField, registerPolarisControllers };
|