polaris_view_components 0.1.3 → 0.2.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 +11 -0
- data/app/assets/javascripts/polaris.js +0 -1
- 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/view_helper.rb +2 -0
- 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 +7 -0
- data/lib/polaris/view_components/version.rb +1 -1
- metadata +10 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 75b9c5e7b5a31ce1a5a549b0315fdbefc308206fd89085a19c8feac044f2884f
|
|
4
|
+
data.tar.gz: c858f559b97a7dfe14c6c303d3f7b000ca428ddc12ee603511f03ebe4ad4ffcc
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0577b317bffc512104e90a023eab9d2a674b9f6ce852eb2e8324a77e1723f97029d30545053e29f72ad7da1da14ebb5c2c1f3eee5afa2a50f4ed7bca7afce4b7
|
|
7
|
+
data.tar.gz: 1cfb3676d22713e1e6f5d47a4a521683faa1d5a7bc2f94db6731da47e0834b359bdd7f91670c294b6f20e11445089ad08c51111c226c7f77ba2563f417a9b4d3
|
data/README.md
CHANGED
|
@@ -28,6 +28,11 @@ In `Gemfile`, add:
|
|
|
28
28
|
gem 'polaris_view_components'
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
+
Run install generator:
|
|
32
|
+
```bash
|
|
33
|
+
rails generate polaris_view_components:install
|
|
34
|
+
```
|
|
35
|
+
|
|
31
36
|
Setup Polaris styles in your layouts `<head>` tag:
|
|
32
37
|
|
|
33
38
|
```erb
|
|
@@ -35,6 +40,12 @@ Setup Polaris styles in your layouts `<head>` tag:
|
|
|
35
40
|
<%= stylesheet_link_tag 'polaris_view_components' %>
|
|
36
41
|
```
|
|
37
42
|
|
|
43
|
+
Define Polaris style on your `<body>` tag:
|
|
44
|
+
|
|
45
|
+
```erb
|
|
46
|
+
<body style="<%= polaris_body_styles %>">
|
|
47
|
+
```
|
|
48
|
+
|
|
38
49
|
Install NPM package:
|
|
39
50
|
```bash
|
|
40
51
|
yarn add polaris-view-components
|
|
@@ -98,7 +98,6 @@ class _class extends Controller {
|
|
|
98
98
|
if (isNaN(numericValue)) {
|
|
99
99
|
return;
|
|
100
100
|
}
|
|
101
|
-
console.log(numericValue, this.stepValue);
|
|
102
101
|
const decimalPlaces = Math.max(dpl(numericValue), dpl(this.stepValue));
|
|
103
102
|
const newValue = Math.min(Number(this.maxValue), Math.max(numericValue + steps * this.stepValue, Number(this.minValue)));
|
|
104
103
|
this.value = String(newValue.toFixed(decimalPlaces));
|
|
@@ -1,9 +1,18 @@
|
|
|
1
1
|
<%= render Polaris::LabelledComponent.new(**@wrapper_arguments) do %>
|
|
2
2
|
<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
|
|
3
3
|
<% if @form.present? && @attribute.present? %>
|
|
4
|
-
<%= @form.select(
|
|
4
|
+
<%= @form.select(
|
|
5
|
+
@attribute,
|
|
6
|
+
options_for_select(@options, selected: @selected, disabled: @disabled_options),
|
|
7
|
+
@select_options,
|
|
8
|
+
@input_options,
|
|
9
|
+
) %>
|
|
5
10
|
<% else %>
|
|
6
|
-
<%= select_tag(
|
|
11
|
+
<%= select_tag(
|
|
12
|
+
@name,
|
|
13
|
+
options_for_select(@options, selected: @selected, disabled: @disabled_options),
|
|
14
|
+
@input_options,
|
|
15
|
+
) %>
|
|
7
16
|
<% end %>
|
|
8
17
|
|
|
9
18
|
<div
|
|
@@ -8,6 +8,7 @@ module Polaris
|
|
|
8
8
|
name: nil,
|
|
9
9
|
options:,
|
|
10
10
|
selected: nil,
|
|
11
|
+
disabled_options: nil,
|
|
11
12
|
label: nil,
|
|
12
13
|
label_hidden: false,
|
|
13
14
|
label_inline: false,
|
|
@@ -26,6 +27,7 @@ module Polaris
|
|
|
26
27
|
@name = name
|
|
27
28
|
@options = options
|
|
28
29
|
@selected = selected
|
|
30
|
+
@disabled_options = disabled_options
|
|
29
31
|
@label = label
|
|
30
32
|
@label_hidden = label_hidden
|
|
31
33
|
@label_inline = label_inline
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Polaris
|
|
4
|
+
class SkeletonBodyTextComponent < Polaris::NewComponent
|
|
5
|
+
def initialize(lines: 3, **system_arguments)
|
|
6
|
+
@lines = lines
|
|
7
|
+
@system_arguments = system_arguments
|
|
8
|
+
@system_arguments[:tag] = "div"
|
|
9
|
+
@system_arguments[:classes] = class_names(
|
|
10
|
+
@system_arguments[:classes],
|
|
11
|
+
"Polaris-SkeletonBodyText__SkeletonBodyTextContainer",
|
|
12
|
+
)
|
|
13
|
+
end
|
|
14
|
+
end
|
|
15
|
+
end
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Polaris
|
|
4
|
+
class TagComponent < Polaris::NewComponent
|
|
5
|
+
renders_one :remove_button, lambda { |**system_arguments|
|
|
6
|
+
render Polaris::BaseButton.new(
|
|
7
|
+
classes: "Polaris-Tag__Button",
|
|
8
|
+
disabled: @disabled,
|
|
9
|
+
**system_arguments
|
|
10
|
+
) do |button|
|
|
11
|
+
polaris_icon(name: "CancelSmallMinor")
|
|
12
|
+
end
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
def initialize(clickable: false, disabled: false, **system_arguments)
|
|
16
|
+
@clickable = clickable
|
|
17
|
+
@disabled = disabled
|
|
18
|
+
|
|
19
|
+
@system_arguments = system_arguments
|
|
20
|
+
end
|
|
21
|
+
|
|
22
|
+
def system_arguments
|
|
23
|
+
@system_arguments.tap do |opts|
|
|
24
|
+
opts[:tag] = @clickable ? "button" : "span"
|
|
25
|
+
opts[:classes] = class_names(
|
|
26
|
+
@system_arguments[:classes],
|
|
27
|
+
"Polaris-Tag",
|
|
28
|
+
"Polaris-Tag--clickable" => @clickable,
|
|
29
|
+
"Polaris-Tag--disabled" => @disabled,
|
|
30
|
+
"Polaris-Tag--removable" => remove_button.present?
|
|
31
|
+
)
|
|
32
|
+
end
|
|
33
|
+
end
|
|
34
|
+
end
|
|
35
|
+
end
|
|
@@ -42,6 +42,10 @@ module Polaris
|
|
|
42
42
|
if options[:error_hidden] && options[:error]
|
|
43
43
|
options[:error] = !!options[:error]
|
|
44
44
|
end
|
|
45
|
+
value = object&.public_send(method)
|
|
46
|
+
if value.present?
|
|
47
|
+
options[:selected] = value
|
|
48
|
+
end
|
|
45
49
|
render Polaris::SelectComponent.new(form: self, attribute: method, **options, &block)
|
|
46
50
|
end
|
|
47
51
|
end
|
|
@@ -37,6 +37,8 @@ module Polaris
|
|
|
37
37
|
stack: "Polaris::StackComponent",
|
|
38
38
|
subheading: "Polaris::SubheadingComponent",
|
|
39
39
|
spinner: "Polaris::SpinnerComponent",
|
|
40
|
+
skeleton_body_text: "Polaris::SkeletonBodyTextComponent",
|
|
41
|
+
tag: "Polaris::TagComponent",
|
|
40
42
|
text_container: "Polaris::TextContainerComponent",
|
|
41
43
|
text_field: "Polaris::TextFieldComponent",
|
|
42
44
|
text_style: "Polaris::TextStyleComponent",
|
|
@@ -0,0 +1,35 @@
|
|
|
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(application)"
|
|
28
|
+
end
|
|
29
|
+
end
|
|
30
|
+
|
|
31
|
+
def show_readme
|
|
32
|
+
readme 'README'
|
|
33
|
+
end
|
|
34
|
+
end
|
|
35
|
+
end
|
|
@@ -0,0 +1,14 @@
|
|
|
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
|
+
===============================================================================
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Application } from 'stimulus'
|
|
2
|
+
import { definitionsFromContext } from 'stimulus/webpack-helpers'
|
|
3
|
+
|
|
4
|
+
const application = Application.start(document.documentElement)
|
|
5
|
+
const context = require.context('.', true, /_controller\.js$/)
|
|
6
|
+
application.load(definitionsFromContext(context))
|
|
7
|
+
|
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.2.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: 2021-08
|
|
12
|
+
date: 2021-09-08 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: rails
|
|
@@ -539,11 +539,15 @@ files:
|
|
|
539
539
|
- app/components/polaris/select_component.rb
|
|
540
540
|
- app/components/polaris/shopify_navigation_component.html.erb
|
|
541
541
|
- app/components/polaris/shopify_navigation_component.rb
|
|
542
|
+
- app/components/polaris/skeleton_body_text_component.html.erb
|
|
543
|
+
- app/components/polaris/skeleton_body_text_component.rb
|
|
542
544
|
- app/components/polaris/spinner_component.html.erb
|
|
543
545
|
- app/components/polaris/spinner_component.rb
|
|
544
546
|
- app/components/polaris/stack_component.html.erb
|
|
545
547
|
- app/components/polaris/stack_component.rb
|
|
546
548
|
- app/components/polaris/subheading_component.rb
|
|
549
|
+
- app/components/polaris/tag_component.html.erb
|
|
550
|
+
- app/components/polaris/tag_component.rb
|
|
547
551
|
- app/components/polaris/text_container_component.rb
|
|
548
552
|
- app/components/polaris/text_field_component.html.erb
|
|
549
553
|
- app/components/polaris/text_field_component.rb
|
|
@@ -564,6 +568,10 @@ files:
|
|
|
564
568
|
- app/javascript/polaris/select_controller.js
|
|
565
569
|
- app/javascript/polaris/text_field_controller.js
|
|
566
570
|
- app/validators/type_validator.rb
|
|
571
|
+
- lib/generators/polaris_view_components/USAGE
|
|
572
|
+
- lib/generators/polaris_view_components/install_generator.rb
|
|
573
|
+
- lib/generators/polaris_view_components/templates/README
|
|
574
|
+
- lib/generators/polaris_view_components/templates/stimulus_index.js
|
|
567
575
|
- lib/polaris/view_components.rb
|
|
568
576
|
- lib/polaris/view_components/engine.rb
|
|
569
577
|
- lib/polaris/view_components/version.rb
|