uistiti 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: be75c25b3458c1725fc90ee1ae2a269d0a893b99cec73a2f959f8254a3c010e9
+  data.tar.gz: 8ad751062c1aa899d4dc99297a74539d930c552a3127cf5203322313a7c3c05e
+SHA512:
+  metadata.gz: da74b0ddbdb339df8763626723d26be39d76f6b3be157cd04f65ee34bd3e20b403b4dad8c4620e6a7163688d191d3b694982f07fb8c18a26ed05a220a824203c
+  data.tar.gz: 9494628a2c341348d1d22720c1e19b268e781500c0dfe417c604348150ee00797e1d3ddffa8c5a01fb55cd311978cf6d624d6de8a41e781c8b541afe031dd5c6

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2023 Tom Ecrepont
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,28 @@
+# Uistiti
+Short description and motivation.
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem "uistiti"
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install uistiti
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,8 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"

data/app/assets/config/uistiti_manifest.js

@@ -0,0 +1 @@
+//= link_directory ../stylesheets/uistiti .css

data/app/assets/javascript/controllers/uistiti/alpha/flex/flex_controller.js

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

data/app/assets/javascript/controllers/uistiti/alpha/image/image_controller.js

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

data/app/assets/javascript/controllers/uistiti/alpha/link/link_controller.js

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

data/app/assets/javascript/controllers/uistiti/alpha/main_layout/main_layout_controller.js

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

data/app/assets/javascript/controllers/uistiti/alpha/navbar/navbar_controller.js

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

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

@@ -0,0 +1,101 @@
+/* CSS for Flex  */
+
+.Flex {
+  display: flex;
+  gap: $size-space-small;
+  &--direction {
+    &--row {
+      flex-direction: row;
+    };
+    &--column {
+      flex-direction: column;
+    };
+  };
+  &--gap{
+    &--tiny {
+      gap: $size-space-tiny
+    }
+    &--small {
+      gap: $size-space-small
+    }
+    &--medium {
+      gap: $size-space-medium
+    }
+    &--large {
+      gap: $size-space-large
+    }
+    &--xl {
+      gap: $size-space-xl
+    }
+    &--xxl {
+      gap: $size-space-xxl
+    }
+  };
+  &--justify-content{
+    &--center {
+      justify-content: center
+    };
+    &--start {
+      justify-content: start
+    };
+    &--end {
+      justify-content: end
+    };
+    &--flex-start {
+      justify-content: flex-start
+    };
+    &--flex-end {
+      justify-content: flex-end
+    };
+    &--left {
+      justify-content: left
+    };
+    &--right {
+      justify-content: right
+    };
+    &--normal {
+      justify-content: normal;
+    };
+    &--space-between {
+      justify-content: space-between;
+    };
+    &--space-around {
+      justify-content: space-around;
+    };
+    &--space-evenly {
+      justify-content: space-evenly;
+    };
+    &--stretch {
+      justify-content: stretch;
+    };
+  };
+  &--align-items{
+    &--normal {
+      align-items: normal;
+    };
+    &--stretch {
+      align-items: stretch;
+    };
+    &--center {
+      align-items: center;
+    };
+    &--start {
+      align-items: start;
+    };
+    &--end {
+      align-items: end;
+    };
+    &--flex-start {
+      align-items: flex-start;
+    };
+    &--flex-end {
+      align-items: flex-end;
+    };
+    &--self-start {
+      align-items: self-start;
+    };
+    &--self-end {
+      align-items: self-end;
+    };
+  };
+};

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

@@ -0,0 +1,19 @@
+/* CSS for Image  */
+
+.Image {
+  &--small {
+    width: $size-image-small;
+  };
+  &--medium {
+    width: $size-image-medium;
+  };
+  &--large {
+    width: $size-image-large;
+  };
+  &--xl {
+    width: $size-image-xl;
+  };
+  &--xxl {
+    width: $size-image-xxl;
+  };
+}

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

