polaris_view_components 0.10.1 → 0.11.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +19 -64
  3. data/app/assets/javascripts/polaris_view_components/dropzone_controller.js +8 -4
  4. data/app/assets/javascripts/polaris_view_components.js +11 -6
  5. data/app/assets/stylesheets/polaris_view_components/custom.css +27 -8
  6. data/app/assets/stylesheets/polaris_view_components.css +21 -9
  7. data/app/components/polaris/data_table/column_component.rb +2 -1
  8. data/app/components/polaris/data_table_component.html.erb +1 -0
  9. data/app/components/polaris/dropzone_component.html.erb +5 -3
  10. data/app/components/polaris/empty_search_results_component.html.erb +12 -0
  11. data/app/components/polaris/empty_search_results_component.rb +19 -0
  12. data/app/components/polaris/index_table/column_component.rb +2 -1
  13. data/app/components/polaris/index_table_component.html.erb +3 -5
  14. data/app/components/polaris/index_table_component.rb +10 -0
  15. data/app/components/polaris/page_component.html.erb +4 -4
  16. data/app/components/polaris/page_component.rb +7 -2
  17. data/app/components/polaris/resource_list_component.html.erb +11 -0
  18. data/app/components/polaris/resource_list_component.rb +21 -0
  19. data/app/helpers/polaris/url_helper.rb +37 -0
  20. data/app/helpers/polaris/view_helper.rb +1 -0
  21. data/lib/install/install.rb +57 -0
  22. data/lib/polaris/view_components/version.rb +1 -1
  23. data/lib/tasks/polaris_view_components_tasks.rake +6 -0
  24. metadata +7 -7
  25. data/lib/generators/polaris_view_components/USAGE +0 -5
  26. data/lib/generators/polaris_view_components/install_generator.rb +0 -35
  27. data/lib/generators/polaris_view_components/templates/README +0 -14
  28. data/lib/generators/polaris_view_components/templates/stimulus_index.js +0 -6
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6559d19f7338ce9195fa1903e58f14596006d813bbc30599061bce4c00d49c9d
4
- data.tar.gz: 61223fea9beddaa96b4762b8b7dc00cf42051a462e92bab25733d6f35b232ae2
3
+ metadata.gz: bde9c78425359cff500d5e9d709750ef0351398696e5685cbb8faada617a9a45
4
+ data.tar.gz: 830d75b017692040ca7cc695712e6204fd4ebab9593c09f5777a163ee41a3c57
5
5
  SHA512:
6
- metadata.gz: 8ad6e0a1dc0f3f491e6beeae7dc4c6c72a8a077ec0b6f6c4cc04e95723761aa93181d663ef9f9f52945d5fad3be40a9d3a3b7e3f64504f9e347925b733841fb5
7
- data.tar.gz: 4b5b661dbd74e991dde7e7386f33b65caeaac53839b0c3c0d3951acb30f5179d1d007d97a08c058024c7e1a4e72d56fba8ba0d0a12729b885ebecf458a4116b3
6
+ metadata.gz: 19ec9d9273dd86977b5dd24ccd592b20656715a64a1287c6a653b47c130c226cc83c0bb1fc3b9463d3304a18cb52134a741081a47339d80a48bd472885fe17c5
7
+ data.tar.gz: 295b5b130d8b325978769d37d948446144d36ae7ba0ca72a8264e25dc9ae2d90f58cb6290415c9e13fc48a6bb55a2b268dfb3f957ab26efc88a36ab0c86fe061
data/README.md CHANGED
@@ -20,76 +20,23 @@ Render Polaris ViewComponents:
20
20
  <% end %>
