storybook_engine 1.0.0 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 259c82e1e29f570fc6332c61dcc59500ca1d120c30bef04f82559cd7b658e28c
-  data.tar.gz: f42c8bbf6a9a2c0d9d40746fd5cee69e5873ddd7540d2aa5a1063d2c49d38d3f
+  metadata.gz: e7aa3da5c44192a6dc68131d8ded024feb262bd57aa0d26438721367ed1304ca
+  data.tar.gz: 0d045606313ee5676e43b037aa3f37ce9f12f30cab5fc21e40fa75f655d6e5e8
 SHA512:
-  metadata.gz: 6b873c27638be9137ebcce48a19238a4fabc518c2afa03ee90059c78608ee58d7f1a6d27f2afb87b0c6fde83e1e6e606ce4f1042e1076dbf3d4f904dd50fd655
-  data.tar.gz: ee452c15d91348445e79abbe86b0f59712e019af10a03718f8a1a8d7085c7767d30b984b382e977f9218214351d7f182a8f909049a6668e9d85a076ffbef6e57
+  metadata.gz: 54fed5ba1bb52f919c7d19a5d57331fedeced8fdcf6a0ee288a1507ff630a82e7cb7417ed09c360b1aeb69f01c20fecbabf6edb3b77e8fce5cae6bf782d021c1
+  data.tar.gz: 162ea2792b093d87e31b8f819d4da26641e00860fea44c95df8f1acfcdec0a759e8307c74e67e0f1819ccfe8b3d9129ab6246eaf868ce4f9860c68e633466a64

data/README.md

@@ -1,9 +1,11 @@
 # StorybookEngine
-Short description and motivation.
+Storybook with view components rails engine
 
 ## Usage
-How to use my plugin.
-
+##### Button
+```ruby
+= render(ButtonComponent.new(options: {type: "submit"},classes: "w-100")) { "Save" }
+```
 ## Installation
 Add this line to your application's Gemfile:
 
