uistiti 0.1.4 → 0.2.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1e5b828febae7e765e280a4d6b868ed9471e4ea645b850852dbebc1cb5f72190
-  data.tar.gz: 7941b8fb623d6cb435fa5875854f2c256fd03f9917e1a6d4384bdda042f21441
+  metadata.gz: b9732c4f34313d6c1ab97d5edb45e533acbf754d9d69341f91885b0396029f44
+  data.tar.gz: 4aef700894a086669e3c3d1920760e66ce9d8a0c9aad4865d5fbcd5d60f909d9
 SHA512:
-  metadata.gz: eaffbd0add2c858f4ceab5d2e5a9aa2850b69aca8bfb130f2c8778a60c8a54c8a70d60464e0491fa2357f8a3f6c97f4eb41c660e4336de804cfdb04bf4c5a87d
-  data.tar.gz: 5ac99337319d212ffedd895ba83180f5960045111f0f92e4988fb43ad413e735bee691188fe1e9caf5c24988442b77640483f88dc6598f329379472cf4c7fafe
+  metadata.gz: eb41fc4c7f26bfd5494bdaf136b06f5fa14a415a981d842ab8e452fccba6c85489f8d9ccf297461d7fea075acf9d5e5817b5101de45f4e41b37b7ac13f328707
+  data.tar.gz: d30b99fb9d4ab56822c7f1b1c639ba90ec35c332a852b8ea1a65efaa395e7731e6e0c060d4572698bef43a6a8b110edde547a3b45a0614105b2826707c15a91b

data/README.md

@@ -1,3 +1,5 @@
+<img width="1200" alt="Capture d’écran 2023-07-30 à 21 42 11" src="https://github.com/rails-hackathon/team-173/assets/75135824/8e38a2bf-2ae8-4cc0-a99b-d553eb374a34">
+
 # 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. 