21
21
  ```
22
22
 
23
- ## Installation
24
-
25
- In `Gemfile`, add:
26
-
27
- ```ruby
28
- gem 'polaris_view_components'
29
- ```
30
-
31
- Run install generator:
32
- ```bash
33
- rails generate polaris_view_components:install
34
- ```
35
-
36
- Setup Polaris styles in your layouts `<head>` tag:
37
-
38
- ```erb
39
- <%= stylesheet_link_tag 'polaris_view_components' %>
40
- ```
41
-
42
- Define Polaris style on your `<body>` tag:
43
-
44
- ```erb
45
- <body style="<%= polaris_body_styles %>">
46
- ```
47
-
48
- ### Importmaps
49
-
50
- Install dependencies:
51
- ```
52
- bin/importmap pin @rails/request.js --download
53
- ```
54
-
55
- If you use sprockets make sure the vendor folder is loaded in `app/assets/config/manifest.js`:
56
- ```js
57
- //= link_tree ../../../vendor/assets/javascripts .js
58
- ```
23
+ ## Dependencies
59
24
 
60
- Add to `config/importmap.rb`:
25
+ - [Stimulus](https://stimulus.hotwired.dev/)
61
26
 
62
- ```rb
63
- pin "polaris-view-components", to: "polaris_view_components.js"
64
- ```
27
+ ## Installation
65
28
 
66
- Add to `app/javascript/controllers/index.js`:
67
- ```javascript
68
- // ...
29
+ Add to `Gemfile`:
69
30
 
70
- import { registerPolarisControllers } from "polaris-view-components"
71
- registerPolarisControllers(Stimulus)
31
+ ```ruby
32
+ gem "polaris_view_components"
72
33
  ```
73
34
 
74
- ### NPM
75
-
76
- Install NPM package:
35
+ Run installer:
77
36
  ```bash
78
- yarn add polaris-view-components @rails/request.js
37
+ bin/rails polaris_view_components:install
79
38
  ```
80
39
 
81
- Add to `app/javascript/controllers/index.js`:
82
- ```javascript
83
- // ...
84
-
85
- import { registerPolarisControllers } from "polaris-view-components"
86
- registerPolarisControllers(Stimulus)
87
- ```
88
-
89
- ## Dependencies
90
-
91
- In addition to the dependencies declared in the `gemspec`, Polaris ViewComponents assumes the presence of Polaris CSS.
92
-
93
40
  ## Development
94
41
 
95
42
  To get started:
@@ -99,16 +46,24 @@ To get started:
99
46
 
100
47
  It will open demo app with component previews on `localhost:4000`. You can change components and they will be updated on page reload. Component previews located in `demo/test/components/previews`.
101
48
 
102
- To release gem run:
49
+ ## Releases
50
+
51
+ The library follows [semantic versioning](https://semver.org/). To draft a new release you need to run `script/release` with a new version number:
52
+
103
53
  ```bash
104
- script/release
54
+ script/release VERSION
105
55
  ```
106
56
 
107
- To release npm package run:
57
+ Where the VERSION is the version number you want to release. This script will update the version in the gem and push it to GitHub and Rubygems automatically.
58
+
59
+ To release a new version of npm package update the package.json file with the new version number and run:
60
+
108
61
  ```bash
109
62
  npm run release
110
63
  ```
111
64
 
65
+ After that make sure to commit changes in package.json.
66
+
112
67
  ## License
113
68
 
114
69
  The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
@@ -168,7 +168,8 @@ export default class extends Controller {
168
168
 
169
169
  if (this.acceptedFiles.length === 0) return
170
170
 
171
- this.loaderTarget.classList.remove("Polaris--hidden")
171
+ if (this.hasLoaderTarget)
172
+ this.loaderTarget.classList.remove("Polaris--hidden")
172
173
  }
173
174
 
174
175
  onDirectUploadInitialize = (event) => {
@@ -180,11 +181,14 @@ export default class extends Controller {
180
181
 
181
182
  if (this.sizeValue == 'small') {
182
183
  this.clearFiles()
183
- this.loaderTarget.classList.remove("Polaris--hidden")
184
+ if (this.hasLoaderTarget)
185
+ this.loaderTarget.classList.remove("Polaris--hidden")
184
186
  } else {
185
187
  const content = dropzone.querySelector(`[data-file-name="${file.name}"]`)
186
- const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]')
187
- progressBar.id = `direct-upload-${id}`
188
+ if (content) {
189
+ const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]')
190
+ progressBar.id = `direct-upload-${id}`
191
+ }
188
192
  }
189
193
  }
190
194
 
@@ -460,7 +460,7 @@ class Dropzone extends Controller {
460
460
  this.enable();
461
461
  this.clearFiles();
462
462
  if (this.acceptedFiles.length === 0) return;
463
- this.loaderTarget.classList.remove("Polaris--hidden");
463
+ if (this.hasLoaderTarget) this.loaderTarget.classList.remove("Polaris--hidden");
464
464
  };