@@ -0,0 +1,18 @@
+/* CSS for Link  */
+
+.Link {
+  text-decoration: none;
+  margin-block: auto;
+  &--inverse-base{
+    color: $color-font-link-inverse-base;
+  }
+  &--base{
+    color: $color-font-link-base;
+  }
+  &--primary{
+    color: $color-font-link-primary;
+  }
+  &--secondary{
+    color: $color-font-link-secondary;
+  }
+}

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

@@ -0,0 +1,7 @@
+/* CSS for MainLayout  */
+
+.MainLayout {
+  background-color: $color-background-base;
+  padding-block: $size-space-small;
+  padding-inline: $size-space-medium;
+}

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

@@ -0,0 +1,15 @@
+/* CSS for Navbar  */
+
+.Navbar {
+  padding: $size-space-medium;
+  
+  &--primary {
+    background-color: $color-brand-primary-base;
+    color: $color-font-inverse-base
+  };
+
+  &--secondary {
+    background-color: $color-brand-secondary-base;
+    color: $color-font-inverse-base
+  };
+}

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

@@ -0,0 +1,390 @@
+//##################################################
+//##################### COLORS #####################
+//##################################################
+//###################### RED #######################
+$color-base-red-50: #ffe5ee;
+$color-base-red-100: #ffcdd2;
+$color-base-red-200: #ef9a9a;
+$color-base-red-300: #e57373;
+$color-base-red-400: #ef5350;
+$color-base-red-500: #f44336;
+$color-base-red-600: #e53935;
+$color-base-red-700: #d32f2f;
+$color-base-red-800: #c62828;
+$color-base-red-900: #b71c1c;
+$color-base-red-a100: #ff8a80;
+$color-base-red-a200: #ff5252;
+$color-base-red-a400: #ff1744;
+$color-base-red-a700: #d50000;
+//###################### PINK ######################
+$color-base-pink-50: #fce4ec;
+$color-base-pink-100: #f8bbd0;
+$color-base-pink-200: #f48fb1;
+$color-base-pink-300: #f06292;
+$color-base-pink-400: #ec407a;
+$color-base-pink-500: #e91e63;
+$color-base-pink-600: #d81b60;
+$color-base-pink-700: #c2185b;
+$color-base-pink-800: #ad1457;
+$color-base-pink-900: #880e4f;
+$color-base-pink-a100: #ff80ab;
+$color-base-pink-a200: #ff4081;
+$color-base-pink-a400: #f50057;
+$color-base-pink-a700: #c51162;
+//##################### PURPLE #####################
+$color-base-purple-50: #f3e5f5;
+$color-base-purple-100: #e1bee7;
+$color-base-purple-200: #ce93d8;
+$color-base-purple-300: #ba68c8;
+$color-base-purple-400: #ab47bc;
+$color-base-purple-500: #9c27b0;
+$color-base-purple-600: #8e24aa;
+$color-base-purple-700: #7b1fa2;
+$color-base-purple-800: #6a1b9a;
+$color-base-purple-900: #4a148c;
+$color-base-purple-a100: #ea80fc;
+$color-base-purple-a200: #e040fb;
+$color-base-purple-a400: #d500f9;
+$color-base-purple-a700: #aa00ff;
+//################## DEEP-PURPLE ###################
+$color-base-deep-purple-50: #ede7f6;
+$color-base-deep-purple-100: #d1c4e9;
+$color-base-deep-purple-200: #b39ddb;
+$color-base-deep-purple-300: #9575cd;
+$color-base-deep-purple-400: #7e57c2;
+$color-base-deep-purple-500: #673ab7;
+$color-base-deep-purple-600: #5e35b1;
+$color-base-deep-purple-700: #512da8;
+$color-base-deep-purple-800: #4527a0;
+$color-base-deep-purple-900: #311b92;
+$color-base-deep-purple-a100: #b388ff;
+$color-base-deep-purple-a200: #7c4dff;
+$color-base-deep-purple-a400: #651fff;
+$color-base-deep-purple-a700: #6200ea;
+//##################### INDIGO #####################
+$color-base-indigo-50: #e8eaf6;
+$color-base-indigo-100: #c5cae9;
+$color-base-indigo-200: #9fa8da;
+$color-base-indigo-300: #7986cb;
+$color-base-indigo-400: #5c6bc0;
+$color-base-indigo-500: #3f51b5;
+$color-base-indigo-600: #3949ab;
+$color-base-indigo-700: #303f9f;
+$color-base-indigo-800: #283593;
+$color-base-indigo-900: #1a237e;
+$color-base-indigo-a100: #8c9eff;
+$color-base-indigo-a200: #536dfe;
+$color-base-indigo-a400: #3d5afe;
+$color-base-indigo-a700: #304ffe;
+//###################### BLUE ######################
+$color-base-blue-50: #e3f2fd;
+$color-base-blue-100: #bbdefb;
+$color-base-blue-200: #90caf9;
+$color-base-blue-300: #64b5f6;
+$color-base-blue-400: #42a5f5;
+$color-base-blue-500: #2196f3;
+$color-base-blue-600: #1e88e5;
+$color-base-blue-700: #1976d2;
+$color-base-blue-800: #1565c0;
+$color-base-blue-900: #0d47a1;
+$color-base-blue-a100: #82b1ff;
+$color-base-blue-a200: #448aff;
+$color-base-blue-a400: #2979ff;
+$color-base-blue-a700: #2962ff;
+//################### LIGHT-BLUE ###################
+$color-base-light-blue-50: #e1f5fe;
+$color-base-light-blue-100: #b3e5fc;
+$color-base-light-blue-200: #81d4fa;
+$color-base-light-blue-300: #4fc3f7;
+$color-base-light-blue-400: #29b6f6;
+$color-base-light-blue-500: #03a9f4;
+$color-base-light-blue-600: #039be5;
+$color-base-light-blue-700: #0288d1;
+$color-base-light-blue-800: #0277bd;
+$color-base-light-blue-900: #01579b;
+$color-base-light-blue-a100: #80d8ff;
+$color-base-light-blue-a200: #40c4ff;
+$color-base-light-blue-a400: #00b0ff;
+$color-base-light-blue-a700: #0091ea;
+//###################### CYAN ######################
+$color-base-cyan-50: #e0f7fa;
+$color-base-cyan-100: #b2ebf2;
+$color-base-cyan-200: #80deea;
+$color-base-cyan-300: #4dd0e1;
+$color-base-cyan-400: #26c6da;
+$color-base-cyan-500: #00bcd4;
+$color-base-cyan-600: #00acc1;
+$color-base-cyan-700: #0097a7;
+$color-base-cyan-800: #00838f;
+$color-base-cyan-900: #006064;
+$color-base-cyan-a100: #84ffff;
+$color-base-cyan-a200: #18ffff;
+$color-base-cyan-a400: #00e5ff;
+$color-base-cyan-a700: #00b8d4;
+//###################### TEAL ######################
+$color-base-teal-50: #e0f2f1;
+$color-base-teal-100: #b2dfdb;
+$color-base-teal-200: #80cbc4;
+$color-base-teal-300: #4db6ac;
+$color-base-teal-400: #26a69a;
+$color-base-teal-500: #009688;
+$color-base-teal-600: #00897b;
+$color-base-teal-700: #00796b;
+$color-base-teal-800: #00695c;
+$color-base-teal-900: #004d40;
+$color-base-teal-a100: #a7ffeb;
+$color-base-teal-a200: #64ffda;
+$color-base-teal-a400: #1de9b6;
+$color-base-teal-a700: #00bfa5;
+//##################### GREEN ######################
+$color-base-green-50: #e8f5e9;
+$color-base-green-100: #c8e6c9;
+$color-base-green-200: #a5d6a7;
+$color-base-green-300: #81c784;
+$color-base-green-400: #66bb6a;
+$color-base-green-500: #4caf50;
+$color-base-green-600: #43a047;
+$color-base-green-700: #388e3c;
+$color-base-green-800: #2e7d32;
+$color-base-green-900: #1b5e20;
+$color-base-green-a100: #b9f6ca;
+$color-base-green-a200: #69f0ae;
+$color-base-green-a400: #00e676;
+$color-base-green-a700: #00c853;
+//################## LIGHT-GREEN ###################
+$color-base-light-green-50: #f1f8e9;
+$color-base-light-green-100: #dcedc8;
+$color-base-light-green-200: #c5e1a5;
+$color-base-light-green-300: #aed581;
+$color-base-light-green-400: #9ccc65;
+$color-base-light-green-500: #8bc34a;
+$color-base-light-green-600: #7cb342;
+$color-base-light-green-700: #689f38;
+$color-base-light-green-800: #558b2f;
+$color-base-light-green-900: #33691e;
+$color-base-light-green-a100: #ccff90;
+$color-base-light-green-a200: #b2ff59;
+$color-base-light-green-a400: #76ff03;
+$color-base-light-green-a700: #64dd17;
+//###################### LIME ######################
+$color-base-lime-50: #f9fbe7;
+$color-base-lime-100: #f0f4c3;
+$color-base-lime-200: #e6ee9c;
+$color-base-lime-300: #dce775;
+$color-base-lime-400: #d4e157;
+$color-base-lime-500: #cddc39;
+$color-base-lime-600: #c0ca33;
+$color-base-lime-700: #afb42b;
+$color-base-lime-800: #9e9d24;
+$color-base-lime-900: #827717;
+$color-base-lime-a100: #f4ff81;
+$color-base-lime-a200: #eeff41;
+$color-base-lime-a400: #c6ff00;
+$color-base-lime-a700: #aeea00;
+//##################### YELLOW #####################
+$color-base-yellow-50: #fffde7;
+$color-base-yellow-100: #fff9c4;
+$color-base-yellow-200: #fff59d;
+$color-base-yellow-300: #fff176;
+$color-base-yellow-400: #ffee58;
+$color-base-yellow-500: #ffeb3b;
+$color-base-yellow-600: #fdd835;
+$color-base-yellow-700: #fbc02d;
+$color-base-yellow-800: #f9a825;
+$color-base-yellow-900: #f57f17;
+$color-base-yellow-a100: #ffff8d;
+$color-base-yellow-a200: #ffff00;
+$color-base-yellow-a400: #ffea00;
+$color-base-yellow-a700: #ffd600;
+//##################### AMBER ######################
+$color-base-amber-50: #fff8e1;
+$color-base-amber-100: #ffecb3;
+$color-base-amber-200: #ffe082;
+$color-base-amber-300: #ffd54f;
+$color-base-amber-400: #ffca28;
+$color-base-amber-500: #ffc107;
+$color-base-amber-600: #ffb300;
+$color-base-amber-700: #ffa000;
+$color-base-amber-800: #ff8f00;
+$color-base-amber-900: #ff6f00;
+$color-base-amber-a100: #ffe57f;
+$color-base-amber-a200: #ffd740;
+$color-base-amber-a400: #ffc400;
+$color-base-amber-a700: #ffab00;
+//##################### ORANGE #####################
+$color-base-orange-50: #fff3e0;
+$color-base-orange-100: #ffe0b2;
+$color-base-orange-200: #ffcc80;
+$color-base-orange-300: #ffb74d;
+$color-base-orange-400: #ffa726;
+$color-base-orange-500: #ff9800;
+$color-base-orange-600: #fb8c00;
+$color-base-orange-700: #f57c00;
+$color-base-orange-800: #ef6c00;
+$color-base-orange-900: #e65100;
+$color-base-orange-a100: #ffd180;
+$color-base-orange-a200: #ffab40;
+$color-base-orange-a400: #ff9100;
+$color-base-orange-a700: #ff6d00;
+//################## DEEP-ORANGE ###################
+$color-base-deep-orange-50: #fbe9e7;
+$color-base-deep-orange-100: #ffccbc;
+$color-base-deep-orange-200: #ffab91;
+$color-base-deep-orange-300: #ff8a65;
+$color-base-deep-orange-400: #ff7043;
+$color-base-deep-orange-500: #ff5722;
+$color-base-deep-orange-600: #f4511e;
+$color-base-deep-orange-700: #e64a19;
+$color-base-deep-orange-800: #d84315;
+$color-base-deep-orange-900: #bf360c;
+$color-base-deep-orange-a100: #ff9e80;
+$color-base-deep-orange-a200: #ff6e40;
+$color-base-deep-orange-a400: #ff3d00;
+$color-base-deep-orange-a700: #dd2c00;
+//##################### BROWN ######################
+$color-base-brown-50: #efebe9;
+$color-base-brown-100: #d7ccc8;
+$color-base-brown-200: #bcaaa4;
+$color-base-brown-300: #a1887f;
+$color-base-brown-400: #8d6e63;
+$color-base-brown-500: #795548;
+$color-base-brown-600: #6d4c41;
+$color-base-brown-700: #5d4037;
+$color-base-brown-800: #4e342e;
+$color-base-brown-900: #3e2723;
+//###################### GREY ######################
+$color-base-grey-50: #fafafa;
+$color-base-grey-100: #f5f5f5;
+$color-base-grey-200: #eeeeee;
+$color-base-grey-300: #e0e0e0;
+$color-base-grey-400: #bdbdbd;
+$color-base-grey-500: #9e9e9e;
+$color-base-grey-600: #757575;
+$color-base-grey-700: #616161;
+$color-base-grey-800: #424242;
+$color-base-grey-900: #212121;
+//################### BLUE-GREY ####################
+$color-base-blue-grey-50: #eceff1;
+$color-base-blue-grey-100: #cfd8dc;
+$color-base-blue-grey-200: #b0bec5;
+$color-base-blue-grey-300: #90a4ae;
+$color-base-blue-grey-400: #78909c;
+$color-base-blue-grey-500: #607d8b;
+$color-base-blue-grey-600: #546e7a;
+$color-base-blue-grey-700: #455a64;
+$color-base-blue-grey-800: #37474f;
+$color-base-blue-grey-900: #263238;
+//##################### WHITE ######################
+$color-base-white: #ffffff;
+//##################### BLACK ######################
+$color-base-black: #000000;
+//################### BACKGROUND ###################
+$color-background-base: #ffffff;
+$color-background-alt: #cfd8dc;
+$color-background-disabled: #cfd8dc;
+$color-background-inverse: #263238;
+$color-background-success: #43a047;
+$color-background-error: #e53935;
+$color-background-warning: #ef6c00;
+$color-background-info: #039be5;
+$color-background-link: #039be5;
+$color-background-low-priority: #757575;
+//############### BACKGROUND BUTTON ################
+$color-background-button-primary-base: #009688;
+$color-background-button-primary-disabled: #4db6ac;
+$color-background-button-primary-active: #00796b;
+$color-background-button-secondary-base: #3f51b5;
+$color-background-button-secondary-disabled: #7986cb;
+$color-background-button-secondary-active: #303f9f;
+//############### BACKGROUND OVERLAY ###############
+$color-background-overlay-light: rgba(255, 255, 255, 0.8);
+$color-background-overlay-dark: rgba(0, 0, 0, 0.27);
+//##################### BORDER #####################
+$color-border-light: #eeeeee;
+$color-border-base: #e0e0e0;
+$color-border-dark: #bdbdbd;
+$color-border-focus: #009688;
+$color-border-error: #e53935;
+$color-border-warning: #fb8c00;
+$color-border-success: #43a047;
+//################# BORDER BUTTON ##################
+$color-border-button-secondary-base: #e0e0e0;
+$color-border-button-secondary-active: #303f9f;
+$color-border-button-secondary-disabled: #eeeeee;
+//##################### BRAND ######################
+$color-brand-primary-lighter: #b2dfdb;
+$color-brand-primary-light: #4db6ac;
+$color-brand-primary-base: #009688;
+$color-brand-primary-dark: #00796b;
+$color-brand-primary-darker: #004d40;
+$color-brand-secondary-lighter: #c5cae9;
+$color-brand-secondary-light: #7986cb;
+$color-brand-secondary-base: #3f51b5;
+$color-brand-secondary-dark: #303f9f;
+$color-brand-secondary-darker: #1a237e;
+//###################### FONT ######################
+$color-font-base: #212121;
+$color-font-secondary: #424242;
+$color-font-tertiary: #757575;
+$color-font-quaternary: #bdbdbd;
+$color-font-link: #009688;
+$color-font-active: #3f51b5;
+$color-font-error: #e53935;
+$color-font-warning: #ef6c00;
+$color-font-success: #43a047;
+$color-font-disabled: #424242;
+$color-font-inverse-base: #ffffff;
+$color-font-inverse-secondary: #f5f5f5;
+$color-font-inverse-tertiary: #eeeeee;
+$color-font-inverse-quaternary: #bdbdbd;
+$color-font-inverse-link: #4db6ac;
+$color-font-inverse-active: #7986cb;
+$color-font-inverse-error: #ef5350;
+$color-font-inverse-warning: #ffa726;
+$color-font-inverse-success: #66bb6a;
+$color-font-inverse-disabled: #f5f5f5;
+//################### FONT LINK ####################
+$color-font-button-primary: #ffffff;
+$color-font-button-secondary: #009688;
+//################## FONT BUTTON ###################
+$color-font-link-primary: $color-brand-primary-base;
+$color-font-link-secondary: $color-brand-secondary-base;
+$color-font-link-base: $color-font-base;
+$color-font-link-inverse-base: $color-font-inverse-base;
+//##################################################
+//##################### RADII ######################
+//##################################################
+$radii-base-none: 0;
+$radii-base-sm: 8px;
+//##################################################
+//##################### SIZES ######################
+//##################################################
+//###################### FONT ######################
+$size-font-tiny: 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-base: 1rem;
+//###################### ICON ######################
+$size-icon-small: 1.5rem;
+$size-icon-base: 2rem;
+$size-icon-large: 2.5rem;
+$size-icon-xl: 3rem;
+$size-icon-xxl: 5rem;
+//###################### IMAGE #####################
+$size-image-small: 1.5rem;
+$size-image-medium: 2rem;
+$size-image-large: 2.5rem;
+$size-image-xl: 3rem;
+$size-image-xxl: 5rem;
+//##################### SPACE ######################
+$size-space-tiny: 0.25rem;
+$size-space-small: 0.5rem;
+$size-space-medium: 1rem;
+$size-space-large: 1.5rem;
+$size-space-xl: 2rem;
+$size-space-xxl: 3rem;
+$size-space-base: 1rem;

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

