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.
Files changed (33) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +34 -3
  3. data/app/assets/javascripts/{polaris.js → polaris_view_components.js} +27 -33
  4. data/app/assets/stylesheets/polaris@6.6.0.css +4104 -0
  5. data/app/assets/stylesheets/polaris_view_components.css +3 -136
  6. data/app/assets/stylesheets/shopify_navigation.css +136 -0
  7. data/app/components/polaris/button_component.html.erb +1 -1
  8. data/app/components/polaris/button_component.rb +1 -85
  9. data/app/components/polaris/dropzone/controller.js +1 -1
  10. data/app/components/polaris/headless_button.html.erb +22 -0
  11. data/app/components/polaris/headless_button.rb +95 -0
  12. data/app/components/polaris/resource_item_component.html.erb +6 -5
  13. data/app/components/polaris/resource_item_component.rb +45 -12
  14. data/app/components/polaris/select_component.html.erb +11 -2
  15. data/app/components/polaris/select_component.rb +2 -0
  16. data/app/components/polaris/skeleton_body_text_component.html.erb +5 -0
  17. data/app/components/polaris/skeleton_body_text_component.rb +15 -0
  18. data/app/components/polaris/tag_component.html.erb +6 -0
  19. data/app/components/polaris/tag_component.rb +35 -0
  20. data/app/helpers/polaris/form_builder.rb +4 -0
  21. data/app/helpers/polaris/url_helper.rb +19 -0
  22. data/app/helpers/polaris/view_helper.rb +2 -0
  23. data/app/javascript/{polaris → polaris_view_components}/index.js +3 -1
  24. data/app/javascript/polaris_view_components/resource_item_controller.js +15 -0
  25. data/app/javascript/{polaris → polaris_view_components}/select_controller.js +1 -1
  26. data/app/javascript/{polaris → polaris_view_components}/text_field_controller.js +1 -2
  27. data/lib/generators/polaris_view_components/USAGE +5 -0
  28. data/lib/generators/polaris_view_components/install_generator.rb +35 -0
  29. data/lib/generators/polaris_view_components/templates/README +14 -0
  30. data/lib/generators/polaris_view_components/templates/stimulus_index.js +6 -0
  31. data/lib/polaris/view_components/engine.rb +4 -1
  32. data/lib/polaris/view_components/version.rb +1 -1
  33. metadata +22 -8
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4b8966c0866f8b002c720f0dd8578f825a9abf64753ead41dcdf84150dd24f8c
4
- data.tar.gz: 9fb7b270e5fbe102a79342462795b472ac4849d412431d5990fc0bf17ab9aef1
3
+ metadata.gz: a5ea3551cd4f15d29b3618b2cc565059b91f9415c2b3e2ff47573c9d8eebc588
4
+ data.tar.gz: bd815ab2b3bd738e7541686b8047cf159638e2aec83ab02d4dd7e803ff455d13
5
5
  SHA512:
6
- metadata.gz: 5078ffd0ee20e1df92e5373ab423fb740ae046596b960322b263ec02a2938a082db91ce92b96639257cc7702de321c561f3c8621caa404bdc0246f0de837e021
7
- data.tar.gz: 6568cc0c13ccee2a3a94a2b3308bd546d5fe32c20e1742699999698ef02db79938f717e20fc64ad71867ff1eba8720b4be2d88682ecff459f13221e6ecda107d
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
+ ![Polaris ViewComponents](.github/assets/preview.png)
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
- // Polaris ViewComponents
73
+ // ...
74
+
44
75
  import { registerPolarisControllers } from "polaris-view-components"
45
- registerPolarisControllers(application)
76
+ registerPolarisControllers(Stimulus)
46
77
  ```
47
78
 
48
79
  ## Dependencies
data/app/assets/javascripts/{polaris.js → polaris_view_components.js} RENAMED
@@ -1,20 +1,19 @@
1
- import { Controller } from "stimulus";
1
+ import { Controller } from "@hotwired/stimulus";
2
2
 
3
- function _defineProperty(obj, key, value) {
4
- if (key in obj) {
5
- Object.defineProperty(obj, key, {
6
- value: value,
7
- enumerable: true,
8
- configurable: true,
9
- writable: true
10
- });
11
- } else {
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 _class$1 extends Controller {
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
- _defineProperty(_class$1, "targets", [ "selectedOption" ]);
26
-
27
- class _class extends Controller {
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-select", _class$1);
110
- application.register("polaris-text-field", _class);
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 { _class$1 as Select, _class as TextField, registerPolarisControllers };
107
+ export { ResourceItem, Select, TextField, registerPolarisControllers };