@@ -21,8 +23,10 @@ Or install it yourself as:
 $ gem install storybook_engine
 ```
 
-## Contributing
-Contribution directions go here.
+After add gem please add this line into your applications.scss:
+```bash
+@import "storybook_engine/application";
+```
 
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/stylesheets/storybook_engine/{application.scss → _storybook_engine.scss}

@@ -13,3 +13,9 @@
  *= require_tree .
  *= require_self
  */
+
+@import "helpers/mixins";
+@import "helpers/colors";
+@import "helpers/common-used";
+
+@import "components/buttons";

data/app/assets/stylesheets/storybook_engine/components/_buttons.scss

@@ -0,0 +1,59 @@
+@import "../helpers/colors";
+
+.zenhr-button {
+  padding: 0.9rem;
+  height: 3.5rem;
+  min-width: 9rem;
+
+  &:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+.zenhr-primary-button {
+  color: $white;
+  --bg-opacity: 1;
+  background-color: $primary-blue;
+  border-color: $primary-blue;
+
+  &:hover, :focus {
+    color: $primary-blue;
+    background-color: $white;
+    border-color: $primary-blue;
+    box-shadow: 0 0 0.25rem 0 $primary-blue;
+  }
+
+  &:disabled {
+    opacity: 0.65;
+  }
+}
+
+.zenhr-danger-button {
+  color: $white;
+  --bg-opacity: 1;
+  background-color: #f56565;
+
+  &:hover, :focus {
+    background-color: #e53e3e;
+  }
+
+  &:disabled {
+    background-color: #feb2b2;
+  }
+}
+
+.zenhr-outline-button {
+  color: #805ad5;
+  border-color: #805ad5;
+  --bg-opacity: 1;
+  background-color: $white;
+
+  &:hover, :focus {
+    background-color: #edf2f7;
+  }
+
+  &:disabled {
+    background-color: #f7fafc;
+  }
+}

data/app/assets/stylesheets/storybook_engine/helpers/_colors.scss

@@ -0,0 +1,5 @@
+$charcoal: #484848;
+$red: #e30b1c;
+$black: #000;
+$white: #fff;
+$primary-blue: #007bff;

data/app/assets/stylesheets/storybook_engine/helpers/_common-used.scss

@@ -0,0 +1,31 @@
+@import "colors";
+@import "mixins";
+
+.delete-action {
+  cursor: pointer;
+
+  &:hover {
+    color: $red;
+  }
+}
+
+.table {
+  @include desktop {
+    display: table;
+  }
+}
+
+.error-message {
+  color: $red;
+  font-size: 0.75rem;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.zenhr-link {
+  &:hover {
+    text-decoration: none;
+  }
+}

data/app/assets/stylesheets/storybook_engine/helpers/_mixins.scss

@@ -0,0 +1,13 @@
+// Custom small screen
+@mixin mobile {
+  @media (max-width: 768px) {
+    @content;
+  }
+}
+
+// Custom large screen
+@mixin desktop {
+  @media (min-width: 769px) {
+    @content;
+  }
+}

data/app/components/{storybook_engine → ButtonComponent}/button_component.html.haml

@@ -1,2 +1,2 @@
 %button{{class: classes}.merge(@options)}
-= content
+  = content

data/app/components/InputComponent/input_component.html.haml

@@ -0,0 +1,5 @@
+.form-group
+  - if !@options[:label].nil?
+    %label{class: @options[:label_classes]}
+      = @options[:label]
+  %input{class: classes,"name" => @options[:field_name],"value"=> @options[:default_value],"placeholder"=>@options[:placeholder]}

data/app/components/InputComponent/input_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class InputComponent < ViewComponent::Base
+  BASE_CLASSES = "form-control"
+
+  def initialize(options:,classes: '')
+    @options = options
+    @classes = classes
+  end
+
+  def classes
+    "#{@classes} #{BASE_CLASSES}"
+  end
+
+end

data/app/components/LabelComponent/label_component.html.haml

@@ -0,0 +1,2 @@
+%label{{class: @classes }.merge(@options)}
+  = content

data/app/components/LabelComponent/label_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class LabelComponent < ViewComponent::Base
+  def initialize(options:, classes: '')
+    @options = options
+    @classes = classes
+  end
+
+end

data/app/components/LinkComponent/link_component.html.haml

@@ -0,0 +1,2 @@
+%a{{class: classes}.merge(@options)}
+  = content

data/app/components/LinkComponent/link_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class LinkComponent < ViewComponent::Base
+  BASE_CLASSES = "zenhr-link"
+
+  def initialize(options:, classes: '')
+    @options = options
+    @classes = classes
+  end
+
+  def classes
+    "#{BASE_CLASSES} #{@classes}"
+  end
+
+end

data/app/views/layouts/storybook_engine/application.html.erb

@@ -5,7 +5,7 @@
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
 
-  <%= stylesheet_link_tag "storybook_engine/application", media: "all" %>
+  <%= stylesheet_link_tag "storybook_engine/_storybook_engine", media: "all" %>
 </head>
 <body>
 

data/lib/storybook_engine/version.rb

@@ -1,3 +1,3 @@
 module StorybookEngine
-  VERSION = '1.0.0'
+  VERSION = '1.4.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: storybook_engine
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.4.0
 platform: ruby
 authors:
 - Amr Abu Aza
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-08-25 00:00:00.000000000 Z
+date: 2021-08-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -41,9 +41,19 @@ files:
 - README.md
 - Rakefile
 - app/assets/config/storybook_engine_manifest.js
-- app/assets/stylesheets/storybook_engine/application.scss
-- app/components/storybook_engine/button_component.html.haml
-- app/components/storybook_engine/button_component.rb
+- app/assets/stylesheets/storybook_engine/_storybook_engine.scss
+- app/assets/stylesheets/storybook_engine/components/_buttons.scss
+- app/assets/stylesheets/storybook_engine/helpers/_colors.scss
+- app/assets/stylesheets/storybook_engine/helpers/_common-used.scss
+- app/assets/stylesheets/storybook_engine/helpers/_mixins.scss
+- app/components/ButtonComponent/button_component.html.haml
+- app/components/ButtonComponent/button_component.rb
+- app/components/InputComponent/input_component.html.haml
+- app/components/InputComponent/input_component.rb
+- app/components/LabelComponent/label_component.html.haml
+- app/components/LabelComponent/label_component.rb
+- app/components/LinkComponent/link_component.html.haml
+- app/components/LinkComponent/link_component.rb
 - app/controllers/storybook_engine/application_controller.rb
 - app/helpers/storybook_engine/application_helper.rb
 - app/jobs/storybook_engine/application_job.rb