@@ -0,0 +1,20 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */
+@import "components/alpha/link";
+@import "components/alpha/main_layout";
+@import "components/alpha/flex";
+@import "components/alpha/navbar";
+@import "components/alpha/image";

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

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

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

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Uistiti
+  module Alpha
+    class Flex < ViewComponent::Base
+      renders_many :items
+      attr_reader :direction, :gap, :justify_content, :align_items, :html_options
+      def initialize(direction: , gap: nil, justify_content: nil, align_items: nil, html_options: {})
+        super()
+        
+        @direction = direction        
+        @justify_content = justify_content        
+        @align_items = align_items        
+        @gap = gap
+        @html_options = html_options        
+      end
+
+      private
+
+      def classes 
+        [
+          "Flex",
+          "Flex--direction--#{direction}",
+          ("Flex--gap--#{gap}" if gap),
+          ("Flex--justify-content--#{justify_content}" if justify_content),
+          ("Flex--align-items--#{align_items}" if align_items),
+          html_options[:class]
+        ]
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<%= image_tag(@source, class: classes) %>

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Uistiti
+  module Alpha
+    class Image < ViewComponent::Base
+      def initialize(source:, size:)
+        super()
+        
+        @source = source        
+        @size = size        
+      end
+
+      private
+
+      def classes
+        [
+          'Image',
+          "Image--#{@size}"
+        ]
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= link_to @path, method: @method, class: classes do %>
+  <%= content ||  @text %>
+<% end %>

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Uistiti
+  module Alpha
+    class Link < ViewComponent::Base
+      def initialize(path:, method: :get, color: nil, text: nil)
+        super()
+        
+        @path = path        
+        @method = method   
+        @color = color  
+        @text = text   
+      end
+
+      private
+
+      def classes
+        [
+          'Link',
+          "Link--#{@color}"
+        ].join(' ')
+      end
+    end
+  end
+end

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

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

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

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

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

