uistiti 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: be75c25b3458c1725fc90ee1ae2a269d0a893b99cec73a2f959f8254a3c010e9
-  data.tar.gz: 8ad751062c1aa899d4dc99297a74539d930c552a3127cf5203322313a7c3c05e
+  metadata.gz: 155ff6df2e902fd9da022f3b8b46e7a0b5d6ff5ba68fd98766beea271f214d9a
+  data.tar.gz: 5418a7b8f51140f6cb0a0dce3a50edd29afcececfb0f93bc13d0e6663dbbf9ce
 SHA512:
-  metadata.gz: da74b0ddbdb339df8763626723d26be39d76f6b3be157cd04f65ee34bd3e20b403b4dad8c4620e6a7163688d191d3b694982f07fb8c18a26ed05a220a824203c
-  data.tar.gz: 9494628a2c341348d1d22720c1e19b268e781500c0dfe417c604348150ee00797e1d3ddffa8c5a01fb55cd311978cf6d624d6de8a41e781c8b541afe031dd5c6
+  metadata.gz: 1fd1fb301c61c5f2dd44fac7595bf261d81e7085556360fd421232258a0c00774b9028a78146108e7c41aa24f34494d787bfb54a4c2203fd41a046b2c38dcc70
+  data.tar.gz: 0c142f19d729edd179dae85047ccb0a07d4443d42c8eb4ce556e3fcdf0b027213b9cca0bacd060d26afc2fe84d4e7867a045eceea8720e94d8dc1608285b1f7d

data/README.md

