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.
- checksums.yaml +4 -4
- data/README.md +19 -64
- data/app/assets/javascripts/polaris_view_components/dropzone_controller.js +8 -4
- data/app/assets/javascripts/polaris_view_components.js +11 -6
- data/app/assets/stylesheets/polaris_view_components/custom.css +27 -8
- data/app/assets/stylesheets/polaris_view_components.css +21 -9
- data/app/components/polaris/data_table/column_component.rb +2 -1
- data/app/components/polaris/data_table_component.html.erb +1 -0
- data/app/components/polaris/dropzone_component.html.erb +5 -3
- data/app/components/polaris/empty_search_results_component.html.erb +12 -0
- data/app/components/polaris/empty_search_results_component.rb +19 -0
- data/app/components/polaris/index_table/column_component.rb +2 -1
- data/app/components/polaris/index_table_component.html.erb +3 -5
- data/app/components/polaris/index_table_component.rb +10 -0
- data/app/components/polaris/page_component.html.erb +4 -4
- data/app/components/polaris/page_component.rb +7 -2
- data/app/components/polaris/resource_list_component.html.erb +11 -0
- data/app/components/polaris/resource_list_component.rb +21 -0
- data/app/helpers/polaris/url_helper.rb +37 -0
- data/app/helpers/polaris/view_helper.rb +1 -0
- data/lib/install/install.rb +57 -0
- data/lib/polaris/view_components/version.rb +1 -1
- data/lib/tasks/polaris_view_components_tasks.rake +6 -0
- metadata +7 -7
- data/lib/generators/polaris_view_components/USAGE +0 -5
- data/lib/generators/polaris_view_components/install_generator.rb +0 -35
- data/lib/generators/polaris_view_components/templates/README +0 -14
- 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:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: bde9c78425359cff500d5e9d709750ef0351398696e5685cbb8faada617a9a45
|
4
|
+
data.tar.gz: 830d75b017692040ca7cc695712e6204fd4ebab9593c09f5777a163ee41a3c57
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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
|
-
##
|
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
|
-
|
25
|
+
- [Stimulus](https://stimulus.hotwired.dev/)
|
61
26
|
|
62
|
-
|
63
|
-
pin "polaris-view-components", to: "polaris_view_components.js"
|
64
|
-
```
|
27
|
+
## Installation
|
65
28
|
|
66
|
-
Add to `
|
67
|
-
```javascript
|
68
|
-
// ...
|
29
|
+
Add to `Gemfile`:
|
69
30
|
|
70
|
-
|
71
|
-
|
31
|
+
```ruby
|
32
|
+
gem "polaris_view_components"
|
72
33
|
```
|
73
34
|
|
74
|
-
|
75
|
-
|
76
|
-
Install NPM package:
|
35
|
+
Run installer:
|
77
36
|
```bash
|
78
|
-
|
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
|
-
|
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
|
-
|
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.
|
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.
|
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
|
-
|
187
|
-
|
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
|
-
|
477
|
-
|
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
|
40
|
-
.Polaris-Button
|
41
|
-
|
42
|
-
|
43
|
-
|
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
|
-
|
47
|
-
|
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
|
2272
|
-
.Polaris-Button::after,
|
2273
|
-
|
2274
|
-
|
2275
|
-
|
2276
|
-
|
2277
|
-
|
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)
|
@@ -69,9 +69,11 @@
|
|
69
69
|
<% end %>
|
70
70
|
<% end %>
|
71
71
|
|
72
|
-
|
73
|
-
|
74
|
-
|
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
|
-
|
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
|
-
|
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? ||
|
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
|
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? ||
|
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
|
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.
|
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-
|
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/
|
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.
|
772
|
+
rubygems_version: 3.3.15
|
773
773
|
signing_key:
|
774
774
|
specification_version: 4
|
775
775
|
summary: ViewComponents for Polaris Design System
|
@@ -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))
|