@@ -0,0 +1,10 @@
+<%= render Uistiti::Alpha::Flex.new(direction: :row, justify_content: 'space-between', html_options: {class: classes})  do %>
+  <%= render Uistiti::Alpha::Link.new(path: '/', color: 'inverse-base') do %>
+    <%= logo %>
+  <% end %>
+  <%= render Uistiti::Alpha::Flex.new(direction: :row) do %>
+    <% links.each do |link| %>
+      <%= link  %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Uistiti
+  module Alpha
+    class Navbar < ViewComponent::Base
+      renders_one :logo
+      renders_many :links, Uistiti::Alpha::Link
+
+      def initialize(color:)
+        super()
+   
+        @color = color        
+      end
+
+      private
+
+      def classes
+        [
+          'Navbar',
+          "Navbar--#{@color}"
+        ]
+      end
+    end
+  end
+end

data/app/controllers/uistiti/application_controller.rb

@@ -0,0 +1,4 @@
+module Uistiti
+  class ApplicationController < ActionController::Base
+  end
+end

data/app/helpers/uistiti/application_helper.rb

@@ -0,0 +1,4 @@
+module Uistiti
+  module ApplicationHelper
+  end
+end

data/app/jobs/uistiti/application_job.rb

@@ -0,0 +1,4 @@
+module Uistiti
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/uistiti/application_mailer.rb