@@ -1,8 +1,13 @@
-# Uistiti
-Short description and motivation.
+# Uistiti UI kit for Rails
+This gem holds everything you need (UI speaking) to create nice User interface.
+It comes with CSS style (customisable for sure) and Javascript out of the bout. 
+For productivity enhancement i also published a [VsCode extension](https://marketplace.visualstudio.com/items?itemName=UistitiUiKit.uistitirails) wich give you snippets for all the component of the library.
+
+![uistiti_extension](https://github.com/rails-hackathon/team-173/assets/75135824/afdcacc9-81b7-4ec1-9eb2-69e01a21af12)
+
 
 ## Usage
-How to use my plugin.
+How to use the plug in :
 
 ## Installation
 Add this line to your application's Gemfile:
@@ -16,11 +21,33 @@ And then execute:
 $ bundle
 ```
 
-Or install it yourself as:
-```bash
-$ gem install uistiti
+Now in your views you can use Uistiti components just as normal ViewComponents :
+```ruby
+<%= render Uistiti::Alpha::Flex.new(direction: :column, justify_content: :space_between)  do %>
+ <%= items %>
+<% end %>
+```
+
+For the CSS & style :
+All the CSS files relies on a set of [variables](https://github.com/rails-hackathon/team-173/blob/development/app/assets/stylesheets/uistiti/config/_variables.scss), if you want to start using styled component you can import them in you application.scss file
+
+```css
+//app/assets/stylesheets/aplication.scss
+@import 'uistiti/config/variables';
+```
+If you want to update the colors and the different design tokens, you can dowload the file and modify the values you want and import the local file instead of the one from the gem.
+
+Then, for each component you use you can import the related css
+```css
+//app/assets/stylesheets/aplication.scss
+@import 'uistiti/config/variables';
+@import 'uistiti/components/alpha/flex';
 ```
 
+For Component with javascript behavior, there is nothing to do, the controllers are automatically registered through the asset pipe line and import-map.
+
+
+
 ## Contributing
 Contribution directions go here.
 

data/app/assets/javascript/controllers/uistiti/alpha/button/button_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus";
+
+// this stimulus controller can be registered with identifier : uistiti--alpha--button
+export default class extends Controller {
+  connect() {
+    console.log("Hello, from button stimulus controller !", this.element);
+  }
+}

data/app/assets/javascript/controllers/uistiti/alpha/container/container_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus";
+
+// this stimulus controller can be registered with identifier : uistiti--alpha--container
+export default class extends Controller {
+  connect() {
+    console.log("Hello, from container stimulus controller !", this.element);
+  }
+}

data/app/assets/javascript/controllers/uistiti/alpha/form_input_group/form_input_group_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus";
+
+// this stimulus controller can be registered with identifier : uistiti--alpha--form-input-group
+export default class extends Controller {
+  connect() {
+    console.log("Hello, from form_input_group stimulus controller !", this.element);
+  }
+}

data/app/assets/javascript/controllers/uistiti/alpha/form_submit/form_submit_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus";
+
+// this stimulus controller can be registered with identifier : uistiti--alpha--form-submit
+export default class extends Controller {
+  connect() {
+    console.log("Hello, from form_submit stimulus controller !", this.element);
+  }
+}

data/app/assets/stylesheets/uistiti/components/alpha/button.scss

@@ -0,0 +1,63 @@
+/* CSS for Button  */
+
+.Button {
+  display: inline-block;
+  padding: $size-space-small $size-space-small;
+  background-origin: border-box; // Invisible borders with linear gradients
+  background-color: transparent;
+  border: solid 2px transparent;
+  border-radius: $radii-base-sm;
+  font-weight: bold;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  transition: filter 400ms, color 200ms;
+
+  &:hover,
+  &:focus,
+  &:focus-within,
+  &:active {
+    transition: filter 250ms, color 200ms;
+  }
+
+  &--primary {
+      color: $color-base-white;
+      // background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-rotate));
+      background-image: linear-gradient(to right, $color-background-button-primary-base, $color-background-button-primary-base);
+  
+      &:hover,
+      &:focus,
+      &:focus-within,
+      &:active {
+        color: $color-base-white;
+        filter: saturate(1.4) brightness(115%);
+      }
+    }
+  &--secondary {
+    color: $color-base-white;
+    // background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-rotate));
+    background-image: linear-gradient(to right, $color-background-button-secondary-base, $color-background-button-secondary-base);
+
+    &:hover,
+    &:focus,
+    &:focus-within,
+    &:active {
+      color: $color-base-white;
+      filter: saturate(1.4) brightness(115%);
+    }
+  }
+    &--danger {
+      color: $color-base-white;
+      // background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-rotate));
+      background-image: linear-gradient(to right, $color-background-button-error-base, $color-background-button-error-base);
+  
+      &:hover,
+      &:focus,
+      &:focus-within,
+      &:active {
+        color: $color-base-white;
+        filter: saturate(1.4) brightness(115%);
+      }
+    }
+  
+}

data/app/assets/stylesheets/uistiti/components/alpha/container.scss

@@ -0,0 +1,9 @@
+/* CSS for Container  */
+
+.Container {
+  padding-inline: $size-space-medium;
+
+  @media (min-width: $breakpoint-medium) {
+    padding-inline: $size-space-xxl;
+  }
+}

data/app/assets/stylesheets/uistiti/components/alpha/form_input_group.scss

@@ -0,0 +1,5 @@
+/* CSS for FormInputGroup  */
+
+.FormInputGroup {
+
+}

data/app/assets/stylesheets/uistiti/components/alpha/form_submit.scss

@@ -0,0 +1,3 @@
+/* CSS for FormSubmit  */
+@import "components/alpha/form_submit";
+.FormSubmit {}

data/app/assets/stylesheets/uistiti/config/_variables.scss

@@ -296,6 +296,7 @@ $color-background-button-primary-active: #00796b;
 $color-background-button-secondary-base: #3f51b5;
 $color-background-button-secondary-disabled: #7986cb;
 $color-background-button-secondary-active: #303f9f;
+$color-background-button-error-base: $color-background-error;
 //############### BACKGROUND OVERLAY ###############
 $color-background-overlay-light: rgba(255, 255, 255, 0.8);
 $color-background-overlay-dark: rgba(0, 0, 0, 0.27);
@@ -388,3 +389,10 @@ $size-space-large: 1.5rem;
 $size-space-xl: 2rem;
 $size-space-xxl: 3rem;
 $size-space-base: 1rem;
+//##################################################
+//################## BREAKPOINTS ###################
+//##################################################
+$breakpoint-small: 544px;
+$breakpoint-medium:	768px;
+$breakpoint-large:	1012px;
+$breakpoint-xl:	1280px;

data/app/assets/stylesheets/uistiti/uistiti.scss

@@ -18,3 +18,7 @@
 @import "components/alpha/flex";
 @import "components/alpha/navbar";
 @import "components/alpha/image";
+@import "components/alpha/container";
+@import "components/alpha/button";
+@import "components/alpha/form_submit";
+@import "components/alpha/form_input_group";

data/app/components/uistiti/alpha/button.html.erb

@@ -0,0 +1,3 @@
+<%= content_tag :div, class: classes do -%>
+  <%= content %>
+<% end -%>

data/app/components/uistiti/alpha/button.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Uistiti
+  module Alpha
+    class Button < ViewComponent::Base
+      def initialize(color:)
+        super()
+        
+        @color = color
+      end
+
+      private
+
+      def classes
+        [
+          "Button",
+          "Button--#{@color}"
+        ]
+      end
+    end
+  end
+end

data/app/components/uistiti/alpha/container.html.erb

@@ -0,0 +1,3 @@
+<%= content_tag :div, class: 'Container' do -%>
+  <%= content %>
+<% end -%>

data/app/components/uistiti/alpha/container.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Uistiti
+  module Alpha
+    class Container < ViewComponent::Base
+      def initialize()
+        super()
+        
+      end
+    end
+  end
+end

data/app/components/uistiti/alpha/form_input_group.html.erb

@@ -0,0 +1,4 @@
+<%= render Uistiti::Alpha::Flex.new(direction: @direction)  do %>
+  <label for="<%= @field %>"><%= @label %></label>
+  <%= @form.send(@type, @field, required: @required )%>
+<% end %>

data/app/components/uistiti/alpha/form_input_group.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Uistiti
+  module Alpha
+    class FormInputGroup < ViewComponent::Base
+      def initialize(form:, type:, field: ,label: , required: false, direction: :column)
+        super()
+        
+        @form = form 
+        @type = type
+        @field = field
+        @label= label
+        @required = required       
+        @direction = direction        
+      end
+    end
+  end
+end

data/app/components/uistiti/alpha/form_submit.html.erb

@@ -0,0 +1 @@
+<%= @form.submit @text, class: classes %>

data/app/components/uistiti/alpha/form_submit.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Uistiti
+  module Alpha
+    class FormSubmit < ViewComponent::Base
+      def initialize(form: ,text: ,color:)
+        super()
+        
+        @form = form  
+        @text = text      
+        @color = color        
+      end
+
+      def classes
+        [ 
+          "FormSubmit",
+          "Button", 
+          "Button--#{@color}"
+        ]
+      end
+    end
+  end
+end

data/app/views/layouts/uistiti/component_preview.html.erb

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Dummy</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <style>
+      body {
+        background: beige;
+      }
+    </style>
+    <%= stylesheet_link_tag "application" %>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>

data/lib/uistiti/engine.rb

@@ -6,7 +6,10 @@ module Uistiti
     isolate_namespace Uistiti
 
     #Show to lookbook where it can find the previews
-    Lookbook.config.preview_paths = [File.join(root, 'test/components/previews')]
-    Lookbook.config.preview_layout = "component_preview"
+    puts '*'*80
+    puts File.join(Uistiti::Engine.root, 'test/components/previews')
+    puts '*'*80
+    Lookbook.config.preview_paths = [File.join(Uistiti::Engine.root, 'test/components/previews')]
+    Lookbook.config.preview_layout = "uistiti/component_preview"
   end
 end

data/lib/uistiti/version.rb

@@ -1,3 +1,3 @@
 module Uistiti
-  VERSION = "0.1.0"
+  VERSION = "0.1.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: uistiti
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - Tom Ecrepont
@@ -70,20 +70,36 @@ files:
 - README.md
 - Rakefile
 - app/assets/config/uistiti_manifest.js
+- app/assets/javascript/controllers/uistiti/alpha/button/button_controller.js
+- app/assets/javascript/controllers/uistiti/alpha/container/container_controller.js
 - app/assets/javascript/controllers/uistiti/alpha/flex/flex_controller.js
+- app/assets/javascript/controllers/uistiti/alpha/form_input_group/form_input_group_controller.js
+- app/assets/javascript/controllers/uistiti/alpha/form_submit/form_submit_controller.js
 - app/assets/javascript/controllers/uistiti/alpha/image/image_controller.js
 - app/assets/javascript/controllers/uistiti/alpha/link/link_controller.js
 - app/assets/javascript/controllers/uistiti/alpha/main_layout/main_layout_controller.js
 - app/assets/javascript/controllers/uistiti/alpha/navbar/navbar_controller.js
+- app/assets/stylesheets/uistiti/components/alpha/button.scss
+- app/assets/stylesheets/uistiti/components/alpha/container.scss
 - app/assets/stylesheets/uistiti/components/alpha/flex.scss
+- app/assets/stylesheets/uistiti/components/alpha/form_input_group.scss
+- app/assets/stylesheets/uistiti/components/alpha/form_submit.scss
 - app/assets/stylesheets/uistiti/components/alpha/image.scss
 - app/assets/stylesheets/uistiti/components/alpha/link.scss
 - app/assets/stylesheets/uistiti/components/alpha/main_layout.scss
 - app/assets/stylesheets/uistiti/components/alpha/navbar.scss
 - app/assets/stylesheets/uistiti/config/_variables.scss
 - app/assets/stylesheets/uistiti/uistiti.scss
+- app/components/uistiti/alpha/button.html.erb
+- app/components/uistiti/alpha/button.rb
+- app/components/uistiti/alpha/container.html.erb
+- app/components/uistiti/alpha/container.rb
 - app/components/uistiti/alpha/flex.html.erb
 - app/components/uistiti/alpha/flex.rb
+- app/components/uistiti/alpha/form_input_group.html.erb
+- app/components/uistiti/alpha/form_input_group.rb
+- app/components/uistiti/alpha/form_submit.html.erb
+- app/components/uistiti/alpha/form_submit.rb
 - app/components/uistiti/alpha/image.html.erb
 - app/components/uistiti/alpha/image.rb
 - app/components/uistiti/alpha/link.html.erb
@@ -98,6 +114,7 @@ files:
 - app/mailers/uistiti/application_mailer.rb
 - app/models/uistiti/application_record.rb
 - app/views/layouts/uistiti/application.html.erb
+- app/views/layouts/uistiti/component_preview.html.erb
 - config/routes.rb
 - lib/generators/uistiti/component_generator.rb
 - lib/generators/uistiti/templates/component.html.tt