polaris_view_components 0.1.2 → 0.3.1
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.
- 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 };
|