@@ -0,0 +1,6 @@
+module Uistiti
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/models/uistiti/application_record.rb

@@ -0,0 +1,5 @@
+module Uistiti
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

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

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Uistiti</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= stylesheet_link_tag    "uistiti/application", media: "all" %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/config/routes.rb

@@ -0,0 +1,3 @@
+Uistiti::Engine.routes.draw do
+  mount Lookbook::Engine, at: "/lookbook"
+end

data/lib/generators/uistiti/component_generator.rb

@@ -0,0 +1,63 @@
+module Uistiti
+  class ComponentGenerator < Rails::Generators::NamedBase
+    source_root File.expand_path("templates", __dir__)
+    
+    argument :arguments, type: :array, default: []
+    class_option :status, default: "alpha", desc: "Status of the component. One of alpha, beta or stable"
+    def create_controller
+      template("component.tt", "app/components/uistiti/#{status_path}#{underscore_name}.rb")
+    end
+
+    def create_template
+      template("component.html.tt", "app/components/uistiti/#{status_path}#{underscore_name}.html.erb")
+    end
+
+    def create_and_import_css
+      file_path = "app/assets/stylesheets/uistiti/components/#{status_path}#{underscore_name}.scss"
+      template("component.scss.tt", file_path)
+      insert_into_file("app/assets/stylesheets/uistiti/uistiti.scss", "@import \"components/#{status_path}#{underscore_name}\";\n")
+    end
+
+    def create_stimulus
+      template("component.js.tt", "app/assets/javascript/controllers/uistiti/#{status_path}#{underscore_name}/#{underscore_name}_controller.js")
+    end
+
+    def create_preview
+      template("preview.tt", "test/components/previews/uistiti/#{status_path}#{underscore_name}_preview.rb")
+    end
+    
+    private
+
+    def status
+      options[:status]
+    end
+
+    def status_path
+      return if status == "stable"
+  
+      "#{status}/"
+    end
+
+    def underscore_name
+      name.underscore
+    end
+
+    def module_name
+      return if status == "stable"
+  
+      status.camelize
+    end
+
+    def status_module
+      return if status == "stable"
+  
+      "#{status.camelize}::"
+    end
+
+    def stimulus_controller_identifier
+      status_identifier = "--#{status}" unless status == "stable"
+      name_identifier = underscore_name.gsub("_", "-")
+      "uistiti#{status_identifier}--#{name_identifier}"
+    end
+  end
+end