465
465
  onDirectUploadInitialize=event => {
466
466
  const {target: target, detail: detail} = event;
@@ -470,11 +470,13 @@ class Dropzone extends Controller {
470
470
  if (this.acceptedFiles.length === 0) return;
471
471
  if (this.sizeValue == "small") {
472
472
  this.clearFiles();
473
- this.loaderTarget.classList.remove("Polaris--hidden");
473
+ if (this.hasLoaderTarget) this.loaderTarget.classList.remove("Polaris--hidden");
474
474
  } else {
475
475
  const content = dropzone.querySelector(`[data-file-name="${file.name}"]`);
476
- const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]');
477
- progressBar.id = `direct-upload-${id}`;
476
+ if (content) {
477
+ const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]');
478
+ progressBar.id = `direct-upload-${id}`;
479
+ }
478
480
  }
479
481
  };
480
482
  onDirectUploadStart=event => {
@@ -1113,6 +1115,9 @@ function getContainingBlock(element) {
1113
1115
  }
1114
1116
  }
1115
1117
  var currentNode = getParentNode(element);
1118
+ if (isShadowRoot(currentNode)) {
1119
+ currentNode = currentNode.host;
1120
+ }
1116
1121
  while (isHTMLElement(currentNode) && [ "html", "body" ].indexOf(getNodeName(currentNode)) < 0) {
1117
1122
  var css = getComputedStyle$1(currentNode);
1118
1123
  if (css.transform !== "none" || css.perspective !== "none" || css.contain === "paint" || [ "transform", "perspective" ].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === "filter" || isFirefox && css.filter && css.filter !== "none") {
@@ -1287,13 +1292,13 @@ function mapToStyles(_ref2) {
1287
1292
  offsetParent = offsetParent;
1288
1293
  if (placement === top || (placement === left || placement === right) && variation === end) {
1289
1294
  sideY = bottom;
1290
- var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : offsetParent[heightProp];
1295
+ var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : offsetParent[heightProp];
1291
1296
  y -= offsetY - popperRect.height;
1292
1297
  y *= gpuAcceleration ? 1 : -1;
1293
1298
  }
1294
1299
  if (placement === left || (placement === top || placement === bottom) && variation === end) {
1295
1300
  sideX = right;
1296
- var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : offsetParent[widthProp];
1301
+ var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : offsetParent[widthProp];
1297
1302
  x -= offsetX - popperRect.width;
1298
1303
  x *= gpuAcceleration ? 1 : -1;
1299
1304
  }
@@ -36,15 +36,16 @@ a.Polaris-Tag__Button {
36
36
  font-size: 1.25rem;
37
37
  }
38
38
 
39
- /* Remove box-shadow from buttons and links */
40
- .Polaris-Button::after,
41
- .Polaris-Button:focus::after,
42
- .Polaris-Breadcrumbs__Breadcrumb::after {
43
- box-shadow: none !important;
39
+ /* Remove focus styles for non-keyboard focus from buttons and links */
40
+ .Polaris-Button, .Polaris-Breadcrumbs__Breadcrumb {
41
+ &:focus:not(:focus-visible)::after {
42
+ box-shadow: none !important;
43
+ }
44
44
  }
45
-
46
- .Polaris-Tabs__Tab:focus > .Polaris-Tabs__Title::after {
47
- box-shadow: none !important;
45
+ .Polaris-Tabs__Tab {
46
+ &:focus:not(:focus-visible) > .Polaris-Tabs__Title::after {
47
+ box-shadow: none !important;
48
+ }
48
49
  }
49
50
 
50
51
  /* ResourceItem */
@@ -176,3 +177,21 @@ a.Polaris-Tag__Button {
176
177
  display: none;
177
178
  }
178
179
  }
180
+
181
+ /* EmptySearchResults */
182
+ .Polaris-EmptySearchResults {
183
+ padding: 84px 0;
184
+
185
+ &__Content {
186
+ display: flex;
187
+ flex-direction: column;
188
+ align-items: center;
189
+ text-align: center;
190
+ }
191
+ }
192
+
193
+ /* ActionList */
194
+
195
+ .Polaris-ActionList__Item {
196
+ border: none !important;
197
+ }
@@ -2268,15 +2268,13 @@ a.Polaris-Tag__Button {
2268
2268
  .Polaris-TextStyle--sizeSmall {
2269
2269
  font-size: 1.25rem;
2270
2270
  }
2271
- /* Remove box-shadow from buttons and links */
2272
- .Polaris-Button::after,
2273
- .Polaris-Button:focus::after,
2274
- .Polaris-Breadcrumbs__Breadcrumb::after {
2275
- box-shadow: none !important;
2276
- }
2277
- .Polaris-Tabs__Tab:focus > .Polaris-Tabs__Title::after {
2278
- box-shadow: none !important;
2279
- }
2271
+ /* Remove focus styles for non-keyboard focus from buttons and links */
2272
+ .Polaris-Button:focus:not(:focus-visible)::after, .Polaris-Breadcrumbs__Breadcrumb:focus:not(:focus-visible)::after {
2273
+ box-shadow: none !important;
2274
+ }
2275
+ .Polaris-Tabs__Tab:focus:not(:focus-visible) > .Polaris-Tabs__Title::after {
2276
+ box-shadow: none !important;
2277
+ }
2280
2278
  /* ResourceItem */
2281
2279
  .Polaris-ResourceItem__Owned--offset {
2282
2280
  padding-left: 2rem;
@@ -2373,3 +2371,17 @@ a.Polaris-Tag__Button {
2373
2371
  display: none;
2374
2372
  }
2375
2373
  }
2374
+ /* EmptySearchResults */
2375
+ .Polaris-EmptySearchResults {
2376
+ padding: 84px 0;
2377
+ }
2378
+ .Polaris-EmptySearchResults__Content {
2379
+ display: flex;
2380
+ flex-direction: column;
2381
+ align-items: center;
2382
+ text-align: center;
2383
+ }
2384
+ /* ActionList */
2385
+ .Polaris-ActionList__Item {
2386
+ border: none !important;
2387
+ }
@@ -2,7 +2,7 @@ class Polaris::DataTable::ColumnComponent < Polaris::Component
2
2
  SORT_DEFAULT = false
3
3
  SORT_OPTIONS = [false, :asc, :desc]
4
4
 
5
- attr_reader :title, :numeric, :total, :sorted, :sort_url
5
+ attr_reader :title, :numeric, :total, :sorted, :sort_url, :system_arguments
6
6
 
7
7
  def initialize(title, numeric: false, total: nil, sorted: SORT_DEFAULT, sort_url: nil, **system_arguments, &block)
8
8
  @title = title
@@ -11,6 +11,7 @@ class Polaris::DataTable::ColumnComponent < Polaris::Component
11
11
  @sorted = fetch_or_fallback(SORT_OPTIONS, sorted, SORT_DEFAULT)
12
12
  @sort_url = sort_url
13
13
  @block = block
14
+ @system_arguments = system_arguments
14
15
  end
15
16
 
16
17
  def call(row)
@@ -26,6 +26,7 @@
26
26
  tag: (index.zero? ? "th" : "td"),
27
27
  scope: ("row" if index.zero?),
28
28
  total: true,
29
+ **column.system_arguments
29
30
  ) do %>
30
31
  <%= column.total %>
31
32
  <% end %>
@@ -69,9 +69,11 @@
69
69
  <% end %>
70
70
  <% end %>
71
71
 
72
- <div class="Polaris-DropZone__Loader Polaris--hidden" data-polaris-dropzone-target="loader">
73
- <%= polaris_spinner(size: (@size == :small) ? :small : :large) %>
74
- </div>
72
+ <% if @preview %>
73
+ <div class="Polaris-DropZone__Loader Polaris--hidden" data-polaris-dropzone-target="loader">
74
+ <%= polaris_spinner(size: (@size == :small) ? :small : :large) %>
75
+ </div>
76
+ <% end %>
75
77
  </div>
76
78
 
77
79
  <%= render Polaris::VisuallyHiddenComponent.new do %>
@@ -0,0 +1,12 @@
1
+ <%= render Polaris::BaseComponent.new(**system_arguments) do %>
2
+ <div class="Polaris-EmptySearchResults__Content">
3
+ <%= polaris_text_container do %>
4
+ <%= polaris_display_text(size: :small) do %>
5
+ <%= @title %>
6
+ <% end %>
7
+ <div>
8
+ <%= polaris_text_subdued { @description } %>
9
+ </div>
10
+ <% end %>
11
+ </div>
12
+ <% end %>
@@ -0,0 +1,19 @@
1
+ module Polaris
2
+ class EmptySearchResultsComponent < Polaris::Component
3
+ def initialize(title:, description:, **system_arguments)
4
+ @title = title
5
+ @description = description
6
+ @system_arguments = system_arguments
7
+ end
8
+
9
+ def system_arguments
10
+ @system_arguments.tap do |args|
11
+ args[:tag] = "div"
12
+ args[:classes] = class_names(
13
+ args[:classes],
14
+ "Polaris-EmptySearchResults"
15
+ )
16
+ end
17
+ end
18
+ end
19
+ end
@@ -1,10 +1,11 @@
1
1
  class Polaris::IndexTable::ColumnComponent < Polaris::Component
2
- attr_reader :title, :flush
2
+ attr_reader :title, :flush, :system_arguments
3
3
 
4
4
  def initialize(title, flush: false, **system_arguments, &block)
5
5
  @title = title
6
6
  @flush = flush
7
7
  @block = block
8
+ @system_arguments = system_arguments
8
9
  end
9
10
 
10
11
  def call(row)
@@ -12,15 +12,13 @@
12
12
  </thead>
13
13
  <tbody>
14
14
  <% @data.each do |row| %>
15
- <tr class="Polaris-IndexTable__TableRow Polaris-IndexTable__TableRow--unclickable">
15
+ <%= render Polaris::BaseComponent.new(**row_arguments(row)) do %>
16
16
  <% columns.each_with_index do |column, index| %>
17
- <%= render_cell(
18
- flush: column.flush,
19
- ) do %>
17
+ <%= render_cell(flush: column.flush, **column.system_arguments) do %>
20
18
  <%= column.call(row) %>
21
19
  <% end %>
22
20
  <% end %>
23
- </tr>
21
+ <% end %>
24
22
  <% end %>
25
23
  </tbody>
26
24
  </table>
@@ -18,6 +18,16 @@ module Polaris
18
18
  end
19
19
  end
20
20
 
21
+ def row_arguments(row)
22
+ {tag: "tr"}.tap do |args|
23
+ args[:classes] = class_names(
24
+ "Polaris-IndexTable__TableRow",
25
+ "Polaris-IndexTable__TableRow--unclickable"
26
+ )
27
+ args[:id] = dom_id(row) if row.respond_to?(:to_key)
28
+ end
29
+ end
30
+
21
31
  def render_cell(**arguments, &block)
22
32
  render(IndexTable::CellComponent.new(**arguments), &block)
23
33
  end
@@ -46,13 +46,13 @@
46
46
  <% end %>
47
47
  </div>
48
48
 
49
- <% if @secondary_actions.any? || action_group.present? || primary_action.present? || has_pagination? %>
49
+ <% if @secondary_actions.any? || action_group.present? || render_primary_action? || has_pagination? %>
50
50
  <div class="Polaris-Page-Header__RightAlign">
51
51
  <div class="Polaris-Page-Header__Actions">
52
52
  <% if @secondary_actions.any? || action_group.present? %>
53
53
  <div class="Polaris-ActionMenu Polaris-ActionMenu--mobile">
54
54
  <div class="Polaris-ActionMenu-RollupActions__RollupActivator">
55
- <%= polaris_popover do |popover| %>
55
+ <%= polaris_popover(position: :below, alignment: :right) do |popover| %>
56
56
  <% popover.button do |button| %>
57
57
  <% button.icon(name: "HorizontalDotsMinor") %>
58
58
  <% end %>
@@ -98,9 +98,9 @@
98
98
  </div>
99
99
  </div>
100
100
  <% end %>
101
- <% if primary_action.present? %>
101
+ <% if render_primary_action? %>
102
102
  <div class="Polaris-Page-Header__PrimaryActionWrapper">
103
- <%= primary_action %>
103
+ <%= primary_action || custom_primary_action %>
104
104
  </div>
105
105
  <% end %>
106
106
  <% if has_pagination? %>
@@ -7,6 +7,7 @@ module Polaris
7
7
  renders_one :primary_action, ->(primary: true, **system_arguments) do
8
8
  Polaris::ButtonComponent.new(primary: primary, **system_arguments)
9
9
  end
10
+ renders_one :custom_primary_action
10
11
  renders_one :action_group, "ActionGroupComponent"
11
12
 
12
13
  def initialize(
@@ -81,7 +82,11 @@ module Polaris
81
82
  end
82
83
 
83
84
  def render_header?
84
- @title.present? || @subtitle.present? || @back_url.present? || primary_action.present?
85
+ @title.present? || @subtitle.present? || @back_url.present? || render_primary_action?
86
+ end
87
+
88
+ def render_primary_action?
89
+ primary_action.present? || custom_primary_action.present?
85
90
  end
86
91
 
87
92
  def has_pagination?
@@ -98,7 +103,7 @@ module Polaris
98
103
  end
99
104
 
100
105
  def call
101
- render(Polaris::PopoverComponent.new) do |popover|
106
+ render(Polaris::PopoverComponent.new(position: :below)) do |popover|
102
107
  popover.button(disclosure: true) { @title }
103
108
 
104
109
  polaris_action_list do |list|
@@ -4,6 +4,17 @@
4
4
  <%= filters %>
5
5
  </div>
6
6
  <% end %>
7
+
8
+ <% if header_title.present? %>
9
+ <div class="Polaris-ResourceList__HeaderOuterWrapper">
10
+ <div class="Polaris-ResourceList__HeaderWrapper">
11
+ <div class="Polaris-ResourceList__HeaderContentWrapper">
12
+ <div class="Polaris-ResourceList__HeaderTitleWrapper"><%= header_title %></div>
13
+ </div>
14
+ </div>
15
+ </div>
16
+ <% end %>
17
+
7
18
  <%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
8
19
  <%= content %>
9
20
  <% end %>
@@ -5,9 +5,16 @@ module Polaris
5
5
  renders_one :filters, Polaris::FiltersComponent
6
6
 
7
7
  def initialize(
8
+ items: [],
9
+ resource_name: nil,
10
+ total_items_count: nil,
8
11
  wrapper_arguments: {},
9
12
  **system_arguments
10
13
  )
14
+ @items = items
15
+ @resource_name = resource_name
16
+ @total_items_count = total_items_count
17
+
11
18
  @wrapper_arguments = wrapper_arguments
12
19
  @wrapper_arguments[:tag] = "div"
13
20
  @wrapper_arguments[:classes] = class_names(
@@ -22,5 +29,19 @@ module Polaris
22
29
  "Polaris-ResourceList"
23
30
  )
24
31
  end
32
+
33
+ def header_title
34
+ count unless @total_items_count.nil?
35
+ end
36
+
37
+ def resource_string
38
+ return @resource_name[:singular] if @items.size === 1 && !@total_items_count
39
+
40
+ @resource_name[:plural]
41
+ end
42
+
43
+ def count
44
+ "Showing #{@items.size} of #{@total_items_count} #{resource_string}"
45
+ end
25
46
  end
26
47
  end
@@ -15,5 +15,42 @@ module Polaris
15
15
  content
16
16
  end
17
17
  end
18
+
19
+ def polaris_link_to(name = nil, options = nil, html_options = nil, &block)
20
+ html_options, options, name = options, name, block if block
21
+ options ||= {}
22
+
23
+ html_options = convert_options_to_data_attributes(options, html_options)
24
+ html_options[:classes] = html_options[:class]
25
+ html_options.delete(:class)
26
+
27
+ url = url_target(name, options)
28
+
29
+ link = Polaris::LinkComponent.new(url: url, **html_options)
30
+ link = link.with_content(name) unless block
31
+
32
+ render(link, &block)
33
+ end
34
+
35
+ def polaris_mail_to(email_address, name = nil, html_options = {}, &block)
36
+ html_options, name = name, nil if name.is_a?(Hash)
37
+ html_options = (html_options || {}).stringify_keys
38
+ html_options[:classes] = html_options[:class]
39
+ html_options.delete(:class)
40
+
41
+ extras = %w[cc bcc body subject reply_to].map! { |item|
42
+ option = html_options.delete(item).presence || next
43
+ "#{item.dasherize}=#{ERB::Util.url_encode(option)}"
44
+ }.compact
45
+ extras = extras.empty? ? "" : "?" + extras.join("&")
46
+
47
+ encoded_email_address = ERB::Util.url_encode(email_address).gsub("%40", "@")
48
+ url = "mailto:#{encoded_email_address}#{extras}"
49
+
50
+ link = Polaris::LinkComponent.new(url: url, **html_options)
51
+ link = link.with_content(name || email_address) unless block
52
+
53
+ render(link, &block)
54
+ end
18
55
  end
19
56
  end
@@ -24,6 +24,7 @@ module Polaris
24
24
  description_list: "Polaris::DescriptionListComponent",
25
25
  display_text: "Polaris::DisplayTextComponent",
26
26
  dropzone: "Polaris::DropzoneComponent",
27
+ empty_search_results: "Polaris::EmptySearchResultsComponent",
27
28
  empty_state: "Polaris::EmptyStateComponent",
28
29
  exception_list: "Polaris::ExceptionListComponent",
29
30
  footer_help: "Polaris::FooterHelpComponent",
@@ -0,0 +1,57 @@
1
+ APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb")
2
+ IMPORTMAP_BINSTUB = Rails.root.join("bin/importmap")
3
+ IMPORTMAP_CONFIG_PATH = Rails.root.join("config/importmap.rb")
4
+ STIMULUS_PATH = Rails.root.join("app/javascript/controllers/index.js")
5
+
6
+ if APPLICATION_LAYOUT_PATH.exist?
7
+ say "Add Polaris styles in application layout"
8
+ insert_into_file APPLICATION_LAYOUT_PATH.to_s, "\n <%= stylesheet_link_tag \"polaris_view_components\" %>", before: /\s*<\/head>/
9
+
10
+ if File.read(APPLICATION_LAYOUT_PATH).include?("<body>")
11
+ say "Add Polaris inline styles for <body> in application layout"
12
+ gsub_file APPLICATION_LAYOUT_PATH.to_s, "<body>", "<body style=\"<%= polaris_body_styles %>\">"
13
+ else
14
+ say "<body> tag is not found in application layout.", :red
15
+ say " Replace <body> with <body style=\"<%= polaris_body_styles %>\"> in your custom layour."
16
+ end
17
+ else
18
+ say "Default application.html.erb is missing!", :red
19
+ say " 1. Add <%= stylesheet_link_tag \"polaris_view_components\" %> within the <head> tag in your custom layout."
20
+ say " 2. Replace <body> with <body style=\"<%= polaris_body_styles %>\"> in your custom layour."
21
+ end
22
+
23
+ if IMPORTMAP_BINSTUB.exist?
24
+ importmaps = File.read(IMPORTMAP_CONFIG_PATH)
25
+
26
+ unless importmaps.include?("@rails/request.js")
27
+ say "Pin @rails/request.js dependency"
28
+ run "bin/importmap pin @rails/request.js --download"
29
+ end
30
+
31
+ say "Pin polaris_view_components"
32
+ append_to_file IMPORTMAP_CONFIG_PATH do
33
+ 'pin "polaris-view-components", to: "polaris_view_components.js"\n'
34
+ end
35
+ else
36
+ package_json = File.read(Rails.root.join("package.json"))
37
+
38
+ unless package_json.include?("@rails/request.js")
39
+ say "Add @rails/request.js dependency"
40
+ run "yarn add @rails/request.js"
41
+ end
42
+
43
+ say "Add polaris-view-components package"
44
+ run "yarn add polaris-view-components"
45
+ end
46
+
47
+ if STIMULUS_PATH.exist?
48
+ say "Add Polaris Stimulus controllers"
49
+ append_to_file STIMULUS_PATH do
50
+ "\nimport { registerPolarisControllers } from \"polaris-view-components\"\nregisterPolarisControllers(Stimulus)\n"
51
+ end
52
+ else
53
+ say "Default Stimulus location is missing: app/javascript/controllers/index.js", :red
54
+ say " Add to your Stimulus index.js:"
55
+ say " import { registerPolarisControllers } from \"polaris-view-components\""
56
+ say " registerPolarisControllers(Stimulus)"
57
+ end
@@ -1,5 +1,5 @@
1
1
  module Polaris
2
2
  module ViewComponents
3
- VERSION = "0.10.1"
3
+ VERSION = "0.11.0"
4
4
  end
5
5
  end
@@ -0,0 +1,6 @@
1
+ namespace :polaris_view_components do
2
+ desc "Setup Polaris::ViewComponents for the app"
3
+ task :install do
4
+ system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/install.rb", __dir__)}"
5
+ end
6
+ end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: polaris_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.10.1
4
+ version: 0.11.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Dan Gamble
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2022-06-04 00:00:00.000000000 Z
12
+ date: 2022-06-20 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails
@@ -615,6 +615,8 @@ files:
615
615
  - app/components/polaris/display_text_component.rb
616
616
  - app/components/polaris/dropzone_component.html.erb
617
617
  - app/components/polaris/dropzone_component.rb
618
+ - app/components/polaris/empty_search_results_component.html.erb
619
+ - app/components/polaris/empty_search_results_component.rb
618
620
  - app/components/polaris/empty_state_component.html.erb
619
621
  - app/components/polaris/empty_state_component.rb
620
622
  - app/components/polaris/exception_list/item_component.html.erb
@@ -741,14 +743,12 @@ files:
741
743
  - app/helpers/polaris/view_helper.rb
742
744
  - app/validators/type_validator.rb
743
745
  - config/locales/en.yml
744
- - lib/generators/polaris_view_components/USAGE
745
- - lib/generators/polaris_view_components/install_generator.rb
746
- - lib/generators/polaris_view_components/templates/README
747
- - lib/generators/polaris_view_components/templates/stimulus_index.js
746
+ - lib/install/install.rb
748
747
  - lib/polaris/view_components.rb
749
748
  - lib/polaris/view_components/engine.rb
750
749
  - lib/polaris/view_components/version.rb
751
750
  - lib/polaris_view_components.rb
751
+ - lib/tasks/polaris_view_components_tasks.rake
752
752
  homepage: https://github.com/baoagency/polaris-view-components
753
753
  licenses:
754
754
  - MIT
@@ -769,7 +769,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
769
769
  - !ruby/object:Gem::Version
770
770
  version: '0'
771
771
  requirements: []
772
- rubygems_version: 3.3.7
772
+ rubygems_version: 3.3.15
773
773
  signing_key:
774
774
  specification_version: 4
775
775
  summary: ViewComponents for Polaris Design System
@@ -1,5 +0,0 @@
1
- Description:
2
- Creates or adds import of NPM package to your application + additional installation steps.
3
-
4
- Example:
5
- rails generate polaris_view_components:install
@@ -1,35 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- require "rails/generators/active_record"
4
-
5
- module PolarisViewComponents
6
- class InstallGenerator < Rails::Generators::Base
7
- source_root File.expand_path("templates", __dir__)
8
-
9
- def add_npm_package
10
- say "Adding NPM package", :green
11
- run "yarn add polaris-view-components"
12
- end
13
-
14
- def add_to_stimulus_controller
15
- say "Adding import to to Stimulus controller", :green
16
- dir_path = "app/javascript/controllers"
17
- empty_directory("app/javascript")
18
- empty_directory(dir_path)
19
-
20
- file_path = "#{dir_path}/index.js"
21
-
22
- unless File.exist?(file_path)
23
- copy_file "stimulus_index.js", file_path
24
- end
25
-
26
- append_to_file file_path do
27
- "import { registerPolarisControllers } from \"polaris-view-components\"\nregisterPolarisControllers(Stimulus)"
28
- end
29
- end
30
-
31
- def show_readme
32
- readme "README"
33
- end
34
- end
35
- end
@@ -1,14 +0,0 @@
1
- ===============================================================================
2
-
3
- Some manual setup is still required:
4
-
5
- 1. Setup Polaris styles in your layouts <head> tag:
6
-
7
- <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@6.6.0/dist/styles.css" />
8
- <%= stylesheet_link_tag 'polaris_view_components' %>
9
-
10
- 2. Define Polaris style on your <body> tag:
11
-
12
- <body style="<%= polaris_body_styles %>">
13
-
14
- ===============================================================================
@@ -1,6 +0,0 @@
1
- import { Application } from "@hotwired/stimulus"
2
- import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"
3
-
4
- window.Stimulus = Application.start()
5
- const context = require.context("./", true, /\.js$/)
6
- Stimulus.load(definitionsFromContext(context))