storybook_engine 0.8.0 → 1.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 +9 -5
- data/app/assets/stylesheets/storybook_engine/application.scss +6 -0
- data/app/assets/stylesheets/storybook_engine/components/_buttons.scss +59 -0
- data/app/assets/stylesheets/storybook_engine/helpers/_colors.scss +5 -0
- data/app/assets/stylesheets/storybook_engine/helpers/_common-used.scss +31 -0
- data/app/assets/stylesheets/storybook_engine/helpers/_mixins.scss +13 -0
- data/app/components/storybook_engine/button_component.html.haml +1 -1
- data/app/components/storybook_engine/input_component.html.haml +5 -0
- data/app/components/storybook_engine/input_component.rb +15 -0
- data/app/components/storybook_engine/label_component.html.haml +2 -0
- data/app/components/storybook_engine/label_component.rb +9 -0
- data/app/components/storybook_engine/link_component.html.haml +2 -0
- data/app/components/storybook_engine/link_component.rb +15 -0
- data/lib/storybook_engine/engine.rb +1 -0
- data/lib/storybook_engine/version.rb +1 -1
- metadata +12 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 464a25dc1e8c7cbeee56b889ad85d03a20d1d6300a5b269395e0be23b5c40878
|
4
|
+
data.tar.gz: 92d454785ddbcecbd4c4c88e8f5d04c200acbce4743e32acaf1178d77b785fa5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 44ecbc7025733af308a0a743e46e522fbd21305c1c49af6e251e569f957b64af0b5b46a3d59ad58b2a8800043bfab8d3ec872e6ba625940cbdbb2a62cc3d604d
|
7
|
+
data.tar.gz: c7fc8f4da56516eccf094d16431c87b066da8fc46e25306bb70227e91afdeaa5bb910fc0db9fde6772aeb593fb7c9d637d898503fa2c86b561128c26d7cad02a
|
data/README.md
CHANGED
@@ -1,9 +1,11 @@
|
|
1
1
|
# StorybookEngine
|
2
|
-
|
2
|
+
Storybook with view components rails engine
|
3
3
|
|
4
4
|
## Usage
|
5
|
-
|
6
|
-
|
5
|
+
##### Button
|
6
|
+
```ruby
|
7
|
+
= render(ButtonComponent.new(options: {type: "submit"},classes: "w-100")) { "Save" }
|
8
|
+
```
|
7
9
|
## Installation
|
8
10
|
Add this line to your application's Gemfile:
|
9
11
|
|
@@ -21,8 +23,10 @@ Or install it yourself as:
|
|
21
23
|
$ gem install storybook_engine
|
22
24
|
```
|
23
25
|
|
24
|
-
|
25
|
-
|
26
|
+
After add gem please add this line into your applications.scss:
|
27
|
+
```bash
|
28
|
+
@import "storybook_engine/application";
|
29
|
+
```
|
26
30
|
|
27
31
|
## License
|
28
32
|
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
@@ -0,0 +1,59 @@
|
|
1
|
+
@import "../helpers/colors";
|
2
|
+
|
3
|
+
.zenhr-button {
|
4
|
+
padding: 0.9rem;
|
5
|
+
height: 3.5rem;
|
6
|
+
min-width: 9rem;
|
7
|
+
|
8
|
+
&:disabled {
|
9
|
+
cursor: not-allowed;
|
10
|
+
pointer-events: none;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
.zenhr-primary-button {
|
15
|
+
color: $white;
|
16
|
+
--bg-opacity: 1;
|
17
|
+
background-color: $primary-blue;
|
18
|
+
border-color: $primary-blue;
|
19
|
+
|
20
|
+
&:hover, :focus {
|
21
|
+
color: $primary-blue;
|
22
|
+
background-color: $white;
|
23
|
+
border-color: $primary-blue;
|
24
|
+
box-shadow: 0 0 0.25rem 0 $primary-blue;
|
25
|
+
}
|
26
|
+
|
27
|
+
&:disabled {
|
28
|
+
opacity: 0.65;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
.zenhr-danger-button {
|
33
|
+
color: $white;
|
34
|
+
--bg-opacity: 1;
|
35
|
+
background-color: #f56565;
|
36
|
+
|
37
|
+
&:hover, :focus {
|
38
|
+
background-color: #e53e3e;
|
39
|
+
}
|
40
|
+
|
41
|
+
&:disabled {
|
42
|
+
background-color: #feb2b2;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
|
46
|
+
.zenhr-outline-button {
|
47
|
+
color: #805ad5;
|
48
|
+
border-color: #805ad5;
|
49
|
+
--bg-opacity: 1;
|
50
|
+
background-color: $white;
|
51
|
+
|
52
|
+
&:hover, :focus {
|
53
|
+
background-color: #edf2f7;
|
54
|
+
}
|
55
|
+
|
56
|
+
&:disabled {
|
57
|
+
background-color: #f7fafc;
|
58
|
+
}
|
59
|
+
}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
@import "colors";
|
2
|
+
@import "mixins";
|
3
|
+
|
4
|
+
.delete-action {
|
5
|
+
cursor: pointer;
|
6
|
+
|
7
|
+
&:hover {
|
8
|
+
color: $red;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
|
12
|
+
.table {
|
13
|
+
@include desktop {
|
14
|
+
display: table;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
.error-message {
|
19
|
+
color: $red;
|
20
|
+
font-size: 0.75rem;
|
21
|
+
}
|
22
|
+
|
23
|
+
.cursor-pointer {
|
24
|
+
cursor: pointer;
|
25
|
+
}
|
26
|
+
|
27
|
+
.zenhr-link {
|
28
|
+
&:hover {
|
29
|
+
text-decoration: none;
|
30
|
+
}
|
31
|
+
}
|
@@ -1,2 +1,2 @@
|
|
1
1
|
%button{{class: classes}.merge(@options)}
|
2
|
-
= content
|
2
|
+
= content
|
@@ -0,0 +1,15 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
class InputComponent < ViewComponent::Base
|
4
|
+
BASE_CLASSES = "form-control"
|
5
|
+
|
6
|
+
def initialize(options:,classes: '')
|
7
|
+
@options = options
|
8
|
+
@classes = classes
|
9
|
+
end
|
10
|
+
|
11
|
+
def classes
|
12
|
+
"#{@classes} #{BASE_CLASSES}"
|
13
|
+
end
|
14
|
+
|
15
|
+
end
|
@@ -0,0 +1,15 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
class LinkComponent < ViewComponent::Base
|
4
|
+
BASE_CLASSES = "zenhr-link"
|
5
|
+
|
6
|
+
def initialize(options:, classes: '')
|
7
|
+
@options = options
|
8
|
+
@classes = classes
|
9
|
+
end
|
10
|
+
|
11
|
+
def classes
|
12
|
+
"#{BASE_CLASSES} #{@classes}"
|
13
|
+
end
|
14
|
+
|
15
|
+
end
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: storybook_engine
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
4
|
+
version: 1.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Amr Abu Aza
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2021-08-
|
11
|
+
date: 2021-08-26 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -42,8 +42,18 @@ files:
|
|
42
42
|
- Rakefile
|
43
43
|
- app/assets/config/storybook_engine_manifest.js
|
44
44
|
- app/assets/stylesheets/storybook_engine/application.scss
|
45
|
+
- app/assets/stylesheets/storybook_engine/components/_buttons.scss
|
46
|
+
- app/assets/stylesheets/storybook_engine/helpers/_colors.scss
|
47
|
+
- app/assets/stylesheets/storybook_engine/helpers/_common-used.scss
|
48
|
+
- app/assets/stylesheets/storybook_engine/helpers/_mixins.scss
|
45
49
|
- app/components/storybook_engine/button_component.html.haml
|
46
50
|
- app/components/storybook_engine/button_component.rb
|
51
|
+
- app/components/storybook_engine/input_component.html.haml
|
52
|
+
- app/components/storybook_engine/input_component.rb
|
53
|
+
- app/components/storybook_engine/label_component.html.haml
|
54
|
+
- app/components/storybook_engine/label_component.rb
|
55
|
+
- app/components/storybook_engine/link_component.html.haml
|
56
|
+
- app/components/storybook_engine/link_component.rb
|
47
57
|
- app/controllers/storybook_engine/application_controller.rb
|
48
58
|
- app/helpers/storybook_engine/application_helper.rb
|
49
59
|
- app/jobs/storybook_engine/application_job.rb
|