data/lib/generators/uistiti/templates/component.html.tt

@@ -0,0 +1,3 @@
+<div>
+  Put the html template of <%= class_name %> here
+</div>

data/lib/generators/uistiti/templates/component.js.tt

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

data/lib/generators/uistiti/templates/component.scss.tt

@@ -0,0 +1,5 @@
+/* CSS for <%= class_name %>  */
+
+.<%= class_name %> {
+
+}

data/lib/generators/uistiti/templates/component.tt

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Uistiti
+  <%= "module #{module_name}" if status_module %>
+    class <%= class_name %> < ViewComponent::Base
+      def initialize(<%= arguments.map{|argument| argument + ':'}.join(', ') %>)
+        super()
+        <% arguments.each do |argument| %>
+        <%= "@#{argument} = #{argument}" -%>
+        <% end %>
+      end
+    end
+  <%= "end" if status_module %>
+end

data/lib/generators/uistiti/templates/preview.tt

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Uistiti
+  module <%= module_name %>
+    class <%= class_name %>Preview < ViewComponent::Preview
+      # Declare each possible params bellow, please see how to declare params and annotate previews https://lookbook.build/guide/previews/annotations
+      <% arguments.each do |argument| %>
+      <%= "# @param #{argument}" -%>
+      <% end %>
+      def playground(<%= arguments.map{|argument| argument + ': ' + '\'some value\''}.join(', ') %>)
+        render(Uistiti::<%= status_module %><%= class_name %>.new(<%= arguments.map{|argument| argument + ':'}.join(', ') %>))
+      end
+    end
+  end
+end