@@ -5,6 +7,11 @@ For productivity enhancement i also published a [VsCode extension](https://marke
 
 ![uistiti_extension](https://github.com/rails-hackathon/team-173/assets/75135824/afdcacc9-81b7-4ec1-9eb2-69e01a21af12)
 
+Example of something that have been built very fast with the GEM [demo](https://polished-field-4685.fly.dev/) (The source code is [here](https://github.com/troptropcontent/uistiti-showcase))
+
+[LookBook of the different component developped during the Hackathon](https://polished-field-4685.fly.dev/uistiti/lookbook/inspect/uistiti/alpha/button/playground)
+
+[Quick video to explain how it work](https://share.vidyard.com/watch/2JSLZidGCBD1UohAUYexEf?)
 
 ## Usage
 How to use the plug in :
@@ -44,9 +51,21 @@ Then, for each component you use you can import the related css
 @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.
+For Component with javascript behavior, there is no much things to do, the controllers are automatically registered through the asset pipe line and import-map:
 
+```javascript
+//app/assets/config/manifest.js
+...
+//= link uistiti_manifest.js
+```
+
+```ruby
+#config/importmap.rb
+...
+pin_all_from Uistiti.stimulus_controllers_directory, under: "controllers/uistiti"
+```
 
+and you should be good to go, no npm, nothing more 🥰
 
 ## Contributing
 Contribution directions go here.

data/app/assets/config/uistiti_manifest.js

@@ -1 +1 @@
-//= link_directory ../stylesheets/uistiti .css
+//= link_tree ../javascript

data/app/assets/javascript/controllers/uistiti/alpha/toggle_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus";
+
+// this stimulus controller can be registered with identifier : uistiti--alpha--toggle
+export default class extends Controller {
+  static values = {
+    url: String,
+    model: String,
+    field: String,
+  }
+
+  connect() {
+    console.log("Hello, from toggle stimulus controller !", this.element);
+  }
+
+  sendPutRequest(event) {
+    const input_element = event.target
+    const input_changed_to = input_element.checked
+    const csrf_token = document.getElementsByName('csrf-token')[0].content
+    const data = new FormData()
+    data.append( `${this.modelValue}[${this.fieldValue}]`,input_changed_to)
+
+    const requestOptions = {
+      method: 'PUT',
+      headers: { 'X-CSRF-Token': csrf_token },
+      body: data,
+    };
+    
+    console.log({requestOptions})
+    const revert_input = () => input_element.checked = !input_changed_to
+
+    fetch(this.urlValue, requestOptions)
+      .then(({status}) => status)
+      .then(status => {
+        const status_string = status.toString()
+        const is_put_request_succesfull = status_string[0] == '2'
+        !is_put_request_succesfull && revert_input()
+      })
+  }
+}

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

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

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

@@ -0,0 +1,61 @@
+/* CSS for Toggle  */
+.Toggle  {
+    &__button {
+      box-sizing: border-box;
+      display: inline-block;
+      width: $size-font-xxxl;
+      height: $size-font-xl;
+      background-color: $color-background-disabled;
+      &--off--disabled {
+        background-color: $color-background-disabled;
+      };
+      &--off--danger {
+        background-color: $color-background-error;
+      };
+      &--off--success {
+        background-color: $color-background-success;
+      };
+      transition: all .4s ease;
+      padding: $size-font-xxxxs;
+      border-radius: $size-font-xxl;
+      &:after,
+      &:before {
+        position: relative;
+        display: block; 
+        content: "";
+        width: 50%;
+        height: 100%;
+      }
+      &:after{
+        left: 0;
+        background-color: $color-base-white;
+        border-radius: 50%;
+        transition: all .2s ease;
+      }
+      &:before{
+        display: none;
+      }
+    }
+
+    &__input {
+      display: none;
+      &:checked {
+        +  .Toggle__button {
+          background-color: $color-background-success;
+          &--on--disabled {
+            background-color: $color-background-disabled;
+          };
+          &--on--danger {
+            background-color: $color-background-error;
+          };
+          &--on--success {
+            background-color: $color-background-success;
+          };
+          &:after{
+            left: 50%;
+          }
+        }
+      }
+    }
+  
+}

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

@@ -344,10 +344,10 @@ $color-font-inverse-error: #ef5350;
 $color-font-inverse-warning: #ffa726;
 $color-font-inverse-success: #66bb6a;
 $color-font-inverse-disabled: #f5f5f5;
-//################### FONT LINK ####################
+//################## FONT BUTTON ###################
 $color-font-button-primary: #ffffff;
 $color-font-button-secondary: #009688;
-//################## FONT BUTTON ###################
+//################### FONT LINK ####################
 $color-font-link-primary: $color-brand-primary-base;
 $color-font-link-secondary: $color-brand-secondary-base;
 $color-font-link-base: $color-font-base;
@@ -361,13 +361,17 @@ $radii-base-sm: 8px;
 //##################### SIZES ######################
 //##################################################
 //###################### FONT ######################
-$size-font-tiny: 0.75rem;
+$size-font-xxxxs: 0.05rem;
+$size-font-xxxs: 0.25rem;
+$size-font-xxs: 0.5rem;
+$size-font-xs: 0.75rem;
 $size-font-small: 0.875rem;
 $size-font-medium: 1rem;
 $size-font-large: 1.25rem;
 $size-font-xl: 1.5rem;
 $size-font-xxl: 2rem;
 $size-font-xxxl: 3rem;
+$size-font-xxxxl: 4rem;
 $size-font-base: 1rem;
 //###################### ICON ######################
 $size-icon-small: 1.5rem;

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

@@ -22,3 +22,4 @@
 @import "components/alpha/button";
 @import "components/alpha/form_submit";
 @import "components/alpha/form_input_group";
+@import "components/alpha/toggle";

data/app/components/previews/uistiti/alpha/button_preview.rb

@@ -6,12 +6,29 @@
 module Uistiti
   module Alpha
     class ButtonPreview < ViewComponent::Preview
+      # @!group Colors
+ 
+       def primary
+         render(Uistiti::Alpha::Button.new(color: :primary).with_content('Button'))
+       end 
+       
+       def secondary
+         render(Uistiti::Alpha::Button.new(color: :secondary).with_content('Button'))
+       end
+       
+       def danger
+         render(Uistiti::Alpha::Button.new(color: :danger).with_content('Button'))
+       end
+
+      # @!endgroup
+      
       # Simple button style
       
       # @param color select [primary, secondary, danger]
       def playground(color: 'primary')
         render(Uistiti::Alpha::Button.new(color:).with_content('Button'))
       end
+
     end
   end
 end

data/app/components/previews/uistiti/alpha/image_preview.rb

@@ -6,12 +6,38 @@
 module Uistiti
   module Alpha
     class ImagePreview < ViewComponent::Preview
+
+      # @!group Sizes
+      
+      def small
+        render(Uistiti::Alpha::Image.new(source: 'https://www.lesterresdenatae.fr/wp-content/uploads/2022/05/Masque-20.png', size: :small))
+      end
+
+      def medium
+        render(Uistiti::Alpha::Image.new(source: 'https://www.lesterresdenatae.fr/wp-content/uploads/2022/05/Masque-20.png', size: :medium))
+      end
+
+      def large
+        render(Uistiti::Alpha::Image.new(source: 'https://www.lesterresdenatae.fr/wp-content/uploads/2022/05/Masque-20.png', size: :large))
+      end
+
+      def xl
+        render(Uistiti::Alpha::Image.new(source: 'https://www.lesterresdenatae.fr/wp-content/uploads/2022/05/Masque-20.png', size: :xl))
+      end
+      
+      def xxl
+        render(Uistiti::Alpha::Image.new(source: 'https://www.lesterresdenatae.fr/wp-content/uploads/2022/05/Masque-20.png', size: :xxl))
+      end
+
+
+     # @!endgroup
+
       # Declare each possible params bellow, please see how to declare params and annotate previews https://lookbook.build/guide/previews/annotations
       
       # @param source      
       # @param size select [small, medium, large, xl, xxl]     
       def playground(source: 'https://www.lesterresdenatae.fr/wp-content/uploads/2022/05/Masque-20.png', size: 'large')
-        render(Uistiti::Alpha::Image.new(source:, size:))
+        render(Uistiti::Alpha::Image.new(source: , size:))
       end
     end
   end

data/app/components/previews/uistiti/alpha/toggle_preview.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+module Uistiti
+  module Alpha
+    class TogglePreview < ViewComponent::Preview
+      # Toggle
+      # ---------------
+      # On each changes, this component makes PUT request to @path with body sent as follow {@model: {@field: value}} where value is true/false for now.
+      # If the request retunr something else than a 2XX the toglle is reverted to its original state
+      #
+      # @param checked [Boolean]  
+      # @param path select [/uistiti/lookbook/dummy/success, /uistiti/lookbook/dummy/error]      
+      # @param model      
+      # @param field      
+      # @param color_on  select [disabled, success, danger]    
+      # @param color_off select [disabled, success, danger]
+      def playground(checked: false, path: '/uistiti/lookbook/dummy/success', model: 'automated_ticket', field: 'active', color_on: :success, color_off: :disabled)
+        render(Uistiti::Alpha::Toggle.new(checked:, path:, model:, field:, color_on:, color_off:))
+      end
+    end
+  end
+end

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

@@ -1,3 +1,3 @@
-<%= link_to @path, method: @method, class: classes do %>
+<%= link_to @path, method: @method, class: classes, data: {controller: "uistiti--alpha--link"} do %>
   <%= content ||  @text %>
 <% end %>

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

@@ -0,0 +1,4 @@
+<%= label_tag input_name, nil, class: 'Toggle', data: wrapper_data_set do %>
+  <%= check_box_tag input_name, @checked, @checked, class: 'Toggle__input', data: {action: "change->uistiti--alpha--toggle#sendPutRequest"} %>
+  <%= content_tag :div, nil, class: button_classes %>
+<% end %>

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

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Uistiti
+  module Alpha
+    class Toggle < ViewComponent::Base
+      def initialize(checked: , path:, model:, field:, color_on: :success, color_off: :disabled)
+        super()
+        
+        @checked = checked
+        @path = path        
+        @model = model        
+        @field = field        
+        @color_off = color_off        
+        @color_on = color_on        
+      end
+
+      private
+
+      def button_classes
+        [
+          "Toggle__button",
+          "Toggle__button--off--#{@color_off}",
+          "Toggle__button--on--#{@color_on}",
+        ]
+      end
+
+      def input_name
+        "toggle-#{@model}-#{@field}"
+      end
+
+      def wrapper_data_set
+        {
+          controller: 'uistiti--alpha--toggle',
+          'uistiti--alpha--toggle-url-value':  @path,
+          'uistiti--alpha--toggle-model-value': @model,
+          'uistiti--alpha--toggle-field-value': @field
+        }
+      end
+    end
+  end
+end

data/app/controllers/uistiti/lookbook/dummy_controller.rb

@@ -0,0 +1,19 @@
+module Uistiti
+  module Lookbook
+    class DummyController < ApplicationController
+      
+      #PUT /lookbook/dummy/success
+      #GET /lookbook/dummy/success
+      def success
+        render status: 200, json: {message: 'OK'}.to_json
+      end
+
+      #PUT /lookbook/dummy/error
+      #GET /lookbook/dummy/error
+      def error
+        puts params
+        render status: 400, json: {:error => 'Bad request'}.to_json
+      end
+    end
+  end
+end

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

@@ -5,12 +5,8 @@
     <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" %>
+    <%= javascript_importmap_tags %>
   </head>
 
   <body>

data/config/routes.rb

@@ -1,3 +1,8 @@
 Uistiti::Engine.routes.draw do
+  put '/lookbook/dummy/success', to: 'lookbook/dummy#success'
+  get '/lookbook/dummy/success', to: 'lookbook/dummy#success'
+  put '/lookbook/dummy/error', to: 'lookbook/dummy#error'
+  get '/lookbook/dummy/error', to: 'lookbook/dummy#error'
   mount Lookbook::Engine, at: "/lookbook"
+  #dummy routes for lookbook AJAX behavior testing
 end

data/lib/generators/uistiti/component_generator.rb

@@ -19,7 +19,7 @@ module Uistiti
     end
 
     def create_stimulus
-      template("component.js.tt", "app/assets/javascript/controllers/uistiti/#{status_path}#{underscore_name}/#{underscore_name}_controller.js")
+      template("component.js.tt", "app/assets/javascript/controllers/uistiti/#{status_path}#{underscore_name}_controller.js")
     end
 
     def create_preview

data/lib/uistiti/engine.rb

@@ -8,5 +8,9 @@ module Uistiti
     #Show to lookbook where it can find the previews
     Lookbook.config.preview_paths = [File.join(Uistiti::Engine.root, 'app/components/previews')]
     Lookbook.config.preview_layout = "uistiti/component_preview"
+
+    def self.stimulus_controllers_directory
+      File.join(root, 'app/assets/javascript/controllers/uistiti')
+    end 
   end
 end

data/lib/uistiti/version.rb

@@ -1,3 +1,3 @@
 module Uistiti
-  VERSION = "0.1.4"
+  VERSION = "0.2.5"
 end

data/lib/uistiti.rb

@@ -2,5 +2,7 @@ require "uistiti/version"
 require "uistiti/engine"
 
 module Uistiti
-  # Your code goes here...
+  def self.stimulus_controllers_directory
+    Uistiti::Engine.stimulus_controllers_directory
+  end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: uistiti
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.2.5
 platform: ruby
 authors:
 - Tom Ecrepont
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-30 00:00:00.000000000 Z
+date: 2023-08-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -70,15 +70,16 @@ 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/javascript/controllers/uistiti/alpha/button_controller.js
+- app/assets/javascript/controllers/uistiti/alpha/container_controller.js
+- app/assets/javascript/controllers/uistiti/alpha/flex_controller.js
+- app/assets/javascript/controllers/uistiti/alpha/form_input_group_controller.js
+- app/assets/javascript/controllers/uistiti/alpha/form_submit_controller.js
+- app/assets/javascript/controllers/uistiti/alpha/image_controller.js
+- app/assets/javascript/controllers/uistiti/alpha/link_controller.js
+- app/assets/javascript/controllers/uistiti/alpha/main_layout_controller.js
+- app/assets/javascript/controllers/uistiti/alpha/navbar_controller.js
+- app/assets/javascript/controllers/uistiti/alpha/toggle_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
@@ -88,6 +89,7 @@ files:
 - 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/components/alpha/toggle.scss
 - app/assets/stylesheets/uistiti/config/_variables.scss
 - app/assets/stylesheets/uistiti/uistiti.scss
 - app/components/previews/uistiti/alpha/button_preview.rb
@@ -97,6 +99,7 @@ files:
 - app/components/previews/uistiti/alpha/link_preview.rb
 - app/components/previews/uistiti/alpha/main_layout_preview.rb
 - app/components/previews/uistiti/alpha/navbar_preview.rb
+- app/components/previews/uistiti/alpha/toggle_preview.rb
 - app/components/uistiti/alpha/button.html.erb
 - app/components/uistiti/alpha/button.rb
 - app/components/uistiti/alpha/container.html.erb
@@ -115,7 +118,10 @@ files:
 - app/components/uistiti/alpha/main_layout.rb
 - app/components/uistiti/alpha/navbar.html.erb
 - app/components/uistiti/alpha/navbar.rb
+- app/components/uistiti/alpha/toggle.html.erb
+- app/components/uistiti/alpha/toggle.rb
 - app/controllers/uistiti/application_controller.rb
+- app/controllers/uistiti/lookbook/dummy_controller.rb
 - app/helpers/uistiti/application_helper.rb
 - app/jobs/uistiti/application_job.rb
 - app/mailers/uistiti/application_mailer.rb