data/lib/generators/uistiti/templates/spec.tt

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+# we need to add specs here for <%= status_module %><%= class_name %>

data/lib/tasks/uistiti_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :uistiti do
+#   # Task goes here
+# end

data/lib/uistiti/engine.rb

@@ -0,0 +1,12 @@
+require 'lookbook'
+require 'view_component'
+
+module Uistiti
+  class Engine < ::Rails::Engine
+    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"
+  end
+end

data/lib/uistiti/version.rb

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

data/lib/uistiti.rb

@@ -0,0 +1,6 @@
+require "uistiti/version"
+require "uistiti/engine"
+
+module Uistiti
+  # Your code goes here...
+end

metadata

@@ -0,0 +1,139 @@
+--- !ruby/object:Gem::Specification
+name: uistiti
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Tom Ecrepont
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2023-07-30 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.6
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.6
+- !ruby/object:Gem::Dependency
+  name: view_component
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.1'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.1'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+- !ruby/object:Gem::Dependency
+  name: lookbook
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.5
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.5
+description: Ui responsive primitives with javascript and css included for increased
+  productivity
+email:
+- tomecrepont@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/uistiti_manifest.js
+- app/assets/javascript/controllers/uistiti/alpha/flex/flex_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/flex.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/flex.html.erb
+- app/components/uistiti/alpha/flex.rb
+- app/components/uistiti/alpha/image.html.erb
+- app/components/uistiti/alpha/image.rb
+- app/components/uistiti/alpha/link.html.erb
+- app/components/uistiti/alpha/link.rb
+- app/components/uistiti/alpha/main_layout.html.erb
+- app/components/uistiti/alpha/main_layout.rb
+- app/components/uistiti/alpha/navbar.html.erb
+- app/components/uistiti/alpha/navbar.rb
+- app/controllers/uistiti/application_controller.rb
+- app/helpers/uistiti/application_helper.rb
+- app/jobs/uistiti/application_job.rb
+- app/mailers/uistiti/application_mailer.rb
+- app/models/uistiti/application_record.rb
+- app/views/layouts/uistiti/application.html.erb
+- config/routes.rb
+- lib/generators/uistiti/component_generator.rb
+- lib/generators/uistiti/templates/component.html.tt
+- lib/generators/uistiti/templates/component.js.tt
+- lib/generators/uistiti/templates/component.scss.tt
+- lib/generators/uistiti/templates/component.tt
+- lib/generators/uistiti/templates/preview.tt
+- lib/generators/uistiti/templates/spec.tt
+- lib/tasks/uistiti_tasks.rake
+- lib/uistiti.rb
+- lib/uistiti/engine.rb
+- lib/uistiti/version.rb
+homepage: https://github.com/rails-hackathon/team-173
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/rails-hackathon/team-173
+  source_code_uri: https://github.com/rails-hackathon/team-173
+  changelog_uri: https://github.com/rails-hackathon/team-173
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.4.15
+signing_key:
+specification_version: 4
+summary: Ready to use ViewComponent libray
+test_files: []